/* Mirrored from the Liverpool source repo tokens/ folder for the docs site's own live theme switcher (Settings Panel + Drawer in the header) — settings-panel.js fetches these by plain path (${tokenBase}palettes/ palette-.css), and the real CDN only has individually-signed bundles for the "blue" and "green" brand palettes specifically, not a generic per-name endpoint for the rest. Keep in sync by hand if the source tokens change. */ /* ============================================================ Twinkle Design System — v2 Mode: Light (Explicit Reset) ============================================================ Light mode is the default — this file is only needed to reset a dark mode applied by a parent element, or to explicitly scope a light region inside a dark page. Usage:
...scoped light region...
============================================================ */ @layer themes { :root[data-mode="light"], .tw-light { --tw-color-surface-default: var(--tw-color-0); --tw-color-surface-raised: var(--tw-color-9); --tw-color-surface-overlay: var(--tw-color-8); --tw-color-surface-sunken: var(--tw-color-9); --tw-color-surface-card: var(--tw-color-0); /* ADA/WCAG AA fix (2026-08-28): --tw-color-text-muted was var(--tw-color-6) — checked against every palette's actual color-6 value (WCAG relative-luminance contrast, not eyeballed) and it fails AA text contrast (4.5:1) against white in ALL 12 palettes, at ratios between 1.54:1 and 2.21:1. That's because slot 6 is genuinely a light decorative tone (it doubles as --tw-color-border-strong right below), never meant to carry text — every palette's slot 6 is a pale tint by design. Slot 5 (already darkened palette-by-palette this same day specifically so it passes AA as --tw-color-text-muted in tokens/semantic/ tokens.css's mode-agnostic default) is the one slot actually verified to work as muted text everywhere; re-targeting here instead of introducing a new color keeps this override error from just moving to a different unfixed slot. Text- secondary and text-muted do render identically in light mode now — an acceptable outcome next to letting muted text fail accessibility on every single palette. */ --tw-color-text-primary: var(--tw-color-3); --tw-color-text-secondary: var(--tw-color-5); --tw-color-text-muted: var(--tw-color-5); --tw-color-text-inverse: var(--tw-color-0); --tw-color-border-default: var(--tw-color-7); --tw-color-border-strong: var(--tw-color-6); --tw-shadow-1: 0 1.4px 2.2px hsl(var(--tw-color-dark-hsl) / 0.008), 0 3.35px 5.3px hsl(var(--tw-color-dark-hsl) / 0.012), 0 6.25px 10px hsl(var(--tw-color-dark-hsl) / 0.015); --tw-shadow-2: 0 1.4px 2.2px hsl(var(--tw-color-dark-hsl) / 0.012), 0 3.35px 5.3px hsl(var(--tw-color-dark-hsl) / 0.016), 0 6.25px 10px hsl(var(--tw-color-dark-hsl) / 0.024), 0 11.15px 17.9px hsl(var(--tw-color-dark-hsl) / 0.024); --tw-shadow-3: 0 1.4px 2.2px hsl(var(--tw-color-dark-hsl) / 0.016), 0 3.35px 5.3px hsl(var(--tw-color-dark-hsl) / 0.024), 0 6.25px 10px hsl(var(--tw-color-dark-hsl) / 0.030), 0 11.15px 17.9px hsl(var(--tw-color-dark-hsl) / 0.036), 0 20px 33.4px hsl(var(--tw-color-dark-hsl) / 0.042), 0 50px 80px hsl(var(--tw-color-dark-hsl) / 0.060); } } /* end @layer themes */