The base body{} block was re-declaring --transition-duration-s (180ms)
and --transition-duration-l (400ms), shadowing the :root defaults
(150ms/375ms) for every element in the app regardless of theme
(body.isDarkTheme did not re-override them). That made the recent
token sweep silently drift some callers from 150ms to 180ms (+20%)
instead of the intended 1:1 swap, and left the light/dark experience
identical despite looking theme-specific.
Remove the three overrides — durations are now consistently the :root
defaults in both themes. Visible effect: task hover/select, done-toggle
SVG, and onboarding animations run about 30ms faster.
Update styling-guide.md to drop the obsolete "light theme overrides"
note and keep the bucket-rounding guidance.
Introduce coherent scales that replace ad-hoc hardcoded values and give
future components documented tokens to adopt.
Typography (src/styles/_css-variables.scss + src/styles/page.scss via
body styles in the sweep commit):
- --font-size-xs..3xl (11–28px) with --font-size-md as the body base.
- --font-weight-medium/semibold/bold (400 is the browser default, not
declared).
- --line-height-tight/snug/normal (unitless so they scale with size).
- --letter-spacing-tighter/tight/normal/wide.
- --font-mono-stack for code/kbd/pre/samp.
- --font-primary-stack reordered to lead with native OS UI fonts
(-apple-system, Segoe UI Variable Text, Roboto) with Inter/Open Sans
as graceful fallbacks.
Radius scale:
- --radius-xs/sm/md/lg/xl and --radius-pill.
- --card-border-radius retargets to var(--radius-md) (4px → 8px) and
--task-border-radius retargets to var(--radius-sm) (4px → 6px) for a
softer surface treatment; both legacy aliases stay so 30+ consumers
don't need touching.
Focus ring (keyboard accessibility):
- --focus-ring-width / -offset / -color tokens.
- .focus-ring opt-in utility class in src/styles/util.scss using
outline on :focus-visible — Material components keep their own focus
treatment.
Font stack dedup: src/styles/_fonts.scss is the single source of truth
for the stack. _css-variables.scss interpolates it into
--font-primary-stack; themes.scss passes the same list (as a literal
string, which is all mat.m2-define-typography-config accepts) — no more
"keep in sync" drift trap.
Also fix the inherited --transition-duration--leave (double dash) typo
on the light-theme body block so the override actually matches its
intended name.
docs/styling-guide.md documents all the new tokens, correct the
transition-duration values to match _css-variables.scss (-s 150ms,
-m 225ms), and adds a Focus Ring section with adoption guidance.
Extract styling rules, CSS variable reference, and design token
patterns into docs/styling-guide.md for a consistent design language.
CLAUDE.md now points to the guide for all styling changes.
