@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/theme.css

@@ -0,0 +1,535 @@
+/* Generated by @jovertical/mise-design-system. Do not edit.
+ * Regenerate with `pnpm build:theme`, or `npx mise-theme` for a custom theme.
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* Faces, resolved from :root so a consumer can override them. */
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+  --font-mono: var(--font-mono);
+
+  /* Radius scale, derived from the single --radius in :root. */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  /* Semantic surfaces and ink. Every one resolves through :root / .dark. */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-info: var(--info);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info-foreground: var(--info-foreground);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Soft tints: each tone at 10%, behind ink of the same tone. */
+  --color-primary-soft: color-mix(in oklab, var(--primary) 10%, transparent);
+  --color-info-soft: color-mix(in oklab, var(--color-info) 10%, transparent);
+  --color-success-soft: color-mix(in oklab, var(--color-success) 10%, transparent);
+  --color-warning-soft: color-mix(in oklab, var(--color-warning) 10%, transparent);
+  --color-destructive-soft: color-mix(in oklab, var(--destructive) 10%, transparent);
+
+  /* Theme-responsive, declared under a --color-* name in :root. */
+  --color-table-header: var(--color-table-header);
+
+  /* Role ramps. The self-reference hands each utility a var() that :root
+     resolves, rather than baking in a literal. */
+  --color-base-50: var(--color-base-50);
+  --color-base-100: var(--color-base-100);
+  --color-base-200: var(--color-base-200);
+  --color-base-300: var(--color-base-300);
+  --color-base-400: var(--color-base-400);
+  --color-base-500: var(--color-base-500);
+  --color-base-600: var(--color-base-600);
+  --color-base-700: var(--color-base-700);
+  --color-base-800: var(--color-base-800);
+  --color-base-900: var(--color-base-900);
+  --color-base-950: var(--color-base-950);
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+  --color-info-50: var(--color-info-50);
+  --color-info-100: var(--color-info-100);
+  --color-info-200: var(--color-info-200);
+  --color-info-300: var(--color-info-300);
+  --color-info-400: var(--color-info-400);
+  --color-info-500: var(--color-info-500);
+  --color-info-600: var(--color-info-600);
+  --color-info-700: var(--color-info-700);
+  --color-info-800: var(--color-info-800);
+  --color-info-900: var(--color-info-900);
+  --color-info-950: var(--color-info-950);
+  --color-success-50: var(--color-success-50);
+  --color-success-100: var(--color-success-100);
+  --color-success-200: var(--color-success-200);
+  --color-success-300: var(--color-success-300);
+  --color-success-400: var(--color-success-400);
+  --color-success-500: var(--color-success-500);
+  --color-success-600: var(--color-success-600);
+  --color-success-700: var(--color-success-700);
+  --color-success-800: var(--color-success-800);
+  --color-success-900: var(--color-success-900);
+  --color-success-950: var(--color-success-950);
+  --color-warning-50: var(--color-warning-50);
+  --color-warning-100: var(--color-warning-100);
+  --color-warning-200: var(--color-warning-200);
+  --color-warning-300: var(--color-warning-300);
+  --color-warning-400: var(--color-warning-400);
+  --color-warning-500: var(--color-warning-500);
+  --color-warning-600: var(--color-warning-600);
+  --color-warning-700: var(--color-warning-700);
+  --color-warning-800: var(--color-warning-800);
+  --color-warning-900: var(--color-warning-900);
+  --color-warning-950: var(--color-warning-950);
+  --color-critical-50: var(--color-critical-50);
+  --color-critical-100: var(--color-critical-100);
+  --color-critical-200: var(--color-critical-200);
+  --color-critical-300: var(--color-critical-300);
+  --color-critical-400: var(--color-critical-400);
+  --color-critical-500: var(--color-critical-500);
+  --color-critical-600: var(--color-critical-600);
+  --color-critical-700: var(--color-critical-700);
+  --color-critical-800: var(--color-critical-800);
+  --color-critical-900: var(--color-critical-900);
+  --color-critical-950: var(--color-critical-950);
+
+  /* Structural measurements. */
+  --height-header: var(--header-height);
+  --width-sidebar: var(--sidebar-width);
+  --container-content: 96rem;
+  --spacing: var(--spacing);
+}
+
+:root {
+  /* Structure, and the one --radius the scale derives from. */
+  --sidebar-width: calc(var(--spacing) * 20);
+  --header-height: 64px;
+  --spacing: 0.25rem;
+  --radius: 0.625rem;
+
+  /* Faces. */
+  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-heading: ui-sans-serif, system-ui, 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;
+
+  /* Light scheme. --accent is a brand tint meaning "active nav row";
+     it is never a hover state. */
+  --background: oklch(1 0 0);
+  --foreground: var(--color-base-950);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--color-base-950);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--color-base-950);
+  --primary: var(--color-primary-600);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: var(--color-base-100);
+  --secondary-foreground: var(--color-base-900);
+  --muted: var(--color-base-100);
+  --muted-foreground: var(--color-base-600);
+  --accent: var(--color-primary-50);
+  --accent-foreground: var(--color-primary-700);
+  --destructive: var(--color-critical-600);
+  --info: var(--color-info-600);
+  --success: var(--color-success-600);
+  --warning: var(--color-warning-600);
+  --destructive-foreground: oklch(1 0 0);
+  --info-foreground: oklch(1 0 0);
+  --success-foreground: oklch(1 0 0);
+  --warning-foreground: oklch(1 0 0);
+  --border: var(--color-base-200);
+  --input: var(--color-base-200);
+  --ring: var(--color-primary-400);
+  --chart-1: oklch(70.4% 0.14 182.503);
+  --chart-2: oklch(70.5% 0.213 47.604);
+  --chart-3: oklch(66.7% 0.295 322.15);
+  --chart-4: oklch(76.8% 0.233 130.85);
+  --chart-5: oklch(68.5% 0.169 237.323);
+  --sidebar: var(--color-base-50);
+  --sidebar-foreground: var(--color-base-950);
+  --sidebar-primary: var(--color-primary-600);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--color-base-100);
+  --sidebar-accent-foreground: var(--color-base-900);
+  --sidebar-border: var(--color-base-200);
+  --sidebar-ring: var(--color-base-400);
+  --color-table-header: var(--color-base-50);
+
+  /* Role ramps, as literals: Tailwind prunes theme variables nobody uses. */
+  --color-base-50: oklch(98.5% 0 none);
+  --color-base-100: oklch(96.7% 0.001 286.375);
+  --color-base-200: oklch(92% 0.004 286.32);
+  --color-base-300: oklch(87.1% 0.006 286.286);
+  --color-base-400: oklch(70.5% 0.015 286.067);
+  --color-base-500: oklch(55.2% 0.016 285.938);
+  --color-base-600: oklch(44.2% 0.017 285.786);
+  --color-base-700: oklch(37% 0.013 285.805);
+  --color-base-800: oklch(27.4% 0.006 286.033);
+  --color-base-900: oklch(21% 0.006 285.885);
+  --color-base-950: oklch(14.1% 0.005 285.823);
+  --color-primary-50: oklch(96.2% 0.018 272.314);
+  --color-primary-100: oklch(93% 0.034 272.788);
+  --color-primary-200: oklch(87% 0.065 274.039);
+  --color-primary-300: oklch(78.5% 0.115 274.713);
+  --color-primary-400: oklch(67.3% 0.182 276.935);
+  --color-primary-500: oklch(58.5% 0.233 277.117);
+  --color-primary-600: oklch(51.1% 0.262 276.966);
+  --color-primary-700: oklch(45.7% 0.24 277.023);
+  --color-primary-800: oklch(39.8% 0.195 277.366);
+  --color-primary-900: oklch(35.9% 0.144 278.697);
+  --color-primary-950: oklch(25.7% 0.09 281.288);
+  --color-info-50: oklch(97.7% 0.013 236.62);
+  --color-info-100: oklch(95.1% 0.026 236.824);
+  --color-info-200: oklch(90.1% 0.058 230.902);
+  --color-info-300: oklch(82.8% 0.111 230.318);
+  --color-info-400: oklch(74.6% 0.16 232.661);
+  --color-info-500: oklch(68.5% 0.169 237.323);
+  --color-info-600: oklch(58.8% 0.158 241.966);
+  --color-info-700: oklch(50% 0.134 242.749);
+  --color-info-800: oklch(44.3% 0.11 240.79);
+  --color-info-900: oklch(39.1% 0.09 240.876);
+  --color-info-950: oklch(29.3% 0.066 243.157);
+  --color-success-50: oklch(97.9% 0.021 166.113);
+  --color-success-100: oklch(95% 0.052 163.051);
+  --color-success-200: oklch(90.5% 0.093 164.15);
+  --color-success-300: oklch(84.5% 0.143 164.978);
+  --color-success-400: oklch(76.5% 0.177 163.223);
+  --color-success-500: oklch(69.6% 0.17 162.48);
+  --color-success-600: oklch(59.6% 0.145 163.225);
+  --color-success-700: oklch(50.8% 0.118 165.612);
+  --color-success-800: oklch(43.2% 0.095 166.913);
+  --color-success-900: oklch(37.8% 0.077 168.94);
+  --color-success-950: oklch(26.2% 0.051 172.552);
+  --color-warning-50: oklch(98.7% 0.022 95.277);
+  --color-warning-100: oklch(96.2% 0.059 95.617);
+  --color-warning-200: oklch(92.4% 0.12 95.746);
+  --color-warning-300: oklch(87.9% 0.169 91.605);
+  --color-warning-400: oklch(82.8% 0.189 84.429);
+  --color-warning-500: oklch(76.9% 0.188 70.08);
+  --color-warning-600: oklch(66.6% 0.179 58.318);
+  --color-warning-700: oklch(55.5% 0.163 48.998);
+  --color-warning-800: oklch(47.3% 0.137 46.201);
+  --color-warning-900: oklch(41.4% 0.112 45.904);
+  --color-warning-950: oklch(27.9% 0.077 45.635);
+  --color-critical-50: oklch(97.1% 0.013 17.38);
+  --color-critical-100: oklch(93.6% 0.032 17.717);
+  --color-critical-200: oklch(88.5% 0.062 18.334);
+  --color-critical-300: oklch(80.8% 0.114 19.571);
+  --color-critical-400: oklch(70.4% 0.191 22.216);
+  --color-critical-500: oklch(63.7% 0.237 25.331);
+  --color-critical-600: oklch(57.7% 0.245 27.325);
+  --color-critical-700: oklch(50.5% 0.213 27.518);
+  --color-critical-800: oklch(44.4% 0.177 26.899);
+  --color-critical-900: oklch(39.6% 0.141 25.723);
+  --color-critical-950: oklch(25.8% 0.092 26.042);
+}
+
+.dark {
+  /* Near-black surfaces and translucent white borders. */
+  --background: var(--color-base-950);
+  --foreground: var(--color-base-50);
+  --card: var(--color-base-900);
+  --card-foreground: var(--color-base-50);
+  --popover: var(--color-base-900);
+  --popover-foreground: var(--color-base-50);
+  --primary: var(--color-primary-400);
+  --primary-foreground: var(--color-primary-950);
+  --secondary: var(--color-base-800);
+  --secondary-foreground: var(--color-base-50);
+  --muted: var(--color-base-800);
+  --muted-foreground: var(--color-base-400);
+  --accent: var(--color-primary-950);
+  --accent-foreground: var(--color-primary-200);
+  --destructive: var(--color-critical-400);
+  --info: var(--color-info-400);
+  --success: var(--color-success-400);
+  --warning: var(--color-warning-400);
+  --destructive-foreground: var(--color-critical-950);
+  --info-foreground: var(--color-info-950);
+  --success-foreground: var(--color-success-950);
+  --warning-foreground: var(--color-warning-950);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--color-primary-500);
+  --chart-1: oklch(77.7% 0.152 181.912);
+  --chart-2: oklch(75% 0.183 55.934);
+  --chart-3: oklch(74% 0.238 322.16);
+  --chart-4: oklch(84.1% 0.238 128.85);
+  --chart-5: oklch(74.6% 0.16 232.661);
+  --sidebar: var(--color-base-900);
+  --sidebar-foreground: var(--color-base-50);
+  --sidebar-primary: var(--color-primary-400);
+  --sidebar-primary-foreground: var(--color-primary-950);
+  --sidebar-accent: var(--color-base-800);
+  --sidebar-accent-foreground: var(--color-base-50);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: var(--color-base-600);
+  --color-table-header: var(--sidebar);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+}
+
+@media print {
+  [data-slot='sidebar'],
+  [data-slot='sidebar-gap'],
+  header {
+    display: none !important;
+  }
+
+  [data-slot='sidebar-inset'] {
+    margin: 0 !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot='table-container'] {
+    overflow: visible !important;
+  }
+
+  body {
+    background: #fff !important;
+  }
+}
+
+/**
+ * Component overrides: styles that extend components beyond what a class
+ * string can say. Appended to the generated theme in dist/theme.css.
+ *
+ * Adapted from the React package 2.23.0 src/styles/components.css.
+ */
+
+/* =============================================================================
+   Toasts – type-based colouring on the role ramps (success, critical, warning,
+   info). Adapted from the React package's toast block, which read
+   its own brand ramps; info read the brand ramp there and reads info here.
+   ============================================================================= */
+
+.mise-toast[data-type='success'] {
+  background: var(--color-success-50);
+  border-color: var(--color-success-300);
+  color: var(--color-success-900);
+}
+.mise-toast[data-type='success'] [data-icon] {
+  color: var(--color-success-600);
+}
+.dark .mise-toast[data-type='success'] {
+  background: var(--color-success-900);
+  border-color: var(--color-success-700);
+  /* Without this the title keeps the light rule's 900 and is painted in the
+     dark background's own colour. */
+  color: var(--color-success-100);
+}
+.dark .mise-toast[data-type='success'] [data-icon] {
+  color: var(--color-success-400);
+}
+
+.mise-toast[data-type='error'] {
+  background: var(--color-critical-50);
+  border-color: var(--color-critical-300);
+  color: var(--color-critical-900);
+}
+.mise-toast[data-type='error'] [data-icon] {
+  color: var(--color-critical-600);
+}
+.dark .mise-toast[data-type='error'] {
+  background: var(--color-critical-900);
+  border-color: var(--color-critical-700);
+  color: var(--color-critical-100);
+}
+.dark .mise-toast[data-type='error'] [data-icon] {
+  color: var(--color-critical-400);
+}
+
+.mise-toast[data-type='warning'] {
+  background: var(--color-warning-50);
+  border-color: var(--color-warning-300);
+  color: var(--color-warning-900);
+}
+.mise-toast[data-type='warning'] [data-icon] {
+  color: var(--color-warning-600);
+}
+.dark .mise-toast[data-type='warning'] {
+  background: var(--color-warning-900);
+  border-color: var(--color-warning-700);
+  color: var(--color-warning-100);
+}
+.dark .mise-toast[data-type='warning'] [data-icon] {
+  color: var(--color-warning-400);
+}
+
+.mise-toast[data-type='info'] {
+  background: var(--color-info-50);
+  border-color: var(--color-info-300);
+  color: var(--color-info-900);
+}
+.mise-toast[data-type='info'] [data-icon] {
+  color: var(--color-info-600);
+}
+.dark .mise-toast[data-type='info'] {
+  background: var(--color-info-900);
+  border-color: var(--color-info-700);
+  color: var(--color-info-100);
+}
+.dark .mise-toast[data-type='info'] [data-icon] {
+  color: var(--color-info-400);
+}
+
+/* The description stays muted and readable on a dark toast. */
+[data-sonner-toast] [data-content] {
+  gap: 1px;
+}
+
+[data-sonner-toaster] [data-description] {
+  color: var(--muted-foreground);
+}
+
+[data-sonner-toaster] [data-title] {
+  font-size: 14px;
+}
+
+/* =============================================================================
+   Disabled link buttons – an <a> has no :disabled, so Button sets
+   aria-disabled and drops its href instead. This draws it the way
+   `disabled:pointer-events-none disabled:opacity-50` draws a <button>.
+   ============================================================================= */
+
+[data-slot='button'][aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Scrollbars – thin, rounded, theme-aware, floating (no layout space)
+   ============================================================================= */
+
+/* Overlay / floating: scrollbar does not change container width when it appears.
+   (overflow: overlay is supported in Safari; in other browsers the thin 6px bar minimizes shift.) */
+html,
+body {
+  overflow: overlay;
+}
+
+/* Thin scrollbar styling – all elements */
+* {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted-foreground);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Utility: use on scroll containers so scrollbar doesn’t take layout space.
+   Scrollbar sits in the padding; negative margin keeps container width unchanged. */
+.scrollbar-floating {
+  margin-inline-end: -6px;
+  padding-inline-end: 6px;
+}
+.scrollbar-floating-x {
+  margin-block-end: -6px;
+  padding-block-end: 6px;
+}
+
+/* =============================================================================
+   Navigation progress – a highlight band moving along the bar. Adapted from
+   the React package's .navigation-progress-shimmer, under the mise- prefix.
+   ============================================================================= */
+
+@keyframes mise-navigation-progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+.mise-navigation-progress-shimmer {
+  width: 50%;
+  min-width: 160px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    oklch(1 0 0 / 0.25) 12%,
+    oklch(1 0 0 / 0.55) 20%,
+    oklch(1 0 0 / 0.25) 28%,
+    transparent 40%,
+    oklch(1 0 0 / 0.25) 52%,
+    oklch(1 0 0 / 0.55) 60%,
+    oklch(1 0 0 / 0.25) 68%,
+    transparent 100%
+  );
+  animation: mise-navigation-progress-shimmer 1.4s ease-in-out infinite;
+}

