Skip to content
Style-Dictionary logo, Pascal the chameleon. Style Dictionary

Basic Example

This example code is bare-bones to show you what this framework can do. Under the hood of this interactive demo, we run Style Dictionary through the Node API in a way that is equivalent to running the CLI command:

Terminal window
npx style-dictionary build

You should see something like this output in the console:

scss
✔︎  build/scss/_variables.scss


android
✔︎  build/android/font_dimens.xml
✔︎  build/android/colors.xml


compose
✔︎ build/compose/StyleDictionaryColor.kt
✔︎ build/compose/StyleDictionarySize.kt


ios
✔︎  build/ios/StyleDictionaryColor.h
✔︎  build/ios/StyleDictionaryColor.m
✔︎  build/ios/StyleDictionarySize.h
✔︎  build/ios/StyleDictionarySize.m


ios-swift
✔︎  build/ios-swift/StyleDictionary.swift


ios-swift-separate-enums
✔︎  build/ios-swift/StyleDictionaryColor.swift
✔︎  build/ios-swift/StyleDictionarySize.swift

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:

  • config.json
  • tokens.json
  • script.js (empty)
  • Directorybuild/
    • Directoryandroid/
      • font_dimens.xml
      • colors.xml
    • Directorycompose/
      • StyleDictionaryColor.kt
      • StyleDictionarySize.kt
    • Directoryscss/
      • _variables.scss
    • Directoryios/
      • StyleDictionaryColor.h
      • StyleDictionaryColor.m
      • StyleDictionarySize.h
      • StyleDictionarySize.m
    • Directoryios-swift/
      • StyleDictionary.swift
      • StyleDictionaryColor.swift
      • StyleDictionarySize.swift

If you open config.json you will see there are 5 platforms defined:

  • scss
  • android
  • compose
  • ios
  • 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. These files can be viewed in the live demo above by clicking the output dropdown button.

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.