JSPM – @progressiveui/themes-core@0.4.1

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@progressiveui/themes-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

themes-core

The themes core generates design tokens by using Style Dictionary.

Using existing theme

TODO: Add paragraph

import variables from @progressiveui/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("@progressiveui/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 });

Development

`build`

Builds themes from existing raw tokens.

yarn build

`build:tokens`

A shorthand command that executes sync:tokens, filter:theme, and build. This script does the synchronization of design tokens, filtering of theme data, and the final theme build.

yarn build:tokens

`sync:tokens`

Downloads the latest tokens.json (Figma Tokens) from the tokens repository.

Create a .env with GIT_ACCESS_TOKEN.

yarn sync:tokens

`filter:theme`

TODO: Remove this once the token source is cleaned up.

Prepares raw tokens and cleans them up.

yarn filter:theme