From b35855c20df0513fb989a0da3a25b5cb01f56293 Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 20 Aug 2026 20:32:51 +0200 Subject: [PATCH] =?UTF-8?q?fix(checkbox):=20el=20velo=20del=20sistema=20vu?= =?UTF-8?q?elve=20a=20pintar=20=E2=80=94=20y=20el=20atajo=20era=20el=20cul?= =?UTF-8?q?pable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Firma 3, primer componente. El checkbox tenía un hover propio (`bg-off-hover`, un `color-mix` del surface al 82 %) de los que §38 deprecó, y al quitarlo apareció que el velo del sistema no volvía. La causa no era el hover: era la regla BASE. `[data-checkbox] { background: var(--checkbox-bg-off) }` usa el ATAJO, que fija `background-image: none`, y esa regla pesa (0,1,0) contra el `:where()` de `archetypes.css`, que pesa (0,0,0). El velo perdía la cascada SIEMPRE — no en hover, nunca. El hover bespoke no era un capricho: era la cicatriz de que el velo del sistema no llegaba, y con él delante nadie lo notó. Dos cambios, uno por causa: regla base `background:` → `background-color:` (longhand), que deja libre `background-image` para el velo regla hover fuera el `background` propio; queda el `border-color`, que es otro eje y otra decisión Medido en el navegador (sonda de computed, 2.436 valores en 7 estados): antes hover bg `srgb 0.974` · img `none` ← el velo, ausente después hover bg `oklch(0.9911)` · img `linear-gradient(rgb(0 0 0 / 0.08))` reposo intacto · tallas intactas · disabled intacto · foco intacto 8 diffs, todos en el hover y sólo en esas dos propiedades. El hover queda algo MÁS visible que antes (0.911 efectivo contra 0.974): es la calibración del sistema, que es justamente lo que la firma perseguía. `bg-off-hover` sale del contrato: sin consumidores, y un alias público que nadie consume rompe `recipe-css-contract`. censo checkbox 47 % · audit PASS · eidos-lint 0 invalid · suite 434 (1 rojo conocido) · rtl 0 · docs 0 No adjunto captura: el panel del navegador no está visible en esta sesión y el screenshot expira. La evidencia es la medición de computed sobre Chromium real. Co-Authored-By: Claude Opus 5 --- src/uix/eidos/components/checkbox/checkbox.css | 13 +++++++++++-- src/uix/eidos/generated/base.css | 1 - src/uix/eidos/lib/recipes/base.ts | 2 -- 3 files changed, 11 insertions(+), 5 deletions(-) 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':