@womp/kookie-ui 0.25.1 → 0.26.0

package/src/components/_internal/base-button.css

@@ -217,7 +217,7 @@
   --v-bg-active-a: var(--accent-a5);
   --v-bg-pressed: var(--accent-5);
   --v-bg-pressed-a: var(--accent-a5);
-  --v-shadow-hover: var(--shadow-2);
+  --v-shadow-hover: var(--control-chrome);
 }
 
 /* Ghost variant palette */
@@ -369,12 +369,13 @@
   position: relative;
   color: var(--accent-ink);
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  background-image: var(--control-light);
+  box-shadow: var(--control-chrome);
 
   @media (hover: hover) {
     &:where(:hover:not([data-disabled], [aria-disabled='true'])) {
       background-color: var(--neutral-2);
-      box-shadow: var(--shadow-2);
+      box-shadow: var(--control-chrome);
     }
   }
 
@@ -382,7 +383,7 @@
   &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])),
   &:where([data-state='on']:not([data-disabled], [aria-disabled='true'])) {
     background-color: var(--neutral-3);
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--control-chrome-active);
   }
 
   @media (pointer: coarse) {
@@ -395,6 +396,7 @@
   &:where([data-disabled], [aria-disabled='true']) {
     color: var(--neutral-a8);
     background-color: var(--neutral-a3);
+    background-image: none;
     box-shadow: none;
     top: 0;
   }
@@ -404,13 +406,15 @@
    (gray resolves the three to step 12 and the filters carry the change) */
 .kui-BaseButton:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
+  background-image: var(--control-light);
   color: var(--accent-solid-contrast);
+  box-shadow: var(--control-chrome);
 
   @media (hover: hover) {
     &:where(:hover:not([data-disabled], [aria-disabled='true'])) {
       background-color: var(--accent-solid-hover);
       filter: var(--accent-solid-hover-filter);
-      box-shadow: var(--shadow-2);
+      box-shadow: var(--control-chrome);
     }
   }
 
@@ -422,6 +426,7 @@
   &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])) {
     background-color: var(--accent-solid-active);
     filter: var(--accent-solid-active-filter);
+    box-shadow: var(--control-chrome-active);
   }
 
   &:where([data-state='on']) {
@@ -439,6 +444,7 @@
   &:where([data-disabled], [aria-disabled='true']) {
     color: var(--neutral-a8);
     background-color: var(--neutral-a3);
+    background-image: none;
     box-shadow: none;
     filter: none;
     opacity: 1;

package/src/components/_internal/base-card.css

@@ -327,7 +327,7 @@
   --card-background-color: var(--color-surface);
   position: relative;
   top: var(--raised-elevation-offset);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--surface-chrome);
 
   &::before {
     background-color: var(--card-background-color);
@@ -345,7 +345,7 @@
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        box-shadow: var(--shadow-2);
+        box-shadow: var(--surface-chrome);
 
         &::before {
           background-color: var(--neutral-2);

package/src/components/_internal/base-checkbox.css

@@ -88,226 +88,66 @@
 
 /***************************************************************************************************
  *                                                                                                 *
- * VARIANTS                                                                                        *
+ * THE LOOK                                                                                        *
+ *                                                                                                 *
+ * One look, as in v2. Unchecked, the box is a soft fill with a hairline edge. Checked, it is the  *
+ * accent solid, the edge melts into the fill, and the glyph takes the solid's contrast colour.    *
+ * Hover is one step darker, press two. Disabled marks take neither.                               *
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* solid */
-
-.kui-BaseCheckboxRoot:where(.kui-variant-solid) {
-  &:where([data-state='unchecked']) {
-    &::before {
-      background-color: transparent;
-      box-shadow: inset 0 0 0 1px var(--accent-9);
-    }
-  }
+.kui-BaseCheckboxRoot {
+  --checkbox-fill: var(--color-mark);
+  --checkbox-fill-hover: var(--color-mark-hover);
+  --checkbox-fill-active: var(--color-mark-active);
+  --checkbox-edge: var(--color-mark-edge);
+  --checkbox-glyph: var(--accent-solid-contrast);
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
-    &::before {
-      background-color: var(--accent-solid);
-      box-shadow: inset 0 0 0 1px var(--accent-solid);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--accent-solid-contrast);
-    }
+    --checkbox-fill: var(--accent-solid);
+    --checkbox-fill-hover: var(--accent-solid-hover);
+    --checkbox-fill-active: var(--accent-solid-active);
+    --checkbox-edge: transparent;
   }
 
-  &:where(:disabled) {
-    &::before {
-      box-shadow: inset 0 0 0 1px var(--neutral-a6);
-      background-color: var(--neutral-a3);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--neutral-a8);
-    }
-  }
-}
-
-/* raised */
-
-.kui-BaseCheckboxRoot:where(.kui-variant-raised) {
-  position: relative;
-  top: var(--raised-elevation-offset);
-
-  &:where([data-state='unchecked']) {
-    &::before {
-      color: var(--accent-ink);
-      background-color: var(--color-surface);
-      box-shadow: var(--shadow-2);
-    }
-  }
-
-  &:where([data-state='checked'], [data-state='indeterminate']) {
-    &::before {
-      background-color: var(--accent-3);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--accent-ink);
-    }
+  /* Invalid, keyed on aria-invalid: unchecked, only the edge turns red; checked, the box takes
+   * the red wash and the glyph the red ink, rather than a red solid. */
+  &:where([aria-invalid='true']) {
+    --checkbox-edge: var(--red-8);
   }
-
-  &:where(:active:not(:disabled)) {
-    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-
-    &::before {
-      background-color: var(--accent-3);
-    }
+  &:where([aria-invalid='true']):where([data-state='checked'], [data-state='indeterminate']) {
+    --checkbox-fill: var(--red-3);
+    --checkbox-fill-hover: var(--red-4);
+    --checkbox-fill-active: var(--red-5);
+    --checkbox-edge: var(--red-8);
+    --checkbox-glyph: var(--red-11);
   }
 
-  &:where(:disabled) {
-    &::before {
-      background-color: var(--neutral-a3);
-      box-shadow: none;
-      background-image: none;
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--neutral-a8);
-    }
-    top: 0;
+  /* Disabled is a colour remap, never opacity. Dead outranks wrong, so this comes last. */
+  &:where(:disabled, [data-disabled]) {
+    --checkbox-fill: var(--neutral-a3);
+    --checkbox-fill-hover: var(--neutral-a3);
+    --checkbox-fill-active: var(--neutral-a3);
+    --checkbox-edge: var(--neutral-a6);
+    --checkbox-glyph: var(--neutral-a8);
   }
-}
-
-/* soft */
 
-.kui-BaseCheckboxRoot:where(.kui-variant-soft) {
   &::before {
-    background-color: var(--accent-3);
-  }
-
-  &:where([data-state='checked'], [data-state='indeterminate']) {
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--accent-ink);
-    }
-  }
-
-  &:where(:disabled) {
-    &::before {
-      background-color: var(--neutral-a3);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--neutral-a8);
-    }
-  }
-}
-
-/* outline */
-
-.kui-BaseCheckboxRoot:where(.kui-variant-outline) {
-  &:where([data-state='unchecked']) {
-    &::before {
-      box-shadow: inset 0 0 0 1px var(--accent-6);
-      color: var(--accent-ink);
-    }
+    background-color: var(--checkbox-fill);
+    box-shadow: inset 0 0 0 1px var(--checkbox-edge);
   }
 
-  &:where([data-state='checked'], [data-state='indeterminate']) {
-    &::before {
-      background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--accent-ink);
-    }
-  }
-
-  &:where(:disabled) {
-    &::before {
-      box-shadow: inset 0 0 0 1px var(--neutral-a7);
-      background-color: transparent;
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--neutral-a8);
-    }
-  }
-}
-
-/* surface */
-
-.kui-BaseCheckboxRoot:where(.kui-variant-surface) {
-  &:where([data-state='unchecked']) {
-    &::before {
-      background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-6);
-    }
-  }
-
-  &:where([data-state='checked'], [data-state='indeterminate']) {
-    &::before {
-      background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--accent-ink);
-    }
-  }
-
-  &:where(:disabled) {
-    &::before {
-      box-shadow: inset 0 0 0 1px var(--neutral-a6);
-      background-color: var(--neutral-a2);
-    }
-    & :where(.kui-BaseCheckboxIndicator) {
-      color: var(--neutral-a8);
-    }
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * INTERACTION                                                                                     *
- *                                                                                                 *
- * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-.kui-BaseCheckboxRoot {
-  --checkbox-unchecked-hover: var(--accent-a2);
-  --checkbox-unchecked-active: var(--accent-a3);
-  --checkbox-checked-hover: var(--accent-4);
-  --checkbox-checked-active: var(--accent-5);
-
-  &:where(.kui-variant-solid) {
-    --checkbox-checked-hover: var(--accent-solid-hover);
-    --checkbox-checked-active: var(--accent-solid-active);
-  }
-  &:where(.kui-variant-raised) {
-    --checkbox-unchecked-hover: var(--color-surface);
-    --checkbox-unchecked-active: var(--accent-3);
-  }
-  &:where(.kui-variant-soft) {
-    --checkbox-unchecked-hover: var(--accent-4);
-    --checkbox-unchecked-active: var(--accent-5);
-  }
-  &:where(.kui-variant-outline) {
-    --checkbox-checked-hover: var(--accent-3);
-    --checkbox-checked-active: var(--accent-4);
-  }
-  &:where(.kui-variant-surface) {
-    --checkbox-unchecked-hover: var(--accent-3);
-    --checkbox-unchecked-active: var(--accent-4);
+  & :where(.kui-BaseCheckboxIndicator) {
+    color: var(--checkbox-glyph);
   }
 
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled]))::before {
-      background-color: var(--checkbox-unchecked-hover);
-    }
-    &:where(:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
-      background-color: var(--checkbox-checked-hover);
+      background-color: var(--checkbox-fill-hover);
     }
   }
   &:where(:active:not(:disabled, [data-disabled]))::before {
-    background-color: var(--checkbox-unchecked-active);
-  }
-  &:where(:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
-    background-color: var(--checkbox-checked-active);
-  }
-  &:where(.kui-variant-solid:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
-    box-shadow: inset 0 0 0 1px var(--checkbox-checked-active);
-  }
-  @media (hover: hover) {
-    &:where(.kui-variant-solid:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
-      box-shadow: inset 0 0 0 1px var(--checkbox-checked-hover);
-    }
+    background-color: var(--checkbox-fill-active);
   }
 }
 
