@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

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

@@ -7,6 +7,7 @@ import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const baseButtonPropDefs = {
   ...asChildPropDef,
@@ -17,11 +18,15 @@ const baseButtonPropDefs = {
   ...radiusPropDef,
   loading: { type: 'boolean', className: 'rt-loading', default: false },
   fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
 };
 
 export { baseButtonPropDefs };

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

@@ -35,6 +35,8 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
     as,
     color,
     radius,
+    panelBackground,
+    flush,
     disabled = props.loading,
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs, marginPropDefs);
@@ -65,6 +67,8 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       data-disabled={disabled || undefined}
       data-accent-color={color}
       data-radius={radius}
+      data-panel-background={panelBackground}
+      data-flush={flush ? 'true' : undefined}
       {...baseButtonProps}
       {...accessibilityProps}
       ref={forwardedRef}

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

@@ -3,6 +3,7 @@
   position: relative;
   overflow: hidden;
   border-radius: var(--base-card-border-radius);
+  transition: var(--transition-card);
 
   /* Don't inherit typographic properties */
   font-family: var(--default-font-family);
@@ -70,9 +71,9 @@
   --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
 
   @supports (color: color-mix(in oklab, white, black)) {
-    --base-card-surface-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a5), var(--gray-5) 25%);
-    --base-card-surface-hover-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) 25%);
-    --base-card-surface-active-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
+    --base-card-surface-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a5), var(--gray-5) var(--color-mix-percentage-light));
+    --base-card-surface-hover-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) var(--color-mix-percentage-light));
+    --base-card-surface-active-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light));
   }
 }
 
@@ -83,21 +84,68 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /*
- * Using standard shadow tokens for consistency across the design system.
- * Maps shadow variants to the standard --shadow-{1-6} tokens.
+ * Using the same elevated 3D effect as Button classic variant for consistency.
+ * Creates a sophisticated multi-layer shadow system with inset and outer shadows.
  */
 
 :where(.radix-themes) {
-  --base-card-classic-box-shadow-outer: var(--shadow-2);
-  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
-  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
+  /* Base state - elevated 3D effect (exact same structure as Button) */
+  --base-card-classic-box-shadow-outer: 
+    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);
 
+  /* Hover state - enhanced elevation (exact same structure as Button) */
+  --base-card-classic-hover-box-shadow-outer: 
+    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),
+    0 0 0 var(--classic-border-width) var(--gray-a5);
+
+  /* Active state - pressed down effect (exact same structure as Button) */
+  --base-card-classic-active-box-shadow-outer: 
+    inset 0 var(--classic-border-width) var(--black-a3), 
+    0 0 0 var(--classic-border-width) var(--gray-a7);
+
+  /* Dark mode overrides (exact same structure as Button) */
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+    --base-card-classic-box-shadow-outer: 
+      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);
+
+    --base-card-classic-hover-box-shadow-outer: 
+      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 var(--classic-shadow-offset-negative) 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),
+      0 0 0 var(--classic-border-width) var(--gray-a5);
+
+    --base-card-classic-active-box-shadow-outer: 
+      inset 0 var(--classic-border-width) var(--black-a3), 
+      0 0 0 var(--classic-border-width) var(--gray-a7);
+  }
+
+  /* Border color definitions (kept for compatibility) */
   --base-card-classic-border-color: var(--gray-a3);
   --base-card-classic-hover-border-color: var(--gray-a3);
   --base-card-classic-active-border-color: var(--gray-a4);
+  
   @supports (color: color-mix(in oklab, white, black)) {
-    --base-card-classic-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%);
-    --base-card-classic-hover-border-color: color-mix(in oklab, var(--gray-a4), var(--gray-4) 25%);
-    --base-card-classic-active-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%);
+    --base-card-classic-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light));
+    --base-card-classic-hover-border-color: color-mix(in oklab, var(--gray-a4), var(--gray-4) var(--color-mix-percentage-light));
+    --base-card-classic-active-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light));
   }
 }

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

@@ -50,9 +50,26 @@
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
 
-  background-color: var(--color-panel-solid);
+  /* Base state: use contextual dialog color that auto-resolves */
+  background-color: var(--color-dialog);
   box-shadow: var(--shadow-6);
   outline: none;
+
+  /* Theme-level backdrop filter for auto dialogs */
+  :where([data-panel-background='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-dialog);
+  }
+
+  /* Component-level overrides (when panelBackground prop is explicitly set) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--color-dialog-solid);
+    backdrop-filter: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--color-dialog-translucent);
+    backdrop-filter: var(--backdrop-filter-dialog);
+  }
 }
 
 /***************************************************************************************************
@@ -64,20 +81,20 @@
 @breakpoints {
   .rt-BaseDialogContent {
     &:where(.rt-r-size-1) {
-      --dialog-content-padding: var(--space-3);
-      border-radius: var(--radius-4);
+      --dialog-content-padding: var(--space-4);
+      border-radius: var(--radius-5);
     }
     &:where(.rt-r-size-2) {
-      --dialog-content-padding: var(--space-4);
-      border-radius: var(--radius-4);
+      --dialog-content-padding: var(--space-5);
+      border-radius: var(--radius-6);
     }
     &:where(.rt-r-size-3) {
-      --dialog-content-padding: var(--space-5);
-      border-radius: var(--radius-5);
+      --dialog-content-padding: var(--space-6);
+      border-radius: var(--radius-7);
     }
     &:where(.rt-r-size-4) {
-      --dialog-content-padding: var(--space-6);
-      border-radius: var(--radius-5);
+      --dialog-content-padding: var(--space-7);
+      border-radius: var(--radius-8);
     }
   }
 }

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

@@ -8,7 +8,27 @@
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
-  background-color: var(--base-menu-bg);
+  
+  background-color: var(--color-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
+  box-shadow: var(--shadow-5);
+  transition: var(--transition-background-blur);
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--color-panel-solid);
+    backdrop-filter: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--color-panel-translucent);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
 }
 
 .rt-BaseMenuViewport {
@@ -37,6 +57,7 @@
   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;
@@ -46,6 +67,11 @@
   &:where([data-disabled]) {
     cursor: default;
   }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .rt-BaseMenuShortcut {
@@ -53,6 +79,7 @@
   align-items: center;
   margin-left: auto;
   padding-left: var(--space-4);
+  margin-right: calc(-2px * var(--scaling)); /* Pulls closer to edge */
 }
 
 .rt-BaseMenuSubTriggerIcon {
@@ -96,7 +123,16 @@
 }
 
 .rt-BaseMenuArrow {
-  fill: var(--base-menu-bg);
+  fill: var(--color-panel);
+
+  /* Component-level overrides (higher specificity) */
+  :where(.rt-BaseMenuContent[data-panel-background='solid']) & {
+    fill: var(--color-panel-solid);
+  }
+
+  :where(.rt-BaseMenuContent[data-panel-background='translucent']) & {
+    fill: var(--color-panel-translucent);
+  }
 }
 
 /***************************************************************************************************
@@ -108,7 +144,7 @@
 @breakpoints {
   .rt-BaseMenuContent {
     &:where(.rt-r-size-1) {
-      --base-menu-content-padding: var(--space-1);
+      --base-menu-content-padding: var(--space-2);
       --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
       --base-menu-item-padding-right: var(--space-2);
       --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
@@ -116,6 +152,7 @@
       border-radius: var(--radius-3);
 
       & :where(.rt-BaseMenuItem) {
+        gap: var(--component-gap-2);
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
@@ -123,8 +160,8 @@
 
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: calc(var(--space-3) * 1.175);
-          height: calc(var(--space-3) * 1.175);
+          width: var(--content-icon-size-1);
+          height: var(--content-icon-size-1);
           flex-shrink: 0;
         }
       }
@@ -136,8 +173,8 @@
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--indicator-icon-size-1);
+        height: var(--indicator-icon-size-1);
       }
 
       /* reset with :not:has so we still support browsers without :has */
@@ -150,14 +187,15 @@
     }
 
     &:where(.rt-r-size-2) {
-      --base-menu-content-padding: var(--space-2);
+      --base-menu-content-padding: var(--space-3);
       --base-menu-item-padding-left: var(--space-3);
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-1);
       --base-menu-item-height: var(--space-6);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-5);
 
       & :where(.rt-BaseMenuItem) {
+        gap: var(--component-gap-3);
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
@@ -165,8 +203,8 @@
 
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--space-4);
-          height: var(--space-4);
+          width: var(--content-icon-size-2);
+          height: var(--content-icon-size-2);
           flex-shrink: 0;
         }
       }
@@ -178,8 +216,51 @@
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--indicator-icon-size-2);
+        height: var(--indicator-icon-size-2);
+      }
+
+      /* reset with :not:has so we still support browsers without :has */
+      &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --base-menu-item-padding-left: var(--space-3);
+      }
+      &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --base-menu-item-padding-left: var(--space-5);
+      }
+    }
+
+    &:where(.rt-r-size-3) {
+      --base-menu-content-padding: var(--space-3);
+      --base-menu-item-padding-left: var(--space-3);
+      --base-menu-item-padding-right: var(--space-3);
+      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-item-height: var(--space-6);
+      border-radius: var(--radius-6);
+
+      & :where(.rt-BaseMenuItem) {
+        gap: var(--component-gap-4);
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-3);
+        border-radius: var(--radius-2);
+
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--content-icon-size-2);
+          height: var(--content-icon-size-2);
+          flex-shrink: 0;
+        }
+      }
+
+      & :where(.rt-BaseMenuLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+      }
+
+      & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
+        width: var(--indicator-icon-size-2);
+        height: var(--indicator-icon-size-2);
       }
 
       /* reset with :not:has so we still support browsers without :has */
@@ -198,11 +279,6 @@
  * VARIANTS                                                                                        *
  *                                                                                                 *
  ***************************************************************************************************/
-
-.rt-BaseMenuContent {
-  --base-menu-bg: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-}
 .rt-BaseMenuItem:where([data-accent-color]) {
   color: var(--accent-a11);
 }
