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
This commit is contained in:
Lucas Berger
@@ -1,3 +1,13 @@
|
||||
// IMPORTANT — import order is load-bearing:
|
||||
// 1. temporal-polyfill/global must register Temporal on globalThis BEFORE any
|
||||
// Schedule-X code runs (Schedule-X v4 uses Temporal objects at module init).
|
||||
// 2. Schedule-X theme-default CSS must be imported BEFORE tokens.css so that
|
||||
// the project's --sx-color-* overrides in tokens.css win the cascade.
|
||||
// 3. styles/index.css imports tokens.css which carries the --sx-color-* overrides.
|
||||
import 'temporal-polyfill/global'
|
||||
import '@schedule-x/theme-default/dist/index.css'
|
||||
import './styles/index.css'
|
||||
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* FamilySync global styles entry point.
|
||||
*
|
||||
* Import order matters — tokens.css must be imported AFTER
|
||||
* @schedule-x/theme-default/dist/index.css (handled in main.tsx)
|
||||
* so the --sx-color-* overrides win the cascade.
|
||||
*/
|
||||
|
||||
@import './tokens.css';
|
||||
|
||||
/* ── Minimal Global Reset ─────────────────────────────────────────────────── */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--text-body-size);
|
||||
font-weight: var(--text-body-weight);
|
||||
line-height: var(--text-body-line-height);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user