agentic-ds-kit 0.1.0 → 0.2.0

package/README.md

@@ -8,19 +8,18 @@ React components, JSON contracts, and tokens for agent-built UI. This is the **i
 npm install agentic-ds-kit
 ```
 
-Peer: React 19. Your bundler must compile this package (it ships TypeScript and CSS modules). Next.js:
+Peer: React 19. `AppNav` uses `next/link`; Next.js is an optional peer if you use that component.
 
-```ts
-const nextConfig = {
-  transpilePackages: ["agentic-ds-kit"],
-};
+## Use
+
+```tsx
+import { Button, Scoreboard } from "agentic-ds-kit";
 ```
 
-## Use
+Importing from the package loads semantic tokens. If your own CSS uses those variables before any kit component is imported, also add:
 
 ```tsx
 import "agentic-ds-kit/tokens.css";
-import { Button, Scoreboard } from "agentic-ds-kit";
 ```
 
 ```tsx

package/dist/lib/tokens.css

@@ -0,0 +1,637 @@
+/* Generated from tokens/tokens.json — run: npm run generate:tokens */
+/* Components use semantic vars only. Primitives are for foundations reference. */
+
+:root {
+  /* Primitive color ramps (fixed across themes) */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+
+  /* Semantic colors — light (default) */
+  --text-primary: #171717;
+  --text-secondary: #737373;
+  --text-muted: #a3a3a3;
+  --text-inverse: #fafafa;
+  --text-danger: #dc2626;
+  --text-disabled: #d4d4d4;
+  --text-brand: #1d4ed8;
+  --text-success: #15803d;
+  --text-warning: #b45309;
+  --text-info: #1d4ed8;
+  --icon-default: #737373;
+  --icon-muted: #a3a3a3;
+  --icon-primary: #404040;
+  --icon-secondary: #737373;
+  --icon-inverse: #ffffff;
+  --icon-brand: #2563eb;
+  --icon-success: #16a34a;
+  --icon-warning: #d97706;
+  --icon-danger: #dc2626;
+  --icon-info: #2563eb;
+  --icon-disabled: #d4d4d4;
+  --surface-page: #fafafa;
+  --surface-card: #ffffff;
+  --surface-muted: #f5f5f5;
+  --surface-overlay: color-mix(in srgb, #171717 40%, transparent);
+  --surface-elevated: #ffffff;
+  --surface-disabled: #f5f5f5;
+  --surface-inverse: #171717;
+  --surface-brand: #2563eb;
+  --surface-brand-subtle: #eff6ff;
+  --border-faint: #e5e5e5;
+  --border-strong: #d4d4d4;
+  --border-focus: #3b82f6;
+  --border-disabled: #e5e5e5;
+  --border-subtle: #f5f5f5;
+  --border-brand: #2563eb;
+  --status-success: #16a34a;
+  --status-success-subtle: #f0fdf4;
+  --status-success-border: #bbf7d0;
+  --status-warning: #d97706;
+  --status-warning-subtle: #fffbeb;
+  --status-warning-border: #fde68a;
+  --status-danger: #dc2626;
+  --status-danger-subtle: #fef2f2;
+  --status-danger-border: #fecaca;
+  --status-info: #2563eb;
+  --status-info-subtle: #eff6ff;
+  --status-info-border: #bfdbfe;
+  --status-success-text: #166534;
+  --status-warning-text: #92400e;
+  --status-danger-text: #991b1b;
+  --status-info-text: #1e40af;
+  --action-primary: #2563eb;
+  --action-primary-hover: #1d4ed8;
+  --action-primary-pressed: #1e40af;
+  --action-on-primary: #ffffff;
+  --action-danger: #dc2626;
+  --action-danger-hover: #b91c1c;
+  --action-danger-pressed: #991b1b;
+  --action-secondary: #f5f5f5;
+  --action-secondary-hover: #e5e5e5;
+  --action-secondary-pressed: #d4d4d4;
+  --action-selected: #eff6ff;
+  --action-selected-border: #2563eb;
+  --focus-ring: #3b82f6;
+  --focus-ring-offset: #ffffff;
+  --focus-ring-inverse: #93c5fd;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06);
+  --shadow-md: 0 4px 12px rgba(23, 23, 23, 0.08);
+  --fill-strong: #171717;
+  --fill-subtle: #f5f5f5;
+  --fill-brand: #2563eb;
+  --fill-brand-subtle: #eff6ff;
+  --fill-success: #16a34a;
+  --fill-success-subtle: #f0fdf4;
+  --fill-warning: #f59e0b;
+  --fill-warning-subtle: #fffbeb;
+  --fill-danger: #dc2626;
+  --fill-danger-subtle: #fef2f2;
+  --fill-info: #2563eb;
+  --fill-info-subtle: #eff6ff;
+  --brand-primary: #2563eb;
+  --brand-primary-hover: #1d4ed8;
+  --brand-primary-active: #1e40af;
+  --brand-subtle: #eff6ff;
+  --brand-on-brand: #ffffff;
+  --link-default: #1d4ed8;
+  --link-hover: #1e40af;
+  --link-visited: #1e40af;
+  --link-active: #1e3a8a;
+
+  --motion-fast: 150ms;
+  --motion-normal: 250ms;
+
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-px: 2px;
+
+  --space-inset-2xs: var(--space-px);
+  --space-inset-xs: var(--space-1);
+  --space-inset-sm: var(--space-2);
+  --space-inset-md: var(--space-3);
+  --space-inset-lg: var(--space-4);
+  --space-inset-xl: var(--space-6);
+  --space-inset-2xl: var(--space-8);
+  --space-stack-2xs: var(--space-px);
+  --space-stack-xs: var(--space-1);
+  --space-stack-sm: var(--space-2);
+  --space-stack-md: var(--space-4);
+  --space-stack-lg: var(--space-6);
+  --space-stack-xl: var(--space-10);
+  --space-stack-2xl: var(--space-16);
+  --space-inline-2xs: var(--space-px);
+  --space-inline-xs: var(--space-1);
+  --space-inline-sm: var(--space-2);
+  --space-inline-md: var(--space-3);
+  --space-inline-lg: var(--space-4);
+  --space-inline-xl: var(--space-6);
+  --space-gap-xs: var(--space-2);
+  --space-gap-sm: var(--space-3);
+  --space-gap-md: var(--space-4);
+  --space-gap-lg: var(--space-6);
+  --space-gap-xl: var(--space-10);
+  --space-section-sm: var(--space-8);
+  --space-section-md: var(--space-12);
+  --space-section-lg: var(--space-16);
+
+  /* Radius scale */
+  --radius-0: 0;
+  --radius-50: 0.125rem;
+  --radius-100: 0.25rem;
+  --radius-200: 0.5rem;
+  --radius-300: 0.75rem;
+  --radius-400: 1rem;
+  --radius-500: 1.25rem;
+  --radius-600: 1.5rem;
+  --radius-full: 9999px;
+  --radius-sm: var(--radius-100);
+  --radius-md: var(--radius-200);
+  --radius-lg: var(--radius-300);
+
+  /* Control - buttons, inputs, selects */
+  --radius-control-sm: var(--radius-100);
+  --radius-control-md: var(--radius-200);
+  --radius-control-lg: var(--radius-300);
+
+  /* Surface - cards, panels, dialogs */
+  --radius-surface-sm: var(--radius-200);
+  --radius-surface-md: var(--radius-300);
+  --radius-surface-lg: var(--radius-400);
+
+  /* Media - images, video, avatars */
+  --radius-media-sm: var(--radius-200);
+  --radius-media-md: var(--radius-300);
+  --radius-media-lg: var(--radius-400);
+
+  /* Pill - chips, badges, tags */
+  --radius-pill: var(--radius-full);
+
+  --border-0: 0;
+  --border-100: 1px;
+  --border-200: 2px;
+  --border-300: 4px;
+  --border-control: var(--border-100);
+  --border-control-strong: var(--border-200);
+  --border-surface: var(--border-100);
+  --border-highlight: var(--border-100);
+  --border-divider: var(--border-100);
+  --border-divider-strong: var(--border-200);
+  --border-focus-width: var(--border-200);
+
+  --shadow-0: none;
+  --shadow-100: 0 4px 14px 2px rgb(0 0 0 / 0.008), 0 12px 40px 4px rgb(0 0 0 / 0.012);
+  --shadow-150: 0 8px 24px 4px rgb(0 0 0 / 0.008), 0 24px 64px 8px rgb(0 0 0 / 0.014);
+  --shadow-200: 0 8px 22px 4px rgb(0 0 0 / 0.01), 0 20px 56px 8px rgb(0 0 0 / 0.016);
+  --shadow-250: 0 10px 28px 6px rgb(0 0 0 / 0.01), 0 28px 72px 10px rgb(0 0 0 / 0.018);
+  --shadow-300: 0 12px 32px 6px rgb(0 0 0 / 0.012), 0 28px 68px 10px rgb(0 0 0 / 0.02);
+  --shadow-400: 0 16px 40px 8px rgb(0 0 0 / 0.012), 0 36px 80px 12px rgb(0 0 0 / 0.022);
+  --shadow-500: 0 20px 48px 10px rgb(0 0 0 / 0.014), 0 44px 96px 14px rgb(0 0 0 / 0.025);
+  --shadow-600: 0 28px 64px 12px rgb(0 0 0 / 0.016), 0 52px 112px 16px rgb(0 0 0 / 0.03);
+  --shadow-inset-top-light: inset 0 1px 0 rgb(255 255 255 / 0.72);
+  --shadow-inset-start-light: inset 1px 0 0 rgb(255 255 255 / 0.28);
+  --shadow-inset-end-light: inset -1px 0 0 rgb(255 255 255 / 0.1);
+  --shadow-inset-bottom-light: inset 0 -1px 0 rgb(0 0 0 / 0.035);
+  --shadow-raised-xs: var(--shadow-150);
+  --shadow-raised-sm: var(--shadow-200);
+  --shadow-raised-md: var(--shadow-300);
+  --shadow-raised-lg: var(--shadow-400);
+  --shadow-raised-soft: var(--shadow-250);
+  --shadow-raised-depth: var(--shadow-raised-soft), var(--shadow-inset-top-light), var(--shadow-inset-start-light), var(--shadow-inset-end-light), var(--shadow-inset-bottom-light);
+  --shadow-overlay-sm: var(--shadow-300);
+  --shadow-overlay-md: var(--shadow-400);
+  --shadow-overlay-lg: var(--shadow-500);
+  --shadow-modal: var(--shadow-600);
+
+  --motion-duration-0: 0ms;
+  --motion-duration-100: 120ms;
+  --motion-duration-150: 160ms;
+  --motion-duration-200: 180ms;
+  --motion-duration-300: 240ms;
+  --motion-duration-400: 320ms;
+  --motion-duration-500: 400ms;
+  --motion-duration-600: 500ms;
+  --motion-ease-linear: linear;
+  --motion-ease-in: cubic-bezier(0.7, 0, 1, 0.5);
+  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --motion-ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  --motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
+  --motion-ease-spring-soft: cubic-bezier(0.28, 1.14, 0.4, 1);
+  --motion-interaction-duration: var(--motion-duration-100);
+  --motion-interaction-easing: var(--motion-ease-out);
+  --motion-expand-duration: var(--motion-duration-300);
+  --motion-expand-easing: var(--motion-ease-in-out);
+  --motion-overlay-duration: var(--motion-duration-200);
+  --motion-overlay-easing: var(--motion-ease-out);
+  --motion-overlay-exit-duration: var(--motion-duration-100);
+  --motion-overlay-exit-easing: var(--motion-ease-out);
+  --motion-modal-duration: var(--motion-duration-500);
+  --motion-modal-easing: var(--motion-ease-spring-soft);
+  --motion-modal-exit-duration: var(--motion-duration-200);
+  --motion-modal-exit-easing: var(--motion-ease-out);
+  --motion-page-duration: var(--motion-duration-500);
+  --motion-page-easing: var(--motion-ease-emphasized);
+
+  --opacity-0: 0;
+  --opacity-100: 0.08;
+  --opacity-200: 0.16;
+  --opacity-300: 0.32;
+  --opacity-400: 0.48;
+  --opacity-500: 0.64;
+  --opacity-600: 0.8;
+  --opacity-700: 1;
+  --opacity-disabled: var(--opacity-400);
+  --opacity-muted: var(--opacity-500);
+  --opacity-hover: var(--opacity-100);
+  --opacity-scrim-soft: var(--opacity-300);
+  --opacity-scrim: var(--opacity-500);
+  --opacity-full: var(--opacity-700);
+
+  --border-width-thin: 1px;
+  --border-width-medium: 2px;
+
+  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  --type-size-body: 1rem;
+  --type-size-body-sm: 0.875rem;
+  --type-size-label: 0.875rem;
+  --type-size-heading: 1.125rem;
+  --type-size-title: 1.5rem;
+  --type-size-display: 1.875rem;
+  --type-size-metric: 1.875rem;
+  --type-size-caption: 0.75rem;
+  --type-size-overline: 0.75rem;
+  --type-size-code: 0.875rem;
+
+  --type-weight-body: 400;
+  --type-weight-label: 500;
+  --type-weight-heading: 600;
+  --type-weight-title: 700;
+  --type-weight-metric: 500;
+  --type-weight-caption: 500;
+  --type-weight-overline: 500;
+  --type-weight-code: 400;
+
+  --type-line-body: 1.5;
+  --type-line-heading: 1.25;
+  --type-tracking-overline: 0.02em;
+
+  --z-overlay: 40;
+  --z-modal: 50;
+  --z-tooltip: 60;
+
+  --grid-columns: 12;
+  --grid-gutter-sm: var(--space-3);
+  --grid-gutter-md: var(--space-4);
+  --grid-gutter-lg: var(--space-6);
+  --grid-gutter-xl: var(--space-10);
+  --grid-margin-sm: var(--space-4);
+  --grid-margin-md: var(--space-6);
+  --grid-margin-lg: var(--space-10);
+  --grid-width-sm: 40rem;
+  --grid-width-md: 64rem;
+  --grid-width-lg: 80rem;
+  --grid-width-xl: 90rem;
+  --grid-breakpoint-sm: 40rem;
+  --grid-breakpoint-md: 64rem;
+  --grid-breakpoint-lg: 80rem;
+
+  --layout-container-sm: var(--grid-width-sm);
+  --layout-container-md: var(--grid-width-md);
+  --layout-container-lg: var(--grid-width-lg);
+  --layout-container-xl: var(--grid-width-xl);
+  --layout-gutter-sm: var(--grid-gutter-sm);
+  --layout-gutter-md: var(--grid-gutter-md);
+  --layout-gutter-lg: var(--grid-gutter-lg);
+  --layout-gutter-xl: var(--grid-gutter-xl);
+  --layout-margin-sm: var(--grid-margin-sm);
+  --layout-margin-md: var(--grid-margin-md);
+  --layout-margin-lg: var(--grid-margin-lg);
+  --layout-sidebar: 14rem;
+  --layout-sidebar-compact: var(--space-section-lg);
+  --layout-rail: 22rem;
+  --layout-metrics-min: 12rem;
+  --layout-auto-min: 16rem;
+  --layout-split-primary: 8;
+  --layout-split-secondary: 4;
+  --layout-split-half: 6;
+  --layout-split-third: 4;
+}
+
+[data-theme="dark"] {
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --text-muted: #737373;
+  --text-inverse: #171717;
+  --text-danger: #f87171;
+  --text-disabled: #525252;
+  --text-brand: #93c5fd;
+  --text-success: #86efac;
+  --text-warning: #fcd34d;
+  --text-info: #93c5fd;
+  --icon-default: #a3a3a3;
+  --icon-muted: #737373;
+  --icon-primary: #e5e5e5;
+  --icon-secondary: #a3a3a3;
+  --icon-inverse: #171717;
+  --icon-brand: #60a5fa;
+  --icon-success: #4ade80;
+  --icon-warning: #fbbf24;
+  --icon-danger: #f87171;
+  --icon-info: #60a5fa;
+  --icon-disabled: #525252;
+  --surface-page: #171717;
+  --surface-card: #262626;
+  --surface-muted: #262626;
+  --surface-overlay: color-mix(in srgb, #000000 60%, transparent);
+  --surface-elevated: #262626;
+  --surface-disabled: #262626;
+  --surface-inverse: #fafafa;
+  --surface-brand: #3b82f6;
+  --surface-brand-subtle: #1e3a8a;
+  --border-faint: #404040;
+  --border-strong: #525252;
+  --border-focus: #60a5fa;
+  --border-disabled: #404040;
+  --border-subtle: #262626;
+  --border-brand: #60a5fa;
+  --status-success: #4ade80;
+  --status-success-subtle: #14532d;
+  --status-success-border: #15803d;
+  --status-warning: #fbbf24;
+  --status-warning-subtle: #78350f;
+  --status-warning-border: #b45309;
+  --status-danger: #f87171;
+  --status-danger-subtle: #7f1d1d;
+  --status-danger-border: #b91c1c;
+  --status-info: #60a5fa;
+  --status-info-subtle: #1e3a8a;
+  --status-info-border: #1d4ed8;
+  --status-success-text: #bbf7d0;
+  --status-warning-text: #fde68a;
+  --status-danger-text: #fecaca;
+  --status-info-text: #bfdbfe;
+  --action-primary: #3b82f6;
+  --action-primary-hover: #60a5fa;
+  --action-primary-pressed: #93c5fd;
+  --action-on-primary: #ffffff;
+  --action-danger: #ef4444;
+  --action-danger-hover: #f87171;
+  --action-danger-pressed: #fca5a5;
+  --action-secondary: #262626;
+  --action-secondary-hover: #404040;
+  --action-secondary-pressed: #525252;
+  --action-selected: #1e3a8a;
+  --action-selected-border: #60a5fa;
+  --focus-ring: #60a5fa;
+  --focus-ring-offset: #171717;
+  --focus-ring-inverse: #93c5fd;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-raised-depth: var(--shadow-raised-soft);
+  --fill-strong: #f5f5f5;
+  --fill-subtle: #262626;
+  --fill-brand: #60a5fa;
+  --fill-brand-subtle: #1e3a8a;
+  --fill-success: #4ade80;
+  --fill-success-subtle: #14532d;
+  --fill-warning: #fbbf24;
+  --fill-warning-subtle: #78350f;
+  --fill-danger: #f87171;
+  --fill-danger-subtle: #7f1d1d;
+  --fill-info: #60a5fa;
+  --fill-info-subtle: #1e3a8a;
+  --brand-primary: #60a5fa;
+  --brand-primary-hover: #93c5fd;
+  --brand-primary-active: #bfdbfe;
+  --brand-subtle: #1e3a8a;
+  --brand-on-brand: #ffffff;
+  --link-default: #93c5fd;
+  --link-hover: #bfdbfe;
+  --link-visited: #bfdbfe;
+  --link-active: #dbeafe;
+  --shadow-inset-top-light: inset 0 0 0 transparent;
+  --shadow-inset-start-light: inset 0 0 0 transparent;
+  --shadow-inset-end-light: inset 0 0 0 transparent;
+  --shadow-inset-bottom-light: inset 0 0 0 transparent;
+}
+
+[data-color="violet"] {
+  --text-brand: #6d28d9;
+  --text-info: #6d28d9;
+  --icon-brand: #7c3aed;
+  --icon-info: #7c3aed;
+  --surface-brand: #7c3aed;
+  --surface-brand-subtle: #f5f3ff;
+  --border-focus: #8b5cf6;
+  --border-brand: #7c3aed;
+  --status-info: #7c3aed;
+  --status-info-subtle: #f5f3ff;
+  --status-info-border: #ddd6fe;
+  --status-info-text: #5b21b6;
+  --action-primary: #7c3aed;
+  --action-primary-hover: #6d28d9;
+  --action-primary-pressed: #5b21b6;
+  --action-selected: #f5f3ff;
+  --action-selected-border: #7c3aed;
+  --focus-ring: #8b5cf6;
+  --focus-ring-inverse: #c4b5fd;
+  --fill-brand: #7c3aed;
+  --fill-brand-subtle: #f5f3ff;
+  --fill-info: #7c3aed;
+  --fill-info-subtle: #f5f3ff;
+  --brand-primary: #7c3aed;
+  --brand-primary-hover: #6d28d9;
+  --brand-primary-active: #5b21b6;
+  --brand-subtle: #f5f3ff;
+  --link-default: #6d28d9;
+  --link-hover: #5b21b6;
+  --link-visited: #5b21b6;
+  --link-active: #4c1d95;
+}
+
+[data-theme="dark"][data-color="violet"] {
+  --text-brand: #c4b5fd;
+  --text-info: #c4b5fd;
+  --icon-brand: #a78bfa;
+  --icon-info: #a78bfa;
+  --surface-brand: #8b5cf6;
+  --surface-brand-subtle: #4c1d95;
+  --border-focus: #a78bfa;
+  --border-brand: #a78bfa;
+  --status-info: #a78bfa;
+  --status-info-subtle: #4c1d95;
+  --status-info-border: #6d28d9;
+  --status-info-text: #ddd6fe;
+  --action-primary: #8b5cf6;
+  --action-primary-hover: #a78bfa;
+  --action-primary-pressed: #c4b5fd;
+  --action-selected: #4c1d95;
+  --action-selected-border: #a78bfa;
+  --focus-ring: #a78bfa;
+  --focus-ring-inverse: #c4b5fd;
+  --fill-brand: #a78bfa;
+  --fill-brand-subtle: #4c1d95;
+  --fill-info: #a78bfa;
+  --fill-info-subtle: #4c1d95;
+  --brand-primary: #a78bfa;
+  --brand-primary-hover: #c4b5fd;
+  --brand-primary-active: #ddd6fe;
+  --brand-subtle: #4c1d95;
+  --link-default: #c4b5fd;
+  --link-hover: #ddd6fe;
+  --link-visited: #ddd6fe;
+  --link-active: #ede9fe;
+}
+
+[data-color="teal"] {
+  --text-brand: #0f766e;
+  --text-info: #0f766e;
+  --icon-brand: #0d9488;
+  --icon-info: #0d9488;
+  --surface-brand: #0d9488;
+  --surface-brand-subtle: #f0fdfa;
+  --border-focus: #14b8a6;
+  --border-brand: #0d9488;
+  --status-info: #0d9488;
+  --status-info-subtle: #f0fdfa;
+  --status-info-border: #99f6e4;
+  --status-info-text: #115e59;
+  --action-primary: #0d9488;
+  --action-primary-hover: #0f766e;
+  --action-primary-pressed: #115e59;
+  --action-selected: #f0fdfa;
+  --action-selected-border: #0d9488;
+  --focus-ring: #14b8a6;
+  --focus-ring-inverse: #5eead4;
+  --fill-brand: #0d9488;
+  --fill-brand-subtle: #f0fdfa;
+  --fill-info: #0d9488;
+  --fill-info-subtle: #f0fdfa;
+  --brand-primary: #0d9488;
+  --brand-primary-hover: #0f766e;
+  --brand-primary-active: #115e59;
+  --brand-subtle: #f0fdfa;
+  --link-default: #0f766e;
+  --link-hover: #115e59;
+  --link-visited: #115e59;
+  --link-active: #134e4a;
+}
+
+[data-theme="dark"][data-color="teal"] {
+  --text-brand: #5eead4;
+  --text-info: #5eead4;
+  --icon-brand: #2dd4bf;
+  --icon-info: #2dd4bf;
+  --surface-brand: #14b8a6;
+  --surface-brand-subtle: #134e4a;
+  --border-focus: #2dd4bf;
+  --border-brand: #2dd4bf;
+  --status-info: #2dd4bf;
+  --status-info-subtle: #134e4a;
+  --status-info-border: #0f766e;
+  --status-info-text: #99f6e4;
+  --action-primary: #14b8a6;
+  --action-primary-hover: #2dd4bf;
+  --action-primary-pressed: #5eead4;
+  --action-selected: #134e4a;
+  --action-selected-border: #2dd4bf;
+  --focus-ring: #2dd4bf;
+  --focus-ring-inverse: #5eead4;
+  --fill-brand: #2dd4bf;
+  --fill-brand-subtle: #134e4a;
+  --fill-info: #2dd4bf;
+  --fill-info-subtle: #134e4a;
+  --brand-primary: #2dd4bf;
+  --brand-primary-hover: #5eead4;
+  --brand-primary-active: #99f6e4;
+  --brand-subtle: #134e4a;
+  --link-default: #5eead4;
+  --link-hover: #99f6e4;
+  --link-visited: #99f6e4;
+  --link-active: #ccfbf1;
+}
+