@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/styles/theme.css

@@ -0,0 +1,542 @@
+/*
+ * Tailwind v4 theme configuration for `@epilot/spark-ui`.
+ *
+ * Replaces the legacy `tailwind.config.js`. Defines color scales, semantic
+ * tokens, radii, the dark-mode variant, and the `@source inline()` block that
+ * forces Spark's portal-compatible utility classes to be emitted.
+ */
+
+@custom-variant dark (&:where(.dark, .dark *, .dark-theme, .dark-theme *));
+
+/* Checkbox glyph micro-animations. The check `pathLength=1` normalizes the
+   stroke length to 1, so animating stroke-dashoffset 1→0 "draws" it in; the dash
+   pops in with a horizontal scale. `both` applies the start frame before the run
+   so the glyph never flashes fully-drawn on mount. */
+@theme {
+  --animate-check-draw: spark-check-draw 260ms ease-out both;
+  --animate-dash-pop: spark-dash-pop 180ms ease-out both;
+  --animate-dot-pop: spark-dot-pop 180ms ease-out both;
+}
+
+@keyframes spark-check-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes spark-dash-pop {
+  from {
+    opacity: 0;
+    transform: scaleX(0.3);
+  }
+
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes spark-dot-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* `inline` so color utilities emit the underlying var() chain (bg-spark-9 →
+   var(--spark-9)) and re-resolve per subtree — a mid-tree accent/neutral/style
+   override reaches components instead of freezing at :root. */
+@theme inline {
+  /* Discard Tailwind's default palette so only Spark scales are exposed */
+  --color-*: initial;
+
+  /* Spark brand scale */
+  --color-spark-1: var(--spark-1);
+  --color-spark-2: var(--spark-2);
+  --color-spark-3: var(--spark-3);
+  --color-spark-4: var(--spark-4);
+  --color-spark-5: var(--spark-5);
+  --color-spark-6: var(--spark-6);
+  --color-spark-7: var(--spark-7);
+  --color-spark-8: var(--spark-8);
+  --color-spark-9: var(--spark-9);
+  --color-spark-10: var(--spark-10);
+  --color-spark-11: var(--spark-11);
+  --color-spark-12: var(--spark-12);
+  --color-spark-a1: var(--spark-a1);
+  --color-spark-a2: var(--spark-a2);
+  --color-spark-a3: var(--spark-a3);
+  --color-spark-a4: var(--spark-a4);
+  --color-spark-a5: var(--spark-a5);
+  --color-spark-a6: var(--spark-a6);
+  --color-spark-a7: var(--spark-a7);
+  --color-spark-a8: var(--spark-a8);
+  --color-spark-a9: var(--spark-a9);
+  --color-spark-a10: var(--spark-a10);
+  --color-spark-a11: var(--spark-a11);
+  --color-spark-a12: var(--spark-a12);
+  --color-spark-contrast: var(--spark-contrast);
+
+  /* Slate */
+  --color-slate-1: var(--slate-1);
+  --color-slate-2: var(--slate-2);
+  --color-slate-3: var(--slate-3);
+  --color-slate-4: var(--slate-4);
+  --color-slate-5: var(--slate-5);
+  --color-slate-6: var(--slate-6);
+  --color-slate-7: var(--slate-7);
+  --color-slate-8: var(--slate-8);
+  --color-slate-9: var(--slate-9);
+  --color-slate-10: var(--slate-10);
+  --color-slate-11: var(--slate-11);
+  --color-slate-12: var(--slate-12);
+  --color-slate-a1: var(--slate-a1);
+  --color-slate-a2: var(--slate-a2);
+  --color-slate-a3: var(--slate-a3);
+  --color-slate-a4: var(--slate-a4);
+  --color-slate-a5: var(--slate-a5);
+  --color-slate-a6: var(--slate-a6);
+  --color-slate-a7: var(--slate-a7);
+  --color-slate-a8: var(--slate-a8);
+  --color-slate-a9: var(--slate-a9);
+  --color-slate-a10: var(--slate-a10);
+  --color-slate-a11: var(--slate-a11);
+  --color-slate-a12: var(--slate-a12);
+  --color-slate-contrast: var(--slate-contrast);
+
+  /* Mauve */
+  --color-mauve-1: var(--mauve-1);
+  --color-mauve-2: var(--mauve-2);
+  --color-mauve-3: var(--mauve-3);
+  --color-mauve-4: var(--mauve-4);
+  --color-mauve-5: var(--mauve-5);
+  --color-mauve-6: var(--mauve-6);
+  --color-mauve-7: var(--mauve-7);
+  --color-mauve-8: var(--mauve-8);
+  --color-mauve-9: var(--mauve-9);
+  --color-mauve-10: var(--mauve-10);
+  --color-mauve-11: var(--mauve-11);
+  --color-mauve-12: var(--mauve-12);
+  --color-mauve-a1: var(--mauve-a1);
+  --color-mauve-a2: var(--mauve-a2);
+  --color-mauve-a3: var(--mauve-a3);
+  --color-mauve-a4: var(--mauve-a4);
+  --color-mauve-a5: var(--mauve-a5);
+  --color-mauve-a6: var(--mauve-a6);
+  --color-mauve-a7: var(--mauve-a7);
+  --color-mauve-a8: var(--mauve-a8);
+  --color-mauve-a9: var(--mauve-a9);
+  --color-mauve-a10: var(--mauve-a10);
+  --color-mauve-a11: var(--mauve-a11);
+  --color-mauve-a12: var(--mauve-a12);
+  --color-mauve-contrast: var(--mauve-contrast);
+
+  /* Orange */
+  --color-orange-1: var(--orange-1);
+  --color-orange-2: var(--orange-2);
+  --color-orange-3: var(--orange-3);
+  --color-orange-4: var(--orange-4);
+  --color-orange-5: var(--orange-5);
+  --color-orange-6: var(--orange-6);
+  --color-orange-7: var(--orange-7);
+  --color-orange-8: var(--orange-8);
+  --color-orange-9: var(--orange-9);
+  --color-orange-10: var(--orange-10);
+  --color-orange-11: var(--orange-11);
+  --color-orange-12: var(--orange-12);
+  --color-orange-a1: var(--orange-a1);
+  --color-orange-a2: var(--orange-a2);
+  --color-orange-a3: var(--orange-a3);
+  --color-orange-a4: var(--orange-a4);
+  --color-orange-a5: var(--orange-a5);
+  --color-orange-a6: var(--orange-a6);
+  --color-orange-a7: var(--orange-a7);
+  --color-orange-a8: var(--orange-a8);
+  --color-orange-a9: var(--orange-a9);
+  --color-orange-a10: var(--orange-a10);
+  --color-orange-a11: var(--orange-a11);
+  --color-orange-a12: var(--orange-a12);
+  --color-orange-contrast: var(--orange-contrast);
+
+  /* Red */
+  --color-red-1: var(--red-1);
+  --color-red-2: var(--red-2);
+  --color-red-3: var(--red-3);
+  --color-red-4: var(--red-4);
+  --color-red-5: var(--red-5);
+  --color-red-6: var(--red-6);
+  --color-red-7: var(--red-7);
+  --color-red-8: var(--red-8);
+  --color-red-9: var(--red-9);
+  --color-red-10: var(--red-10);
+  --color-red-11: var(--red-11);
+  --color-red-12: var(--red-12);
+  --color-red-a1: var(--red-a1);
+  --color-red-a2: var(--red-a2);
+  --color-red-a3: var(--red-a3);
+  --color-red-a4: var(--red-a4);
+  --color-red-a5: var(--red-a5);
+  --color-red-a6: var(--red-a6);
+  --color-red-a7: var(--red-a7);
+  --color-red-a8: var(--red-a8);
+  --color-red-a9: var(--red-a9);
+  --color-red-a10: var(--red-a10);
+  --color-red-a11: var(--red-a11);
+  --color-red-a12: var(--red-a12);
+  --color-red-contrast: var(--red-contrast);
+
+  /* Green */
+  --color-green-1: var(--green-1);
+  --color-green-2: var(--green-2);
+  --color-green-3: var(--green-3);
+  --color-green-4: var(--green-4);
+  --color-green-5: var(--green-5);
+  --color-green-6: var(--green-6);
+  --color-green-7: var(--green-7);
+  --color-green-8: var(--green-8);
+  --color-green-9: var(--green-9);
+  --color-green-10: var(--green-10);
+  --color-green-11: var(--green-11);
+  --color-green-12: var(--green-12);
+  --color-green-a1: var(--green-a1);
+  --color-green-a2: var(--green-a2);
+  --color-green-a3: var(--green-a3);
+  --color-green-a4: var(--green-a4);
+  --color-green-a5: var(--green-a5);
+  --color-green-a6: var(--green-a6);
+  --color-green-a7: var(--green-a7);
+  --color-green-a8: var(--green-a8);
+  --color-green-a9: var(--green-a9);
+  --color-green-a10: var(--green-a10);
+  --color-green-a11: var(--green-a11);
+  --color-green-a12: var(--green-a12);
+  --color-green-contrast: var(--green-contrast);
+
+  /* Blue */
+  --color-blue-1: var(--blue-1);
+  --color-blue-2: var(--blue-2);
+  --color-blue-3: var(--blue-3);
+  --color-blue-4: var(--blue-4);
+  --color-blue-5: var(--blue-5);
+  --color-blue-6: var(--blue-6);
+  --color-blue-7: var(--blue-7);
+  --color-blue-8: var(--blue-8);
+  --color-blue-9: var(--blue-9);
+  --color-blue-10: var(--blue-10);
+  --color-blue-11: var(--blue-11);
+  --color-blue-12: var(--blue-12);
+  --color-blue-a1: var(--blue-a1);
+  --color-blue-a2: var(--blue-a2);
+  --color-blue-a3: var(--blue-a3);
+  --color-blue-a4: var(--blue-a4);
+  --color-blue-a5: var(--blue-a5);
+  --color-blue-a6: var(--blue-a6);
+  --color-blue-a7: var(--blue-a7);
+  --color-blue-a8: var(--blue-a8);
+  --color-blue-a9: var(--blue-a9);
+  --color-blue-a10: var(--blue-a10);
+  --color-blue-a11: var(--blue-a11);
+  --color-blue-a12: var(--blue-a12);
+  --color-blue-contrast: var(--blue-contrast);
+
+  /* Gray (alias of slate scale) */
+  --color-gray-1: var(--neutral-1);
+  --color-gray-2: var(--neutral-2);
+  --color-gray-3: var(--neutral-3);
+  --color-gray-4: var(--neutral-4);
+  --color-gray-5: var(--neutral-5);
+  --color-gray-6: var(--neutral-6);
+  --color-gray-7: var(--neutral-7);
+  --color-gray-8: var(--neutral-8);
+  --color-gray-9: var(--neutral-9);
+  --color-gray-10: var(--neutral-10);
+  --color-gray-11: var(--neutral-11);
+  --color-gray-12: var(--neutral-12);
+  --color-gray-a1: var(--neutral-a1);
+  --color-gray-a2: var(--neutral-a2);
+  --color-gray-a3: var(--neutral-a3);
+  --color-gray-a4: var(--neutral-a4);
+  --color-gray-a5: var(--neutral-a5);
+  --color-gray-a6: var(--neutral-a6);
+  --color-gray-a7: var(--neutral-a7);
+  --color-gray-a8: var(--neutral-a8);
+  --color-gray-a9: var(--neutral-a9);
+  --color-gray-a10: var(--neutral-a10);
+  --color-gray-a11: var(--neutral-a11);
+  --color-gray-a12: var(--neutral-a12);
+
+  /* Black / White alpha scales */
+  --color-black-a1: var(--black-a1);
+  --color-black-a2: var(--black-a2);
+  --color-black-a3: var(--black-a3);
+  --color-black-a4: var(--black-a4);
+  --color-black-a5: var(--black-a5);
+  --color-black-a6: var(--black-a6);
+  --color-black-a7: var(--black-a7);
+  --color-black-a8: var(--black-a8);
+  --color-black-a9: var(--black-a9);
+  --color-black-a10: var(--black-a10);
+  --color-black-a11: var(--black-a11);
+  --color-black-a12: var(--black-a12);
+  --color-black-contrast: var(--black-contrast);
+  --color-white-a1: var(--white-a1);
+  --color-white-a2: var(--white-a2);
+  --color-white-a3: var(--white-a3);
+  --color-white-a4: var(--white-a4);
+  --color-white-a5: var(--white-a5);
+  --color-white-a6: var(--white-a6);
+  --color-white-a7: var(--white-a7);
+  --color-white-a8: var(--white-a8);
+  --color-white-a9: var(--white-a9);
+  --color-white-a10: var(--white-a10);
+  --color-white-a11: var(--white-a11);
+  --color-white-a12: var(--white-a12);
+  --color-white-contrast: var(--white-contrast);
+
+  /*
+   * Semantic text tokens (suffixed names — bare `gray`, `accent`, `success`,
+   * `info` are emitted via `@utility` blocks below because their text/border
+   * DEFAULTs differ and Tailwind v4 unifies all colors under `--color-*`).
+   */
+  --color-gray-light: var(--neutral-a11);
+  --color-gray-contrast: #ffffff;
+  --color-gray-disabled: var(--neutral-a8);
+  --color-gray-active: var(--neutral-a9);
+
+  --color-accent-light: var(--spark-a11);
+  --color-accent-contrast: #ffffff;
+  --color-accent-active: var(--spark-a11);
+  --color-accent-hover: var(--spark-a11);
+  --color-accent-focus: var(--spark-a11);
+
+  --color-error: var(--red-a12);
+  --color-error-light: var(--red-a11);
+  --color-error-contrast: #ffffff;
+  --color-error-active: var(--red-a11);
+  --color-error-hover: var(--red-a11);
+  --color-error-focus: var(--red-a11);
+  --color-error-disabled: var(--red-a8);
+
+  --color-success: var(--green-a12);
+  --color-success-light: var(--green-a11);
+  --color-success-contrast: #ffffff;
+  --color-success-active: var(--green-a11);
+  --color-success-hover: var(--green-a11);
+  --color-success-focus: var(--green-a11);
+
+  --color-info: var(--blue-a12);
+  --color-info-light: var(--blue-a11);
+  --color-info-contrast: #ffffff;
+  --color-info-active: var(--blue-a11);
+  --color-info-hover: var(--blue-a11);
+  --color-info-focus: var(--blue-a11);
+
+  --color-warning: var(--orange-a12);
+  --color-warning-light: var(--orange-a11);
+  --color-warning-contrast: #ffffff;
+  --color-warning-active: var(--orange-a11);
+  --color-warning-hover: var(--orange-a11);
+  --color-warning-focus: var(--orange-a11);
+
+  /* Background-only semantic tokens */
+  --color-base-gray-surface: var(--neutral-a2);
+  --color-base-gray-soft: var(--neutral-a3);
+  --color-base-gray-solid: var(--neutral-9);
+  --color-base-gray-skeleton: var(--neutral-a5);
+  --color-base-accent-surface: var(--spark-background);
+  --color-base-accent-soft: var(--spark-a3);
+  --color-base-accent-solid: var(--spark-9);
+  --color-base-accent-skeleton: var(--spark-a5);
+  --color-base-error-soft: var(--red-a3);
+  --color-base-error-surface: var(--spark-background);
+  --color-base-error-solid: var(--red-9);
+  --color-base-success-soft: var(--green-a3);
+  --color-base-success-surface: var(--spark-background);
+  --color-base-success-solid: var(--green-9);
+  --color-base-info-soft: var(--blue-a3);
+  --color-base-info-surface: var(--spark-background);
+  --color-base-info-solid: var(--blue-9);
+  --color-base-warning-soft: var(--orange-a3);
+  --color-base-warning-surface: var(--spark-background);
+  --color-base-warning-solid: var(--orange-9);
+
+  --color-input-base: var(--spark-a3);
+  --color-input-base-hover: var(--spark-a4);
+  --color-dropdown-base: var(--neutral-2);
+  --color-dropdown-item-hover: var(--spark-a3);
+
+  /* Border-only UI tokens (non-conflicting names) */
+  --color-gray-ui: var(--neutral-a7);
+  --color-gray-ui-hover: var(--neutral-a8);
+  --color-gray-high-contrast: var(--neutral-a11);
+  --color-accent-ui: var(--spark-a7);
+  --color-accent-ui-hover: var(--spark-a8);
+  --color-accent-high-contrast: var(--spark-a11);
+  --color-success-ui: var(--green-a7);
+  --color-success-ui-hover: var(--green-a8);
+  --color-success-high-contrast: var(--green-a11);
+  --color-info-ui: var(--blue-a7);
+  --color-info-ui-hover: var(--blue-a8);
+  --color-info-high-contrast: var(--blue-a11);
+
+  /* Input border tokens */
+  --color-input: var(--spark-a7);
+  --color-input-gray: var(--neutral-a6);
+  --color-input-active: var(--spark-a8);
+  --color-input-valid: var(--green-a7);
+  --color-input-invalid: var(--red-a7);
+  --color-input-disabled: var(--neutral-a8);
+}
+
+/* Also `inline` so spacing/text/radius utilities re-resolve per subtree — a
+   mid-tree [data-spacing]/[data-scaling]/[data-radius] override reaches them
+   instead of freezing at :root. */
+@theme inline {
+  /* Spacing scale base (used by --spacing() function). Reads --spark-spacing
+     (the [data-spacing] density knob) composed with --spark-scaling (the
+     [data-scaling] zoom knob) — both multiply, so they stay independent. */
+  --spacing: calc(var(--spark-spacing, 0.25rem) * var(--spark-scaling, 1));
+
+  /* Font sizes scale with the [data-scaling] zoom (--spark-scaling). Tailwind's
+     paired --text-*--line-height are unitless ratios, so they scale too. */
+  --text-xs: calc(0.75rem * var(--spark-scaling, 1));
+  --text-sm: calc(0.875rem * var(--spark-scaling, 1));
+  --text-base: calc(1rem * var(--spark-scaling, 1));
+  --text-lg: calc(1.125rem * var(--spark-scaling, 1));
+  --text-xl: calc(1.25rem * var(--spark-scaling, 1));
+  --text-2xl: calc(1.5rem * var(--spark-scaling, 1));
+  --text-3xl: calc(1.875rem * var(--spark-scaling, 1));
+  --text-4xl: calc(2.25rem * var(--spark-scaling, 1));
+
+  /* Border radius */
+  --radius-sm: var(--spark-rounded-sm);
+  --radius-md: var(--spark-rounded-md);
+  --radius-lg: var(--spark-rounded-lg);
+  --radius-xl: var(--spark-rounded-xl);
+  --radius-2xl: var(--spark-rounded-2xl);
+  --radius-full: 9999px; /* true pill (standard Tailwind); was wired to --spark-rounded-full (0px) */
+  --radius-circle: 9999px; /* TODO: redundant with rounded-full now; migrate usages + remove */
+}
+
+/*
+ * Bare semantic names where the v3 config used a darker text shade and a
+ * lighter border shade. Tailwind v4's unified `--color-*` namespace can't
+ * express both, so emit the utilities explicitly. Variants (`hover:`,
+ * `focus-visible:`, etc.) are auto-generated from `@utility`.
+ */
+/* ECP parity: tailwindcss-safe-area's p-safe-offset-N (spacing + notch insets) */
+@utility p-safe-offset-* {
+  padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+  padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+  padding-bottom: calc(
+    env(safe-area-inset-bottom) + --spacing(--value(integer))
+  );
+  padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+}
+
+@utility text-gray {
+  color: var(--neutral-a12);
+}
+@utility border-gray {
+  border-color: var(--neutral-a6);
+}
+@utility text-accent {
+  color: var(--spark-a12);
+}
+@utility border-accent {
+  border-color: var(--spark-a6);
+}
+@utility text-success {
+  color: var(--green-a12);
+}
+@utility border-success {
+  border-color: var(--green-a6);
+}
+@utility text-info {
+  color: var(--blue-a12);
+}
+@utility border-info {
+  border-color: var(--blue-a6);
+}
+
+/* Default ring + ring-offset colors (matches v3 ringColor / ringOffsetColor DEFAULT) */
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    --tw-ring-color: var(--color-focus-root);
+    --tw-ring-offset-color: var(--neutral-1);
+    --tw-ring-offset-width: 2px;
+  }
+}
+
+/*
+ * Overlay / focus / selection / autofill — Radix-parity semantic tokens, derived
+ * from existing scales (additive; the --spark-* contract is untouched). Overlay is
+ * page-level (backdrops portal to <body>); the rest follow the accent per scope.
+ */
+@layer base {
+  :root,
+  .light,
+  .light-theme {
+    --color-overlay: var(--black-a6);
+  }
+
+  .dark,
+  .dark-theme {
+    --color-overlay: var(--black-a8);
+  }
+
+  :root,
+  .spark-theme {
+    /* --spark-10, not Radix's --focus-8: step-8 is ~2.3:1 on light surfaces, below WCAG 1.4.11 (3:1). */
+    --color-focus-root: var(--spark-10);
+    --color-selection-root: var(--spark-a5);
+    --color-autofill-root: var(--spark-a3);
+  }
+
+  .spark-theme ::selection {
+    background-color: var(--color-selection-root);
+  }
+
+  .spark-theme :-webkit-autofill,
+  .spark-theme :-webkit-autofill:hover,
+  .spark-theme :-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--neutral-12);
+    -webkit-box-shadow: 0 0 0 1000px var(--color-autofill-root) inset;
+    caret-color: var(--neutral-12);
+  }
+}
+
+/*
+ * Force semantic utility classes to be emitted regardless of source scanning
+ * (replaces the v3 `safelist`). Tailwind generates variants on demand from
+ * the base names below.
+ */
+@source inline(
+  '{text,bg,border}-{gray,accent,success,info}-{light,contrast,disabled,active,hover,focus,ui,ui-hover,high-contrast}'
+);
+@source inline('{text,bg,border}-{gray,accent,success,info,error,warning}');
+@source inline(
+  'text-{error,warning}-{light,contrast,disabled,active,hover,focus}'
+);
+@source inline('bg-base-{gray,accent}-{surface,soft,solid,skeleton}');
+@source inline('bg-base-{error,success,info,warning}-{surface,soft,solid}');
+@source inline(
+  'bg-{input-base,input-base-hover,dropdown-base,dropdown-item-hover}'
+);
+@source inline(
+  'border-{input,input-active,input-valid,input-invalid,input-disabled}'
+);
+@source inline('rounded-circle');