fix(uix): RadioCards — hover on a selected card keeps the active colour

The hover rule out-specified the checked rule, so hovering a selected card
reverted it to the neutral (unselected) hover colour — visually undoing the
selection. Now the neutral hover excludes `[data-state='checked']`, and a
dedicated checked-hover rule keeps the active colour and just deepens it a
notch (border → --_radio-group-palette-solid-hover, tint 7% → 12%). Selection
state is never affected by hover.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent f59396b51a
commit 651f31aed0

@ -81,11 +81,23 @@
/* ── Hover / focus ──────────────────────────────────────────────────────── */ /* ── Hover / focus ──────────────────────────────────────────────────────── */
[data-radio-cards] [data-radio-cards-item]:hover:not([data-disabled]):not([data-readonly]) { /* Hover — UNCHECKED card only: neutral lift. Excludes checked so hovering a
* selected card never reverts it to the unselected hover colour. */
[data-radio-cards]
[data-radio-cards-item]:hover:not([data-disabled]):not([data-readonly]):not([data-state='checked']) {
border-color: var(--radio-cards-border-hover); border-color: var(--radio-cards-border-hover);
background: var(--radio-cards-bg-hover); background: var(--radio-cards-bg-hover);
} }
/* Hover — SELECTED card: stay in the active colour, just deepen a notch
* (darker tone via the palette hover token + a slightly more opaque tint).
* Selection state is unaffected by hover. */
[data-radio-cards]
[data-radio-cards-item][data-state='checked']:hover:not([data-disabled]):not([data-readonly]) {
border-color: var(--_radio-group-palette-solid-hover);
background: color-mix(in srgb, var(--_radio-group-palette-solid) 12%, var(--color-surface-default));
}
[data-radio-cards] [data-radio-cards-item]:focus-visible { [data-radio-cards] [data-radio-cards-item]:focus-visible {
box-shadow: var(--radio-cards-focus-ring); box-shadow: var(--radio-cards-focus-ring);
} }

Loading…
Cancel
Save

Powered by TurnKey Linux.