@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/theme.tsx

@@ -6,6 +6,7 @@ import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
 import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { ThemeSizeContext } from '../helpers/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 
@@ -17,10 +18,9 @@ const noop = () => {};
 type ThemeAppearance = (typeof themePropDefs.appearance.values)[number];
 type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
 type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
-type ThemeMaterial = (typeof themePropDefs.material.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
-type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
+type ThemeSize = (typeof themePropDefs.size.values)[number];
 // Headings follow the body font until something sets this, so `undefined` is a
 // meaningful value here rather than a missing one.
 type ThemeHeadingFontFamily = ThemeFontFamily | undefined;
@@ -29,11 +29,10 @@ interface ThemeChangeHandlers {
   onAppearanceChange: (appearance: ThemeAppearance) => void;
   onAccentColorChange: (accentColor: ThemeAccentColor) => void;
   onGrayColorChange: (grayColor: ThemeGrayColor) => void;
-  onMaterialChange: (material: ThemeMaterial) => void;
   onRadiusChange: (radius: ThemeRadius) => void;
-  onScalingChange: (scaling: ThemeScaling) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
   onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;
+  onSizeChange: (size: ThemeSize) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -41,11 +40,10 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   accentColor: ThemeAccentColor;
   grayColor: ThemeGrayColor;
   resolvedGrayColor: ThemeGrayColor;
-  material: ThemeMaterial;
   radius: ThemeRadius;
-  scaling: ThemeScaling;
   fontFamily: ThemeFontFamily;
   headingFontFamily: ThemeHeadingFontFamily;
+  size: ThemeSize;
 }
 // Default theme values used when components render outside a Theme provider
 const defaultThemeContext: ThemeContextValue = {
@@ -53,19 +51,17 @@ const defaultThemeContext: ThemeContextValue = {
   accentColor: themePropDefs.accentColor.default,
   grayColor: themePropDefs.grayColor.default,
   resolvedGrayColor: themePropDefs.grayColor.default,
-  material: themePropDefs.material.default,
   radius: themePropDefs.radius.default,
-  scaling: themePropDefs.scaling.default,
   fontFamily: themePropDefs.fontFamily.default,
   headingFontFamily: undefined,
+  size: themePropDefs.size.default,
   onAppearanceChange: noop,
   onAccentColorChange: noop,
   onGrayColorChange: noop,
-  onMaterialChange: noop,
   onRadiusChange: noop,
-  onScalingChange: noop,
   onFontFamilyChange: noop,
   onHeadingFontFamilyChange: noop,
+  onSizeChange: noop,
 };
 
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
@@ -96,72 +92,61 @@ const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRe
 });
 Theme.displayName = 'Theme';
 
-const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
-  (props, forwardedRef) => {
-    const {
-      appearance: appearanceProp = themePropDefs.appearance.default,
-      accentColor: accentColorProp = themePropDefs.accentColor.default,
-      grayColor: grayColorProp = themePropDefs.grayColor.default,
-      material: materialProp = themePropDefs.material.default,
-      radius: radiusProp = themePropDefs.radius.default,
-      scaling: scalingProp = themePropDefs.scaling.default,
-      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
-      headingFontFamily: headingFontFamilyProp,
-      hasBackground = themePropDefs.hasBackground.default,
-      ...rootProps
-    } = props;
-
-
-    // Each of these follows its prop but stays independently settable, so
-    // `ThemePanel` can change the theme at runtime. Syncing during render
-    // rather than in an effect matters here: an effect would commit the old
-    // theme first and re-render every consumer of the context a second time.
-    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
-    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
-    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
-
-    const [material, setMaterial] = usePropSyncedState(materialProp);
+const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((props, forwardedRef) => {
+  const {
+    appearance: appearanceProp = themePropDefs.appearance.default,
+    accentColor: accentColorProp = themePropDefs.accentColor.default,
+    grayColor: grayColorProp = themePropDefs.grayColor.default,
+    radius: radiusProp = themePropDefs.radius.default,
+    fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
+    headingFontFamily: headingFontFamilyProp,
+    size: sizeProp = themePropDefs.size.default,
+    hasBackground = themePropDefs.hasBackground.default,
+    ...rootProps
+  } = props;
 
-    const [radius, setRadius] = usePropSyncedState(radiusProp);
-    const [scaling, setScaling] = usePropSyncedState(scalingProp);
-    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
-    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  // Each of these follows its prop but stays independently settable, so
+  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // rather than in an effect matters here: an effect would commit the old
+  // theme first and re-render every consumer of the context a second time.
+  const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
+  const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
+  const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
+  const [radius, setRadius] = usePropSyncedState(radiusProp);
+  const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
+  const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  const [size, setSize] = usePropSyncedState(sizeProp);
 
-    return (
-      <ThemeImpl
-        {...rootProps}
-        ref={forwardedRef}
-        isRoot
-        hasBackground={hasBackground}
-        //
-        appearance={appearance}
-        accentColor={accentColor}
-        grayColor={grayColor}
-        material={material}
-        radius={radius}
-        scaling={scaling}
-        fontFamily={fontFamily}
-        headingFontFamily={headingFontFamily}
-        //
-        onAppearanceChange={setAppearance}
-        onAccentColorChange={setAccentColor}
-        onGrayColorChange={setGrayColor}
-        onMaterialChange={setMaterial}
-        onRadiusChange={setRadius}
-        onScalingChange={setScaling}
-        onFontFamilyChange={setFontFamily}
-        onHeadingFontFamilyChange={setHeadingFontFamily}
-      />
-    );
-  },
-);
+  return (
+    <ThemeImpl
+      {...rootProps}
+      ref={forwardedRef}
+      isRoot
+      hasBackground={hasBackground}
+      //
+      appearance={appearance}
+      accentColor={accentColor}
+      grayColor={grayColor}
+      radius={radius}
+      fontFamily={fontFamily}
+      headingFontFamily={headingFontFamily}
+      size={size}
+      //
+      onAppearanceChange={setAppearance}
+      onAccentColorChange={setAccentColor}
+      onGrayColorChange={setGrayColor}
+      onRadiusChange={setRadius}
+      onFontFamilyChange={setFontFamily}
+      onHeadingFontFamilyChange={setHeadingFontFamily}
+      onSizeChange={setSize}
+    />
+  );
+});
 ThemeRoot.displayName = 'ThemeRoot';
 
 type ThemeImplElement = React.ElementRef<'div'>;
 interface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}
