@epilot/spark-ui 0.11.1 → 0.12.1

package/dist/lib/theme-types.js

@@ -1,2 +1,18 @@
 "use client";
-export {};
+//#region src/lib/theme-types.ts
+/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */
+const SPARK_NEUTRAL_FAMILIES = [
+	"slate",
+	"mauve",
+	"gray",
+	"sage",
+	"olive",
+	"sand"
+];
+function isSparkNeutralFamily(value) {
+	return SPARK_NEUTRAL_FAMILIES.includes(value);
+}
+//#endregion
+export { SPARK_NEUTRAL_FAMILIES, isSparkNeutralFamily };
+
+//# sourceMappingURL=theme-types.js.map

package/dist/lib/theme-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-types.js","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n  'slate',\n  'mauve',\n  'gray',\n  'sage',\n  'olive',\n  'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n  value: string,\n): value is SparkNeutralFamily {\n  return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n"],"mappings":";;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}

package/dist/styles/material-symbol.css

@@ -18,5 +18,8 @@
       'wght' 400,
       'GRAD' 0,
       'opsz' 20;
+    width: 1em;
+    height: 1em;
+    overflow: hidden;
   }
 }

package/dist/styles/spark-default.css

@@ -65,6 +65,21 @@
        scales don't define them (portal parity: ECP's generator used #fff). */
     --white-contrast: #ffffff;
     --black-contrast: #ffffff;
+
+    /* Elevation — an orthogonal container axis (Card/Box `elevated`), not a variant.
+       1 = raised card, 2 = popover/toast, 3 = dialog/select/menu/sheet. Values match
+       Tailwind's own shadow-sm/md/lg so a future migration of those is pixel-identical. */
+    --spark-shadow-1:
+      0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --spark-shadow-2:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --spark-shadow-3:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    /* The opaque surface a lifted container sits on — --neutral-1, the same fill every
+       floating surface (dialog/popover/sheet/toast) already uses. Deliberately not
+       --spark-background: that's an alpha-ramp compositing constant, not a surface (it's
+       brand blue under [data-inverted]), so a card bound to it would tint unexpectedly. */
+    --spark-elevated: var(--neutral-1);
   }
 
   @supports (color: color(display-p3 1 1 1)) {
@@ -155,6 +170,23 @@
     --neutral-contrast: var(--neutral-12);
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
+
+    /* Elevation, dark: shadow barely reads on a dark canvas, so a leading OPAQUE
+       hairline ring (not the translucent --neutral-a*, which would tint against
+       whatever backdrop sits behind it) is what actually defines the edge. */
+    --spark-shadow-1:
+      0 0 0 1px var(--neutral-6), 0 1px 3px 0 rgb(0 0 0 / 0.3),
+      0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --spark-shadow-2:
+      0 0 0 1px var(--neutral-6), 0 4px 6px -1px rgb(0 0 0 / 0.4),
+      0 2px 4px -2px rgb(0 0 0 / 0.4);
+    --spark-shadow-3:
+      0 0 0 1px var(--neutral-6), 0 10px 15px -3px rgb(0 0 0 / 0.5),
+      0 4px 6px -4px rgb(0 0 0 / 0.5);
+    /* --neutral-1 is one step above the contract-mandated pure #000 canvas
+       (#111113) — not enough headroom alone. --neutral-2 (#18191b) raises the
+       surface a further step, the same value Radix Themes' own dark panels use. */
+    --spark-elevated: var(--neutral-2);
   }
 
   @supports (color: color(display-p3 1 1 1)) {
@@ -882,6 +914,122 @@
     --spark-style-border: var(--spark-a11);
   }
 
