@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/dialog.props.tsx

@@ -7,7 +7,6 @@ import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const alignValues = ['start', 'center'] as const;
 const contentSizes = ['1', '2', '3', '4'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const dialogContentPropDefs = {
   ...asChildPropDef,
@@ -24,7 +23,6 @@ const dialogContentPropDefs = {
     default: '3',
     responsive: true,
   },
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
@@ -32,7 +30,6 @@ const dialogContentPropDefs = {
 } satisfies {
   align: PropDef<(typeof alignValues)[number]>;
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/dialog.tsx

@@ -38,11 +38,9 @@ DialogTrigger.displayName = 'Dialog.Trigger';
 // them on every render.
 const {
   align: alignPropDef,
-  material: materialPropDef,
   ...contentPropDefs
 } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
-const materialPropDefs = { material: materialPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface DialogContentProps
@@ -54,20 +52,10 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
   ({ align, ...props }, forwardedRef) => {
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
-
-    const { material: extractedMaterial } = extractProps(
-      { material: props.material },
-      materialPropDefs,
-    );
-
-
-    const materialValue = extractedMaterial;
-
     const {
       className,
       forceMount,
       container,
-      material: __,
       ...contentProps
     } = extractProps(props, contentPropDefs);
 
@@ -143,7 +131,6 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                   {...contentProps}
                   ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
-                  data-material={materialValue}
                   tabIndex={-1}
                   role="dialog"
                   aria-modal="true"
@@ -176,7 +163,7 @@ type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
   (props, forwardedRef) => (
     <DialogPrimitive.Title asChild>
-      <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Title>
   ),
 );

package/src/components/dropdown-menu.css

@@ -95,7 +95,7 @@
 }
 
 .rt-DropdownMenuDrillDownBackIcon {
-  margin-inline-start: calc(-2px * var(--scaling));
+  margin-inline-start: calc(-2px * var(--scale));
   margin-inline-end: 0;
 }
 

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,
@@ -33,7 +34,6 @@ import { MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
-  resolveMenuMaterial,
   toAriaKeyShortcuts,
   useResolvedResponsiveValue,
 } from './_internal/base-menu.utils.js';
@@ -92,7 +92,6 @@ type DropdownMenuSurfaceProps = GetPropDefTypes<typeof dropdownMenuSubContentPro
 type DropdownMenuContentContextValue = {
   size?: DropdownMenuSurfaceProps['size'];
   color?: DropdownMenuSurfaceProps['color'];
-  material?: DropdownMenuSurfaceProps['material'];
 };
 const DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});
 
@@ -130,11 +129,9 @@ interface DropdownMenuContentProps
   virtualized?: boolean;
 }
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dropdownMenuContentPropDefs.size);
     const themeContext = useThemeContext();
-
-
-    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = dropdownMenuContentPropDefs.size.default,
     } = props;
@@ -144,7 +141,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       color,
       container,
       forceMount,
-      material: _material,
       submenuBehavior,
       virtualized = false,
       onEscapeKeyDown,
@@ -177,8 +173,8 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     };
 
     const contextValue = React.useMemo(
-      () => ({ size, color: resolvedColor, material }),
-      [size, resolvedColor, material],
+      () => ({ size, color: resolvedColor }),
+      [size, resolvedColor],
     );
 
     const contentBody = (
@@ -196,7 +192,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
         <Theme asChild>
           <DropdownMenuPrimitive.Content
             data-accent-color={resolvedColor}
-            data-material={material}
             align="start"
             sideOffset={4}
             collisionPadding={10}
@@ -658,14 +653,10 @@ DropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';
 const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props, forwardedRef) => {
     const parent = React.useContext(DropdownMenuContentContext);
-    const themeContext = useThemeContext();
-
 
     // A submenu inherits the parent surface, and its own props win.
     const size = props.size ?? parent.size;
     const color = props.color ?? parent.color;
-    const material =
-      props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
     const {
       className,
@@ -673,7 +664,6 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
       container,
       forceMount,
       color: _color,
-      material: _material,
       virtualized = false,
       ...subContentProps
     } = extractProps({ ...props, size }, dropdownMenuSubContentPropDefs);
@@ -681,8 +671,8 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
     const scalarSize = useResolvedResponsiveValue(size, dropdownMenuSubContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, color, material }),
