@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/theme/colors.css

@@ -0,0 +1,155 @@
+/*
+ * Raw colour ramps — where every literal colour value is authored.
+ *
+ * The achromatic foundations (`--background-*`, `--gray-*`, `--gray-alpha-*`)
+ * are deliberately not exported as Tailwind colours: a component reaches for a
+ * semantic role (`bg-card`, `text-muted-foreground`), never for a rung.
+ */
+
+:root {
+  /* Dark theme (default) */
+
+  --background-1: oklch(0.1382 0 0);
+  --background-2: oklch(0.1591 0 0);
+  --background-3: oklch(0.1913 0 0);
+  --gray-1: oklch(0.2178 0 0);
+  --gray-2: oklch(0.2435 0 0);
+  --gray-3: oklch(0.2686 0 0);
+  --gray-4: oklch(0.3092 0 0);
+  --gray-5: oklch(0.3715 0 0);
+  --gray-6: oklch(0.4495 0 0);
+  --gray-7: oklch(0.5208 0 0);
+  --gray-8: oklch(0.65 0 0);
+  --gray-9: oklch(0.7699 0 0);
+  --gray-10: oklch(0.9851 0 0);
+  --gray-alpha-1: rgb(255 255 255 / 4%);
+  --gray-alpha-2: rgb(255 255 255 / 7%);
+  --gray-alpha-3: rgb(255 255 255 / 10%);
+  --gray-alpha-4: rgb(255 255 255 / 14%);
+  --gray-alpha-5: rgb(255 255 255 / 18%);
+  --gray-alpha-6: rgb(255 255 255 / 30%);
+  --gray-alpha-7: rgb(255 255 255 / 45%);
+  --gray-alpha-8: rgb(255 255 255 / 60%);
+  --gray-alpha-9: rgb(255 255 255 / 75%);
+  --gray-alpha-10: rgb(255 255 255 / 90%);
+
+  --accent1: oklch(0.723 0.219 149.579);
+  --accent2: oklch(0.637 0.237 25.331);
+  --accent3: oklch(0.623 0.214 259.815);
+  --accent5: oklch(0.707 0.165 254.624);
+  --accent6: oklch(0.769 0.188 70.08);
+
+  --accent1Dark: oklch(0.242 0.051 151);
+  --accent2Dark: oklch(0.216 0.044 22);
+  --accent3Dark: oklch(0.234 0.052 261);
+  --accent5Dark: oklch(0.227 0.03 244);
+  --accent6Dark: oklch(0.229 0.031 71);
+
+  --accent1Darker: oklch(0.181 0.033 147);
+  --accent2Darker: oklch(0.16 0.023 19);
+  --accent3Darker: oklch(0.174 0.031 263);
+  --accent5Darker: oklch(0.17 0.015 240);
+  --accent6Darker: oklch(0.175 0.019 72);
+
+  /* Brand green (dark). Remaps Tailwind green-* via @theme below. */
+  --brand-green-50: oklch(99% 0.024 138);
+  --brand-green-100: oklch(97.5% 0.055 138);
+  --brand-green-200: oklch(95.5% 0.105 138);
+  --brand-green-300: oklch(94% 0.18 138);
+  --brand-green-400: oklch(93% 0.235 138);
+  --brand-green-500: var(--notice-success);
+  --brand-green-600: oklch(76% 0.22 140);
+  --brand-green-700: oklch(62% 0.19 140);
+  --brand-green-800: oklch(45% 0.13 142);
+  --brand-green-900: oklch(33% 0.09 144);
+  --brand-green-950: oklch(22% 0.06 145);
+}
+
+html.light {
+  --background-1: oklch(0.9642 0 0);
+  --background-2: oklch(0.9851 0 0);
+  --background-3: oklch(1 0 0);
+  --gray-1: oklch(0.9431 0 0);
+  --gray-2: oklch(0.9189 0 0);
+  --gray-3: oklch(0.8945 0 0);
+  --gray-4: oklch(0.8452 0 0);
+  --gray-5: oklch(0.7604 0 0);
+  --gray-6: oklch(0.6201 0 0);
+  --gray-7: oklch(0.5486 0 0);
+  --gray-8: oklch(0.4459 0 0);
+  --gray-9: oklch(0.3092 0 0);
+  --gray-10: oklch(0.1286 0 0);
+  --gray-alpha-1: rgb(0 0 0 / 4%);
+  --gray-alpha-2: rgb(0 0 0 / 7%);
+  --gray-alpha-3: rgb(0 0 0 / 10%);
+  --gray-alpha-4: rgb(0 0 0 / 14%);
+  --gray-alpha-5: rgb(0 0 0 / 18%);
+  --gray-alpha-6: rgb(0 0 0 / 30%);
+  --gray-alpha-7: rgb(0 0 0 / 45%);
+  --gray-alpha-8: rgb(0 0 0 / 60%);
+  --gray-alpha-9: rgb(0 0 0 / 75%);
+  --gray-alpha-10: rgb(0 0 0 / 90%);
+
+  --accent1: oklch(0.627 0.194 149.214);
+  --accent2: oklch(0.577 0.245 27.325);
+  --accent3: oklch(0.546 0.245 262.881);
+  --accent5: oklch(0.623 0.214 259.815);
+  --accent6: oklch(0.666 0.179 58.318);
+
+  --accent1Dark: oklch(0.962 0.044 156.743);
+  --accent2Dark: oklch(0.936 0.032 17.717);
+  --accent3Dark: oklch(0.932 0.032 255.585);
+  --accent5Dark: oklch(0.932 0.032 255.585);
+  --accent6Dark: oklch(0.962 0.059 95.617);
+
+  --accent1Darker: oklch(0.925 0.084 155.995);
+  --accent2Darker: oklch(0.885 0.062 18.334);
+  --accent3Darker: oklch(0.882 0.059 254.128);
+  --accent5Darker: oklch(0.882 0.059 254.128);
+  --accent6Darker: oklch(0.924 0.12 95.746);
+
+  /* Brand green (light). badge + chart inherit :root. */
+  --brand-green-50: oklch(97.8% 0.025 140);
+  --brand-green-100: oklch(95.5% 0.055 140);
+  --brand-green-200: oklch(91.5% 0.095 140);
+  --brand-green-300: oklch(84.5% 0.145 140);
+  --brand-green-400: oklch(72.5% 0.18 140);
+  --brand-green-500: var(--notice-success);
+  --brand-green-600: oklch(47% 0.17 142);
+  --brand-green-700: oklch(38% 0.13 144);
+  --brand-green-800: oklch(30% 0.1 145);
+  --brand-green-900: oklch(24% 0.075 146);
+  --brand-green-950: oklch(17% 0.05 147);
+}
+
+@theme {
+  --color-accent1: var(--accent1);
+  --color-accent2: var(--accent2);
+  --color-accent3: var(--accent3);
+  --color-accent5: var(--accent5);
+  --color-accent6: var(--accent6);
+  --color-accent1Dark: var(--accent1Dark);
+  --color-accent2Dark: var(--accent2Dark);
+  --color-accent3Dark: var(--accent3Dark);
+  --color-accent5Dark: var(--accent5Dark);
+  --color-accent6Dark: var(--accent6Dark);
+  --color-accent1Darker: var(--accent1Darker);
+  --color-accent2Darker: var(--accent2Darker);
+  --color-accent3Darker: var(--accent3Darker);
+  --color-accent5Darker: var(--accent5Darker);
+  --color-accent6Darker: var(--accent6Darker);
+
+  /* Replace Tailwind green with brand green. initial clears defaults (native v4), then remap. */
+  --color-green-*: initial;
+  --color-green-50: var(--brand-green-50);
+  --color-green-100: var(--brand-green-100);
+  --color-green-200: var(--brand-green-200);
+  --color-green-300: var(--brand-green-300);
+  --color-green-400: var(--brand-green-400);
+  --color-green-500: var(--brand-green-500);
+  --color-green-600: var(--brand-green-600);
+  --color-green-700: var(--brand-green-700);
+  --color-green-800: var(--brand-green-800);
+  --color-green-900: var(--brand-green-900);
+  --color-green-950: var(--brand-green-950);
+}

