@womp/kookie-ui 0.15.1 → 0.17.0

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

@@ -24,18 +24,6 @@ const sizes = ['1', '2', '3', '4'] as const;
  */
 const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
 
-/**
- * Available panel background options (deprecated)
- * @deprecated Use `materials` instead
- */
-
-/**
- * Available material options for visual rendering
- * - solid: Opaque backgrounds and borders
- * - translucent: Elevated effects with depth and visual separation
- */
-const materials = ['solid', 'translucent'] as const;
-
 /**
  * Base button prop definitions that define the component's API
  * 
@@ -47,7 +35,6 @@ const materials = ['solid', 'translucent'] as const;
  * - Six visual variants for different interface contexts
  * - Comprehensive color system with semantic meanings
  * - Loading states with automatic accessibility
- * - Material system for visual depth and elevation
  * - Polymorphic rendering support via asChild
  * 
  * @example
@@ -60,9 +47,6 @@ const materials = ['solid', 'translucent'] as const;
  * 
  * // Button with loading state
  * <BaseButton loading>Processing...</BaseButton>
- * 
- * // Button with translucent material
- * <BaseButton material="translucent">Elevated Button</BaseButton>
  * ```
  */
 const baseButtonPropDefs = {
@@ -88,15 +72,6 @@ const baseButtonPropDefs = {
    * Useful for mobile layouts and form submissions
    */
   fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
-  /**
-   * Material type for visual rendering and depth effects
-   * Controls how the button renders its visual elements
-   */
-  material: { type: 'enum', values: materials, default: undefined },
-  /**
-   * Panel background type (deprecated)
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
   /**
    * Flush mode that removes visual padding for seamless text integration
    * Only effective with ghost variant
@@ -107,7 +82,6 @@ const baseButtonPropDefs = {
   variant: PropDef<(typeof variants)[number]>;
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   flush: PropDef<boolean>;
 };
 

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

@@ -44,10 +44,8 @@ interface BaseButtonProps extends PolymorphicBaseButtonProps {}
  *
  * Key features:
  * - Loading state with spinner and accessibility announcements
- * - Performance optimizations for backdrop-filter effects
  * - Comprehensive accessibility support
  * - Polymorphic rendering support
- * - Material/panel background handling
  *
  * @example
  * ```tsx
@@ -72,15 +70,12 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
     as,
     color,
     radius,
-    material,
     flush,
     disabled = props.loading, // Loading state automatically disables the button
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs, marginPropDefs);
 
 
-  const effectiveMaterial = material;
-
   // asChild takes precedence over as prop for Radix Slot integration
   // When asChild is true, we use Slot.Root to merge props onto the child element
   // When asChild is false, we render as the specified element (or button by default)
@@ -130,7 +125,6 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       data-disabled={disabled || undefined}
       data-accent-color={color}
       data-radius={radius}
-      data-material={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
       {...baseButtonProps}
       {...accessibilityProps}

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

@@ -5,7 +5,7 @@
  * Kookie User Interface design system.
  *
  * ARCHITECTURE (matching base-button.css):
- * 1. Base styles: Layout, material system, pseudo-element setup
+ * 1. Base styles: Layout, pseudo-element setup
  * 2. Sizes: Responsive padding and border-radius
  * 3. Variant palettes: Each variant defines its color variables
  * 4. Shared state logic: Single set of hover/active/open selectors (outline, soft, surface)
@@ -23,20 +23,6 @@
  ***************************************************************************************************/
 
 .rt-BaseCard {
-  /* Material system - defaults to solid behavior */
-  --material-blend: 100%;
-  --material-alpha: 0;
-
-  &:where([data-material='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-
-  &:where([data-material='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
-
   /* Layout */
   display: block;
   position: relative;
@@ -83,21 +69,6 @@
     z-index: -1;
   }
 
-  /* Backdrop-filter for ::before - applies to outline, soft, surface */
-  :where([data-material='translucent']) &::before {
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-  }
-
-  &:where([data-material='solid'])::before {
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent'])::before {
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-  }
-
   &:where(:any-link, button, label) {
     cursor: pointer;
   }
@@ -112,39 +83,39 @@
 @breakpoints {
   .rt-BaseCard {
     &:where(.rt-r-size-1) {
-      --base-card-padding-top: var(--space-2);
-      --base-card-padding-right: var(--space-2);
-      --base-card-padding-bottom: var(--space-2);
-      --base-card-padding-left: var(--space-2);
-      --base-card-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
-    }
-    &:where(.rt-r-size-2) {
       --base-card-padding-top: var(--space-3);
       --base-card-padding-right: var(--space-3);
       --base-card-padding-bottom: var(--space-3);
       --base-card-padding-left: var(--space-3);
-      --base-card-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
+      --base-card-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.rt-r-size-2) {
       --base-card-padding-top: var(--space-4);
       --base-card-padding-right: var(--space-4);
       --base-card-padding-bottom: var(--space-4);
       --base-card-padding-left: var(--space-4);
-      --base-card-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
+      --base-card-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.rt-r-size-3) {
       --base-card-padding-top: var(--space-5);
       --base-card-padding-right: var(--space-5);
       --base-card-padding-bottom: var(--space-5);
       --base-card-padding-left: var(--space-5);
-      --base-card-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
+      --base-card-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
     }
-    &:where(.rt-r-size-5) {
+    &:where(.rt-r-size-4) {
       --base-card-padding-top: var(--space-6);
       --base-card-padding-right: var(--space-6);
       --base-card-padding-bottom: var(--space-6);
       --base-card-padding-left: var(--space-6);
-      --base-card-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
+      --base-card-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-5)));
+    }
+    &:where(.rt-r-size-5) {
+      --base-card-padding-top: var(--space-7);
+      --base-card-padding-right: var(--space-7);
+      --base-card-padding-bottom: var(--space-7);
+      --base-card-padding-left: var(--space-7);
+      --base-card-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-6)));
     }
   }
 }
@@ -173,17 +144,11 @@
 .rt-BaseCard:where(.rt-variant-outline) {
   --card-border-width: 1px;
   --v-bg: transparent;
-  --v-bg-a: transparent;
   --v-bg-hover: var(--gray-2);
-  --v-bg-hover-a: var(--gray-a2);
   --v-bg-active: var(--gray-3);
-  --v-bg-active-a: var(--gray-a3);
   --v-border: var(--gray-6);
-  --v-border-a: var(--gray-a6);
   --v-border-hover: var(--gray-7);
-  --v-border-hover-a: var(--gray-a7);
   --v-border-active: var(--gray-8);
-  --v-border-active-a: var(--gray-a8);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
@@ -191,11 +156,8 @@
 .rt-BaseCard:where(.rt-variant-soft) {
   --card-border-width: 0px;
   --v-bg: var(--gray-2);
-  --v-bg-a: var(--gray-a2);
   --v-bg-hover: var(--gray-3);
-  --v-bg-hover-a: var(--gray-a3);
   --v-bg-active: var(--gray-3);
-  --v-bg-active-a: var(--gray-a3);
   --v-focus-color: var(--gray-8);
   --v-focus-offset: -1px;
 }
@@ -203,17 +165,11 @@
 .rt-BaseCard:where(.rt-variant-surface) {
   --card-border-width: 1px;
   --v-bg: var(--gray-1);
-  --v-bg-a: var(--gray-a1);
   --v-bg-hover: var(--gray-2);
-  --v-bg-hover-a: var(--gray-a2);
   --v-bg-active: var(--gray-3);
-  --v-bg-active-a: var(--gray-a3);
   --v-border: var(--gray-6);
-  --v-border-a: var(--gray-a6);
   --v-border-hover: var(--gray-7);
-  --v-border-hover-a: var(--gray-a7);
   --v-border-active: var(--gray-7);
-  --v-border-active-a: var(--gray-a7);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
@@ -230,11 +186,7 @@
 .rt-BaseCard:where(.rt-variant-outline, .rt-variant-soft, .rt-variant-surface) {
   /* Rest state */
   &::before {
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-a) calc(var(--material-alpha) * 40%),
-      var(--v-bg) var(--material-blend)
-    );
+    background-color: var(--v-bg);
   }
 
   /* Focus */
@@ -255,28 +207,16 @@
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover)::before {
-        background-color: color-mix(
-          in srgb,
-          var(--v-bg-hover-a) calc(var(--material-alpha) * 40%),
-          var(--v-bg-hover) var(--material-blend)
-        );
+        background-color: var(--v-bg-hover);
       }
     }
 
     &:where([data-state='open'])::before {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-hover-a) calc(var(--material-alpha) * 40%),
