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.