+  /*
+   * Inverted — an ORTHOGONAL modifier, sibling to [data-high-contrast], for controls sitting
+   * ON a solid accent surface (a `<Card variant="solid" color="accent">`). There, a solid
+   * control paints the same --spark-9 as the card and vanishes.
+   *
+   * Unlike high-contrast, this needs NO per-style rules: it re-points the accent scale itself
+   * (the [data-accent-color] pattern), so all five [data-style] recipes — and their
+   * high-contrast variants — re-colour from it for free. One block instead of styles × modifiers.
+   *
+   * Step 9 swaps with its contrast ink, which makes the solid pair safe by construction:
+   * --spark-contrast is already the WCAG-checked ink for step 9.
+   *
+   * Fills (1-5) then run the OTHER way — toward the scrim, the lightness pole opposite the
+   * ink — because the ink is also the text colour, so a fill blended toward it drags the
+   * background into the foreground. Borders (6-8) keep stepping toward the ink from a solved
+   * 3:1 floor; a scrim-side border can't clear 1.4.11 on light accents. Measured across all
+   * 13 curated accents: text 4.81:1 worst case, borders 3.01:1 worst case.
+   *
+   * No `.dark` twin: the generator pins step 9 to the accent itself, so the surface — and
+   * therefore this whole scale — is identical in both appearances.
+   *
+   * Literals, not var(--spark-N) aliases: a scale can't re-point to itself without a cycle.
+   * These are the DEFAULT accent's values; <Theme accentColor inverted> emits its own inline.
+   */
+  [data-inverted] {
+    --spark-1: #0059aa;
+    --spark-2: #0053a0;
+    --spark-3: #004c93;
+    --spark-4: #014482;
+    --spark-5: #013b71;
+    --spark-6: #8cb6dd;
+    --spark-7: #afcce7;
+    --spark-8: #d1e2f2;
+    --spark-9: #fff;
+    --spark-10: #e0ecf6;
+    --spark-11: #fff;
+    --spark-12: #fff;
+    --spark-a1: #02060d0f;
+    --spark-a2: #02060d1f;
+    --spark-a3: #02060d33;
+    --spark-a4: #02060d4d;
+    --spark-a5: #02060d66;
+    --spark-a6: #ffffff8c;
+    --spark-a7: #ffffffaf;
+    --spark-a8: #ffffffd1;
+    --spark-a9: #fff;
+    --spark-a10: #ffffffe0;
+    --spark-a11: #fff;
+    --spark-a12: #fff;
+    --spark-contrast: #005eb4;
+    --spark-on-solid: #005eb4;
+    --spark-surface: #0053a0;
+    --spark-background: #005eb4;
+    --spark-indicator: #fff;
+    --spark-track: #fff;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      [data-inverted] {
+        --spark-1: oklch(46.7% 0.1487 254);
+        --spark-2: oklch(44.7% 0.1418 253.9);
+        --spark-3: oklch(42% 0.1324 253.8);
+        --spark-4: oklch(38.7% 0.1204 253.5);
+        --spark-5: oklch(35.2% 0.1082 253.2);
+        --spark-6: oklch(76.1% 0.0722 246.5);
+        --spark-7: oklch(83.3% 0.0498 246.1);
+        --spark-8: oklch(90.5% 0.0279 245.7);
+        --spark-9: oklch(100% 0 none);
+        --spark-10: oklch(93.7% 0.0185 245.6);
+        --spark-11: oklch(100% 0 none);
+        --spark-12: oklch(100% 0 none);
+        --spark-a1: color(display-p3 0.0118 0.0229 0.0479 / 0.06);
+        --spark-a2: color(display-p3 0.0118 0.0229 0.0479 / 0.12);
+        --spark-a3: color(display-p3 0.0118 0.0229 0.0479 / 0.2);
+        --spark-a4: color(display-p3 0.0118 0.0229 0.0479 / 0.3);
+        --spark-a5: color(display-p3 0.0118 0.0229 0.0479 / 0.4);
+        --spark-a6: color(display-p3 1 1 1 / 0.5487);
+        --spark-a7: color(display-p3 1 1 1 / 0.6843);
+        --spark-a8: color(display-p3 1 1 1 / 0.82);
+        --spark-a9: color(display-p3 1 1 1);
+        --spark-a10: color(display-p3 1 1 1 / 0.88);
+        --spark-a11: color(display-p3 1 1 1);
+        --spark-a12: color(display-p3 1 1 1);
+        --spark-contrast: #005eb4;
+        --spark-on-solid: #005eb4;
+        --spark-surface: oklch(44.7% 0.1418 253.9);
+        --spark-background: #005eb4;
+        --spark-indicator: oklch(100% 0 none);
+        --spark-track: oklch(100% 0 none);
+      }
+    }
+  }
+
+  /*
+   * An accent Card/Box nested inside [data-inverted] (task 16): soft/surface/outline/
+   * ghost fill from --spark-card-c-soft/-surface/-border, which read the accent scale
+   * and DO swing to the inverted extreme — but --spark-card-fg/-fg-muted stay hardcoded
+   * to --neutral-a12/-a11, because the normal (non-inverted) accent surface/soft fill is
+   * always a gentle Radix pastel, safe under neutral ink by construction. Inverted fills
+   * are not gentle — they're the same scrim/ink extremes invertAccentScale swaps in for
+   * controls — so the neutral-ink assumption breaks (measured 1.92–2.14:1). Re-pointing
+   * the ink to the accent scale here restores the exact pairing invertAccentScale already
+   * guarantees (measured 4.81–8.55:1 across the curated set) — the same fix `solid`
+   * already has for free, since its fg is accent-derived (--spark-card-c-contrast) to
+   * begin with. `solid` itself is untouched: its own utility-layer override
+   * ([--spark-card-fg:...] in container-chrome.ts) always outranks this components-layer
+   * rule regardless of selector specificity (AGENTS.md, "utilities beat components").
+   * --spark-card-icon already reads --spark-a11 unconditionally (all colours), so it
+   * needs no override here.
+   */
+  :where([data-inverted] [data-card-color='accent']) {
+    --spark-card-fg: var(--spark-a12);
+    --spark-card-fg-muted: var(--spark-a11);
+  }
+
   /*
    * Switch ON-track intensity (Radix-aligned). Unlike a checkbox (fill varies
    * per style), a switch's "on" needs a visibly filled track — so it reads

package/dist/styles/utilities.css

@@ -511,6 +511,15 @@
   &:where([dir='rtl'], [dir='rtl'] *) {
     animation-direction: reverse;
   }
+
+  /* Gated inside the utility, not as a separate `.shimmer` rule: a variant-scoped
+     application (attachment's `group-data-[state=uploading]:shimmer`) emits a
+     different class, which an outer `.shimmer` selector never matches. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
 }
 
 @utility shimmer-once {
@@ -547,11 +556,3 @@
 @utility shimmer-angle-* {
   --shimmer-angle: calc(--value(integer) * 1deg);
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .shimmer {
-    animation: none;
-    background-image: none;
-    -webkit-text-fill-color: currentColor;
-  }
-}

package/dist/{theme-types-1yB0d8mp.d.ts → theme-types-Bn5E15-P.d.cts}

@@ -1,7 +1,16 @@
 "use client";
 
 //#region src/lib/theme-types.d.ts
-type SparkNeutral = 'auto' | 'slate' | 'mauve' | 'gray' | 'sage' | 'olive' | 'sand';
+/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */
+declare const SPARK_NEUTRAL_FAMILIES: readonly ["slate", "mauve", "gray", "sage", "olive", "sand"];
+type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number];
+declare function isSparkNeutralFamily(value: string): value is SparkNeutralFamily;
+/**
+ * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by
+ * name; any other string is a literal color seed (regenerated against `backgroundColor`
+ * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).
+ */
+type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {});
 type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
 type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%';
 type SparkSpacing = 'dense' | 'default' | 'roomy';
