@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/_internal/base-button.props.ts

@@ -1,4 +1,3 @@
-import { parseVariant } from '../../helpers/parse-variant.js';
 import { asChildPropDef } from '../../props/as-child.prop.js';
 import { accentColorPropDef } from '../../props/color.prop.js';
 import { radiusPropDef } from '../../props/radius.prop.js';
@@ -16,20 +15,19 @@ const sizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Available button variants for different visual contexts
- * - raised: lifted off its ground, with an edge and a shadow (the default)
- * - solid: Primary actions that should be noticed first
+ * - raised: lifted off its ground, with an edge and a shadow
+ * - solid: Primary actions that should be noticed first (the default)
  * - 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
  */
-const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
 
 /**
  * Available panel background options (deprecated)
  * @deprecated Use `materials` instead
  */
-const panelBackgrounds = ['solid', 'translucent'] as const;
 
 /**
  * Available material options for visual rendering
@@ -77,7 +75,7 @@ const baseButtonPropDefs = {
   /**
    * Visual variant that determines the button's appearance and context
    */
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...accentColorPropDef,
   ...radiusPropDef,
   /**
@@ -99,7 +97,6 @@ const baseButtonPropDefs = {
    * Panel background type (deprecated)
    * @deprecated Use `material` prop instead. This prop will be removed in a future version.
    */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   /**
    * Flush mode that removes visual padding for seamless text integration
    * Only effective with ghost variant
@@ -111,7 +108,6 @@ const baseButtonPropDefs = {
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
   material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   flush: PropDef<boolean>;
 };
 

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

@@ -7,7 +7,6 @@ import { Flex } from '../flex.js';
 import { Spinner } from '../spinner.js';
 import { VisuallyHidden } from '../visually-hidden.js';
 import { extractProps } from '../../helpers/extract-props.js';
-import { useDeprecatedPanelBackgroundWarning } from '../../helpers/use-deprecation-warning.js';
 import { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';
 import { marginPropDefs } from '../../props/margin.props.js';
 
@@ -74,16 +73,13 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
     color,
     radius,
     material,
-    panelBackground,
     flush,
     disabled = props.loading, // Loading state automatically disables the button
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs, marginPropDefs);
 
-  useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-  // Material takes precedence over panelBackground for backward compatibility
-  const effectiveMaterial = material ?? panelBackground;
+  const effectiveMaterial = material;
 
   // asChild takes precedence over as prop for Radix Slot integration
   // When asChild is true, we use Slot.Root to merge props onto the child element
@@ -135,7 +131,6 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       data-accent-color={color}
       data-radius={radius}
       data-material={effectiveMaterial}
-      data-panel-background={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
       {...baseButtonProps}
       {...accessibilityProps}

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

@@ -27,12 +27,12 @@
   --material-blend: 100%;
   --material-alpha: 0;
 
-  &:where([data-material='solid'], [data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
   }
 
-  &:where([data-material='translucent'], [data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
   }
@@ -43,7 +43,6 @@
   overflow: hidden;
   box-sizing: border-box;
   border-radius: var(--base-card-border-radius);
-  transition: var(--transition-card);
   contain: paint;
 
   /* Padding */
@@ -76,7 +75,6 @@
     content: '';
     position: absolute;
     pointer-events: none;
-    transition: inherit;
     border-radius: calc(var(--base-card-border-radius) - var(--base-card-border-width));
     inset: var(--base-card-border-width);
   }
@@ -86,51 +84,22 @@
   }
 
   /* Backdrop-filter for ::before - applies to outline, soft, surface */
