@kushagradhawan/kookie-ui 0.1.29 → 0.1.31

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

@@ -1,3 +1,7 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target `button` and `a` tags. */
+/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
+
 .rt-BaseCard {
   display: block;
   position: relative;
@@ -11,6 +15,11 @@
   font-style: normal;
   text-align: start;
 
+  /* Set backdrop-filter flag at component root level */
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    --has-backdrop-filter: true;
+  }
+
   --inset-border-width: var(--base-card-border-width);
   --inset-border-radius: var(--base-card-border-radius);
   padding-top: var(--base-card-padding-top);
@@ -82,101 +91,875 @@
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*          Shadows / Surface          */
+/*                Sizes                */
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-:where(.radix-themes) {
-  --base-card-surface-box-shadow: 0 0 0 1px var(--gray-a5);
-  --base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
-  --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
+@breakpoints {
+  .rt-BaseCard {
+    &:where(.rt-r-size-1) {
+      --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: var(--radius-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: var(--radius-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: var(--radius-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: var(--radius-6);
+    }
+    &: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: var(--radius-7);
+    }
+    }
+  }
+
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Outline          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-BaseCard:where(.rt-variant-outline) {
+  --card-border-width: 1px;
+  --card-background-color: transparent;
+  transition: var(--transition-background-blur);
+
+  /* Base state: solid colors for solid panels */
+  box-shadow: inset 0 0 0 1px var(--gray-6);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+  }
+
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+  }
+
+  &::before {
+    background-color: var(--card-background-color);
+    backdrop-filter: none !important;
+  }
+  
+  &::after {
+    box-shadow: none;
+  }
+  
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--gray-2);
+        box-shadow: inset 0 0 0 1px var(--gray-7);
+        
+        /* Theme-level translucent override for hover */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+          box-shadow: inset 0 0 0 1px var(--gray-a7);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for hover */
+        &:where([data-panel-background='solid'], [data-material='solid']) {
+          background-color: var(--gray-2);
+          box-shadow: inset 0 0 0 1px var(--gray-7);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        &:where([data-panel-background='translucent'], [data-material='translucent']) {
+          background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+          box-shadow: inset 0 0 0 1px var(--gray-a7);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+    }
+    
+    &:where([data-state='open']) {
+      background-color: var(--gray-2);
+      box-shadow: inset 0 0 0 1px var(--gray-7);
+      
+      /* Theme-level translucent override for open */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--gray-a7);
+        backdrop-filter: var(--backdrop-filter-panel);
+      }
+
+      /* Component-level overrides for open */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--gray-2);
+        box-shadow: inset 0 0 0 1px var(--gray-7);
+        backdrop-filter: none;
+        --backdrop-filter-panel: none;
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--gray-a7);
+        backdrop-filter: var(--backdrop-filter-panel);
+        --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+      }
+    }
+    
+    &:where(:active:not([data-state='open'])) {
+      background-color: var(--gray-3);
+      box-shadow: inset 0 0 0 1px var(--gray-8);
+      
+      /* Theme-level translucent override for active */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+        box-shadow: inset 0 0 0 1px var(--gray-a8);
+        backdrop-filter: var(--backdrop-filter-panel);
+      }
+
+      /* Component-level overrides for active */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--gray-3);
+        box-shadow: inset 0 0 0 1px var(--gray-8);
+        backdrop-filter: none;
+        --backdrop-filter-panel: none;
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+        box-shadow: inset 0 0 0 1px var(--gray-a8);
+        backdrop-filter: var(--backdrop-filter-panel);
+        --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+      }
+    }
+  }
 
-  @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) 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));
+  @media (pointer: coarse) {
+    &:where(:any-link, button, label) {
+      &:where(:active:not([data-state='open'])) {
+        &::before {
+          background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+        }
+      }
+    }
   }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*          Shadows / Classic          */
