fix(ui): retire colliding token ADR 0027 and name print values - #361
fix(ui): retire colliding token ADR 0027 and name print values#361cursor[bot] wants to merge 8 commits into
Conversation
Give hosts a typed catalog of the repeating --cwl-* chrome tokens, a DTCG 2025.10 interchange snapshot, and Storybook stories for toolbar button states so brand theming happens on .cwl-editor after a WCAG 2.2 contrast check. Co-authored-by: Seongho Bae <[email protected]>
Delete the leftover 0027 design-token ADR so this lane no longer collides with #141, #248, and #320. Catalog color remaps are print-media values, not forced-colors assignments, and Storybook now shows disabled, surface, and collaboration-status chrome as a class-level sample. Co-authored-by: Seongho Bae <[email protected]>
Add a Live Toolbar story that constructs the real TipTap toolbar so hosts can preview token overrides on the same buttons buyers ship, while the class-level sample stays available and CwlEditor stays unmounted. Co-authored-by: Seongho Bae <[email protected]>
Hosts can compare shipped color pairs and their own #rrggbb overrides against the WCAG 2.2 4.5:1 text threshold without reading CSS internals or treating the ratio as a certification. Co-authored-by: Seongho Bae <[email protected]>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Verdict
#360 blockers are fully addressed on this head. Residual contrast-pairing honesty remains. Prefer successor #362 (03a823d) over this draft and over #360.
#360 blockers
- Leftover
docs/adr/0027-editor-design-tokens-storybook.md: fully_addressed. Only ADR 0031 remains. - TRACEABILITY / doctoring still citing ADR 0027: fully_addressed.
forcedColorsValueholding@media printhexes: fully_addressed. Catalog field isprintValue; forced-colors only setsCanvasTextoutline.
Residual on this head
hostAction still steers every token at --cwl-bg. Shipped active toolbar text is --cwl-accent on --cwl-accent-soft. Dark that pair is about 4.13:1, below WCAG 2.2 4.5:1 text contrast and still above 3:1 non-text contrast. The operator example overrides both tokens and then measures the accent against white. Storybook omits the shipped :focus-visible outline. The PR body still says Storybook does not mount Toolbar; LiveToolbar already does.
Buyer next action
Use #362. Call getEditorThemeTokenContrast('cwl-accent', 'cwl-accent-soft', 'dark') and override those tokens when meetsTextContrast is false. Do not edit Inkspan internals. Do not merge #360 in parallel. Keep the token lane Draft while issue #118 owns live v0.6.0 publication.
No approval from this automation. Checks on this synchronize are not a merge blocker.
Sent by Cursor Automation: Fix Issues
| } | ||
|
|
||
| function hostAction(cssCustomProperty: `--${EditorThemeTokenName}`): string { | ||
| return `Override ${cssCustomProperty} on .cwl-editor after checking WCAG 2.2 contrast against --cwl-bg. Do not edit Inkspan internals.`; |
There was a problem hiding this comment.
This hostAction tells hosts to check every token against --cwl-bg. Shipped .cwl-tb-btn.is-active text is --cwl-accent on --cwl-accent-soft. The dark pair is about 4.13:1, below WCAG 2.2 4.5:1. Successor #362 points this action at the inventoried pair and publishes meetsTextContrast.
| expect(() => getEditorThemeToken('not-a-theme-token')).not.toThrow(/not-a-theme-token/u); | ||
| }); | ||
|
|
||
| it('reports WCAG 2.2 contrast for shipped color pairs so hosts can check overrides', () => { |
There was a problem hiding this comment.
This proof only measures --cwl-fg / --cwl-bg. Add getEditorThemeTokenContrast('cwl-accent', 'cwl-accent-soft', 'dark') so the inventoried active button is not implied to meet 4.5:1. Successor #362 adds that case (meetsTextContrast false, meetsNonTextContrast true).
| const tokens = listEditorThemeTokens(); | ||
| const dtcgGroup = toDesignTokenFormatGroup(); | ||
| const contrast = getEditorThemeTokenContrast('cwl-fg', 'cwl-bg', 'light'); | ||
| const overrideRatio = contrastRatioFromHex('#0b6e4f', '#ffffff'); |
There was a problem hiding this comment.
The example overrides --cwl-accent and --cwl-accent-soft, then measures #0b6e4f against #ffffff. Check #d8f3e8 and the dark inventoried pair as well. Successor #362 uses getEditorThemeTokenContrast('cwl-accent', 'cwl-accent-soft', 'dark') and meetsTextContrast.
2 participants
Problem
#360 published the editor-chrome token catalog but left
docs/adr/0027-editor-design-tokens-storybook.mdin the tree after the 0031 rename, and labeled@media printremaps asforcedColorsValue. Landing #360 would republish a colliding ADR 0027 next to #141, #248/#249/#285, and #320, and would tell hosts that print hexes are forced-colors values.Buyer next action
Prefer this successor over #360. Override the named tokens on
.cwl-editorafter checking WCAG 2.2 contrast. Do not edit Inkspan internals. Runpnpm storybookand open Editor Chrome / Toolbar Button States to preview the class-level chrome sample (default, active, disabled, collaboration status, and surface). CopytoDesignTokenFormatGroup()into a host theme file when you need a DTCG 2025.10 snapshot.Test-first proof
0027-editor-design-tokens-storybook.md, and color alignment asked the print block forprintValuewhile the catalog only exposedforcedColorsValue.CanvasTextfocus outline.Scope
CSS remains runtime presentation authority. Storybook remains a class-level chrome sample and does not mount
ToolbarorCwlEditor. This adds no Figma Variables sync, network, persistence, credential, tenant, model, or durable-audit authority. The interchange snapshot is not complete DTCG conformance or a host WCAG certification.Integration boundary
Prefer this head over #360. ADR 0031 stays Proposed until protected integration. Issue #118 still owns live
v0.6.0registry publication; this lane does not create a tag or release.