@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

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

@@ -21,6 +21,7 @@
     height: var(--checkbox-size);
     width: var(--checkbox-size);
     border-radius: var(--checkbox-border-radius);
+    transition: var(--transition-checkbox);
   }
 }
 
@@ -33,6 +34,14 @@
   transform: translate(-50%, -50%);
   top: 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;
+  }
 }
 
 /***************************************************************************************************
@@ -44,19 +53,19 @@
 @breakpoints {
   .rt-BaseCheckboxRoot {
     &:where(.rt-r-size-1) {
-      --checkbox-size: calc(var(--space-4) * 0.875);
-      --checkbox-indicator-size: calc(9px * var(--scaling));
-      --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-indicator-size: var(--indicator-icon-size-1);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     &:where(.rt-r-size-2) {
       --checkbox-size: var(--space-4);
-      --checkbox-indicator-size: calc(10px * var(--scaling));
-      --checkbox-border-radius: var(--radius-1);
+      --checkbox-indicator-size: var(--indicator-icon-size-2);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     &:where(.rt-r-size-3) {
-      --checkbox-size: calc(var(--space-4) * 1.25);
-      --checkbox-indicator-size: calc(12px * var(--scaling));
-      --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-indicator-size: var(--indicator-icon-size-3);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
   }
 }
@@ -67,13 +76,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* solid */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-surface) {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid) {
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--color-surface);
-      box-shadow: inset 0 0 0 1px var(--gray-a7);
+      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a7);
     }
   }
 
@@ -97,7 +106,7 @@
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
+      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a6);
       background-color: transparent;
     }
     & :where(.rt-BaseCheckboxIndicator) {
@@ -109,42 +118,93 @@
 /* classic */
 
 .rt-BaseCheckboxRoot:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  
   &:where([data-state='unchecked']) {
     &::before {
-      background-color: var(--color-surface);
-      box-shadow: inset 0 0 0 1px var(--gray-a3), var(--shadow-1);
+      background-color: var(--accent-2);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 var(--classic-border-width) var(--white-a12),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+        0 0 0 var(--classic-border-width) var(--accent-a5),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+    }
+    
+    :where(.dark, .dark-theme) &,
+    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+      &::before {
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+          inset 0 var(--classic-border-width) var(--accent-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+      }
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-indicator);
-      background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a1));
-      box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
+      background-color: var(--accent-3);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 var(--classic-border-width) var(--white-a12),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+        0 0 0 var(--classic-border-width) var(--accent-a5),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-contrast);
+      color: var(--accent-a11);
     }
-
-    &:where(.rt-high-contrast) {
+    
+    :where(.dark, .dark-theme) &,
+    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
       &::before {
-        background-color: var(--accent-12);
+        background-color: var(--accent-3);
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+          inset 0 var(--classic-border-width) var(--accent-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
       }
+    }
+
+    &:where(.rt-high-contrast) {
       & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-1);
+        color: var(--accent-12);
       }
     }
   }
 
+  &:where(:active:not(:disabled)) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    
+    &::before {
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+    }
+  }
+
   &:where(:disabled) {
     &::before {
-      box-shadow: var(--shadow-1);
-      background-color: transparent;
+      background-color: var(--gray-a3);
+      box-shadow: none;
       background-image: none;
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--gray-a8);
     }
+    top: 0;
   }
 }
 

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

@@ -4,11 +4,11 @@ import { highContrastPropDef } from '../../props/high-contrast.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const variants = ['classic', 'solid', 'soft'] 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: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {

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

@@ -25,6 +25,7 @@
     height: var(--radio-size);
     width: var(--radio-size);
     border-radius: 100%;
