@kushagradhawan/kookie-ui 0.1.22 → 0.1.23

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

@@ -21,6 +21,7 @@
     height: var(--checkbox-size);
     width: var(--checkbox-size);
     border-radius: var(--checkbox-border-radius);
+    transition: var(--transition-checkbox);
   }
 }
 
@@ -33,6 +34,14 @@
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
+  
+  /* Smooth color transitions for the indicator icon */
+  transition: color var(--duration-1) var(--ease-1);
+  
+  /* Respect user preference for reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 /***************************************************************************************************
@@ -44,19 +53,19 @@
 @breakpoints {
   .rt-BaseCheckboxRoot {
     &:where(.rt-r-size-1) {
-      --checkbox-size: calc(var(--space-4) * 0.875);
-      --checkbox-indicator-size: calc(9px * var(--scaling));
-      --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-indicator-size: var(--indicator-icon-size-1);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     &:where(.rt-r-size-2) {
       --checkbox-size: var(--space-4);
-      --checkbox-indicator-size: calc(10px * var(--scaling));
-      --checkbox-border-radius: var(--radius-1);
+      --checkbox-indicator-size: var(--indicator-icon-size-2);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     &:where(.rt-r-size-3) {
-      --checkbox-size: calc(var(--space-4) * 1.25);
-      --checkbox-indicator-size: calc(12px * var(--scaling));
-      --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-indicator-size: var(--indicator-icon-size-3);
+      --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
   }
 }
@@ -67,13 +76,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* solid */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-surface) {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid) {
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--color-surface);
-      box-shadow: inset 0 0 0 1px var(--gray-a7);
+      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a7);
     }
   }
 
@@ -97,7 +106,7 @@
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
+      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a6);
       background-color: transparent;
     }
     & :where(.rt-BaseCheckboxIndicator) {
@@ -109,42 +118,93 @@
 /* classic */
 
 .rt-BaseCheckboxRoot:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  
   &:where([data-state='unchecked']) {
     &::before {
-      background-color: var(--color-surface);
-      box-shadow: inset 0 0 0 1px var(--gray-a3), var(--shadow-1);
+      background-color: var(--accent-2);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 var(--classic-border-width) var(--white-a12),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+        0 0 0 var(--classic-border-width) var(--accent-a5),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+    }
+    
+    :where(.dark, .dark-theme) &,
+    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+      &::before {
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+          inset 0 var(--classic-border-width) var(--accent-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+      }
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-indicator);
-      background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a1));
-      box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
+      background-color: var(--accent-3);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 var(--classic-border-width) var(--white-a12),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+        0 0 0 var(--classic-border-width) var(--accent-a5),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-contrast);
+      color: var(--accent-a11);
     }
-
-    &:where(.rt-high-contrast) {
+    
+    :where(.dark, .dark-theme) &,
+    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
       &::before {
-        background-color: var(--accent-12);
+        background-color: var(--accent-3);
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+          inset 0 var(--classic-border-width) var(--accent-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
       }
+    }
+
+    &:where(.rt-high-contrast) {
       & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-1);
+        color: var(--accent-12);
       }
     }
   }
 
+  &:where(:active:not(:disabled)) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    
+    &::before {
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+    }
+  }
+
   &:where(:disabled) {
     &::before {
-      box-shadow: var(--shadow-1);
-      background-color: transparent;
+      background-color: var(--gray-a3);
+      box-shadow: none;
       background-image: none;
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--gray-a8);
     }
+    top: 0;
   }
 }
 

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

@@ -4,11 +4,11 @@ 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 baseCheckboxPropDefs = {
   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/_internal/base-radio.css

@@ -25,6 +25,7 @@
     height: var(--radio-size);
     width: var(--radio-size);
     border-radius: 100%;
+    transition: var(--transition-radio);
   }
 
   &::after {
@@ -35,6 +36,7 @@
     border-radius: 100%;
     /* Scale via transform to achieve perfect sub-pixel positioning */
     transform: scale(0.4);
+    transition: var(--transition-radio);
   }
 
   &:where(:checked, [data-state='checked']) {
@@ -75,9 +77,9 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* solid */
 
-.rt-BaseRadioRoot:where(.rt-variant-surface) {
+.rt-BaseRadioRoot:where(.rt-variant-solid) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
     background-color: var(--color-surface);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
@@ -110,36 +112,90 @@
 /* classic */
 
 .rt-BaseRadioRoot:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  
   &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-7), var(--shadow-1);
+    background-color: var(--accent-2);
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+  }
+  
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    &:where(:not(:checked), [data-state='unchecked'])::before {
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    }
   }
+  
   &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-indicator);
-    background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a3));
-    box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
+    background-color: var(--accent-3);
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
   }
   &::after {
-    background-color: var(--accent-contrast);
+    background-color: var(--accent-a11);
+  }
+  
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    &:where(:checked, [data-state='checked'])::before {
+      background-color: var(--accent-3);
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    }
   }
 
   &:where(.rt-high-contrast) {
-    &:where(:checked, [data-state='checked'])::before {
+    &::after {
       background-color: var(--accent-12);
     }
-    &::after {
-      background-color: var(--accent-1);
+  }
+
+  &:where(:active:not(:disabled, [data-disabled])) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    
+    &::before {
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
     }
   }
 
   &:where(:disabled, [data-disabled])::before {
-    box-shadow: var(--shadow-1);
     background-color: var(--gray-a3);
+    box-shadow: none;
     background-image: none;
   }
   &:where(:disabled, [data-disabled])::after {
     background-color: var(--gray-a8);
   }
+  &:where(:disabled, [data-disabled]) {
+    top: 0;
+  }
 }
 
 /* soft */

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