package/theme/data-viz.css

@@ -0,0 +1,59 @@
+/* Chart series and span-type hues. Consumed through `var()` by canvases and
+   timelines that pick a colour at runtime, so they generate no utility. */
+
+:root {
+  --chart-blue: oklch(0.63 0.174 263);
+  --chart-blue-deep: oklch(0.519 0.199 264);
+  --chart-green: oklch(0.723 0.192 150);
+  --chart-purple: oklch(0.606 0.219 293);
+  --chart-orange: oklch(0.758 0.159 56);
+  --chart-pink: oklch(0.725 0.175 350);
+  --chart-red: oklch(0.711 0.166 22);
+  --chart-yellow: oklch(0.861 0.173 92);
+
+  --chart-soft-1: oklch(0.62 0.19 285);
+  --chart-soft-2: oklch(0.7 0.145 285);
+  --chart-soft-3: oklch(0.78 0.1 285);
+  --chart-soft-4: oklch(0.85 0.06 285);
+  --chart-soft-5: oklch(0.9 0.03 285);
+
+  --span-type-agent: oklch(0.75 0.15 250);
+  --span-type-workflow: oklch(0.75 0.15 200);
+  --span-type-model: oklch(0.75 0.15 320);
+  --span-type-mcp: oklch(0.75 0.15 160);
+  --span-type-tool: oklch(0.75 0.15 100);
+  --span-type-provider: oklch(0.75 0.15 60);
+  --span-type-memory: oklch(0.75 0.12 50);
+  --span-type-workspace: oklch(0.75 0.15 40);
+  --span-type-skill: oklch(0.75 0.15 130);
+  --span-type-scorer: oklch(0.75 0.15 280);
+  --span-type-other: var(--muted-foreground);
+}
+
+html.light {
+  --chart-blue: oklch(0.55 0.2 263);
+  --chart-blue-deep: oklch(0.42 0.16 264);
+  --chart-green: oklch(0.55 0.15 150);
+  --chart-purple: oklch(0.52 0.24 293);
+  --chart-orange: oklch(0.62 0.15 56);
+  --chart-pink: oklch(0.57 0.2 350);
+  --chart-red: oklch(0.55 0.21 22);
+  --chart-yellow: oklch(0.62 0.12 92);
+
+  --chart-soft-1: oklch(0.52 0.2 285);
+  --chart-soft-2: oklch(0.64 0.16 285);
+  --chart-soft-3: oklch(0.75 0.11 285);
+  --chart-soft-4: oklch(0.85 0.065 285);
+  --chart-soft-5: oklch(0.92 0.035 285);
+
+  --span-type-agent: oklch(0.55 0.15 250);
+  --span-type-workflow: oklch(0.55 0.15 200);
+  --span-type-model: oklch(0.55 0.15 320);
+  --span-type-mcp: oklch(0.55 0.15 160);
+  --span-type-tool: oklch(0.55 0.15 100);
+  --span-type-provider: oklch(0.55 0.15 60);
+  --span-type-memory: oklch(0.55 0.12 50);
+  --span-type-workspace: oklch(0.55 0.15 40);
+  --span-type-skill: oklch(0.55 0.15 130);
+  --span-type-scorer: oklch(0.55 0.15 280);
+}

