@linode/design-language-system

Basic Style Dictionary

This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can cd into this directory and run:

yarn install
yarn generate

You should see something like this output:

Copying starter files...

Source style dictionary starter files created!

Running `style-dictionary build` for the first time to generate build artifacts.


scss
✔︎  build/scss/_variables.scss

js
✔︎  build/js/variables.js

Good for you! You have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:

├── README.md
├── config.json
├── tokens/
│   ├── color/
│       ├── base.json
│       ├── font.json
│   ├── size/
│       ├── font.json
├── build/
│   ├── scss/
│      ├── _variables.scss
│   ├── js/
│      ├── variables.js

If you open config.json you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:

SCSS

// _variables.scss
$color-base-gray-light: #cccccc;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-base-red: #ff0000;
$color-base-green: #00ff00;
$color-font-base: #ff0000;
$color-font-secondary: #00ff00;
$color-font-tertiary: #cccccc;
$size-font-small: 0.75rem;
$size-font-medium: 1rem;
$size-font-large: 2rem;
$size-font-base: 1rem;

JS

// variables.js
export const colorBaseGrayLight = "#cccccc";
export const colorBaseGrayMedium = "#999999";
export const colorBaseGrayDark = "#111111";
export const colorBaseRed = "#ff0000";
export const colorBaseGreen = "#00ff00";
export const colorFontBase = "#ff0000";
export const colorFontSecondary = "#00ff00";
export const colorFontTertiary = "#cccccc";
export const sizeFontSmall = "0.75rem";
export const sizeFontMedium = "1rem";
export const sizeFontLarge = "2rem";
export const sizeFontBase = "1rem";

Pretty nifty! This shows a few things happening:

1. The build system does a deep merge of all the token JSON files defined in the source attribute of config.json. This allows you to split up the token JSON files however you want. There are 2 JSON files with color as the top level key, but they get merged properly.
2. The build system resolves references to other design tokens. {size.font.medium.value} gets resolved properly.
3. The build system handles references to token values in other files as well as you can see in tokens/color/font.json.

Now let's make a change and see how that affects things. Open up tokens/color/base.json and change "#111111" to "#000000". After you make that change, save the file and re-run the build command style-dictionary build. Open up the build files and take a look.

Huzzah!

Now go forth and create! Take a look at all the built-in transforms and formats.