@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/button.css

@@ -1,211 +1,41 @@
 /**
  * Button Component Styles
- * 
- * This file contains the core styling for the Button component, including
- * size variants, icon handling, and responsive design patterns. The styles
- * are built on top of the base button styles imported from _internal.
- * 
- * Key features:
- * - Responsive sizing with mobile-first approach
- * - Automatic icon sizing based on button size
- * - Ghost variant with specialized padding
- * - Consistent typography and spacing
+ *
+ * Button sits on the shared control ladder in _internal/base-button.css: height, side padding
+ * (with the pill correction), gap and icon size all come from there, for every variant. This
+ * file adds the label's type step per size.
  */
 
 @import './_internal/base-button.css';
 
-/* 
- * Button-specific styles that extend the base button
- * These styles handle icon opacity and specialized behaviors
- */
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- * Button sizes are designed for different interface densities and contexts:
- * - Size 1 (24px): Compact for toolbars and dense interfaces
- * - Size 2 (32px): Standard for most interface contexts  
- * - Size 3 (40px): Large for important actions and mobile touch targets
- * - Size 4 (48px): Extra large for hero sections and maximum impact
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Ghost variant has specialized padding that differs from other variants
- * This creates a more subtle, text-like appearance
- */
 .rt-Button {
-  --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-2));
-
-  &:where(.rt-variant-ghost) {
-    padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
-  }
+  font-weight: var(--font-weight-medium);
 }
 
 @breakpoints {
   .rt-Button {
-    /* 
-     * Size 1: Compact (24px height)
-     * Designed for toolbars, dense interfaces, and space-constrained contexts
-     */
     &:where(.rt-r-size-1) {
-      --button-padding-inline-base: var(--space-3);
-      gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-
-      /* 
-       * Icon sizing for size 1
-       * Icons are automatically sized to match the button's scale
-       */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
-      }
-
-      /* 
-       * Standard padding for non-ghost variants
-       * Provides adequate touch targets while maintaining compact appearance
-       */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* 
-       * Ghost variant padding for size 1
-       * Reduced padding creates seamless text integration
-       */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-1);
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: var(--space-2);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 2: Standard (32px height)
-     * Default size for most interface contexts and general use
-     */
     &:where(.rt-r-size-2) {
-      --button-padding-inline-base: var(--space-4);
-      gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-
-      /* Icon sizing for size 2 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 2 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-2);
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: var(--space-2);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 3: Large (40px height)
-     * Recommended for important actions and mobile touch targets
-     */
     &:where(.rt-r-size-3) {
-      --button-padding-inline-base: var(--space-4);
-      gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-
-      /* Icon sizing for size 3 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 3 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-3);
-        --button-ghost-padding-x: var(--space-4);
-        --button-ghost-padding-y: calc(var(--space-2) * 1.5);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 4: Extra Large (48px height)
-     * Designed for hero sections and maximum visual impact
-     */
     &:where(.rt-r-size-4) {
-      --button-padding-inline-base: var(--space-5);
-      gap: var(--component-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
-
-      /* Icon sizing for size 4 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-4);
-        height: var(--content-icon-size-4);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 4 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-4);
-        --button-ghost-padding-x: var(--space-5);
-        --button-ghost-padding-y: var(--space-3);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * VARIANTS                                                                                        *
- *                                                                                                 *
- * Button variants provide different visual contexts and hierarchies:
- * - raised: lifted off its ground, with an edge and a shadow
- * - solid: Primary actions that should be noticed first
- * - soft: Content-heavy interfaces, natural integration
- * - surface: Elevated appearance with subtle depth
- * - outline: Secondary actions that support primary actions
- * - ghost: Utility functions that don't compete for attention
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Typography styling for all button variants
- * Ensures consistent font weight across all button types
- */
-.rt-Button {
-  font-weight: var(--font-weight-medium);
-}

package/src/components/chatbar.tsx

@@ -9,6 +9,7 @@ import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
 import { NoticeSizeContext } from './notice.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { Spinner } from './spinner.js';
 import { Text } from './text.js';
 import { VisuallyHidden } from './visually-hidden.js';
@@ -125,6 +126,9 @@ interface ChatbarContextValue {
   beginFilePickerPress(): void;
 }
 
+/** Chatbar's own range; a Theme size of 4 maps to 3. */
+const chatbarSizePropDef = { values: ['1', '2', '3'] as const };
+
 const ChatbarContext = React.createContext<ChatbarContextValue | null>(null);
 // Value lives in its own context so keystrokes only re-render parts that read it
 const ChatbarValueContext = React.createContext<string>('');
@@ -315,7 +319,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     disabled,
     readOnly,
     onSubmit,
-    size = '2',
+    size: sizeProp,
     variant,
     color,
     radius,
@@ -339,6 +343,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     context,
     ...divProps
   } = props;
+  const size = useThemeSize(sizeProp, chatbarSizePropDef);
 
   const isValueControlled = valueProp != null;
   const [valueUncontrolled, setValueUncontrolled] = React.useState<string>(defaultValue);
@@ -1033,7 +1038,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   return (
     <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
-        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal" size="1">
+        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal">
           <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
@@ -1117,7 +1122,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
 
   const lead =
     attachment.status === 'uploading' ? (
-      <Spinner size="1" />
+      <Spinner />
     ) : isImage ? (
       <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
     ) : (
@@ -1361,7 +1366,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
 
   const glyph =
     mode === 'stop' ? (
-      stopIcon ?? (status === 'submitted' ? <Spinner size={ctx.size} /> : (
+      stopIcon ?? (status === 'submitted' ? <Spinner /> : (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
           <rect x="7" y="7" width="10" height="10" rx="2" />
         </svg>

package/src/components/checkbox-group.css

@@ -12,20 +12,15 @@
   width: fit-content;
 }
 
+/* The disabled cursor lives in the base mark. */
 .rt-CheckboxGroupItemCheckbox {
-  &:where(:focus-visible) {
-    &::before {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
+  &:where(:focus-visible)::before {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  &:where(:disabled) {
-    cursor: var(--cursor-disabled);
-
-    &::before {
-      background-color: var(--gray-a3);
-    }
+  &:where(:disabled)::before {
+    background-color: var(--gray-a3);
   }
 }
 

package/src/components/checkbox-group.tsx

@@ -10,6 +10,7 @@ import { checkboxGroupRootPropDefs } from './checkbox-group.props.js';
 import { ThickCheckIcon } from './icons.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -42,12 +43,13 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
   (
     {
       color = checkboxGroupRootPropDefs.color.default,
-      size = checkboxGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<CheckboxGroupRootProps>,
     forwardedRef,
   ) => {
+    const size = useThemeSize(sizeProp, checkboxGroupRootPropDefs.size);
     const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
     return (

package/src/components/checkbox.css

@@ -1,18 +1,13 @@
 @import './_internal/base-checkbox.css';
 
+/* The disabled cursor lives in the base mark. */
 .rt-CheckboxRoot {
-  &:where(:focus-visible) {
-    &::before {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
+  &:where(:focus-visible)::before {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  &:where(:disabled) {
-    cursor: var(--cursor-disabled);
-
-    &::before {
-      background-color: var(--gray-a3);
-    }
+  &:where(:disabled)::before {
+    background-color: var(--gray-a3);
   }
 }

package/src/components/checkbox.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from 'radix-ui/internal';
 import { checkboxPropDefs } from './checkbox.props.js';
 import { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -23,7 +24,8 @@ interface CheckboxProps
     >,
     MarginProps,
     CheckboxOwnProps {}
-const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwardedRef) => {
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);
   const {
     className,
     color,

package/src/components/combobox.tsx

@@ -25,6 +25,7 @@ import { useCallbackRef, useComposedRefs, useControllableState, useLayoutEffect
 import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
@@ -206,7 +207,7 @@ function readElementLabel(el: HTMLElement): string | undefined {
 const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
   const {
     children,
-    size = comboboxRootPropDefs.size.default,
+    size: sizeProp,
     value: valueProp,
     defaultValue = null,
     onValueChange,
@@ -228,6 +229,7 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
     displayValue: displayValueProp,
     ...rootProps
   } = props;
+  const size = useThemeSize(sizeProp, comboboxRootPropDefs.size);
 
   const [open, setOpen] = useControllableState({
     prop: openProp,

package/src/components/context-menu.tsx

@@ -21,6 +21,7 @@ import {
 import { Theme, useThemeContext } from './theme.js';
 import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { MenuProvider } from './_internal/menu-context.js';
 import {
@@ -76,7 +77,8 @@ interface ContextMenuContentProps
   submenuBehavior?: Responsive<'cascade' | 'drill-down'>;
 }
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contextMenuContentPropDefs.size);
     const themeContext = useThemeContext();
     const {
       size = contextMenuContentPropDefs.size.default,

package/src/components/data-list.tsx

@@ -8,6 +8,7 @@ import {
   dataListLabelPropDefs,
 } from './data-list.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -21,7 +22,8 @@ interface DataListRootProps
     MarginProps,
     DataListRootOwnProps {}
 const DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dataListRootPropDefs.size);
     const { className, ...dataListProps } = extractProps(
       props,
       dataListRootPropDefs,

package/src/components/dropdown-menu.tsx

@@ -18,6 +18,7 @@ import {
 import { Theme, useThemeContext } from './theme.js';
 import { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import {
   DrillDownLevelContext,
   DrillDownRoot,
@@ -128,7 +129,8 @@ interface DropdownMenuContentProps
   virtualized?: boolean;
 }
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dropdownMenuContentPropDefs.size);
     const themeContext = useThemeContext();
     const {
       size = dropdownMenuContentPropDefs.size.default,

package/src/components/hover-card.tsx

@@ -4,6 +4,7 @@ import { HoverCard as HoverCardPrimitive } from 'radix-ui';
 
 import { hoverCardContentPropDefs } from './hover-card.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { Theme } from './theme.js';
 
@@ -41,7 +42,8 @@ interface HoverCardContentProps
   container?: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Portal>['container'];
 }
 const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, hoverCardContentPropDefs.size);
     const { className, forceMount, container, ...contentProps } = extractProps(
       props,
       hoverCardContentPropDefs

package/src/components/icon-button.css

@@ -1,157 +1,9 @@
 /**
  * IconButton Component Styles
- * 
- * This file contains the core styling for the IconButton component, which
- * extends the base button with specialized behavior for icon-only interactions.
- * Icon buttons maintain square aspect ratios and provide consistent icon sizing
- * across all variants and sizes.
- * 
- * Key features:
- * - Square aspect ratios for consistent visual alignment
- * - Automatic icon sizing based on button size
- * - Specialized flush behavior for ghost variants
- * - Responsive design with mobile-first approach
- * - Seamless text integration with negative margins
+ *
+ * The square shape and the flush trim live with the shared control ladder in
+ * _internal/base-button.css (`.rt-BaseButton:where(.rt-IconButton)`), so their order against
+ * the padding rules never depends on import order.
  */
 
 @import './_internal/base-button.css';
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- * Icon button sizes maintain square aspect ratios for consistent visual alignment.
- * Each size corresponds to the same dimensions as regular buttons but ensures
- * perfect squares for optimal icon display and touch targets.
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Base icon button styling that ensures square aspect ratios
- * Uses the same height as base buttons but sets width to match
- */
-.rt-IconButton {
-  height: var(--base-button-height);
-  width: var(--base-button-height);
-}
-
-@breakpoints {
-  .rt-IconButton {
-    /* 
-     * Size 1: Compact (24px x 24px)
-     * Designed for toolbars and dense interfaces
-     */
-    &:where(.rt-r-size-1) {
-      /* 
-       * Icon sizing for size 1
-       * Icons are automatically sized to match the button's scale
-       */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
-      }
-    }
-    
-    /* 
-     * Size 2: Standard (32px x 32px)
-     * Default size for most interface contexts
-     */
-    &:where(.rt-r-size-2) {
-      /* Icon sizing for size 2 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
-      }
-    }
-    
-    /* 
-     * Size 3: Large (40px x 40px)
-     * Recommended for important actions and mobile touch targets
-     */
-    &:where(.rt-r-size-3) {
-      /* Icon sizing for size 3 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
-      }
-    }
-    
-    /* 
-     * Size 4: Extra Large (48px x 48px)
-     * Designed for hero sections and maximum visual impact
-     */
-    &:where(.rt-r-size-4) {
-      /* Icon sizing for size 4 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-4);
-        height: var(--content-icon-size-4);
-      }
-    }
-  }
-
-  /* 
-   * Specialized flush behavior for ghost variant icon buttons
-   * This creates seamless text integration by using negative margins
-   * to compensate for the button's padding
-   */
-  .rt-IconButton:where(.rt-variant-ghost) {
-    &:where([data-flush='true']) {
-      /* 
-       * Reset defined margin variables to avoid inheriting from higher components
-       * If a margin IS defined on the component itself, the utility class will win and reset it
-       */
-      --margin-top: 0px;
-      --margin-right: 0px;
-      --margin-bottom: 0px;
-      --margin-left: 0px;
-
-      /* 
-       * Define overrides to incorporate negative margins using ghost padding
-       * This creates the seamless integration effect by pulling the button
-       * closer to surrounding text
-       */
-      --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
-      --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
-      --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
-      --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
-
-      /* Apply the calculated negative margins */
-      margin-top: var(--margin-top-override);
-      margin-right: var(--margin-right-override);
-      margin-bottom: var(--margin-bottom-override);
-      margin-left: var(--margin-left-override);
-
-      /* 
-       * Reset the overrides on direct children
-       * This prevents the negative margins from affecting child elements
-       */
-      :where(&) > * {
-        --margin-top-override: initial;
-        --margin-right-override: initial;
-        --margin-bottom-override: initial;
-        --margin-left-override: initial;
-      }
-    }
-
-    /* 
-     * Ghost padding values for different sizes
-     * These determine the amount of negative margin applied in flush mode
-     */
-    &:where(.rt-r-size-1) {
-      --icon-button-ghost-padding: var(--space-2);
-    }
-    &:where(.rt-r-size-2) {
-      --icon-button-ghost-padding: calc(var(--space-2) * 1.5);
-    }
-    &:where(.rt-r-size-3) {
-      --icon-button-ghost-padding: var(--space-3);
-    }
-    &:where(.rt-r-size-4) {
-      --icon-button-ghost-padding: var(--space-4);
-    }
-  }
-}

package/src/components/message-scroller.tsx

@@ -144,7 +144,7 @@ type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'var
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
+  ({ direction = 'end', behavior, className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
     <Primitive.Button
       direction={direction}
       {...(behavior ? { behavior } : {})}

package/src/components/navbar.tsx

@@ -9,6 +9,7 @@ import type { FlexProps } from './flex.js';
 
 import { navbarRootPropDefs } from './navbar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -35,7 +36,8 @@ interface NavbarRootProps
     NavbarRootOwnProps {}
 
 const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, navbarRootPropDefs.size);
     const { children, className, ...rootProps } = extractProps(
       props,
       navbarRootPropDefs,