From e6fd014d436e05021b894665f8ed3bcd5fbcf473 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 5 Jun 2026 00:39:02 +0200 Subject: [PATCH] =?UTF-8?q?fix(eidos):=20snappier=20checkbox=20check=20?= =?UTF-8?q?=E2=80=94=20stroke=20draw=20220ms=20->=20--duration-fast=20(120?= =?UTF-8?q?ms)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The checkmark stroke-dashoffset draw used a hardcoded 220ms while the box fill ran at --duration-fast (120ms) — nearly 2x, so the check read as laggy when toggling. Tokenize it to var(--duration-fast) so the stroke draws in sync with the box (one 120ms motion). Not the motion service (uix.motion) — this is a plain CSS transition in checkbox.css driven by the recipe `stroke-duration` token. Verified in browser: path transition 0.22s -> 0.12s, synced with the box. generated/base.css regenerated. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/uix/eidos/generated/base.css | 2 +- src/uix/eidos/lib/recipes/base.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index fc42da4cd..bef0714f0 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -734,7 +734,7 @@ --checkbox-focus-ring: 0 0 0 var(--checkbox-focus-ring-offset) var(--checkbox-focus-ring-surface), 0 0 0 calc(var(--checkbox-focus-ring-offset) + var(--checkbox-focus-ring-width)) var(--checkbox-focus-ring-color); --checkbox-transition-duration: var(--duration-fast); --checkbox-transition-ease: var(--ease-default); - --checkbox-stroke-duration: 220ms; + --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) ); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 57f9f8242..3592fd055 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -660,7 +660,9 @@ export const THEME_BASE_RECIPE_TOKENS = { '0 0 0 var(--checkbox-focus-ring-offset) var(--checkbox-focus-ring-surface), 0 0 0 calc(var(--checkbox-focus-ring-offset) + var(--checkbox-focus-ring-width)) var(--checkbox-focus-ring-color)', 'transition-duration': 'var(--duration-fast)', 'transition-ease': 'var(--ease-default)', - 'stroke-duration': '220ms', + // Checkmark stroke draw — synced with the box transition (--duration-fast). + // Was a hardcoded 220ms, which read as laggy next to the 120ms box fill. + 'stroke-duration': 'var(--duration-fast)', 'stroke-ease': 'cubic-bezier(0.4, 0, 0.2, 1)', 'bg-off': 'var(--color-surface-default)', 'bg-off-hover':