-interface ThemeImplPublicProps
-  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
-    ThemeOwnProps {}
+interface ThemeImplPublicProps extends ComponentPropsWithout<'div', RemovedProps | 'dir'>, ThemeOwnProps {}
 interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
   isRoot?: boolean;
 }
@@ -184,28 +169,25 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,
     accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,
     grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,
-    material = props.material ?? context?.material ?? themePropDefs.material.default,
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
-    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
     headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
+    size = props.size ?? context?.size ?? themePropDefs.size.default,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
     onGrayColorChange = noop,
-    onMaterialChange = noop,
     onRadiusChange = noop,
-    onScalingChange = noop,
     onFontFamilyChange = noop,
     onHeadingFontFamilyChange = noop,
+    onSizeChange = noop,
     //
     ...themeProps
   } = props;
   const Comp = asChild ? Slot.Root : 'div';
   const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;
   const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';
-  const hasBackground =
-    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
+  const hasBackground = hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
   // `data-os` can only be resolved on the client. Writing it straight to the
   // DOM keeps it out of the server markup — so hydration still matches — without
@@ -234,65 +216,63 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           accentColor,
           grayColor,
           resolvedGrayColor,
-          material,
           radius,
-          scaling,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
           onGrayColorChange,
-          onMaterialChange,
           onRadiusChange,
-          onScalingChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         }),
         [
           appearance,
           accentColor,
           grayColor,
           resolvedGrayColor,
-          material,
           radius,
-          scaling,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
           onGrayColorChange,
-          onMaterialChange,
           onRadiusChange,
-          onScalingChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         ],
       )}
     >
-      <Comp
-        data-is-root-theme={isRoot ? 'true' : 'false'}
-        data-accent-color={accentColor}
-        data-gray-color={resolvedGrayColor}
-        // for nested `Theme` background
-        data-has-background={hasBackground ? 'true' : 'false'}
-        data-material={material}
-        data-radius={radius}
-        data-scaling={scaling}
-        data-font-family={fontFamily}
-        data-heading-font-family={headingFontFamily}
-        ref={composedRef}
-        {...themeProps}
-        className={classNames(
-          'radix-themes',
-          {
-            light: appearance === 'light',
-            dark: appearance === 'dark',
-          },
-          themeProps.className,
-        )}
-      />
+      {/* Size travels on its own context as a bare string, so the components
+          that read it do not re-render when another theme value changes. */}
+      <ThemeSizeContext.Provider value={size}>
+        <Comp
+          data-is-root-theme={isRoot ? 'true' : 'false'}
+          data-accent-color={accentColor}
+          data-gray-color={resolvedGrayColor}
+          // for nested `Theme` background
+          data-has-background={hasBackground ? 'true' : 'false'}
+          data-radius={radius}
+          data-font-family={fontFamily}
+          data-heading-font-family={headingFontFamily}
+          ref={composedRef}
+          {...themeProps}
+          className={classNames(
+            'radix-themes',
+            {
+              light: appearance === 'light',
+              dark: appearance === 'dark',
+            },
+            themeProps.className,
+          )}
+        />
+      </ThemeSizeContext.Provider>
     </ThemeContext.Provider>
   );
 });

