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,77 @@
+/**
+ * FamilySync Design System — TypeScript Token Object (Phase 2, D-01/D-02)
+ *
+ * Mirrors apps/pwa/src/styles/tokens.css. Used by components that need token
+ * values in inline-style props (e.g., dynamic CSS-in-JS, canvas, SVG).
+ *
+ * Keep names aligned with the CSS custom property names (camelCase of the CSS
+ * var name after `--`).
+ */
+
+export const tokens = {
+  // ── Surface / Border / Text ──────────────────────────────────────────────
+
+  colorSurface: '#FFFFFF',
+  colorSurfaceDim: '#F7F7F8',
+  colorSurfaceRaised: '#FFFFFF',
+
+  colorBorder: '#E2E4E9',
+  colorBorderSubtle: '#ECEEF2',
+
+  colorTextPrimary: '#111318',
+  colorTextSecondary: '#6B7280',
+  colorTextMuted: '#9CA3AF',
+
+  colorFocusRing: '#4A90D9',
+  colorOverlay: 'rgba(0, 0, 0, 0.32)',
+
+  // ── Calendar Colors ───────────────────────────────────────────────────────
+
+  colorMember0: '#4A90D9',
+  colorMember1: '#50C878',
+  colorMember2: '#F5A623',
+  colorMember3: '#9B59B6',
+  colorMember4: '#E67E22',
+  colorMember5: '#1ABC9C',
+
+  colorSharedFamily: '#F25C7A',
+  colorDestructive: '#DC2626',
+
+  // ── Spacing Scale ─────────────────────────────────────────────────────────
+
+  space1: '4px',
+  space2: '8px',
+  space3: '12px',
+  space4: '16px',
+  space6: '24px',
+  space8: '32px',
+  space12: '48px',
+
+  // ── Typography ────────────────────────────────────────────────────────────
+
+  fontFamilyBase: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+
+  textBodySize: '15px',
+  textBodyWeight: 400,
+  textBodyLineHeight: 1.5,
+
+  textLabelSize: '13px',
+  textLabelWeight: 400,
+  textLabelLineHeight: 1.4,
+
+  textHeadingSize: '18px',
+  textHeadingWeight: 600,
+  textHeadingLineHeight: 1.25,
+
+  textDisplaySize: '24px',
+  textDisplayWeight: 600,
+  textDisplayLineHeight: 1.2,
+
+  // ── Breakpoints ───────────────────────────────────────────────────────────
+
+  bpPhone: '0px',
+  bpTablet: '768px',
+  bpDesktop: '1280px',
+} as const
+
+export type Tokens = typeof tokens