Config Tokens

@aleph-alpha/config-tokens

Design tokens for Aleph Alpha frontends, derived from the Figma library via Tokens Studio and Style Dictionary. Exposes the processed tokens as JSON so other packages can consume them.

The UnoCSS presets that turn these tokens into utility classes and CSS variables live in @aleph-alpha/config-unocss. Embedded web fonts (Raleway, Roboto, Montserrat, Inter) live in @aleph-alpha/config-fonts.

Installation

pnpm add @aleph-alpha/config-tokens

Usage

Import token sets directly as JSON:

import lightModeSet from '@aleph-alpha/config-tokens/sd-output/light-mode.json';
import darkModeSet from '@aleph-alpha/config-tokens/sd-output/dark-mode.json';
import spacingsSet from '@aleph-alpha/config-tokens/sd-output/spacings.json';
import boxShadowsSet from '@aleph-alpha/config-tokens/sd-output/box-shadows.json';
import typographySet from '@aleph-alpha/config-tokens/sd-output/typography.json';

For UnoCSS consumers, use @aleph-alpha/config-unocss instead — it already wires these JSON files into a preset stack with CSS custom properties, theme mapping, and web fonts.

Token Pipeline

The package's purpose is to take Figma Tokens via Tokens Studio and transform them into JSON files that downstream packages (UnoCSS preset, MUI palette, …) can consume.

The build steps are:

1. Designer pushes token changes from Figma to tokens.json and opens a MR.
2. When the MR is merged, the pipeline runs and triggers the build process.
3. Tokens from tokens.json are transformed, split into different categories, and stored in the transformed-tokens directory with token-transformer so Style Dictionary can read them. Categories are light-mode, dark-mode, and global.
4. The transformed tokens are processed with Style Dictionary to generate token sets in sd-output/.
5. Consumers (e.g. @aleph-alpha/config-unocss) read the sd-output/ JSON via subpath imports.

graph TD
    A[Designer pushes token changes from Figma to tokens.json] --> B[Open MR]
    B --> C{MR merged?}
    C -->|Yes| D[Pipeline runs]
    D --> E[Trigger build process]
    E --> F[Transform and split tokens with token-transformer]
    F --> G[Store transformed tokens in transformed-tokens directory]
    G --> H[Process tokens with style-dictionary]
    H --> I[Store processed tokens in sd-output directory]
    C -->|No| B
    subgraph Token Categories
        F --> F1[light-mode]
        F --> F2[dark-mode]
        F --> F3[global]
    end

Development

pnpm install
pnpm build

Config Tokens helps in UI Customization

Read more here

References

• @tokens-studio/sd-transforms
• token-transformer
• style-dictionary