@womp/kookie-ui 0.13.0 → 0.13.1

package/layout/tokens.css

@@ -22,6 +22,10 @@
     --space-6: calc(32px * var(--scaling));
     --space-7: calc(40px * var(--scaling));
     --space-8: calc(48px * var(--scaling));
+    --control-height-1: var(--space-5);
+    --control-height-2: var(--space-6);
+    --control-height-3: var(--space-7);
+    --control-height-4: var(--space-8);
     --space-9: calc(64px * var(--scaling));
     --space-10: calc(80px * var(--scaling));
     --space-11: calc(96px * var(--scaling));

package/layout.css

@@ -22,6 +22,10 @@
     --space-6: calc(32px * var(--scaling));
     --space-7: calc(40px * var(--scaling));
     --space-8: calc(48px * var(--scaling));
+    --control-height-1: var(--space-5);
+    --control-height-2: var(--space-6);
+    --control-height-3: var(--space-7);
+    --control-height-4: var(--space-8);
     --space-9: calc(64px * var(--scaling));
     --space-10: calc(80px * var(--scaling));
     --space-11: calc(96px * var(--scaling));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

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

@@ -176,22 +176,22 @@
 @breakpoints {
   .rt-BaseButton {
     &:where(.rt-r-size-1) {
-      --base-button-height: var(--space-5);
+      --base-button-height: var(--control-height-1);
       border-radius: max(var(--radius-1), var(--radius-full));
     }
 
     &:where(.rt-r-size-2) {
-      --base-button-height: var(--space-6);
+      --base-button-height: var(--control-height-2);
       border-radius: max(var(--radius-2), var(--radius-full));
     }
 
     &:where(.rt-r-size-3) {
-      --base-button-height: var(--space-7);
+      --base-button-height: var(--control-height-3);
       border-radius: max(var(--radius-3), var(--radius-full));
     }
 
     &:where(.rt-r-size-4) {
-      --base-button-height: var(--space-8);
+      --base-button-height: var(--control-height-4);
       border-radius: max(var(--radius-4), var(--radius-full));
     }
   }

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

@@ -167,7 +167,7 @@
       --base-menu-item-padding-left-indicator: calc(var(--space-5) / 1.2);
       --base-menu-item-padding-right: var(--space-2);
       --base-menu-item-padding-y: var(--space-1);
-      --base-menu-item-height: var(--space-5);
+      --base-menu-item-height: var(--control-height-1);
       border-radius: var(--radius-surface-3);
 
       & :where(.rt-BaseMenuItem) {
@@ -205,7 +205,7 @@
       --base-menu-item-padding-left-indicator: var(--space-5);
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-1);
-      --base-menu-item-height: var(--space-6);
+      --base-menu-item-height: var(--control-height-2);
       border-radius: var(--radius-surface-5);
 
       & :where(.rt-BaseMenuItem) {
@@ -243,7 +243,7 @@
       --base-menu-item-padding-left-indicator: var(--space-5);
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-2);
-      --base-menu-item-height: var(--space-7);
+      --base-menu-item-height: var(--control-height-3);
       border-radius: var(--radius-surface-6);
 
       & :where(.rt-BaseMenuItem) {

package/src/components/_internal/base-tab-list.css

@@ -83,7 +83,7 @@
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-      --tab-height: var(--space-6);
+      --tab-height: var(--control-height-1);
       --tab-padding-x: var(--space-1);
       --tab-inner-padding-x: var(--space-1);
       --tab-inner-padding-y: calc(var(--space-1) * var(--spacing-multiplier-small));
@@ -104,7 +104,7 @@
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      --tab-height: var(--space-7);
+      --tab-height: var(--control-height-2);
       --tab-padding-x: var(--space-2);
       --tab-inner-padding-x: var(--space-2);
       --tab-inner-padding-y: var(--space-1);

package/src/components/segmented-control.css

@@ -405,7 +405,7 @@
 
     &:where(.rt-r-size-1) {
       --segmented-control-border-radius: max(var(--radius-1), var(--radius-full));
-      --segmented-control-height: var(--space-5);
+      --segmented-control-height: var(--control-height-1);
       height: var(--segmented-control-height);
 
       /* Vertical: height auto, width determined by content or icon-only */
@@ -436,7 +436,7 @@
     }
     &:where(.rt-r-size-2) {
       --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
-      --segmented-control-height: var(--space-6);
+      --segmented-control-height: var(--control-height-2);
       height: var(--segmented-control-height);
 
       /* Vertical: height auto, width determined by content or icon-only */
@@ -467,7 +467,7 @@
     }
     &:where(.rt-r-size-3) {
       --segmented-control-border-radius: max(var(--radius-3), var(--radius-full));
-      --segmented-control-height: var(--space-7);
+      --segmented-control-height: var(--control-height-3);
       height: var(--segmented-control-height);
 
       /* Vertical: height auto, width determined by content or icon-only */
@@ -498,7 +498,7 @@
     }
     &:where(.rt-r-size-4) {
       --segmented-control-border-radius: max(var(--radius-4), var(--radius-full));
-      --segmented-control-height: var(--space-8);
+      --segmented-control-height: var(--control-height-4);
       height: var(--segmented-control-height);
 
       /* Vertical: height auto, width determined by content or icon-only */

package/src/components/select.css

@@ -186,7 +186,7 @@
 @breakpoints {
   .rt-SelectTrigger {
     &:where(.rt-r-size-1) {
-      --select-trigger-height: var(--space-5);
+      --select-trigger-height: var(--control-height-1);
       gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -207,7 +207,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --select-trigger-height: var(--space-6);
+      --select-trigger-height: var(--control-height-2);
       gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
@@ -228,7 +228,7 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --select-trigger-height: var(--space-7);
+      --select-trigger-height: var(--control-height-3);
       gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
@@ -261,7 +261,7 @@
   .rt-SelectContent {
     &:where(.rt-r-size-1) {
       --select-content-padding: var(--space-1);
-      --select-item-height: var(--space-5);
+      --select-item-height: var(--control-height-1);
       --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
       --select-separator-margin-right: var(--space-2);
       border-radius: var(--radius-surface-3);
@@ -284,7 +284,6 @@
     }
     &:where(.rt-r-size-2, .rt-r-size-3) {
       --select-content-padding: var(--space-2);
-      --select-item-height: var(--space-6);
       --select-item-indicator-width: var(--space-5);
       --select-separator-margin-right: var(--space-3);
       border-radius: var(--radius-surface-4);
@@ -300,6 +299,8 @@
       }
     }
     &:where(.rt-r-size-2) {
+      --select-item-height: var(--control-height-2);
+
       & :where(.rt-SelectItem) {
         font-size: var(--font-size-2);
         letter-spacing: var(--letter-spacing-2);
@@ -310,6 +311,8 @@
       }
     }
     &:where(.rt-r-size-3) {
+      --select-item-height: var(--control-height-3);
+
       & :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);

package/src/components/sidebar.css

@@ -609,103 +609,50 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* A sub-trigger's chevron sits at the row's end; its size comes from the size ladder below */
+.rt-SidebarMenuSubTriggerIcon {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 @breakpoints {
-  /* Container sizing - inherit from base menu */
+  /* Sidebar rows sit on the control height ladder: size N is as tall as a Button,
+     menu item or TextField of size N. Content is a BaseMenuContent, so it takes
+     every size value from base-menu.css. Header and Footer are not, so they
+     restate base-menu's values here; keep the two in step. */
   .rt-SidebarContainer {
     &:where(.rt-r-size-1) {
       --sidebar-base-padding: var(--space-3);
-      --sidebar-item-height: var(--space-6);
-    }
-    &:where(.rt-r-size-2) {
-      --sidebar-base-padding: var(--space-4);
-      --sidebar-item-height: var(--space-7);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.rt-r-size-2, .rt-r-size-3) {
       --sidebar-base-padding: var(--space-4);
-      --sidebar-item-height: var(--space-8);
-    }
-  }
-
-  /* Content sizing - use base menu tokens directly */
-  .rt-SidebarContent {
-    &:where(.rt-r-size-1) {
-      --sidebar-content-padding: var(--base-menu-content-padding);
-      --sidebar-item-padding-left: var(--base-menu-item-padding-left);
-      --sidebar-item-padding-right: var(--base-menu-item-padding-right);
-      --sidebar-item-padding-y: var(--base-menu-item-padding-y);
-      --base-menu-item-height: var(--space-6);
-      --sidebar-item-height: var(--base-menu-item-height);
-    }
-    &:where(.rt-r-size-2) {
-      --sidebar-content-padding: var(--base-menu-content-padding);
-      --sidebar-item-padding-left: var(--base-menu-item-padding-left);
-      --sidebar-item-padding-right: var(--base-menu-item-padding-right);
-      --sidebar-item-padding-y: var(--base-menu-item-padding-y);
-      --base-menu-item-height: var(--space-7);
-      --sidebar-item-height: var(--base-menu-item-height);
-    }
-    &:where(.rt-r-size-3) {
-      --sidebar-content-padding: var(--base-menu-content-padding);
-      --sidebar-item-padding-left: var(--base-menu-item-padding-left);
-      --sidebar-item-padding-right: var(--base-menu-item-padding-right);
-      --sidebar-item-padding-y: var(--base-menu-item-padding-y);
-      --base-menu-item-height: var(--space-8);
-      --sidebar-item-height: var(--base-menu-item-height);
     }
   }
 
-  /* Header/Footer sizing - mirror base menu tokens so buttons render correctly */
-  .rt-SidebarHeader,
-  .rt-SidebarFooter {
-    &:where(.rt-r-size-1) {
-      --base-menu-content-padding: var(--space-2);
-      --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
-      --base-menu-item-padding-right: var(--space-2);
-      --base-menu-item-padding-y: var(--space-1);
-      --base-menu-item-height: var(--space-6);
-      --sidebar-item-height: var(--base-menu-item-height);
-    }
-
-    &:where(.rt-r-size-2) {
-      --base-menu-content-padding: var(--space-3);
-      --base-menu-item-padding-left: var(--space-3);
-      --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-1);
-      --base-menu-item-height: var(--space-7);
-      --sidebar-item-height: var(--base-menu-item-height);
-    }
-
-    &:where(.rt-r-size-3) {
-      --base-menu-content-padding: var(--space-3);
-      --base-menu-item-padding-left: var(--space-3);
-      --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-2);
-      --base-menu-item-height: var(--space-8);
-      --sidebar-item-height: var(--base-menu-item-height);
-    }
-  }
-
-  /* Size-specific menu button styling - inherit from base menu */
-  .rt-SidebarContent:where(.rt-r-size-1),
   .rt-SidebarHeader:where(.rt-r-size-1),
   .rt-SidebarFooter:where(.rt-r-size-1) {
+    --base-menu-content-padding: var(--space-2);
+    --base-menu-item-padding-left: var(--space-2);
+    --base-menu-item-padding-right: var(--space-2);
+    --base-menu-item-padding-y: var(--space-1);
+    --base-menu-item-height: var(--control-height-1);
+    --sidebar-item-height: var(--base-menu-item-height);
+
     & :where(.rt-SidebarMenuButton) {
       gap: var(--component-gap-2);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-1);
-      font-weight: var(--font-weight-regular);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
+        width: var(--content-icon-size-1);
+        height: var(--content-icon-size-1);
         flex-shrink: 0;
       }
     }
 
-    /* Sub-trigger icon sizing - matches base menu exactly */
     & :where(.rt-BaseMenuSubTriggerIcon) {
       width: var(--indicator-icon-size-1);
       height: var(--indicator-icon-size-1);
@@ -714,38 +661,30 @@
     }
   }
 
-  .rt-SidebarContent:where(.rt-r-size-2),
   .rt-SidebarHeader:where(.rt-r-size-2),
   .rt-SidebarFooter:where(.rt-r-size-2) {
+    --base-menu-content-padding: var(--space-3);
+    --base-menu-item-padding-left: var(--space-3);
+    --base-menu-item-padding-right: var(--space-3);
+    --base-menu-item-padding-y: var(--space-1);
+    --base-menu-item-height: var(--control-height-2);
+    --sidebar-item-height: var(--base-menu-item-height);
+
     & :where(.rt-SidebarMenuButton) {
       gap: var(--component-gap-3);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-2);
-      font-weight: var(--font-weight-regular);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
         flex-shrink: 0;
       }
     }
-    /* stylelint-disable-next-line selector-max-specificity */
-    .rt-SidebarContent:where(.rt-r-size-3) {
-      /* stylelint-disable-next-line selector-max-specificity */
-      & :where(.rt-SidebarMenuButton) {
-        /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-        & :where(svg) {
-          width: var(--content-icon-size-3);
-          height: var(--content-icon-size-3);
-          flex-shrink: 0;
-        }
-      }
-    }
 
-    /* Sub-trigger icon sizing - matches base menu exactly */
     & :where(.rt-BaseMenuSubTriggerIcon) {
       width: var(--indicator-icon-size-2);
       height: var(--indicator-icon-size-2);
@@ -754,16 +693,21 @@
     }
   }
 
-  .rt-SidebarContent:where(.rt-r-size-3),
   .rt-SidebarHeader:where(.rt-r-size-3),
   .rt-SidebarFooter:where(.rt-r-size-3) {
+    --base-menu-content-padding: var(--space-3);
+    --base-menu-item-padding-left: var(--space-3);
+    --base-menu-item-padding-right: var(--space-3);
+    --base-menu-item-padding-y: var(--space-2);
+    --base-menu-item-height: var(--control-height-3);
+    --sidebar-item-height: var(--base-menu-item-height);
+
     & :where(.rt-SidebarMenuButton) {
-      gap: var(--component-gap-3);
+      gap: var(--component-gap-4);
       font-size: var(--font-size-3);
-      line-height: var(--line-height-2);
-      letter-spacing: var(--letter-spacing-2);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
       border-radius: var(--radius-2);
-      font-weight: var(--font-weight-regular);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -774,8 +718,8 @@
     }
 
     & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-2);
-      height: var(--indicator-icon-size-2);
+      width: var(--indicator-icon-size-3);
+      height: var(--indicator-icon-size-3);
       flex-shrink: 0;
       margin-left: auto;
     }

package/src/components/text-field.css

@@ -214,7 +214,7 @@
 @breakpoints {
   .rt-TextFieldRoot {
     &:where(.rt-r-size-1) {
-      --text-field-height: var(--space-5);
+      --text-field-height: var(--control-height-1);
       --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-1), var(--radius-full));
       --text-field-native-icon-size: var(--space-3);
@@ -247,7 +247,7 @@
     }
 
     &:where(.rt-r-size-2) {
-      --text-field-height: var(--space-6);
+      --text-field-height: var(--control-height-2);
       --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-2), var(--radius-full));
       --text-field-native-icon-size: var(--space-4);
