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

package/theme/status.css

@@ -2,95 +2,251 @@
    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);
+  --destructive-subtle: var(--red-soft-950);
+  --destructive-subtle-active: var(--red-900);
+  --destructive-edge: var(--red-700);
+  --destructive-indicator: var(--red-400);
+  --destructive-subtle-foreground: var(--red-50);
+  --warning-subtle: var(--yellow-soft-950);
+  --warning-edge: var(--yellow-700);
+  --warning-indicator: var(--yellow-400);
+  --warning-subtle-foreground: var(--yellow-50);
+  --success-subtle: var(--green-soft-950);
+  --success-edge: var(--green-700);
+  --success-indicator: var(--green-400);
+  --success-subtle-foreground: var(--green-50);
+  --info-subtle: var(--blue-soft-950);
+  --info-edge: var(--blue-700);
+  --info-indicator: var(--blue-400);
+  --info-subtle-foreground: var(--blue-50);
 
-  --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);
+  --badge-neutral-foreground: var(--foreground);
+  --badge-green-strong: var(--green-soft-900);
+  --badge-green-subtle: var(--green-soft-950);
+  --badge-green-edge: var(--green-700);
+  --badge-green-indicator: var(--green-soft-300);
+  --badge-green-foreground: var(--green-200);
+  --badge-red-strong: var(--red-soft-900);
+  --badge-red-subtle: var(--red-soft-950);
+  --badge-red-edge: var(--red-700);
+  --badge-red-indicator: var(--red-soft-300);
+  --badge-red-foreground: var(--red-200);
+  --badge-yellow-strong: var(--yellow-soft-900);
+  --badge-yellow-subtle: var(--yellow-soft-950);
+  --badge-yellow-edge: var(--yellow-700);
+  --badge-yellow-indicator: var(--yellow-soft-300);
+  --badge-yellow-foreground: var(--yellow-200);
+  --badge-blue-strong: var(--blue-soft-900);
+  --badge-blue-subtle: var(--blue-soft-950);
+  --badge-blue-edge: var(--blue-700);
+  --badge-blue-indicator: var(--blue-soft-300);
+  --badge-blue-foreground: var(--blue-200);
+  --badge-purple-strong: var(--purple-soft-900);
+  --badge-purple-subtle: var(--purple-soft-950);
+  --badge-purple-edge: var(--purple-700);
+  --badge-purple-indicator: var(--purple-soft-300);
+  --badge-purple-foreground: var(--purple-200);
+  --badge-orange-strong: var(--orange-soft-900);
+  --badge-orange-subtle: var(--orange-soft-950);
+  --badge-orange-edge: var(--orange-700);
+  --badge-orange-indicator: var(--orange-soft-300);
+  --badge-orange-foreground: var(--orange-200);
+  --badge-cyan-strong: var(--cyan-soft-900);
+  --badge-cyan-subtle: var(--cyan-soft-950);
+  --badge-cyan-edge: var(--cyan-700);
+  --badge-cyan-indicator: var(--cyan-soft-300);
+  --badge-cyan-foreground: var(--cyan-200);
+  --badge-pink-strong: var(--pink-soft-900);
+  --badge-pink-subtle: var(--pink-soft-950);
+  --badge-pink-edge: var(--pink-700);
+  --badge-pink-indicator: var(--pink-soft-300);
+  --badge-pink-foreground: var(--pink-200);
+
+  --product-studio: var(--badge-cyan-strong);
+  --product-studio-foreground: var(--badge-cyan-foreground);
+  --product-studio-subtle: var(--badge-cyan-subtle);
+  --product-server: var(--badge-blue-strong);
+  --product-server-foreground: var(--badge-blue-foreground);
+  --product-server-subtle: var(--badge-blue-subtle);
+  --product-observability: var(--badge-green-strong);
+  --product-observability-foreground: var(--badge-green-foreground);
+  --product-observability-subtle: var(--badge-green-subtle);
+  --product-factory: var(--badge-orange-strong);
+  --product-factory-foreground: var(--badge-orange-foreground);
+  --product-factory-subtle: var(--badge-orange-subtle);
+  --product-workers: var(--badge-yellow-strong);
+  --product-workers-foreground: var(--badge-yellow-foreground);
+  --product-workers-subtle: var(--badge-yellow-subtle);
+  --product-persistent-server: var(--badge-purple-strong);
+  --product-persistent-server-foreground: var(--badge-purple-foreground);
+  --product-persistent-server-subtle: var(--badge-purple-subtle);
+
+  --brand-green-indicator: var(--color-brand-green);
+
+  --destructive-bright: var(--red-300);
+  --warning-bright: var(--yellow-300);
+  --success-bright: var(--green-300);
+  --info-bright: var(--blue-300);
+  --session-initializing: var(--orange-400);
 }
 
 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);