package/theme/motion.css

@@ -0,0 +1,38 @@
+@theme {
+  /* State colour on a control — the only thing a hover is allowed to animate. */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+
+  --ease-out-custom: cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+:root {
+  --resize-dur: 300ms;
+  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.t-resize {
+  transition:
+    width var(--resize-dur) var(--resize-ease),
+    height var(--resize-dur) var(--resize-ease);
+  will-change: width, height;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-resize {
+    transition: none !important;
+  }
+}
+
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+}
+
+@utility duration-normal {
+  transition-duration: var(--duration-normal);
+}
+
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}

package/theme/scale.css

@@ -0,0 +1,42 @@
+@theme {
+  /* One multiplier, every step: `--spacing-<n>` was enumerated up to 96, which
+     silently dropped every larger utility in the codebase (`max-w-120` on the
+     list filters, `max-w-140` on page descriptions, `w-150`…). The enumeration
+     was exactly this multiplier, so nothing moves — the missing rungs just
+     start resolving. Named rungs (`--spacing-control-*`) are declared below. */
+  --spacing: 0.25rem;
+
+  --breakpoint-2xl: 1536px;
+  --breakpoint-3xl: 1700px;
+  --breakpoint-4xl: 2000px;
+
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+
+  /* One rung, one declaration. Every size utility in Tailwind v4 reads the
+     `--spacing-*` namespace, so `h-icon-md`, `w-icon-md` and `size-icon-md`
+     all resolve from this one line. Each rung used to be repeated across
+     `--height-*`, `--max-height-*`, `--width-*` and `--container-*`, which is
+     how `icon-smd` came to exist in three of them and `--container-icon-smd`
+     in none. */
+  --spacing-icon-xs: 12px;
+  --spacing-icon-sm: 14px;
+  --spacing-icon-md: 16px;
+  --spacing-icon-lg: 20px;
+
+  --spacing-control-sm: 1.75rem; /* 28px */
+  --spacing-control-md: 1.875rem; /* 30px — the default control height */
+  --spacing-control-lg: 2rem; /* 32px */
+
+  --spacing-header-default: 40px;
+  --spacing-table-header: 28px;
+  --spacing-table-row: 40px;
+  --spacing-table-row-small: 32px;
+  --spacing-avatar-sm: 24px;
+  --spacing-avatar-md: 32px;
+  --spacing-avatar-lg: 40px;
+  --spacing-dropdown: 300px;
+}

