Introduce dark mode: support plugins#43
Open
sistrall wants to merge 3 commits into
Open
Conversation
sistrall
force-pushed
the
feat/semantic-tokens-for-colors
branch
2 times, most recently
from
01c4633 to
daa8770
Compare
sistrall
changed the title
stefanoverna
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
52e7aff to
b3ead57
Compare
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
v3.0.0-alpha.0
feat: expose ctx.colorScheme and reflect it onto data-theme
Adds `colorScheme: 'light' | 'dark'` to the plugin context. The host
resolves `'system'` before sending. The SDK runtime writes the value to
`document.documentElement.dataset.theme` on the initial handshake and on
every ctx update (skipping no-op writes), so plugin CSS can branch with
`[data-theme="dark"] { … }` selectors and non-CSS code can read
`ctx.colorScheme` directly.
Other changes bundled here:
- Canvas JSDoc `@example` rewritten as a complete semantic-token reference
(naming convention, every standalone/context group, status ink samples,
shadow composites preview).
- SelectInput multi-value chips now set `--color--tinted--ink` on label
and remove button so chip text stays legible in dark mode.
v3.0.1-alpha.0
feat: make SDK token-agnostic and sync react-ui with cms components
SDK no longer enumerates semantic color tokens. `SemanticColorTokensTheme`
is now `Record<string, string>` keyed by CSS custom property name (e.g.
`--color--raised--surface`); `generateStyleFromCtx` applies whatever the
host sends verbatim. Drops the hand-maintained `KnownSemanticColorTokens`
type and the `semanticTokenCssNames` map, so the token vocabulary can
evolve host-side without an SDK release.
react-ui changes:
- Migrate box-shadows to composite `--shadow--*` tokens (Dropdown,
Tooltip, SwitchInput, VerticalSplit) — `--color--shadow*` no longer exists.
- Sync component CSS with cms counterparts: drop stale selected-borders
(SwitchInput checked, ButtonGroup), drop SidebarPanel content background,
add primary button hover/active states, overlay backdrop blur, and a
floating shadow on the SelectInput menu.
- Restore the Canvas semantic-token example, reconciled against the host's
current authoritative token set.
Updated tests and UPGRADING notes accordingly.
Note: pre-commit hook bypassed — the react-ui jest suite has a pre-existing
ESM/CJS config failure unrelated to this change (the sdk suite passes).
fix(react-ui): drop dead token fallbacks, fix jest ESM config
- Canvas legacy color vars now resolve straight to their semantic token
(e.g. `--alert-color: var(--color--feedback-fail--ink)`); the hardcoded
RGB fallback is unnecessary since the host ships the tokens before this
package is released. The `*-rgb-components` vars stay for backward compat.
- generateStyleFromCtx imports `BaseCtx` as `import type` (it's type-only).
- jest.config.js: make ts-jest emit ESM (`module: esnext`) so test modules
load under the default-esm preset instead of throwing "exports is not
defined"; move ts-jest config out of the deprecated `globals` block.
- Refine the v3 host-contract note in sdk UPGRADING.md.
stefanoverna
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
b3ead57 to
84e07da
Compare
stefanoverna
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
84e07da to
7debc55
Compare
stefanoverna
force-pushed
the
feat/semantic-tokens-for-colors
branch
from
6b88a99 to
998ccd0
Compare
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
2 participants
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