@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/notice.tsx

@@ -24,24 +24,26 @@ import classNames from 'classnames';
 import { Button } from './button.js';
 import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3';
 
 /** The size a notice takes when it doesn't set one. `Chatbar.Root` provides its own size here. */
 const NoticeSizeContext = React.createContext<NoticeSize | undefined>(undefined);
+
+/** Notice's own range; a Theme size of 4 maps to 3. */
+const noticeSizePropDef = { values: ['1', '2', '3'] as const };
 type NoticeColor = (typeof accentColorPropDef)['color']['values'][number];
 
 interface StripProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
-  /** Padding, text and button size. Default `2`. */
+  /** Padding, text and button size. Defaults to the nearest Theme's size (3 when the Theme is 4). */
   size?: NoticeSize;
   /**
    * The category of the message, not its volume. Default `gray`. Use a colour only when it adds a
    * fact the words don't already give, such as `red` for something that stops the next step.
    */
   color?: NoticeColor;
-  /** `translucent` when content scrolls behind the strip. */
-  material?: 'solid' | 'translucent';
   /** The message. */
   children: React.ReactNode;
 }
@@ -73,7 +75,7 @@ interface ConfirmationProps extends StripProps {
 }
 
 const Strip = React.forwardRef<HTMLDivElement, StripProps & { kind: 'notice' | 'confirmation'; trailing: React.ReactNode; leading?: React.ReactNode }>(
-  ({ kind, size = '2', color = 'gray', material, className, children, trailing, leading, ...props }, forwardedRef) => (
+  ({ kind, size = '2', color = 'gray', className, children, trailing, leading, ...props }, forwardedRef) => (
     <div
       role="status"
       aria-live="polite"
@@ -82,7 +84,6 @@ const Strip = React.forwardRef<HTMLDivElement, StripProps & { kind: 'notice' | '
       className={classNames('rt-NoticeRoot', `rt-r-size-${size}`, className)}
       data-kind={kind}
       data-accent-color={color}
-      data-material={material}
     >
       {leading ? (
         <span className="rt-NoticeIcon" aria-hidden>
@@ -101,7 +102,7 @@ Strip.displayName = 'Strip';
 /** A condition that is true now, with at most one action that fixes it. */
 const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, onDismiss, dismissLabel = 'Dismiss', size: sizeProp, ...props }, forwardedRef) => {
   const contextSize = React.useContext(NoticeSizeContext);
-  const size = sizeProp ?? contextSize ?? '2';
+  const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
   const trailing =
     action || onDismiss ? (
       <span className="rt-NoticeActions">
@@ -123,7 +124,7 @@ Notice.displayName = 'Notice';
 const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
   ({ confirmLabel, cancelLabel = 'Not now', onConfirm, onCancel, busy = false, size: sizeProp, color = 'gray', ...props }, forwardedRef) => {
     const contextSize = React.useContext(NoticeSizeContext);
-    const size = sizeProp ?? contextSize ?? '2';
+    const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
     return (
     <Strip
       {...props}

package/src/components/popover.css

@@ -1,14 +1,5 @@
 .rt-PopoverContent {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
-  /* Base state: use --color-panel which adapts to theme context */
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+  background-color: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
@@ -27,19 +18,6 @@
 
   transform-origin: var(--radix-popover-content-transform-origin);
 
-  /* Reduced motion support */
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--color-panel-solid);
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: var(--color-panel-translucent);
-    backdrop-filter: var(--backdrop-filter-panel);
-  }
-
   /* Toolbar integration */
   &:where([data-has-toolbar]) {
     /* When toolbar is present, top padding equals toolbar height */
@@ -56,15 +34,15 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  column-gap: var(--space-1);
+  column-gap: var(--space-2);
   padding: var(--popover-toolbar-padding);
-  background-color: var(--color-panel);
+  background-color: var(--color-panel-solid);
 }
 
 .rt-PopoverToolbarSection {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .rt-PopoverToolbarLeft { justify-self: start; }
@@ -89,24 +67,24 @@
 @breakpoints {
   .rt-PopoverContent {
     &:where(.rt-r-size-1) {
-      --popover-content-padding: var(--space-3);
-      --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-2)));
-    }
-    &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-4);
-      --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-3)));
+      --popover-toolbar-padding: var(--space-3);
+      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-3)));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-5);
       --popover-toolbar-padding: var(--space-3);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-4)));
