@xmesh/system-design 0.0.1

package/styles/md3/_color.css

@@ -0,0 +1,102 @@
+/* ============================================================
+   xmesh DS · md3/_color.css — Material Design 3 color roles.
+
+   Canonical MD3 system tokens (`--md-sys-color-*`) sourced from
+   `--x-*` primitives in `_primitives.css`. Components reference
+   ONLY these `--md-sys-*` tokens (or `--xm-*` extensions) — never
+   raw `--x-*`. Theme switching happens at the primitive layer; the
+   role names below stay constant.
+
+   Surface ramp mapping (theme-following card stack — see ADR 0006):
+     dark:  surface = canvas-0 (the dark "desk")
+            inverse-surface = canvas-2 (a lifted DARK card, one step up)
+     light: surface = canvas-0 (the cream "desk")
+            inverse-surface = surface-0 (the white card stack)
+   The card stack follows the theme (dark card on dark, white card on
+   cream) rather than staying white in both — superseding AD-13.
+
+   The `error*` family is defined for canonical compliance; POLICIES.md
+   forbids components from referencing it (severity is icon + copy).
+   ============================================================ */
+
+/* ---------- DARK (default) ---------- */
+:root {
+  /* Primary — coral accent */
+  --md-sys-color-primary:              var(--x-accent);
+  --md-sys-color-on-primary:           var(--x-accent-ink);
+  --md-sys-color-primary-container:    var(--x-accent-soft);
+  --md-sys-color-on-primary-container: var(--x-ink-0);
+
+  /* Secondary — deep olive (defined; components do not reference) */
+  --md-sys-color-secondary:              var(--x-secondary);
+  --md-sys-color-on-secondary:           var(--x-secondary-ink);
+  --md-sys-color-secondary-container:    var(--x-secondary-soft);
+  --md-sys-color-on-secondary-container: var(--x-ink-0);
+
+  /* Tertiary — alias of secondary; reserved for future categorical accent */
+  --md-sys-color-tertiary:              var(--x-secondary);
+  --md-sys-color-on-tertiary:           var(--x-secondary-ink);
+  --md-sys-color-tertiary-container:    var(--x-secondary-soft);
+  --md-sys-color-on-tertiary-container: var(--x-ink-0);
+
+  /* Error — defined for canonicality; FORBIDDEN in components.
+     Severity is communicated by icon and copy (POLICIES.md rule 3a). */
+  --md-sys-color-error:              oklch(0.62 0.18 25);
+  --md-sys-color-on-error:           #ffffff;
+  --md-sys-color-error-container:    oklch(0.30 0.10 25);
+  --md-sys-color-on-error-container: oklch(0.92 0.05 25);
+
+  /* Background + surface ramp. The 7-tier MD3 surface family lives on
+     the canvas (the dark "desk"). Cards are the inverse tier. */
+  --md-sys-color-background:                var(--x-canvas-deep);
+  --md-sys-color-on-background:             var(--x-ink-canvas-1);
+  --md-sys-color-surface:                   var(--x-canvas-0);
+  --md-sys-color-on-surface:                var(--x-ink-canvas-1);
+  --md-sys-color-surface-variant:           var(--x-canvas-2);
+  --md-sys-color-on-surface-variant:        var(--x-ink-canvas-2);
+  --md-sys-color-surface-dim:               var(--x-canvas-deep);
+  --md-sys-color-surface-bright:            var(--x-canvas-4);
+  --md-sys-color-surface-container-lowest:  var(--x-canvas-deep);
+  --md-sys-color-surface-container-low:     var(--x-canvas-0);
+  --md-sys-color-surface-container:         var(--x-canvas-1);
+  --md-sys-color-surface-container-high:    var(--x-canvas-2);
+  --md-sys-color-surface-container-highest: var(--x-canvas-3);
+
+  /* Outline */
+  --md-sys-color-outline:         var(--x-canvas-5);
+  --md-sys-color-outline-variant: var(--x-canvas-4);
+
+  /* Inverse — the card stack. Theme-following (ADR 0006): a lifted DARK
+     surface in dark theme (canvas-2, one step above the desk), white in
+     light theme. Ink follows: light ink on the dark card. */
+  --md-sys-color-inverse-surface:    var(--x-canvas-2);
+  --md-sys-color-inverse-on-surface: var(--x-ink-canvas-1);
+  --md-sys-color-inverse-primary:    var(--x-accent-strong);
+
+  /* Scrim + shadow */
+  --md-sys-color-scrim:  oklch(0 0 0);
+  --md-sys-color-shadow: oklch(0 0 0);
+}
+
+/* ---------- LIGHT theme ----------
+   The `--x-*` primitives flip to the cream/white palette in
+   _primitives.css; the role names below stay identical. We only
+   re-declare a small set where the asymmetric mapping requires it
+   (surface-container-lowest collapses with inverse-surface in dark
+   theme; light theme needs the inverse tier to remain near-white). */
+:root[data-theme="light"] {
+  /* Background sits below cream canvas (near-white inverse).
+     surface-dim deepens cream slightly; surface-bright is near-white. */
+  --md-sys-color-background:                var(--x-surface-0);
+  --md-sys-color-surface-dim:               var(--x-canvas-3);
+  --md-sys-color-surface-bright:            var(--x-canvas-deep);
+  --md-sys-color-surface-container-lowest:  var(--x-canvas-deep);
+
+  /* Card stack stays white in light theme (the dark-card flip is dark-only) */
+  --md-sys-color-inverse-surface:    var(--x-surface-0);
+  --md-sys-color-inverse-on-surface: var(--x-ink-0);
+
+  /* Outline shifts onto cream tones */
+  --md-sys-color-outline:         oklch(0.82 0.014 85);
+  --md-sys-color-outline-variant: oklch(0.90 0.012 85);
+}

