@womp/kookie-ui 0.20.0 → 0.22.0

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

@@ -1,4 +1,4 @@
-.rt-BaseCheckboxRoot {
+.kui-BaseCheckboxRoot {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -7,13 +7,8 @@
   flex-shrink: 0;
   cursor: var(--cursor-checkbox);
 
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--checkbox-size)));
-  --skeleton-height-override: var(--checkbox-size);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: var(--checkbox-border-radius);
+  /* Align with text line height when possible and fall back to own height */
+  height: var(--line-height, var(--checkbox-size));
 
   /*
    * Ceiling on the mark's corner, as a ratio of its own box.
@@ -40,7 +35,7 @@
   }
 }
 
-.rt-BaseCheckboxIndicator {
+.kui-BaseCheckboxIndicator {
   position: absolute;
   width: var(--checkbox-indicator-size);
   height: var(--checkbox-indicator-size);
@@ -67,23 +62,23 @@
  * clamped below a circle.
  */
 @breakpoints {
-  .rt-BaseCheckboxRoot {
-    &:where(.rt-r-size-1) {
+  .kui-BaseCheckboxRoot {
+    &:where(.kui-r-size-1) {
       --checkbox-size: var(--mark-1, calc(16px * var(--scale)));
       --checkbox-indicator-size: calc(10px * var(--scale));
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --checkbox-size: var(--mark-2, calc(20px * var(--scale)));
       --checkbox-indicator-size: calc(12px * var(--scale));
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --checkbox-size: var(--mark-3, calc(24px * var(--scale)));
       --checkbox-indicator-size: calc(14px * var(--scale));
       --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --checkbox-size: var(--mark-4, calc(26px * var(--scale)));
       --checkbox-indicator-size: calc(16px * var(--scale));
       --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
@@ -99,7 +94,7 @@
 
 /* solid */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-solid) {
+.kui-BaseCheckboxRoot:where(.kui-variant-solid) {
   &:where([data-state='unchecked']) {
     &::before {
       background-color: transparent;
@@ -112,32 +107,32 @@
       background-color: var(--accent-solid);
       box-shadow: inset 0 0 0 1px var(--accent-solid);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-solid-contrast);
     }
   }
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-      background-color: var(--gray-a3);
+      box-shadow: inset 0 0 0 1px var(--neutral-a6);
+      background-color: var(--neutral-a3);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--gray-a8);
+    & :where(.kui-BaseCheckboxIndicator) {
+      color: var(--neutral-a8);
     }
   }
 }
 
 /* raised */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-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-solid);
+      background-color: var(--color-surface);
       box-shadow: var(--shadow-2);
     }
   }
@@ -146,7 +141,7 @@
     &::before {
       background-color: var(--accent-3);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-ink);
     }
   }
@@ -161,12 +156,12 @@
 
   &:where(:disabled) {
     &::before {
-      background-color: var(--gray-a3);
+      background-color: var(--neutral-a3);
       box-shadow: none;
       background-image: none;
     }
-    & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--gray-a8);
+    & :where(.kui-BaseCheckboxIndicator) {
+      color: var(--neutral-a8);
     }
     top: 0;
   }
@@ -174,30 +169,30 @@
 
 /* soft */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-soft) {
+.kui-BaseCheckboxRoot:where(.kui-variant-soft) {
   &::before {
     background-color: var(--accent-3);
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-ink);
     }
   }
 
   &:where(:disabled) {
     &::before {
-      background-color: var(--gray-a3);
+      background-color: var(--neutral-a3);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--gray-a8);
+    & :where(.kui-BaseCheckboxIndicator) {
+      color: var(--neutral-a8);
     }
   }
 }
 
 /* outline */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-outline) {
+.kui-BaseCheckboxRoot:where(.kui-variant-outline) {
   &:where([data-state='unchecked']) {
     &::before {
       box-shadow: inset 0 0 0 1px var(--accent-6);
@@ -210,25 +205,25 @@
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-ink);
     }
   }
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a7);
+      box-shadow: inset 0 0 0 1px var(--neutral-a7);
       background-color: transparent;
     }
-    & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--gray-a8);
+    & :where(.kui-BaseCheckboxIndicator) {
+      color: var(--neutral-a8);
     }
   }
 }
 
 /* surface */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-surface) {
+.kui-BaseCheckboxRoot:where(.kui-variant-surface) {
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--accent-2);
@@ -241,18 +236,18 @@
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-8);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-ink);
     }
   }
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-      background-color: var(--gray-a2);
+      box-shadow: inset 0 0 0 1px var(--neutral-a6);
+      background-color: var(--neutral-a2);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--gray-a8);
+    & :where(.kui-BaseCheckboxIndicator) {
+      color: var(--neutral-a8);
     }
   }
 }
