Brand color update: 14-step scale expansion for accessibility#1379
Open
lukasoppermann wants to merge 16 commits intomainfrom
Open
Brand color update: 14-step scale expansion for accessibility#1379lukasoppermann wants to merge 16 commits intomainfrom
lukasoppermann wants to merge 16 commits intomainfrom
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Changed from default export to namespace import for StyleDictionary types. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Inserted 4 new intermediate steps at indices [4,6,8,10] - Maintains brand color intent while providing granularity for consistent contrast - All original step values remapped to new positions: [0,1,2,3,5,7,9,11,12,13] - Resolves 35 WCAG contrast failures on emphasis colors - Contrast check: 100% passing - Build: passing (lint, format, test all successful) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Expand dark theme display-dark.json5 to 14 steps (was 10) - Update functional token mappings: - fgColor: step 8 → 9 (better contrast on muted bg) - bgColor-emphasis: step 5 → 10 (darker for white text contrast) - Light mode: 100% passing (core WCAG requirements) - Dark mode: 100% passing (all themes) - 3 marginal light failures on display fgColor (99% acceptable) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Fine-tune fgColor lightness values: - gray: L 48.8 → 40 (#77827a → #626A64) = 5.08:1 - green: L 28 → 26 (#08872b → #077D28) = 4.88:1 - lime: L 32.4 → 28 (#698e17 → #5B7B14) = 4.62:1 Light theme now passes all fgColor vs bgColor-muted checks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Revert step 9 gray/green/lime to original values - Map fgColor token reference from step 9 to step 11 across all 19 colors - Step 11 is completely unused, so zero side effects - Contrast improves: gray 5.7:1, green 6.45:1, lime 6.97:1 (all pass 4.5:1) - Scale order preserved: 9 → 10 → 11 → 12 → 13 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
Design Token Diff (CSS)The message is too long to be displayed here. For more details, please check the job summary. |
Contributor
Design Token Diff (StyleLint)The message is too long to be displayed here. For more details, please check the job summary. |
Contributor
Design Token Diff (Figma)The message is too long to be displayed here. For more details, please check the job summary. |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates display-color token wiring and Storybook support for an intended move toward larger display scales, alongside a small typing/config cleanup in Storybook.
Changes:
- Remaps functional display color aliases to newer intended base scale positions for emphasis and foreground usage.
- Refactors the base display-scale Storybook story to generate scales programmatically and adds an Amber story entry.
- Adjusts Storybook TypeScript/SWC configuration and the dev script for development-mode React transforms.
Show a summary per file
| File | Description |
|---|---|
src/tokens/functional/color/display.json5 |
Repoints functional display scale/bg/fg/border aliases to newer base display steps. |
docs/storybook/stories/utilities/getTokensByName.ts |
Changes the Style Dictionary type import shape. |
docs/storybook/stories/Color/Base/Display-Scales.stories.tsx |
Replaces the hardcoded scale list with generated names and 14-step ranges; adds Amber story output. |
docs/storybook/package.json |
Forces NODE_ENV=development for the Storybook dev script. |
docs/storybook/.storybook/main.ts |
Sets SWC React development mode from Storybook’s configType. |
Copilot's findings
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comments suppressed due to low confidence (1)
docs/storybook/stories/Color/Base/Display-Scales.stories.tsx:18
- This story now generates swatches
base-display-color-*-10through*-13, but the underlying base display palettes still stop at step9. Until the corresponding base token files are added, the last four swatches in every rendered scale will point at undefined CSS variables and show incorrect output.
const bgColors = displayColorNames.flatMap(name =>
Array.from({length: 14}, (_, i) => `base-display-color-${name}-${i}`),
- Files reviewed: 5/7 changed files
- Comments generated: 2
| }, | ||
| '5': { | ||
| $value: '{base.display.color.blue.5}', | ||
| $value: '{base.display.color.blue.10}', |
Comment on lines
+12
to
+14
| 'gray', 'indigo', 'blue', 'cyan', 'teal', 'pine', 'green', 'lime', 'olive', | ||
| 'lemon', 'yellow', 'amber', 'orange', 'red', 'coral', 'pink', 'plum', 'purple', | ||
| 'brown', 'auburn', |
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Add numbered scale entries for steps 10, 11, 12, 13 across all 19 display colors.
Each scale entry now references the corresponding base step:
- '10': {base.display.color.COLOR.10}
- '11': {base.display.color.COLOR.11}
- '12': {base.display.color.COLOR.12}
- '13': {base.display.color.COLOR.13}
Colors updated: gray, red, coral, orange, yellow, lime, green, teal, cyan, indigo, purple, plum, pink, brown, auburn, olive, lemon, pine, blue
Maintains full feature parity with expanded 14-step base scales.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Change all numbered scale entries (0-13) across all 19 colors to map directly to base steps: - Scale '0' → base.display.color.COLOR.0 - Scale '5' → base.display.color.COLOR.5 - Scale '13' → base.display.color.COLOR.13 - etc. Previously, scales had custom mappings (e.g., scale '5' pointed to base step 10). Now all are 1:1 pass-through, making the numbered scales a direct reference to base colors. Build: passed Contrast: all checks still pass (light/dark modes) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…s mapping - Expand all 19 colors from 10→14 steps with HSL interpolation at [4,6,8,10] - Remap original steps [0-9] to new positions [0,1,2,3,5,7,9,11,12,13] - Update dark theme borderColor-emphasis from step 10→step 8 for better contrast - Light theme: 0 failures (4.5:1), Dark theme: 0 failures (4.5:1) - High-contrast variants remain out of scope Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- All 19 colors now progress from darkest (step 0) to lightest (step 13) - Maintains consistent gradient direction across both light and dark themes - Aligns step numbering: step N means same relative brightness position in both themes Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- All dark theme borderColor-emphasis overrides changed from step 8 to step 10 - Aligns dark and light themes to use same step numbers for semantic roles - Maintains 4.5:1 contrast for both light and dark standard requirements Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Previous reversal accidentally dropped steps 10-13 - Now properly reverses all 14 steps while preserving full gradient - All colors progress from darkest (step 0) to lightest (step 13) - Fixes build error: 'Some token references (132) could not be found' Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Reversed auburn, brown, cyan, olive, pine, plum - All 19 colors now consistently progress darkest (step 0) → lightest (step 13) - Dark theme scale now matches light theme progression model Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Changed teal dark theme bgColor-emphasis from step 4 to step 3 - Fixes dark theme fgColor-onEmphasis vs bgColor-emphasis contrast for teal - Result: 4.58:1 contrast (above 4.5:1 minimum) - Light theme: 0 failures (4.5:1), Dark theme: 0 failures (4.5:1) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Updated borderColor-emphasis steps to darker values for 10 display colors - Light theme: step 10→8 (gray, green, orange, purple, lime, lemon, yellow, coral, pink, indigo) - Lime required step 8→10 due to contrast requirements with light backgrounds - All 4.5:1 standard contrast checks now passing (0 failures) - High-contrast 7:1 failures remain out of scope Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
jonrohan
approved these changes
May 6, 2026
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.
Expands display color scales from 10 to 14 steps via HSL interpolation.
Changes:
Contrast Results:
Brand Impact: