@epilot/spark-ui 0.18.2 → 0.19.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;
@@ -69,7 +69,7 @@
     --red-8: #f08d82;
     --red-9: #cf161c;
     --red-10: #be0006;
-    --red-11: #d41f21;
+    --red-11: #be0006;
     --red-12: #671512;
     --red-a1: #ff000003;
     --red-a2: #ff1d0009;
@@ -81,7 +81,7 @@
     --red-a8: #e117007d;
     --red-a9: #cb0007e9;
     --red-a10: #be0006;
-    --red-a11: #ce0002e0;
+    --red-a11: #be0006;
     --red-a12: #5b0300ed;
     --red-contrast: #fff;
     --red-on-solid: #fff;
@@ -97,7 +97,7 @@
     --green-8: #69b787;
     --green-9: #147a49;
     --green-10: #006b3c;
-    --green-11: #1c7f4d;
+    --green-11: #007040;
     --green-12: #203a2a;
     --green-a1: #00c04004;
     --green-a2: #0099330a;
@@ -109,7 +109,7 @@
     --green-a8: #00853396;
     --green-a9: #006f3aeb;
     --green-a10: #006b3c;
-    --green-a11: #006f37e3;
+    --green-a11: #007040;
     --green-a12: #001e0cdf;
     --green-contrast: #fff;
     --green-on-solid: #fff;
@@ -125,7 +125,7 @@
     --orange-8: #ea936f;
     --orange-9: #c84c00;
     --orange-10: #b93d00;
-    --orange-11: #cb4f07;
+    --orange-11: #ab3000;
     --orange-12: #562e1e;
     --orange-a1: #c0400004;
     --orange-a2: #ff4f000d;
@@ -137,7 +137,7 @@
     --orange-a8: #da400090;
     --orange-a9: #c84c00;
     --orange-a10: #b93d00;
-    --orange-a11: #ca4a00f8;
+    --orange-a11: #ab3000;
     --orange-a12: #401200e1;
     --orange-contrast: #fff;
     --orange-on-solid: #fff;
@@ -155,6 +155,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 +200,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 +213,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;
@@ -228,7 +234,7 @@
         --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-11: oklch(49.9% 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);
@@ -240,7 +246,7 @@
         --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-a11: color(display-p3 0.6471 0.0039 0 / 0.899);
         --red-a12: color(display-p3 0.3059 0.0235 0 / 0.91);
 
         --green-1: oklch(99.4% 0.0041 156);
@@ -253,7 +259,7 @@
         --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-11: oklch(48% 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);
@@ -265,7 +271,7 @@
         --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-a11: color(display-p3 0 0.3098 0.1059 / 0.816);
         --green-a12: color(display-p3 0 0.0863 0.0235 / 0.851);
 
         --orange-1: oklch(99.2% 0.0025 42.62);
@@ -278,7 +284,7 @@
         --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-11: oklch(49.4% 0.1707 41.39);
         --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);
@@ -290,7 +296,7 @@
         --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-a11: color(display-p3 0.6196 0.2275 0);
         --orange-a12: color(display-p3 0.2157 0.0667 0 / 0.871);
       }
     }
@@ -423,6 +429,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);
 
@@ -671,6 +683,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 +712,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 +741,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 +770,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 +799,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 +828,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 +857,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 +881,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(

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);
@@ -483,8 +484,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

package/package.json

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