package/dist/tokens/cli.d.ts

@@ -0,0 +1,11 @@
+export interface CliResult {
+    code: number;
+    message: string;
+}
+/**
+ * Turns a consumer's `mise.theme.js` into a full replacement for `theme.css`
+ * (spec, Theming level 3). The component overrides ship next to this file in
+ * `dist/styles/`, so the output matches the packaged stylesheet line for line,
+ * apart from the theme.
+ */
+export declare function runThemeCli(argv: string[], cwd?: string): Promise<CliResult>;

package/dist/tokens/cli.js

@@ -0,0 +1,37 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { themeStylesheet } from './emit-web.js';
+const USAGE = 'Usage: mise-theme <config> -o <output.css>';
+/**
+ * A path rather than a `new URL(…)`, because a global `URL` that is not
+ * Node's (jsdom's, in a test) is rejected by `fs`.
+ */
+const COMPONENTS_CSS = join(dirname(fileURLToPath(import.meta.url)), '..', 'styles', 'components.css');
+/**
+ * Turns a consumer's `mise.theme.js` into a full replacement for `theme.css`
+ * (spec, Theming level 3). The component overrides ship next to this file in
+ * `dist/styles/`, so the output matches the packaged stylesheet line for line,
+ * apart from the theme.
+ */
+export async function runThemeCli(argv, cwd = process.cwd()) {
+    const [configPath, flag, outputPath] = argv;
+    if (!configPath || flag !== '-o' || !outputPath)
+        return { code: 1, message: USAGE };
+    try {
+        const module = await import(pathToFileURL(resolve(cwd, configPath)).href);
+        const config = module.default;
+        if (!config || typeof config !== 'object') {
+            return { code: 1, message: `${configPath} has no default export.` };
+        }
+        const overrides = await readFile(COMPONENTS_CSS, 'utf8');
+        const css = themeStylesheet(config, overrides);
+        const target = resolve(cwd, outputPath);
+        await mkdir(dirname(target), { recursive: true });
+        await writeFile(target, css);
+        return { code: 0, message: `${outputPath}: ${css.split('\n').length} lines` };
+    }
+    catch (error) {
+        return { code: 1, message: error instanceof Error ? error.message : String(error) };
+    }
+}

