@womp/kookie-ui 0.19.0 → 0.20.0

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

@@ -31,7 +31,7 @@
 .rt-SidebarMenuButton {
   display: flex;
   align-items: center;
-  gap: var(--space-3); /* Will be overridden by size-specific gap */
+  gap: var(--base-menu-item-gap);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -129,31 +129,6 @@
   margin-inline-start: var(--space-4);
 }
 
-/* Sub-menu items have consistent heights based on size - match dropdown menu exactly */
-:where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-4);
-  padding-top: calc(var(--space-2) * 0.75);
-  padding-bottom: calc(var(--space-2) * 0.75);
-  min-height: var(--space-7); /* bumped from space-5 */
-  font-size: var(--font-size-1);
-}
-
-:where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-4);
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
-  min-height: var(--space-8); /* bumped from space-6 */
-  font-size: var(--font-size-2);
-}
-
-:where(.rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-4);
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-  min-height: var(--space-9);
-  font-size: var(--font-size-3);
-}
-
 .rt-SidebarGroupLabel {
   /* Inherit all BaseMenuLabel styles */
   display: flex;
@@ -175,18 +150,6 @@
   }
 }
 
-/* Reduce right padding on menu buttons with trailing elements */
-.rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-  /* Use base menu padding tokens */
-  :where(.rt-SidebarContent.rt-r-size-1) & {
-    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-
-  :where(.rt-SidebarContent.rt-r-size-2) & {
-    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-}
-
 .rt-SidebarMenuShortcut {
   display: flex;
   align-items: center;
@@ -195,10 +158,17 @@
   color: var(--gray-a11);
 }
 
+/*
+ * A trailing badge sits the row's inset from the far edge, like a shortcut. A badge is taller
+ * than the line, so it may spend the row's block insets rather than grow the row past its height.
+ */
 .rt-SidebarMenuBadge {
   display: flex;
   align-items: center;
   margin-inline-start: auto;
+  margin-inline-end: calc(var(--base-menu-item-padding-y) - var(--base-menu-item-padding-right));
+  margin-top: calc(-1 * var(--base-menu-item-padding-y));
+  margin-bottom: calc(-1 * var(--base-menu-item-padding-y));
   padding-inline-start: var(--space-3);
 }
 

package/src/components/_internal/menu-context.tsx

@@ -14,7 +14,7 @@ import type { Responsive } from '../../props/prop-def.js';
  * - Use the correct item height based on menu size
  */
 
-export type MenuSize = '1' | '2';
+export type MenuSize = '1' | '2' | '3' | '4';
 
 interface MenuContextValue {
   /** Whether we're inside a menu that owns the menu role */
@@ -33,10 +33,15 @@ interface MenuProviderProps {
   size?: Responsive<MenuSize>;
 }
 
-/** Menu item height in pixels per size: the control height ladder (--control-height-N). */
+/**
+ * Menu row height in pixels per size: the line height plus --row-inset-N above and below
+ * (base-menu.css), never under the 24px target floor.
+ */
 export const menuSizeToItemHeight: Record<MenuSize, number> = {
-  '1': 28,
-  '2': 32,
+  '1': 24,
+  '2': 30,
+  '3': 34,
+  '4': 38,
 };
 
 export function getMenuItemHeight(size: MenuSize): number {

package/src/components/avatar.css

@@ -181,15 +181,15 @@
     }
     &:where(.rt-r-size-8) {
       --avatar-size: calc(96px * var(--scale));
-      --avatar-fallback-one-letter-font-size: var(--font-size-8);
+      --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-7);
       border-radius: max(var(--radius-control-4), var(--radius-full));
-      letter-spacing: var(--letter-spacing-8);
+      letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-9) {
       --avatar-size: var(--space-12);
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
-      --avatar-fallback-two-letters-font-size: var(--font-size-8);
+      --avatar-fallback-two-letters-font-size: var(--font-size-7);
       border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-9);
     }

package/src/components/badge.css

