@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/src/components/segmented-control.css

@@ -1,5 +1,6 @@
 .radix-themes {
-  --segmented-control-transition-duration: 100ms;
+  /* Use standard duration token instead of custom duration */
+  --segmented-control-transition-duration: var(--duration-1); /* 100ms - Fast transitions */
 }
 
 .rt-SegmentedControlRoot {
@@ -20,6 +21,33 @@
 
   /* Create a new stacking context */
   isolation: isolate;
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--color-surface-translucent);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--color-surface);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    backdrop-filter: none;
+    --backdrop-filter-panel: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--color-surface-translucent);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    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;
+  }
 }
 
 .rt-SegmentedControlRoot:where([data-disabled]) {
@@ -42,8 +70,8 @@
   }
   &:where(:focus-visible) {
     border-radius: inherit;
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
   }
 }
 
@@ -70,30 +98,30 @@
 .rt-SegmentedControlItemLabelInactive {
   position: absolute;
 
-  transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
+  transition: var(--transition-tabs);
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--tab-inactive-letter-spacing);
   word-spacing: var(--tab-inactive-word-spacing);
 
   opacity: 1;
-  transition-timing-function: ease-out;
+  transition-delay: var(--duration-1); /* Staggered effect like tabs */
   :where(.rt-SegmentedControlItem[data-state='on']) & {
     opacity: 0;
-    transition-timing-function: ease-in;
+    transition-delay: 0ms; /* Immediate transition for state change */
   }
 }
 
 .rt-SegmentedControlItemLabelActive {
-  transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
+  transition: var(--transition-tabs);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--tab-active-letter-spacing);
   word-spacing: var(--tab-active-word-spacing);
 
   opacity: 0;
-  transition-timing-function: ease-in;
+  transition-delay: 0ms; /* Immediate transition for active state like tabs */
   :where(.rt-SegmentedControlItem[data-state='on']) & {
     opacity: 1;
-    transition-timing-function: ease-out;
+    transition-delay: 0ms; /* Immediate transition for active state */
   }
 }
 
@@ -105,22 +133,21 @@
    */
   z-index: -1;
 
-  margin-top: 3px;
-  margin-bottom: 3px;
-  margin-left: -0.5px;
-  margin-right: -0.5px;
-  width: 1px;
+  margin-top: calc(var(--space-1) * 0.75); /* 3px - slightly smaller than space-1 */
+  margin-bottom: calc(var(--space-1) * 0.75); /* 3px */
+  margin-left: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  width: var(--border-width-standard); /* 1px */
   background-color: var(--gray-a4);
-  transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
+  transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
 
   /* Make separators slow to disappear and fast to appear, syncing it well with the indicator motion */
-  transition-timing-function: ease-out;
 
   :where(.rt-SegmentedControlItem:first-child) &,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) &,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * & {
     opacity: 0;
-    transition-timing-function: ease-in;
+    transition-timing-function: var(--ease-1);
   }
   /* Don't transition when the separator is hidden because of the focus outline */
   :where(.rt-SegmentedControlRoot:has(:focus-visible)) & {
@@ -144,14 +171,12 @@
   left: 0;
   height: 100%;
   pointer-events: none;
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-  transition-duration: var(--segmented-control-transition-duration);
+  transition: transform var(--segmented-control-transition-duration) var(--ease-3);
 
   &::before {
-    inset: 1px;
+    inset: var(--border-width-standard); /* 1px */
     position: absolute;
-    border-radius: max(0.5px, calc(var(--segmented-control-border-radius) - 1px));
+    border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
     background-color: var(--segmented-control-indicator-background-color);
     content: '';
   }
@@ -164,7 +189,7 @@
     --segmented-control-indicator-background-color: var(--gray-a3);
 
     &::before {
-      inset: 0px;
+      inset: 0;
       box-shadow: none;
     }
   }
@@ -248,7 +273,7 @@
 @breakpoints {
   .rt-SegmentedControlRoot {
     &:where(.rt-r-size-1) {
-      --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+      --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
       height: var(--space-5);
 
       & :where(.rt-SegmentedControlItemLabel) {
@@ -295,7 +320,7 @@
 .rt-SegmentedControlRoot:where(.rt-variant-surface) {
   & :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator) {
     &::before {
-      box-shadow: 0 0 0 1px var(--gray-a4);
+      box-shadow: 0 0 0 var(--border-width-standard) var(--gray-a4);
     }
   }
 }
@@ -309,7 +334,27 @@
 .rt-SegmentedControlRoot:where(.rt-variant-classic) {
   & :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator) {
     &::before {
-      box-shadow: var(--shadow-2);
+      /* Use the same elevated 3D effect as Button classic variant */
+      /* prettier-ignore */
+      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);
+
+      :where(.dark, .dark-theme) &,
+      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+        /* prettier-ignore */
+        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);
+      }
     }
   }
 }

package/src/components/segmented-control.props.tsx

@@ -9,11 +9,17 @@ const segmentedControlRootPropDefs = {
   disabled: { type: 'boolean', className: 'disabled', default: false },
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  panelBackground: {
+    type: 'enum',
+    className: 'rt-panel-background',
+    values: ['solid', 'translucent'],
+  },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<'solid' | 'translucent'>;
 };
 
 export { segmentedControlRootPropDefs };

package/src/components/select.css

@@ -14,8 +14,8 @@
   text-align: start;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
   }
 
   /* Reduced motion support */
@@ -95,7 +95,7 @@
 }
 
 .rt-SelectSeparator {
-  height: 1px;
+  height: var(--separator-height-thin);
   margin-top: var(--space-2);
   margin-bottom: var(--space-2);
   margin-left: var(--select-item-indicator-width);
@@ -218,7 +218,7 @@
     &:where(.rt-r-size-1) {
       --select-content-padding: var(--space-1);
       --select-item-height: var(--space-5);
-      --select-item-indicator-width: calc(var(--space-5) / 1.2);
+      --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
       --select-separator-margin-right: var(--space-2);
       border-radius: var(--radius-3);
 
@@ -234,8 +234,8 @@
         border-radius: var(--radius-1);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
       }
     }
     &:where(.rt-r-size-2, .rt-r-size-3) {
@@ -261,8 +261,8 @@
         letter-spacing: var(--letter-spacing-2);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
       }
     }
     &:where(.rt-r-size-3) {
@@ -271,8 +271,8 @@
         letter-spacing: var(--letter-spacing-3);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
       }
     }
   }
@@ -286,7 +286,7 @@
 
 /* Outline variant - neutral with gray border (previously surface) */
 .rt-SelectTrigger:where(.rt-variant-outline) {
-  --select-trigger-border-width: 1px;
+  --select-trigger-border-width: var(--border-width-standard);
   
   background-color: var(--color-surface);
   color: var(--gray-12);
@@ -331,22 +331,22 @@
 
 /* Classic variant - 3D inset form input */
 .rt-SelectTrigger:where(.rt-variant-classic) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   position: relative;
   /* Subtle inset positioning */
-  top: calc(var(--classic-elevation-offset) / 3); /* More pronounced than before */
+  top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
 
   background-color: var(--color-surface);
   color: var(--gray-12);
 
   /* 3D inset effect - more pronounced but still subtle */
   /* prettier-ignore */
-  box-shadow:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
-    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
-    0 0 0 var(--classic-border-width) var(--gray-a5);
+      box-shadow:
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2),
+      inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a5);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
@@ -368,19 +368,19 @@
   @media (hover: hover) {
     &:where(:hover:not(:focus-visible)) {
       /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
-        0 0 0 var(--classic-border-width) var(--gray-a6);
+          box-shadow:
+      inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3),
+      inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2),
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a6);
     }
   }
   &:where([data-state='open']) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-      inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
+      inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3),
+      inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2),
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3),
       0 0 0 var(--classic-border-width) var(--gray-a6);
   }
 
@@ -388,8 +388,8 @@
   &:where(:focus-visible) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