-        var(--v-bg-hover) var(--material-blend)
-      );
+      background-color: var(--v-bg-hover);
     }
 
     &:where(:active:not([data-state='open']))::before {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-active-a) calc(var(--material-alpha) * 40%),
-        var(--v-bg-active) var(--material-blend)
-      );
+      background-color: var(--v-bg-active);
     }
   }
 
@@ -303,11 +243,7 @@
 
 /* Outline uses direct box-shadow on element */
 .rt-BaseCard:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px color-mix(
-    in srgb,
-    var(--v-border-a) calc(var(--material-alpha) * 40%),
-    var(--v-border) var(--material-blend)
-  );
+  box-shadow: inset 0 0 0 1px var(--v-border);
 
   &::after {
     box-shadow: none;
@@ -316,59 +252,35 @@
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        box-shadow: inset 0 0 0 1px color-mix(
-          in srgb,
-          var(--v-border-hover-a) calc(var(--material-alpha) * 40%),
-          var(--v-border-hover) var(--material-blend)
-        );
+        box-shadow: inset 0 0 0 1px var(--v-border-hover);
       }
     }
 
     &:where([data-state='open']) {
-      box-shadow: inset 0 0 0 1px color-mix(
-        in srgb,
-        var(--v-border-hover-a) calc(var(--material-alpha) * 40%),
-        var(--v-border-hover) var(--material-blend)
-      );
+      box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
 
     &:where(:active:not([data-state='open'])) {
-      box-shadow: inset 0 0 0 1px color-mix(
-        in srgb,
-        var(--v-border-active-a) calc(var(--material-alpha) * 40%),
-        var(--v-border-active) var(--material-blend)
-      );
+      box-shadow: inset 0 0 0 1px var(--v-border-active);
     }
   }
 }
 
 /* Surface uses ::after for border ON TOP of children */
 .rt-BaseCard:where(.rt-variant-surface)::after {
-  box-shadow: inset 0 0 0 var(--base-card-border-width) color-mix(
-    in srgb,
-    var(--v-border-a) calc(var(--material-alpha) * 40%),
-    var(--v-border) var(--material-blend)
-  );
+  box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border);
 }
 
 .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label) {
   @media (hover: hover) {
     &:where(:hover)::after {
-      box-shadow: inset 0 0 0 var(--base-card-border-width) color-mix(
-        in srgb,
-        var(--v-border-hover-a) calc(var(--material-alpha) * 40%),
-        var(--v-border-hover) var(--material-blend)
-      );
+      box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border-hover);
     }
   }
 
   &:where([data-state='open'])::after,
   &:where(:active:not([data-state='open']))::after {
-    box-shadow: inset 0 0 0 var(--base-card-border-width) color-mix(
-      in srgb,
-      var(--v-border-active-a) calc(var(--material-alpha) * 40%),
-      var(--v-border-active) var(--material-blend)
-    );
+    box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border-active);
   }
 }
 
