feat(02-03): install Schedule-X stack + CSS token layer + main.tsx imports

- Install @schedule-x/{calendar,react,theme-default,event-modal,events-service}@4.x - Install temporal-polyfill@0.3.2 and lucide-react@1.17.0 - Create src/styles/tokens.css: all color/spacing/typography/breakpoint tokens plus --sx-color-* Schedule-X overrides mapped to project tokens - Create src/styles/tokens.ts: TypeScript mirror of token values for inline styles - Create src/styles/index.css: imports tokens.css + minimal global reset - Update main.tsx: Temporal polyfill first, then SX theme CSS, then styles/index.css
2026-06-05 09:42:34 -04:00
parent 6dc5d77f60
commit 0911a2330a
6 changed files with 367 additions and 0 deletions
@@ -0,0 +1,135 @@
+/**
+ * FamilySync Design System — Clean Theme (Phase 2, D-01/D-02)
+ *
+ * All colors, spacing, typography, and breakpoints are declared here as CSS
+ * custom properties. No hard-coded hex or px values in component files.
+ *
+ * Import order in main.tsx:
+ *   1. temporal-polyfill/global
+ *   2. @schedule-x/theme-default/dist/index.css
+ *   3. ./styles/index.css (imports this file)
+ *
+ * The Schedule-X --sx-color-* overrides at the bottom must come AFTER the
+ * theme-default import so they win the cascade.
+ */
+
+:root {
+  /* ─────────────────────────────────────────────────────────────────────────
+   * BASE SURFACE / BORDER / TEXT PALETTE
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --color-surface: #FFFFFF;
+  --color-surface-dim: #F7F7F8;
+  --color-surface-raised: #FFFFFF;
+
+  --color-border: #E2E4E9;
+  --color-border-subtle: #ECEEF2;
+
+  --color-text-primary: #111318;
+  --color-text-secondary: #6B7280;
+  --color-text-muted: #9CA3AF;
+
+  --color-focus-ring: #4A90D9;
+  --color-overlay: rgba(0, 0, 0, 0.32);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * SEMANTIC CALENDAR COLORS
+   * 10% accent band — ONLY for event chip fills and color legend swatches.
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --color-member-0: #4A90D9;
+  --color-member-1: #50C878;
+  --color-member-2: #F5A623;
+  --color-member-3: #9B59B6;
+  --color-member-4: #E67E22;
+  --color-member-5: #1ABC9C;
+
+  /* Shared-family calendar — rose, confirmed by user */
+  --color-shared-family: #F25C7A;
+
+  /* Destructive — declared for Phase 3 reuse; not used in Phase 2 (read-only) */
+  --color-destructive: #DC2626;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * SPACING SCALE (multiples of 4px)
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * TYPOGRAPHY
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  /* Body — 15px/400/1.5: popover description, agenda location lines */
+  --text-body-size: 15px;
+  --text-body-weight: 400;
+  --text-body-line-height: 1.5;
+
+  /* Label — 13px/400/1.4: event chip text, time labels, legend labels */
+  --text-label-size: 13px;
+  --text-label-weight: 400;
+  --text-label-line-height: 1.4;
+
+  /* Heading — 18px/600/1.25: popover title, view section headers */
+  --text-heading-size: 18px;
+  --text-heading-weight: 600;
+  --text-heading-line-height: 1.25;
+
+  /* Display — 24px/600/1.2: app name in nav bar (desktop), day number in day-view */
+  --text-display-size: 24px;
+  --text-display-weight: 600;
+  --text-display-line-height: 1.2;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * BREAKPOINTS (reference; use in @media queries)
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --bp-phone: 0px;
+  --bp-tablet: 768px;
+  --bp-desktop: 1280px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * SCHEDULE-X CSS TOKEN OVERRIDES
+   *
+   * Map all --sx-color-* vars to project tokens so no Schedule-X default
+   * colors bleed through. These must come after the @schedule-x/theme-default
+   * import (handled by import order in main.tsx).
+   *
+   * Source: https://schedule-x.dev/docs/calendar/configuration
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --sx-color-primary: var(--color-member-0);
+  --sx-color-on-primary: #ffffff;
+  --sx-color-primary-container: var(--color-surface-dim);
+  --sx-color-on-primary-container: var(--color-text-primary);
+  --sx-color-surface: var(--color-surface);
+  --sx-color-on-surface: var(--color-text-primary);
+  --sx-color-on-surface-variant: var(--color-text-secondary);
+  --sx-color-outline: var(--color-border);
+  --sx-color-neutral: var(--color-surface-dim);
+  --sx-color-neutral-variant: var(--color-border-subtle);
+
+  --sx-font-family: var(--font-family-base);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * SKELETON SHIMMER ANIMATION
+ * Used by SkeletonCalendar.tsx — no third-party animation library.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}