@epilot/spark-ui 0.18.0 → 0.18.2

package/dist/lib/container-chrome.js

@@ -16,7 +16,7 @@ const containerChrome = {
 	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
 	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
 	ghost: "[--spark-card-bg:transparent]",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",

package/dist/lib/container-chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
+{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}

package/dist/styles/index.css

@@ -84,33 +84,6 @@
 /* Tailwind animate plugin */
 @import 'tw-animate-css';
 
-/*
- * Portal parity: ECP ships a contrast-fixed light green-a11 (opaque, darker
- * than Radix stock #00713fde) for readable success-light text. Declared here
- * (after the imports, directly in layer base) -- inside spark-default.css it
- * would land in the nested base.base sub-layer and lose to Radix's direct
- * base rules (a layer's direct rules act as its implicit final sub-layer).
- */
-@layer base {
-  /* :where(:not(...)) keeps a dark root on the Radix dark value: a bare :root
-     here would beat the earlier .dark import at equal specificity */
-  :root:where(:not(.dark, .dark-theme)),
-  .light,
-  .light-theme {
-    --green-a11: #06784c;
-  }
-
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      :root:where(:not(.dark, .dark-theme)),
-      .light,
-      .light-theme {
-        --green-a11: color(display-p3 0.21 0.46 0.31);
-      }
-    }
-  }
-}
-
 /* Hit area utilities — Kian Bazarjani <https://bazza.dev> */
 @utility hit-area-debug {
   position: relative;

package/dist/styles/spark-default.css

@@ -44,20 +44,117 @@
     --spark-indicator: #005eb4;
     --spark-track: #005eb4;
 
-    /* Companion tokens for the colour axis (Button color="neutral"|"danger").
-       These reference gamut-aware scales / flip per appearance, so one declaration
-       covers sRGB + p3 and light + dark. --neutral-contrast tracks the neutral knob;
-       --red-contrast is white (clears 3:1 on the appearance-stable red-9). */
+    /* The colour axis (Button color="neutral"|"danger"|"success"|"warning"),
+       generated the same way as --spark-* above: generateRadixColors() seeded with
+       the brand hex, which the generator pins at step 9. Radix's stock step 9
+       (#e5484d/#30a46c/#f76b15) is too light to carry white text (WCAG 2.97-3.91),
+       and dark ink on it clears WCAG only by exploiting its blind spot for
+       saturated mid-tones (APCA Lc 38-46, under the ~60 body-text floor). Seeding
+       the generator with a darker step 9 satisfies both metrics (WCAG 4.68-5.55,
+       Lc 77-82) and re-derives 1-8/11-12 and every alpha step around it, so the
+       ramp stays internally consistent -- aN still composites to step N over the
+       canvas. -surface stays step 2, the static families' convention (see
+       neutralSparkVars in accent-theme.ts), not the generator's translucent
+       surface. Declared per appearance because Radix's `<scale>.css` and
+       `<scale>-dark.css` sit in this same layer. --neutral-* is untouched: it
+       tracks the neutral knob. spark-default-parity.test.ts re-derives every value
+       below from the same generator call, so drift fails the suite. */
+    --red-1: #fffcfc;
+    --red-2: #fff7f6;
+    --red-3: #ffebe8;
+    --red-4: #ffdbd5;
+    --red-5: #ffcdc5;
+    --red-6: #ffbcb4;
+    --red-7: #f8a89e;
+    --red-8: #f08d82;
+    --red-9: #cf161c;
+    --red-10: #be0006;
+    --red-11: #d41f21;
+    --red-12: #671512;
+    --red-a1: #ff000003;
+    --red-a2: #ff1d0009;
+    --red-a3: #ff220017;
+    --red-a4: #ff25002a;
+    --red-a5: #ff24003a;
+    --red-a6: #ff1c014b;
+    --red-a7: #ed1b0061;
+    --red-a8: #e117007d;
+    --red-a9: #cb0007e9;
+    --red-a10: #be0006;
+    --red-a11: #ce0002e0;
+    --red-a12: #5b0300ed;
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+
+    --green-1: #fbfefc;
+    --green-2: #f5fbf7;
+    --green-3: #e7f6ec;
+    --green-4: #d8f0e0;
+    --green-5: #c7e8d2;
+    --green-6: #b2dcc0;
+    --green-7: #94cca8;
+    --green-8: #69b787;
+    --green-9: #147a49;
+    --green-10: #006b3c;
+    --green-11: #1c7f4d;
+    --green-12: #203a2a;
+    --green-a1: #00c04004;
+    --green-a2: #0099330a;
+    --green-a3: #00a03618;
+    --green-a4: #009d3527;
+    --green-a5: #00973338;
+    --green-a6: #008c2f4d;
+    --green-a7: #0186306b;
+    --green-a8: #00853396;
+    --green-a9: #006f3aeb;
+    --green-a10: #006b3c;
+    --green-a11: #006f37e3;
+    --green-a12: #001e0cdf;
     --green-contrast: #fff;
     --green-on-solid: #fff;
     --green-surface: var(--green-2);
+
+    --orange-1: #fefcfb;
+    --orange-2: #fff6f2;
+    --orange-3: #ffebe2;
+    --orange-4: #ffd8c3;
+    --orange-5: #ffc9af;
+    --orange-6: #ffbca0;
+    --orange-7: #f5ab8d;
+    --orange-8: #ea936f;
+    --orange-9: #c84c00;
+    --orange-10: #b93d00;
+    --orange-11: #cb4f07;
+    --orange-12: #562e1e;
+    --orange-a1: #c0400004;
+    --orange-a2: #ff4f000d;
+    --orange-a3: #ff50001d;
+    --orange-a4: #ff5a003c;
+    --orange-a5: #ff530050;
+    --orange-a6: #ff4c005f;
+    --orange-a7: #e9440072;
+    --orange-a8: #da400090;
+    --orange-a9: #c84c00;
+    --orange-a10: #b93d00;
+    --orange-a11: #ca4a00f8;
+    --orange-a12: #401200e1;
     --orange-contrast: #fff;
     --orange-on-solid: #fff;
     --orange-surface: var(--orange-2);
-    --neutral-contrast: var(--neutral-12);
+    /* Solid-fill ink per neutral family, so [data-neutral-color] swaps the ink
+       with the ramp. Light step 9 is a desaturated mid-grey, where no ink
+       satisfies both metrics: white reads best at APCA Lc 65.9-66.5 but only
+       WCAG 3.30-3.36, while black -- the WCAG-optimal ink at 6.26-6.36 -- caps
+       at Lc 43.7, so Lc 60 is unreachable for anything that passes WCAG.
+       We take the perceptual win; the resulting axe color-contrast violations
+       are baselined deliberately in apps/docs/a11y/a11y-baseline.json. */
+    --slate-contrast: #fff;
+    --mauve-contrast: #fff;
+    --gray-contrast: #fff;
+    --sage-contrast: #fff;
+    --olive-contrast: #fff;
+    --sand-contrast: #fff;
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
 
@@ -119,6 +216,82 @@
         --spark-background: #ffffff;
         --spark-indicator: oklch(48.6% 0.1556 254.2);
         --spark-track: oklch(48.6% 0.1556 254.2);
+
+        /* Colour axis, wide-gamut twin (light). */
+        --red-1: oklch(99.4% 0.0033 27.27);
+        --red-2: oklch(98.3% 0.0088 27.27);
+        --red-3: oklch(95.6% 0.0226 27.27);
+        --red-4: oklch(92.8% 0.0508 27.27);
+        --red-5: oklch(89.6% 0.0666 27.27);
+        --red-6: oklch(85.7% 0.0802 27.27);
+        --red-7: oklch(80.7% 0.0963 27.27);
+        --red-8: oklch(74.5% 0.1219 27.27);
+        --red-9: oklch(54.4% 0.2125 27.27);
+        --red-10: oklch(49.8% 0.2125 27.27);
+        --red-11: oklch(55.8% 0.2125 27.27);
+        --red-12: oklch(33.9% 0.1158 27.27);
+        --red-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
+        --red-a2: color(display-p3 0.8941 0.1294 0.0235 / 0.036);
+        --red-a3: color(display-p3 0.8667 0.1451 0.0118 / 0.087);
+        --red-a4: color(display-p3 0.8549 0.149 0.0039 / 0.161);
+        --red-a5: color(display-p3 0.8588 0.1451 0.0039 / 0.22);
+        --red-a6: color(display-p3 0.8667 0.1294 0.0039 / 0.287);
+        --red-a7: color(display-p3 0.8 0.1098 0.0039 / 0.369);
+        --red-a8: color(display-p3 0.7608 0.102 0.0039 / 0.475);
+        --red-a9: color(display-p3 0.6941 0.0275 0 / 0.84);
+        --red-a10: color(display-p3 0.6471 0.0392 0 / 0.899);
+        --red-a11: color(display-p3 0.7137 0.0392 0 / 0.824);
+        --red-a12: color(display-p3 0.3059 0.0235 0 / 0.91);
+
+        --green-1: oklch(99.4% 0.0041 156);
+        --green-2: oklch(98.2% 0.0081 156);
+        --green-3: oklch(95.9% 0.0205 156);
+        --green-4: oklch(93.3% 0.0326 156);
+        --green-5: oklch(90% 0.0451 156);
+        --green-6: oklch(85.7% 0.0592 156);
+        --green-7: oklch(79.8% 0.0776 156);
+        --green-8: oklch(71.5% 0.1046 156);
+        --green-9: oklch(51.2% 0.1175 156);
+        --green-10: oklch(46.3% 0.1175 156);
+        --green-11: oklch(52.8% 0.1175 156);
+        --green-12: oklch(32.3% 0.0436 156);
+        --green-a1: color(display-p3 0.0235 0.6745 0.0235 / 0.012);
+        --green-a2: color(display-p3 0.0235 0.5647 0.1294 / 0.036);
+        --green-a3: color(display-p3 0.0078 0.5765 0.1529 / 0.083);
+        --green-a4: color(display-p3 0.0078 0.5333 0.1255 / 0.134);
+        --green-a5: color(display-p3 0.0078 0.5255 0.1451 / 0.197);
+        --green-a6: color(display-p3 0.0039 0.4824 0.1176 / 0.271);
+        --green-a7: color(display-p3 0.0039 0.4431 0.1176 / 0.373);
+        --green-a8: color(display-p3 0 0.4353 0.1176 / 0.514);
+        --green-a9: color(display-p3 0 0.3176 0.102 / 0.777);
+        --green-a10: color(display-p3 0 0.2863 0.0902 / 0.824);
+        --green-a11: color(display-p3 0 0.3294 0.102 / 0.761);
+        --green-a12: color(display-p3 0 0.0863 0.0235 / 0.851);
+
+        --orange-1: oklch(99.2% 0.0025 42.62);
+        --orange-2: oklch(98% 0.0121 42.62);
+        --orange-3: oklch(95.7% 0.0294 42.62);
+        --orange-4: oklch(92.1% 0.0654 42.62);
+        --orange-5: oklch(89.1% 0.0867 42.62);
+        --orange-6: oklch(85.6% 0.0924 42.62);
+        --orange-7: oklch(80.5% 0.0978 42.62);
+        --orange-8: oklch(74.4% 0.117 42.62);
+        --orange-9: oklch(57.6% 0.172 42.62);
+        --orange-10: oklch(53.2% 0.172 42.62);
+        --orange-11: oklch(58.6% 0.172 42.62);
+        --orange-12: oklch(34.9% 0.0649 42.62);
+        --orange-a1: color(display-p3 0.7569 0.2667 0.0235 / 0.016);
+        --orange-a2: color(display-p3 0.8392 0.2667 0.0235 / 0.048);
+        --orange-a3: color(display-p3 0.8941 0.3255 0.0039 / 0.11);
+        --orange-a4: color(display-p3 0.898 0.3373 0.0039 / 0.224);
+        --orange-a5: color(display-p3 0.898 0.3176 0.0039 / 0.299);
+        --orange-a6: color(display-p3 0.8902 0.298 0.0039 / 0.357);
+        --orange-a7: color(display-p3 0.8078 0.2588 0.0039 / 0.428);
+        --orange-a8: color(display-p3 0.7608 0.2431 0 / 0.538);
+        --orange-a9: color(display-p3 0.6863 0.2314 0 / 0.871);
+        --orange-a10: color(display-p3 0.6314 0.1843 0 / 0.891);
+        --orange-a11: color(display-p3 0.6941 0.2314 0 / 0.859);
+        --orange-a12: color(display-p3 0.2157 0.0667 0 / 0.871);
       }
     }
   }
