The breakpoint table in docs/styling-guide.md had four wrong values
(xxs at 450px, s at 800px, m at 1000px, l at 1200px) and three wrong
names (s instead of sm, m instead of md, l instead of lg) compared to
the actual SCSS variables in _media-queries.scss and CSS custom
properties in _css-variables.scss.
Co-authored-by: Debian <x@zak.linux>
Standardize dialog actions: primary=mat-flat-button color=primary,
secondary/cancel=mat-button, destructive=color=warn. Drop dead Bootstrap
'btn btn-primary' classes and decorative check/close icons. Document the
convention in docs/styling-guide.md and update e2e selectors that keyed
on the old stroked variant.
Closes#8683
Mark sync-based onboarding dismissal as fully complete so the hint tour does not restart on the next boot. Guard the sync setup CTA while the dialog is loading or open, cover the async races in tests, and move the onboarding z-index to a design token.
backdrop-filter on magic-side-nav establishes a new containing block for
its fixed-positioned children (.nav-sidenav drawer and .nav-backdrop-mobile
overlay). On mobile the host shrinks to width:0, collapsing both children
off-screen so the drawer never opens — same trap that was fixed for
liquid-glass. Move background + backdrop-filter to the inner .nav-sidenav.
Add a guard comment on the component :host and a "Authoring Themes"
section in docs/styling-guide.md so future themes don't reintroduce this.
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.
