fix(eidos): snappier checkbox check — stroke draw 220ms -> --duration-fast (120ms)

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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 4e71d14c63
commit e6fd014d43

@ -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-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-duration: var(--duration-fast);
--checkbox-transition-ease: var(--ease-default); --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-stroke-ease: cubic-bezier(0.4, 0, 0.2, 1);
--checkbox-bg-off: var(--color-surface-default); --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-bg-off-hover: color-mix( in srgb, var(--color-surface-default) 82%, var(--color-surface-overlay) );

@ -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)', '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-duration': 'var(--duration-fast)',
'transition-ease': 'var(--ease-default)', '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)', 'stroke-ease': 'cubic-bezier(0.4, 0, 0.2, 1)',
'bg-off': 'var(--color-surface-default)', 'bg-off': 'var(--color-surface-default)',
'bg-off-hover': 'bg-off-hover':

Loading…
Cancel
Save

Powered by TurnKey Linux.