@@ -158,16 +331,98 @@
     --spark-indicator: #005eb4;
     --spark-track: #005eb4;
 
+    /* Colour axis, dark twin -- see the light block above. */
+    --red-1: #000;
+    --red-2: #1c0a09;
+    --red-3: #400103;
+    --red-4: #5a0000;
+    --red-5: #6f0000;
+    --red-6: #840003;
+    --red-7: #a00f13;
+    --red-8: #cf151c;
+    --red-9: #cf161c;
+    --red-10: #be0006;
+    --red-11: #ff9083;
+    --red-12: #ffcdc4;
+    --red-a1: #00000000;
+    --red-a2: #ff5c521c;
+    --red-a3: #ff040c40;
+    --red-a4: #ff00005a;
+    --red-a5: #ff00006f;
+    --red-a6: #ff000684;
+    --red-a7: #ff181fa0;
+    --red-a8: #ff1a23cf;
+    --red-a9: #ff1b23cf;
+    --red-a10: #ff0008be;
+    --red-a11: #ff9083;
+    --red-a12: #ffcdc4;
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+
+    --green-1: #000;
+    --green-2: #0b140e;
+    --green-3: #0f291a;
+    --green-4: #0a3a22;
+    --green-5: #0f492b;
+    --green-6: #155936;
+    --green-7: #1a6a41;
+    --green-8: #1b7e4d;
+    --green-9: #147a49;
+    --green-10: #196940;
+    --green-11: #74ce97;
+    --green-12: #aaf4c5;
+    --green-a1: #00000000;
+    --green-a2: #8dffb314;
+    --green-a3: #5effa229;
+    --green-a4: #2cff963a;
+    --green-a5: #35ff9749;
+    --green-a6: #3dff9b59;
+    --green-a7: #3fff9d6a;
+    --green-a8: #37ff9c7e;
+    --green-a9: #2aff997a;
+    --green-a10: #3dff9c69;
+    --green-a11: #90ffbbce;
+    --green-a12: #b2ffcef4;
     --green-contrast: #fff;
     --green-on-solid: #fff;
     --green-surface: var(--green-2);
