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:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user