Test updated color scales#1401
Draft
danielguillan wants to merge 30 commits into
Draft
Conversation
|
danielguillan
changed the title
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. |
- Remove merged indices 4 and 6 from base color scales (light/dark) - Renumber neutral scale from 0-13 to 0-11 - Update all functional token references (bgColor, borderColor, control, fgColor, syntax) - Update all component token references - Validate with contrast check: 2676 checks pass, 0 failures Mapping: - Old 0-3 stay at 0-3 - Old 5 → New 4 - Old 7-13 → New 5-11 This maintains WCAG contrast compliance while reducing scale granularity. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…rate step-7 to step-6 - Smooth dark/dark-dimmed neutral scale hue oscillation (steps 4,6,7,8,9) - Fix dark-dimmed neutral step 10 saturation spike (explicit #D8DFE6) - Darken dark/dark-dimmed blue scale steps 0,1,10,11 - Fix light mode hue scale step-0 pure whites (all 8 hue scales tinted) - Fix all 42 WCAG contrast failures: - bgColor-*-emphasis (attention,severe,danger,done,sponsors,upsell,closed): step 7 → step 6 in dark/dark-dimmed/dark-tritanopia/dark-colorblind - button-danger HC themes: swap fgColor-rest and bgColor-hover step assignments - Migrate borderColor-*-emphasis to match bgColor-*-emphasis (step 6 in dark themes)
…dd 11 new hues - Merge display-dark.json5 and display-light.json5 into dark.json5 and light.json5 respectively; remove the now-redundant display-*.json5 files - Add 11 new hues to all base color scales (light, dark, light HC, dark HC): auburn, brown, lemon, olive, lime, pine, teal, cyan, indigo, plum, coral - Calibrate light high-contrast scale steps 0–2 to CR targets 1.01/1.10/1.20 vs white for all 19 hues, ensuring smooth visual progression - Calibrate light HC steps 3–11 to a consistent CR profile across all hues (CR targets: s3=1.54, s4=2.21, s5=3.36, s6=5.12, s7=8.09, s8=10.19, s9=12.47, s10=14.54, s11=16.86)
…base.color refs - Replace base.display.color.* references with base.color.* across all hues - Add light-high-contrast fgColor overrides to step 8 (was step 11) for all hues, providing colored text instead of near-black in light HC mode - Add light-high-contrast bgColor.hover and bgColor.active overrides to step 2 to ensure sufficient contrast against step 8 foreground (all hues ≥4.5:1) - Add dark-high-contrast bgColor overrides for all newly added hues - borderColor aliases fgColor.rest, inheriting HC overrides automatically
display.json5: - Add all 11 new hues (auburn, brown, lemon, olive, lime, pine, teal, cyan, indigo, plum, coral) with bgColor, fgColor, borderColor, and scale tokens - Remap scale from steps 0–9 (base.color.*.2–11) to steps 0–11 (base.color.*.0–11) so scale indices directly correspond to base color indices; steps 0–1 were previously inaccessible via the scale - Add light-high-contrast overrides for fgColor (step 8) and bgColor.emphasis (step 9) to all 19 hues data-vis.json5: - Add all 11 new hues with color-emphasis and color-muted tokens - Migrate base references to base.color.* (from base.display.color.*)
…or new hues themes.config.ts: - Register all 11 new hues so they are included in all 13 build themes colorContrast.config.ts: - Add contrast check rules for all 11 new hues across light, dark, and high-contrast themes adr-012-color-scale-contrast-map.md: - Document the CR calibration methodology for light HC steps 0–11 - Record the final per-step CR targets and rationale for step 2 ceiling (1.20) to ensure display fgColor at step 8 maintains ≥7:1 in all hue combinations
… up legacy stories
New stories under Color/Display/:
- DisplayColors: Emphasis, Emphasis+border, Muted, Muted+border, and side-by-side
combination rows for all 19 display hues; 8px border radius
- LabelColors: Interactive Default and With-border rows using label.* tokens;
hover/active states applied on mouse events (no static state rows)
- Scales: ColorScaleByName blocks for all 19 hues, steps 0–11
Reorganised Color/DataVis (DataWithColors.stories.tsx, titled Color/DataVis):
- LineChart and AreaChart using data-{color}-color-emphasis/muted tokens
- DataVisAccentColors and DataVisMutedColors token tables (moved from Charts.stories.tsx)
- Foreground, Background, and Border token tables for display tokens
Cleanup:
- Remove Color/DataVis/Charts.stories.tsx (content moved to DataWithColors)
- Remove Color/Base/Display-Scales.stories.tsx (superseded by Color/Display/Scales)
- Remove Demo/DisplayColorTesting.stories.tsx (superseded by Color/Display/*)
- Retitle Color/Alpha/Display → Color/Display (Legacy) to avoid sidebar conflict
- Retitle Color/Base/Scales → Base Scales (top-level sidebar group)
Finalize deletion of two story files that were emptied then removed from disk: - Color/Base/Display-Scales.stories.tsx (superseded by Color/Display/Scales) - Color/DataVis/Charts.stories.tsx (content moved to Color/Display/DataWithColors)
…s black All base color steps in dark high-contrast now follow a consistent contrast ratio progression (1.22→1.67→2.73→3.61→4.70→6.03→7.35→8.46→9.68→11.89→14.11→16.35) against the dark background (#010409). Previously broken hues: - blue: steps 1–4 were identical (all 2.73:1, no differentiation) - indigo: steps 2–3 nearly identical (2.38/2.40:1), steps 0–4 too compressed - cyan: steps 3–4 too close (6.0/6.8:1), steps 7–8 identical (10.1/10.1:1) - gray: steps 7–8 identical (10.8/10.8:1) - plum: uneven spacing in mid-range All hues now calibrated using red as the reference profile: H/S per step preserved, L adjusted via binary search to match red's luminance targets.
…ccess tokens All 4 failures were introduced by calibrating dark HC base color steps to red's luminance profile, which moved mid-range steps from dark to medium-brightness, breaking fg/bg pair relationships. Fixes: - display-blue-bgColor-emphasis: blue.4 -> blue.2 in all dark HC variants (all other hues already used step 2; blue used step 4 only because old uncalibrated steps 1-4 were all identical, accidentally passing) - fgColor-success (colorblind/tritanopia HC): blue.8 -> blue.9 (blue.8 got dimmer, blue.5 muted bg got brighter = less contrast) - fgColor-attention (dark HC variants): add yellow.9 override (no dark HC override existed; inherited yellow.8 which got dimmer) - fgColor-severe (dark HC): orange.8 -> orange.9, red.8 -> red.9 (tritanopia uses red for severe; both got dimmer from calibration)
…ation - Darken blue steps 6-9 in dark theme (aligned to cyan contrast profile) - Apply matching adjustments to soft-dark theme - Document all removed tokens from display scale consolidation (193 mappings) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… up legacy stories
New stories under Color/Display/:
- DisplayColors: Emphasis, Emphasis+border, Muted, Muted+border, and side-by-side
combination rows for all 19 display hues; 8px border radius
- LabelColors: Interactive Default and With-border rows using label.* tokens;
hover/active states applied on mouse events (no static state rows)
- Scales: ColorScaleByName blocks for all 19 hues, steps 0–11
Reorganised Color/DataVis (DataWithColors.stories.tsx, titled Color/DataVis):
- LineChart and AreaChart using data-{color}-color-emphasis/muted tokens
- DataVisAccentColors and DataVisMutedColors token tables (moved from Charts.stories.tsx)
- Foreground, Background, and Border token tables for display tokens
Cleanup:
- Remove Color/DataVis/Charts.stories.tsx (content moved to DataWithColors)
- Remove Color/Base/Display-Scales.stories.tsx (superseded by Color/Display/Scales)
- Remove Demo/DisplayColorTesting.stories.tsx (superseded by Color/Display/*)
- Retitle Color/Alpha/Display → Color/Display (Legacy) to avoid sidebar conflict
- Retitle Color/Base/Scales → Base Scales (top-level sidebar group)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
danielguillan
force-pushed
the
danielguillan/test-updated-color-scales
branch
from
0a07cda to
7a8eba3
Compare
Make neutral match gray across themes and restore dark theme scale ordering for the updated palettes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Recalibrate semantic color references for contrast, document removed token redirects, and remove duplicate DataVis Storybook stories. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
danielguillan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
github-actions
Bot
removed
the
update snapshots
Render 15 steps for base color scales that were expanded while keeping legacy 12-step scales unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
danielguillan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
github-actions
Bot
removed
the
update snapshots
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
danielguillan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Update link, Prettylights, and CodeMirror token values after the color scale changes so generated themes satisfy contrast expectations. Add contrast coverage for syntax tokens and targeted dark-dimmed link/syntax checks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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
2 participants
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
This builds on top of #1390 and and extends the color scales with updated values.
What changed
Updated the main base color scale values in:
lightdarklight-high-contrastdark-high-contrastThese scales now use 15 steps. This covers all updated scales, including neutrals.
The following scales remain 12-step because updated values were not provided:
auburnbrowncyanolivepineplumThe base color scale Storybook view was also updated so expanded scales render 15 steps while the remaining legacy scales continue to render 12.
CI fixes
Fixes caused by the updated scale values
Some functional and component tokens needed new base color references after the updated scale values landed. These changes were made to restore contrast expectations against the new 15-step values, especially across dark and high-contrast themes.
This included updates to:
buttonlabelbgColorborderColorcontroldisplayfgColorprettylightscodeMirrorAdditional fixes in this area:
fgColor.accent/fgColor.linkvalues for light, dark, and dark-dimmed themes to restore text contrast after the scale update.Pre-existing failures in the inherited branch
A couple of CI fixes were unrelated to the updated scale values themselves and addressed failures that already existed in the inherited branch:
DataVisColors.stories.tsxStorybook story.