@@ -37,9 +37,9 @@
 @breakpoints {
   .rt-Badge {
     &:where(.rt-r-size-1) {
-      font-size: var(--font-size-0);
-      line-height: var(--line-height-0);
-      letter-spacing: var(--letter-spacing-0);
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
       padding: var(--space-1) var(--space-2);
       gap: var(--space-2);
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));

package/src/components/blockquote.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const blockquotePropDefs = {
   ...asChildPropDef,

package/src/components/code.css

@@ -2,9 +2,8 @@
 /* Disable selector-max-type rule to target individual element types. */
 
 .rt-Code {
-  --code-variant-font-size-adjust: calc(var(--code-font-size-adjust) * 0.95);
   font-family: var(--code-font-family);
-  font-size: calc(var(--code-variant-font-size-adjust) * 1em);
+  font-size: calc(var(--mono-scale) * 1em);
   font-style: var(--code-font-style);
   font-weight: var(--code-font-weight);
   line-height: 1.25;
@@ -33,71 +32,51 @@
 
 @breakpoints {
   .rt-Code {
-    &:where(.rt-r-size-0) {
-      font-size: calc(var(--font-size-0) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-0);
-      --letter-spacing: var(--letter-spacing-0);
-    }
     &:where(.rt-r-size-1) {
-      font-size: calc(var(--font-size-1) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-1) * var(--mono-scale));
       line-height: var(--line-height-1);
       --letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
-      font-size: calc(var(--font-size-2) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-2) * var(--mono-scale));
       line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
     }
     &:where(.rt-r-size-3) {
-      font-size: calc(var(--font-size-3) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-3) * var(--mono-scale));
       line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
     }
     &:where(.rt-r-size-4) {
-      font-size: calc(var(--font-size-4) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-4) * var(--mono-scale));
       line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
-      font-size: calc(var(--font-size-5) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-5) * var(--mono-scale));
       line-height: var(--line-height-5);
       --letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
-      font-size: calc(var(--font-size-6) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-6) * var(--mono-scale));
       line-height: var(--line-height-6);
       --letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
-      font-size: calc(var(--font-size-7) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-7) * var(--mono-scale));
       line-height: var(--line-height-7);
       --letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
-      font-size: calc(var(--font-size-8) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-8) * var(--mono-scale));
       line-height: var(--line-height-8);
       --letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
-      font-size: calc(var(--font-size-9) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-9) * var(--mono-scale));
       line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
-    &:where(.rt-r-size-10) {
-      font-size: calc(var(--font-size-10) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-10);
-      --letter-spacing: var(--letter-spacing-10);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: calc(var(--font-size-11) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-11);
-      --letter-spacing: var(--letter-spacing-11);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: calc(var(--font-size-12) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-12);
-      --letter-spacing: var(--letter-spacing-12);
-    }
   }
 }
 
