WARNING

Use tokens from the @semcore/theme package instead of @semcore/core, as they will be removed from the core package starting from version 17.

Description

Design tokens are variables that store visual design choices (colors, fonts, spaces, opacity, box-shadows, etc.). The most important thing is that tokens ensure the same style names and values are used in design files and code.

Intergalactic Design System has:

• set of base tokens that define a base palette;
• set of semantic tokens which are applied across all components and even the chart library.

Base tokens

Base tokens include:

• our product palette;
• font size, line height, font weight, and letter spacing values;
• the base spacing and sizing scale;
• sizing;
• spacing;
• the base border radius scale;
• breakpoints.

Semantic tokens

It's a list of tokens for components and charts for the default Intergalactic theme.

Semantic tokens include:

• colors;
• box shadows;
• border radius;
• form control heights;
• opacity;
• z-index;
• animation durations.

To learn more about the tokens names, see Token naming structure section.

Stylelint plugin

The stylelint plugin helps developers to avoid mistakes in the design token names. It should be installed as a separate package.

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard"],
  "plugins": ["@semcore/stylelint-plugin"],
  "rules": {
    "intergalactic/design-tokens": true
  }
}

Available options

• include — adds custom design tokens to the list of allowed tokens.
• exclude — removes design tokens from the list of allowed tokens.
• tokensSource — path to a JS module with the design token map (expects a default export). Use node_modules/@semcore/theme/lib/light.js.
• prefix — design tokens (default is --intergalactic-). Only CSS variables with this prefix are considered as design tokens.