-      [size, color, material],
+      () => ({ size, color }),
+      [size, color],
     );
 
     const body = (
@@ -696,8 +686,7 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
         <Theme asChild>
           <DropdownMenuPrimitive.SubContent
             data-accent-color={color}
-            data-material={material}
-            alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+            alignOffset={getMenuAlignOffset(scalarSize)}
             // Side offset accounts for the outer solid box-shadow
             sideOffset={1}
             collisionPadding={10}
@@ -757,7 +746,6 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
       virtualized: _virtualized,
       size: _size,
       color: _color,
-      material: _material,
       ...panelProps
     } = omitPopperProps(props);
 

package/src/components/hover-card.css

@@ -24,15 +24,15 @@
 @breakpoints {
   .rt-HoverCardContent {
     &:where(.rt-r-size-1) {
-      --hover-card-content-padding: var(--space-3);
+      --hover-card-content-padding: var(--space-4);
       border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-2) {
-      --hover-card-content-padding: var(--space-4);
+      --hover-card-content-padding: var(--space-5);
       border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-3) {
-      --hover-card-content-padding: var(--space-5);
+      --hover-card-content-padding: var(--space-6);
       border-radius: var(--radius-surface-5);
     }
   }

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-1);
-    }
-    &:where(.rt-r-size-2) {
-      --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
-    }
-    &:where(.rt-r-size-3) {
-      --icon-button-ghost-padding: var(--space-2);
-    }
-    &:where(.rt-r-size-4) {
-      --icon-button-ghost-padding: var(--space-3);
-    }
-  }
-}

package/src/components/image.css

@@ -208,7 +208,7 @@
   font-size: var(--font-size-1); /* Small, readable text */
   font-weight: var(--font-weight-regular); /* Regular weight for readability */
   color: var(--gray-11); /* Subtle but readable color */
-  margin-top: var(--space-2); /* Consistent spacing from image */
+  margin-top: var(--space-3); /* Consistent spacing from image */
   text-align: center; /* Centered alignment for visual balance */
 
   /* 

package/src/components/kbd.css

@@ -26,7 +26,7 @@
   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);
+  padding: var(--space-2) var(--space-3);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
@@ -140,91 +140,91 @@
       font-size: var(--font-size-0);
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
-      padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
+      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
       border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-1) {
       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);
+      padding: var(--space-2) var(--space-3);
       border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      padding: var(--space-1) calc(var(--space-2) * 1.25);
+      padding: var(--space-2) calc(var(--space-3) * 1.25);
       border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
+      padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
       border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
-      padding: calc(var(--space-1) * 1.5) var(--space-3);
+      padding: calc(var(--space-2) * 1.5) var(--space-4);
       border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-5) {
       font-size: var(--font-size-5);
       line-height: var(--line-height-5);
       letter-spacing: var(--letter-spacing-5);
-      padding: calc(var(--space-1) * 1.75) calc(var(--space-3) * 1.25);
+      padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.25);
       border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-6) {
       font-size: var(--font-size-6);
       line-height: var(--line-height-6);
       letter-spacing: var(--letter-spacing-6);
-      padding: var(--space-2) calc(var(--space-3) * 1.5);
+      padding: var(--space-3) calc(var(--space-4) * 1.5);
       border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-7) {
       font-size: var(--font-size-7);
       line-height: var(--line-height-7);
       letter-spacing: var(--letter-spacing-7);
-      padding: calc(var(--space-2) * 1.25) var(--space-4);
+      padding: calc(var(--space-3) * 1.25) var(--space-5);
       border-radius: var(--radius-pill-5);
     }
     &:where(.rt-r-size-8) {
       font-size: var(--font-size-8);
       line-height: var(--line-height-8);
       letter-spacing: var(--letter-spacing-8);
-      padding: calc(var(--space-2) * 1.5) calc(var(--space-4) * 1.25);
+      padding: calc(var(--space-3) * 1.5) calc(var(--space-5) * 1.25);
       border-radius: var(--radius-pill-5);
     }
     &:where(.rt-r-size-9) {
       font-size: var(--font-size-9);
       line-height: var(--line-height-9);
       letter-spacing: var(--letter-spacing-9);
-      padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.5);
+      padding: calc(var(--space-3) * 1.75) calc(var(--space-5) * 1.5);
       border-radius: var(--radius-pill-6);
     }
     &: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-2) * 2.0) calc(var(--space-4) * 1.75);
+      padding: calc(var(--space-3) * 2.0) calc(var(--space-5) * 1.75);
       border-radius: var(--radius-pill-6);
     }
     &: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-2) * 2.25) calc(var(--space-4) * 2.0);
+      padding: calc(var(--space-3) * 2.25) calc(var(--space-5) * 2.0);
       border-radius: var(--radius-pill-6);
     }
     &: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-2) * 2.5) calc(var(--space-4) * 2.25);
+      padding: calc(var(--space-3) * 2.5) calc(var(--space-5) * 2.25);
       border-radius: var(--radius-pill-6);
     }
   }

package/src/components/message-scroller.css

@@ -40,7 +40,7 @@
    would be replaced by it. */
 .rt-MessageScrollerButton {
   position: absolute;
-  bottom: var(--space-3);
+  bottom: var(--space-4);
   left: 0;
   right: 0;
   margin-inline: auto;

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.css

@@ -35,24 +35,24 @@
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   width: 100%;
-  gap: var(--space-4);
+  gap: var(--space-5);
 }
 
 /* Size variants - padding based */
 .rt-NavbarRoot[data-size='1'] .rt-NavbarContainer {
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
 }
 
 .rt-NavbarRoot[data-size='2'] .rt-NavbarContainer {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-4) var(--space-5);
 }
 
 .rt-NavbarRoot[data-size='3'] .rt-NavbarContainer {
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-5) var(--space-6);
 }
 
 .rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