package/theme/status.css

@@ -0,0 +1,96 @@
+/* Status palettes: the tones an admonition or a badge is allowed to wear. Each
+   pairs a surface colour with the on-surface ink that reads on it. */
+
+:root {
+  /* Notice admonition colors — bg uses /20 alpha overlay; fg is the on-surface text/icon color */
+  --notice-success: oklch(0.92 0.27 138);
+  --notice-success-fg: oklch(0.96 0.025 145);
+  --notice-destructive: oklch(0.69 0.24 22);
+  --notice-destructive-fg: oklch(0.95 0.014 18);
+  --notice-warning: oklch(0.91 0.16 105);
+  --notice-warning-fg: oklch(0.97 0.025 100);
+  --notice-info: oklch(0.81 0.12 230);
+  --notice-info-fg: oklch(0.97 0.013 224);
+  --notice-note: oklch(0.18 0 0);
+  --notice-note-fg: oklch(0.99 0.001 230);
+
+  --badge-neutral-fg: var(--foreground);
+  --badge-green: oklch(80% 0.105 160deg);
+  --badge-green-fg: oklch(92% 0.05 160deg);
+  --badge-red: oklch(69% 0.24 22deg);
+  --badge-red-fg: oklch(95% 0.014 18deg);
+  --badge-blue: oklch(81% 0.12 230deg);
+  --badge-blue-fg: oklch(97% 0.013 224deg);
+  --badge-yellow: oklch(91% 0.16 105deg);
+  --badge-yellow-fg: oklch(97% 0.025 100deg);
+  --badge-purple: oklch(82% 0.12 303deg);
+  --badge-purple-fg: oklch(93% 0.045 303deg);
+  --badge-orange: oklch(84% 0.13 62deg);
+  --badge-orange-fg: oklch(93% 0.06 62deg);
+  --badge-cyan: oklch(84% 0.1 210deg);
+  --badge-cyan-fg: oklch(93% 0.05 210deg);
+  --badge-pink: oklch(82% 0.12 345deg);
+  --badge-pink-fg: oklch(93% 0.045 345deg);
+}
+
+html.light {
+  /* Notice admonition colors — bg keeps saturation, fg flips to deep tint for contrast on light surface */
+  --notice-success: oklch(0.55 0.2 140);
+  --notice-success-fg: oklch(0.32 0.1 145);
+  --notice-destructive: oklch(0.55 0.22 22);
+  --notice-destructive-fg: oklch(0.36 0.18 22);
+  --notice-warning: oklch(0.65 0.16 95);
+  --notice-warning-fg: oklch(0.36 0.1 95);
+  --notice-info: oklch(0.55 0.15 230);
+  --notice-info-fg: oklch(0.36 0.13 225);
+  --notice-note: oklch(0.97 0 0);
+  --notice-note-fg: oklch(0.18 0 0);
+
+  --badge-neutral-fg: var(--muted-foreground);
+  --badge-green: oklch(40% 0.095 160deg);
+  --badge-green-fg: oklch(35% 0.085 160deg);
+  --badge-red: oklch(55% 0.22 22deg);
+  --badge-red-fg: oklch(36% 0.18 22deg);
+  --badge-blue: oklch(55% 0.15 230deg);
+  --badge-blue-fg: oklch(36% 0.13 225deg);
+  --badge-yellow: oklch(65% 0.16 95deg);
+  --badge-yellow-fg: oklch(36% 0.1 95deg);
+  --badge-purple: oklch(40% 0.18 303deg);
+  --badge-purple-fg: oklch(37% 0.16 303deg);
+  --badge-orange: oklch(42% 0.13 62deg);
+  --badge-orange-fg: oklch(37% 0.12 62deg);
+  --badge-cyan: oklch(40% 0.11 210deg);
+  --badge-cyan-fg: oklch(35% 0.095 210deg);
+  --badge-pink: oklch(42% 0.17 345deg);
+  --badge-pink-fg: oklch(37% 0.15 345deg);
+}
+
+@theme {
+  --color-notice-success: var(--notice-success);
+  --color-notice-success-fg: var(--notice-success-fg);
+  --color-notice-destructive: var(--notice-destructive);
+  --color-notice-destructive-fg: var(--notice-destructive-fg);
+  --color-notice-warning: var(--notice-warning);
+  --color-notice-warning-fg: var(--notice-warning-fg);
+  --color-notice-info: var(--notice-info);
+  --color-notice-info-fg: var(--notice-info-fg);
+  --color-notice-note: var(--notice-note);
+  --color-notice-note-fg: var(--notice-note-fg);
+  --color-badge-neutral-fg: var(--badge-neutral-fg);
+  --color-badge-green: var(--badge-green);
+  --color-badge-green-fg: var(--badge-green-fg);
+  --color-badge-red: var(--badge-red);
+  --color-badge-red-fg: var(--badge-red-fg);
+  --color-badge-blue: var(--badge-blue);
+  --color-badge-blue-fg: var(--badge-blue-fg);
+  --color-badge-yellow: var(--badge-yellow);
+  --color-badge-yellow-fg: var(--badge-yellow-fg);
+  --color-badge-purple: var(--badge-purple);
+  --color-badge-purple-fg: var(--badge-purple-fg);
+  --color-badge-orange: var(--badge-orange);
+  --color-badge-orange-fg: var(--badge-orange-fg);
+  --color-badge-cyan: var(--badge-cyan);
+  --color-badge-cyan-fg: var(--badge-cyan-fg);
+  --color-badge-pink: var(--badge-pink);
+  --color-badge-pink-fg: var(--badge-pink-fg);
+}

