@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/css/dist/tokens.css

@@ -0,0 +1,405 @@
+/* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
+
+@layer plinth {
+  :root {
+    --plinth-ref-color-neutral-0: oklch(1 0 0);
+    --plinth-ref-color-neutral-50: oklch(0.985 0.002 260);
+    --plinth-ref-color-neutral-100: oklch(0.965 0.003 260);
+    --plinth-ref-color-neutral-150: oklch(0.945 0.004 260);
+    --plinth-ref-color-neutral-200: oklch(0.92 0.004 260);
+    --plinth-ref-color-neutral-300: oklch(0.82 0.005 260);
+    --plinth-ref-color-neutral-400: oklch(0.71 0.008 260);
+    --plinth-ref-color-neutral-500: oklch(0.54 0.01 260);
+    --plinth-ref-color-neutral-600: oklch(0.45 0.01 260);
+    --plinth-ref-color-neutral-700: oklch(0.37 0.01 260);
+    --plinth-ref-color-neutral-800: oklch(0.27 0.008 260);
+    --plinth-ref-color-neutral-850: oklch(0.235 0.007 260);
+    --plinth-ref-color-neutral-900: oklch(0.205 0.006 260);
+    --plinth-ref-color-neutral-950: oklch(0.18 0.005 260);
+    --plinth-ref-color-neutral-1000: oklch(0.145 0.004 260);
+    --plinth-ref-color-brand-50: #eff6ff;
+    --plinth-ref-color-brand-100: #dbeafe;
+    --plinth-ref-color-brand-200: #bfdbfe;
+    --plinth-ref-color-brand-300: #93c5fd;
+    --plinth-ref-color-brand-400: #60a5fa;
+    --plinth-ref-color-brand-500: #3b82f6;
+    --plinth-ref-color-brand-600: #2563eb;
+    --plinth-ref-color-brand-700: #1d4ed8;
+    --plinth-ref-color-brand-800: #1e40af;
+    --plinth-ref-color-brand-900: #1e3a8a;
+    --plinth-ref-color-brand-950: #172554;
+    --plinth-ref-color-green-50: #f0fdf4;
+    --plinth-ref-color-green-100: #dcfce7;
+    --plinth-ref-color-green-200: #bbf7d0;
+    --plinth-ref-color-green-400: #4ade80;
+    --plinth-ref-color-green-600: #16a34a;
+    --plinth-ref-color-green-700: #15803d;
+    --plinth-ref-color-green-800: #166534;
+    --plinth-ref-color-green-950: #052e16;
+    --plinth-ref-color-amber-50: #fffbeb;
+    --plinth-ref-color-amber-100: #fef3c7;
+    --plinth-ref-color-amber-200: #fde68a;
+    --plinth-ref-color-amber-400: #fbbf24;
+    --plinth-ref-color-amber-500: #f59e0b;
+    --plinth-ref-color-amber-700: #b45309;
+    --plinth-ref-color-amber-800: #92400e;
+    --plinth-ref-color-amber-950: #451a03;
+    --plinth-ref-color-red-50: #fef2f2;
+    --plinth-ref-color-red-100: #fee2e2;
+    --plinth-ref-color-red-200: #fecaca;
+    --plinth-ref-color-red-400: #f87171;
+    --plinth-ref-color-red-600: #dc2626;
+    --plinth-ref-color-red-700: #b91c1c;
+    --plinth-ref-color-red-800: #991b1b;
+    --plinth-ref-color-red-950: #450a0a;
+    --plinth-ref-color-black-alpha-10: #0000001a;
+    --plinth-ref-color-black-alpha-15: #00000026;
+    --plinth-ref-color-black-alpha-30: #0000004d;
+    --plinth-ref-color-black-alpha-50: #00000080;
+    --plinth-ref-color-black-alpha-60: #00000099;
+    --plinth-ref-color-black-alpha-70: #000000b3;
+    --plinth-ref-color-ink-alpha-6: oklch(0.18 0.005 260 / 0.06);
+    --plinth-ref-color-ink-alpha-10: oklch(0.18 0.005 260 / 0.1);
+    --plinth-ref-color-ink-alpha-20: oklch(0.18 0.005 260 / 0.2);
+    --plinth-ref-color-chalk-alpha-6: oklch(0.965 0.003 260 / 0.06);
+    --plinth-ref-color-chalk-alpha-10: oklch(0.965 0.003 260 / 0.1);
+    --plinth-ref-color-chalk-alpha-20: oklch(0.965 0.003 260 / 0.2);
+    --plinth-ref-color-white-alpha-12: #ffffff1f;
+    --plinth-ref-space-0: 0;
+    --plinth-ref-space-1: 0.25rem;
+    --plinth-ref-space-2: 0.5rem;
+    --plinth-ref-space-3: 0.75rem;
+    --plinth-ref-space-4: 1rem;
+    --plinth-ref-space-5: 1.25rem;
+    --plinth-ref-space-6: 1.5rem;
+    --plinth-ref-space-8: 2rem;
+    --plinth-ref-space-10: 2.5rem;
+    --plinth-ref-space-12: 3rem;
+    --plinth-ref-space-14: 3.5rem;
+    --plinth-ref-space-16: 4rem;
+    --plinth-ref-space-0-5: 0.125rem;
+    --plinth-ref-size-16: 1rem;
+    --plinth-ref-size-20: 1.25rem;
+    --plinth-ref-size-24: 1.5rem;
+    --plinth-ref-size-28: 1.75rem;
+    --plinth-ref-size-32: 2rem;
+    --plinth-ref-size-40: 2.5rem;
+    --plinth-ref-size-44: 2.75rem;
+    --plinth-ref-size-56: 3.5rem;
+    --plinth-ref-size-160: 10rem;
+    --plinth-ref-size-400: 25rem;
+    --plinth-ref-size-480: 30rem;
+    --plinth-ref-radius-0: 0;
+    --plinth-ref-radius-2: 0.125rem;
+    --plinth-ref-radius-4: 0.25rem;
+    --plinth-ref-radius-6: 0.375rem;
+    --plinth-ref-radius-8: 0.5rem;
+    --plinth-ref-radius-10: 0.625rem;
+    --plinth-ref-radius-12: 0.75rem;
+    --plinth-ref-radius-16: 1rem;
+    --plinth-ref-radius-full: 9999px;
+    --plinth-ref-border-width-1: 1px;
+    --plinth-ref-border-width-2: 2px;
+    --plinth-ref-border-width-3: 3px;
+    --plinth-ref-font-family-sans: 'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --plinth-ref-font-family-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+    --plinth-ref-font-size-12: 0.75rem;
+    --plinth-ref-font-size-13: 0.8125rem;
+    --plinth-ref-font-size-14: 0.875rem;
+    --plinth-ref-font-size-15: 0.9375rem;
+    --plinth-ref-font-size-16: 1rem;
+    --plinth-ref-font-size-18: 1.125rem;
+    --plinth-ref-font-size-24: 1.5rem;
+    --plinth-ref-font-size-30: 1.875rem;
+    --plinth-ref-font-size-36: 2.25rem;
+    --plinth-ref-font-size-48: 3rem;
+    --plinth-ref-font-size-64: 4rem;
+    --plinth-ref-font-weight-400: 400;
+    --plinth-ref-font-weight-500: 500;
+    --plinth-ref-font-weight-600: 600;
+    --plinth-ref-font-weight-700: 700;
+    --plinth-ref-font-leading-105: 1.05;
+    --plinth-ref-font-leading-125: 1.25;
+    --plinth-ref-font-leading-150: 1.5;
+    --plinth-ref-font-tracking-0: 0;
+    --plinth-ref-font-tracking-neg-1: -0.01em;
+    --plinth-ref-font-tracking-neg-2: -0.02em;
+    --plinth-ref-font-tracking-neg-4: -0.04em;
+    --plinth-ref-duration-120: 120ms;
+    --plinth-ref-duration-200: 200ms;
+    --plinth-ref-duration-320: 320ms;
+    --plinth-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --plinth-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --plinth-ref-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --plinth-space-0: var(--plinth-ref-space-0);
+    --plinth-space-1: var(--plinth-ref-space-1);
+    --plinth-space-2: var(--plinth-ref-space-2);
+    --plinth-space-3: var(--plinth-ref-space-3);
+    --plinth-space-4: var(--plinth-ref-space-4);
+    --plinth-space-5: var(--plinth-ref-space-5);
+    --plinth-space-6: var(--plinth-ref-space-6);
+    --plinth-space-8: var(--plinth-ref-space-8);
+    --plinth-space-10: var(--plinth-ref-space-10);
+    --plinth-space-12: var(--plinth-ref-space-12);
+    --plinth-space-14: var(--plinth-ref-space-14);
+    --plinth-space-16: var(--plinth-ref-space-16);
+    --plinth-space-0-5: var(--plinth-ref-space-0-5);
+    --plinth-radius-control: var(--plinth-ref-radius-6);
+    --plinth-radius-container: var(--plinth-ref-radius-10);
+    --plinth-radius-pill: var(--plinth-ref-radius-full);
+    --plinth-border-width-thin: var(--plinth-ref-border-width-1);
+    --plinth-border-width-thick: var(--plinth-ref-border-width-2);
+    --plinth-opacity-disabled: 0.5;
+    --plinth-focus-ring-width: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset: 0;
+    --plinth-focus-ring-offset-filled: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset-inset: -2px;
+    --plinth-font-family-body: var(--plinth-ref-font-family-sans);
+    --plinth-font-family-mono: var(--plinth-ref-font-family-mono);
+    --plinth-font-size-xs: var(--plinth-ref-font-size-12);
+    --plinth-font-size-sm: var(--plinth-ref-font-size-13);
+    --plinth-font-size-md: var(--plinth-ref-font-size-14);
+    --plinth-font-size-lg: var(--plinth-ref-font-size-15);
+    --plinth-font-size-xl: var(--plinth-ref-font-size-18);
+    --plinth-font-size-2xl: var(--plinth-ref-font-size-24);
+    --plinth-font-size-3xl: var(--plinth-ref-font-size-30);
+    --plinth-font-size-4xl: var(--plinth-ref-font-size-36);
+    --plinth-font-size-5xl: var(--plinth-ref-font-size-48);
+    --plinth-font-size-6xl: var(--plinth-ref-font-size-64);
+    --plinth-font-size-field: var(--plinth-ref-font-size-16);
+    --plinth-font-weight-regular: var(--plinth-ref-font-weight-400);
+    --plinth-font-weight-medium: var(--plinth-ref-font-weight-500);
+    --plinth-font-weight-semibold: var(--plinth-ref-font-weight-600);
+    --plinth-font-weight-bold: var(--plinth-ref-font-weight-700);
+    --plinth-font-leading-display: var(--plinth-ref-font-leading-105);
+    --plinth-font-leading-tight: var(--plinth-ref-font-leading-125);
+    --plinth-font-leading-normal: var(--plinth-ref-font-leading-150);
+    --plinth-font-tracking-normal: var(--plinth-ref-font-tracking-0);
+    --plinth-font-tracking-snug: var(--plinth-ref-font-tracking-neg-1);
+    --plinth-font-tracking-tight: var(--plinth-ref-font-tracking-neg-2);
+    --plinth-font-tracking-tighter: var(--plinth-ref-font-tracking-neg-4);
+    --plinth-duration-fast: var(--plinth-ref-duration-120);
+    --plinth-duration-normal: var(--plinth-ref-duration-200);
+    --plinth-duration-slow: var(--plinth-ref-duration-320);
+    --plinth-easing-standard: var(--plinth-ref-easing-standard);
+    --plinth-easing-enter: var(--plinth-ref-easing-enter);
+    --plinth-easing-exit: var(--plinth-ref-easing-exit);
+    --plinth-control-sm: var(--plinth-ref-size-28);
+    --plinth-control-md: var(--plinth-ref-size-32);
+    --plinth-control-lg: var(--plinth-ref-size-40);
+    --plinth-touch-target: var(--plinth-ref-size-40);
+    --plinth-size-icon-sm: var(--plinth-ref-size-16);
+    --plinth-size-icon-md: var(--plinth-ref-size-20);
+    --plinth-size-icon-lg: var(--plinth-ref-size-24);
+    --plinth-size-row: var(--plinth-ref-size-44);
+    --plinth-size-avatar-sm: var(--plinth-ref-size-24);
+    --plinth-size-avatar-md: var(--plinth-ref-size-32);
+    --plinth-size-avatar-lg: var(--plinth-ref-size-40);
+    --plinth-size-avatar-xl: var(--plinth-ref-size-56);
+    --plinth-size-dialog: var(--plinth-ref-size-480);
+    --plinth-size-panel: var(--plinth-ref-size-400);
+    --plinth-size-peek: var(--plinth-ref-size-160);
+    --plinth-layer-base: 0;
+    --plinth-layer-sticky: 100;
+    --plinth-layer-overlay: 200;
+    --plinth-layer-sheet: 300;
+    --plinth-layer-toast: 400;
+    --plinth-breakpoint-md: 768px;
+    --plinth-breakpoint-lg: 1280px;
+    --plinth-header-height: var(--plinth-space-14);
+    --plinth-data-table-row-height: var(--plinth-size-row);
+    --plinth-list-row-height: var(--plinth-size-row);
+    --plinth-pill-height: var(--plinth-control-md);
+    --plinth-dialog-width: var(--plinth-size-dialog);
+    --plinth-sheet-side-width: var(--plinth-size-panel);
+    --plinth-drawer-peek-height: var(--plinth-size-peek);
+    --plinth-section-menu-height: var(--plinth-space-14);
+    --plinth-section-menu-item-height: var(--plinth-control-lg);
+  }
+
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-50);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-0);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-100);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-150);
+    --plinth-color-text: var(--plinth-ref-color-neutral-950);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-600);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-500);
+    --plinth-color-border: var(--plinth-ref-color-ink-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-ink-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-ink-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-800);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-700);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-0);
+    --plinth-color-primary-edge: var(--plinth-ref-color-white-alpha-12);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-700);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-600);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-50);
+    --plinth-color-info: var(--plinth-ref-color-brand-600);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-100);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-800);
+    --plinth-color-success: var(--plinth-ref-color-green-600);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-100);
+    --plinth-color-success-text: var(--plinth-ref-color-green-800);
+    --plinth-color-warning: var(--plinth-ref-color-amber-500);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-100);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-800);
+    --plinth-color-danger: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-100);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-800);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-50);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-100);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-200);
+    --plinth-elevation-1: 0 1px 2px 0 #0000001a;
+    --plinth-elevation-2: 0 4px 12px 0 #00000026;
+    --plinth-elevation-3: 0 12px 32px 0 #00000026;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 6%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 6%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 6%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 6%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  [data-theme="dark"],
+  .dark {
+    color-scheme: dark;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+    --plinth-color-text: var(--plinth-ref-color-neutral-100);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+    --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+    --plinth-color-info: var(--plinth-ref-color-brand-400);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+    --plinth-color-success: var(--plinth-ref-color-green-400);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+    --plinth-color-success-text: var(--plinth-ref-color-green-200);
+    --plinth-color-warning: var(--plinth-ref-color-amber-400);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+    --plinth-color-danger: var(--plinth-ref-color-red-400);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+    --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+    --plinth-elevation-2: 0 4px 12px 0 #00000080;
+    --plinth-elevation-3: 0 12px 32px 0 #00000099;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"], .light) {
+      color-scheme: dark;
+      --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+      --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+      --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+      --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+      --plinth-color-text: var(--plinth-ref-color-neutral-100);
+      --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+      --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+      --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+      --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+      --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+      --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+      --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+      --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+      --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+      --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+      --plinth-color-accent: var(--plinth-ref-color-brand-600);
+      --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+      --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+      --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+      --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+      --plinth-color-info: var(--plinth-ref-color-brand-400);
+      --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+      --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+      --plinth-color-success: var(--plinth-ref-color-green-400);
+      --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+      --plinth-color-success-text: var(--plinth-ref-color-green-200);
+      --plinth-color-warning: var(--plinth-ref-color-amber-400);
+      --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+      --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+      --plinth-color-danger: var(--plinth-ref-color-red-400);
+      --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+      --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+      --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+      --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+      --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+      --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+      --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+      --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+      --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+      --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+      --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+      --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+      --plinth-elevation-2: 0 4px 12px 0 #00000080;
+      --plinth-elevation-3: 0 12px 32px 0 #00000099;
+      --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+      --plinth-callout-neutral-border: var(--plinth-color-border);
+      --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+      --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+      --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+      --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+      --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+      --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+      --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+      --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --plinth-duration-fast: 0ms;
+      --plinth-duration-normal: 0ms;
+      --plinth-duration-slow: 0ms;
+    }
+  }
+}

package/packages/react/dist/PlinthAvatar.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from 'react';
+import { type AvatarSize } from './avatar';
+import { type Tone } from './tones';
+interface AvatarOptions {
+    /** Whose avatar it is: the accessible name, and where initials come from. */
+    name?: string;
+    src?: string;
+    initials?: string;
+    size?: AvatarSize;
+    status?: Tone;
+    statusLabel?: string;
+    /** Hidden from screen readers, for an avatar next to the name it shows. */
+    decorative?: boolean;
+}
+export type PlinthAvatarProps = AvatarOptions & Omit<ComponentProps<'span'>, keyof AvatarOptions | 'children'>;
+export declare function PlinthAvatar({ name, src, initials, size, status, statusLabel, decorative, className, ...rest }: PlinthAvatarProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthBadge.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import { type Tone } from './tones';
+export type PlinthBadgeProps = ComponentProps<'span'> & {
+    tone?: Tone;
+    dot?: boolean;
+};
+export declare function PlinthBadge({ tone, dot, className, children, ...rest }: PlinthBadgeProps): import("react").JSX.Element;

package/packages/react/dist/PlinthButton.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type ButtonVariant, type InvokerCommandProps } from './button';
+import { type ControlSize } from './size';
+interface ButtonOptions {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    disabled?: boolean;
+    /** Working: a spinner in the leading icon's place, and the button reads as busy. */
+    busy?: boolean;
+    /** The leading icon (Vue's `icon` slot). */
+    icon?: ReactNode;
+    /** The trailing icon (Vue's `trailing` slot). */
+    trailing?: ReactNode;
+    /** Flips the leading icon in right-to-left text, for icons that point a direction. */
+    mirrorIcon?: boolean;
+    /** Flips the trailing icon in right-to-left text, for an arrow such as Next. */
+    mirrorTrailing?: boolean;
+}
+/**
+ * A `<button>`, or with an `href` a link that looks like one. The button takes `commandfor` and
+ * `command`; a link doesn't, since invoker commands are a button's.
+ */
+export type PlinthButtonProps = (ButtonOptions & InvokerCommandProps & Omit<ComponentProps<'button'>, keyof ButtonOptions | keyof InvokerCommandProps> & {
+    href?: undefined;
+}) | (ButtonOptions & Omit<ComponentProps<'a'>, keyof ButtonOptions> & {
+    href: string;
+});
+export declare function PlinthButton({ href, variant, size, disabled, busy, icon, trailing, mirrorIcon, mirrorTrailing, className, children, ...rest }: PlinthButtonProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthCallout.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type CalloutRole, type CalloutTone } from './callout';
+interface CalloutOptions {
+    tone?: CalloutTone;
+    /** `note` for a note in the page; `status` or `alert` for a message the app adds. */
+    role?: CalloutRole;
+    /** A short title above the text; it may hold a little markup. */
+    title?: ReactNode;
+    /** Buttons or links under the text (Vue's actions slot). */
+    actions?: ReactNode;
+    /** The project's own SVG in place of the tone's icon (Vue's icon slot). */
+    icon?: ReactNode;
+}
+export type PlinthCalloutProps = CalloutOptions & Omit<ComponentProps<'div'>, keyof CalloutOptions>;
+export declare function PlinthCallout({ tone, role, title, actions, icon, className, children, ...rest }: PlinthCalloutProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthCodeBlock.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type CodeBlockTab } from './code-block';
+interface CodeBlockOptions {
+    /** A file name or a short label above the code; it may hold a little markup (a badge). */
+    label?: ReactNode;
+    /** The highlighter's markup for the code (trusted, not escaped), in place of `children`. */
+    html?: string;
+    /** Language tabs (up to six), each with its own code; `children` is then not used. */
+    tabs?: CodeBlockTab[];
+    /** The tab that starts checked (later the browser keeps it); the first when unknown. */
+    selected?: string;
+    /** The tabs' accessible name. */
+    tabsLabel?: string;
+    /** Shows the copy button. */
+    copy?: boolean;
+    copyLabel?: string;
+    /** What the button and the status say for two seconds after copying. */
+    copiedLabel?: string;
+    /** The code was copied to the clipboard (Vue's `copied` event). */
+    onCopied?: (text: string) => void;
+}
+export type PlinthCodeBlockProps = CodeBlockOptions & Omit<ComponentProps<'div'>, keyof CodeBlockOptions>;
+export declare function PlinthCodeBlock({ id, label, html, tabs: allTabs, selected, tabsLabel, copy, copyLabel, copiedLabel, onCopied, className, children, ...rest }: PlinthCodeBlockProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthConfirmDialog.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps } from 'react';
+import { type ConfirmDialogKind, type ConfirmDialogTone } from './confirm-dialog';
+import { type DialogSidePhone } from './dialog';
+interface ConfirmDialogOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The question, and the dialog's accessible name. */
+    title: string;
+    /** What happens if the person confirms, and the dialog's accessible description. */
+    message: string;
+    /** What it asks for: only a yes, a phrase typed exactly, or the person's password. */
+    kind?: ConfirmDialogKind;
+    /** The phrase to type, for the type-to-confirm kind. */
+    phrase?: string;
+    /** The field's label; `:phrase` shows the phrase in it. Each kind has a default. */
+    fieldLabel?: string;
+    /** The confirm button's label. */
+    confirmLabel?: string;
+    /** The cancel button's label. */
+    cancelLabel?: string;
+    /** danger makes the confirm button the danger variant, for a destructive action. */
+    tone?: ConfirmDialogTone;
+    /** A message under the field, set by the app (a wrong password). */
+    error?: string;
+    /** The confirm button is busy while the app checks. */
+    busy?: boolean;
+    /** How it shows below 768px: centred, or a bottom sheet. */
+    sidePhone?: DialogSidePhone;
+}
+/**
+ * A confirmation dialog on a `<dialog>`: open it with a button that has `commandfor` and
+ * `command="show-modal"`, or with `showModal()` on a ref. `onSubmit` (it bubbles from the form)
+ * is the confirm, after the browser checked the field; `onClose` is the dialog's close event
+ * (Vue's `close`), with `returnValue` "confirm", "cancel" (Cancel) or "" (Escape).
+ */
+export type PlinthConfirmDialogProps = ConfirmDialogOptions & Omit<ComponentProps<'dialog'>, keyof ConfirmDialogOptions | 'children'>;
+export declare function PlinthConfirmDialog({ id, title, message, kind, phrase, fieldLabel, confirmLabel, cancelLabel, tone, error, busy, sidePhone, className, ...rest }: PlinthConfirmDialogProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTable.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface DataTableOptions {
+    /** The table's name, shown above it. Without it, name the table with aria-label. */
+    caption?: string;
+    /** The column headers, PlinthDataTableColumn elements (Vue's `head` slot). */
+    head?: ReactNode;
+}
+/** A table that becomes a card per row on a phone: `children` are its rows. */
+export type PlinthDataTableProps = DataTableOptions & Omit<ComponentProps<'table'>, keyof DataTableOptions>;
+export declare function PlinthDataTable({ caption, head, className, children, ...rest }: PlinthDataTableProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableCell.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import { type DataTableCellKind } from './data-table';
+interface DataTableCellOptions {
+    /** The column's name, shown before the value on a phone's card. */
+    label?: string;
+    /** What the cell is on a phone's card: a labelled field, the card's title, or its actions. */
+    kind?: DataTableCellKind;
+    /** Numbers: aligned to the end, with figures of one width. */
+    numeric?: boolean;
+    /** Hidden on a phone's card; shown from 768px up. */
+    hideOnPhone?: boolean;
+}
+export type PlinthDataTableCellProps = DataTableCellOptions & Omit<ComponentProps<'td'>, keyof DataTableCellOptions>;
+export declare function PlinthDataTableCell({ label, kind, numeric, hideOnPhone, className, children, ...rest }: PlinthDataTableCellProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableColumn.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { type DataTableSort } from './data-table';
+interface DataTableColumnOptions {
+    /** A sortable column's state, printed as aria-sort; put a PlinthDataTableSort in it. */
+    sort?: DataTableSort;
+    /** Numbers: aligned to the end, with figures of one width. */
+    numeric?: boolean;
+    /** Hidden on a phone's card; shown from 768px up. Give the column's cells the same. */
+    hideOnPhone?: boolean;
+}
+export type PlinthDataTableColumnProps = DataTableColumnOptions & Omit<ComponentProps<'th'>, keyof DataTableColumnOptions>;
+export declare function PlinthDataTableColumn({ sort, numeric, hideOnPhone, className, children, ...rest }: PlinthDataTableColumnProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableEmpty.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface DataTableEmptyOptions {
+    /** How many columns the table has; the empty cell spans them all. */
+    columns?: number | string;
+}
+/** The row in place of the rows when there are none: `children` say so. */
+export type PlinthDataTableEmptyProps = DataTableEmptyOptions & Omit<ComponentProps<'tr'>, keyof DataTableEmptyOptions>;
+export declare function PlinthDataTableEmpty({ columns, className, children, ...rest }: PlinthDataTableEmptyProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableRow.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface DataTableRowOptions {
+    /** A selectable row's state, printed as aria-selected; leave it out when rows can't be selected. */
+    selected?: boolean;
+}
+/** A row of PlinthDataTableCell elements. */
+export type PlinthDataTableRowProps = DataTableRowOptions & Omit<ComponentProps<'tr'>, keyof DataTableRowOptions>;
+export declare function PlinthDataTableRow({ selected, className, children, ...rest }: PlinthDataTableRowProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableSort.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+/** The sort button in a sortable column's header; the column's `sort` says its state. */
+export type PlinthDataTableSortProps = ComponentProps<'button'>;
+export declare function PlinthDataTableSort({ className, children, ...rest }: PlinthDataTableSortProps): import("react").JSX.Element;

package/packages/react/dist/PlinthDialog.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DialogSidePhone } from './dialog';
+interface DialogOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The heading, and the dialog's accessible name. */
+    title: string;
+    /** A line under the title, and the dialog's accessible description. */
+    description?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** Whether the close button, Escape and the backdrop close it; false makes an alert dialog. */
+    dismissible?: boolean;
+    /** How it shows below 768px: centred, or a bottom sheet. */
+    sidePhone?: DialogSidePhone;
+    /** The actions under the body (Vue's `footer` slot). */
+    footer?: ReactNode;
+}
+/**
+ * A `<dialog>`: open it with a button that has `commandfor` and `command="show-modal"`, or with
+ * `showModal()` on a ref. `onClose` is the dialog's close event (Vue's `close`): its buttons, the
+ * close button, Escape, the backdrop or `close()`.
+ */
+export type PlinthDialogProps = DialogOptions & Omit<ComponentProps<'dialog'>, keyof DialogOptions>;
+export declare function PlinthDialog({ id, title, description, closeLabel, dismissible, sidePhone, footer, className, children, ref, ...rest }: PlinthDialogProps): import("react").JSX.Element;
+export {};