Conversation
…e to tokens Light --content-destructive and --border-destructive move from #ef4444 to #dc2626 so destructive text such as the Failed workspace status meets WCAG AA 1.4.3 on white (3.78:1 to 4.83:1). The light and dark error roles now read surface, border, and content destructive tokens instead of hardcoded Tailwind palette values.
This branch has not been deployed
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.
The light theme
--content-destructiveand--border-destructivetokens were#ef4444, so destructive text such as the "Failed" workspace status on/workspaceswas 3.78:1 on white, failing WCAG AA 1.4.3 (axe Auditor issue 2871489). Both tokens are now#dc2626(0 72.2% 50.6%), which is 4.83:1.The light and dark
errorroles intheme/*/roles.tsnow read the CSS tokens instead of hardcoded Tailwind palette values, moving toward one way of applying color tokens:errorrole keybackground--surface-destructiveoutline--border-destructivefill.solid,fill.outline--content-destructiveEvery swapped value matches its token within rounding, except
outline, which is the intended change: light goes from 3.76:1 to 4.83:1 and dark from#dc2626(4.12:1) to#f87171(7.24:1).textstays on the palette because no matching token exists. The only role consumer is the workspace build timings chart, which uses these values as CSSfill/borderColor, so CSS variables work there. Colorblind themes have their own roles and token overrides and are unchanged.Screenshots are rendered replicas of the affected elements (status text, destructive border, timings failure bar) using the exact old and new token values, with contrast computed against the page background.
Decision log
errorbecause it maps cleanly onto the destructive token family. Other roles have coincidental or semantically mismatched token matches (for exampleinfo.backgroundequals--content-invert,notice.fill.outlineequals--content-link), so they were left alone.dangerwas not touched:colorblind.test.tsasserts tritandangerequals the base theme'sdanger."hsl(var(--token))"string pattern already used across chart code.