Discovery - Design Tokens: Create structure for semantic tokens

[jessicawoodin]

Now that we have our primitive colors tokens pulling in from VADS, we need to create the structure for semantic color tokens.

Semantic color tokens will:

• Describe how the color token should be used
• Provide a primitive token for both light mode and dark mode

Examples of color tokens (found in Alert component) are:

• color-text-primary
  • Light: grayDark
  • Dark: grayLightest
• color-background-feedback-informational
  • Light: primaryAltLightest
  • Dark: uswdsBlueVivid80
• color-background-feedback-success
  • Light: greenLightest
  • Dark: uswdsGreenCoolVivid80
• color-background-feedback-warning
  • Light: warningMessage
  • Dark: uswdsYellowVivid70
• color-background-feedback-error
  • Light: secondaryLightest
  • Dark: uswdsRedVivid80
• color-border-feedback-informational
  • Light: primaryAltDark
  • Dark: primaryAltLight
• color-border-feedback-success
  • Light: green
  • Dark: greenLight
• color-border-feedback-warning
  • Light: gold
  • Dark: goldLight
• color-border-feedback-error
  • Light: secondaryDark
  • Dark: secondary

AC:

• [ ] look into style dictionary handles theming
• [ ] Create stub stories to implement

[narin]

After multiple discussions with @jessicawoodin we tried to find a way to best format the files in a way for easy Figma import. While we were able to determine a method to import dark and light tokens into figma variables, we couldn't figure out a way to also take advantage of Figma's "Modes" feature. We decided that both the input and output json files should be separated by file into primitive, semantic-light, and semantic-dark files. We also decided on using on-dark and on-light as suffixes for our modes. Follow-up tickets are as follows:

• 235

• 236

• 237