enhance: CMD-182 design tokens

[wesleyboar]

Overview

Add and use design tokens.

Important

Removed --global-color-…-rgb variables.

_{No demo. Affected clients are updated via TACC/Core-CMS-Resources#200.}

before	after
rgba(var(--global-color-…rgb), …)	rgb( from var(--global-color-…rgb) r g b / …)

Important

Changed Portal accent color from purple to blue.
_{Affected clients updated via TACC/tup-ui#476.}

Important

Changed --global-color-acent--light from #86aeff to #3d6acc

Status

• Use design tokens for colors.
• Add v3 colors.
• Design v3 buttons and pills.
• Use "Tokens Studio for Figma" as source of tokens
• Add script to adjust tokens .json per Core-Styles version.
• Test successfully on all clients.
• Update design software:
  • move spacing to new Core project
  • migrate font weight name/value-mapping to Core-Styles
  • delete font weight variables
  • move ds tokens to new project

Related

• CMD-182
• (PoC) Use Tokens from Figma #345
• required by feat: CMD-182 design tokens core-v3 concept #375
• required by enhance: CMD-182 design tokens Core-CMS#863
• should be used by feat: update Core-CMS & Core-Styles, rename CMS Settings, Portal Purple to Blue tup-ui#476

Changes

• adds design tokens
• adds build-tokens.js, and build:tokens NPM script
• renames build.js to build-styles.js
• changes global CSS vars to use design tokens
• removes --global-color-…-rgb vars
• removed vars from %x-overlay--callout ⚠️
• changed colors--portal.css to use blue accent ⚠️
• removed colors.accent--*.css
• added colors.accent.v3.css
• added colors.v3.css

Testing & UI

UI

Skipped.

• The portal accent color changed from purple to blue.
• The --global-color-acent--light changed from #86aeff to #3d6acc.

Build

1. Delete tokens/*.json.
2. Run npm run buiild:css.
3. Verify tokens/*.json return with no changes.
4. Verify dist/ is unchanged.

CMD-182.Build.mov