package/dist/tokens/config.d.ts

@@ -0,0 +1,39 @@
+import { type BaseName } from './presets.js';
+import { type HueName, type Ramp } from './tailwind-palette.js';
+export declare const STATUS_ROLES: readonly ["info", "success", "warning", "critical"];
+export type StatusRole = (typeof STATUS_ROLES)[number];
+/** Every ramp the theme emits into `:root`, as `--color-<role>-<step>`. */
+export declare const RAMP_ROLES: readonly ["base", "primary", "info", "success", "warning", "critical"];
+export type RampRole = (typeof RAMP_ROLES)[number];
+/** A Tailwind hue name, or a custom ramp with all eleven steps. */
+export type HueOrRamp = HueName | Ramp;
+export interface ThemeFonts {
+    sans: string;
+    heading: string;
+    mono: string;
+}
+/** Single-token escape hatches, written last so they win. */
+export type TokenOverrides = Record<`--${string}`, string>;
+export interface ThemeConfig {
+    base?: BaseName;
+    primary?: HueOrRamp;
+    status?: Partial<Record<StatusRole, HueOrRamp>>;
+    charts?: readonly [HueName, HueName, HueName, HueName, HueName];
+    radius?: string;
+    fonts?: Partial<ThemeFonts>;
+    light?: TokenOverrides;
+    dark?: TokenOverrides;
+}
+/** A config with every default filled in and every hue looked up. */
+export interface ResolvedTheme {
+    ramps: Record<RampRole, Ramp>;
+    charts: readonly [Ramp, Ramp, Ramp, Ramp, Ramp];
+    radius: string;
+    fonts: ThemeFonts;
+    light: TokenOverrides;
+    dark: TokenOverrides;
+}
+/** Identity, for type-checking a `mise.theme.js` the way `defineConfig` does for Vite. */
+export declare function defineTheme(config: ThemeConfig): ThemeConfig;
+export declare function resolveRamp(role: string, value: HueOrRamp): Ramp;
+export declare function resolveTheme(config?: ThemeConfig): ResolvedTheme;

