@womp/kookie-ui 0.25.2 → 0.26.0

package/src/components/text-area.css

@@ -354,14 +354,14 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Raised variant - uses --color-surface and shadow */
+/* Raised variant: the default. A flat soft fill with a faint edge, as in v2. A field casts no shadow. */
 .kui-TextAreaRoot:where(.kui-variant-raised) {
-  --text-area-border-width: 0px;
+  --text-area-border-width: 1px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
 
-  background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  background-color: var(--field-fill);
+  box-shadow: var(--control-chrome);
 
   & :where(.kui-TextAreaInput) {
     &::placeholder {
@@ -371,25 +371,25 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
-      background-color: var(--accent-2);
-      box-shadow: var(--shadow-2);
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled, :read-only)))) {
+      background-color: var(--field-fill-hover);
     }
   }
 
-  /* Focus state - accent ring with minimal inset */
-  &:where(:has(.kui-TextAreaInput:focus)) {
-    box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
-  }
-
   /* prettier-ignore */
   &:where(:has(.kui-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-    box-shadow: var(--shadow-2);
+    box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
-    background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+  /* Read-only keeps the value and drops the fill: nothing here takes input. */
+  &:where(:has(.kui-TextAreaInput:read-only:not(:disabled))) {
+    background-color: transparent;
+  }
+
+  &:where(:has(.kui-TextAreaInput:disabled)) {
+    background-color: var(--field-fill-disabled);
+    box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
   }
 }
 
@@ -447,7 +447,7 @@
 .kui-TextAreaRoot:where(:has(> .kui-TextAreaInput[aria-invalid='true'])) {
   --v-focus-color: var(--red-8);
 
-  &:where(.kui-variant-outline, .kui-variant-surface, .kui-variant-soft, .kui-variant-ghost) {
+  &:where(.kui-variant-raised, .kui-variant-outline, .kui-variant-surface, .kui-variant-soft, .kui-variant-ghost) {
     box-shadow: inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
@@ -456,21 +456,6 @@
       }
     }
   }
-
-  &:where(.kui-variant-raised) {
-    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-
-    @media (hover: hover) {
-      &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
-        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-      }
-    }
-
-    /* The raised focus ring is a box-shadow, not the outline */
-    &:where(:has(.kui-TextAreaInput:focus)) {
-      box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-    }
-  }
 }
 
 /***************************************************************************************************

package/src/components/text-field.css

@@ -392,29 +392,23 @@
   }
 }
 
-/* raised */
+/* raised: the default. A flat soft fill with a faint edge, as in v2. A field casts no shadow. */
 
 .kui-TextFieldRoot:where(.kui-variant-raised) {
   --text-field-selection-color: var(--focus-a5);
   --text-field-focus-color: var(--focus-8);
-  --text-field-border-width: 0px;
+  --text-field-border-width: 1px;
 
-  background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  background-color: var(--field-fill);
+  box-shadow: var(--control-chrome);
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
-      background-color: var(--accent-2);
-      box-shadow: var(--shadow-2);
+    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled, :read-only)))) {
+      background-color: var(--field-fill-hover);
     }
   }
 