@@ -265,29 +260,29 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCheckboxRoot {
+.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(.rt-variant-solid) {
+  &:where(.kui-variant-solid) {
     --checkbox-checked-hover: var(--accent-solid-hover);
     --checkbox-checked-active: var(--accent-solid-active);
   }
-  &:where(.rt-variant-raised) {
-    --checkbox-unchecked-hover: var(--color-surface-solid);
+  &:where(.kui-variant-raised) {
+    --checkbox-unchecked-hover: var(--color-surface);
     --checkbox-unchecked-active: var(--accent-3);
   }
-  &:where(.rt-variant-soft) {
+  &:where(.kui-variant-soft) {
     --checkbox-unchecked-hover: var(--accent-4);
     --checkbox-unchecked-active: var(--accent-5);
   }
-  &:where(.rt-variant-outline) {
+  &:where(.kui-variant-outline) {
     --checkbox-checked-hover: var(--accent-3);
     --checkbox-checked-active: var(--accent-4);
   }
-  &:where(.rt-variant-surface) {
+  &:where(.kui-variant-surface) {
     --checkbox-unchecked-hover: var(--accent-3);
     --checkbox-unchecked-active: var(--accent-4);
   }
@@ -306,11 +301,11 @@
   &:where(:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
     background-color: var(--checkbox-checked-active);
   }
-  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+  &: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(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+    &: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);
     }
   }
@@ -322,8 +317,8 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* The focus ring lives on Checkbox and CheckboxGroup: CheckboxCards rings its card instead. */
-.rt-BaseCheckboxRoot {
+/* The focus ring lives on Checkbox and CheckboxGroup. */
+.kui-BaseCheckboxRoot {
   /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
     cursor: default;

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

@@ -6,8 +6,8 @@ const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseCheckboxPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  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]>;

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

@@ -1,4 +1,4 @@
-.rt-BaseDialogOverlay {
+.kui-BaseDialogOverlay {
   position: fixed;
   inset: 0;
   z-index: 100; /* Above shell header (50) and shell stacked panes (30-40) */
@@ -11,14 +11,14 @@
   }
 }
 
-.rt-BaseDialogScroll {
+.kui-BaseDialogScroll {
   display: flex;
   overflow: auto;
   position: absolute;
   inset: 0;
 }
 
-.rt-BaseDialogScrollPadding {
+.kui-BaseDialogScrollPadding {
   flex-grow: 1;
   margin: auto;
   padding-top: var(--space-7);
@@ -28,15 +28,15 @@
 }
 
 @breakpoints {
-  .rt-BaseDialogScrollPadding:where(.rt-r-align-start) {
+  .kui-BaseDialogScrollPadding:where(.kui-r-align-start) {
     margin-top: 0;
   }
-  .rt-BaseDialogScrollPadding:where(.rt-r-align-center) {
+  .kui-BaseDialogScrollPadding:where(.kui-r-align-center) {
     margin-top: auto;
   }
 }
 
-.rt-BaseDialogContent {
+.kui-BaseDialogContent {
   margin: auto;
   width: 100%;
   z-index: 1;
@@ -45,9 +45,11 @@
   overflow: auto;
 
   padding: var(--dialog-content-padding);
+  /* A surface publishes its padding, so m="bleed" pulls a child to its edge. */
+  --kui-sf-p: var(--dialog-content-padding);
   box-sizing: border-box;
 
-  background-color: var(--color-dialog-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-6);
   outline: none;
 }
@@ -65,23 +67,23 @@
  * maxWidth prop wins, because the max-width utility comes later in the cascade.
  */
 @breakpoints {
-  .rt-BaseDialogContent {
-    &:where(.rt-r-size-1) {
+  .kui-BaseDialogContent {
+    &:where(.kui-r-size-1) {
       --dialog-content-padding: var(--surface-p-2);
       --overlay-w: var(--overlay-w-1);
       border-radius: var(--radius-overlay-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --dialog-content-padding: var(--surface-p-3);
       --overlay-w: var(--overlay-w-2);
       border-radius: var(--radius-overlay-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --dialog-content-padding: var(--surface-p-4);
       --overlay-w: var(--overlay-w-3);
       border-radius: var(--radius-overlay-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --dialog-content-padding: var(--surface-p-4);
       --overlay-w: var(--overlay-w-4);
       border-radius: var(--radius-overlay-4);
@@ -91,16 +93,16 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-BaseDialogContent {
+  .kui-BaseDialogContent {
     border: 1px solid CanvasText;
   }
-  .rt-BaseDialogOverlay::before {
+  .kui-BaseDialogOverlay::before {
     background-color: Canvas;
   }
 }
 
 /* Screen reader only content */
-.rt-sr-only {
+.kui-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;