+  --destructive-subtle: var(--red-100);
+  --destructive-subtle-active: var(--red-200);
+  --destructive-edge: var(--red-300);
+  --destructive-indicator: var(--red-600);
+  --destructive-subtle-foreground: var(--red-950);
+  --warning-subtle: var(--yellow-100);
+  --warning-edge: var(--yellow-200);
+  --warning-indicator: var(--yellow-700);
+  --warning-subtle-foreground: var(--yellow-800);
+  --success-subtle: var(--green-100);
+  --success-edge: var(--green-300);
+  --success-indicator: var(--green-700);
+  --success-subtle-foreground: var(--green-950);
+  --info-subtle: var(--blue-100);
+  --info-edge: var(--blue-300);
+  --info-indicator: var(--blue-600);
+  --info-subtle-foreground: var(--blue-950);
+
+  --badge-neutral-foreground: var(--muted-foreground);
+  --badge-green-strong: var(--green-100);
+  --badge-green-subtle: var(--green-50);
+  --badge-green-edge: var(--green-300);
+  --badge-green-indicator: var(--green-soft-600);
+  --badge-green-foreground: var(--green-800);
+  --badge-red-strong: var(--red-100);
+  --badge-red-subtle: var(--red-50);
+  --badge-red-edge: var(--red-300);
+  --badge-red-indicator: var(--red-soft-600);
+  --badge-red-foreground: var(--red-800);
+  --badge-yellow-strong: var(--yellow-100);
+  --badge-yellow-subtle: var(--yellow-50);
+  --badge-yellow-edge: var(--yellow-300);
+  --badge-yellow-indicator: var(--yellow-soft-600);
+  --badge-yellow-foreground: var(--yellow-800);
+  --badge-blue-strong: var(--blue-100);
+  --badge-blue-subtle: var(--blue-50);
+  --badge-blue-edge: var(--blue-300);
+  --badge-blue-indicator: var(--blue-soft-600);
+  --badge-blue-foreground: var(--blue-800);
+  --badge-purple-strong: var(--purple-100);
+  --badge-purple-subtle: var(--purple-50);
+  --badge-purple-edge: var(--purple-300);
+  --badge-purple-indicator: var(--purple-soft-600);
+  --badge-purple-foreground: var(--purple-800);
+  --badge-orange-strong: var(--orange-100);
+  --badge-orange-subtle: var(--orange-50);
+  --badge-orange-edge: var(--orange-300);
+  --badge-orange-indicator: var(--orange-soft-600);
+  --badge-orange-foreground: var(--orange-800);
+  --badge-cyan-strong: var(--cyan-100);
+  --badge-cyan-subtle: var(--cyan-50);
+  --badge-cyan-edge: var(--cyan-300);
+  --badge-cyan-indicator: var(--cyan-soft-600);
+  --badge-cyan-foreground: var(--cyan-800);
+  --badge-pink-strong: var(--pink-100);
+  --badge-pink-subtle: var(--pink-50);
+  --badge-pink-edge: var(--pink-300);
+  --badge-pink-indicator: var(--pink-soft-600);
+  --badge-pink-foreground: var(--pink-800);
+
+  --product-studio-foreground: var(--cyan-950);
+  --product-server-foreground: var(--blue-950);
+  --product-observability-foreground: var(--green-950);
+  --product-factory-foreground: var(--orange-950);
+  --product-workers-foreground: var(--yellow-950);
+  --product-persistent-server-foreground: var(--purple-950);
+
+  --brand-green-indicator: var(--green-700);
 
