[docs] Overhaul grays#5329
Draft
aarongarciah wants to merge 17 commits into
Draft
Conversation
Rename all primary-text consumers of --gray-t2 to a new --gray-t3 token with identical values, freeing --gray-t2 to become a mid-tone step in the upcoming palette change. Pin the syntax highlighting base colors to literals so code colors no longer track the UI gray scale. Remove the unused --color-gridline token and dangling --color-highlight demo reset. No visual changes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the HSL gray scale with a refined oklch palette and design a matching dark-mode scale anchored on near-black surfaces instead of pure black. Page backgrounds, borders, and selection now come from the scale: content and popup surfaces use s-steps, borders use c3, and the demo code panel moves to s2 to keep the playground/code two-tone. Safari themeColor metas follow the new backgrounds. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Accordion trigger hover and the search popup surface/outline now use theme tokens instead of one-off literals. Also fix the additional-type back link hover in dark mode, which used a fill color as text and was nearly invisible. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The timeline card shadow used --color-border as its color, which was translucent black before the palette change and opaque gray after, flattening the cards. Use blackA directly for the shadow and the light mode dot border, and bump dark c3 to match the border strength that whiteA-5 over black used to produce. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The opaque c3 outline reads lighter than the dimmed backdrop behind the dialog, making the edge look muddy. A translucent black outline composites over the backdrop and stays crisp, matching the generic Popup treatment. Dark mode keeps the strong opaque outline. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The mobile nav drawer ring had the same problem as the search dialog: an opaque c3 ring reads lighter than the dimmed backdrop behind it, so it looked muddy where master's translucent ring was crisp. The demo collapse button's inner ring was hardcoded white, which no longer matches the s1 button face. Use black alpha for the drawer ring in light mode and the content token for the button ring. Audited every other outline/ring in the docs chrome: the remaining opaque rings are dark-mode-only (black alpha is invisible there) or hairlines on flat surfaces, where opaque steps render as intended. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Audit fixes after the palette refactor: dim glyphs (search icons, placeholders, breadcrumb separators) use p1 instead of t1 or the near-invisible c3; the side nav active ring uses the border token instead of a fill step; the mobile clear-button press state is no longer weaker than its hover; inverted link text uses the surface step instead of --color-background; the dark reference section heading follows t3 instead of pure white; search popup shadow literals map to their exact blackA steps. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
At oklch 57% the muted text step sat at 4.34:1 on the page background and 4.15:1 on raised surfaces, just under the 4.5:1 AA threshold for normal text. 55% clears both (4.71:1 and 4.52:1) with an imperceptible visual shift. Dark mode was already at 8.4:1 and is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Docs pages, popup-adjacent surfaces, and the demo playground go back to a pure white content background; dark mode keeps the s1 surface. Safari themeColor follows. The website body keeps s1 as its own background. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the blackA/whiteA scales with gray-a1..a5 defined alongside the gray steps (whiteA had no consumers left). Adopt the updated light values: c2/c3 darken slightly for crisper borders, the p family gains p2 (67%, subtle), p3 (62.5%, previous p2 consumers), and p4 (48%, strong), and t1 returns to 57% per the source palette. Dark mode gains matching p-steps; alpha steps are mode-invariant like the scales they replace. blackA-4 (16%) consumers map to a4 (24%) for the crisp 1px popup edge layers and a3 (12%) for the large soft shadow layer. Note: t1 at 57% measures 4.34:1 against the page background, under WCAG AA's 4.5:1 for normal-size muted text. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
In light mode p4 (48%) sits just beyond t2 (50%) in strength; the dark value (78%) fell short of dark t2 (81%), flipping the step ordering between modes. 83% restores the same relationship. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Apply the updated palette: the p family reorders into a monotonic ramp (p1 73 through p4 62.5), so previous p1 consumers move to p3 and p3 consumers to p4 at identical values; t1/t2 lighten to 61%/53%. Dark mode gets its own spec: near-black surfaces (s1 17), a much stronger c-ramp (c1 30, c2 37.75, c3 43.25), and white alpha steps so gray-a* rings adapt per mode. Blurred shadows are gated to light mode where alpha steps would otherwise glow in dark. A new --gray-contrast token replaces the hardcoded white in the inverted highlight pills, and p-steps are now mode-invariant, removing two dark-only text overrides. Safari themeColor follows the new dark background. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…-colors-1ac8d4 # Conflicts: # docs/src/components/Accordion.css # docs/src/components/Demo/Demo.css
commit: |
Bundle size
PerformanceTotal duration: 1,219.70 ms +100.71 ms(+9.0%) | Renders: 78 (+0) | Paint: 1,910.77 ms +156.55 ms(+8.9%)
11 tests within noise — details Metric alarms
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
TypeScript 5.5+ infers a type predicate from the filter callback, narrowing the array's element type so includes() rejects the full step union. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
aarongarciah
changed the title
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.
Preview: https://deploy-preview-5329--base-ui.netlify.app/
What changed
Replaces the docs-site gray system (HSL scale + separate blackA/whiteA alpha scales) with a single oklch gray token set used across the docs pages, home page, careers page, and 404 — demos, experiments, and syntax highlighting colors are untouched.
--gray-s1..s2(surfaces),c1..c3(fills/borders),p1..p4(dim/placeholder ramp),t1..t3(text ramp),a1..a5(alpha steps), plus--gray-contrast.a1..a5are black alpha in light and white alpha in dark, so rings and outlines adapt per mode. Blurred shadows are gated to light mode where white alpha would glow.--color-content(white / s1),--color-border(c3),--color-popup(white / s2),--color-selection(c2 / c3),--color-foreground(t3).--gray-t3was introduced so the old ink token could become a mid text step.themeColormetas follow the new backgrounds; the private/docs-themepage shows the full new matrix.Notes for review
t313.3:1,t25.3:1,t13.79:1 (muted tier is intentionally below AA per the source palette), placeholders ~3.4:1. Dark mode is ≥5.7:1 across all text steps.