Skip to content

fix(ui): selection is an opaque pair, primary-foreground on primary #2573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Makisuo merged 3 commits into from
Nov 13, 2026
+23 −7
Merged

fix(ui): selection is an opaque pair, primary-foreground on primary #2573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5c8904
fix(ui): selection is an opaque pair, primary-foreground on primary
Makisuo Nov 13, 2026
d9f7ba3
fix(ui): a chip keeps its own look when selected
Makisuo Nov 13, 2026
9d51585
fix(ui): an underline marks the selected letters of a chip
Makisuo Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/design-rules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,10 @@ bordered box takes its parent's radius minus 1px: `before:rounded-lg-inset` insi
step of the hue in light, where the fill itself is near 3:1 as type, and the fill in dark. Fills,
borders and strokes keep the tone. Write the utility; never a fill token as `color` in a style
object.
- Selected text takes `primary-a4` as its highlight and reads in `foreground`, set once in
tokens.css. No `selection:` utility at a call site.
- Selected text is `primary-foreground` on `primary`, set once in tokens.css: an opaque pair, so it
reads the same over muted text or a tone. A chip keeps its own look when selected (a kit `badge`,
or a label on a solid fill: `text-on-fill`, `text-primary-foreground`): a band inside a fill
only fights it, so a thin underline in the chip's own ink marks the selected letters. No `selection:` utility at a call site.
- Washes are translucent and read the same on any surface: `surface-faint`, `surface-sunken`,
`surface-strong`.
- A see-through surface is a token, never `bg-background/NN` or `bg-card/NN`
Expand Down
22 changes: 18 additions & 4 deletions packages/ui/src/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -812,11 +812,25 @@
* {
@apply border-border outline-ring/50;
}
/* Selected text takes the primary's strong wash instead of the system blue, and reads in
`foreground`: a muted or toned run would fall under 4.5:1 on the wash. */
/* Selected text takes the primary instead of the system blue. Both halves are opaque, so the
pair reads the same over a muted run, a tone, or a filled badge. */
::selection {
background-color: var(--color-primary-a4);
color: var(--color-foreground);
background-color: var(--color-primary);
color: var(--color-primary-foreground);
}
/* A chip keeps its own look when selected: a band inside a fill or a tint only fights it. A
thin underline in its own ink marks the selected letters instead. */
[data-slot="badge"]::selection,
[data-slot="badge"] ::selection,
.text-on-fill::selection,
.text-on-fill ::selection,
.text-primary-foreground::selection,
.text-primary-foreground ::selection {
background-color: transparent;
color: currentColor;
Comment thread
Makisuo marked this conversation as resolved.
Resolved
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
body {
@apply font-sans bg-background text-foreground;
Expand Down
2 changes: 1 addition & 1 deletion packages/views/src/ui/native-select.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const nativeSelectWrapperStyles = "group/native-select relative w-fit has-[select:disabled]:opacity-50"

export const nativeSelectStyles =
"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:active:bg-input/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive-a3 dark:aria-invalid:ring-destructive-a4 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-xs select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-lg data-[size=sm]:py-0.5 data-leading:pl-7 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
"border-input placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:active:bg-input/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive-a3 dark:aria-invalid:ring-destructive-a4 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-xs select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-lg data-[size=sm]:py-0.5 data-leading:pl-7 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"

export const nativeSelectIconStyles =
"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
Expand Down
Loading