-  --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);
+  --destructive-bright: var(--red-500);
+  --warning-bright: var(--yellow-400);
+  --success-bright: var(--green-500);
+  --info-bright: var(--blue-500);
+  --session-initializing: var(--orange-500);
 }
 
-@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);
+@theme inline {
+  --color-destructive-subtle: var(--destructive-subtle);
+  --color-destructive-subtle-active: var(--destructive-subtle-active);
+  --color-destructive-edge: var(--destructive-edge);
+  --color-destructive-indicator: var(--destructive-indicator);
+  --color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
+  --color-destructive-bright: var(--destructive-bright);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-warning-edge: var(--warning-edge);
+  --color-warning-indicator: var(--warning-indicator);
+  --color-warning-subtle-foreground: var(--warning-subtle-foreground);
+  --color-warning-bright: var(--warning-bright);
+  --color-success-subtle: var(--success-subtle);
+  --color-success-edge: var(--success-edge);
+  --color-success-indicator: var(--success-indicator);
+  --color-success-subtle-foreground: var(--success-subtle-foreground);
+  --color-success-bright: var(--success-bright);
+  --color-info-subtle: var(--info-subtle);
+  --color-info-edge: var(--info-edge);
+  --color-info-indicator: var(--info-indicator);
+  --color-info-subtle-foreground: var(--info-subtle-foreground);
+  --color-info-bright: var(--info-bright);
+  --color-badge-neutral-foreground: var(--badge-neutral-foreground);
+  --color-badge-green-strong: var(--badge-green-strong);
+  --color-badge-green-subtle: var(--badge-green-subtle);
+  --color-badge-green-edge: var(--badge-green-edge);
+  --color-badge-green-indicator: var(--badge-green-indicator);
+  --color-badge-green-foreground: var(--badge-green-foreground);
+  --color-badge-red-strong: var(--badge-red-strong);
+  --color-badge-red-subtle: var(--badge-red-subtle);
+  --color-badge-red-edge: var(--badge-red-edge);
+  --color-badge-red-indicator: var(--badge-red-indicator);
+  --color-badge-red-foreground: var(--badge-red-foreground);
+  --color-badge-yellow-strong: var(--badge-yellow-strong);
+  --color-badge-yellow-subtle: var(--badge-yellow-subtle);
+  --color-badge-yellow-edge: var(--badge-yellow-edge);
+  --color-badge-yellow-indicator: var(--badge-yellow-indicator);
+  --color-badge-yellow-foreground: var(--badge-yellow-foreground);
+  --color-badge-blue-strong: var(--badge-blue-strong);
+  --color-badge-blue-subtle: var(--badge-blue-subtle);
+  --color-badge-blue-edge: var(--badge-blue-edge);
+  --color-badge-blue-indicator: var(--badge-blue-indicator);
+  --color-badge-blue-foreground: var(--badge-blue-foreground);
+  --color-badge-purple-strong: var(--badge-purple-strong);
+  --color-badge-purple-subtle: var(--badge-purple-subtle);
+  --color-badge-purple-edge: var(--badge-purple-edge);
+  --color-badge-purple-indicator: var(--badge-purple-indicator);
+  --color-badge-purple-foreground: var(--badge-purple-foreground);
+  --color-badge-orange-strong: var(--badge-orange-strong);
+  --color-badge-orange-subtle: var(--badge-orange-subtle);
+  --color-badge-orange-edge: var(--badge-orange-edge);
+  --color-badge-orange-indicator: var(--badge-orange-indicator);
+  --color-badge-orange-foreground: var(--badge-orange-foreground);
+  --color-badge-cyan-strong: var(--badge-cyan-strong);
+  --color-badge-cyan-subtle: var(--badge-cyan-subtle);
+  --color-badge-cyan-edge: var(--badge-cyan-edge);
+  --color-badge-cyan-indicator: var(--badge-cyan-indicator);
+  --color-badge-cyan-foreground: var(--badge-cyan-foreground);
+  --color-badge-pink-strong: var(--badge-pink-strong);
+  --color-badge-pink-subtle: var(--badge-pink-subtle);
+  --color-badge-pink-edge: var(--badge-pink-edge);
+  --color-badge-pink-indicator: var(--badge-pink-indicator);
+  --color-badge-pink-foreground: var(--badge-pink-foreground);
+  --color-product-studio: var(--product-studio);
+  --color-product-studio-foreground: var(--product-studio-foreground);
+  --color-product-studio-subtle: var(--product-studio-subtle);
+  --color-product-server: var(--product-server);
+  --color-product-server-foreground: var(--product-server-foreground);
+  --color-product-server-subtle: var(--product-server-subtle);
+  --color-product-observability: var(--product-observability);
+  --color-product-observability-foreground: var(--product-observability-foreground);
+  --color-product-observability-subtle: var(--product-observability-subtle);
+  --color-product-factory: var(--product-factory);
+  --color-product-factory-foreground: var(--product-factory-foreground);
+  --color-product-factory-subtle: var(--product-factory-subtle);
+  --color-product-workers: var(--product-workers);
+  --color-product-workers-foreground: var(--product-workers-foreground);
+  --color-product-workers-subtle: var(--product-workers-subtle);
+  --color-product-persistent-server: var(--product-persistent-server);
+  --color-product-persistent-server-foreground: var(--product-persistent-server-foreground);
+  --color-product-persistent-server-subtle: var(--product-persistent-server-subtle);
+  --color-brand-green-indicator: var(--brand-green-indicator);
 }

