Design tokens (WIP)
Description
Beta: The --token-* CSS custom properties are in beta. We encourage you to start using them and welcome your feedback. The token API may still change, but we will communicate any breaking changes.
The design tokens are exported manually from Figma and converted to CSS variables with the make-properties script. We currently generate color and radius tokens. Typography is skipped.
Overview
- Design tokens are not automatically exported from Figma.
- We generate color tokens and radius values. Typography aliases and string values are skipped for now.
- We export Foundation colors, plus light and dark brand token modes for DNB and Sbanken (Carnegie is light-only for now)
How to update
1. Exporting design tokens
We currently export the Figma variable collections for:
- "Foundation" collection "colors" (
color.tokens.json) - "💻 Eufemia - Web" collection "brand" with modes:
- "dnb-light" (
brand/dnb-light.tokens.json) - "dnb-dark" (
brand/dnb-dark.tokens.json) - "sbanken-light" (
brand/sbanken-light.tokens.json) - "sbanken-dark" (
brand/sbanken-dark.tokens.json) - "dnbcarnegie-light" (
brand/dnbcarnegie-light.tokens.json)
- "dnb-light" (
These files are manually exported from Figma. Place color.tokens.json directly in packages/dnb-eufemia/src/style/themes/figma, and place the brand-mode exports in its brand subfolder.
Detailed steps:
- Go to the "💻 Eufemia - Web" file in Figma. (You need edit permissions to see sub-collections)
- Active "Design" mode.
- Click the "Open variables" icon next to the label "Variables" in the right side-menu (must deselect elements to see the side-menu).
- Click the "Collections options" icon next to the "Collections" heading and ensure "All collections" is selected.
- Right click the collections "brand" and "colors" and select "Export Modes".
- Unzip the downloaded JSON files and place them in
packages/dnb-eufemia/src/style/themes/figma, using the relative filenames listed above.
We export the collections from the same Figma file in order to ensure the collections are in sync. Each brand-mode export is a complete snapshot of the collection, so light and dark files also contain shared font and radius values. The generator filters unsupported typography values and produces the mode-specific CSS from these complete exports.
2. Generate CSS files
The CSS files are automatically generated during the "Prebuild" step by the makePropertiesFile.ts script (packages/dnb-eufemia/scripts/prebuild/tasks/makePropertiesFile.ts).
Generate locally (manual)
To generate the files manually you can run the command yarn workspace @dnb/eufemia make-properties.
Naming conventions/transforms
Since Figma has different rules and limitations than CSS we have established some naming conventions to avoid errors.
- only use alphanumeric characters. (a-z and 0-9)
- Variables are not case-sensitive. (
onDarkandondarkare considered the same variable) - We use dashes (
-) to separate groups and words.
Transforms
During the CSS generation, Figma variables are converted to lower case. And groups are separated by dashes (-).
Only characters a-z A-Z 0-9. and - are supported. Any unsupported characters will throw an error.
We also add the prefix token to the variables from the Brand collection.
Example
Figma variable: Color/Dimmer/Action-Pressed-Subtle-OnDark
CSS variable: --token-color-dimmer-action-pressed-subtle-ondark
Potential issues
Even following all the rules, we still risk naming overlap since groups and words use the same separator in CSS color/action/pressed and color/action-pressed would map to the same variable.
But these will at least be caught on build.