@@ -25,5 +34,5 @@ type SparkLabelPosition = 'outset' | 'inset';
 type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost';
 type SparkInputColor = 'brand' | 'gray';
 //#endregion
-export { SparkLabelPosition as a, SparkScaling as c, SparkInputStyle as i, SparkSpacing as l, SparkCardVariant as n, SparkNeutral as o, SparkInputColor as r, SparkRadius as s, SparkCardColor as t, SparkStyle as u };
-//# sourceMappingURL=theme-types-1yB0d8mp.d.ts.map
+export { SparkInputStyle as a, SparkNeutralFamily as c, SparkSpacing as d, SparkStyle as f, SparkInputColor as i, SparkRadius as l, SparkCardColor as n, SparkLabelPosition as o, isSparkNeutralFamily as p, SparkCardVariant as r, SparkNeutral as s, SPARK_NEUTRAL_FAMILIES as t, SparkScaling as u };
+//# sourceMappingURL=theme-types-Bn5E15-P.d.cts.map

package/dist/{theme-types-1yB0d8mp.d.cts → theme-types-Bn5E15-P.d.ts}

@@ -1,7 +1,16 @@
 "use client";
 
 //#region src/lib/theme-types.d.ts
-type SparkNeutral = 'auto' | 'slate' | 'mauve' | 'gray' | 'sage' | 'olive' | 'sand';
+/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */
+declare const SPARK_NEUTRAL_FAMILIES: readonly ["slate", "mauve", "gray", "sage", "olive", "sand"];
+type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number];
+declare function isSparkNeutralFamily(value: string): value is SparkNeutralFamily;
+/**
+ * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by
+ * name; any other string is a literal color seed (regenerated against `backgroundColor`
+ * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).
+ */
+type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {});
 type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
 type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%';
 type SparkSpacing = 'dense' | 'default' | 'roomy';
@@ -25,5 +34,5 @@ type SparkLabelPosition = 'outset' | 'inset';
 type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost';
 type SparkInputColor = 'brand' | 'gray';
 //#endregion
-export { SparkLabelPosition as a, SparkScaling as c, SparkInputStyle as i, SparkSpacing as l, SparkCardVariant as n, SparkNeutral as o, SparkInputColor as r, SparkRadius as s, SparkCardColor as t, SparkStyle as u };
-//# sourceMappingURL=theme-types-1yB0d8mp.d.cts.map
+export { SparkInputStyle as a, SparkNeutralFamily as c, SparkSpacing as d, SparkStyle as f, SparkInputColor as i, SparkRadius as l, SparkCardColor as n, SparkLabelPosition as o, isSparkNeutralFamily as p, SparkCardVariant as r, SparkNeutral as s, SPARK_NEUTRAL_FAMILIES as t, SparkScaling as u };
+//# sourceMappingURL=theme-types-Bn5E15-P.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",