@epilot/spark-ui 0.18.2 → 0.20.0

package/dist/styles/spark-default.css

@@ -21,7 +21,7 @@
     --spark-8: #7aabe7;
     --spark-9: #005eb4;
     --spark-10: #004fa3;
-    --spark-11: #0f65bc;
+    --spark-11: #0862b8;
     --spark-12: #113157;
 
     --spark-a1: #0055aa03;
@@ -34,7 +34,7 @@
     --spark-a8: #005ed185;
     --spark-a9: #005eb4;
     --spark-a10: #004fa3;
-    --spark-a11: #005bb8f0;
+    --spark-a11: #005db6f7;
     --spark-a12: #00224bee;
 
     --spark-contrast: #ffffff;
@@ -44,104 +44,36 @@
     --spark-indicator: #005eb4;
     --spark-track: #005eb4;
 
-    /* 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;
+    /* Solid danger/success/warning fills only. Radix keeps --red/green/orange-*
+       (charts, tints, text), including steps 9/10. Its step 9 is too light for
+       white label text, and dark ink on it fails APCA, so solid style recipes
+       read these dedicated tokens instead of remapping --spark-9/10. */
+    --red-solid: #cf161c;
+    --red-solid-hover: #be0006;
     --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-solid: #147a49;
+    --green-solid-hover: #006b3c;
     --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-solid: #c84c00;
+    --orange-solid-hover: #b93d00;
     --orange-contrast: #fff;
     --orange-on-solid: #fff;
     --orange-surface: var(--orange-2);