package/dist/tokens/config.js

@@ -0,0 +1,46 @@
+import { BASES, defaultTheme } from './presets.js';
+import { STEPS, tailwindPalette } from './tailwind-palette.js';
+export const STATUS_ROLES = ['info', 'success', 'warning', 'critical'];
+/** Every ramp the theme emits into `:root`, as `--color-<role>-<step>`. */
+export const RAMP_ROLES = ['base', 'primary', ...STATUS_ROLES];
+/** Identity, for type-checking a `mise.theme.js` the way `defineConfig` does for Vite. */
+export function defineTheme(config) {
+    return config;
+}
+export function resolveRamp(role, value) {
+    if (typeof value === 'string') {
+        const ramp = tailwindPalette[value];
+        if (!ramp) {
+            throw new Error(`Unknown hue "${value}" for ${role}. Use a Tailwind hue name or a 50–950 ramp.`);
+        }
+        return ramp;
+    }
+    const missing = STEPS.filter((step) => !value[step]);
+    if (missing.length > 0) {
+        throw new Error(`The ${role} ramp is missing steps: ${missing.join(', ')}`);
+    }
+    return value;
+}
+export function resolveTheme(config = {}) {
+    const base = config.base ?? defaultTheme.base;
+    if (!BASES.includes(base)) {
+        throw new Error(`Unknown base "${base}". Use one of: ${BASES.join(', ')}.`);
+    }
+    const status = { ...defaultTheme.status, ...config.status };
+    const [c1, c2, c3, c4, c5] = (config.charts ?? defaultTheme.charts).map((hue) => resolveRamp('charts', hue));
+    return {
+        ramps: {
+            base: tailwindPalette[base],
+            primary: resolveRamp('primary', config.primary ?? defaultTheme.primary),
+            info: resolveRamp('status.info', status.info),
+            success: resolveRamp('status.success', status.success),
+            warning: resolveRamp('status.warning', status.warning),
+            critical: resolveRamp('status.critical', status.critical),
+        },
+        charts: [c1, c2, c3, c4, c5],
+        radius: config.radius ?? defaultTheme.radius,
+        fonts: { ...defaultTheme.fonts, ...config.fonts },
+        light: { ...config.light },
+        dark: { ...config.dark },
+    };
+}

package/dist/tokens/emit-web.d.ts

@@ -0,0 +1,11 @@
+import { type ThemeConfig } from './config.js';
+/** `:root` and `.dark` only, for swapping a theme at runtime, as Storybook's preset switcher does. */
+export declare function emitThemeVariables(config?: ThemeConfig): string;
+/** The whole generated theme, without the hand-written component overrides. */
+export declare function emitThemeCss(config?: ThemeConfig): string;
+/**
+ * The shipped stylesheet: the emitted theme, then the hand-written overrides.
+ * They are concatenated rather than joined by an `@import`, because CSS
+ * requires `@import` to come before every other rule.
+ */
+export declare function themeStylesheet(config: ThemeConfig, componentsCss: string): string;