package/theme/surfaces.css

@@ -0,0 +1,201 @@
+/*
+ * Material: what a surface and a control's edge are made of, in both themes.
+ * Everything here is an alpha of `--fill-tint` — the one declaration that flips
+ * per theme — or an elevation drawn from it.
+ */
+
+:root {
+  /*
+   * Fill ladder — one language for anything sitting ABOVE its parent surface.
+   * Rungs are alphas of `--fill-tint`, the only part that flips per theme:
+   * light catching a dark surface, shade landing on a light one. Alpha
+   * compositing is linear in sRGB, so one alpha is one step in both themes —
+   * white over near-black spans 242 levels, near-black over near-white 233 —
+   * and a rung reads the same on the sidebar, the canvas and a card. The
+   * boundary ladder takes its alphas from the same tint, `--border` sitting a
+   * notch above `--fill` so its rim survives on a filled control.
+   *
+   * fill         rest of a filled control (input, button, trigger, chip) and of
+   *              a raised container; also press on a transparent base
+   * fill-hover   hover on a rest fill; rest of a selection control (checkbox,
+   *              switch, radio), which sits one rung up from field-sized surfaces
+   * fill-active  press / open / selected; selection-control hover
+   * fill-subtle  state layer on a transparent base: ghost hover, row hover, and
+   *              disabled fills
+   * fill-strong  selection-control press
+   */
+  --fill-tint: 100%;
+  --fill-subtle: oklch(var(--fill-tint) 0 0 / 4%);
+  --fill: oklch(var(--fill-tint) 0 0 / 6%);
+  --fill-hover: oklch(var(--fill-tint) 0 0 / 9%);
+  --fill-active: oklch(var(--fill-tint) 0 0 / 12%);
+  --fill-strong: oklch(var(--fill-tint) 0 0 / 18%);
+
+  /*
+   * Opaque ladder — the states of a control that IS a colour rather than a rung
+   * layered on the surface behind it: the primary and destructive buttons.
+   * The ladder above cannot serve them. Its rungs are alphas, and a filled
+   * control that answers a pointer by thinning its own fill lets the card text,
+   * the list row or the image it covers read through it — the one thing a
+   * filled control promises not to do, and the louder the state the wider the
+   * window. Each rung is instead the opaque twin of the alpha it replaces: the
+   * same colour mixed toward `--background` by the same amount, in sRGB
+   * because that is the space a browser composites alpha in. The canvas is the
+   * reference surface, so the match is exact there and drifts on a card,
+   * sidebar or popover by the few levels those surfaces sit apart — measured
+   * at most 4 of 255, below a perceptible step.
+   *
+   * Both tones resolve from the semantic roles in `theme.css`, so a theme flip
+   * carries the whole ladder with it.
+   */
+  --fill-inverse: var(--foreground);
+  --fill-inverse-hover: color-mix(in srgb, var(--foreground) 75%, var(--background));
+  --fill-inverse-active: color-mix(in srgb, var(--foreground) 60%, var(--background));
+  --fill-inverse-disabled: color-mix(in srgb, var(--foreground) 45%, var(--background));
+
+  --fill-destructive: var(--destructive);
+  --fill-destructive-hover: color-mix(in srgb, var(--destructive) 80%, var(--background));
+  --fill-destructive-active: color-mix(in srgb, var(--destructive) 70%, var(--background));
+  --fill-destructive-disabled: color-mix(in srgb, var(--destructive) 45%, var(--background));
+
+  /*
+   * Boundary ladder — the four states of a control's 1px edge, as alphas of
+   * `--fill-tint` so an edge reads the same on any surface and in either theme.
+   *
+   * border         rim of a filled control, divider, and the rim of a raised
+   *                surface (the `shadow-raised` utility draws it from this token)
+   * border-strong  the only affordance of a transparent control (outline
+   *                button/field at rest, selection control at rest)
+   * border-hover   hover on either of those. Deliberately nearer rest than focus: it
+   *                answers a pointer, and a pointer is not an event. Sitting midway
+   *                between the two (31%) made an outline control read as focused
+   *                under the cursor and left focus with nowhere louder to go.
+   * border-focus   focus, and the one rung that stays per-theme: it is authored
+   *                at the lowest alpha still clearing WCAG 1.4.11 (3:1 against
+   *                the fill it sits on) — 3.3:1 here, 3.2:1 in light at 50%.
+   *                Shade carries less weight than light at equal alpha, so
+   *                matching dark's 40% in light would drop it under the floor,
+   *                and raising dark to 50% reads as a highlight, not a focus.
+   */
+  --border: oklch(var(--fill-tint) 0 0 / 9%);
+  --border-strong: oklch(var(--fill-tint) 0 0 / 19%);
+  --border-hover: oklch(var(--fill-tint) 0 0 / 25%);
+  --border-focus: oklch(var(--fill-tint) 0 0 / 40%);
+  --ring: var(--border-focus);
+
+  /* Opaque twin of `--fill` over `--background`, for a scrolling panel whose
+   * sticky parts cannot let rows show through. Keep the two in sync: a panel and
+   * a resting control side by side on the canvas must read as one material. */
+  --surface-panel: oklch(0.2244 0 0);
+
+  --surface-overlay-soft: var(--fill-subtle);
+  --surface-overlay-strong: var(--gray-alpha-2);
+
+  --scrim: oklch(0% 0 0deg / 75%);
+
+  /*
+   * Two elevations, because there are two distances: a surface in the flow
+   * (card, field, list panel, settings container, app frame) and a detached
+   * overlay (popover, dropdown, dialog, drawer, tooltip).
+   *
+   * These are the drop layers only. The `shadow-raised` / `shadow-overlay`
+   * utilities in `src/index.css` assemble lip + rim + drops on the element
+   * itself, which is what lets a state repaint the rim: a custom property
+   * holding `var(--surface-rim)` would be substituted here, on the root, and
+   * every descendant would inherit the finished string.
+   *
+   * The rim is its own token, not `--border`. A divider inside a surface has
+   * the whole surface behind it and needs 9% to read; the rim sits on the
+   * boundary between two surfaces that already differ in fill and elevation,
+   * so the same 9% overshoots and the surface reads as framed. The reference
+   * skin uses its highlight colour for the rim in dark — 3%, the same alpha as
+   * the lip — and a 6% black ring in light, where no lip exists. Both are
+   * below the divider, on purpose.
+   *
+   * Focus moves that one edge (`--surface-rim-focus`) instead of adding a
+   * `border` beside it, which would read as two lines — and is why a field and
+   * a card can be the same material. Hover does not touch it: the rim is the
+   * loudest part of a borderless surface, so a pointer wash goes through
+   * `--surface-tint` (see `src/index.css`) and leaves the boundary alone.
+   *
+   * The rim is inset, so it cannot be clipped: the app frame and every
+   * ScrollArea viewport are `overflow-hidden`, and an outer ring on a surface
+   * sitting flush inside one is shaved off entirely. The cost is the mirror
+   * case — a child flush against the edge paints over it — which is why a panel
+   * holding a sticky header keeps a gutter (`p-1`) instead.
+   *
+   * In-flow surfaces keep the bleed short for the same reason. The drops fall
+   * outside the box and a scroller does clip those, so a tile reaching further
+   * than its clearance has its shadow sliced along the container edge.
+   *
+   * In dark a top lip adds light catching the edge, and the drops carry
+   * further: on a dark canvas a shadow has less room to darken, so the falloff
+   * has to be longer to read as the same height. The lip is a hint at 3% and
+   * not a line — anything near the rim's own weight reads as a second border on
+   * a small surface like a tooltip.
+   */
+  --elevation-lip: inset 0 1px 0 oklch(100% 0 0deg / 3%);
+  --surface-rim: oklch(100% 0 0deg / 5%);
+  --surface-rim-focus: oklch(100% 0 0deg / 14%);
+  --elevation-raised: 0 1px 2px -1px oklch(0% 0 0deg / 22%), 0 2px 3px -2px oklch(0% 0 0deg / 14%);
+  --elevation-overlay:
+    0 2px 2px oklch(0% 0 0deg / 10%), 0 4px 4px oklch(0% 0 0deg / 10%), 0 8px 8px oklch(0% 0 0deg / 10%);
+}
+
+html.light {
+  /* Shade instead of light, at the same alphas: the whole fill and boundary
+   * ladder re-resolves from here. */
+  --fill-tint: 20.5%;
+  /* Shade carries less weight than light at equal alpha, so focus needs a
+   * higher one here to hold its 3:1 floor against the fill it sits on. */
+  --border-focus: oklch(var(--fill-tint) 0 0 / 50%);
+  /* Opaque twin of the light `--fill` over `--background`. */
+  --surface-panel: oklch(0.9442 0 0);
+
+  --scrim: oklch(20.8% 0 0deg / 45%);
+
+  /* No lip: light does not catch one on a near-white surface, and the utility
+   * needs a value in that slot for the shadow list to stay valid. The rim is a
+   * shade here, and shade at equal alpha carries more weight than light, so it
+   * sits twice as low as the divider rather than level with the lip. Shorter
+   * falloff too — a shadow has room to darken here, so it reads as the same
+   * height over less distance. */
+  --elevation-lip: 0 0 #0000;
+  --surface-rim: oklch(0% 0 0deg / 8%);
+  --surface-rim-focus: oklch(0% 0 0deg / 18%);
+  --elevation-raised: 0 1px 2px -1px oklch(0% 0 0deg / 5%), 0 1px 3px -2px oklch(0% 0 0deg / 4%);
+  --elevation-overlay:
+    0 2px 4px -1px oklch(0% 0 0deg / 8%), 0 4px 8px -2px oklch(0% 0 0deg / 6%), 0 8px 16px -4px oklch(0% 0 0deg / 6%);
+}
+
+@theme {
+  --color-scrim: var(--scrim);
+  --color-surface-overlay-soft: var(--surface-overlay-soft);
+  --color-surface-overlay-strong: var(--surface-overlay-strong);
+
+  --shadow-focus-ring: 0 0 0 3px oklch(0.723 0.219 149.579 / 0.12);
+}
+
+/* Inline so a utility resolves var(--token) on the styled element and honors a
+   per-element override. */
+@theme inline {
+  --color-surface-panel: var(--surface-panel);
+  --color-fill-subtle: var(--fill-subtle);
+  --color-fill: var(--fill);
+  --color-fill-hover: var(--fill-hover);
+  --color-fill-active: var(--fill-active);
+  --color-fill-strong: var(--fill-strong);
+  --color-fill-inverse: var(--fill-inverse);
+  --color-fill-inverse-hover: var(--fill-inverse-hover);
+  --color-fill-inverse-active: var(--fill-inverse-active);
+  --color-fill-inverse-disabled: var(--fill-inverse-disabled);
+  --color-fill-destructive: var(--fill-destructive);
+  --color-fill-destructive-hover: var(--fill-destructive-hover);
+  --color-fill-destructive-active: var(--fill-destructive-active);
+  --color-fill-destructive-disabled: var(--fill-destructive-disabled);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-hover: var(--border-hover);
+  --color-border-focus: var(--border-focus);
+  --color-ring: var(--ring);
+}

