Convert Tokens to Style Dictionary 4 and Token Studio 1

[alisonailea]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Requires a major refactor of calcite-design-tokens

This will remove several (now unnecessary) custom token transformer functions. Align with the latest Token Studio and Style Dictionary versions.

Blocked issues: #10051

Requirements checkoff

• Reorganize files to align with the new StyleDictionary config format
• Create new config files
• Refactor or (re)write StyleDictionary functions
  • Transformers to match SD format
    • Calcite Transformation Group
    • Transform name to replace "-" with "minus" and "+" with "plus"
    • Transform name to remove the Tier
    • Transform name to remove the word "default"
    • Transform value of boxshadow for CSS platforms
    • Transform any number value to calculate sum
    • Transform px value to rem for space, size, font-size, etc.
    • Transform breakpoint value to px
  • Headers to match SD format
    • Default Calcite header for generated files
    • Calcite header for deprecated generated files
  • Formats to match SD format & normalize file names (aka "global --> semantic")
    • /css
      • breakpoints.css
      • classes.css (typography classes)
      • core.css
      • dark.css
      • light.css
      • semantic.css
      • global.css (deprecate)
      • index.css
        • import semantic.css and classes.css
        • Set light vars at :root
        • @media (prefers-color-scheme: light) { .calcite-mode-auto { …light vars } }
        • @media (prefers-color-scheme: dark) { .calcite-mode-auto { …dark vars } }
        • .calcite-mode-light { …light vars }
        • .calcite-mode-dark { …dark vars }
    • /scss
      • breakpoints.scss
      • classes.scss (typography mixins)
      • core.scss
      • dark.scss
      • light.scss
      • semantic.scss
      • global.css
        • Deprecate
        • merge semantic, light, & dark
      • index.scss
        • Import breakpoints.scss, global.scss, & mixins.scss
        • @mixin calcite-mode-light { …light vars }
        • @mixin calcite-mode-dark { …dark vars }
    • /es6
      • breakpoints.js
      • core.js
      • dark.js
      • light.js
      • semantic.js
      • global.js
        • merge semantic, light, & dark
        • deprecate
    • /js
      • core.js
      • global.js
        • merge semantic, light, & dark
        • deprecate
      • dark.js
      • light.js
      • semantic.js
    • /docs
      • core.json
      • global.json
        • merge semantic, light, & dark
        • deprecate
      • light.json
      • dark.json
      • semantic.json
  • Filters to match SD format
    • Source
    • Core
    • Breakpoints
    • Global
    • Light
    • Dark
    • Typography
• Setup calcite color themes in Token Studio in Figma
• Design to ensure typography styles are correctly setup before importing into Token Studio

Acceptance Criteria

@tokens-studio/sd-transforms is at or above v1.2.9
style-dictionary is at or above v4.3.2

Run npm run build

packages/calcite-design-tokens/dist includes the following assets

/css
  breakpoints.css
  core.css
  dark.css
  light.css
  semantic.css
  index.css
/scss
  breakpoints.scss
  core.scss
  dark.scss
  light.scss
  semantic.scss
  index.scss
/es6
  breakpoints.js
  core.js
  dark.js
  light.js
  semantic.js
  global.js
/js
  core.js
  global.js
  dark.js
  light.js
  semantic.js
/docs
  core.json
  global.json
  light.json
  dark.json
  semantic.json

Relevant Info

Required to resolve:

#10618
#10993
#8856

Which Component

tokens

Example Use Case

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[geospatialem]

@alisonailea Can you provide an estimate, priority, and timeline for the above?