+
+    --orange-1: #000;
+    --orange-2: #190e09;
+    --orange-3: #391000;
+    --orange-4: #530900;
+    --orange-5: #651100;
+    --orange-6: #771f00;
+    --orange-7: #903000;
+    --orange-8: #bb3f00;
+    --orange-9: #c84c00;
+    --orange-10: #b93d00;
+    --orange-11: #ff9564;
+    --orange-12: #ffd2be;
+    --orange-a1: #00000000;
+    --orange-a2: #ff8f5c19;
+    --orange-a3: #ff480039;
+    --orange-a4: #ff1c0053;
+    --orange-a5: #ff2b0065;
+    --orange-a6: #ff430077;
+    --orange-a7: #ff550090;
+    --orange-a8: #ff5600bb;
+    --orange-a9: #ff6100c8;
+    --orange-a10: #ff5400b9;
+    --orange-a11: #ff9564;
+    --orange-a12: #ffd2be;
     --orange-contrast: #fff;
     --orange-on-solid: #fff;
     --orange-surface: var(--orange-2);
-    --neutral-contrast: var(--neutral-12);
+    /* Dark step 9 takes white on both metrics (WCAG 5.08-5.18, APCA 80.5-81.0);
+       step 12 loses on both (4.38-4.46, 69.2-69.8). No trade-off here. */
+    --slate-contrast: #fff;
+    --mauve-contrast: #fff;
+    --gray-contrast: #fff;
+    --sage-contrast: #fff;
+    --olive-contrast: #fff;
+    --sand-contrast: #fff;
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
 