+    transition: var(--transition-radio);
   }
 
   &::after {
@@ -35,6 +36,7 @@
     border-radius: 100%;
     /* Scale via transform to achieve perfect sub-pixel positioning */
     transform: scale(0.4);
+    transition: var(--transition-radio);
   }
 
   &:where(:checked, [data-state='checked']) {
@@ -75,9 +77,9 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* solid */
 
-.rt-BaseRadioRoot:where(.rt-variant-surface) {
+.rt-BaseRadioRoot:where(.rt-variant-solid) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
     background-color: var(--color-surface);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
@@ -110,36 +112,90 @@
 /* classic */
 
 .rt-BaseRadioRoot:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  
   &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-7), var(--shadow-1);
+    background-color: var(--accent-2);
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+  }
+  
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    &:where(:not(:checked), [data-state='unchecked'])::before {
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    }
   }
+  
   &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-indicator);
-    background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a3));
-    box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
+    background-color: var(--accent-3);
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
   }
   &::after {
-    background-color: var(--accent-contrast);
+    background-color: var(--accent-a11);
+  }
+  
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    &:where(:checked, [data-state='checked'])::before {
+      background-color: var(--accent-3);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    }
   }
 
   &:where(.rt-high-contrast) {
-    &:where(:checked, [data-state='checked'])::before {
+    &::after {
       background-color: var(--accent-12);
     }
-    &::after {
-      background-color: var(--accent-1);
+  }
+
+  &:where(:active:not(:disabled, [data-disabled])) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    
+    &::before {
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
     }
   }
 
   &:where(:disabled, [data-disabled])::before {
-    box-shadow: var(--shadow-1);
     background-color: var(--gray-a3);
+    box-shadow: none;
     background-image: none;
   }
   &:where(:disabled, [data-disabled])::after {
     background-color: var(--gray-a8);
   }
+  &:where(:disabled, [data-disabled]) {
+    top: 0;
+  }
 }
 
 /* soft */

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

@@ -4,11 +4,11 @@ import { highContrastPropDef } from '../../props/high-contrast.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const variants = ['classic', 'solid', 'soft'] as const;
 
 const baseRadioPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {

package/src/components/_internal/base-tab-list.css

@@ -28,7 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: var(--transition-tabs);
+  transition: var(--transition-tabs), var(--transition-background-blur);
 }
 
 .rt-BaseTabListTriggerInner {
@@ -139,6 +139,11 @@
         backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
       }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
     }
     &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
       /* Base state: solid accent for solid panels */

package/src/components/animations.css

@@ -104,10 +104,10 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .rt-PopperContent {
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-timing-function: var(--ease-3);
 
     &:where([data-state='open']) {
-      animation-duration: 160ms;
+      animation-duration: var(--duration-2);
 
       /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
@@ -130,7 +130,7 @@
     }
 
     &:where([data-state='closed']) {
-      animation-duration: 100ms;
+      animation-duration: var(--duration-1);
 
       /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
@@ -155,6 +155,6 @@
 
   /* Tab indicator animations - only when motion is preferred */
   .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
-    animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
+    animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
   }
 }

package/src/components/avatar.css

@@ -211,6 +211,11 @@
           background-color: inherit;
           backdrop-filter: inherit;
         }
+
+        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+          backdrop-filter: none !important;
+        }
       }
     }
     &:where(:active:not(:disabled, [data-disabled]))  {
@@ -223,6 +228,11 @@
         background-color: inherit;
         backdrop-filter: inherit;
       }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
     }
   }
 }

package/src/components/badge.css