@@ -377,31 +289,13 @@
  * GHOST VARIANT                                                                                   *
  *                                                                                                 *
  * Ghost applies styles directly to the element (not ::before) for different visual behavior.      *
- * Backdrop-filter is on the element itself, not the pseudo-element.                               *
  *                                                                                                 *
  ***************************************************************************************************/
 
 .rt-BaseCard:where(.rt-variant-ghost) {
-  /*
-   * Ghost is the only card variant whose backdrop filter sits on the element
-   * rather than on ::before, which makes it — and only it — the backdrop root
-   * for its contents. A component nested here would re-blur an already blurred
-   * surface, so switch the component filter off for the subtree.
-   *
-   * The other variants deliberately do not do this: their filter is on
-   * ::before, so the card element is not a backdrop root and a nested
-   * component is still blurring the page itself. Measured over a textured
-   * background, dropping it there is a visible change (max 82/255 channel
-   * delta) rather than the imperceptible one it is on a real backdrop root
-   * (max 7/255).
-   */
-  --backdrop-filter-components-enabled: none;
-
   --card-border-width: 0px;
   --v-bg-hover: var(--gray-3);
-  --v-bg-hover-a: var(--gray-a3);
   --v-bg-active: var(--gray-4);
-  --v-bg-active-a: var(--gray-a4);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 
@@ -435,30 +329,11 @@
     outline-offset: var(--v-focus-offset);
   }
 
-  /* Backdrop-filter handling for ghost - on element, not ::before */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-  }
-
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-  }
-
   /* Interactive states - background on element, not ::before */
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: color-mix(
-          in srgb,
-          var(--v-bg-hover-a) calc(var(--material-alpha) * 40%),
-          var(--v-bg-hover) var(--material-blend)
-        );
+        background-color: var(--v-bg-hover);
 
         &:where(:focus-visible) {
           background-color: var(--focus-a2);
@@ -467,11 +342,7 @@
     }
 
     &:where([data-state='open']) {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-hover-a) calc(var(--material-alpha) * 40%),