package/styles/md3/_elevation.css

@@ -0,0 +1,26 @@
+/* ============================================================
+   xmesh DS · md3/_elevation.css — Material Design 3 elevation.
+
+   Six levels (0 / 1 / 3 / 6 / 8 / 12 dp) translated to box-shadows
+   for the web. xmesh-specific shadows that have no MD3 home (drawer
+   directional, snackbar rim, focus ring) live as `--xm-*` extensions
+   in _xmesh-extensions.css.
+   ============================================================ */
+
+:root {
+  --md-sys-elevation-level0: none;
+  --md-sys-elevation-level1: 0 1px 2px oklch(0 0 0 / 0.10);
+  --md-sys-elevation-level2:
+    0 1px 0 oklch(0.30 0.006 60),
+    0 8px 24px oklch(0.10 0 0 / 0.35);
+  --md-sys-elevation-level3: 0 10px 30px oklch(0 0 0 / 0.35);
+  --md-sys-elevation-level4: -16px 0 40px oklch(0 0 0 / 0.35);
+  --md-sys-elevation-level5: 0 30px 80px oklch(0 0 0 / 0.50);
+}
+
+:root[data-theme="light"] {
+  --md-sys-elevation-level2:
+    0 1px 0 oklch(0.92 0.005 70),
+    0 8px 24px oklch(0.40 0 0 / 0.10);
+  --md-sys-elevation-level3: 0 10px 30px oklch(0.30 0 0 / 0.18);
+}

package/styles/md3/_motion.css

@@ -0,0 +1,35 @@
+/* ============================================================
+   xmesh DS · md3/_motion.css — Material Design 3 motion tokens.
+
+   Durations + easing curves per spec. xmesh's previous timings
+   (120 / 160 / 220 ms) snap into the canonical scale.
+   ============================================================ */
+
+:root {
+  /* Durations */
+  --md-sys-motion-duration-short1:      50ms;
+  --md-sys-motion-duration-short2:     100ms;
+  --md-sys-motion-duration-short3:     150ms; /* old --m-fast (120) */
+  --md-sys-motion-duration-short4:     200ms; /* old --m-base (160) */
+  --md-sys-motion-duration-medium1:    250ms; /* old --m-slow (220) */
+  --md-sys-motion-duration-medium2:    300ms;
+  --md-sys-motion-duration-medium3:    350ms;
+  --md-sys-motion-duration-medium4:    400ms;
+  --md-sys-motion-duration-long1:      450ms;
+  --md-sys-motion-duration-long2:      500ms;
+  --md-sys-motion-duration-long3:      550ms;
+  --md-sys-motion-duration-long4:      600ms;
+  --md-sys-motion-duration-extra-long1: 700ms;
+  --md-sys-motion-duration-extra-long2: 800ms;
+  --md-sys-motion-duration-extra-long3: 900ms;
+  --md-sys-motion-duration-extra-long4: 1000ms;
+
+  /* Easing curves */
+  --md-sys-motion-easing-linear:                 cubic-bezier(0, 0, 1, 1);
+  --md-sys-motion-easing-standard:               cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-standard-accelerate:    cubic-bezier(0.3, 0, 1, 1);
+  --md-sys-motion-easing-standard-decelerate:    cubic-bezier(0, 0, 0, 1);
+  --md-sys-motion-easing-emphasized:             cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-emphasized-accelerate:  cubic-bezier(0.3, 0, 0.8, 0.15);
+  --md-sys-motion-easing-emphasized-decelerate:  cubic-bezier(0.05, 0.7, 0.1, 1);
+}

