Neutral gray ramp; a11y fixes for compontent outlines - #51
Merged
Conversation
Deploying ui with
|
| Latest commit: |
0287edc
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6920f966.ui-2wg.pages.dev |
| Branch Preview URL: | https://gray-ramp-v2.ui-2wg.pages.dev |
Replace Chakra's blue-tinted gray with a pure-neutral ramp behind the existing stop names (no renames; the historical 25 keeps its darker-than-50 name). The light stops (10-300) match Chakra's luminance exactly so large surfaces don't shift; the dark half is re-graded for accessibility: - 400 is now 3.05:1 on white and becomes the form-control outline stop (WCAG 1.4.11): Input, Select/ComboBox triggers and Checkbox/Radio roots move from gray.200 to gray.400, hover stepping darker to 500. Dropdown cards keep gray.200 - a surface edge, not a control boundary. - 500 is now 4.54:1, so placeholders and secondary text pass AA. - A new 350 stop (~2.1:1) takes the decorative fills that sat on Chakra's 400 weight: Avatar's no-name default, Skeleton's pulse. Never text or boundaries. The override contract lives on the ramp definition in base-preset.ts: presets override values, never names; light stops freely (pin or tint), dark stops only luminance-matched to the contrast grading. brand2 stays Chakra's slate gray as a frozen alias, deliberately decoupled from gray, so the OSS ml-trainer look and statusBarBg's default don't move. Removing it is a follow-up needing an ml-trainer lockstep. A Foundations/Colors Storybook story renders the resolved ramp with measured contrast, so brand-preset overrides stay visible. App-side adoption (pinned light stops, brand tints, per-site re-points) is each app's own reviewed change.
microbit-matt-hillsdon
force-pushed
the
gray-ramp-v2
branch
from
August 7, 2026 12:51
d222ba6 to
455e0b4
Compare
Our historical 25 sat darker than 50; now the values are ours, take the monotone name. No transition alias - every app and paired private preset moves in the same lockstep, raw var(--colors-gray-*) references included (a missed one fails black or transparent).
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.
Best viewed as a cross-ui/app change:
The only real unifying principles for the app changes:
Closes #42
Demos