package/theme/surfaces.css

@@ -53,10 +53,11 @@
   --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));
+  --fill-destructive: var(--red-600);
+  --fill-destructive-hover: var(--red-700);
+  --fill-destructive-active: var(--red-800);
+  --fill-destructive-disabled: var(--red-900);
+  --fill-destructive-foreground: var(--red-50);
 
   /*
    * Boundary ladder — the four states of a control's 1px edge, as alphas of
@@ -81,7 +82,6 @@
   --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
@@ -112,7 +112,7 @@
    * 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
+   * Focus moves that one edge to `--border-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
@@ -135,13 +135,13 @@
    * a small surface like a tooltip.
    */
   --elevation-lip: inset 0 1px 0 oklch(100% 0 0deg / 3%);
+  --inset-highlight: oklch(100% 0 0deg / 7%);
+  --inset-rim: oklch(100% 0 0deg / 7%);
   --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%);
   --dialog: var(--card);
   --field-on-surface: var(--gray-1);
   --field-rim-on-surface: oklch(100% 0 0deg / 5%);
-  --field-rim-focus-on-surface: oklch(100% 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%);
 }
@@ -150,6 +150,7 @@ html.light {
   /* Shade instead of light, at the same alphas: the whole fill and boundary
    * ladder re-resolves from here. */
   --fill-tint: 20.5%;
+  --fill-destructive-disabled: var(--red-300);
   /* 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%);
@@ -165,13 +166,13 @@ html.light {
    * falloff too — a shadow has room to darken here, so it reads as the same
    * height over less distance. */
   --elevation-lip: 0 0 #0000;
+  --inset-highlight: oklch(100% 0 0deg / 55%);
+  --inset-rim: oklch(0% 0 0deg / 8%);
   --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%);
   --dialog: var(--background);
   --field-on-surface: var(--background-3);
   --field-rim-on-surface: oklch(0% 0 0deg / 14%);
-  --field-rim-focus-on-surface: oklch(0% 0 0deg / 32%);
   --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%);
 }