package/styles/md3/_shape.css

@@ -0,0 +1,22 @@
+/* ============================================================
+   xmesh DS · md3/_shape.css — Material Design 3 corner radii.
+
+   Several values diverge from the MD3 spec where xmesh's chat
+   silhouette requires a specific curvature (bubble 18, composer 20,
+   card 14, button/field 10, icon 6). The role names stay canonical;
+   the values are the xmesh dialect.
+   ============================================================ */
+
+:root {
+  --md-sys-shape-corner-none:        0;
+  --md-sys-shape-corner-extra-small: 6px;  /* xmesh override of spec 4 — icon chips */
+  --md-sys-shape-corner-small:       8px;  /* spec match — chips */
+  --md-sys-shape-corner-medium:      14px; /* xmesh override of spec 12 — card chrome */
+  --md-sys-shape-corner-large:       18px; /* xmesh override of spec 16 — bubble */
+  --md-sys-shape-corner-extra-large: 20px; /* xmesh override of spec 28 — composer */
+  --md-sys-shape-corner-full:        9999px;
+
+  /* xmesh-specific intermediate (button/field) — spec only ships
+     small/medium, but the chat needs a value between them. */
+  --md-sys-shape-corner-button: 10px;
+}

package/styles/md3/_state.css

@@ -0,0 +1,22 @@
+/* ============================================================
+   xmesh DS · md3/_state.css — Material Design 3 state-layer tokens.
+
+   MD3 state layers: a hover/focus/pressed/dragged overlay applied
+   to a component using the appropriate `on-*` color at a specified
+   opacity. Components compose these via `color-mix(in oklab, …)`
+   over the resting background, e.g.:
+
+     background-color: color-mix(
+       in oklab,
+       var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+       var(--md-sys-color-surface)
+     );
+
+   ============================================================ */
+
+:root {
+  --md-sys-state-hover-state-layer-opacity:    8%;
+  --md-sys-state-focus-state-layer-opacity:    10%;
+  --md-sys-state-pressed-state-layer-opacity:  10%;
+  --md-sys-state-dragged-state-layer-opacity:  16%;
+}

package/styles/md3/_type.css

