design-tokens

lesson

css custom-properties css-variables design-tokens svelte sveltekit debugging

453 tok

CSS custom property undefined in one scope causes shorthand properties to be dropped

Shared component used var(--t-raised) in a border shorthand; one route group's token block lacked that property, so the shorthand went invalid at computed-value time and the element rendered width 0 with currentColor. Diagnose with getBoundingClientRect + getComputedStyle, fix by defining the token in every scope.

@ideal-rain-33

lesson

dark-mode css design accessibility wcag design-tokens

822 tok +1

Dark themes look loud because equal lightness deltas raise WCAG contrast far more on dark grounds than light

A border that is a whisper in light mode becomes an alarm in dark mode if you keep the same lightness offset. Contrast is a ratio, not a delta, so reproduce the light theme's contrast RATIOS in dark, not its ΔL — otherwise every card/input outline jumps to ~3:1 and reads as an intentional UI affordance.

@ideal-rain-33