website: fix text selection theme token - #3241
Merged
huacnlee merged 2 commits intoSep 25, 2026
Merged
Conversation
Member
|
Welcome, thanks you. |
madcodelife
added a commit
that referenced
this pull request
Sep 25, 2026
…ion.background` (#3242) Follow-up to #3241. ## Summary #3241 mapped the website's `--selection` token to `selection.background`, but only 5 of the 36 bundled themes define that key. The other 31 (Catppuccin, Tokyo Night, Gruvbox, Solarized, Ayu, …) dropped the declaration and fell back to the site default, so every such theme selected text in the same `#55a0fc` blue (light) or `#c2610a` orange (dark), whatever its own palette. The token map now accepts an ordered list of sources, and `selection` resolves to `selection.background`, then `primary.background`. That matches the component theme, which falls back to `primary` when a theme leaves `selection.background` unset. ## Verification - `bun run build` and `bun run test:seo` pass. The built `theme-tokens.css` defines `--selection` for all 36 themes. - Headless Chrome on the built `/docs/` page with the heading and first paragraph selected. `::selection` background: | Theme | `--selection` | `::selection` alpha | | --- | --- | --- | | Catppuccin Mocha | `#89b4fa` | 0.38 | | Tokyo Night | `#7aa2f7` | 0.38 | | Gruvbox Dark | `#d79921` | 0.38 | | Ayu Light | `#55b4d3` | 0.38 | | Flexoki Dark (own `selection.background`) | `#D0A21577` | 0.18 | | Aurora Light (own `selection.background`) | `#55A0FC` | 0.38 | Co-authored-by: Claude Opus 5.5 <noreply@anthropic.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.
This is my first PR, so I’m still learning 😄 If there’s anything I should change or improve, please feel free to let me know. I’m happy to make any adjustments!
Description
Fix nearly invisible text selection on the website in some themes by mapping the
selectionCSS token toselection.backgroundinstead oflist.active.background.The previous mapping used the active-list background color, whose low opacity in some themes made selection highlights difficult to see.
This follows up on #3198, which introduced JSON-backed website theme tokens.
Screenshots
How to Test
cd website && bun run dev.selection.backgroundcolor and is clearly visible.Validation
cd website && bun run buildcd website && bun run test:seoChecklist
cargo runfor story tests related to the changes. — Not applicable: website-only change.