Lucas Berger
0911a2330a
- 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
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
/**
|
|
* 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
|