-  :where([data-panel-background='translucent'], [data-material='translucent']) &::before {
+  :where([data-material='translucent']) &::before {
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
-  &:where([data-material='solid'], [data-panel-background='solid'])::before {
+  &:where([data-material='solid'])::before {
     backdrop-filter: none;
   }
 
-  &:where([data-material='translucent'], [data-panel-background='translucent'])::before {
+  &:where([data-material='translucent'])::before {
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
-  /* Interactive scale - applies to all interactive cards */
   &:where(:any-link, button, label) {
     cursor: pointer;
-
-    @media (hover: hover) {
-      &:where(:hover:not([data-state='open'])) {
-        scale: 1.01;
-      }
-    }
-
-    &:where(:active:not([data-state='open'])) {
-      scale: 0.98;
-    }
-  }
-
-  /* Disable scale on Firefox (SVG rendering issues with transforms) */
-  @supports (-moz-appearance: none) {
-    &:where(:any-link, button, label) {
-      &:where(:hover:not([data-state='open'])),
-      &:where(:active:not([data-state='open'])) {
-        scale: 1;
-      }
-    }
-  }
-
-  /* Disable scale on Windows (subpixel text re-rasterization causes flicker) */
-  :where([data-os='windows']) &:where(:any-link, button, label) {
-    &:where(:hover:not([data-state='open'])),
-    &:where(:active:not([data-state='open'])) {
-      scale: 1;
-    }
   }
 }
 
@@ -467,16 +436,16 @@
   }
 
   /* Backdrop-filter handling for ghost - on element, not ::before */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
@@ -530,17 +499,7 @@
   }
 
   /* Prevent backdrop-filter stacking inside overlay components */
-  :where(
-    .rt-PopoverContent,
-    .rt-BaseDialogContent,
-    .rt-BaseMenuContent,
-    .rt-DropdownMenuContent,
-    .rt-ContextMenuContent,
-    .rt-AlertDialogContent,
-    .rt-HoverCardContent,
-    .rt-TooltipContent,
-    .rt-Card
-  ) & {
+  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
     backdrop-filter: none !important;
   }
 }
@@ -560,15 +519,15 @@
   top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
 
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     --card-background-color: var(--color-surface-translucent);
   }
 
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     --card-background-color: var(--color-surface-solid);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     --card-background-color: var(--color-surface-translucent);
   }
 
@@ -657,5 +616,4 @@
 /* A disabled interactive card keeps its look but stops reacting to the pointer. */
 .rt-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
   cursor: default;
-  scale: 1;
 }

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

@@ -29,27 +29,12 @@
   --checkbox-radius-ratio-max: 0.4;
   --checkbox-radius-max: calc(var(--checkbox-size) * var(--checkbox-radius-ratio-max));
 
-
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
 
   &::before {
     content: '';
@@ -57,7 +42,6 @@
     height: var(--checkbox-size);
     width: var(--checkbox-size);
     border-radius: var(--checkbox-border-radius);
-    transition: var(--transition-checkbox);
   }
 }
 
@@ -69,15 +53,11 @@
   /* Required for subpixel alignment in Safari */
   transform: translate(-50%, -50%);
   top: 50%;
-  left: 50%;
+  left: 50%
   
   /* Smooth color transitions for the indicator icon */
-  transition: color var(--duration-1) var(--ease-1);
   
   /* Respect user preference for reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 /***************************************************************************************************
@@ -153,41 +133,21 @@
     &::before {
       color: var(--accent-ink);
       background-color: var(--color-surface-solid);
-      box-shadow: var(--shadow-2);
+      box-shadow: var(--shadow-2)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: var(--color-surface-translucent);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--color-surface-solid);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: var(--color-surface-translucent);
-      }
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-3);
+      background-color: var(--accent-3)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-3);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -198,21 +158,11 @@
     top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
-      background-color: var(--accent-3);
+      background-color: var(--accent-3)
 
       /* Theme-level translucent override for active */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
 
       /* Component-level overrides for active */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-3);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
     }
   }
 
@@ -233,21 +183,11 @@
 
 .rt-BaseCheckboxRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-3);
+    background-color: var(--accent-3)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
@@ -266,53 +206,28 @@
   }
 }
 
-
-
 /* outline */
 
 .rt-BaseCheckboxRoot:where(.rt-variant-outline) {
   &:where([data-state='unchecked']) {
     &::before {
       box-shadow: inset 0 0 0 1px var(--accent-6);
-      color: var(--accent-ink);
+      color: var(--accent-ink)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        box-shadow: inset 0 0 0 1px var(--accent-a6);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        box-shadow: inset 0 0 0 1px var(--accent-6);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        box-shadow: inset 0 0 0 1px var(--accent-a6);
-      }
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7);
+      box-shadow: inset 0 0 0 1px var(--accent-7)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-2);
-        box-shadow: inset 0 0 0 1px var(--accent-7);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -336,48 +251,22 @@
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-6);
+      box-shadow: inset 0 0 0 1px var(--accent-6)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a6);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-2);
-        box-shadow: inset 0 0 0 1px var(--accent-6);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a6);
-      }
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8);
+      box-shadow: inset 0 0 0 1px var(--accent-8)
 
       /* Theme-level translucent override */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a8);
-      }
 
       /* Component-level overrides (higher specificity) */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-3);
-        box-shadow: inset 0 0 0 1px var(--accent-8);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a8);
-      }
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);

package/src/components/_internal/base-checkbox.props.ts

@@ -1,21 +1,17 @@
-import { parseVariant } from '../../helpers/parse-variant.js';
 import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
