fix(tokens): pass WCAG contrast for feedback color aliases (DSYS-204)#1935
Draft
cmwinters wants to merge 1 commit into
Draft
fix(tokens): pass WCAG contrast for feedback color aliases (DSYS-204)#1935cmwinters wants to merge 1 commit into
cmwinters wants to merge 1 commit into
Conversation
Lighten bg-feedback and soften border-feedback so feedback pairings meet WCAG AA. Darken fill-feedback-warning and decouple field/destructive borders so they stay vivid. Migrate Alert onto the feedback/ui tokens and route Toast icons to text-feedback. Add borders to TagGroup tags (except beta/federal).
🦋 Changeset detectedLatest commit: 7fce575 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
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.
Summary
Fixes DSYS-204 — the
feedbackcolor aliases failed WCAG AA when paired (worst for warning/yellow).Tokens (
@launchpad-ui/tokens)bg-feedback-*:*.50→*.0(light),*.900→*.950(dark) — lighter/darker backgrounds so pairedtext-feedbackclears 4.5:1.border-feedback-*:*.500→*.100(light),*.400→*.800(dark) — softened to pair with the new backgrounds.fill-feedback-warning: →*.600(both themes) for legibility.border-field-errorandborder-interactive-destructivefromborder-feedback-error; they now map tored-500(light) /red-400(dark) so invalid-field and destructive borders keep their vivid ~3:1 state indication rather than inheriting the now-subtle feedback border.Components (
@launchpad-ui/components)Alertnow sources its bg/border from thebg-feedback-*/border-feedback-*tokens (neutral →bg-ui-secondary/border-ui-primary) instead of hardcoded primitives.Toaststatus icons usetext-feedback-*for contrast against the toast surface.TagGrouptags get a 1px border — feedback variants useborder-feedback-*,defaultusesborder-ui-primary;betaandfederalare intentionally borderless.Screenshots (if appropriate)
Chromatic will surface the visual diffs for Alert, Toast, TagGroup, and Calendar (invalid cell). Verifying in Storybook across light/dark is pending reviewer sign-off.
Testing approaches
pnpm build:transform) and verified resolved values indist/themes.css:border-field-error/border-interactive-destructiveresolve to vivid red whileborder-feedback-errorstays subtle.vitestfor Alert, Toast, and TagGroup pass (includes axe a11y checks).