D4L Design Tokens

💄 Design tokens of the D4L design system

Technologies

• Style Dictionary
• Stencil
• TypeScript
• D4L Web Components
• Netlify Functions

Strucutre

├── config.json
├── app
│  ├── tokens/
│     ├── color/
│        ├── base.json
├── build/
│  ├── web/
│     ├── \_variables.scss

1. config.json is the place where we can configure style-dictionary and tell it how to build.
2. app contains the source code for the web app and serverless function for publishing changes.
3. app/tokens stores the design tokens definitions e.g. colors, fonts, sizes.
4. build contains the generated design tokens based on the provided configuration.

Usage

# Generate the variable files bsaed on the config.json
npm run build

# Start the design token generator app dev server on port 3333
npm run dev:app

# Start the netlify dev server via Netlify CLI (design token app + serverless function)
npm run dev:netlify

# Build the design token generator app (including the serverless function)
npm run build:app

Additional arguments:

| Flag | Short Flag | Description | | ----------------------- | ---------- | ---------------------------------------------------------- | | --config [path] | -c | Set the config file to use. Must be a .json file | | --platform [platform] | -p | Only build a specific platform defined in the config file. | | --help | -h | Display help content | | --version | -v | Display the version |

Info on the design token generator app

Please check the web app readme for the web app configuration and usage.