Token Studio syncing styles

tokens-styles-sync.md

Title:  Syncing Equinor Design System tokens with styles
Author: Victor Nystad <vnys@equinor.com>
Status:  Draft
Date:   Mar 14 2023

When syncing tokens in Token Studio with styles, there are two options in the plugin settings:

1. Ignore the first part of the token name for styles
2. Prefix styles with the active theme name

The themeable EDS tokens have the following structure: eds-theme-colors-primary-default. Ignoring the first part of the token name would then leave us with theme-colors-primary-default. Adding the prefix would result in light-theme-colors-primary-default.

The color styles tree structure in the Figma sidebar would then look like this:

▼ light
  ▼ theme
    ▼ colors
      ▼ primary
        🟣 default
        ⚪️ on-primary    

The segment that’s superfluous in this case is actually colors, not eds. Also, when creating the tokens in Tokens Studio, the type of the colour tokens is color, so it may seem redundant to repeat that in the token name. In code it’s useful, but perhaps that could be added in Style Dictionary by always inserting the token type as the second segment in the token name for example? 🤔

There may be some reasons to keeping the token type in the name, for example if we want to re-use names, having a both a typography token and composition token called label.

Typography

▼ eds
  ▼ component
    ▼ button
      Ag label • 14/16
  ▼ semantic
    ▼ header
      Ag md • 28/28
      Ag lg • 32/32
      Ag xl • 37/40
    ▼ label
      Ag sm • 12/12
      Ag md • 14/16

Notes

• If component typography is in a composition token, such as comp-button-label, typography is not synced with styles. For this reason it seems better to leave typography and colours out of composition tokens.