@@ -41,7 +41,7 @@
       letter-spacing: var(--letter-spacing-0);
       padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
       gap: calc(var(--space-1) * 1.5);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
       
       /* Ghost variant gets reduced padding */
       &:where(.rt-variant-ghost) {

package/src/components/card.css

@@ -103,82 +103,40 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-Card:where(.rt-variant-classic) {
-  --card-border-width: 0px;
-  --card-background-color: var(--gray-1);
+  --card-border-width: 1px;
+  --card-background-color: var(--color-surface);
 
-  /* Add elevation offset like Button classic variant */
-  position: relative;
-  top: var(--classic-elevation-offset);
-
-  /* Apply shadows directly like Button classic variant */
-  box-shadow:
-    inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
-    inset 0 var(--classic-border-width) var(--white-a12),
-    inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
-    0 0 0 var(--classic-border-width) var(--gray-a5),
-    0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
-
-  /* Dark mode shadows */
-  :where(.dark, .dark-theme) &,
-  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-    box-shadow:
-      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
-      inset 0 var(--classic-border-width) var(--gray-a11),
-      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
-      inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-      0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
-  }
+  transition: box-shadow 120ms;
+  box-shadow: var(--base-card-classic-box-shadow-outer);
 
   &::before {
     background-color: var(--card-background-color);
     backdrop-filter: var(--backdrop-filter-panel);
   }
+  &::after {
+    box-shadow: var(--base-card-classic-box-shadow-inner);
+  }
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        box-shadow:
-          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
-          inset 0 var(--classic-border-width) var(--white-a12),
-          0 0 0 var(--classic-border-width) var(--gray-a5);
-
-        :where(.dark, .dark-theme) &,
-        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-          box-shadow:
-            inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
-            inset 0 var(--classic-border-width) var(--gray-a11),
-            0 0 0 var(--classic-border-width) var(--gray-a5);
-        }
-
-        &::before {
-          background-color: var(--gray-2);
+        transition-duration: 40ms;
+        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+        &::after {
+          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
         }
       }
     }
     &:where([data-state='open']) {
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
-        inset 0 var(--classic-border-width) var(--white-a12),
-        0 0 0 var(--classic-border-width) var(--gray-a5);
-
-      :where(.dark, .dark-theme) &,
-      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-        box-shadow:
-          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
-          inset 0 var(--classic-border-width) var(--gray-a11),
-          0 0 0 var(--classic-border-width) var(--gray-a5);
-      }
-
-      &::before {
-        background-color: var(--gray-2);
+      transition-duration: 40ms;
+      box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-hover-box-shadow-inner);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      top: 0; /* Remove elevation when pressed */
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
-      &::before {
-        background-color: var(--gray-2);
+      box-shadow: var(--base-card-classic-active-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-active-box-shadow-inner);
       }
     }
   }
@@ -192,6 +150,12 @@
 
 .rt-Card:where(.rt-variant-ghost) {
   --card-border-width: 0px;
+  transition: var(--transition-background-blur);
+
+  /* Disable base card backdrop-filter to prevent double blur effect */
+  &::before {
+    backdrop-filter: none !important;
+  }
 
   &:where([data-flush='true']) {
     /* We reset the defined margin variables to avoid inheriting them from a higher component */
@@ -224,20 +188,98 @@
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--gray-a3);
+        /* Base state: solid accent for solid panels */
+        background-color: var(--gray-3);
+
+        /* Theme-level translucent override for hover */
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-components);
+        }
+
+        /* Component-level overrides for hover */
+        &:where([data-panel-background='solid']) {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-components: none;
+        }
+
+        &:where([data-panel-background='translucent']) {
+          background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-components);
+          --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        }
+
+        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+          backdrop-filter: none !important;
+        }
+
         &:where(:focus-visible) {
           background-color: var(--focus-a2);
         }
       }
     }
     &:where([data-state='open']) {
-      background-color: var(--gray-a3);
+      /* Base state: solid accent for solid panels */
+      background-color: var(--gray-3);
+
+      /* Theme-level translucent override for open */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for open */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--gray-3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--gray-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
+
       &:where(:focus-visible) {
         background-color: var(--focus-a2);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      background-color: var(--gray-a4);
+      /* Base state: solid accent for solid panels */
+      background-color: var(--gray-4);
+
+      /* Theme-level translucent override for active */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--gray-a4);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for active */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--gray-4);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--gray-a4);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
+
       &:where(:focus-visible) {
         background-color: var(--focus-a2);
       }
@@ -330,6 +372,11 @@
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
           }
+
+          /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+          :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+            backdrop-filter: none !important;
+          }
         }
       }
     }
@@ -356,6 +403,11 @@
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
         }
+
+        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+          backdrop-filter: none !important;
+        }
       }
     }
     &:where(:active:not([data-state='open'])) {