@womp/kookie-ui 0.21.0 → 0.22.0

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

@@ -22,7 +22,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard {
+.kui-BaseCard {
   /* Layout */
   display: block;
   position: relative;
@@ -39,7 +39,7 @@
 
   /* Typography reset */
   font-family: var(--default-font-family);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-regular);
   font-style: normal;
   text-align: start;
 
@@ -73,29 +73,29 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-BaseCard {
-    &:where(.rt-r-size-1) {
+  .kui-BaseCard {
+    &:where(.kui-r-size-1) {
       --base-card-padding-top: var(--surface-p-1);
       --base-card-padding-right: var(--surface-p-1);
       --base-card-padding-bottom: var(--surface-p-1);
       --base-card-padding-left: var(--surface-p-1);
       --base-card-border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --base-card-padding-top: var(--surface-p-2);
       --base-card-padding-right: var(--surface-p-2);
       --base-card-padding-bottom: var(--surface-p-2);
       --base-card-padding-left: var(--surface-p-2);
       --base-card-border-radius: var(--radius-surface-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --base-card-padding-top: var(--surface-p-3);
       --base-card-padding-right: var(--surface-p-3);
       --base-card-padding-bottom: var(--surface-p-3);
       --base-card-padding-left: var(--surface-p-3);
       --base-card-border-radius: var(--radius-surface-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --base-card-padding-top: var(--surface-p-4);
       --base-card-padding-right: var(--surface-p-4);
       --base-card-padding-bottom: var(--surface-p-4);
@@ -113,35 +113,35 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-outline) {
+.kui-BaseCard:where(.kui-variant-outline) {
   --card-border-width: 1px;
   --v-bg: transparent;
-  --v-bg-hover: var(--gray-2);
-  --v-bg-active: var(--gray-3);
-  --v-border: var(--gray-6);
-  --v-border-hover: var(--gray-7);
-  --v-border-active: var(--gray-8);
+  --v-bg-hover: var(--neutral-2);
+  --v-bg-active: var(--neutral-3);
+  --v-border: var(--neutral-6);
+  --v-border-hover: var(--neutral-7);
+  --v-border-active: var(--neutral-8);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
 
-.rt-BaseCard:where(.rt-variant-soft) {
+.kui-BaseCard:where(.kui-variant-soft) {
   --card-border-width: 0px;
-  --v-bg: var(--gray-2);
-  --v-bg-hover: var(--gray-3);
-  --v-bg-active: var(--gray-3);
-  --v-focus-color: var(--gray-8);
+  --v-bg: var(--neutral-2);
+  --v-bg-hover: var(--neutral-3);
+  --v-bg-active: var(--neutral-3);
+  --v-focus-color: var(--neutral-8);
   --v-focus-offset: -1px;
 }
 
-.rt-BaseCard:where(.rt-variant-surface) {
+.kui-BaseCard:where(.kui-variant-surface) {
   --card-border-width: 1px;
-  --v-bg: var(--gray-1);
-  --v-bg-hover: var(--gray-2);
-  --v-bg-active: var(--gray-3);
-  --v-border: var(--gray-6);
-  --v-border-hover: var(--gray-7);
-  --v-border-active: var(--gray-7);
+  --v-bg: var(--neutral-1);
+  --v-bg-hover: var(--neutral-2);
+  --v-bg-active: var(--neutral-3);
+  --v-border: var(--neutral-6);
+  --v-border-hover: var(--neutral-7);
+  --v-border-active: var(--neutral-7);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
@@ -155,7 +155,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-outline, .rt-variant-soft, .rt-variant-surface) {
+.kui-BaseCard:where(.kui-variant-outline, .kui-variant-soft, .kui-variant-surface) {
   /* Rest state */
   &::before {
     background-color: var(--v-bg);
@@ -195,13 +195,13 @@
   /* Tap highlight */
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
 
 /* Soft variant ::after reset */
-.rt-BaseCard:where(.rt-variant-soft)::after {
+.kui-BaseCard:where(.kui-variant-soft)::after {
   box-shadow: none;
   border: none;
   outline: none;
@@ -214,7 +214,7 @@
  ***************************************************************************************************/
 
 /* Outline uses direct box-shadow on element */
-.rt-BaseCard:where(.rt-variant-outline) {
+.kui-BaseCard:where(.kui-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--v-border);
 
   &::after {
@@ -239,11 +239,11 @@
 }
 
 /* Surface uses ::after for border ON TOP of children */
-.rt-BaseCard:where(.rt-variant-surface)::after {
+.kui-BaseCard:where(.kui-variant-surface)::after {
   box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border);
 }
 
-.rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label) {
+.kui-BaseCard:where(.kui-variant-surface):where(:any-link, button, label) {
   @media (hover: hover) {
     &:where(:hover)::after {
       box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border-hover);
@@ -264,10 +264,10 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-ghost) {
+.kui-BaseCard:where(.kui-variant-ghost) {
   --card-border-width: 0px;
-  --v-bg-hover: var(--gray-3);
-  --v-bg-active: var(--gray-4);
+  --v-bg-hover: var(--neutral-3);
+  --v-bg-active: var(--neutral-4);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 
@@ -309,7 +309,7 @@
   /* Tap highlight */
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
@@ -322,9 +322,9 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-raised) {
+.kui-BaseCard:where(.kui-variant-raised) {
   --card-border-width: 1px;
-  --card-background-color: var(--color-surface-solid);
+  --card-background-color: var(--color-surface);
   position: relative;
   top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
@@ -348,7 +348,7 @@
         box-shadow: var(--shadow-2);
 
         &::before {
-          background-color: var(--gray-2);
+          background-color: var(--neutral-2);
         }
 
         &::after {
@@ -359,7 +359,7 @@
 
     &:where([data-state='open']) {
       &::before {
-        background-color: var(--gray-3);
+        background-color: var(--neutral-3);
       }
 
       &::after {
@@ -369,7 +369,7 @@
 
     &:where(:active:not([data-state='open'])) {
       &::before {
-        background-color: var(--gray-3);
+        background-color: var(--neutral-3);
       }
 
       &::after {
@@ -380,7 +380,7 @@
 
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
@@ -391,15 +391,15 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(:any-link, button, label) {
+.kui-BaseCard:where(:any-link, button, label) {
   @media (pointer: coarse) {
     &:where(:active:not(:focus-visible, [data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
 
 /* A disabled interactive card keeps its look but stops reacting to the pointer. */
-.rt-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
+.kui-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
   cursor: default;
 }

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

@@ -1,4 +1,4 @@
-.rt-BaseCheckboxRoot {
+.kui-BaseCheckboxRoot {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -35,7 +35,7 @@
   }
 }
 
-.rt-BaseCheckboxIndicator {
+.kui-BaseCheckboxIndicator {
   position: absolute;
   width: var(--checkbox-indicator-size);
   height: var(--checkbox-indicator-size);
@@ -62,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));
@@ -94,7 +94,7 @@
 
 /* solid */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-solid) {
+.kui-BaseCheckboxRoot:where(.kui-variant-solid) {
   &:where([data-state='unchecked']) {
     &::before {
       background-color: transparent;
@@ -107,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);
     }
   }
@@ -141,7 +141,7 @@
     &::before {
       background-color: var(--accent-3);
     }
-    & :where(.rt-BaseCheckboxIndicator) {
+    & :where(.kui-BaseCheckboxIndicator) {
       color: var(--accent-ink);
     }
   }
@@ -156,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;
   }
@@ -169,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);
@@ -205,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);
@@ -236,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);
     }
   }
 }
@@ -260,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);
   }
@@ -301,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);
     }
   }
@@ -318,7 +318,7 @@
  ***************************************************************************************************/
 
 /* The focus ring lives on Checkbox and CheckboxGroup. */
-.rt-BaseCheckboxRoot {
+.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;