Skip to content

fix(a11y): dark-adapt stroke tokens for dark mode - #27

Merged
BrianGenisio merged 2 commits into
mainfrom
fix/a11y-d12-stroke-tokens
Aug 13, 2026
Merged

fix(a11y): dark-adapt stroke tokens for dark mode#27
BrianGenisio merged 2 commits into
mainfrom
fix/a11y-d12-stroke-tokens

Conversation

@BrianGenisio

@BrianGenisio BrianGenisio commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Summary

Closes #23 (D12). Dark mode redefined every --Colors-Stroke-* token to the same light-mode near-white neutrals, so borders and dividers glowed on dark surfaces. ChatCPT already patched two consumers locally.

Visual change for all DS consumers. Design has signed off for ChatCPT Wave 4.

Changes

Neutral strokes invert onto the dark scale, keeping Lighter → Stronger as increasing contrast against Backgrounds-Main-Top (Neutral-1300):

Token Light Dark
Background Neutral-20 Neutral-1300
Lighter Neutral-100 Neutral-1250
Light Neutral-150 Neutral-1200
Default Neutral-200 Neutral-1150
Medium Neutral-300 Neutral-1100
Strong Neutral-400 Neutral-1000
Stronger Neutral-550 Neutral-900
Primary Primary-600 Primary-450 (same step as A7 focus)
Primary-Light / Medium / Dark 350 / 500 / 800 350 / 500 / 600

--Colors-Buttons-Tertiary-Default is the tertiary border (Neutral-300 in light) and had the same miss. Dark now uses Neutral-1100, matching ChatCPT's existing override.

Look at the dark block in colors/colors.css. Components that already dark-adapt their own borders (boxes, tags, dropdown hover) keep those overrides.

Test plan

  • npm test — stroke tokens in dark are not the light near-white scale; A7/A8 contrast tests still pass
  • colors/test.html in dark: stroke swatches sit on the dark neutrals, not #E7EAF2 / #F4F5F9
  • Buttons, inputs, tables, modal header rules, dropdown hover in dark
  • After merge: ChatCPT submodule bump; drop app.css tertiary-border override. Rest-pill uses Stroke-Light at 0.5 opacity, so that dark override may still be needed (grip vs hairline).

Brian Genisio and others added 2 commits August 13, 2026 07:41
Remap dark --Colors-Stroke-* onto dark neutrals/primary so borders
no longer glow near-white on dark surfaces, and dark-adapt the
tertiary button border token consumers were patching locally.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai

coderabbitai Bot commented Aug 13, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 32 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cca9dfa8-8ad9-46ab-a8b4-400ab47aed01

📥 Commits

Reviewing files that changed from the base of the PR and between c8bc490 and ae93eda.

📒 Files selected for processing (4)
  • colors/README.md
  • colors/colors.css
  • components/button/button.css
  • tests/contrast-tokens.spec.js

Comment @coderabbitai help to get the list of available commands.

@BrianGenisio
BrianGenisio merged commit 6ab762a into main Aug 13, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[a11y][D12] Stroke tokens are not dark-adapted

1 participant