/* Material 3 design tokens for ABL Reader. * * Colours are Google's BASELINE Material 3 scheme, taken from the installed * @material/web package (tokens/versions/latest/sass/_md-ref-palette.scss and * the _md-sys-color light/dark role maps) and resolved to hex here — not typed * from memory and not a bespoke palette. Source colour is Material's own * #6750a4. * * Dark is the default, as the app has always been. Light is opt-in via * rather than prefers-color-scheme, so the theme * never changes under the user without them asking — a light page arriving * unannounced is genuinely unpleasant for a low-vision reader. * * The app's own accessibility rules are re-asserted at the bottom. They outrank * Material's defaults wherever the two disagree. */ /* ── Colour: Material 3 baseline, dark (default) ─────────────────────── */ :root, :root[data-md-theme='dark'] { --md-sys-color-primary: #d0bcff; --md-sys-color-on-primary: #381e72; --md-sys-color-primary-container: #4f378b; --md-sys-color-on-primary-container: #eaddff; --md-sys-color-secondary: #ccc2dc; --md-sys-color-on-secondary: #332d41; --md-sys-color-secondary-container: #4a4458; --md-sys-color-on-secondary-container: #e8def8; --md-sys-color-tertiary: #efb8c8; --md-sys-color-on-tertiary: #492532; --md-sys-color-tertiary-container: #633b48; --md-sys-color-on-tertiary-container: #ffd8e4; --md-sys-color-error: #f2b8b5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8c1d18; --md-sys-color-on-error-container: #f9dedc; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-on-surface: #e6e0e9; --md-sys-color-surface-variant: #49454f; --md-sys-color-on-surface-variant: #cac4d0; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #3b383e; --md-sys-color-surface-container-lowest: #0f0d13; --md-sys-color-surface-container-low: #1d1b20; --md-sys-color-surface-container: #211f26; --md-sys-color-surface-container-high: #2b2930; --md-sys-color-surface-container-highest: #36343b; --md-sys-color-outline: #938f99; --md-sys-color-outline-variant: #49454f; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #322f35; --md-sys-color-inverse-primary: #6750a4; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #d0bcff; color-scheme: dark; } /* ── Colour: Material 3 baseline, light (opt-in) ─────────────────────── */ :root[data-md-theme='light'] { --md-sys-color-primary: #6750a4; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #eaddff; --md-sys-color-on-primary-container: #4f378b; --md-sys-color-secondary: #625b71; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #e8def8; --md-sys-color-on-secondary-container: #4a4458; --md-sys-color-tertiary: #7d5260; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #ffd8e4; --md-sys-color-on-tertiary-container: #633b48; --md-sys-color-error: #b3261e; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #f9dedc; --md-sys-color-on-error-container: #8c1d18; --md-sys-color-background: #fef7ff; --md-sys-color-on-background: #1d1b20; --md-sys-color-surface: #fef7ff; --md-sys-color-on-surface: #1d1b20; --md-sys-color-surface-variant: #e7e0ec; --md-sys-color-on-surface-variant: #49454f; --md-sys-color-surface-dim: #ded8e1; --md-sys-color-surface-bright: #fef7ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f7f2fa; --md-sys-color-surface-container: #f3edf7; --md-sys-color-surface-container-high: #ece6f0; --md-sys-color-surface-container-highest: #e6e0e9; --md-sys-color-outline: #79747e; --md-sys-color-outline-variant: #cac4d0; --md-sys-color-inverse-surface: #322f35; --md-sys-color-inverse-on-surface: #f5eff7; --md-sys-color-inverse-primary: #d0bcff; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #6750a4; color-scheme: light; } /* ── Typography ──────────────────────────────────────────────────────── */ /* Material specifies Roboto. This app already self-hosts faces chosen for readability — Atkinson Hyperlegible and Lexend among them — and the owner is dyslexic, so Roboto would be a downgrade. Material's typeface tokens point at the app stack instead; no Google-hosted font is fetched. */ :root { --md-ref-typeface-brand: system-ui, -apple-system, 'Segoe UI', sans-serif; --md-ref-typeface-plain: system-ui, -apple-system, 'Segoe UI', sans-serif; /* md-icon renders ligatures in this face. The app already bundles MaterialIcons-Regular.woff2, so nothing new is downloaded. */ --md-icon-font: 'Material Icons'; } /* ── Project rule: WCAG 2.5.8 target sizes ───────────────────────────── */ /* Material's defaults are 40px; this app has always pinned interactive targets at 44px, and that rule wins. */ /* NO SIZE OVERRIDES HERE, deliberately. An earlier version of this file pinned container heights and state-layer sizes to 44px to satisfy WCAG 2.5.8. That was wrong on both counts, and reading the package proved it: - Material already ships a 48px touch target. Buttons render an invisible `.touch` box at height:max(48px,100%) (button/internal/shared-styles.css), and the checkbox's hidden input is 48x48 with a 44px focus ring (checkbox/internal/checkbox-styles.css). - --md-*-state-layer-size is the RIPPLE, not the hit area. Setting it changed a visual flourish and nothing about the target. If a target genuinely needs changing, use the `touch-target` attribute (values: wrapper | none). See docs/material-web.md section 4.5. */ /* ── Focus ring ──────────────────────────────────────────────────────── */ /* Material's ring defaults to --md-sys-color-secondary, which on this dark scheme is a muted lilac. Primary is louder and matches the app's long-standing "focus is never subtle" stance. Width and offset are left at Material's own defaults (3px / 2px), which already match what this project used. NOTE, and this is a real open item: the ring only becomes visible when the control matches :focus-visible (focus/internal/focus-ring.js:67). A TV remote or d-pad moves focus programmatically and may not satisfy that, leaving the ring hidden. The fix is NOT a competing outline on the host — that produces a double ring and crowds text-field labels. md-focus-ring exports a public, reflected `visible` property and an attach()/for API; drive that instead. Tracked in docs/material-web.md section 4.1. */ :root { --md-focus-ring-color: var(--md-sys-color-primary); } /* ── Reduced motion ──────────────────────────────────────────────────── */ /* The focus ring already handles this itself — focus-ring-styles.css ends with @media(prefers-reduced-motion){:host{animation:none}} — so only the ripples need suppressing here. */ @media (prefers-reduced-motion: reduce) { md-filled-button, md-outlined-button, md-text-button, md-icon-button, md-checkbox, md-switch, md-dialog, md-primary-tab, md-list-item { --md-ripple-hover-opacity: 0; --md-ripple-pressed-opacity: 0; } }