Repository navigation
feat(app): color and corner tokens that read in both themes - #136
Merged
Merged
Conversation
Light-theme muted, ok, warn and danger get darker so every text color reads at 4.5:1 on canvas, panel and sunken; the accent stays as a fill and words in it use the new accent-text. Dialog scrim and the close button's red become tokens, rounded-md folds into 8 px, and ui/tokens.test.ts checks the contrast of every text token in both themes. Spec 15.3 lists the tokens.
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
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.
Design system, slice 2: color and corner tokens.
Decisions taken with the owner: darken the light-theme text colors that fail WCAG AA and keep the orange fill, using a separate token for orange text; fold
rounded-mdinto 8 px.Colors (light theme; dark is unchanged)
muted(andidle-state)#6f6f69#5f5f59ok#1d7f46#17703dwarn#a35f00#8a5000danger#c2372a#bd3529accent-text(new)accent#d9481f, 3.52)#b83a14accentstays the fill for buttons, badges, borders and icons (icons need 3:1, which they meet). The five places that wrote words in orange now usetext-accent-text. In the dark theme it is the same#ff7a59.scrim(the dialog backdrop, which wasbg-black/50) andclose(Windows' close-button red, which was a hex literal in TitleBar and Setup).ui/tokens.test.tsreadsindex.cssand checks that every text color (ink,ink-soft,muted,accent-text,ok,work,warn,danger,idle-state) reads at 4.5:1 or more oncanvas,panelandsunken, in both themes. It is what caughtdangeronsunken, which the earlier audit had missed.Corners
rounded-md(6 px) becomerounded-lg(8 px), so the scale is 8, 12 and 16 px, plusrounded-full.Left out on purpose
Artwork keeps its own colors: the mascot, the bot cursor, the color picker's hues, and the white page behind an HTML screen. Spec 15.3 now lists the tokens and these exceptions.
Checks
pnpm checkpasses (327 tests). Checked in thepnpm devpreview, light theme.