@@ -4,11 +4,11 @@ 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 baseRadioPropDefs = {
   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/badge.css

@@ -41,7 +41,7 @@
       letter-spacing: var(--letter-spacing-0);
       padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
       gap: calc(var(--space-1) * 1.5);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
       
       /* Ghost variant gets reduced padding */
       &:where(.rt-variant-ghost) {

package/src/components/card.css

@@ -103,82 +103,40 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-Card:where(.rt-variant-classic) {
-  --card-border-width: 0px;
-  --card-background-color: var(--gray-1);
+  --card-border-width: 1px;
+  --card-background-color: var(--color-surface);
 
-  /* Add elevation offset like Button classic variant */
-  position: relative;
-  top: var(--classic-elevation-offset);
-
-  /* Apply shadows directly like Button classic variant */
-  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);
-
-  /* Dark mode shadows */
-  :where(.dark, .dark-theme) &,
-  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-    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);
-  }
+  transition: box-shadow 120ms;
+  box-shadow: var(--base-card-classic-box-shadow-outer);
 
   &::before {
     background-color: var(--card-background-color);
     backdrop-filter: var(--backdrop-filter-panel);
   }
+  &::after {
+    box-shadow: var(--base-card-classic-box-shadow-inner);
+  }
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        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),
-          0 0 0 var(--classic-border-width) var(--gray-a5);
-
-        :where(.dark, .dark-theme) &,
-        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-          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),
-            0 0 0 var(--classic-border-width) var(--gray-a5);
-        }
-
-        &::before {
-          background-color: var(--gray-2);
+        transition-duration: 40ms;
+        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+        &::after {
+          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
         }
       }
     }
     &:where([data-state='open']) {
-      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),
-        0 0 0 var(--classic-border-width) var(--gray-a5);
-
-      :where(.dark, .dark-theme) &,
-      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-        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),
-          0 0 0 var(--classic-border-width) var(--gray-a5);
-      }
-
-      &::before {
-        background-color: var(--gray-2);
+      transition-duration: 40ms;
+      box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-hover-box-shadow-inner);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      top: 0; /* Remove elevation when pressed */
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
-      &::before {
-        background-color: var(--gray-2);
+      box-shadow: var(--base-card-classic-active-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-active-box-shadow-inner);
       }
     }
   }
@@ -194,6 +152,11 @@
   --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 */

package/src/components/checkbox-cards.css

@@ -22,8 +22,9 @@
   -webkit-tap-highlight-color: transparent;
 
   &:where(:has(:focus-visible)) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    transition: var(--transition-focus);
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
 
     &::after {
       outline: inherit;
@@ -65,20 +66,20 @@
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+      --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-3);
       --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     /* 48px height for the card with one line of text */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-4);
       --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
@@ -89,12 +90,12 @@
       font-size: var(--font-size-3);
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
-      --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+      --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-5);
       --checkbox-cards-item-border-radius: var(--radius-4);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
   }
 }
@@ -107,9 +108,11 @@
 
 :where(.rt-CheckboxCardsRoot.rt-variant-surface) {
   .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-cards-item-background-color: var(--color-surface);
 
+    transition: var(--transition-card);
+
     &::before {
       background-color: var(--checkbox-cards-item-background-color);
     }
@@ -118,12 +121,22 @@
     }
     @media (hover: hover) {
       &:where(:not(:has(:disabled)):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-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -134,10 +147,10 @@
 
 :where(.rt-CheckboxCardsRoot.rt-variant-classic) {
   .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-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 {
@@ -148,7 +161,7 @@
     }
     @media (hover: hover) {
       &:where(:not(:has(:disabled)):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);
@@ -156,6 +169,15 @@
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */

package/src/components/checkbox-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 checkboxCardsRootPropDefs = {
   ...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(200px, 1fr))' },
@@ -19,6 +21,7 @@ const checkboxCardsRootPropDefs = {
 } 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/checkbox-cards.tsx

@@ -12,6 +12,7 @@ import { Grid } from './grid.js';
 import { ThickCheckIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
+import { useThemeContext } from './theme.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { MarginProps } from '../props/margin.props.js';
@@ -44,11 +45,15 @@ interface CheckboxCardsRootProps
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(
-      props,
-      checkboxCardsRootPropDefs,
-      marginPropDefs,
-    );
+    const themeContext = useThemeContext();
+    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    const {
+      __scopeCheckboxCards,
+      className,
+      color,
+      panelBackground: _,
+      ...rootProps
+    } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
     return (
       <CheckboxCardsProvider
@@ -60,6 +65,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
           <CheckboxGroupPrimitive.Root
             {...checkboxGroupScope}
             data-accent-color={color}
+            data-panel-background={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}
@@ -81,9 +87,10 @@ const CheckboxCardsItem = React.forwardRef<
 >(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {
   const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);
   const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
+
   const { className: checkboxClassName } = extractProps(
     // Pass size / highContrast values from the context and static variant to generate styles
-    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },
+    { size: context?.size, variant: 'solid', highContrast: context?.highContrast },
     // Pass size & variant prop defs to allow it to be extracted
     baseCheckboxPropDefs,
   );