@kushagradhawan/kookie-ui 0.1.22 → 0.1.23

package/src/components/image.css

@@ -16,23 +16,47 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      transform: scale(1.02);
       box-shadow:
         var(--box-shadow, var(--shadow-2)),
         0 0 0 1px var(--gray-a4);
+      filter: brightness(1.05) contrast(1.02);
     }
   }
 
+  &:where(:active) {
+    filter: brightness(0.98) contrast(1.02);
+  }
+
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline-offset: -2px;
+  }
+}
+
+/* Interactive states for asChild usage - target the wrapper element */
+:where(:any-link, button, label) .rt-Image {
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      box-shadow:
+        var(--box-shadow, var(--shadow-2)),
+        0 0 0 1px var(--gray-a4);
+      filter: brightness(1.05) contrast(1.02);
+    }
   }
 
   &:where(:active) {
-    transform: scale(0.98);
+    filter: brightness(0.98) contrast(1.02);
   }
 }
 
+/* Focus states for asChild usage - apply to the wrapper */
+:where(:any-link, button, label):where(:focus-visible) .rt-Image {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+
 /* Blur variant wrapper */
 .rt-variant-blur {
   position: relative;
@@ -46,17 +70,17 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      transform: scale(1.02);
+      filter: brightness(1.05) contrast(1.02);
     }
   }
 
-  &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+  &:where(:active) {
+    filter: brightness(0.98) contrast(1.02);
   }
 
-  &:where(:active) {
-    transform: scale(0.98);
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
   }
 }
 

package/src/components/image.tsx

@@ -287,7 +287,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     } else {
       // For surface variant with asChild
       return React.cloneElement(child, {
-        className: classNames(child.props?.className, 'rt-Image'),
+        className: classNames(child.props?.className),
         style: {
           textDecoration: 'none', // Reset link underlines
           color: 'inherit', // Reset link colors
@@ -296,6 +296,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
           padding: 0, // Reset button padding
           font: 'inherit', // Reset button fonts
           cursor: 'pointer', // Ensure interactive cursor
+          display: 'inline-block', // Ensure proper sizing
           ...child.props?.style, // Allow user overrides
         },
         children: imageWithPlaceholder,

package/src/components/progress.css

@@ -1,14 +1,14 @@
 .rt-ProgressRoot {
   --progress-value: 0;
   --progress-max: 100;
-  --progress-duration: 5s;
+  --progress-duration: var(--progress-default-duration);
   pointer-events: none;
   position: relative;
   overflow: hidden;
   flex-grow: 1;
   height: var(--progress-height);
   border-radius: max(
-    calc(var(--radius-factor) * var(--progress-height) / 3),
+    calc(var(--radius-factor) * var(--progress-height) / var(--progress-border-radius-factor)),
     calc(var(--radius-factor) * var(--radius-thumb))
   );
 
@@ -30,18 +30,18 @@
 }
 .rt-ProgressIndicator {
   display: block;
-  height: 100%;
-  width: 100%;
+  height: var(--position-full);
+  width: var(--position-full);
 
   transform: scaleX(calc(var(--progress-value) / var(--progress-max)));
   transform-origin: left center;
-  transition: transform 120ms;
+  transition: var(--transition-progress);
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start),
       var(--progress-indicator-indeterminate-animation-repeat);
-    animation-delay: 0s, calc(var(--progress-duration) + 5s), calc(var(--progress-duration) + 7.5s);
-    animation-duration: var(--progress-duration), 2.5s, 5s;
+    animation-delay: 0s, calc(var(--progress-duration) + var(--progress-animation-delay-start)), calc(var(--progress-duration) + var(--progress-animation-delay-shine));
+    animation-duration: var(--progress-duration), var(--progress-animation-duration-fade), var(--progress-animation-duration-pulse);
     animation-iteration-count: 1, 1, infinite;
     animation-fill-mode: both, none, none;
     animation-direction: normal, normal, alternate;
@@ -51,19 +51,19 @@
       position: absolute;
       inset: 0;
       content: '';
-      width: 400%;
+      width: calc(var(--position-full) * var(--progress-shine-width-multiplier));
 
       animation-name: rt-progress-indicator-indeterminate-shine-from-left;
-      animation-delay: calc(var(--progress-duration) + 5s);
-      animation-duration: 5s;
+      animation-delay: calc(var(--progress-duration) + var(--progress-animation-delay-start));
+      animation-duration: var(--progress-animation-duration-pulse);
       animation-fill-mode: backwards;
       animation-iteration-count: infinite;
 
       background-image: linear-gradient(
         to right,
-        transparent 25%,
+        transparent var(--progress-gradient-stop-start),
         var(--progress-indicator-after-linear-gradient),
-        transparent 75%
+        transparent var(--progress-gradient-stop-end)
       );
     }
   }
@@ -71,29 +71,29 @@
 
 @keyframes rt-progress-indicator-indeterminate-grow {
   0% {
-    transform: scaleX(0.01);
+    transform: scaleX(var(--progress-scale-initial));
   }
   20% {
-    transform: scaleX(0.1);
+    transform: scaleX(var(--progress-scale-step-1));
   }
   30% {
-    transform: scaleX(0.6);
+    transform: scaleX(var(--progress-scale-step-2));
   }
   40%,
   50% {
-    transform: scaleX(0.9);
+    transform: scaleX(var(--progress-scale-step-3));
   }
   100% {
-    transform: scaleX(1);
+    transform: scaleX(var(--progress-scale-final));
   }
 }
 
 @keyframes rt-progress-indicator-indeterminate-shine-from-left {
   0% {
-    transform: translateX(-100%);
+    transform: translateX(var(--position-negative-full));
   }
   100% {
-    transform: translateX(0%);
+    transform: translateX(var(--position-zero));
   }
 }
 
@@ -109,7 +109,7 @@
       --progress-height: var(--space-1);
     }
     &:where(.rt-r-size-2) {
-      --progress-height: calc(var(--space-2) * 0.75);
+      --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     &:where(.rt-r-size-3) {
       --progress-height: var(--space-2);
@@ -131,7 +131,7 @@
   background-color: var(--gray-a3);
 
   &::after {
-    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-ProgressIndicator) {
@@ -159,10 +159,12 @@
 .rt-ProgressRoot:where(.rt-variant-classic) {
   --progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
   --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
+  position: relative;
+  top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
   background-color: var(--gray-a3);
 
   &::after {
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
   }
 
   & :where(.rt-ProgressIndicator) {
@@ -199,7 +201,7 @@
     background-color: var(--accent-8);
 
     &::after {
-      opacity: 0.75;
+      opacity: var(--opacity-soft-variant);
     }
   }
 }
@@ -228,22 +230,22 @@
     background-color: var(--accent-12);
 
     &::after {
-      opacity: 0.75;
+      opacity: var(--opacity-soft-variant);
     }
   }
 }
 
 @keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
   100% {
-    opacity: 0.8;
+    opacity: var(--opacity-high-contrast);
   }
 }
 
 @keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
   0% {
-    opacity: 0.8;
+    opacity: var(--opacity-high-contrast);
   }
   100% {
-    opacity: 1;
+    opacity: var(--progress-scale-final);
   }
 }

