Tokens Web Platform

---

tags: [tokens]

Calcite Tokens platform output

Calcite Core and Semantic tokens are currently provided for the following platforms.

• Web
  • CSS
  • SCSS
  • JSON
  • JS
• Figma

CSS

Tokens are utilized within Calcite Component as CSS variables to allow for customization of Calcite web components with a client side API. Component tokens are currently only available by importing Calcite Components. When tokens are built for the CSS web platform empty or "default" parts of the naming schema are ignored and the tier is removed from the name as each set of tokens under a tier is generated into a single file under the tier name semantic = semantic.css.

flowchart TD
    note("This is a reference to a core variable")-.->token

    subgraph one
        system('calcite') --> token
        tier('semantic') --> token
        type('color') --> token
        group('foreground') --> token
        scale('1') --> token
    end
    subgraph two
        token["`{calcite.core.color.neutral.blk.000}`"]
        tokenTransformer{{ Token Transformer }}
        %% # is escaped as #35; see https://mermaid.js.org/syntax/flowchart.html#entity-codes-to-escape-characters
        cssToken("--calcite-color-foreground-1: #35;ffffff;")
        token-->tokenTransformer-- semantic.css -->cssToken
    end

Loading

CSS variable fallback pattern

CSS variables allow for fallbacks as the second optional argument.

[CSS style property]: var([calcite-component-variable], var([deprecated-calcite-variable], [default-value-of-calcite-component-token]));

Results in something like

background-color: var(--calcite-button-background-color, var(--calcite-el-color-background, var(--calcite-internal-button-background-color)));

Component tokens

For more information on component tokens, checkout the component tokens page.