@@ -230,8 +306,46 @@
 /* solid */
 
 .rt-BaseMenuContent:where(.rt-variant-solid) {
+  & :where(.rt-BaseMenuSubTrigger) {
+    transition: var(--transition-menu);
+    
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+    
+    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
+    :where([data-panel-background='translucent']) & {
+      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    }
+  }
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
-    background-color: var(--gray-a3);
+    /* Base state: solid gray for solid panels */
+    background-color: var(--gray-3);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--gray-a3);
+      /* Remove individual backdrop-filter to prevent layering with container backdrop-filter */
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &: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);
+      /* No backdrop-filter here to prevent double-blur with container */
+    }
+  }
+  & :where(.rt-BaseMenuItem) {
+    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
+    :where([data-panel-background='translucent']) & {
+      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    }
   }
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-9);
@@ -289,11 +403,68 @@
 /* soft */
 
 .rt-BaseMenuContent:where(.rt-variant-soft) {
+  & :where(.rt-BaseMenuSubTrigger) {
+    transition: var(--transition-menu);
+    
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+    
+    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
+    :where([data-panel-background='translucent']) & {
+      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    }
+  }
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
-    background-color: var(--accent-a3);
+    /* Base state: solid accent for solid panels */
+    background-color: var(--accent-3);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a3);
+      /* Remove individual backdrop-filter to prevent layering with container backdrop-filter */
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid']) {
+      background-color: var(--accent-3);
+      backdrop-filter: none;
+      --backdrop-filter-components: none;
+    }
+
+    &:where([data-panel-background='translucent']) {
+      background-color: var(--accent-a3);
+      /* No backdrop-filter here to prevent double-blur with container */
+    }
+  }
+  & :where(.rt-BaseMenuItem) {
+    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
+    :where([data-panel-background='translucent']) & {
+      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    }
   }
   & :where(.rt-BaseMenuItem[data-highlighted]) {
-    background-color: var(--accent-a4);
+    /* Base state: solid accent for solid panels */
+    background-color: var(--accent-4);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a4);
+      /* Remove individual backdrop-filter to prevent layering with container backdrop-filter */
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid']) {
+      background-color: var(--accent-4);
+      backdrop-filter: none;
+      --backdrop-filter-components: none;
+    }
+
+    &:where([data-panel-background='translucent']) {
+      background-color: var(--accent-a4);
+      /* No backdrop-filter here to prevent double-blur with container */
+    }
 
     /* In soft variant, improve contrast for gray text while maintaining hierarchy */
     & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {

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

@@ -6,6 +6,7 @@ import type { PropDef } from '../../props/prop-def.js';
 
 const contentSizes = ['1', '2'] as const;
 const contentVariants = ['solid', 'soft'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const baseMenuContentPropDefs = {
   size: {
@@ -21,11 +22,17 @@ const baseMenuContentPropDefs = {
     values: contentVariants,
     default: 'solid',
   },
+  panelBackground: {
+    type: 'enum',
+    values: panelBackgrounds,
+    default: undefined,
+  },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
   variant: PropDef<(typeof contentVariants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 const baseMenuItemPropDefs = {

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

@@ -20,6 +20,7 @@
   flex-shrink: 0;
   position: relative;
   user-select: none;
+  transition: var(--transition-tabs);
 }
 
 .rt-BaseTabListTriggerInner,
@@ -27,6 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: var(--transition-tabs);
 }
 
 .rt-BaseTabListTriggerInner {
@@ -35,12 +37,14 @@
   :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);
+    transition-delay: var(--duration-1); /* 100ms - allows staggered effect vs active state's 0ms */
   }
 
   :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
+    transition-delay: 0ms; /* Immediate transition for active state */
   }
 }
 
@@ -80,7 +84,7 @@
       --tab-height: var(--space-6);
       --tab-padding-x: var(--space-1);
       --tab-inner-padding-x: var(--space-1);
-      --tab-inner-padding-y: calc(var(--space-1) * 0.5);
+      --tab-inner-padding-y: calc(var(--space-1) * var(--spacing-multiplier-small));
       --tab-inner-border-radius: var(--radius-1);
     }
     &:where(.rt-r-size-2) {
@@ -103,7 +107,7 @@
  ***************************************************************************************************/
 
 .rt-BaseTabList {
-  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+  box-shadow: inset 0 calc(-1 * var(--border-width-standard)) 0 0 var(--gray-a5);
 }
 
 .rt-BaseTabListTrigger {
@@ -114,28 +118,73 @@
       color: var(--gray-12);
     }
     &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
+      /* Base state: solid gray for solid panels */
       background-color: var(--gray-a3);
+
+      /* 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(.rt-BaseTabList[data-panel-background='solid']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
     }
     &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
+      /* Base state: solid accent for solid panels */
       background-color: var(--accent-a3);
+
+      /* Theme-level translucent override for focus+hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for focus+hover */
+      :where(.rt-BaseTabList[data-panel-background='solid']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
     }
   }
   &:where([data-state='active'], [data-active]) {
     color: var(--gray-12);
   }
   &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -2px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
   }
   &:where([data-state='active'], [data-active])::before {
     box-sizing: border-box;
     content: '';
-    height: 2px;
+    height: var(--focus-outline-width); /* Consistent with focus outline thickness */
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: var(--accent-indicator);
+    transform-origin: center;
+    transition: 
+      transform var(--duration-3) var(--ease-3),
+      opacity var(--duration-2) var(--ease-1),
+      background-color var(--duration-2) var(--ease-1);
   }
 
   :where(.rt-BaseTabList.rt-high-contrast) & {
@@ -144,3 +193,5 @@
     }
   }
 }
+
+