package/src/components/radio-cards.css

@@ -1,4 +1,5 @@
 @import './_internal/base-card.css';
+@import './_internal/base-radio.css';
 
 .rt-RadioCardsRoot {
   line-height: var(--line-height);
@@ -47,7 +48,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       --radio-cards-item-padding-x: var(--space-3);
-      --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+      --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-3);
     }
     /* 48px height for the card with one line of text */
@@ -56,7 +57,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       --radio-cards-item-padding-x: var(--space-4);
-      --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+      --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-3);
     }
     /* 64px height for the card with one line of text */
@@ -65,7 +66,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       --radio-cards-item-padding-x: var(--space-5);
-      --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+      --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-4);
     }
   }
@@ -79,9 +80,11 @@
 
 :where(.rt-RadioCardsRoot.rt-variant-surface) {
   .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
 
+    transition: var(--transition-card);
+
     &::before {
       background-color: var(--radio-cards-item-background-color);
     }
@@ -90,12 +93,22 @@
     }
     @media (hover: hover) {
       &:where(:not(:disabled):not([data-state='checked']):hover) {
+        transition-duration: var(--duration-1);
         &::after {
           box-shadow: var(--base-card-surface-hover-box-shadow);
         }
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -106,10 +119,10 @@
 
 :where(.rt-RadioCardsRoot.rt-variant-classic) {
   .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
 
-    transition: box-shadow 120ms;
+    transition: var(--transition-card);
     box-shadow: var(--base-card-classic-box-shadow-outer);
 
     &::before {
@@ -120,7 +133,7 @@
     }
     @media (hover: hover) {
       &:where(:not(:disabled):not([data-state='checked']):hover) {
-        transition-duration: 40ms;
+        transition-duration: var(--duration-1);
         box-shadow: var(--base-card-classic-hover-box-shadow-outer);
         &::after {
           box-shadow: var(--base-card-classic-hover-box-shadow-inner);
@@ -128,6 +141,15 @@
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -137,8 +159,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where([data-state='checked']) {
+  transition: var(--transition-fast);
   &::after {
-    outline: 2px solid var(--accent-indicator);
+    outline: var(--focus-outline-width) solid var(--accent-indicator);
   }
   :where(.rt-RadioCardsRoot.rt-high-contrast) & {
     &::after {
@@ -154,8 +177,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where(:focus-visible) {
+  transition: var(--transition-focus);
   &::after {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-outline-width) solid var(--focus-8);
   }
   &:where([data-state='checked']) {
     &::before {

package/src/components/radio-cards.props.tsx

@@ -7,11 +7,13 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
 const variants = ['surface', 'classic'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
   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', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
@@ -19,6 +21,7 @@ const radioCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/radio-cards.tsx

@@ -6,6 +6,7 @@ import { radioCardsRootPropDefs } from './radio-cards.props.js';
 import { Grid } from './grid.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
+import { useThemeContext } from './theme.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -22,15 +23,19 @@ interface RadioCardsRootProps
     RadioCardsRootOwnProps {}
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
-    const { className, color, ...rootProps } = extractProps(
-      props,
-      radioCardsRootPropDefs,
-      marginPropDefs,
-    );
+    const themeContext = useThemeContext();
+    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    const {
+      className,
+      color,
+      panelBackground: _,
+      ...rootProps
+    } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
       <Grid asChild>
         <RadioGroupPrimitive.Root
           data-accent-color={color}
+          data-panel-background={panelBackground}
           {...rootProps}
           ref={forwardedRef}
           className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.props.tsx

@@ -5,12 +5,12 @@ 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 radioGroupRootPropDefs = {
   ...asChildPropDef,
   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/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 };