Slab Tokens

This package is the pipeline for importing Figma tokens defined in Token Foundations and then outputing in appropriate formats for web, the marketing website, and slab design system itself. This package uses Terrazzo to manage the conversion from the Design Token Community Group specification which is a universal token specification. The package itself exports a few endpoints for consumers to use:

• @thatch-health/slab-tokens/tokens-raw - The raw JSON values of the DTCG specification downloaded from Figma
• @thatch-health/slab-tokens/css - The output from terrazzo using the css plugin
• @thatch-health/slab-tokens/tailwind-v3-plugin - A plugin for tailwind v3 that maps css variables

Development

• Install dependencies:

vp install

• Build the library:

vp pack

Figma Conversion

While Figma does export tokens in a DTCG format it does not do appropriate unit conversions for tokens like using rem and px for certain spacing tokens. The way the conversion works is looking at the tokens $.extensions.['com.figma.scopes'] value in order to see what the usages are. Rather than always using rem units, we map tokens to the appropriate unit based on the use case. Token mappings are as follows:

| Figma Scope | Unit type | | ------------- | --------- | | CORNER_RADIUS | px | | GAP | px | | STROKE_FLOAT | px | | WIDTH_HEIGHT | rem |

All color tokens use the srgb color space

Typography tokens need to be merged into a typography DTCG $type. This can be done by collapsing typography types from type.tokens.json where the structure is Display.Large.Size to display.large with the following mapping of units:

| Figma Scope | Unit type | DTCG type | | -------------- | --------- | ------------- | | FONT_SIZE | rem | fontSize | | FONT_FAMILY | string | fontFamily | | FONT_STYLE | number | fontWeight | | LINE_HEIGHT | number | lineHeight | | LETTER_SPACING | rem | letterSpacing |

Note: In Figma, variable line height is represented in figma as a pixel unit, therefore, line height is converted to a percentage value of the typeography style's font size.

Importing tokens from Figma

Importing tokens from Figma is currently a manual process. In order to import tokens, you need to right click each collection and press export. Tokens are then placed into this file structure:

tokens-raw-import/
├── color/
│   └── [mode].tokens.json
├── color-core.tokens.json
├── color-primitives.tokens.json
├── spacing.tokens.json
├── spacing-primitives.tokens.json
├── type.tokens.json
└── type-primitives/
    └── [mode].tokens.json

When extracting tokens, you will have to format the tokens as they're exported which means that files will be downloaded as the collection name and then you'll need to rename the extracted json file to match the token name.

Collection with only one mode

1. Download file from figma by right clicking and selecting "Export modes"
2. Unzip directory
3. Rename the extracted file, default.tokens.json, to [collection name in kebab case].tokens.json

Collection with many modes

1. Download file from figma by right clicking and selecting "Export modes"
2. Unzip directory
3. Rename the directory file to kebab case, all files nested should already be in the correct format.

Further reading

Our docs

• About this package
• About our color tokens
• The strategy in our tokens

External docs

• Mode.place
• What are design tokens
• DTCG