+      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-4)));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.rt-r-size-3) {
       --popover-content-padding: var(--space-6);
       --popover-toolbar-padding: var(--space-4);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-5)));
+      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-5)));
+    }
+    &:where(.rt-r-size-4) {
+      --popover-content-padding: var(--space-7);
+      --popover-toolbar-padding: var(--space-5);
+      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-6)));
     }
   }
 }

package/src/components/popover.props.tsx

@@ -5,7 +5,6 @@ import { widthPropDefs } from '../props/width.props.js';
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
 const contentSizes = ['1', '2', '3', '4'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const popoverContentPropDefs = {
   ...asChildPropDef,
@@ -16,7 +15,6 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
@@ -26,7 +24,6 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 type PopoverContentOwnProps = GetPropDefTypes<

package/src/components/popover.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
-import { useThemeContext } from './theme.js';
 
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -59,14 +59,12 @@ interface PopoverContentProps
   container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>['container'];
 }
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
-  (props, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, popoverContentPropDefs.size);
     const {
       className,
       forceMount,
       container,
-      material: _material,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
 
@@ -108,7 +106,6 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             {...contentProps}
             ref={combinedRef}
             aria-labelledby={labelId}
-            data-material={resolvedMaterial}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>

package/src/components/progress.css

@@ -2,6 +2,9 @@
   --progress-value: 0;
   --progress-max: 100;
   --progress-duration: var(--progress-default-duration);
+  --progress-height: var(--progress-slider-height-2);
+  --progress-radius: var(--progress-slider-radius-2);
+  --progress-indicator-radius: var(--progress-slider-radius-2);
   pointer-events: none;
   position: relative;
   overflow: hidden;
@@ -9,31 +12,7 @@
   height: var(--progress-height);
   border-radius: var(--progress-radius);
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
-
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 }
 
 .rt-ProgressIndicator {
@@ -49,11 +28,7 @@
    * `.rt-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
    * visible at very low values, as the width form did.
    */
-  transform: translateX(
-    calc(
-      -100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))
-    )
-  );
+  transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow;
@@ -83,37 +58,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ProgressRoot {
-    &:where(.rt-r-size-1) {
-      --progress-height: var(--progress-slider-height-1);
-      --progress-radius: var(--progress-slider-radius-1);
-      --progress-indicator-radius: var(--progress-slider-radius-1);
-    }
-    &:where(.rt-r-size-2) {
-      --progress-height: var(--progress-slider-height-2);
-      --progress-radius: var(--progress-slider-radius-2);
-      --progress-indicator-radius: var(--progress-slider-radius-2);
-    }
-    &:where(.rt-r-size-3) {
-      --progress-height: var(--progress-slider-height-3);
-      --progress-radius: var(--progress-slider-radius-3);
-      --progress-indicator-radius: var(--progress-slider-radius-3);
-    }
-    &:where(.rt-r-size-4) {
-      --progress-height: var(--progress-slider-height-4);
-      --progress-radius: var(--progress-slider-radius-4);
-      --progress-indicator-radius: var(--progress-slider-radius-4);
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANTS                                                                                        *
@@ -126,23 +70,6 @@
   background-color: var(--gray-2);
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
@@ -153,20 +80,6 @@
 .rt-ProgressRoot:where(.rt-variant-soft) {
   background-color: var(--gray-3);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    background-color: var(--gray-3);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
@@ -178,22 +91,7 @@
   /* Base state: no background, just border */
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    box-shadow: inset 0 0 0 1px var(--gray-6);
-  }
-
-  &:where([data-material='translucent']) {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
 }
-

package/src/components/progress.props.tsx

@@ -3,17 +3,14 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'soft', 'outline'] as const;
 
 const progressPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...radiusPropDef,
   duration: { type: 'string' },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   duration: PropDef<string>;
 };

package/src/components/radio-cards.css

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 
   & > * {
     /* Avoid unintentional drag interactions (e.g. on images) */
@@ -130,19 +130,19 @@
 @breakpoints {
   .rt-RadioCardsItem {
     &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
     &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
     }
   }
 }

package/src/components/radio-cards.props.tsx

@@ -8,20 +8,17 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4', '5'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
-const materials = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/radio-cards.tsx

@@ -6,7 +6,6 @@ import { radioCardsRootPropDefs } from './radio-cards.props.js';
 import { Grid } from './grid.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
-import { useThemeContext } from './theme.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -35,12 +34,9 @@ interface RadioCardsRootProps
     RadioCardsRootOwnProps {}
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       className,
       color,
-      material: _material,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
@@ -48,7 +44,6 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
         <Grid asChild>
           <RadioGroupPrimitive.Root
             data-accent-color={color}
-            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.css

@@ -1,7 +1,7 @@
 .rt-RadioGroupRoot {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }
 
 .rt-RadioGroupItem {

package/src/components/radio-group.props.tsx

@@ -4,7 +4,7 @@ import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Radio: a group offers exactly what its items can draw.
 const variants = baseRadioPropDefs.variant.values;
 

package/src/components/radio-group.tsx

@@ -8,6 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.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';
@@ -40,12 +41,13 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
   (
     {
       color = radioGroupRootPropDefs.color.default,
-      size = radioGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = radioGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<RadioGroupRootProps>,
     forwardedRef
   ) => {
+    const size = useThemeSize(sizeProp, radioGroupRootPropDefs.size);
     const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
     return (

package/src/components/radio.tsx

@@ -7,6 +7,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 import { radioPropDefs } from './radio.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
@@ -24,7 +25,8 @@ type RadioInputProps = ComponentPropsWithout<
 >;
 interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
 
-const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
+const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, radioPropDefs.size);
   const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,

package/src/components/schemas/base-button.schema.ts

@@ -118,15 +118,6 @@ export const BaseButtonSchema = z
       .default(false)
       .describe('Loading state that shows a spinner and disables interaction'),
 
-    /**
-     * Material type for visual rendering and depth effects
-     * Controls how the button renders its visual elements
-     */
-    material: z
-      .enum(['solid', 'translucent'])
-      .optional()
-      .describe('Material type for visual rendering and depth effects'),
-
     /**
      * Flush mode that removes visual padding for seamless text integration
      * Only effective with ghost variant

package/src/components/scroll-area.css

@@ -1,12 +1,14 @@
 .radix-themes {
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-2);
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
 }
 
 .rt-ScrollAreaRoot {
@@ -73,31 +75,8 @@
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
-    min-width: var(--space-4);
-    min-height: var(--space-4);
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ScrollAreaScrollbar {
-    &:where(.rt-r-size-1) {
-      --scrollarea-scrollbar-size: var(--space-1);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-2) {
-      --scrollarea-scrollbar-size: var(--space-2);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-3) {
-      --scrollarea-scrollbar-size: var(--space-3);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
+    min-width: var(--space-5);
+    min-height: var(--space-5);
   }
 }
 
@@ -166,7 +145,7 @@
 
 :root,
 .radix-themes {
-  --scroll-fade-size: var(--space-6);
+  --scroll-fade-size: var(--space-7);
 }
 
 /*

package/src/components/scroll-area.props.tsx

@@ -3,12 +3,10 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
 const scrollbarsValues = ['vertical', 'horizontal', 'both'] as const;
 
 const scrollAreaPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   ...radiusPropDef,
   scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' },
   /**
@@ -19,7 +17,6 @@ const scrollAreaPropDefs = {
    */
   fade: { type: 'boolean', default: false },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   scrollbars: PropDef<(typeof scrollbarsValues)[number]>;
   fade: PropDef<boolean>;
 };