@@ -225,6 +480,82 @@
         --spark-background: #000;
         --spark-indicator: oklch(48.6% 0.1556 254.2);
         --spark-track: oklch(48.6% 0.1556 254.2);
+
+        /* Colour axis, wide-gamut twin (dark). */
+        --red-1: oklch(0% 0.0193 27.27);
+        --red-2: oklch(17.3% 0.0312 27.27);
+        --red-3: oklch(23.5% 0.0933 27.27);
+        --red-4: oklch(28.1% 0.1391 27.27);
+        --red-5: oklch(32.7% 0.1546 27.27);
+        --red-6: oklch(38% 0.1615 27.27);
+        --red-7: oklch(44.9% 0.175 27.27);
+        --red-8: oklch(54.3% 0.2125 27.27);
+        --red-9: oklch(54.4% 0.2125 27.27);
+        --red-10: oklch(49.8% 0.2125 27.27);
+        --red-11: oklch(78.4% 0.2125 27.27);
+        --red-12: oklch(90.2% 0.0766 27.27);
+        --red-a1: color(display-p3 0 0 0 / 0);
+        --red-a2: color(display-p3 1 0.4235 0.3882 / 0.102);
+        --red-a3: color(display-p3 1 0.1216 0.1059 / 0.228);
+        --red-a4: color(display-p3 1 0.1373 0.0745 / 0.322);
+        --red-a5: color(display-p3 1 0.1608 0.0902 / 0.397);
+        --red-a6: color(display-p3 1 0.1765 0.1255 / 0.475);
+        --red-a7: color(display-p3 1 0.2314 0.2 / 0.577);
+        --red-a8: color(display-p3 1 0.2471 0.2157 / 0.746);
+        --red-a9: color(display-p3 1 0.2471 0.2157 / 0.746);
+        --red-a10: color(display-p3 1 0.2 0.149 / 0.683);
+        --red-a11: color(display-p3 1 0.6235 0.5608 / 0.942);
+        --red-a12: color(display-p3 1 0.8392 0.8 / 0.969);
+
+        --green-1: oklch(0% 0.0162 156);
+        --green-2: oklch(18.1% 0.0185 156);
+        --green-3: oklch(25.4% 0.0427 156);
+        --green-4: oklch(31% 0.0671 156);
+        --green-5: oklch(36.1% 0.0782 156);
+        --green-6: oklch(41.2% 0.0884 156);
+        --green-7: oklch(46.7% 0.1011 156);
+        --green-8: oklch(52.5% 0.1175 156);
+        --green-9: oklch(51.2% 0.1175 156);
+        --green-10: oklch(46.3% 0.1011 156);
+        --green-11: oklch(78% 0.1175 156);
+        --green-12: oklch(90.7% 0.098 156);
+        --green-a1: color(display-p3 0 0 0 / 0);
+        --green-a2: color(display-p3 0.6471 0.9961 0.698 / 0.079);
+        --green-a3: color(display-p3 0.5529 1 0.6745 / 0.157);
+        --green-a4: color(display-p3 0.4392 1 0.6314 / 0.224);
+        --green-a5: color(display-p3 0.4745 1 0.6392 / 0.283);
+        --green-a6: color(display-p3 0.4902 1 0.6471 / 0.346);
+        --green-a7: color(display-p3 0.502 1 0.6667 / 0.408);
+        --green-a8: color(display-p3 0.4941 1 0.6549 / 0.487);
+        --green-a9: color(display-p3 0.4784 1 0.6431 / 0.471);
+        --green-a10: color(display-p3 0.498 1 0.6627 / 0.404);
+        --green-a11: color(display-p3 0.6784 1 0.7608 / 0.8);
+        --green-a12: color(display-p3 0.7686 1 0.8275 / 0.95);
+
+        --orange-1: oklch(0% 0.0155 42.62);
+        --orange-2: oklch(17.7% 0.0224 42.62);
+        --orange-3: oklch(23.9% 0.0703 42.62);
+        --orange-4: oklch(28.3% 0.114 42.62);
+        --orange-5: oklch(32.7% 0.1271 42.62);
+        --orange-6: oklch(37.9% 0.1304 42.62);
+        --orange-7: oklch(44.7% 0.1406 42.62);
+        --orange-8: oklch(53.8% 0.172 42.62);
+        --orange-9: oklch(57.6% 0.172 42.62);
+        --orange-10: oklch(53.2% 0.172 42.62);
+        --orange-11: oklch(78.6% 0.172 42.62);
+        --orange-12: oklch(90.2% 0.0625 42.62);
+        --orange-a1: color(display-p3 0 0 0 / 0);
+        --orange-a2: color(display-p3 0.9922 0.6039 0.4314 / 0.091);
+        --orange-a3: color(display-p3 1 0.3686 0.0784 / 0.204);
+        --orange-a4: color(display-p3 1 0.2235 0.0824 / 0.299);
+        --orange-a5: color(display-p3 1 0.2745 0.098 / 0.361);
+        --orange-a6: color(display-p3 1 0.349 0.1216 / 0.428);
+        --orange-a7: color(display-p3 1 0.4157 0.1529 / 0.522);
+        --orange-a8: color(display-p3 1 0.4157 0.1686 / 0.679);
+        --orange-a9: color(display-p3 1 0.4549 0.1804 / 0.726);
+        --orange-a10: color(display-p3 1 0.4118 0.1647 / 0.671);
+        --orange-a11: color(display-p3 1 0.6392 0.4549 / 0.946);
+        --orange-a12: color(display-p3 1 0.8549 0.7765 / 0.973);
       }
     }
   }
