fix: adopt DTCG format, fix color scales, add build:watch, update typography tokens

[adamstankiewicz]

Note: Accounts for changes to Paragon alpha in related PRs:

• feat: updating to Style Dictionary v4 openedx/paragon#3186
• feat: expose --output-references CLI arg for building tokens, registers filters, and updates CSS vars format openedx/paragon#3203
• feat: registers sd-transforms; includes refs in source-tokens-only output; resolves refs warnings openedx/paragon#3219

Figma

Paragon Elm Theme

Changes

• Begins updating tokens' JSON schema to reflect the Design Tokens Community Group (DTCG) format, now that style-dictionary officially supports it. This involves migrating value -> $value, type -> $type, etc.
• Adds build:watch NPM script.
• Updates tokens/src/core/global/typography.json to reflect updates to upstream typography tokens, including ensuring the font size scale for display 1-4 works on mobile type.
• Updates all global color scales to reflect current Elm theme and resolves color-related style bugs.
  • Now only includes a base accent-a and accent-b, despite a scale being depicted in Elm theme Figma. The upstream Paragon design system does not have a level scale (100-900) for accent-a and accent-b, so the elm-theme tokens are now updated to match.
• Fix grid gutter width to be the expected value of 24px, resolving a style regression.

Screenshots

Color swatches from Paragon docs site

Updated support for mobile-specific sizes per display level 1-4

[adamstankiewicz]

[inform] Requires changes that are under review in Paragon alpha. Using local package for now via npm pack.

[adamstankiewicz]

Running npm run build:watch will automatically re-build the tokens/theme, resulting in updated dist output on updates to files. Useful when referencing the locally built files from Paragon during local development, or just more streamlined rapid development.