package/theme/typography.css

@@ -0,0 +1,74 @@
+@theme {
+  /* Text roles. A role is a complete text style — size, line height, weight and
+     tracking arrive together in one utility — so no component assembles text out
+     of `text-<size> + font-<weight> + leading-<x>` and no two components drift
+     apart while claiming the same role.
+
+     They are Tailwind font-size tokens, so `text-label` lands in the same
+     conflict group as `text-body` in `cn()` (see `lib/tw-merge-config.ts`, which
+     reads these names off `ds/tokens/fonts.ts`) and a later role cleanly replaces
+     an earlier one.
+
+     500 is the weight ceiling: a role marks what a piece of text IS, and nothing
+     in an application shell needs to shout louder than a page title. */
+  --text-display: 1.375rem; /* 22px — onboarding hero */
+  --text-display--line-height: 127%;
+  --text-display--font-weight: 500;
+  --text-display--letter-spacing: -0.01em;
+
+  --text-title: 1.125rem; /* 18px — page title */
+  --text-title--line-height: 133%;
+  --text-title--font-weight: 500;
+
+  --text-heading: 1rem; /* 16px — page and panel headings */
+  --text-heading--line-height: 150%;
+  --text-heading--font-weight: 500;
+
+  --text-subheading: 0.875rem; /* 14px — sections and cards inside a page */
+  --text-subheading--line-height: 143%;
+  --text-subheading--font-weight: 500;
+
+  --text-body: 0.875rem; /* 14px — prose and descriptions */
+  --text-body--line-height: 143%;
+  --text-body--font-weight: 400;
+
+  --text-label: 0.8125rem; /* 13px — control labels, nav items, buttons */
+  --text-label--line-height: 150%;
+  --text-label--font-weight: 500;
+
+  --text-body-sm: 0.8125rem; /* 13px — dense body: table cells, menus, field values */
+  --text-body-sm--line-height: 150%;
+  --text-body-sm--font-weight: 400;
+
+  --text-column: 0.75rem; /* 12px — column headers and small strong labels */
+  --text-column--line-height: 150%;
+  --text-column--font-weight: 500;
+
+  --text-caption: 0.75rem; /* 12px — secondary and supporting copy */
+  --text-caption--line-height: 150%;
+  --text-caption--font-weight: 400;
+
+  --text-meta: 0.625rem; /* 10px — badges, keycaps, micro labels */
+  --text-meta--line-height: 160%;
+  --text-meta--font-weight: 500;
+  --text-meta--letter-spacing: 0.02em;
+
+  /*
+   * Role-based font tokens. Components reference --font-display (headlines,
+   * brand) and --font-body (UI, paragraphs). Defaults are system stacks so
+   * this package has no font-licensing footprint. Consumers override these
+   * tokens in their own CSS to apply product fonts.
+   */
+  --font-display:
+    system-ui, ui-sans-serif, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-body:
+    system-ui, ui-sans-serif, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Load-bearing, not legacy: Tailwind's preflight sets the document font from
+     --default-font-family, which reads --font-sans. Dropping this line silently
+     returns every page to Tailwind's stock stack.
+     The system has no serif family, so `font-serif` is removed outright. */
+  --font-sans: var(--font-body);
+  --font-serif: initial;
+}