-  padding: var(--space-5) var(--space-6);
+  padding: var(--space-6) var(--space-7);
 }
 
 /* Slot overflow handling */
@@ -69,6 +69,6 @@
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .rt-NavbarContainer {
-    gap: var(--space-3);
+    gap: var(--space-4);
   }
 }

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,

package/src/components/notice.css

@@ -13,13 +13,7 @@
   border-radius: var(--notice-radius);
 
   /* An alpha fill, so the strip is a tint of whatever it sits on, as Callout was. */
-  --material-blend: 100%;
-  background-color: color-mix(in srgb, var(--accent-a3), transparent calc(100% - var(--material-blend)));
-
-  &:where([data-material='translucent']) {
-    --material-blend: 60%;
-    backdrop-filter: var(--backdrop-filter-components-enabled);
-  }
+  background-color: var(--accent-a3);
 
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -28,7 +22,7 @@
 
 /* Gray is the resting category: its fill is one step quieter and its words are the ordinary ink. */
 .rt-NoticeRoot:where([data-accent-color='gray']) {
-  background-color: color-mix(in srgb, var(--gray-a3), transparent calc(100% - var(--material-blend)));
+  background-color: var(--gray-a3);
   color: var(--gray-12);
 }
 
@@ -56,7 +50,7 @@
   display: flex;
   flex: none;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
   /* A button is taller than a line: it centres on the first line and does not grow the strip. */
   margin-block: calc((var(--notice-line) - var(--notice-control)) / 2);
 }
@@ -73,24 +67,24 @@
 .rt-NoticeRoot {
   /* Callout's spacing: an even inset on every side, wider steps between icon, words and actions. */
   &:where(.rt-r-size-1) {
-    gap: var(--space-2);
-    padding: var(--space-3);
+    gap: var(--space-3);
+    padding: var(--space-4);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
     --notice-radius: var(--radius-surface-1);
     --notice-icon-size: var(--content-icon-size-1);
   }
   &:where(.rt-r-size-2) {
-    gap: var(--space-3);
-    padding: var(--space-4);
+    gap: var(--space-4);
+    padding: var(--space-5);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
     --notice-radius: var(--radius-surface-2);
     --notice-icon-size: var(--content-icon-size-2);
   }
   &:where(.rt-r-size-3) {
-    gap: var(--space-4);
-    padding: var(--space-5);
+    gap: var(--space-5);
+    padding: var(--space-6);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
     --notice-radius: var(--radius-surface-3);