feat(17-01): restructure tokens.css to combined :root,[data-theme=light] selector + add --bottom-chrome-h

- Change :root { to :root, [data-theme="light"] { (D-06 combined selector)
- Add --bottom-chrome-h: calc(56px + env(safe-area-inset-bottom, 0px)) to spacing scale
- Keep all 12 --sx-color-* overrides inside the combined block (cascade unchanged)
- Keep --brand-logo-* tokens inside the combined block (verbatim, no value changes)
- Add dark-theme stub as comment-only (Phase 999.20 fills values; no live rule)
- All existing values unchanged; PWA build passes; Schedule-X colors verified via playwright-cli
This commit is contained in:
Lucas Berger
2026-06-18 12:12:42 -04:00
parent eb0db8beef
commit c2f89bd55f
+16 -1
View File
@@ -13,7 +13,8 @@
* theme-default import so they win the cascade.
*/
:root {
:root,
[data-theme="light"] {
/* ─────────────────────────────────────────────────────────────────────────
* BASE SURFACE / BORDER / TEXT PALETTE
* ───────────────────────────────────────────────────────────────────────── */
@@ -62,6 +63,11 @@
--space-8: 32px;
--space-12: 48px;
/* Layout-chrome token — single source of truth for BottomTabBar effective height.
* Consumed by: FAB offset (CalendarShell.tsx), content padding (App.tsx), BottomTabBar.
* Workstreams A and D reference this token; do not hard-code 56px elsewhere. */
--bottom-chrome-h: calc(56px + env(safe-area-inset-bottom, 0px));
/* ─────────────────────────────────────────────────────────────────────────
* TYPOGRAPHY
* ───────────────────────────────────────────────────────────────────────── */
@@ -135,6 +141,15 @@
--sx-internal-color-text: var(--color-text-primary);
}
/* ─────────────────────────────────────────────────────────────────────────
* DARK THEME STUB — Phase 17 groundwork only.
* Values are intentionally absent. Phase 999.20 fills these values and
* wires prefers-color-scheme / data-theme toggle.
* DO NOT add a live rule here until Phase 999.20.
* ─────────────────────────────────────────────────────────────────────────
* [data-theme="dark"] { ... }
* ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
* SKELETON SHIMMER ANIMATION
* Used by SkeletonCalendar.tsx — no third-party animation library.