package/src/components/toolbar.css

@@ -8,7 +8,7 @@
  */
 
 .rt-Toolbar {
-  --toolbar-group-inset: calc(var(--space-1) / 2);
+  --toolbar-group-inset: calc(var(--space-2) / 2);
 
   display: flex;
   align-items: center;
@@ -28,29 +28,29 @@
   &:where(.rt-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
     --toolbar-radius: var(--radius-pill-1);
-    --toolbar-gap: var(--space-1);
-    --toolbar-title-gap: var(--space-2);
+    --toolbar-gap: var(--space-2);
+    --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
     --toolbar-radius: var(--radius-pill-2);
-    --toolbar-gap: var(--space-2);
-    --toolbar-title-gap: var(--space-3);
+    --toolbar-gap: var(--space-3);
+    --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
     --toolbar-radius: var(--radius-pill-3);
-    --toolbar-gap: var(--space-2);
-    --toolbar-title-gap: var(--space-4);
+    --toolbar-gap: var(--space-3);
+    --toolbar-title-gap: var(--space-5);
   }
 
   &:where(.rt-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
     --toolbar-radius: var(--radius-pill-4);
-    --toolbar-gap: var(--space-3);
-    --toolbar-title-gap: var(--space-5);
+    --toolbar-gap: var(--space-4);
+    --toolbar-title-gap: var(--space-6);
   }
 }
 

package/src/components/toolbar.props.tsx

@@ -12,7 +12,8 @@ const orientations = ['horizontal', 'vertical'] as const;
 const toolbarRootPropDefs = {
   /**
    * Size step of the row and of every control in it that doesn't set its own `size`.
-   * Matches Button's sizes: 1 (24px) to 4 (48px).
+   * Matches Button's sizes: 1 (28px) to 4 (48px). Unset inside `Shell.PaneHeader` or
+   * `Shell.PaneFooter`, it rests one step above the Shell's `size`.
    */
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2' },
   /**

package/src/components/toolbar.tsx

@@ -9,7 +9,9 @@ import { Button } from './button.js';
 import { IconButton } from './icon-button.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 { usePaneBandSize } from './_internal/pane-chrome.js';
 
 import type { ButtonProps } from './button.js';
 import type { TextProps } from './text.js';
@@ -88,10 +90,13 @@ interface ToolbarProps
  * ```
  */
 const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {
-  const size: ToolbarSize = props.size ?? toolbarRootPropDefs.size.default;
+  // In a Shell pane's header or footer, a toolbar with no size rests one step above the Shell's.
+  const band = usePaneBandSize();
+  // Elsewhere it takes the nearest Theme's size.
+  const size: ToolbarSize = useThemeSize(props.size ?? band ?? undefined, toolbarRootPropDefs.size);
   const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
-    props,
+    { ...props, size },
     toolbarRootPropDefs,
     marginPropDefs,
   );

package/src/components/tooltip.css

@@ -1,6 +1,6 @@
 .rt-TooltipContent {
   box-sizing: border-box;
-  padding: var(--space-1) var(--space-2);
+  padding: var(--space-2) var(--space-3);
   background-color: var(--gray-12);
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */

package/src/components/virtual-menu.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
-import { useThemeContext } from './theme.js';
 
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
@@ -194,15 +193,14 @@ function VirtualMenuRoot<T>({
   const parentRef = React.useRef<HTMLDivElement>(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);
   const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();
-  const { scaling } = useThemeContext();
 
   // Resolve item height: explicit prop > own size > parent menu > default size '2'.
   // Heights follow the theme scaling, like the --base-menu-item-height token.
   const estimatedItemSize =
     estimatedItemSizeProp ??
     (sizeProp
-      ? getMenuItemHeight(sizeProp, scaling)
-      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));
+      ? getMenuItemHeight(sizeProp)
+      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));
 
   // Validate props
   if (!itemLabel && !RenderItem) {

package/src/helpers/index.ts

@@ -13,3 +13,4 @@ export * from './map-prop-values.js';
 export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';
+export * from './theme-size.js';

package/src/helpers/map-prop-values.ts

@@ -1,5 +1,3 @@
-import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';
-import type { spinnerPropDefs } from '../components/spinner.props.js';
 import type { textPropDefs } from '../components/text.props.js';
 import type { Responsive } from '../props/prop-def.js';
 
@@ -16,19 +14,4 @@ function mapResponsiveProp<Input extends string, Output>(
   );
 }
 
-
-function mapButtonSizeToSpinnerSize(
-  size: (typeof baseButtonPropDefs.size.values)[number]
-): (typeof spinnerPropDefs.size.values)[number] {
-  switch (size) {
-    case '1':
-      return '1';
-    case '2':
-    case '3':
-      return '2';
-    case '4':
-      return '3';
-  }
-}
-
-export { mapResponsiveProp, mapButtonSizeToSpinnerSize };
+export { mapResponsiveProp };

package/src/helpers/theme-size.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+
+type ThemeSize = '1' | '2' | '3' | '4';
+
+/** The rest of the 1-4 index when no Theme states a size. */
+const THEME_SIZE_DEFAULT: ThemeSize = '2';
+
+/**
+ * The app-wide size index, provided by `Theme` beside `ThemeContext`.
+ *
+ * It is its own context, holding one string, so a component that only needs
+ * the size does not re-render when the accent colour or appearance changes.
+ */
+const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
+ThemeSizeContext.displayName = 'ThemeSizeContext';
+
+interface SizePropDef {
+  values: readonly string[];
+  default?: string;
+}
+
+/**
+ * Maps the theme size onto a component's own range: the value itself when the
+ * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale
+ * is `3`, on a 1-2 scale it is `2`).
+ */
+function clampSize(size: ThemeSize, values: readonly string[]): string {
+  if (values.includes(size)) return size;
+  const n = Number(size);
+  let nearest = values[0];
+  let distance = Infinity;
+  for (let i = 0; i < values.length; i++) {
+    const d = Math.abs(Number(values[i]) - n);
+    if (d < distance) {
+      distance = d;
+      nearest = values[i];
+    }
+  }
+  return nearest;
+}
+
+/**
+ * The size a component on the 1-4 index takes: what the caller said, else the
+ * nearest Theme's size, mapped into the component's range.
+ */
+function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (explicit !== undefined) return explicit;
+  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
+  return clampSize(themeSize, propDef.values) as V;
+}
+
+/**
+ * Fills `size` from the nearest Theme when the caller left it unset, so the
+ * result can go straight into `extractProps`. An explicit size, responsive
+ * object included, wins.
+ *
+ * Returns the same props object when there is nothing to fill: when a size is
+ * set, or when the theme size resolves to the prop def's own default (the
+ * common case, a Theme with no size), so `extractProps` applies it as before.
+ */
+function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (props.size !== undefined) return props;
+  const size = clampSize(themeSize, propDef.values);
+  if (size === propDef.default) return props;
+  return { ...props, size };
+}
+
+export { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };
+export type { ThemeSize };

