diff --git a/src/uix/eidos/components/checkbox/checkbox.css b/src/uix/eidos/components/checkbox/checkbox.css index 1d28f25e6..3441dfd56 100644 --- a/src/uix/eidos/components/checkbox/checkbox.css +++ b/src/uix/eidos/components/checkbox/checkbox.css @@ -18,7 +18,10 @@ padding: 0; border: var(--checkbox-border-width) solid var(--checkbox-border-off); border-radius: var(--checkbox-radius); - background: var(--checkbox-bg-off); + /* LONGHAND on purpose: `background:` would reset `background-image`, and + * this rule (0,1,0) outweighs the `:where()` (0,0,0) of `archetypes.css`, + * so the state-layer veil would never paint — not on hover, not ever. */ + background-color: var(--checkbox-bg-off); box-shadow: none; cursor: pointer; outline: none; @@ -67,8 +70,14 @@ /* ── Hover / focus ─────────────────────────────────────────────────────── */ +/* The neutral hover veil is the system's (§38): the root carries + * `archetype: 'trigger'`, so `archetypes.css` already paints + * `background-image: linear-gradient(var(--state-hover), var(--state-hover))`. + * This rule used to declare `background:` — the SHORTHAND, which resets + * `background-image` and so cancelled that veil, replacing it with a + * hand-rolled `color-mix` of the surface. Measured: the root computed + * `background-image: none` while hovered. */ [data-checkbox]:hover:not([data-disabled]):not([data-readonly]) { - background: var(--checkbox-bg-off-hover); border-color: var(--checkbox-hover-border-off); } diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index f852c5625..9d602c938 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -1073,7 +1073,6 @@ --checkbox-stroke-duration: var(--duration-fast); --checkbox-stroke-ease: cubic-bezier(0.4, 0, 0.2, 1); --checkbox-bg-off: var(--color-surface-default); - --checkbox-bg-off-hover: color-mix( in srgb, var(--color-surface-default) 82%, var(--color-surface-overlay) ); --checkbox-border-off: var(--color-border-default); --checkbox-hover-border-off: var(--color-border-strong); --checkbox-disabled-bg: color-mix( in srgb, var(--color-surface-overlay) 78%, var(--color-surface-default) ); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 50e721b6a..9d5ad4ddb 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -995,8 +995,6 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ 'stroke-duration': 'var(--duration-fast)', 'stroke-ease': 'cubic-bezier(0.4, 0, 0.2, 1)', 'bg-off': 'var(--color-surface-default)', - 'bg-off-hover': - 'color-mix( in srgb, var(--color-surface-default) 82%, var(--color-surface-overlay) )', 'border-off': 'var(--color-border-default)', 'hover-border-off': 'var(--color-border-strong)', 'disabled-bg':