@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/theme.css

@@ -0,0 +1,412 @@
+/*
+ * Raw design tokens for @mastra/playground-ui. Ships uncompiled as
+ * `@mastra/playground-ui/theme.css` so a consumer's Tailwind reads @theme and
+ * generates DS utilities without redeclaring tokens.
+ * Tokens only — no @import 'tailwindcss'/@plugin/@layer/@apply (breaks raw import).
+ * Colors stay oklch.
+ */
+
+:root {
+  /* Dark theme (default) */
+  --surface1: oklch(0% 0 0deg);
+  --surface2: oklch(16% 0 0deg);
+  --surface3: oklch(18% 0 0deg);
+  --surface4: oklch(21.78% 0 0deg);
+  --surface5: oklch(24.35% 0 0deg / 90%);
+  --surface6: oklch(30.92% 0 0deg);
+
+  --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);
+
+  --neutral1: oklch(0.372 0 0);
+  --neutral2: oklch(0.553 0 0);
+  --neutral3: oklch(0.705 0 0);
+  --neutral4: oklch(0.871 0 0);
+  --neutral5: oklch(0.92 0 0);
+  --neutral6: oklch(0.985 0 0);
+
+  --error: oklch(0.637 0.237 25.331);
+  --overlay: oklch(0% 0 0deg / 75%);
+  --border1: oklch(100% 0 0deg / 7%);
+  --border2: oklch(100% 0 0deg / 11%);
+  --surface-overlay-soft: oklch(100% 0 0deg / 4%);
+  --surface-overlay-strong: oklch(100% 0 0deg / 7%);
+  --shadow-main-frame: 0 14px 48px -36px oklch(0% 0 0deg / 85%);
+  --sidebar-nav-hover: oklch(100% 0 0deg / 7%);
+  --sidebar-nav-active: oklch(100% 0 0deg / 11%);
+
+  /* Semantic color aliases */
+  --text1: var(--neutral6);
+  --warning1: var(--accent6);
+  --positive1: var(--accent1);
+  --negative1: var(--accent2);
+
+  /* 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);
+
+  /* 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);
+  --brand-green-badge-bg: oklch(32.3% 0.04 140);
+  --brand-green-badge-fg: oklch(83.6% 0.126 140);
+
+  /* Chart palette (recharts). blue-600/amber-500/purple-500/red-500; chart-2 = brand green. */
+  --chart-1: oklch(0.546 0.245 262.881);
+  --chart-2: var(--color-green-500);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.637 0.237 25.331);
+}
+
+html.light {
+  --surface1: oklch(95.6% 0 0deg);
+  --surface2: oklch(98.5% 0 0deg);
+  --surface3: oklch(100% 0 0deg);
+  --surface4: oklch(96.5% 0 0deg);
+  --surface5: oklch(94.4% 0 0deg / 94%);
+  --surface6: oklch(89.5% 0 0deg);
+
+  --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);
+
+  --neutral1: oklch(0.554 0 0);
+  --neutral2: oklch(0.446 0 0);
+  --neutral3: oklch(0.372 0 0);
+  --neutral4: oklch(0.279 0 0);
+  --neutral5: oklch(0.208 0 0);
+  --neutral6: oklch(0.13 0 0);
+
+  --error: oklch(0.577 0.245 27.325);
+  --overlay: oklch(20.8% 0 0deg / 45%);
+  --border1: oklch(20.8% 0 0deg / 10%);
+  --border2: oklch(20.8% 0 0deg / 16%);
+  --surface-overlay-soft: oklch(20.8% 0 0deg / 4%);
+  --surface-overlay-strong: oklch(20.8% 0 0deg / 7%);
+  --shadow-main-frame: 0 1px 2px oklch(24% 0 0deg / 4%), 0 18px 48px -34px oklch(24% 0 0deg / 22%);
+  --sidebar-nav-hover: oklch(20.8% 0 0deg / 5.5%);
+  --sidebar-nav-active: oklch(20.8% 0 0deg / 8.5%);
+
+  /* Semantic color aliases */
+  --text1: var(--neutral6);
+  --warning1: var(--accent6);
+  --positive1: var(--accent1);
+  --negative1: var(--accent2);
+
+  /* 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);
+
+  /* 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 {
+  --spacing-*: initial;
+  --spacing-0: 0rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
+  --spacing-px: 0.0625rem;
+  --spacing-0_5: 0.125rem;
+  --spacing-1_5: 0.375rem;
+  --spacing-2_5: 0.625rem;
+  --spacing-3_5: 0.875rem;
+
+  --breakpoint-2xl: 1536px;
+  --breakpoint-3xl: 1700px;
+  --breakpoint-4xl: 2000px;
+
+  --text-ui-xs: 0.625rem;
+  --text-ui-sm: 0.75rem;
+  --text-ui-smd: 0.8125rem;
+  --text-ui-md: 0.875rem;
+  --text-ui-lg: 1rem;
+  --text-header-xs: 1rem;
+  --text-header-sm: 1.125rem;
+  --text-header-md: 1.25rem;
+  --text-header-lg: 1.5rem;
+  --text-header-xl: 1.75rem;
+
+  --leading-ui-xs: 160%;
+  --leading-ui-sm: 150%;
+  --leading-ui-smd: 150%;
+  --leading-ui-md: 143%;
+  --leading-ui-lg: 150%;
+  --leading-header-xs: 137%;
+  --leading-header-sm: 133%;
+  --leading-header-md: 140%;
+  --leading-header-lg: 133%;
+  --leading-header-xl: 129%;
+
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+
+  --height-icon-default: 16px;
+  --height-icon-lg: 20px;
+  --height-icon-sm: 12px;
+  --spacing-form-xs: 1.5rem;
+  --spacing-form-sm: 1.75rem;
+  --spacing-form-md: 2rem;
+  --spacing-form-default: 2.25rem;
+  --spacing-form-lg: 2.5rem;
+  --height-header-default: 48px;
+  --height-table-header: 28px;
+  --height-table-row: 56px;
+  --height-table-row-small: 40px;
+  --height-badge-default: 28px;
+  --height-avatar-sm: 24px;
+  --height-avatar-md: 32px;
+  --height-avatar-lg: 40px;
+  --height-dropdown-max-height: 300px;
+
+  --max-height-icon-default: 16px;
+  --max-height-icon-lg: 20px;
+  --max-height-icon-sm: 12px;
+  --max-height-header-default: 48px;
+  --max-height-table-header: 28px;
+  --max-height-table-row: 56px;
+  --max-height-table-row-small: 40px;
+  --max-height-badge-default: 28px;
+  --max-height-avatar-sm: 24px;
+  --max-height-avatar-md: 32px;
+  --max-height-avatar-lg: 40px;
+  --max-height-dropdown-max-height: 300px;
+
+  --width-icon-default: 16px;
+  --width-icon-lg: 20px;
+  --width-icon-sm: 12px;
+  /* Using --spacing-form-* for both height and width */
+  --width-header-default: 48px;
+  --width-table-header: 28px;
+  --width-table-row: 56px;
+  --width-table-row-small: 40px;
+  --width-badge-default: 28px;
+  --width-avatar-sm: 24px;
+  --width-avatar-md: 32px;
+  --width-avatar-lg: 40px;
+  --width-dropdown-max-height: 300px;
+
+  --container-icon-default: 16px;
+  --container-icon-lg: 20px;
+  --container-icon-sm: 12px;
+  /* Using --spacing-form-* for container sizing */
+  --container-header-default: 48px;
+  --container-table-header: 28px;
+  --container-table-row: 56px;
+  --container-table-row-small: 40px;
+  --container-badge-default: 28px;
+  --container-avatar-sm: 24px;
+  --container-avatar-md: 32px;
+  --container-avatar-lg: 40px;
+  --container-dropdown-max-height: 300px;
+
+  --color-surface1: var(--surface1);
+  --color-surface2: var(--surface2);
+  --color-surface3: var(--surface3);
+  --color-surface4: var(--surface4);
+  --color-surface5: var(--surface5);
+  --color-surface6: var(--surface6);
+  --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);
+  --color-neutral1: var(--neutral1);
+  --color-neutral2: var(--neutral2);
+  --color-neutral3: var(--neutral3);
+  --color-neutral4: var(--neutral4);
+  --color-neutral5: var(--neutral5);
+  --color-neutral6: var(--neutral6);
+  --color-error: var(--error);
+  --color-overlay: var(--overlay);
+  --color-border1: var(--border1);
+  --color-border2: var(--border2);
+  --color-surface-overlay-soft: var(--surface-overlay-soft);
+  --color-surface-overlay-strong: var(--surface-overlay-strong);
+
+  /* Semantic color aliases */
+  --color-text1: var(--text1);
+  --color-warning1: var(--warning1);
+  --color-positive1: var(--positive1);
+  --color-negative1: var(--negative1);
+
+  --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);
+
+  /* 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);
+  --color-green-badge-bg: var(--brand-green-badge-bg);
+  --color-green-badge-fg: var(--brand-green-badge-fg);
+
+  /*
+   * Role-based font tokens. Components reference --font-display (headlines,
+   * brand) and --font-body (UI, paragraphs). Defaults are system fonts so
+   * this package has no font-licensing footprint. Consumers override these
+   * tokens in their own CSS to apply product fonts.
+   */
+  --font-display: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
+  --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;
+
+  /* Backward-compat aliases — Tailwind utilities `font-sans` / `font-serif` keep working. */
+  --font-sans: var(--font-body);
+  --font-serif: var(--font-display);
+
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+
+  --ease-out-custom: cubic-bezier(0.33, 1, 0.68, 1);
+
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px oklch(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px oklch(0 0 0 / 0.4);
+  --shadow-inner: inset 0 2px 4px oklch(0 0 0 / 0.3);
+  --shadow-card: 0 2px 8px oklch(0 0 0 / 0.4);
+  --shadow-elevated: 0 8px 24px oklch(0 0 0 / 0.5);
+
+  /* Drop-shadow only — no white inset: @theme inlines values, so it can't theme per-mode and reads dirty on dark. */
+  --shadow-dialog: 0 8px 24px -8px oklch(0% 0 0deg / 28%), 0 24px 56px -16px oklch(0% 0 0deg / 36%);
+  --shadow-glow-accent1: 0 0 20px oklch(0.723 0.219 149.579 / 0.25);
+  --shadow-glow-accent2: 0 0 20px oklch(0.637 0.237 25.331 / 0.25);
+  --shadow-focus-ring: 0 0 0 3px oklch(0.723 0.219 149.579 / 0.12);
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes shimmer-text {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}

package/dist/vite.config.d.ts

@@ -1,3 +0,0 @@
-import { UserConfig } from 'vite';
-declare const _default: UserConfig;
-export default _default;