Semantic tokens - #6848
Draft
Kitty-Al wants to merge 20 commits into
Draft
Conversation
Bundle the semantic colour tokens into the generated variables.css so any consumer of the design-tokens CSS gets them automatically, with no extra import. The semantic block is appended by build:semantic (idempotent via a marker comment) after build:json regenerates the primitives. Also drop the Less output for the semantic tokens (CSS + SCSS only). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
🤖 Agent Workflows
|
🦋 Changeset detectedLatest commit: 29edd73 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…xport Spread the semantic colour tokens into `tokens.color`, keyed both by their verbatim kebab name (`tokens.color['bg-brand-solid']`) and a camelCase alias (`tokens.color.bgBrandSolid`). Preserve literal keys via `satisfies` so the name unions stay type-safe, and add a `KebabToCamel` type + derived `semanticColorTokensCamel` map. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Category-scope the generated semantic files so future token categories can sit alongside them (e.g. semantic-typography): sass/semantic.scss -> sass/ semantic-color.scss and css/semantic.css -> css/semantic-color.css. Updates the generator output paths and the build:semantic prettier target. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- JS guide: use semantic colour tokens instead of old primitives. - SASS guide: use semantic tokens in examples; caution against manipulating colour opacity (accessibility + semantic tokens are solid); add an import-map table clarifying each category is a separate scoped entrypoint. - example.scss: import sass/semantic-color and use a semantic token. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…emantic Collapse the colour docs into one docs-only page that maps every semantic token to the primitive it resolves to, with name + hex on both sides. Tokens with no mapping yet are flagged. Converts the CSF story to a plain component rendered inline in the MDX so there is a single sidebar entry instead of a story + docs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…erview Document the tokens' many output forms (JS, CSS vars, SCSS, deprecated Less), present Tailwind (@kaizen/tailwind preset) as the recommended way to consume them, and note semantic tokens are not emitted as Less. Rename the docs README page title from "README" to "Overview". Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Revert @kaizen/design-tokens from a peer dependency to a regular runtime dependency of @kaizen/tailwind, so Tailwind consumers get it transitively and don't need to install it themselves. Update the changeset wording accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…olours in docs The preset spread `tokens.color` (which now merges flat semantic colour tokens) into `colors` and `borderColor`. Unmapped semantic tokens are `null`, which Tailwind's colour config rejects — breaking `@kaizen/tailwind` build for the whole branch. Add `stripNulls` to drop null-valued entries before spreading. Also update Tailwind guide docs to use the new semantic colour classes: - utility-class-helpers-overview: border-brand / bg-brand-primary / text-brand-secondary - overview: fix gray-400 -> blue-400 typo to match anatomy diagram Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Unmapped semantic colour tokens are `null` (no confident mapping yet). Both CSS-var generators interpolated them into output, emitting literal `null` values like `--color-bg-primary-alt: null` in variables.css / color.json / color.less / color.scss. Add a null-value guard to both makeCSSVariableTheme (color.json/less/scss) and makeCssVariableDefinitionsMap (variables.css) so null tokens emit nothing. Regenerate the affected token outputs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Semantic CSS vars were appended to variables.css by build:semantic AFTER build:json wrote it. Running build:json alone (partial rebuild, watch task) overwrote the file and silently dropped every semantic --bg-* var, breaking all semantic Tailwind classes with no error. build:json now emits the semantic block itself, in the same write, so variables.css is always complete from one script — no order coupling. build:semantic no longer touches variables.css; it still writes the standalone semantic-color.css / .scss. A shared semanticColorCssVariableLines helper keeps the two outputs from drifting. Both naming schemes remain (--bg-* for Tailwind, --color-bg-* for SCSS/LESS), the tokens.color merge is untouched, and consumers need no extra import. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Overview: replace the blue-400 anatomy diagram + CSS block with an inline
modifier/prefix/suffix breakdown using a semantic example (hover:bg-brand-solid)
and a note preferring semantic tokens over primitives; remove the now-unused
tw-anatomy.png asset.
- Utility Class References (Background/Text/Border Color): source the class list
from the semantic-only extend.{backgroundColor,textColor,borderColor} maps
instead of the primitive-laden colors/borderColor, so the pages list only
semantic classes (bg-primary, bg-brand-solid, text-brand-secondary, border-brand…).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Fix the three eslint errors in color-tokens.tsx that broke CI: import order (semanticColorTokens before tokens), prefer-regexp-exec over String#match, and array-type (T[] over Array<T>). Also run prettier over buildSemanticTokens.ts and tailwind-presets.ts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…r output Semantic tokens are merged into `tokens.color` for the JS export and Tailwind preset, but they leaked into the primitive `color.json` and therefore the generated `sass/color.scss` and `less/color.less`, surfacing as `$color-bg-*` entries that reference an undefined `--color-bg-*` variable (the canonical one is `--bg-*`, emitted separately by build:semantic). Strip semantic keys (both kebab and camelCase forms) before writing `color.json`, and regenerate the SCSS and LESS artifacts. Fixes the sass-tokens heart-colour-names unit test. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important: Request PR reviews on Slack
Please reach out to the design system team on Slack in
#help_design_systemfor PR reviews. GitHub notifications (e.g. from tagging a person) are not actively monitored.Why
What