@@ -180,8 +181,6 @@ html.light {
   --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
@@ -201,9 +200,9 @@ html.light {
   --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-fill-destructive-foreground: var(--fill-destructive-foreground);
   --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.css

@@ -7,8 +7,8 @@
  *
  * The layers live in `theme/`, each holding both themes of one subject:
  *
- *   colors      raw ramps — background, gray, gray-alpha, accents, brand green
- *   status      notice and badge tones
+ *   colors      raw ramps — background, gray, gray-alpha, chromatic hues, Mastra brand
+ *   status      status, badge, and product roles
  *   data-viz    chart series and span-type hues
  *   surfaces    fill ladder, boundary ladder, elevation, scrim
  *   typography  text roles and font families
@@ -36,7 +36,7 @@
   --field: var(--card);
   --field-disabled: var(--fill-subtle);
   --field-rim: var(--surface-rim);
-  --field-rim-focus: var(--surface-rim-focus);
+  --field-rim-focus: var(--border-focus);
   --muted: var(--gray-1);
   --foreground: var(--gray-10);
   /* Supporting text, measured against Linear's sidebar label: `lch(37.78)` light,
@@ -45,32 +45,6 @@
      text read as a second ink instead of stepping back. */
   --muted-foreground: var(--gray-8);
   --placeholder: var(--gray-7);
-
-  --destructive: oklch(0.637 0.237 25.331);
-  --destructive-foreground: oklch(0 0 0);
-  --error: oklch(0.637 0.237 25.331);
-  /* Lightness for hue-only generated accents (e.g. per-filter colors) — legible on each theme. */
-  --generated-accent-lightness: 72%;
-
-  /* Semantic color aliases. Theme-agnostic: the ramps they point at flip. */
-  --warning1: var(--accent6);
-  --positive1: var(--accent1);
-  --negative1: var(--accent2);
-}
-
-html.light {
-  --destructive: oklch(0.47 0.19 27.325);
-  --destructive-foreground: oklch(1 0 0);
-  --error: oklch(0.577 0.245 27.325);
-  --generated-accent-lightness: 38%;
-}
-
-@theme {
-  --color-error: var(--error);
-
-  --color-warning1: var(--warning1);
-  --color-positive1: var(--positive1);
-  --color-negative1: var(--negative1);
 }
 
 /* Semantic aliases stay inline so utilities resolve var(--token) on the styled
@@ -87,6 +61,4 @@ html.light {
   --color-foreground: var(--foreground);
   --color-muted-foreground: var(--muted-foreground);
   --color-placeholder: var(--placeholder);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
 }

package/dist/Badge-Bzn8Z-_I.js

@@ -1,123 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Icon } from './icons/Icon.es.js';
-import { transitions } from './primitives/transitions.es.js';
-import { c as cn } from './cn-65Adrsfj.js';
-
-const badgeToneStyles = {
-  neutral: {
-    default: "bg-fill text-badge-neutral-fg",
-    muted: "bg-fill-subtle text-badge-neutral-fg",
-    indicator: "bg-muted-foreground"
-  },
-  green: {
-    default: "bg-badge-green/20 text-badge-green-fg",
-    muted: "bg-badge-green/10 text-badge-green-fg",
-    indicator: "bg-badge-green"
-  },
-  red: {
-    default: "bg-badge-red/20 text-badge-red-fg",
-    muted: "bg-badge-red/10 text-badge-red-fg",
-    indicator: "bg-badge-red"
-  },
-  blue: {
-    default: "bg-badge-blue/20 text-badge-blue-fg",
-    muted: "bg-badge-blue/10 text-badge-blue-fg",
-    indicator: "bg-badge-blue"
-  },
-  yellow: {
-    default: "bg-badge-yellow/20 text-badge-yellow-fg",
-    muted: "bg-badge-yellow/10 text-badge-yellow-fg",
-    indicator: "bg-badge-yellow"
-  },
-  purple: {
-    default: "bg-badge-purple/20 text-badge-purple-fg",
-    muted: "bg-badge-purple/10 text-badge-purple-fg",
-    indicator: "bg-badge-purple"
-  },
-  orange: {
-    default: "bg-badge-orange/20 text-badge-orange-fg",
-    muted: "bg-badge-orange/10 text-badge-orange-fg",
-    indicator: "bg-badge-orange"
-  },
-  cyan: {
-    default: "bg-badge-cyan/20 text-badge-cyan-fg",
-    muted: "bg-badge-cyan/10 text-badge-cyan-fg",
-    indicator: "bg-badge-cyan"
-  },
-  pink: {
-    default: "bg-badge-pink/20 text-badge-pink-fg",
-    muted: "bg-badge-pink/10 text-badge-pink-fg",
-    indicator: "bg-badge-pink"
-  }
-};
-const badgeSizeStyles = {
-  xs: {
-    badge: "h-[18px] gap-0.5 text-meta",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "pl-1 pr-1.5",
-    indicator: "size-1"
-  },
-  sm: {
-    badge: "h-5 gap-1 text-meta",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "px-1.5",
-    indicator: "size-1"
-  },
-  md: {
-    badge: "h-5 gap-1 text-column tracking-normal",
-    withoutLeadingVisual: "px-2",
-    withLeadingVisual: "pl-1.5 pr-2",
-    indicator: "size-1.5"
-  }
-};
-const Badge = ({
-  icon,
-  indicator,
-  variant = "neutral",
-  emphasis = "default",
-  size = "md",
-  className,
-  children,
-  ...props
-}) => {
-  const hasIcon = Boolean(icon);
-  const withLeadingVisual = hasIcon || indicator !== void 0;
-  const sizeStyles = badgeSizeStyles[size];
-  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(
-        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]",
-        "inset-ring-1 inset-ring-current/5",
-        "inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7",
-        "dark:bg-linear-to-b dark:from-white/3 dark:to-white/0",
-        badgeToneStyles[variant][emphasis],
-        sizeStyles.badge,
-        paddingClass,
-        transitions.colors,
-        className
-      ),
-      ...props,
-      children: [
-        indicator !== void 0 ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "shrink-0 rounded-full",
-              badgeToneStyles[variant].indicator,
-              sizeStyles.indicator,
-              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
-            )
-          }
-        ) : null,
-        hasIcon ? /* @__PURE__ */ jsx(Icon, { size: "xs", children: icon }) : null,
-        children
-      ]
-    }
-  );
-};
-
-export { Badge as B };
-//# sourceMappingURL=Badge-Bzn8Z-_I.js.map