+    /* Stock Radix light step 11 / a11 clears ~4.5:1 on pure white but fails on
+       soft fills (a3/a4 hover) — soft status chrome, warning-light, callout soft
+       actions. Keep the rest of the Radix ramp; darken ink only. */
+    --red-11: #be0006;
+    --red-a11: #be0006;
+    --green-11: #007040;
+    --green-a11: #007040;
+    --orange-11: #ab3000;
+    --orange-a11: #ab3000;
     /* 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
@@ -155,6 +87,12 @@
     --sage-contrast: #fff;
     --olive-contrast: #fff;
     --sand-contrast: #fff;
+    --slate-placeholder: #00071696;
+    --mauve-placeholder: #06001393;
+    --gray-placeholder: #00000092;
+    --sage-placeholder: #000a0797;
+    --olive-placeholder: #020a0097;
+    --sand-placeholder: #0a0a0098;
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
 
@@ -194,7 +132,7 @@
         --spark-8: oklch(73% 0.102 254.2);
         --spark-9: oklch(48.6% 0.1556 254.2);
         --spark-10: oklch(43.5% 0.1556 254.2);
-        --spark-11: oklch(51% 0.1556 254.2);
+        --spark-11: oklch(49.9% 0.1556 254.2);
         --spark-12: oklch(31.3% 0.077 254.2);
 
         --spark-a1: color(display-p3 0.0235 0.349 0.6745 / 0.012);
@@ -207,7 +145,7 @@
         --spark-a8: color(display-p3 0.0039 0.3098 0.7647 / 0.483);
         --spark-a9: color(display-p3 0 0.2471 0.6235 / 0.848);
         --spark-a10: color(display-p3 0 0.2118 0.5608 / 0.879);
-        --spark-a11: color(display-p3 0 0.2549 0.651 / 0.82);
+        --spark-a11: color(display-p3 0 0.251 0.6353 / 0.832);
         --spark-a12: color(display-p3 0 0.098 0.2549 / 0.899);
 
         --spark-contrast: #ffffff;
@@ -216,82 +154,6 @@
         --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);
       }
     }
   }
@@ -331,90 +193,30 @@
     --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-solid: #cf161c;
+    --red-solid-hover: #be0006;
     --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-solid: #147a49;
+    --green-solid-hover: #196940;
     --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-solid: #c84c00;
+    --orange-solid-hover: #b93d00;
     --orange-contrast: #fff;
     --orange-on-solid: #fff;
     --orange-surface: var(--orange-2);
+    /* Re-assert Radix dark step 11 so light-mode AA ink on :root does not win. */
+    --red-11: #ff9592;
+    --red-a11: #ff9592;
+    --green-11: #3dd68c;
+    --green-a11: #46fea5d4;
+    --orange-11: #ffa057;
+    --orange-a11: #ffa057;
     /* 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;
@@ -423,6 +225,12 @@
     --sage-contrast: #fff;
     --olive-contrast: #fff;
     --sand-contrast: #fff;
+    --slate-placeholder: #f0f8ffaa;
+    --mauve-placeholder: #f4f1ffae;
+    --gray-placeholder: #ffffffa2;
+    --sage-placeholder: #f3fffba4;
+    --olive-placeholder: #f6fff3a4;
+    --sand-placeholder: #fffef4a4;
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
 
@@ -480,82 +288,6 @@
         --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);
       }
     }
   }
@@ -671,6 +403,7 @@
     --neutral-a11: var(--slate-a11);
     --neutral-a12: var(--slate-a12);
     --neutral-contrast: var(--slate-contrast);
+    --neutral-placeholder: var(--slate-placeholder);
   }
 
   [data-neutral-color='slate'] {
@@ -699,6 +432,7 @@
     --neutral-a11: var(--slate-a11);
     --neutral-a12: var(--slate-a12);
     --neutral-contrast: var(--slate-contrast);
+    --neutral-placeholder: var(--slate-placeholder);
   }
 
   [data-neutral-color='mauve'] {
@@ -727,6 +461,7 @@
     --neutral-a11: var(--mauve-a11);
     --neutral-a12: var(--mauve-a12);
     --neutral-contrast: var(--mauve-contrast);
+    --neutral-placeholder: var(--mauve-placeholder);
   }
 
   [data-neutral-color='gray'] {
@@ -755,6 +490,7 @@
     --neutral-a11: var(--gray-a11);
     --neutral-a12: var(--gray-a12);
     --neutral-contrast: var(--gray-contrast);
+    --neutral-placeholder: var(--gray-placeholder);
   }
 
   [data-neutral-color='sage'] {
@@ -783,6 +519,7 @@
     --neutral-a11: var(--sage-a11);
     --neutral-a12: var(--sage-a12);
     --neutral-contrast: var(--sage-contrast);
+    --neutral-placeholder: var(--sage-placeholder);
   }
 
   [data-neutral-color='olive'] {
@@ -811,6 +548,7 @@
     --neutral-a11: var(--olive-a11);
     --neutral-a12: var(--olive-a12);
     --neutral-contrast: var(--olive-contrast);
+    --neutral-placeholder: var(--olive-placeholder);
   }
 
   [data-neutral-color='sand'] {
@@ -839,13 +577,14 @@
     --neutral-a11: var(--sand-a11);
     --neutral-a12: var(--sand-a12);
     --neutral-contrast: var(--sand-contrast);
+    --neutral-placeholder: var(--sand-placeholder);
   }
 
   /*
    * Spacing density presets (between-component only). Sets --spark-spacing,
    * which feeds --spark-layout-gap (the gap between siblings in layout /
-   * collection primitives) — NOT Tailwind's --spacing base, so component
-   * internals stay density-independent. Cascades. No attribute = default.
+   * collection primitives, plus Table row height) — NOT Tailwind's --spacing
+   * base. Cascades. No attribute = default.
    */
   [data-spacing='dense'] {
     --spark-spacing: 0.2rem;
@@ -862,7 +601,7 @@
   /* Between-component gap base: density × zoom. On .spark-theme too, so a nested
      scope re-resolves it from its own knobs (mirrors the --spark-rounded-* calcs
      above). Layout / collection primitives read this via
-     gap-[calc(var(--spark-layout-gap)*N)]; component internals never do. */
+     gap-[calc(var(--spark-layout-gap)*N)]; Table row height reads it too. */
   :root,
   .spark-theme {
     --spark-layout-gap: calc(
@@ -901,8 +640,8 @@
      accent, wrong contrast). A nested theme's own [data-style] still wins on specificity. */
   [data-style='solid'],
   :where([data-style='solid'] .spark-theme) {
-    --spark-style-bg: var(--spark-9);
-    --spark-style-bg-hover: var(--spark-10);
+    --spark-style-bg: var(--spark-solid, var(--spark-9));
+    --spark-style-bg-hover: var(--spark-solid-hover, var(--spark-10));
     /* fg intentionally has no *value* here — a solid foreground means different things
        per role, so each component should fall back to its own right contrast: Button
        *text* → --spark-contrast (AA-enforced 4.5:1), Checkbox *check glyph* →
@@ -1023,11 +762,16 @@
     --spark-a10: var(--red-a10);
     --spark-a11: var(--red-a11);
     --spark-a12: var(--red-a12);
+    --spark-solid: var(--red-solid);
+    --spark-solid-hover: var(--red-solid-hover);
     --spark-contrast: var(--red-contrast);
     --spark-on-solid: var(--red-on-solid);
     --spark-surface: var(--red-surface);
     --spark-indicator: var(--red-9);
     --spark-track: var(--red-9);
+    --spark-switch-track: var(--red-solid);
+    --spark-radio-ring: var(--red-solid);
+    --spark-radio-dot: var(--red-solid);
   }
 
   [data-accent-color='green'],
@@ -1056,11 +800,16 @@
     --spark-a10: var(--green-a10);
     --spark-a11: var(--green-a11);
     --spark-a12: var(--green-a12);
+    --spark-solid: var(--green-solid);
+    --spark-solid-hover: var(--green-solid-hover);
     --spark-contrast: var(--green-contrast);
     --spark-on-solid: var(--green-on-solid);
     --spark-surface: var(--green-surface);
     --spark-indicator: var(--green-9);
     --spark-track: var(--green-9);
+    --spark-switch-track: var(--green-solid);
+    --spark-radio-ring: var(--green-solid);
+    --spark-radio-dot: var(--green-solid);
   }
 
   [data-accent-color='orange'],
@@ -1089,11 +838,16 @@
     --spark-a10: var(--orange-a10);
     --spark-a11: var(--orange-a11);
     --spark-a12: var(--orange-a12);
+    --spark-solid: var(--orange-solid);
+    --spark-solid-hover: var(--orange-solid-hover);
     --spark-contrast: var(--orange-contrast);
     --spark-on-solid: var(--orange-on-solid);
     --spark-surface: var(--orange-surface);
     --spark-indicator: var(--orange-9);
     --spark-track: var(--orange-9);
+    --spark-switch-track: var(--orange-solid);
+    --spark-radio-ring: var(--orange-solid);
+    --spark-radio-dot: var(--orange-solid);
   }
 
   /*

package/dist/styles/theme.css

@@ -388,6 +388,7 @@
   --color-gray-light: var(--neutral-a11);
   --color-gray-contrast: #ffffff;
   --color-gray-disabled: var(--neutral-a8);
+  --color-gray-placeholder: var(--neutral-placeholder);
   --color-gray-active: var(--neutral-a9);
 
   --color-accent-light: var(--spark-a11);
@@ -425,6 +426,43 @@
   --color-warning-hover: var(--orange-a11);
   --color-warning-focus: var(--orange-a11);
 
+  /*
+   * Frozen public roles (Phase C). Paint with these; ladder stays --spark-*.
+   * Bare error/success/warning above stay legacy ink (a12) until a follow-up
+   * flips them — solid status fills use *-foreground pairs + base-*-solid.
+   */
+  --color-primary: var(--spark-9);
+  --color-primary-foreground: var(--spark-contrast);
+  --color-primary-soft: var(--spark-a3);
+  --color-primary-soft-foreground: var(--spark-a11);
+  --color-primary-hover: var(--spark-10);
+  --color-primary-soft-hover: var(--spark-a4);
+
+  --color-destructive: var(--red-solid, var(--red-9));
+  --color-destructive-foreground: var(--red-contrast);
+  --color-destructive-soft: var(--red-a3);
+  --color-destructive-soft-foreground: var(--red-a11);
+  --color-destructive-hover: var(--red-solid-hover, var(--red-10));
+  --color-destructive-soft-hover: var(--red-a4);
+
+  --color-error-foreground: var(--red-contrast);
+  --color-error-soft: var(--red-a3);
+  --color-error-soft-foreground: var(--red-a11);
+  --color-error-hover: var(--red-solid-hover, var(--red-10));
+  --color-error-soft-hover: var(--red-a4);
+
+  --color-success-foreground: var(--green-contrast);
+  --color-success-soft: var(--green-a3);
+  --color-success-soft-foreground: var(--green-a11);
+  --color-success-hover: var(--green-solid-hover, var(--green-10));
+  --color-success-soft-hover: var(--green-a4);
+
+  --color-warning-foreground: var(--orange-contrast);
+  --color-warning-soft: var(--orange-a3);
+  --color-warning-soft-foreground: var(--orange-a11);
+  --color-warning-hover: var(--orange-solid-hover, var(--orange-10));
+  --color-warning-soft-hover: var(--orange-a4);
+
   /* Background-only semantic tokens */
   --color-base-gray-surface: var(--neutral-a2);
   --color-base-gray-soft: var(--neutral-a3);
@@ -434,18 +472,18 @@
   --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-soft: var(--color-error-soft);
   --color-base-error-surface: var(--spark-background);
-  --color-base-error-solid: var(--red-9);
-  --color-base-success-soft: var(--green-a3);
+  --color-base-error-solid: var(--red-solid, var(--red-9));
+  --color-base-success-soft: var(--color-success-soft);
   --color-base-success-surface: var(--spark-background);
-  --color-base-success-solid: var(--green-9);
+  --color-base-success-solid: var(--green-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-soft: var(--color-warning-soft);
   --color-base-warning-surface: var(--spark-background);
-  --color-base-warning-solid: var(--orange-9);
+  --color-base-warning-solid: var(--orange-solid, var(--orange-9));
 
   --color-input-base: var(--spark-a3);
   --color-input-base-hover: var(--spark-a4);
@@ -483,8 +521,7 @@
   /* Spacing scale base (used by --spacing() function). Reads ONLY --spark-scaling
      (the [data-scaling] zoom knob), so component internals — padding, control
      sizes, icon glyphs — zoom but stay density-independent. The [data-spacing]
-     density knob is peeled off onto --spark-layout-gap (see spark-default.css),
-     so it affects the space BETWEEN components, not within them. */
+     density knob is peeled off onto --spark-layout-gap instead (see spark-default.css). */
   --spacing: calc(0.25rem * var(--spark-scaling, 1));
 
   /* Font sizes scale with the [data-scaling] zoom (--spark-scaling). Tailwind's
@@ -590,6 +627,7 @@
      * (3:1) for every accent in both appearances.
      */
     --color-focus-root: var(--spark-11);
+    --color-primary-focus: var(--spark-11);
     --color-selection-root: var(--spark-a5);
     --color-autofill-root: var(--spark-a3);
   }
@@ -619,6 +657,14 @@
 @source inline(
   'text-{error,warning}-{light,contrast,disabled,active,hover,focus}'
 );
+@source inline(
+  '{text,bg,border}-{primary,destructive}-{foreground,soft,soft-foreground,hover,soft-hover}'
+);
+@source inline('{text,bg,border}-{primary,destructive}');
+@source inline(
+  '{text,bg,border}-{error,success,warning}-{foreground,soft,soft-foreground,hover,soft-hover}'
+);
+@source inline('ring-{primary,destructive,error,success,warning}');
 @source inline('bg-base-{gray,accent}-{surface,soft,solid,skeleton}');
 @source inline('bg-base-{error,success,info,warning}-{surface,soft,solid}');
 @source inline(