@un/themes-core

Style-dictionary

The themes core generates design tokens by using Style Dictionary.

Generate tokens npm run build

Using existing theme

TODO: Add paragraph import variables from @un/themes-core/scss/variables;

Building a theme

Generate Source json on your own

The source can be json, preferably generated from Figma using Design Tokens.

An example can be found in tokens/design-tokens.tokens.json

// Add this to your package.json to generate a theme
scripts: {
    "build:theme": "node buildTheme.js",
}

// buildTheme.js configuration
const { config } = require('@un/themes-core/config.js');

/*
config() can be configured
source: defines the lookup for finding
Example can be found in tokens/design-tokens.tokens.json
*/
const source = 'tokens/**/*.json';

// BuildPath: Output for the build
const buildPath = 'dist';

config({ source, buildPath });