-const materials = ['solid', 'translucent'] as const;
+const sizes = ['1', '2', '3'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseCheckboxPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
-  material: { type: 'enum', values: materials, default: undefined },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseCheckboxPropDefs };

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

@@ -64,17 +64,17 @@
   outline: none;
 
   /* Theme-level backdrop filter for auto dialogs */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-dialog);
   }
 
-  /* Component-level overrides (when panelBackground prop is explicitly set) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  /* Component-level overrides (when the material prop is set) */
+  &:where([data-material='solid']) {
     background-color: var(--color-dialog-solid);
     backdrop-filter: none;
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-dialog-translucent);
     backdrop-filter: var(--backdrop-filter-dialog);
   }
@@ -107,29 +107,10 @@
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .rt-BaseDialogOverlay {
-    /* Keep the overlay mounted until the children have animated */
-    &:where([data-state='closed']) { animation: rt-dialog-overlay-no-op var(--motion-duration-small) var(--motion-spring-snappy); }
-    &:where([data-state='open'])::before {
-      animation: rt-fade-in var(--duration-5) var(--ease-spring-1);
-    }
-    &:where([data-state='closed'])::before {
-      opacity: 0;
-      animation: rt-fade-out var(--duration-4) var(--ease-spring-1);
-    }
-  }
-
-  .rt-BaseDialogContent {
-    &:where([data-state='open']) { animation: rt-dialog-content-show var(--motion-duration-medium) var(--motion-spring-snappy); }
-    &:where([data-state='closed']) { opacity: 0; animation: rt-dialog-content-hide var(--motion-duration-small) var(--motion-spring-snappy); }
-  }
-}
-
 /* Safari backdrop-filter fallback */
 @supports not (backdrop-filter: blur(1px)) {
   :where(.rt-BaseDialogContent[data-material='translucent']),
-  :where(.rt-BaseDialogContent[data-panel-background='translucent']) {
+  :where(.rt-BaseDialogContent[data-material='translucent']) {
     background-color: var(--color-dialog-solid);
   }
 }

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

@@ -20,24 +20,20 @@
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
-  transition: var(--transition-background-blur);
 
   /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
   contain: paint;
   isolation: isolate;
 
   /* Enhanced reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--color-panel-solid);
     backdrop-filter: none;
   }
 
-  &:where([data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-panel-translucent);
     backdrop-filter: var(--backdrop-filter-panel);
   }
@@ -70,7 +66,6 @@
   position: relative;
   outline: none;
   scroll-margin: var(--base-menu-content-padding) 0;
-  transition: var(--transition-menu);
 
   /* Fix sticky text highlighting after selection in Firefox */
   user-select: none;
@@ -82,9 +77,6 @@
   }
 
   /* Enhanced reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 .rt-BaseMenuShortcut {
@@ -307,44 +299,13 @@
   background-color: var(--gray-a6);
 }
 
-/* solid variant specific styles */
-.rt-BaseMenuContent:where(.rt-variant-solid) {
-  & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
-    background-color: var(--gray-3);
-  }
-
-  &:where([data-panel-background='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
-    background-color: var(--gray-a3);
-  }
-
-  /* Gray fills with step 12 automatically; a coloured item re-resolves the solid tokens */
-  & :where(.rt-BaseMenuItem[data-highlighted]) {
-    background-color: var(--accent-solid);
-    color: var(--accent-solid-contrast);
-
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      color: var(--accent-solid-contrast);
-    }
-
-    /* Force all text elements to inherit hover color, including those with color="gray" */
-    & :where(.rt-Text) {
-      color: inherit !important;
-    }
-
-    /* Also target any element with data-accent-color="gray" */
-    & :where([data-accent-color='gray']:not(.rt-Badge)) {
-      color: inherit !important;
-    }
-  }
-}
-
 /* soft variant specific styles */
 .rt-BaseMenuContent:where(.rt-variant-soft) {
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     background-color: var(--accent-3);
   }
 
-  &:where([data-panel-background='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+  &:where([data-material='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     background-color: var(--accent-a3);
   }
 
@@ -357,7 +318,7 @@
     }
   }
 
-  &:where([data-panel-background='translucent']) :where(.rt-BaseMenuItem[data-highlighted]) {
+  &:where([data-material='translucent']) :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-a4);
   }
 
@@ -374,7 +335,7 @@
       background-color: var(--gray-3);
     }
 
-    &:where([data-panel-background='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+    &:where([data-material='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
       background-color: var(--gray-a3);
     }