@@ -319,7 +159,7 @@
 
 /* The focus ring lives on Checkbox and CheckboxGroup. */
 .kui-BaseCheckboxRoot {
-  /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
+  /* Disabled is a colour remap (above), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
     cursor: default;
   }

package/src/components/_internal/base-checkbox.props.ts

@@ -3,15 +3,12 @@ import { colorPropDef } from '../../props/color.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseCheckboxPropDefs = {
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
 };
 
 export { baseCheckboxPropDefs };

package/src/components/_internal/base-dialog.css

@@ -50,7 +50,7 @@
   box-sizing: border-box;
 
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-6);
+  box-shadow: var(--dialog-chrome);
   outline: none;
 }
 

package/src/components/_internal/base-menu.css

@@ -11,7 +11,7 @@
   z-index: 200; /* Above dialogs (100) so menus inside dialogs/sheets work */
 
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-5);
+  box-shadow: var(--floating-chrome);
 
   /* Limit paint scope to the menu */
   contain: paint;
@@ -351,7 +351,8 @@
     outline-offset: 2px;
   }
 
-  .kui-BaseMenuContent {
+  /* A floating menu needs an edge; a sidebar's menu sits in a pane that already has one. */
+  .kui-BaseMenuContent:not(:where(.kui-SidebarContent)) {
     border: 1px solid CanvasText;
   }
 

package/src/components/_internal/base-radio.css

@@ -12,7 +12,7 @@
 
   isolation: isolate;
 
-  /* Disabled is a colour remap (per variant below), never opacity; the cursor stays default. */
+  /* Disabled is a colour remap (below), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
     cursor: default;
   }
@@ -73,201 +73,66 @@
 
 /***************************************************************************************************
  *                                                                                                 *
- * VARIANTS                                                                                        *
+ * THE LOOK                                                                                        *
+ *                                                                                                 *
+ * One look, as in v2, and the same as Checkbox. Unchecked, the circle is a soft fill with a       *
+ * hairline edge. Checked, it is the accent solid, the edge melts into the fill, and the dot takes *
+ * the solid's contrast colour. Hover is one step darker, press two. Disabled marks take neither.  *
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* solid */
-
-.kui-BaseRadioRoot:where(.kui-variant-solid) {
-  &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: transparent;
-    box-shadow: inset 0 0 0 1px var(--accent-9);
-  }
-  &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-solid);
-    box-shadow: inset 0 0 0 1px var(--accent-solid);
-  }
-  &::after {
-    background-color: var(--accent-solid-contrast);
-  }
-
-  &:where(:disabled, [data-disabled])::before {
-    box-shadow: inset 0 0 0 1px var(--neutral-a6);
-    background-color: var(--neutral-a3);
-  }
-  &:where(:disabled, [data-disabled])::after {
-    background-color: var(--neutral-a8);
-  }
-}
-
-/* raised */
-
-.kui-BaseRadioRoot:where(.kui-variant-raised) {
-  position: relative;
-  top: var(--raised-elevation-offset);
+.kui-BaseRadioRoot {
+  --radio-fill: var(--color-mark);
+  --radio-fill-hover: var(--color-mark-hover);
+  --radio-fill-active: var(--color-mark-active);
+  --radio-edge: var(--color-mark-edge);
+  --radio-dot: var(--accent-solid-contrast);
 
-  &:where(:not(:checked), [data-state='unchecked'])::before {
-    color: var(--accent-ink);
-    background-color: var(--color-surface);
-    box-shadow: var(--shadow-2);
+  &:where(:checked, [data-state='checked']) {
+    --radio-fill: var(--accent-solid);
+    --radio-fill-hover: var(--accent-solid-hover);
+    --radio-fill-active: var(--accent-solid-active);
+    --radio-edge: transparent;
   }
 
-  &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-3);
+  /* Invalid, keyed on aria-invalid: unchecked, only the edge turns red; checked, the circle takes
+   * the red wash and the dot the red ink, rather than a red solid. */
+  &:where([aria-invalid='true']) {
+    --radio-edge: var(--red-8);
   }
-  &::after {
-    background-color: var(--accent-ink);
+  &:where([aria-invalid='true']):where(:checked, [data-state='checked']) {
+    --radio-fill: var(--red-3);
+    --radio-fill-hover: var(--red-4);
+    --radio-fill-active: var(--red-5);
+    --radio-edge: var(--red-8);
+    --radio-dot: var(--red-11);
   }
 
-  &:where(:active:not(:disabled, [data-disabled])) {
-    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-
-    &::before {
-      background-color: var(--accent-3);
-    }
-  }
-
-  &:where(:disabled, [data-disabled])::before {
-    background-color: var(--neutral-a3);
-    box-shadow: none;
-    background-image: none;
-  }
-  &:where(:disabled, [data-disabled])::after {
-    background-color: var(--neutral-a8);
-  }
+  /* Disabled is a colour remap, never opacity. Dead outranks wrong, so this comes last. */
   &:where(:disabled, [data-disabled]) {
-    top: 0;
+    --radio-fill: var(--neutral-a3);
+    --radio-fill-hover: var(--neutral-a3);
+    --radio-fill-active: var(--neutral-a3);
+    --radio-edge: var(--neutral-a6);
+    --radio-dot: var(--neutral-a8);
   }
-}
 
-/* soft */
-
-.kui-BaseRadioRoot:where(.kui-variant-soft) {
   &::before {
-    background-color: var(--accent-3);
-  }
-  &::after {
-    background-color: var(--accent-ink);
-  }
-
-  &:where(:focus-visible)::before {
-    /* Use gray outline when component color is gray */
-    outline-color: var(--accent-a8);
-  }
-
-  &:where(:disabled, [data-disabled])::before {
-    background-color: var(--neutral-a3);
-  }
-  &:where(:disabled, [data-disabled])::after {
-    background-color: var(--neutral-a8);
-  }
-}
-
-/* outline */
-
-.kui-BaseRadioRoot:where(.kui-variant-outline) {
-  &:where(:not(:checked), [data-state='unchecked'])::before {
-    box-shadow: inset 0 0 0 1px var(--accent-6);
-    color: var(--accent-ink);
-  }
-
-  &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-  &::after {
-    background-color: var(--accent-ink);
-  }
-
-  &:where(:disabled, [data-disabled])::before {
-    box-shadow: inset 0 0 0 1px var(--neutral-a7);
-    background-color: transparent;
-  }
-  &:where(:disabled, [data-disabled])::after {
-    background-color: var(--neutral-a8);
-  }
-}
-
-/* surface */
-
-.kui-BaseRadioRoot:where(.kui-variant-surface) {
-  &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-6);
+    background-color: var(--radio-fill);
+    box-shadow: inset 0 0 0 1px var(--radio-edge);
   }
 
-  &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
-  }
   &::after {
-    background-color: var(--accent-ink);
-  }
-
-  &:where(:disabled, [data-disabled])::before {
-    box-shadow: inset 0 0 0 1px var(--neutral-a6);
-    background-color: var(--neutral-a2);
-  }
-  &:where(:disabled, [data-disabled])::after {
-    background-color: var(--neutral-a8);
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * INTERACTION                                                                                     *
- *                                                                                                 *
- * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-.kui-BaseRadioRoot {
-  --radio-unchecked-hover: var(--accent-a2);
-  --radio-unchecked-active: var(--accent-a3);
-  --radio-checked-hover: var(--accent-4);
-  --radio-checked-active: var(--accent-5);
-
-  &:where(.kui-variant-solid) {
-    --radio-checked-hover: var(--accent-solid-hover);
-    --radio-checked-active: var(--accent-solid-active);
-  }
-  &:where(.kui-variant-raised) {
-    --radio-unchecked-hover: var(--color-surface);
-    --radio-unchecked-active: var(--accent-3);
-  }
-  &:where(.kui-variant-soft) {
-    --radio-unchecked-hover: var(--accent-4);
-    --radio-unchecked-active: var(--accent-5);
-  }
-  &:where(.kui-variant-outline) {
-    --radio-checked-hover: var(--accent-3);
-    --radio-checked-active: var(--accent-4);
-  }
-  &:where(.kui-variant-surface) {
-    --radio-unchecked-hover: var(--accent-3);
-    --radio-unchecked-active: var(--accent-4);
+    background-color: var(--radio-dot);
   }
 
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled]))::before {
-      background-color: var(--radio-unchecked-hover);
-    }
-    &:where(:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
-      background-color: var(--radio-checked-hover);
-    }
-    &:where(.kui-variant-solid:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
-      box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
+      background-color: var(--radio-fill-hover);
     }
   }
   &:where(:active:not(:disabled, [data-disabled]))::before {
-    background-color: var(--radio-unchecked-active);
-  }
-  &:where(:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
-    background-color: var(--radio-checked-active);
-  }
-  &:where(.kui-variant-solid:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
-    box-shadow: inset 0 0 0 1px var(--radio-checked-active);
+    background-color: var(--radio-fill-active);
   }
 }
 

package/src/components/_internal/base-radio.props.ts

@@ -3,15 +3,12 @@ import { colorPropDef } from '../../props/color.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseRadioPropDefs = {
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
 };
 
 export { baseRadioPropDefs };