+/*         Variants / Classic          */
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-/*
- * 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 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);
-
-  --base-card-classic-box-shadow-inner: none;
-
-  /* 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);
-
-  --base-card-classic-hover-box-shadow-inner: none;
-
-  /* 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);
-
-  --base-card-classic-active-box-shadow-inner: none;
-
-  /* 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);
-
-    --base-card-classic-box-shadow-inner: none;
-    --base-card-classic-hover-box-shadow-inner: none;
-    --base-card-classic-active-box-shadow-inner: none;
-  }
-
-  /* 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);
+.rt-BaseCard:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  --card-border-width: 1px;
+  --card-background-color: var(--color-surface-solid);
+  
+  transition: var(--transition-text-field);
+  box-shadow: var(--shadow-2);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    --card-background-color: var(--color-surface-translucent);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    --card-background-color: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    --card-background-color: var(--color-surface-translucent);
+  }
+
+  &::before {
+    background-color: var(--card-background-color);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
+  }
   
-  @supports (color: color-mix(in oklab, white, black)) {
-    --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));
+  &::after {
+    box-shadow: none;
+  }
+  
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        transition-duration: 40ms;
+        box-shadow: var(--shadow-2);
+        
+        &::before {
+          background-color: var(--gray-2);
+          
+          /* Theme-level translucent override for hover */
+          :where([data-panel-background='translucent'], [data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+          }
+
+          /* Component-level overrides for hover */
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+            background-color: var(--gray-2);
+            backdrop-filter: none;
+            --backdrop-filter-panel: none;
+          }
+
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+            --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+          }
+        }
+        
+        &::after {
+          box-shadow: none;
+        }
+      }
+    }
+    
+    &:where([data-state='open']) {
+      transition-duration: 40ms;
+      box-shadow: var(--shadow-1);
+      
+      &::before {
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for open */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for open */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: none;
+      }
+    }
+    
+    &:where(:active:not([data-state='open'])) {
+      box-shadow: var(--shadow-1);
+      
+      &::before {
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for active */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for active */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: none;
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    &:where(:any-link, button, label) {
+      &:where(:active:not([data-state='open'])) {
+        &::before {
+          background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*          Variants / Ghost           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-BaseCard:where(.rt-variant-ghost) {
+  --card-border-width: 0px;
+  transition: var(--transition-background-blur);
+
+  /* Disable base card backdrop-filter to prevent double blur effect */
+  &::before {
+    backdrop-filter: none !important;
+  }
+
+  &:where([data-flush='true']) {
+    /* We reset the defined margin variables to avoid inheriting them from a higher component */
+    /* If a margin IS defined on the component itself, the utility class will win and reset it */
+    --margin-top: 0px;
+    --margin-right: 0px;
+    --margin-bottom: 0px;
+    --margin-left: 0px;
+
+    /* Define the overrides to incorporate the negative margins */
+    --margin-top-override: calc(var(--margin-top) - var(--card-padding));
+    --margin-right-override: calc(var(--margin-right) - var(--card-padding));
+    --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
+    --margin-left-override: calc(var(--margin-left) - var(--card-padding));
+
+    margin-top: var(--margin-top-override);
+    margin-right: var(--margin-right-override);
+    margin-bottom: var(--margin-bottom-override);
+    margin-left: var(--margin-left-override);
+
+    /* Reset the overrides on direct children */
+    :where(&) > * {
+      --margin-top-override: initial;
+      --margin-right-override: initial;
+      --margin-bottom-override: initial;
+      --margin-left-override: initial;
+    }
+  }
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        /* Base state: solid accent for solid panels */
+        background-color: var(--gray-3);
+
+        /* Theme-level translucent override for hover */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for hover */
+        &:where([data-panel-background='solid'], [data-material='solid']) {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        &:where([data-panel-background='translucent'], [data-material='translucent']) {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+
+        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+          backdrop-filter: none !important;
+        }
+
+        &:where(:focus-visible) {
+          background-color: var(--focus-a2);
+        }
+      }
+    }
+    
+    &:where([data-state='open']) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--gray-3);
+
+      /* Theme-level translucent override for open */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+        backdrop-filter: var(--backdrop-filter-panel);
+      }
+
+      /* Component-level overrides for open */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--gray-3);
+        backdrop-filter: none;
+        --backdrop-filter-panel: none;
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+        backdrop-filter: var(--backdrop-filter-panel);
+        --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+      }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
+
+      &:where(:focus-visible) {
+        background-color: var(--focus-a2);
+      }
+    }
+    
+    &:where(:active:not([data-state='open'])) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--gray-4);
+
+      /* Theme-level translucent override for active */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+        backdrop-filter: var(--backdrop-filter-panel);
+      }
+
+      /* Component-level overrides for active */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--gray-4);
+        backdrop-filter: none;
+        --backdrop-filter-panel: none;
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+        backdrop-filter: var(--backdrop-filter-panel);
+        --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+      }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
+
+      &:where(:focus-visible) {
+        background-color: var(--focus-a2);
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    &:where(:any-link, button, label) {
+      &:where(:active:not([data-state='open'])) {
+        &::before {
+          background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Variants / Soft           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-BaseCard:where(.rt-variant-soft) {
+  --card-border-width: 0px;
+  
+  /* Base state: solid colors for solid panels */
+  --card-background-color: var(--gray-2);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    --card-background-color: var(--gray-2);
+  }
+
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+  }
+
+  &::before {
+    background-color: var(--card-background-color);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
+  }
+  
+  &::after {
+    box-shadow: none;
+    border: none;
+    outline: none;
+  }
+  
+  &:where(:focus-visible) {
+    outline: 2px solid var(--gray-8);
+    outline-offset: -1px;
+  }
+  
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        &::before {
+          /* Base state: solid colors for solid panels */
+          background-color: var(--gray-3);
+          
+          /* Theme-level translucent override for hover */
+          :where([data-panel-background='translucent'], [data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+          }
+
+          /* Component-level overrides for hover */
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+            background-color: var(--gray-3);
+            backdrop-filter: none;
+            --backdrop-filter-panel: none;
+          }
+
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+            --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+          }
+
+          /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+          :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+            backdrop-filter: none !important;
+          }
+        }
+      }
+    }
+    
+    &:where([data-state='open']) {
+      &::before {
+        /* Base state: solid colors for solid panels */
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for open */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for open */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+
+        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+          backdrop-filter: none !important;
+        }
+      }
+    }
+    
+    &:where(:active:not([data-state='open'])) {
+      &::before {
+        /* Base state: solid colors for solid panels */
+        background-color: var(--gray-4);
+        
+        /* Theme-level translucent override for active */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for active */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-4);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    &:where(:any-link, button, label) {
+      &:where(:active:not([data-state='open'])) {
+        &::before {
+          background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Surface          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-BaseCard:where(.rt-variant-surface) {
+  --card-border-width: 1px;
+  
+  /* Base state: neutral gray background with lighter border (maintains card neutrality) */
+  --card-background-color: var(--gray-1);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    --card-background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    --card-background-color: var(--gray-1);
+  }
+
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    --card-background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
+  }
+
+  &::before {
+    background-color: var(--card-background-color);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
+  }
+  
+  &::after {
+    box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-6);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a6);
+    }
+  }
+  
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+  
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        &::before {
+          /* Base state: darker gray for hover */
+          background-color: var(--gray-2);
+          
+          /* Theme-level translucent override for hover */
+          :where([data-panel-background='translucent'], [data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+          }
+
+          /* Component-level overrides for hover */
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+            background-color: var(--gray-2);
+            backdrop-filter: none;
+            --backdrop-filter-panel: none;
+          }
+
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+            background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+            backdrop-filter: var(--backdrop-filter-panel);
+            --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+          }
+        }
+        
+        &::after {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+          
+          /* Theme-level translucent override */
+          :where([data-panel-background='translucent'], [data-material='translucent']) & {
+            box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+          }
+        }
+      }
+    }
+    
+    &:where([data-state='open']) {
+      &::before {
+        /* Base state: darker gray for open */
+        background-color: var(--gray-2);
+        
+        /* Theme-level translucent override for open */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for open */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-2);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+        
+        /* Theme-level translucent override */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+        }
+      }
+    }
+    
+    &:where(:active:not([data-state='open'])) {
+      &::before {
+        /* Base state: even darker gray for active */
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for active */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for active */
+        :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+        
+        /* Theme-level translucent override */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+        }
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    &:where(:any-link, button, label) {
+      &:where(:active:not([data-state='open'])) {
+        &::before {
+          background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+        }
+      }
+    }
+  }
+}
+
+/* Better -webkit-tap-highlight-color */
+.rt-BaseCard:where(:any-link, button, label) {
+  @media (pointer: coarse) {
+    &:where(:active:not(:focus-visible, [data-state='open'])) {
+      &::before {
+        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      }
+    }
   }
 }