-      0 0 0 2px var(--focus-8);
+      inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a2),
+      0 0 0 var(--focus-outline-width) var(--focus-8);
   }
 
   &:where(:disabled) {
@@ -397,7 +397,7 @@
     background-color: var(--gray-a2);
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a1),
+      inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2),
       inset 0 0 0 var(--classic-border-width) var(--gray-a6);
   }
   &:where([data-placeholder]) {
@@ -409,7 +409,7 @@
 
 /* Soft variant - branded with accent colors */
 .rt-SelectTrigger:where(.rt-variant-soft) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   /* Use solid accent for solid panels, alpha accent for translucent panels */
   background-color: var(--accent-3);
@@ -482,7 +482,7 @@
 
 /* Surface variant - transparent with accent border (previously outline) */
 .rt-SelectTrigger:where(.rt-variant-surface) {
-  --select-trigger-border-width: 1px;
+  --select-trigger-border-width: var(--border-width-standard);
   
   background-color: transparent;
   box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--accent-7);
@@ -595,7 +595,7 @@
 
 /* Ghost variant - transparent until interaction */
 .rt-SelectTrigger:where(.rt-variant-ghost) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   background-color: transparent;
   color: var(--accent-12);
@@ -635,6 +635,11 @@
         background-color: var(--accent-a2);
         backdrop-filter: var(--backdrop-filter-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([data-state='open']) {
@@ -644,6 +649,11 @@
       background-color: var(--accent-a2);
       backdrop-filter: var(--backdrop-filter-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) {
     outline-color: var(--accent-8);

package/src/components/slider.css

@@ -7,7 +7,7 @@
   flex-grow: 1;
 
   border-radius: max(
-    calc(var(--radius-factor) * var(--slider-track-size) / 3),
+    calc(var(--radius-factor) * var(--slider-track-size) / var(--slider-track-radius-factor)),
     calc(var(--radius-factor) * var(--radius-thumb))
   );
 
@@ -47,11 +47,11 @@
   border-radius: inherit;
 
   &:where([data-orientation='horizontal']) {
-    height: 100%;
+    height: var(--position-full);
   }
 
   &:where([data-orientation='vertical']) {
-    width: 100%;
+    width: var(--position-full);
   }
 }
 
@@ -67,10 +67,10 @@
     content: '';
     position: absolute;
     z-index: -1;
-    width: calc(var(--slider-thumb-size) * 3);
-    height: calc(var(--slider-thumb-size) * 3);
-    top: 50%;
-    left: 50%;
+    width: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    height: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    top: var(--position-center);
+    left: var(--position-center);
     transform: translate(-50%, -50%);
   }
 
@@ -78,7 +78,7 @@
   &::after {
     content: '';
     position: absolute;
-    inset: calc(-0.25 * var(--slider-track-size));
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
     background-color: white;
     border-radius: max(var(--radius-1), var(--radius-thumb));
     box-shadow: var(--slider-thumb-box-shadow);
@@ -86,7 +86,7 @@
   }
 
   &:where(:focus-visible)::after {
-    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
   }
 
   &:where(:active) {
@@ -103,13 +103,13 @@
 @breakpoints {
   .rt-SliderRoot {
     &:where(.rt-r-size-1) {
-      --slider-track-size: calc(var(--space-2) * 0.75);
+      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     &:where(.rt-r-size-2) {
       --slider-track-size: var(--space-2);
     }
     &:where(.rt-r-size-3) {
-      --slider-track-size: calc(var(--space-2) * 1.25);
+      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
   }
 }
@@ -125,17 +125,17 @@
 .rt-SliderRoot:where(.rt-variant-surface) {
   & :where(.rt-SliderTrack) {
     background-color: var(--gray-a3);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
 
     &:where([data-disabled]) {
-      box-shadow: inset 0 0 0 1px var(--gray-a4);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
     }
   }
 
   & :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
   }
 
   & :where(.rt-SliderThumb) {
@@ -160,21 +160,21 @@
       inset: 0;
       position: absolute;
       border-radius: inherit;
-      box-shadow: var(--shadow-1);
+      box-shadow: var(--classic-inset-shadow-dark);
     }
     &:where([data-disabled])::before {
-      opacity: 0.5;
+      opacity: var(--opacity-disabled);
     }
   }
 
   & :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
-      inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
+      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 
     &:where(.rt-high-contrast) {
-      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
     }
   }
 

package/src/components/switch.css

@@ -197,21 +197,21 @@
   &::before {
     background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
     background-color: var(--gray-a4);
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
   }
   &:where([data-state='unchecked']:active)::before {
     background-color: var(--gray-a5);
   }
   &:where([data-state='checked'])::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
-      inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
+      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
   }
   &:where([data-state='checked']:active)::before {
     filter: var(--switch-surface-checked-active-filter);
   }
   &:where(.rt-high-contrast) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 
       /* prettier-ignore */
       background-image:
@@ -229,8 +229,8 @@
       filter: none;
       background-image: none;
       background-color: var(--gray-a5);
-      box-shadow: var(--shadow-1);
-      opacity: 0.5;
+      box-shadow: var(--classic-inset-shadow-dark);
+      opacity: var(--opacity-disabled);
     }
   }
 

package/src/components/text-area.css

@@ -209,11 +209,11 @@
 
   /* 3D inset effect - same as TextField */
   /* prettier-ignore */
-  box-shadow:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
-    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
-    0 0 0 var(--classic-border-width) var(--gray-a5);
+      box-shadow:
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2),
+      inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a5);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
@@ -235,11 +235,11 @@
   @media (hover: hover) {
     &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
       /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
-        0 0 0 var(--classic-border-width) var(--gray-a6);
+          box-shadow:
+      inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3),
+      inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2),
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a6);
     }
   }
 
@@ -247,7 +247,7 @@
   &:where(:has(.rt-TextAreaInput:focus)) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
+      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2),
       0 0 0 2px var(--focus-8);
   }
 
@@ -383,6 +383,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;
+      }
     }
   }
 
@@ -407,6 +412,11 @@
       background-color: var(--accent-a2);
       backdrop-filter: var(--backdrop-filter-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;
+    }
   }
 
   /* prettier-ignore */
@@ -476,6 +486,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;
+      }
     }
   }
 
@@ -504,6 +519,11 @@
       box-shadow: inset 0 0 0 var(--text-area-border-width) var(--accent-a8);
       backdrop-filter: var(--backdrop-filter-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;
+    }
   }
 
   /* prettier-ignore */