@omni-design/components 0.7.0

package/public/styles/core.css

@@ -0,0 +1,378 @@
+/* ============================================================================
+ * core.css — STATIC: lib-owned, do not regenerate per design system.
+ * Platform-aware font overrides referencing brand tokens via var().
+ * Edit by hand; do NOT overwrite from studio exports.
+ * ============================================================================ */
+
+/* Any region that carries data-surface paints from the surface tokens it
+   exposes. This is the "data-surface is the only way to change a region's
+   background" contract — a consumer just sets data-surface="…" and the
+   region paints itself. No more inline `background: var(--Background)` on
+   every section wrapper. */
+[data-surface] {
+  background: var(--Background);
+  color: var(--Text);
+}
+
+/* NO bare-element appearance rule here, deliberately.
+ *
+ * This previously read `body, section { background; color }` so the app root
+ * would paint without a wrapper. Two problems:
+ *
+ *   1. `section` matches at ANY depth, so every <section> in a consumer's app
+ *      got painted whether or not they opted in — including sections they had
+ *      styled themselves, and sections inside a region whose surface they had
+ *      already chosen.
+ *   2. Painting <body> on import is the exact thing the design system contract
+ *      forbids: loading the CSS into an existing app silently changed its
+ *      background and text colour.
+ *
+ * The opt-in already exists and is one attribute. The [data-surface] rule above
+ * covers it, so a consumer writes:
+ *
+ *     <body data-surface="Surface">
+ *
+ * and gets the same paint, by asking for it. See "Page setup" in CLAUDE.md. */
+
+:root {
+  --Body-Font-Family: var(--Set-Font-Family-Body);
+  --Font-Family-Body: var(--Set-Font-Family-Body);
+  --Header-Font-Family: var(--Set-Font-Family-Header);
+  --Font-Family-Header: var(--Set-Font-Family-Header);
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+  --Cognitive-Multiplier: 1;
+  --Dropshadow-Color: 20, 20, 20;  /* fallback */
+  /* Effect-Level-0 through Effect-Level-5 now live in base.css alongside
+     the other component tokens. --Dropshadow-Color is still overridden
+     per-theme in Light/Dark-Mode.css. */
+}
+
+/* Platform Font Overrides */
+[data-platform="IOS-Mobile"][data-fonts] {
+  --Body-Font-Family: var(--Set-Font-Family-Body);
+  --Header-Font-Family: var(--Set-Font-Family-Header);
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+[data-platform="IOS-Tablet"][data-fonts] {
+  --Body-Font-Family: var(--Set-Font-Family-Body);
+  --Header-Font-Family: var(--Set-Font-Family-Header);
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+[data-platform="Android"][data-fonts] {
+  --Body-Font-Family: var(--Set-Font-Family-Body);
+  --Header-Font-Family: var(--Set-Font-Family-Header);
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+
+[data-platform="IOS-Mobile"][data-fonts="Default"] {
+  --Body-Font-Family: "SF Pro";
+  --Header-Font-Family: "SF Pro";
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: "SF Pro";
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+[data-platform="IOS-Tablet"][data-fonts="Default"] {
+  --Body-Font-Family: "SF Pro";
+  --Header-Font-Family: "SF Pro";
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: "SF Pro";
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+[data-platform="Android"][data-fonts="Default"] {
+  --Body-Font-Family: "Roboto";
+  --Header-Font-Family: "Roboto";
+  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
+  --Decorative-Font-Family: "Roboto";
+  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
+  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
+  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
+  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
+}
+
+/* Desktop Defaults */
+:root {
+  --Container-Padding: var(--Sizing-4);
+  --Platform-Label: "Desktop";
+  --Button-Height: 32px;
+  --Min-Button-Width: 80px;
+  --Set-Font-Family-Header: 'Prata', serif;
+  --Set-Font-Family-Header-Weight: 200;
+  --Set-Font-Family-Decorative: 'Permanent Marker', sans-serif;
+  --Set-Font-Family-Body: 'Roboto', sans-serif;
+  --Set-Font-Family-Body-Weight: 400;
+  --Set-Font-Family-Body-Semibold-Weight: 600;
+  --Set-Font-Family-Body-Bold-Weight: 700;
+
+  /* ── The four faces ───────────────────────────────────────────────────────
+     Display is the expressive face, Header the heading face, Eyebrow the
+     eyebrow/overline face, Body everything else. A studio export overrides
+     the --Set-* inputs; the --Font-Family-* tokens below are what components
+     read. The defaults here keep this design system rendering exactly as it
+     did before the faces existed: Display followed Header, Eyebrow followed
+     Decorative. A design system generated by the studio ships its own values
+     — its Eyebrow default is the OS UI stack, not Decorative. */
+  --Set-Font-Family-Display: var(--Set-Font-Family-Decorative);
+  --Set-Font-Family-Eyebrow: var(--Set-Font-Family-Decorative);
+
+  --Font-Family-Display: var(--Set-Font-Family-Display, var(--Set-Font-Family-Header));
+  --Font-Family-Eyebrow: var(--Set-Font-Family-Eyebrow, var(--Decorative-Font-Family));
+
+  /* Face weights */
+  --Font-Weight-Display: var(--Set-Font-Family-Decorative-Weight, 400);
+  --Font-Weight-Header: var(--Set-Font-Family-Header-Weight);
+  --Font-Weight-Eyebrow: 600;
+  --Font-Weight-Body: var(--Set-Font-Family-Body-Weight);
+
+  /* ── Variable-font axes — Header face only ────────────────────────────────
+     Neutral defaults: this design system's header face is static, so the
+     composed value is `normal` and nothing is applied. A design system on a
+     variable face (Google Sans Flex and friends) overrides BOTH the axis
+     tokens and the composed value — the studio always emits the pair.
+     wght is deliberately absent: font-weight already carries it, and
+     declaring it twice lets the two disagree. */
+  --Font-Width-Header: 100;
+  --Font-Optical-Size-Header: 16;
+  --Font-Slant-Header: 0;
+  --Font-Grade-Header: 0;
+  --Font-Roundness-Header: 0;
+  --Font-Variation-Header: normal;
+
+  /* ── Display ramp ─────────────────────────────────────────────────────────
+     Large and Medium belong in a header or hero area; Small is the step sized
+     to sit inside a component. Mirrors the Desktop ramp in
+     typography-tokens.css so display styles resolve without data-platform. */
+  --Display-Large-Font-Size: 48px;
+  --Display-Large-Font-Weight: 600;
+  --Display-Large-Line-Height: 48px;
+  --Display-Large-Letter-Spacing: 0px;
+  --Display-Medium-Font-Size: 45px;
+  --Display-Medium-Font-Weight: 600;
+  --Display-Medium-Line-Height: 45px;
+  --Display-Medium-Letter-Spacing: 0px;
+  --Display-Small-Font-Size: 42px;
+  --Display-Small-Font-Weight: 600;
+  --Display-Small-Line-Height: 42px;
+  --Display-Small-Letter-Spacing: 0px;
+
+  --Body-Font-Size: 16px;
+  --Body-Letter-Spacing: 0;
+  --Body-Line-Height: 24px;
+  --Body-Paragraph-Spacing: 16px;
+  --H1-Font-Size: 40px;
+  --H1-Line-Height: 40px;
+  --H1-Letter-Spacing: -1px;
+  --H1-Paragraph-Spacing: 32px;
+  --H2-Font-Size: 32px;
+  --H2-Line-Height: 40px;
+  --H2-Letter-Spacing: -1px;
+  --H2-Paragraph-Spacing: 24px;
+  --H3-Font-Size: 28px;
+  --H3-Line-Height: 36px;
+  --H3-Letter-Spacing: -.5px;
+  --H3-Paragraph-Spacing: 20px;
+  --H4-Font-Size: 24px;
+  --H4-Line-Height: 32px;
+  --H4-Letter-Spacing: -.5px;
+  --H4-Paragraph-Spacing: 16px;
+  --H5-Font-Size: 20px;
+  --H5-Line-Height: 28px;
+  --H5-Letter-Spacing: 0px;
+  --H5-Paragraph-Spacing: 12px;
+  --H6-Font-Size: 18px;
+  --H6-Line-Height: 26px;
+  --H6-Letter-Spacing: 0px;
+  --H6-Paragraph-Spacing: 12px;
+  --Label-Font-Size: 14px;
+  --Label-Line-Height: 20px;
+  --Label-Letter-Spacing: 0px;
+  --Label-Paragraph-Spacing: 4px;
+  --Button-Font-Size: 16px;
+  --Button-Line-Height: 20px;
+}
+
+/* iOS Mobile */
+[data-platform="IOS-Mobile"] {
+  --Container-Padding: var(--Sizing-2);
+  --Platform-Label: "IOS-Mobile";
+  --Button-Height: 44px;
+  --Min-Stack-Gap: 10px;
+  --Body-Font-Size: 16px;
+  --Body-Letter-Spacing: -.5px;
+  --Body-Line-Height: 24px;
+  --Body-Paragraph-Spacing: 16px;
+  --H1-Font-Size: 32px;
+  --H1-Line-Height: 40px;
+  --H1-Letter-Spacing: -1px;
+  --H1-Paragraph-Spacing: 24px;
+  --H2-Font-Size: 28px;
+  --H2-Line-Height: 32px;
+  --H2-Letter-Spacing: -.5px;
+  --H2-Paragraph-Spacing: 20px;
+  --H3-Font-Size: 24px;
+  --H3-Line-Height: 32px;
+  --H3-Letter-Spacing: -.5px;
+  --H3-Paragraph-Spacing: 16px;
+  --H4-Font-Size: 20px;
+  --H4-Line-Height: 28px;
+  --H4-Letter-Spacing: 0px;
+  --H4-Paragraph-Spacing: 12px;
+  --H5-Font-Size: 18px;
+  --H5-Line-Height: 26px;
+  --H5-Letter-Spacing: 0px;
+  --H5-Paragraph-Spacing: 12px;
+  --H6-Font-Size: 16px;
+  --H6-Line-Height: 24px;
+  --H6-Letter-Spacing: .5px;
+  --H6-Paragraph-Spacing: 8px;
+  --Label-Font-Size: 13px;
+  --Label-Line-Height: 18px;
+  --Label-Letter-Spacing: 0px;
+  --Label-Paragraph-Spacing: 4px;
+  --Button-Font-Size: 16px;
+  --Button-Line-Height: 20px;
+}
+
+/* iOS Tablet */
+[data-platform="IOS-Tablet"] {
+  --Container-Padding: var(--Sizing-3);
+  --Platform-Label: "IOS-Tablet";
+  --Button-Height: 48px;
+  --Min-Stack-Gap: 10px;
+  --Body-Font-Size: 17px;
+  --Body-Letter-Spacing: -.5px;
+  --Body-Line-Height: 25.5px;
+  --Body-Paragraph-Spacing: 16px;
+  --H1-Font-Size: 40px;
+  --H1-Line-Height: 48px;
+  --H1-Letter-Spacing: -1.5px;
+  --H1-Paragraph-Spacing: 32px;
+  --H2-Font-Size: 32px;
+  --H2-Line-Height: 40px;
+  --H2-Letter-Spacing: -1px;
+  --H2-Paragraph-Spacing: 24px;
+  --H3-Font-Size: 28px;
+  --H3-Line-Height: 36px;
+  --H3-Letter-Spacing: -.5px;
+  --H3-Paragraph-Spacing: 20px;
+  --H4-Font-Size: 24px;
+  --H4-Line-Height: 32px;
+  --H4-Letter-Spacing: -.5px;
+  --H4-Paragraph-Spacing: 16px;
+  --H5-Font-Size: 20px;
+  --H5-Line-Height: 28px;
+  --H5-Letter-Spacing: 0px;
+  --H5-Paragraph-Spacing: 12px;
+  --H6-Font-Size: 18px;
+  --H6-Line-Height: 26px;
+  --H6-Letter-Spacing: 0px;
+  --H6-Paragraph-Spacing: 12px;
+  --Label-Font-Size: 14px;
+  --Label-Line-Height: 20px;
+  --Label-Letter-Spacing: 0px;
+  --Label-Paragraph-Spacing: 4px;
+  --Button-Font-Size: 17px;
+  --Button-Line-Height: 21px;
+}
+
+/* Android */
+[data-platform="Android"] {
+  --Container-Padding: var(--Sizing-2);
+  --Platform-Label: "Android";
+  --Button-Height: 48px;
+  --Min-Stack-Gap: 12px;
+  --Body-Font-Size: 16px;
+  --Body-Line-Height: 24px;
+  --Body-Letter-Spacing: .5px;
+  --Body-Paragraph-Spacing: 16px;
+  --H1-Font-Size: 36px;
+  --H1-Line-Height: 40px;
+  --H1-Letter-Spacing: -.5px;
+  --H1-Paragraph-Spacing: 20px;
+  --H2-Font-Size: 28px;
+  --H2-Line-Height: 36px;
+  --H2-Letter-Spacing: -.5px;
+  --H2-Paragraph-Spacing: 20px;
+  --H3-Font-Size: 24px;
+  --H3-Line-Height: 32px;
+  --H3-Letter-Spacing: 0px;
+  --H3-Paragraph-Spacing: 16px;
+  --H4-Font-Size: 20px;
+  --H4-Line-Height: 28px;
+  --H4-Letter-Spacing: 0px;
+  --H4-Paragraph-Spacing: 12px;
+  --H5-Font-Size: 18px;
+  --H5-Line-Height: 26px;
+  --H5-Letter-Spacing: 0px;
+  --H5-Paragraph-Spacing: 12px;
+  --H6-Font-Size: 16px;
+  --H6-Line-Height: 24px;
+  --H6-Letter-Spacing: .5px;
+  --H6-Paragraph-Spacing: 8px;
+  --Label-Font-Size: 13px;
+  --Label-Line-Height: 18px;
+  --Label-Letter-Spacing: 0px;
+  --Label-Paragraph-Spacing: 4px;
+  --Button-Font-Size: 16px;
+  --Button-Line-Height: 20px;
+}
+
+/* Decorative Font Application */
+/* Typography variants: Header uses body font by default, Decorative Header uses decorative font */
+
+[data-surface="Surface"] [data-decorative],
+[data-surface="Surface-Dim"] [data-decorative],
+[data-surface="Surface-Dimmest"] [data-decorative],
+[data-surface="Surface-Bright"] [data-decorative],
+[data-surface="Surface-Brightest"] [data-decorative] {
+  --Font-Family-Header: var(--Set-Font-Family-Header);
+  --Font-Family-Header-Weight: var(--Set-Font-Family-Header-Weight);
+  --Font-Family-Overline: var(--Set-Font-Family-Decorative);
+}
+
+/* Explicit decorative variants — always available regardless of mode */
+[data-typography="decorative-header"] {
+  font-family: var(--Set-Font-Family-Header);
+  font-weight: var(--Set-Font-Family-Header-Weight);
+}
+[data-typography="decorative-overline"] {
+  font-family: var(--Set-Font-Family-Decorative);
+}
+
+/* Cognitive Accessibility Overrides */
+[data-cognitive="Dyslexia"] {
+  --Cognitive-Multiplier: 1.5;
+  --Body-Font-Family: "OpenDyslexic";
+  --Body-Font-Weight: 400;
+  --Body-Semibold-Font-Weight: 700;
+  --Body-Bold-Font-Weight: 700;
+}
+
+[data-cognitive="ADHD"] {
+  --Cognitive-Multiplier: 1.5;
+}

package/public/styles/foundation.css

@@ -0,0 +1,72 @@
+:root {
+
+  /* Button */
+  --Button-Radius: 4px;
+  --Button-Icon-Radius: 4px;
+  --Button-Height: 36px;
+  --Small-Button-Height: 24px;
+  --Large-Button-Height: 56px;
+  --Button-Min-Width: 60px;
+  --Button-Bevel: 0;
+  --Button-Bevel-Px: 0px;
+  --Button-Bevel-Opacity: 0.5;
+  --Button-Bevel-Shadow: none;
+  --Style-Border-Radius: var(--Button-Radius);
+
+  /* Card */
+  --Card-Radius: 8px;
+  --Card-Focus-Radius: 11px;
+
+  /* Input — used by TextField, Select, ListItem (when clickable),
+     and any element whose chrome reads as a tappable input row.
+     --Input-Inner-Focus-Visible is the corner radius for the inset
+     focus ring; it's the input radius minus 1 so the inset 3px-thick
+     focus indicator visually matches the chrome's outer corners. */
+  --Input-Radius: 4px;
+  --Input-Inner-Focus-Visible: calc(var(--Input-Radius) - 1px);
+  --Card-Padding: 16px;
+  --Style-Gradient-Color-1: var(--Buttons-Primary-Button);
+  --Style-Gradient-Color-2: var(--Buttons-Primary-Button);
+  --Style-Gradient-Angle: 0;
+
+  /* Positive sizing scale. The whole-number sequence steps by 8px
+     through 16 (covering common spacing + element-sizing needs), then
+     jumps to 20 (=160px) and 30 (=240px) for layout-level sizes. The
+     fractional tokens (Quarter, Half, 1-and-Half, 2-and-Half) plug the
+     2/4/12/20px gaps used by lab-spacing and inset-positioning rules. */
+  --Sizing-Quarter:      2px;
+  --Sizing-Half:         4px;
+  --Sizing-1:            8px;
+  --Sizing-1-and-Half:  12px;
+  --Sizing-2:           16px;
+  --Sizing-2-and-Half:  20px;
+  --Sizing-3:           24px;
+  --Sizing-4:           32px;
+  --Sizing-5:           40px;
+  --Sizing-6:           48px;
+  --Sizing-7:           56px;
+  --Sizing-8:           64px;
+  --Sizing-9:           72px;
+  --Sizing-10:          80px;
+  --Sizing-11:          88px;
+  --Sizing-12:          96px;
+  --Sizing-13:         104px;
+  --Sizing-14:         112px;
+  --Sizing-15:         120px;
+  --Sizing-16:         128px;
+  --Sizing-20:         160px;
+  --Sizing-30:         240px;
+
+  /* Negative sizing scale. Used by overlap/inset/negative-margin rules
+     (e.g. pulling a card edge into a stage's padding, hanging a label
+     into a gutter). Sizing-Negative-Quarter (-2px) is kept for the
+     hairline-overlap case even though it's not in the Figma variable
+     set — removing it would break consumers; adding it to Figma later
+     is a no-op. */
+  --Sizing-Negative-Quarter:    -2px;
+  --Sizing-Negative-Half:       -4px;
+  --Sizing-Negative-1:          -8px;
+  --Sizing-Negative-1-and-Half:-12px;
+  --Sizing-Negative-2:         -16px;
+  --Min-Stack-Gap: 0px;
+}

package/public/styles/styles.css

@@ -0,0 +1,6 @@
+/* ============================================================================
+ * styles.css — STATIC: lib-owned, do not regenerate per design system.
+ * Final overrides slot (loads last). Currently empty — add hand-edited
+ * overrides here, NOT in any of the regenerated files.
+ * ============================================================================ */
+/* Overrides */

package/public/styles/theme.js

@@ -0,0 +1,234 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: 'var(--Primary-Color-11)',
+      light: 'var(--Hover-Primary-Color-11)',
+      lighter: 'var(--Hover-Primary-Color-11)',
+      dark: 'var(--Active-Primary-Color-11)',
+      darker: 'var(--Active-Primary-Color-11)',
+      contrastText: 'var(--Text-Primary-Color-11)',
+    },
+    
+    secondary: {
+      main: 'var(--Secondary-Color-11)',
+      light: 'var(--Hover-Secondary-Color-11)',
+      darker: 'var(--Active-Secondary-Color-11)',
+      contrastText: 'var(--Text-Secondary-Color-11)',
+    },
+
+    tertiary: {
+      main: 'var(--Tertiary-Color-11)',
+      light: 'var(--Hover-Tertiary-Color-11)',
+      darker: 'var(--Active-Tertiary-Color-11)',
+      contrastText: 'var(--Text-Tertiary-Color-11)',
+    },
+    
+    error: {
+      main: 'var(--Error-Color-11)',
+      light: 'var(--Hover-Error-Color-11)',
+      dark: 'var(--Active-Error-Color-11)',
+      contrastText: 'var(--Text-Error-Color-11)',
+    },
+    
+    warning: {
+      main: 'var(--Warning-Color-11)',
+      light: 'var(--Hover-Warning-Color-11)',
+      dark: 'var(--Active-Warning-Color-11)',
+      contrastText: 'var(--Text-Warning-Color-11)',
+    },
+    
+    info: {
+      main: 'var(--Info-Color-11)',
+      light: 'var(--Hover-Info-Color-11)',
+      dark: 'var(--Active-Info-Color-11)',
+      contrastText: 'var(--Text-Info-Color-11)',
+    },
+    
+    success: {
+      main: 'var(--Success-Color-11)',
+      light: 'var(--Hover-Success-Color-11)',
+      dark: 'var(--Active-Success-Color-11)',
+      contrastText: 'var(--Text-Success-Color-11)',
+    },
+    
+    grey: {
+      50: 'var(--Neutral-Color-12)',
+      100: 'var(--Neutral-Color-12)',
+      200: 'var(--Neutral-Color-11)',
+      300: 'var(--Neutral-Color-10)',
+      400: 'var(--Neutral-Color-9)',
+      500: 'var(--Neutral-Color-8)',
+      600: 'var(--Neutral-Color-7)',
+      700: 'var(--Neutral-Color-6)',
+      800: 'var(--Neutral-Color-5)',
+      900: 'var(--Neutral-Color-4)',
+      A100: 'var(--Neutral-Color-3)',
+      A200: 'var(--Neutral-Color-2)',
+      A400: 'var(--Neutral-Color-1)',
+    },
+    
+    background: {
+      default: 'var(--Background)',
+      paper: 'var(--Container)',
+    },
+    
+    text: {
+      primary: 'var(--Text)',
+      secondary: 'var(--Text-Quiet)',
+      disabled: 'color-mix(in oklab, var(--Text), 37%, var(--Background))'
+    },
+    
+    action: {
+      active: 'var(--Buttons-Primary-Button)',
+      hover: 'var(--Buttons-Primary-Hover)',
+      selected: 'var(--Buttons-Primary-Active)',
+      disabled: 'color-mix(in oklab, var(--Buttons-Primary-Button), 37%, var(--Background))',
+      disabledBackground: 'var(--Neutral-Color-11)',
+      focus: 'var(--Buttons-Primary-Active)',
+    },
+    
+    divider: 'var(--Border-Variant)',
+  },
+  
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    
+    h1: {
+      fontSize: '40px',
+      fontWeight: 700,
+      lineHeight: 1,
+      letterSpacing: '-1px',
+    },
+    
+    h2: {
+      fontSize: '32px',
+      fontWeight: 700,
+      lineHeight: 1.25,
+      letterSpacing: '-1px',
+    },
+    
+    h3: {
+      fontSize: '28px',
+      fontWeight: 700,
+      lineHeight: 1.286,
+      letterSpacing: '-0.5px',
+    },
+    
+    h4: {
+      fontSize: '24px',
+      fontWeight: 700,
+      lineHeight: 1.333,
+      letterSpacing: '-0.5px',
+    },
+    
+    h5: {
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: 1.4,
+      letterSpacing: '0px',
+    },
+    
+    h6: {
+      fontSize: '18px',
+      fontWeight: 700,
+      lineHeight: 1.444,
+      letterSpacing: '0px',
+    },
+    
+    body1: {
+      fontSize: '16px',
+      fontWeight: 400,
+      lineHeight: 1.5,
+      letterSpacing: '0px',
+    },
+    
+    body2: {
+      fontSize: '14px',
+      fontWeight: 400,
+      lineHeight: 1.43,
+      letterSpacing: '0px',
+    },
+    
+    button: {
+      fontSize: '16px',
+      fontWeight: 600,
+      lineHeight: 1.25,
+      letterSpacing: '0px',
+      textTransform: 'none',
+    },
+    
+    caption: {
+      fontSize: '12px',
+      fontWeight: 400,
+      lineHeight: 1.667,
+      letterSpacing: '0.4px',
+    },
+    
+    overline: {
+      fontSize: '12px',
+      fontWeight: 600,
+      lineHeight: 1.667,
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase',
+    },
+    
+    subtitle1: {
+      fontSize: '16px',
+      fontWeight: 700,
+      lineHeight: 1.5,
+      letterSpacing: '0px',
+    },
+    
+    subtitle2: {
+      fontSize: '14px',
+      fontWeight: 600,
+      lineHeight: 1.571,
+      letterSpacing: '0.1px',
+    },
+  },
+  
+  spacing: 8,
+  
+  shape: {
+    borderRadius: 4,
+  },
+  
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+  
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '8px',
+          minHeight: '32px',
+          padding: '0 16px',
+          textTransform: 'none',
+          fontWeight: 600,
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: '0 3px 6px rgba(0,0,0,0.15)',
+          },
+          '&:focus-visible': {
+            outline: '2px solid var(--Focus-Visible)',
+            outlineOffset: '2px',
+          },
+        },
+      },
+    },
+  },
+});

package/public/styles/theme.json

@@ -0,0 +1,12 @@
+{
+  "foundation": "foundation.css",
+  "core": "core.css",
+  "lightMode": "Light-Mode.css",
+  "darkMode": "Dark-Mode.css",
+  "base": "base.css",
+  "styles": "styles.css",
+  "defaultTheme": "Default",
+  "defaultStyle": "Modern",
+  "defaultSurface": "Surface",
+  "darkTheme": "Neutral-Dark"
+}