-  /* Focus state - accent ring with minimal inset */
-  &:where(:has(.kui-TextFieldInput:focus)) {
-    box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
-  }
-
   & :where(.kui-TextFieldInput) {
     &::placeholder {
       color: var(--neutral-a10);
@@ -433,12 +427,17 @@
   &:where(:has(.kui-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     /* Blend with focus color */
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-    box-shadow: var(--shadow-2);
+    box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
-  &:where(:has(.kui-TextFieldInput:where(:disabled, :read-only))) {
-    /* Blend with grey */
-    background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+  /* Read-only keeps the value at full contrast and drops the fill: nothing here takes input. */
+  &:where(:has(.kui-TextFieldInput:read-only:not(:disabled))) {
+    background-color: transparent;
+  }
+
+  &:where(:has(.kui-TextFieldInput:disabled)) {
+    background-color: var(--field-fill-disabled);
+    box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
   }
 }
 
@@ -634,7 +633,7 @@
 .kui-TextFieldRoot:where(:has(> .kui-TextFieldInput[aria-invalid='true'])) {
   --text-field-focus-color: var(--red-8);
 
-  &:where(.kui-variant-outline, .kui-variant-surface, .kui-variant-soft, .kui-variant-ghost) {
+  &:where(.kui-variant-raised, .kui-variant-outline, .kui-variant-surface, .kui-variant-soft, .kui-variant-ghost) {
     box-shadow: inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
@@ -643,21 +642,6 @@
       }
     }
   }
-
-  &:where(.kui-variant-raised) {
-    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-
-    @media (hover: hover) {
-      &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
-        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-      }
-    }
-
-    /* The raised focus ring is a box-shadow, not the outline */
-    &:where(:has(.kui-TextFieldInput:focus)) {
-      box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-    }
-  }
 }
 
 /* Error message styling */

package/src/components/toolbar.css

@@ -80,7 +80,7 @@
 /* Over content, the well is a raised surface of its own, like a raised button beside it. */
 :where(.kui-Toolbar[data-backdrop]) .kui-ToolbarGroup {
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--control-chrome);
 }
 
 /* A button in the group is hosted: the group's height minus the inset on both sides, and a

package/src/styles/tokens/color.css

@@ -11,6 +11,30 @@
   /* The ground a raised surface sits on: one step below it, so a white card reads as lifted. */
   --color-ground: var(--neutral-1, var(--gray-1));
 
+  /*
+   * A field (text field, text area, select trigger) is a flat soft fill with a faint edge, as in v2.
+   * It casts no shadow. Hover moves the fill one step; disabled drops it one step and fades the edge.
+   */
+  --field-fill: var(--color-surface);
+  --field-fill-hover: var(--neutral-2);
+  --field-fill-disabled: var(--neutral-2);
+  --field-edge: var(--neutral-a3);
+  --field-edge-disabled: var(--neutral-a2);
+
+  /*
+   * The marks, as in v2. A switch track or slider rail is a well: a soft fill with no edge.
+   * A grip (switch thumb, slider thumb) is the surface colour, near-white in dark.
+   * An unchecked checkbox or radio is a soft fill with a hairline edge.
+   */
+  --color-track: var(--neutral-4);
+  --color-track-hover: var(--neutral-5);
+  --color-track-active: var(--neutral-6);
+  --color-thumb: var(--color-surface);
+  --color-mark: var(--neutral-4);
+  --color-mark-hover: var(--neutral-5);
+  --color-mark-active: var(--neutral-6);
+  --color-mark-edge: var(--neutral-a7);
+
   /*
    * The neutral scale, named as in v2. It defaults to the plain gray palette; a Theme grayColor
    * (mauve, olive, sage, sand, slate) points it at another palette below.
@@ -52,6 +76,11 @@
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
   --color-ground: var(--neutral-1, var(--gray-1));
+  --field-edge: var(--neutral-a4);
+  --color-thumb: var(--neutral-12, var(--gray-12));
+  --color-mark: var(--neutral-5, var(--gray-5));
+  --color-mark-hover: var(--neutral-6, var(--gray-6));
+  --color-mark-active: var(--neutral-7, var(--gray-7));
 }
 
 /*                                     */
@@ -1046,8 +1075,8 @@
   --accent-solid-selection-contrast: var(--accent-12);
   /* Thin marks (Tabs indicator): light yellow uses step 10 here */
   --accent-solid-indicator: var(--accent-indicator);
-  /* Thumb that sits on a solid fill (Switch, Slider) */
-  --accent-solid-thumb: white;
+  /* Thumb that sits on a solid fill (Switch, Slider): the grip colour */
+  --accent-solid-thumb: var(--color-thumb);
   /* Badge chip on a solid-highlighted row (Sidebar) */
   --accent-solid-badge: var(--accent-12);
   --accent-solid-badge-contrast: var(--accent-1);

package/src/styles/tokens/shadow.css

@@ -1,130 +1,58 @@
-/* prettier-ignore */
-:where(.kui-theme) {
-  --shadow-1:
-    0 0 0 0.25px var(--neutral-a6),
-    inset 0 1px 1px 0 var(--black-a2);
-
-  --shadow-2:
-    0 0 0 0.25px var(--neutral-a3),
-    0 1px 3px 0 var(--black-a2),
-    0 1px 2px -1px var(--black-a2);
-
-  --shadow-3:
-    0 0 0 0.25px var(--neutral-a6),
-    0 4px 6px -1px var(--black-a2),
-    0 2px 4px -2px var(--black-a2);
-
-  --shadow-4:
-    0 0 0 0.5px var(--neutral-a6),
-    0 10px 15px -3px var(--black-a3),
-    0 4px 6px -4px var(--black-a3);
-
-  --shadow-5:
-    0 0 0 0.5px var(--neutral-a6),
-    0 20px 25px -5px var(--black-a3),
-    0 8px 10px -6px var(--black-a3);
-
-  --shadow-6:
-    0 0 0 0.5px var(--neutral-a6),
-    0 25px 50px -12px var(--black-a5);
-}
+/*
+ * Shadows follow v2's two layers.
+ *
+ * The palette, --shadow-1 to --shadow-6, is a set of values. Components never read it.
+ * 1 is an inset well, 2 a small drop, 3 a floating drop, 4 a surface drop, 5 a wide drop,
+ * 6 the deepest drop. No step draws a ring: an edge is a border's job.
+ *
+ * Components read roles:
+ * --surface-chrome: a raised card or a pane.
+ * --control-chrome: a raised control or field, such as a button, a text field or a select.
+ * --control-chrome-active: the same control while pressed. The drop tightens toward the surface.
+ * --grip-chrome: the thumb of a switch or slider.
+ * --control-light: an optional light across a raised control's top half (a background image); none by default.
+ * --floating-chrome: a popover, menu, select list, hover card or tooltip.
+ * --dialog-chrome: a dialog. Like v2, a dialog is a surface that covers the page.
+ *
+ * Fields (text field, text area, select trigger) cast nothing. They are a flat soft fill.
+ */
 
 /* prettier-ignore */
-@supports (color: color-mix(in oklab, white, black)) {
-  :where(.kui-theme) {
-    --shadow-1:
-      0 0 0 0.25px var(--neutral-a6),
-      inset 0 1px 1px 0 var(--black-a2);
-
-    --shadow-2:
-      0 0 0 0.25px var(--neutral-a3),
-      0 1px 3px 0 var(--black-a2),
-      0 1px 2px -1px var(--black-a2);
-
-    --shadow-3:
-      0 0 0 0.25px var(--neutral-a6),
-      0 4px 6px -1px var(--black-a2),
-      0 2px 4px -2px var(--black-a2);
-
-    --shadow-4:
-      0 0 0 0.5px var(--neutral-a6),
-      0 10px 15px -3px var(--black-a3),
-      0 4px 6px -4px var(--black-a3);
-
-    --shadow-5:
-      0 0 0 0.5px var(--neutral-a6),
-      0 20px 25px -5px var(--black-a3),
-      0 8px 10px -6px var(--black-a3);
-
-    --shadow-6:
-      0 0 0 0.5px var(--neutral-a6),
-      0 25px 50px -12px var(--black-a5);
-  }
+:where(.kui-theme) {
+  --shadow-1: inset 0 1px 1px rgb(0 0 0 / 0.12), inset 0 2px 4px rgb(0 0 0 / 0.06);
+  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.1), 0 5px 14px -4px rgb(0 0 0 / 0.1), 0 12px 30px -8px rgb(0 0 0 / 0.09);
+  --shadow-3: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 22px -6px rgb(0 0 0 / 0.1), 0 18px 48px -14px rgb(0 0 0 / 0.09);
+  --shadow-4: 0 1px 2px rgb(0 0 0 / 0.1), 0 24px 64px -12px rgb(0 0 0 / 0.11);
+  --shadow-5: 0 1px 2px rgb(0 0 0 / 0.1), 0 12px 32px -8px rgb(0 0 0 / 0.11), 0 32px 80px -16px rgb(0 0 0 / 0.1);
+  --shadow-6: 0 1px 2px rgb(0 0 0 / 0.1), 0 16px 40px -10px rgb(0 0 0 / 0.12), 0 40px 100px -20px rgb(0 0 0 / 0.12);
+
+  --surface-chrome: var(--shadow-4);
+  --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
+  --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --control-light: none;
+  /* A grip: the thumb of a switch or slider. A small round object, so a tighter, darker cast. */
+  --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
+  --floating-chrome: var(--shadow-3);
+  --dialog-chrome: var(--surface-chrome);
 }
 
 /* prettier-ignore */
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
-  
-  --shadow-1:
-    inset 0 0 0 0.5px var(--neutral-a6),
-    inset 0 1px 1px 0 var(--black-a3);
-
-  --shadow-2:
-    0 0 0 0.5px var(--neutral-a6),
-    0 1px 3px 0 var(--black-a3),
-    0 1px 2px -1px var(--black-a3);
-
-  --shadow-3:
-    0 0 0 0.5px var(--neutral-a6),
-    0 4px 6px -1px var(--black-a3),
-    0 2px 4px -2px var(--black-a3);
-
-  --shadow-4:
-    0 0 0 0.5px var(--neutral-a6),
-    0 10px 15px -3px var(--black-a3),
-    0 4px 6px -4px var(--black-a3);
-
-  --shadow-5:
-    0 0 0 0.5px var(--neutral-a6),
-    0 20px 25px -5px var(--black-a3),
-    0 8px 10px -6px var(--black-a3);
-
-  --shadow-6:
-    0 0 0 0.5px var(--neutral-a6),
-    0 25px 50px -12px var(--black-a5);
-}
-
-/* prettier-ignore */
-@supports (color: color-mix(in oklab, white, black)) {
-  :is(.dark, .dark-theme),
-  :is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
-    --shadow-1:
-      inset 0 0 0 0.5px var(--neutral-a6),
-      inset 0 1px 1px 0 var(--black-a3);
-
-    --shadow-2:
-      0 0 0 0.5px var(--neutral-a6),
-      0 1px 3px 0 var(--black-a3),
-      0 1px 2px -1px var(--black-a3);
-
-    --shadow-3:
-      0 0 0 0.5px var(--neutral-a6),
-      0 4px 6px -1px var(--black-a3),
-      0 2px 4px -2px var(--black-a3);
-
-    --shadow-4:
-      0 0 0 0.5px var(--neutral-a6),
-      0 10px 15px -3px var(--black-a3),
-      0 4px 6px -4px var(--black-a3);
-
-    --shadow-5:
-      0 0 0 0.5px var(--neutral-a6),
-      0 20px 25px -5px var(--black-a3),
-      0 8px 10px -6px var(--black-a3);
-
-    --shadow-6:
-      0 0 0 0.5px var(--neutral-a6),
-      0 25px 50px -12px var(--black-a5);
-  }
+  --shadow-1: inset 0 1px 1px rgb(0 0 0 / 0.5), inset 0 2px 4px rgb(0 0 0 / 0.25);
+  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 5px 14px -4px rgb(0 0 0 / 0.36), 0 12px 30px -8px rgb(0 0 0 / 0.3);
+  --shadow-3: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px -6px rgb(0 0 0 / 0.36), 0 18px 48px -14px rgb(0 0 0 / 0.3);
+  --shadow-4: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 64px -12px rgb(0 0 0 / 0.45);
+  --shadow-5: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.4), 0 32px 80px -16px rgb(0 0 0 / 0.34);
+  --shadow-6: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -10px rgb(0 0 0 / 0.45), 0 40px 100px -20px rgb(0 0 0 / 0.4);
+
+  --surface-chrome: var(--shadow-4);
+  /* On a dark page a raised control's drop is barely visible, so the control also draws a faint
+     inner edge. v1 drew this edge with a ring in every shadow; now only the control role has it. */
+  --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
+  --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --control-light: none;
+  --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
+  --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);
+  --dialog-chrome: var(--surface-chrome);
 }