package/dist/Badge-Bzn8Z-_I.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge-Bzn8Z-_I.js","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'default' | 'muted';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst badgeToneStyles = {\n  neutral: {\n    default: 'bg-fill text-badge-neutral-fg',\n    muted: 'bg-fill-subtle text-badge-neutral-fg',\n    indicator: 'bg-muted-foreground',\n  },\n  green: {\n    default: 'bg-badge-green/20 text-badge-green-fg',\n    muted: 'bg-badge-green/10 text-badge-green-fg',\n    indicator: 'bg-badge-green',\n  },\n  red: {\n    default: 'bg-badge-red/20 text-badge-red-fg',\n    muted: 'bg-badge-red/10 text-badge-red-fg',\n    indicator: 'bg-badge-red',\n  },\n  blue: {\n    default: 'bg-badge-blue/20 text-badge-blue-fg',\n    muted: 'bg-badge-blue/10 text-badge-blue-fg',\n    indicator: 'bg-badge-blue',\n  },\n  yellow: {\n    default: 'bg-badge-yellow/20 text-badge-yellow-fg',\n    muted: 'bg-badge-yellow/10 text-badge-yellow-fg',\n    indicator: 'bg-badge-yellow',\n  },\n  purple: {\n    default: 'bg-badge-purple/20 text-badge-purple-fg',\n    muted: 'bg-badge-purple/10 text-badge-purple-fg',\n    indicator: 'bg-badge-purple',\n  },\n  orange: {\n    default: 'bg-badge-orange/20 text-badge-orange-fg',\n    muted: 'bg-badge-orange/10 text-badge-orange-fg',\n    indicator: 'bg-badge-orange',\n  },\n  cyan: {\n    default: 'bg-badge-cyan/20 text-badge-cyan-fg',\n    muted: 'bg-badge-cyan/10 text-badge-cyan-fg',\n    indicator: 'bg-badge-cyan',\n  },\n  pink: {\n    default: 'bg-badge-pink/20 text-badge-pink-fg',\n    muted: 'bg-badge-pink/10 text-badge-pink-fg',\n    indicator: 'bg-badge-pink',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-meta',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-meta',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-5 gap-1 text-column tracking-normal',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'default',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]',\n        'inset-ring-1 inset-ring-current/5',\n        'inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7',\n        'dark:bg-linear-to-b dark:from-white/3 dark:to-white/0',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"xs\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}