@@ -339,6 +670,7 @@
     --neutral-a10: var(--slate-a10);
     --neutral-a11: var(--slate-a11);
     --neutral-a12: var(--slate-a12);
+    --neutral-contrast: var(--slate-contrast);
   }
 
   [data-neutral-color='slate'] {
@@ -366,6 +698,7 @@
     --neutral-a10: var(--slate-a10);
     --neutral-a11: var(--slate-a11);
     --neutral-a12: var(--slate-a12);
+    --neutral-contrast: var(--slate-contrast);
   }
 
   [data-neutral-color='mauve'] {
@@ -393,6 +726,7 @@
     --neutral-a10: var(--mauve-a10);
     --neutral-a11: var(--mauve-a11);
     --neutral-a12: var(--mauve-a12);
+    --neutral-contrast: var(--mauve-contrast);
   }
 
   [data-neutral-color='gray'] {
@@ -420,6 +754,7 @@
     --neutral-a10: var(--gray-a10);
     --neutral-a11: var(--gray-a11);
     --neutral-a12: var(--gray-a12);
+    --neutral-contrast: var(--gray-contrast);
   }
 
   [data-neutral-color='sage'] {
@@ -447,6 +782,7 @@
     --neutral-a10: var(--sage-a10);
     --neutral-a11: var(--sage-a11);
     --neutral-a12: var(--sage-a12);
+    --neutral-contrast: var(--sage-contrast);
   }
 
   [data-neutral-color='olive'] {
@@ -474,6 +810,7 @@
     --neutral-a10: var(--olive-a10);
     --neutral-a11: var(--olive-a11);
     --neutral-a12: var(--olive-a12);
+    --neutral-contrast: var(--olive-contrast);
   }
 
   [data-neutral-color='sand'] {
@@ -501,6 +838,7 @@
     --neutral-a10: var(--sand-a10);
     --neutral-a11: var(--sand-a11);
     --neutral-a12: var(--sand-a12);
+    --neutral-contrast: var(--sand-contrast);
   }
 
   /*
@@ -843,12 +1181,9 @@
     --spark-card-bg: var(--spark-card-c-solid, var(--neutral-1));
     --spark-card-border: transparent;
     --spark-card-border-width: 0px;
-    --spark-card-fg: var(--spark-card-c-contrast, var(--neutral-contrast));
-    --spark-card-fg-muted: var(
-      --spark-card-c-contrast,
-      var(--neutral-contrast)
-    );
-    --spark-card-icon: var(--spark-card-c-contrast, var(--neutral-contrast));
+    --spark-card-fg: var(--spark-card-c-contrast, var(--neutral-12));
+    --spark-card-fg-muted: var(--spark-card-c-contrast, var(--neutral-12));
+    --spark-card-icon: var(--spark-card-c-contrast, var(--neutral-12));
   }
 
   /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",
@@ -20,6 +20,22 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "typesVersions": {
+    "*": {
+      "utils/*": [
+        "dist/utils/*.d.ts"
+      ],
+      "hooks/*": [
+        "dist/hooks/*.d.ts"
+      ],
+      "lib/*": [
+        "dist/lib/*.d.ts"
+      ],
+      "*": [
+        "dist/components/*.d.ts"
+      ]
+    }
+  },
   "exports": {
     "./styles": "./dist/styles/index.css",
     "./spark-default": "./dist/styles/spark-default.css",
@@ -65,7 +81,7 @@
     "class-variance-authority": "^0.7.1",
     "cnfast": "^0.0.8",
     "colorjs.io": "^0.5.2",
-    "ictus": "^0.1.1",
+    "ictus": "^0.1.2",
     "vaul": "^1.1.2",
     "@epilot/spark-icons": "^0.0.2"
   },