diff --git a/src/uix/eidos/components/radio-cards/radio-cards.css b/src/uix/eidos/components/radio-cards/radio-cards.css index df3b035e4..be58ce742 100644 --- a/src/uix/eidos/components/radio-cards/radio-cards.css +++ b/src/uix/eidos/components/radio-cards/radio-cards.css @@ -81,11 +81,23 @@ /* ── 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); 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 { box-shadow: var(--radio-cards-focus-ring); }