Generated CSS from token

Transforming Tokens into Dynamic CSS

Transformation of Token Keys: Token keys are transformed into kebab-case format. For tokens with multiple children, the package concatenates the parent key with all children keys.
Theme-specific Token Handling: Tokens located within a theme other than the `global` theme will be utilized with the `!important` keyword. This approach is adopted as a precautionary measure, especially when a variable shares the same name between themes but contains different values.
Usage with Media Queries: Some design tokens, such as typography tokens, are not designed to work directly with media queries. For example, when defining typography with varying font sizes based on screen size, it is crucial to maintain distinct tokens. It is recommended to initially create tokens for smaller screens before addressing larger screen configurations. See the Typography page.

Simple token

Token

tokens.json

{
  "global": {
    "TOKEN_NAME": {
      "value": "TOKEN_VALUE",
      "type": "TOKEN_TYPE"
    }
  }
}

Generated CSS

base-global.css

@layer base {
  :root {
    --token-name: TOKEN_VALUE;
  }
}

Token with children

Token

tokens.json

{
  "global": {
    "TOKEN_NAME_PARENT": {
      "TOKEN_NAME_CHILDREN": {
        "value": "TOKEN_VALUE",
        "type": "TOKEN_TYPE"
      }
    }
  }
}

Generated CSS

base-global.css

@layer base {
  :root {
    --token-name-parent-token-name-children: TOKEN_VALUE;
  }
}

Theme token

Token

tokens.json

{
  "dark": {
    "TOKEN_NAME": {
      "value": "TOKEN_VALUE",
      "type": "TOKEN_TYPE"
    }
  }
}

Generated CSS

dark-global.css

@layer base {
  .dark {
    --token-name: TOKEN_VALUE !important;
  }
}

	Token	Generated CSS
Simple token	tokens.json `{ "global": { "TOKEN_NAME": { "value": "TOKEN_VALUE", "type": "TOKEN_TYPE" } } }`	base-global.css `@layer base { :root { --token-name: TOKEN_VALUE; } }`
Token with children	tokens.json `{ "global": { "TOKEN_NAME_PARENT": { "TOKEN_NAME_CHILDREN": { "value": "TOKEN_VALUE", "type": "TOKEN_TYPE" } } } }`	base-global.css `@layer base { :root { --token-name-parent-token-name-children: TOKEN_VALUE; } }`
Theme token	tokens.json `{ "dark": { "TOKEN_NAME": { "value": "TOKEN_VALUE", "type": "TOKEN_TYPE" } } }`	dark-global.css `@layer base { .dark { --token-name: TOKEN_VALUE !important; } }`