@@ -281,7 +281,7 @@
     }
 
     &:where(.rt-r-size-3) {
-      --text-field-height: var(--space-7);
+      --text-field-height: var(--control-height-3);
       --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-3), var(--radius-full));
       --text-field-native-icon-size: var(--space-4);

package/src/components/toolbar.css

@@ -26,28 +26,28 @@
   }
 
   &:where(.rt-r-size-1) {
-    --toolbar-control-height: var(--space-5);
+    --toolbar-control-height: var(--control-height-1);
     --toolbar-radius: max(var(--radius-1), var(--radius-full));
     --toolbar-gap: var(--space-1);
     --toolbar-title-gap: var(--space-2);
   }
 
   &:where(.rt-r-size-2) {
-    --toolbar-control-height: var(--space-6);
+    --toolbar-control-height: var(--control-height-2);
     --toolbar-radius: max(var(--radius-2), var(--radius-full));
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-3) {
-    --toolbar-control-height: var(--space-7);
+    --toolbar-control-height: var(--control-height-3);
     --toolbar-radius: max(var(--radius-3), var(--radius-full));
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-4) {
-    --toolbar-control-height: var(--space-8);
+    --toolbar-control-height: var(--control-height-4);
     --toolbar-radius: max(var(--radius-4), var(--radius-full));
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);

package/src/styles/tokens/space.css

@@ -12,6 +12,13 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
 
+  /* Control heights. One ladder for every control: size N is the same height in
+     Button, Menu, Sidebar, Tabs, TextField, Select, SegmentedControl and Toolbar. */
+  --control-height-1: var(--space-5);
+  --control-height-2: var(--space-6);
+  --control-height-3: var(--space-7);
+  --control-height-4: var(--space-8);
+
   /*  */
   --space-9: calc(64px * var(--scaling));
   --space-10: calc(80px * var(--scaling));