feat: Update color palette for accessibility and show hex values in swatches#154
feat: Update color palette for accessibility and show hex values in swatches#154alexgrozav merged 2 commits intomainfrom
Conversation
…watches Revise base color values to use OKLCH-aligned accessible colors, remove per-color text-on tokens in favor of colorTextInverted, and display computed hex values in color swatch stories.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: b489905 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
This PR updates the theme’s base color palette to more accessible values (aligned to OKLCH targets), removes per-color text.on-* tokens in favor of a single inverted text token, and enhances Storybook color token swatches to display computed hex values and clearer token labels.
Changes:
- Updated light/dark base color primitives and surface/background values in the theme palette.
- Removed
text.on-*token entries, consolidating inverted text handling. - Updated Storybook color swatches to show computed hex values in the preview and add
color.<name>labels.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| theme/src/values/color.ts | Updates base palette values and removes text.on-* token entries. |
| apps/storybook/src/components/design-tokens/colors/ColorSwatch.vue | Computes and renders hex values for swatch backgrounds; adds token name label. |
| apps/storybook/src/components/design-tokens/colors/ColorSwatch.styleframe.ts | Refactors swatch styling to use colorTextInverted and adds monospace name styling. |
| .changeset/accessible-color-palette.md | Declares a minor release for the palette/swatches update. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Base colors | ||
| primary: { | ||
| color: ref(colorTextOnPrimary), | ||
| background: ref(colorPrimary), | ||
| }, | ||
| secondary: { | ||
| color: ref(colorTextOnSecondary), | ||
| background: ref(colorSecondary), | ||
| }, | ||
| success: { | ||
| color: ref(colorTextOnSuccess), | ||
| background: ref(colorSuccess), | ||
| }, | ||
| warning: { | ||
| color: ref(colorTextOnWarning), | ||
| background: ref(colorWarning), | ||
| }, | ||
| danger: { color: ref(colorTextOnDanger), background: ref(colorDanger) }, | ||
| info: { color: ref(colorTextOnInfo), background: ref(colorInfo) }, | ||
| white: { background: ref(colorWhite) }, | ||
| danger: { background: ref(colorDanger) }, | ||
| info: { background: ref(colorInfo) }, | ||
| white: { color: ref(colorBlack), background: ref(colorWhite) }, | ||
| black: { color: ref(colorWhite), background: ref(colorBlack) }, | ||
| gray: { color: ref(colorTextOnGray), background: ref(colorGray) }, | ||
| gray: { background: ref(colorGray) }, |
There was a problem hiding this comment.
The swatch preview now renders hexValue, but most color variants no longer set a foreground color (e.g., primary/secondary/success/warning/danger/info/gray). Since .color-swatch__preview has no default color, the text will inherit from the surrounding UI and can become unreadable on these backgrounds, and the contrast calculation will reflect the inherited color rather than the intended inverted text. Consider setting color: ref(colorTextInverted) for the base colored variants (and their tint/shade/interactive variants) and keeping explicit overrides for light backgrounds like white, background, and surface.
| background: "#F8FAFC", | ||
| surface: "#FFFFFF", |
There was a problem hiding this comment.
Hex literals in this file are now a mix of uppercase and lowercase (e.g., background: "#F8FAFC" / surface: "#FFFFFF" vs white: "#ffffff"). It’d be easier to scan and less noisy in future diffs if the palette used a consistent casing for all hex values (pick one style and apply it across the file).
Revise base color values to use OKLCH-aligned accessible colors, remove per-color text-on tokens in favor of colorTextInverted, and display computed hex values in color swatch stories.