package/src/styles/tokens/base.css

@@ -5,5 +5,3 @@
 @import './shadow.css';
 @import './font-family.css';
 @import './typography.css';
-@import './blur.css';
-@import './opacity.css';

package/src/styles/tokens/color.css

@@ -8,11 +8,8 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity));
   --color-surface-solid: white;
-  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
-  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
 
   /*
    * v2's names for the page, its text and its neutral scale, so code written against either
@@ -32,21 +29,14 @@
   --neutral-10: var(--gray-10);
   --neutral-11: var(--gray-11);
   --neutral-12: var(--gray-12);
-
-  /* Material system defaults (solid) - controls color-mix blending for component backgrounds */
-  --material-blend: 100%;
-  --material-alpha: 0;
 }
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-opacity-percentage), transparent);
   --color-surface-solid: var(--gray-2);
-  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
-  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
 }
 
 /*                                     */
@@ -132,28 +122,10 @@
 /*                                     */
 
 .radix-themes {
-  &:where([data-material='solid']) {
-    --color-panel: var(--color-panel-solid);
-    --color-surface: var(--color-surface-solid);
-    --color-dialog: var(--color-dialog-solid);
-    --backdrop-filter-panel: none;
-    --backdrop-filter-components: none;
-    --backdrop-filter-dialog: none;
-    /* Material system for component backgrounds */
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-  &:where([data-material='translucent']) {
-    --color-panel: var(--color-panel-translucent);
-    --color-surface: var(--color-surface-translucent);
-    --color-dialog: var(--color-dialog-translucent);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-    --backdrop-filter-dialog: var(--backdrop-filter-dialog-enabled);
-    /* Material system for component backgrounds */
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
+  /* Solid is the only material, so these always resolve to the opaque surfaces. */
+  --color-panel: var(--color-panel-solid);
+  --color-surface: var(--color-surface-solid);
+  --color-dialog: var(--color-dialog-solid);
 }
 
 /*                                     */