Skip to content

Add @elastic/design-tokens package#9595

Draft
acstll wants to merge 9 commits into
elastic:mainfrom
acstll:design-tokens/initial
Draft

Add @elastic/design-tokens package#9595
acstll wants to merge 9 commits into
elastic:mainfrom
acstll:design-tokens/initial

Conversation

@acstll

@acstll acstll commented Apr 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Introduces @elastic/design-tokens, a DTCG-compliant design token package inside the EUI monorepo that serves as the single source of truth for design values everywhere (CSS, SCSS, Figma, TypeScript).

  • New package (packages/design-tokens/): 380+ design tokens organized in a 3-tier architecture (primitives → shades → mode), with separate light/dark files following the DTCG Resolver approach. Builds via Style Dictionary v4.
  • Wired into eui-theme-borealis: Both TypeScript and SCSS color files now import from the design tokens build output instead of maintaining hardcoded values. Removes the chroma-js dependency.
  • Validation script: validate-legacy-json.js checks that legacy JSON files stay in sync with design token values. Caught and fixed 3 pre-existing stale values.

Known issues (documented in README)

  • 6 primitive color deltas between Figma and code (teal.90, pink.90–140) — needs team alignment
  • Alpha colors output in CSS Color Level 4 format vs legacy rgba()
  • Shadow tokens are color-only; full shadow definitions could move to DTCG in the future
  • _primitive_colors.ts still exports 3 keys (white, black, transparent) that need semantic tokens

QA

WIP

General checklist

🤖 Generated with Claude Code

acstll and others added 3 commits April 16, 2026 12:21
@acstll @claude
Fix stale values in legacy theme JSON files
6bad0c4 
- Light euiColorWarningText/euiColorTextWarning: #6A4906 → #825803
  (was warning.110, should be warning.100 per _colors_light.ts)
- Dark euiColorBorderStrongRisk: #FC8544 → #FF995E
  (was risk.60, should be risk.50 per _colors_dark.ts)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll @claude
Add @elastic/design-tokens package
dda86bc 
DTCG-compliant design token source of truth for the Elastic design
system. Builds to CSS custom properties, SCSS variables, JSON, and
Figma variable JSON via Style Dictionary v4.

Token architecture:
- Primitives: raw hex values (13 color families + brand + muted grey)
- Shades: semantic aliases with alpha variants (Tokens Studio modifiers)
- Mode: separate light/dark files (DTCG Resolver approach)
- Non-color: size, typography, animation, border, breakpoint, elevation

Also includes a validation script (validate-legacy-json.js) that checks
eui-theme-borealis legacy JSON files against design token values.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll @claude
Wire eui-theme-borealis to consume @elastic/design-tokens
19dfa1d 
Replace hardcoded color values with imports from the design tokens
JSON output. Key changes:

- _semantic_colors.ts now imports from design tokens instead of
  mapping primitives manually. Replaces chroma-js with a simple
  hexToRgb() utility for the few remaining RGB string values
  (used by _components.ts for high contrast mode).

- _primitive_colors.ts reduced to 3 keys (white, black, transparent)
  that lack semantic-level design tokens. Documented as a TODO.

- _colors_vis_light.ts and _colors_vis_hcm.ts use SEMANTIC_COLORS.shade
  instead of PRIMITIVE_COLORS.blueGrey (proper semantic reference).

- Removed chroma-js and @types/chroma-js dependencies.
- Added @elastic/design-tokens as workspace dependency.
- Enabled resolveJsonModule in both tsconfig files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll acstll self-assigned this Apr 16, 2026
acstll and others added 3 commits April 16, 2026 12:37
@acstll @claude
Wire eui-theme-borealis SCSS to consume design tokens
f432e3a 
Add custom Style Dictionary format (eui/scss) that outputs SCSS
variables with the $euiColor naming convention used by borealis.

Generated files:
- eui-semantic-colors.scss — shade-level tokens (shared across modes)
- eui-colors-light.scss — light mode tokens
- eui-colors-dark.scss — dark mode tokens

Replace the hand-maintained _semantic_colors.scss (219 lines of
hardcoded hex values) with a single @import from the generated file.
The light/dark mode SCSS files continue to reference $euiColor*
variables which are now provided by the generated import.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll @claude
Polish SCSS wiring for non-color token files
d9df0ef 
- Add EUI-prefixed SCSS output format to Style Dictionary config
  (eui-semantic-colors.scss, eui-colors-light.scss, eui-colors-dark.scss)
- Update _borders.scss: replace computed radius with resolved 4px value
- Add design token source comments to _font_weight.scss, _borders.scss,
  _colors_severity.scss

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll @claude
Update design-tokens README with TODO items
7657b36 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Apr 16, 2026
acstll and others added 3 commits April 16, 2026 13:30
@acstll @claude
Uppercase hex values in design tokens output
bd69b9b 
Register a custom 'eui' transform group that extends tokens-studio
with a color/hexUppercase transform. Hex values now output as #F1F6FF
instead of #f1f6ff, matching the existing EUI convention and avoiding
snapshot test failures.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@acstll
Update snapshots
90614a2
@acstll @claude
Wire mode-level color tokens from design tokens JSON
a4543fb 
_colors_light.ts now imports from light-all.json and _colors_dark.ts
from dark-all.json, replacing all SEMANTIC_COLORS references with
direct JSON lookups. This means changing a mode assignment in the
design tokens (e.g. text.paragraph from shade.130 to danger.80)
propagates through to the runtime theme after rebuild.

The SEMANTIC_COLORS import is removed from both mode files. It remains
in _semantic_colors.ts only for _buttons.ts, _forms.ts, and
_components.ts which still use shade-level names.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@elasticmachine

elasticmachine commented Apr 16, 2026

Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @acstll

@elasticmachine

elasticmachine commented Apr 16, 2026

Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @acstll

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

👋 Hey there. This PR hasn't had any activity for 90 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

@github-actions github-actions Bot added the stale-pr (Don't delete - used for automation) label Jul 15, 2026
@ryankeairns ryankeairns mentioned this pull request Jul 16, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

@acstll acstll

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) stale-pr (Don't delete - used for automation)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@acstll @elasticmachine