@@ -110,7 +89,6 @@
 /* ghost */
 
 .rt-Code:where(.rt-variant-ghost) {
-  --code-variant-font-size-adjust: var(--code-font-size-adjust);
   padding: 0;
 
   /* Same ladder as Text. No colour and no emphasis inherits the surrounding colour. */

package/src/components/code.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const variants = ['solid', 'soft', 'outline', 'ghost'] as const;
 
 const codePropDefs = {

package/src/components/combobox.css

@@ -66,15 +66,6 @@
   cursor: var(--cursor-menu-item);
 }
 
-/* Room for the check indicator on every size */
-.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: calc(var(--space-6) / 1.2);
-}
-
-.rt-BaseMenuContent:where(.rt-r-size-2, .rt-r-size-3) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: var(--space-6);
-}
-
 /* Search row: shares the surface background, no second panel */
 .rt-ComboboxSearch {
   padding: var(--base-menu-content-padding);

package/src/components/combobox.props.tsx

@@ -42,7 +42,7 @@ const comboboxTriggerPropDefs = {
 };
 
 // The list is a menu, and menus stop at size 3.
-const contentSizes = ['1', '2', '3'] as const;
+const contentSizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.

package/src/components/heading.css

@@ -50,70 +50,50 @@
 
 @breakpoints {
   .rt-Heading {
-    &:where(.rt-r-size-0) {
-      font-size: calc(var(--font-size-0) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-0);
-      letter-spacing: calc(var(--letter-spacing-0) + var(--heading-letter-spacing));
-    }
     &:where(.rt-r-size-1) {
       font-size: calc(var(--font-size-1) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-1);
+      --line-height: var(--line-height-1);
       letter-spacing: calc(var(--letter-spacing-1) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-2) {
       font-size: calc(var(--font-size-2) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-2);
+      --line-height: var(--line-height-2);
       letter-spacing: calc(var(--letter-spacing-2) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-3) {
       font-size: calc(var(--font-size-3) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-3);
+      --line-height: var(--line-height-3);
       letter-spacing: calc(var(--letter-spacing-3) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-4) {
       font-size: calc(var(--font-size-4) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-4);
+      --line-height: var(--line-height-4);
       letter-spacing: calc(var(--letter-spacing-4) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-5) {
       font-size: calc(var(--font-size-5) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-5);
+      --line-height: var(--line-height-5);
       letter-spacing: calc(var(--letter-spacing-5) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-6) {
       font-size: calc(var(--font-size-6) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-6);
+      --line-height: var(--line-height-6);
       letter-spacing: calc(var(--letter-spacing-6) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-7) {
       font-size: calc(var(--font-size-7) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-7);
+      --line-height: var(--line-height-7);
       letter-spacing: calc(var(--letter-spacing-7) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-8) {
       font-size: calc(var(--font-size-8) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-8);
+      --line-height: var(--line-height-8);
       letter-spacing: calc(var(--letter-spacing-8) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-9) {
       font-size: calc(var(--font-size-9) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-9);
+      --line-height: var(--line-height-9);
       letter-spacing: calc(var(--letter-spacing-9) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-10) {
-      font-size: calc(var(--font-size-10) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-10);
-      letter-spacing: calc(var(--letter-spacing-10) + var(--heading-letter-spacing));
-    }
-    &:where(.rt-r-size-11) {
-      font-size: calc(var(--font-size-11) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-11);
-      letter-spacing: calc(var(--letter-spacing-11) + var(--heading-letter-spacing));
-    }
-    &:where(.rt-r-size-12) {
-      font-size: calc(var(--font-size-12) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-12);
-      letter-spacing: calc(var(--letter-spacing-12) + var(--heading-letter-spacing));
-    }
   }
 }

package/src/components/heading.props.tsx

@@ -11,7 +11,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const as = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const headingPropDefs = {
   as: { type: 'enum', values: as, default: 'h1' },

package/src/components/kbd.css

@@ -22,7 +22,7 @@
   word-spacing: var(--raised-word-spacing);
   border-radius: var(--radius-control-2);
   
-  /* Default sizing (size 2) */
+  /* No size prop: the size-1 box */
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -136,13 +136,6 @@
 
 @breakpoints {
   .rt-Kbd {
-    &:where(.rt-r-size-0) {
-      font-size: var(--font-size-0);
-      line-height: var(--line-height-0);
-      letter-spacing: var(--letter-spacing-0);
-      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
-      border-radius: var(--radius-control-1);
-    }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -206,26 +199,5 @@
       padding: calc(var(--space-3) * 1.75) calc(var(--space-5) * 1.5);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-10) {
-      font-size: var(--font-size-10);
-      line-height: var(--line-height-10);
-      letter-spacing: var(--letter-spacing-10);
-      padding: calc(var(--space-3) * 2.0) calc(var(--space-5) * 1.75);
-      border-radius: var(--radius-control-4);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: var(--font-size-11);
-      line-height: var(--line-height-11);
-      letter-spacing: var(--letter-spacing-11);
-      padding: calc(var(--space-3) * 2.25) calc(var(--space-5) * 2.0);
-      border-radius: var(--radius-control-4);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: var(--font-size-12);
-      line-height: var(--line-height-12);
-      letter-spacing: var(--letter-spacing-12);
-      padding: calc(var(--space-3) * 2.5) calc(var(--space-5) * 2.25);
-      border-radius: var(--radius-control-4);
-    }
   }
 }

package/src/components/kbd.props.tsx

@@ -2,7 +2,7 @@ import { asChildPropDef } from '../props/as-child.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const variants = ['raised', 'soft'] as const;
 
 const kbdPropDefs = {

package/src/components/link.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const underline = ['auto', 'always', 'hover', 'none'] as const;
 
 const linkPropDefs = {

package/src/components/notice.css

@@ -64,38 +64,35 @@
 }
 
 .rt-NoticeRoot {
-  /* v2 notice: a panel's padding, one gap at every size, and a corner concentric with the
-     buttons it holds (control corner + padding). At `none` the padding term drops out, so a
-     square theme stays square. */
+  /* A notice is a surface: it pads and rounds like a Card of the same size, with one gap. */
   gap: var(--layout-space-4);
-  --notice-corner-on: min(1, calc(var(--radius-factor, 1) * 1000));
-  border-radius: calc(var(--notice-control-radius) + var(--notice-padding) * var(--notice-corner-on));
+  border-radius: var(--notice-radius);
   padding: var(--notice-padding);
 
   &:where(.rt-r-size-1) {
-    --notice-padding: var(--panel-p-1);
-    --notice-control-radius: var(--radius-control-1);
+    --notice-padding: var(--surface-p-1);
+    --notice-radius: var(--radius-surface-1);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
     --notice-icon-size: var(--content-icon-size-1);
   }
   &:where(.rt-r-size-2) {
-    --notice-padding: var(--panel-p-2);
-    --notice-control-radius: var(--radius-control-2);
+    --notice-padding: var(--surface-p-2);
+    --notice-radius: var(--radius-surface-2);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
     --notice-icon-size: var(--content-icon-size-2);
   }
   &:where(.rt-r-size-3) {
-    --notice-padding: var(--panel-p-3);
-    --notice-control-radius: var(--radius-control-3);
+    --notice-padding: var(--surface-p-3);
+    --notice-radius: var(--radius-surface-3);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
     --notice-icon-size: var(--content-icon-size-3);
   }
   &:where(.rt-r-size-4) {
-    --notice-padding: var(--panel-p-4);
-    --notice-control-radius: var(--radius-control-4);
+    --notice-padding: var(--surface-p-4);
+    --notice-radius: var(--radius-surface-4);
     --notice-line: var(--line-height-4);
     --notice-control: var(--control-height-4);
     --notice-icon-size: var(--content-icon-size-4);