-        var(--v-bg-hover) var(--material-blend)
-      );
+      background-color: var(--v-bg-hover);
 
       &:where(:focus-visible) {
         background-color: var(--focus-a2);
@@ -479,11 +350,7 @@
     }
 
     &:where(:active:not([data-state='open'])) {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-active-a) calc(var(--material-alpha) * 40%),
-        var(--v-bg-active) var(--material-blend)
-      );
+      background-color: var(--v-bg-active);
 
       &:where(:focus-visible) {
         background-color: var(--focus-a2);
@@ -497,11 +364,6 @@
       background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
     }
   }
-
-  /* Prevent backdrop-filter stacking inside overlay components */
-  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-    backdrop-filter: none !important;
-  }
 }
 
 /***************************************************************************************************
@@ -519,18 +381,6 @@
   top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
 
-  :where([data-material='translucent']) & {
-    --card-background-color: var(--color-surface-translucent);
-  }
-
-  &:where([data-material='solid']) {
-    --card-background-color: var(--color-surface-solid);
-  }
-
-  &:where([data-material='translucent']) {
-    --card-background-color: var(--color-surface-translucent);
-  }
-
   &::before {
     background-color: var(--card-background-color);
   }
@@ -550,11 +400,7 @@
         box-shadow: var(--shadow-2);
 
         &::before {
-          background-color: color-mix(
-            in srgb,
-            var(--gray-a2) calc(var(--material-alpha) * 40%),
-            var(--gray-2) var(--material-blend)
-          );
+          background-color: var(--gray-2);
         }
 
         &::after {
@@ -565,11 +411,7 @@
 
     &:where([data-state='open']) {
       &::before {
-        background-color: color-mix(
-          in srgb,
-          var(--gray-a3) calc(var(--material-alpha) * 40%),
-          var(--gray-3) var(--material-blend)
-        );
+        background-color: var(--gray-3);
       }
 
       &::after {
@@ -579,11 +421,7 @@
 
     &:where(:active:not([data-state='open'])) {
       &::before {
-        background-color: color-mix(
-          in srgb,
-          var(--gray-a3) calc(var(--material-alpha) * 40%),
-          var(--gray-3) var(--material-blend)
-        );
+        background-color: var(--gray-3);
       }
 
       &::after {

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

@@ -29,13 +29,8 @@
   --checkbox-radius-ratio-max: 0.4;
   --checkbox-radius-max: calc(var(--checkbox-size) * var(--checkbox-radius-ratio-max));
 
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-
   &::before {
     content: '';
     display: block;
@@ -53,10 +48,10 @@
   /* Required for subpixel alignment in Safari */
   transform: translate(-50%, -50%);
   top: 50%;
-  left: 50%
-  
+  left: 50%;
+
   /* Smooth color transitions for the indicator icon */
-  
+
   /* Respect user preference for reduced motion */
 }
 
@@ -69,17 +64,17 @@
 @breakpoints {
   .rt-BaseCheckboxRoot {
     &:where(.rt-r-size-1) {
-      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
       --checkbox-indicator-size: var(--indicator-icon-size-1);
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-small)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-2) {
-      --checkbox-size: var(--space-4);
+      --checkbox-size: var(--space-5);
       --checkbox-indicator-size: var(--indicator-icon-size-2);
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-3) {
-      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
       --checkbox-indicator-size: var(--indicator-icon-size-3);
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
@@ -128,26 +123,18 @@
 .rt-BaseCheckboxRoot:where(.rt-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
-  
+
   &:where([data-state='unchecked']) {
     &::before {
       color: var(--accent-ink);
       background-color: var(--color-surface-solid);
-      box-shadow: var(--shadow-2)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: var(--shadow-2);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-3)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      background-color: var(--accent-3);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -156,13 +143,9 @@
 
   &:where(:active:not(:disabled)) {
     top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-    
-    &::before {
-      background-color: var(--accent-3)
-
-      /* Theme-level translucent override for active */
 
-      /* Component-level overrides for active */
+    &::before {
+      background-color: var(--accent-3);
     }
   }
 
@@ -183,11 +166,7 @@
 
 .rt-BaseCheckboxRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-3)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides (higher specificity) */
+    background-color: var(--accent-3);
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
@@ -212,22 +191,14 @@
   &:where([data-state='unchecked']) {
     &::before {
       box-shadow: inset 0 0 0 1px var(--accent-6);
-      color: var(--accent-ink)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      color: var(--accent-ink);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-7);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -251,22 +222,14 @@
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-6)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-6);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-8);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);