@@ -0,0 +1,111 @@
+/* ============================================================
+   xmesh DS · md3/_type.css — Material Design 3 typescale.
+
+   15 roles × 5 sub-tokens (font/size/line-height/tracking/weight).
+   Family overrides per the plan:
+     display-*, headline-*  → Source Serif 4 (xmesh display family)
+     body-*, label-*, title-* → Inter (xmesh UI family)
+     mono is NOT an MD3 concept — see _xmesh-extensions.css.
+
+   Sizes diverge from the MD3 spec where xmesh chat density requires
+   a tighter scale (body 15 instead of 16, button/label-large 15
+   instead of 14, headline-medium 22 instead of 28). Document any
+   future change against this comment block.
+   ============================================================ */
+
+:root {
+  /* Display (serif) */
+  --md-sys-typescale-display-large-font:        var(--t-family-display);
+  --md-sys-typescale-display-large-size:        57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-tracking:    -0.02em;
+  --md-sys-typescale-display-large-weight:      400;
+
+  --md-sys-typescale-display-medium-font:        var(--t-family-display);
+  --md-sys-typescale-display-medium-size:        45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-tracking:    -0.02em;
+  --md-sys-typescale-display-medium-weight:      400;
+
+  --md-sys-typescale-display-small-font:        var(--t-family-display);
+  --md-sys-typescale-display-small-size:        36px; /* xmesh display H1 — was 34, snapped to spec */
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-tracking:    -0.02em;
+  --md-sys-typescale-display-small-weight:      400;
+
+  /* Headline (serif in xmesh; MD3 default is sans) */
+  --md-sys-typescale-headline-large-font:        var(--t-family-display);
+  --md-sys-typescale-headline-large-size:        32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-tracking:    -0.02em;
+  --md-sys-typescale-headline-large-weight:      400;
+
+  --md-sys-typescale-headline-medium-font:        var(--t-family-display);
+  --md-sys-typescale-headline-medium-size:        22px; /* xmesh override of MD3 28 — preserves chat density */
+  --md-sys-typescale-headline-medium-line-height: 32px;
+  --md-sys-typescale-headline-medium-tracking:    -0.01em;
+  --md-sys-typescale-headline-medium-weight:      400;
+
+  --md-sys-typescale-headline-small-font:        var(--t-family-display);
+  --md-sys-typescale-headline-small-size:        18px; /* xmesh override of MD3 24 */
+  --md-sys-typescale-headline-small-line-height: 26px;
+  --md-sys-typescale-headline-small-tracking:    -0.01em;
+  --md-sys-typescale-headline-small-weight:      400;
+
+  /* Title (sans, Inter) */
+  --md-sys-typescale-title-large-font:        var(--t-family-display); /* serif — xmesh H4 */
+  --md-sys-typescale-title-large-size:        18px;
+  --md-sys-typescale-title-large-line-height: 24px;
+  --md-sys-typescale-title-large-tracking:    -0.01em;
+  --md-sys-typescale-title-large-weight:      400;
+
+  --md-sys-typescale-title-medium-font:        var(--t-family-ui);
+  --md-sys-typescale-title-medium-size:        15px;
+  --md-sys-typescale-title-medium-line-height: 22px;
+  --md-sys-typescale-title-medium-tracking:    0;
+  --md-sys-typescale-title-medium-weight:      500;
+
+  --md-sys-typescale-title-small-font:        var(--t-family-ui);
+  --md-sys-typescale-title-small-size:        14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-tracking:    0;
+  --md-sys-typescale-title-small-weight:      500;
+
+  /* Body (sans) — xmesh body baseline is 15px (MD3 spec is 16) */
+  --md-sys-typescale-body-large-font:        var(--t-family-ui);
+  --md-sys-typescale-body-large-size:        15px; /* xmesh override of MD3 16 */
+  --md-sys-typescale-body-large-line-height: 22px;
+  --md-sys-typescale-body-large-tracking:    0;
+  --md-sys-typescale-body-large-weight:      400;
+
+  --md-sys-typescale-body-medium-font:        var(--t-family-ui);
+  --md-sys-typescale-body-medium-size:        13px; /* xmesh row size */
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-tracking:    0;
+  --md-sys-typescale-body-medium-weight:      400;
+
+  --md-sys-typescale-body-small-font:        var(--t-family-ui);
+  --md-sys-typescale-body-small-size:        12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-tracking:    0;
+  --md-sys-typescale-body-small-weight:      400;
+
+  /* Label (sans) */
+  --md-sys-typescale-label-large-font:        var(--t-family-ui);
+  --md-sys-typescale-label-large-size:        15px; /* xmesh button text — override of MD3 14 */
+  --md-sys-typescale-label-large-line-height: 1;
+  --md-sys-typescale-label-large-tracking:    0;
+  --md-sys-typescale-label-large-weight:      600;
+
+  --md-sys-typescale-label-medium-font:        var(--t-family-ui);
+  --md-sys-typescale-label-medium-size:        12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-tracking:    0;
+  --md-sys-typescale-label-medium-weight:      500;
+
+  --md-sys-typescale-label-small-font:        var(--t-family-ui);
+  --md-sys-typescale-label-small-size:        11px; /* xmesh eyebrow */
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-tracking:    0;
+  --md-sys-typescale-label-small-weight:      500;
+}