Open
Conversation
Adds a `semanticColorTokensTheme` field to the plugin SDK context, with a typed list of known tokens (surface/ink/border, plus per-context variants for primary/tinted/accent/selected/disabled/danger/highlight/etc., plus diff/status/overlay/stacked/progress/tooltip/code/shadow groups). The `Theme` field is preserved but marked deprecated for backward compat. `generateStyleFromCtx` now emits these tokens as CSS custom properties (`--color--surface`, `--color--primary--ink`, etc.) on the Canvas root. All react-ui components are migrated to consume the new tokens (Button, ButtonGroup, Dropdown, Section, TextInput, TextareaInput, SwitchInput, SidebarPanel, Toolbar, Tooltip, VerticalSplit, …). For backward compatibility, the legacy color vars in `Canvas/styles.module.css` (`--border-color`, `--base-body-color`, `--alert-color`, `--add-color`, …) now resolve to the closest semantic token first, falling back to their original light-mode RGB values. The color block is marked `@deprecated` and slated for removal in a future major; spacing/font/easing tokens remain stable. `--spacing-xs` is added to complete the spacing scale. Other touch-ups: - `fill="currentColor"` on every shipped SVG icon so colors inherit - SidebarPanel uses CaretDown/Up icons (matching the CMS) - SwitchInput styles brought in line with the CMS (off-track ink-muted, primary--ink/surface for checked, smoother knob transitions) - Fix broken `var(--border-radius-m)` reference in TooltipDelayGroup JSDoc example
sistrall
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
4caa4db to
eeebc6f
Compare
sistrall
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
01c4633 to
daa8770
Compare
sistrall
changed the title
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.
Adds a
semanticColorTokensThemefield to the plugin SDK context, with a typed list of known tokens (surface/ink/border, plus per-context variants for primary/tinted/accent/selected/disabled/danger/highlight/etc., plus diff/status/overlay/stacked/progress/tooltip/code/shadow groups). TheThemefield is preserved but marked deprecated for backward compat.generateStyleFromCtxnow emits these tokens as CSS custom properties (--color--surface,--color--primary--ink, etc.) on the Canvas root.All react-ui components are migrated to consume the new tokens (Button, ButtonGroup, Dropdown, Section, TextInput, TextareaInput, SwitchInput, SidebarPanel, Toolbar, Tooltip, VerticalSplit, …).
For backward compatibility, the legacy color vars in
Canvas/styles.module.css(--border-color,--base-body-color,--alert-color,--add-color, …) now resolve to the closest semantic token first, falling back to their original light-mode RGB values. The color block is marked@deprecatedand slated for removal in a future major; spacing/font/easing tokens remain stable.--spacing-xsis added to complete the spacing scale.Other touch-ups:
fill="currentColor"on every shipped SVG icon so colors inheritvar(--border-radius-m)reference in TooltipDelayGroup JSDoc example