@kushagradhawan/kookie-ui 0.1.71 → 0.1.72

package/styles.css

@@ -3641,6 +3641,8 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+  --material-blend: 100%;
+  --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);
   --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
   --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
@@ -3787,13 +3789,15 @@
 .radix-themes:where([data-has-background='true']){
   background-color: var(--color-background);
 }
-.radix-themes:where([data-panel-background='solid']){
+.radix-themes:where([data-panel-background='solid'], [data-material='solid']){
   --color-panel: var(--color-panel-solid);
   --color-surface: var(--color-surface-solid);
   --color-dialog: var(--color-dialog-solid);
   --backdrop-filter-panel: none;
   --backdrop-filter-components: none;
   --backdrop-filter-dialog: none;
+  --material-blend: 100%;
+  --material-alpha: 0;
 }
 .radix-themes:where([data-panel-background='translucent'], [data-material='translucent']){
   --color-panel: var(--color-panel-translucent);
@@ -3802,6 +3806,8 @@
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
   --backdrop-filter-components: blur(var(--backdrop-blur-components));
   --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
+  --material-blend: 60%;
+  --material-alpha: 1;
 }
 [data-accent-color='amber']{
   --accent-1: var(--amber-1);
@@ -8265,6 +8271,14 @@
   isolation: isolate;
   height: var(--base-button-height);
 }
+.rt-BaseButton:where([data-material='solid'], [data-panel-background='solid']){
+  --material-blend: 100%;
+  --material-alpha: 0;
+}
+.rt-BaseButton:where([data-material='translucent'], [data-panel-background='translucent']){
+  --material-blend: 60%;
+  --material-alpha: 1;
+}
 :where([dir='rtl']) .rt-BaseButton{
   flex-direction: row-reverse;
 }
@@ -8427,31 +8441,12 @@
 .rt-BaseButton:where(.rt-variant-classic){
   position: relative;
   color: var(--accent-a11);
-  background-color: var(--color-surface-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic){
-  background-color: var(--color-surface-translucent);
-}
-.rt-BaseButton:where(.rt-variant-classic):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--color-surface-solid);
-}
-.rt-BaseButton:where(.rt-variant-classic):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: var(--color-surface-translucent);
-}
 .rt-BaseButton:where(.rt-variant-classic):where(.rt-high-contrast){
   color: var(--gray-12);
-  background-color: var(--color-surface-solid);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where(.rt-high-contrast){
-  background-color: var(--color-surface-translucent);
-}
-.rt-BaseButton:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--color-surface-solid);
-}
-.rt-BaseButton:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: var(--color-surface-translucent);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:focus-visible){
   outline: 2px solid var(--focus-8);
@@ -8459,57 +8454,18 @@
 }
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-classic):where(:hover){
-    background-color: var(--gray-2);
+    background-color: color-mix(in srgb, var(--gray-a2) calc(var(--material-alpha) * 100%), var(--gray-2) var(--material-blend));
     box-shadow: var(--shadow-2);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where(:hover){
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-  }
-  .rt-BaseButton:where(.rt-variant-classic):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--gray-2);
-  }
-  .rt-BaseButton:where(.rt-variant-classic):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-  }
 }
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']){
-  background-color: var(--gray-3);
+  background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
-.rt-BaseButton:where(.rt-variant-classic):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--gray-3);
-}
-.rt-BaseButton:where(.rt-variant-classic):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
-.rt-BaseButton:where(.rt-variant-classic):where(
-      :active:not([data-state='open'], [data-disabled]),
-      [data-state='on']:not([data-disabled])
-    ){
-  background-color: var(--gray-3);
+.rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])){
+  background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where(
-      :active:not([data-state='open'], [data-disabled]),
-      [data-state='on']:not([data-disabled])
-    ){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
-.rt-BaseButton:where(.rt-variant-classic):where(
-      :active:not([data-state='open'], [data-disabled]),
-      [data-state='on']:not([data-disabled])
-    ):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--gray-3);
-}
-.rt-BaseButton:where(.rt-variant-classic):where(
-      :active:not([data-state='open'], [data-disabled]),
-      [data-state='on']:not([data-disabled])
-    ):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
 @media (pointer: coarse) {
   .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'])){
     outline: var(--classic-shadow-blur-large) solid var(--gray-a4);
@@ -8582,47 +8538,21 @@
   pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-solid){
-  background-color: var(--accent-9);
+  --solid-blend: calc(100% - (var(--material-alpha) * 90%));
+  background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
   color: var(--accent-contrast);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid){
-  background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-9);
-}
-.rt-BaseButton:where(.rt-variant-solid):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
-}
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-solid):where(:hover){
-    background-color: var(--accent-10);
+    background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
     box-shadow: var(--shadow-2);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-  }
-  .rt-BaseButton:where(.rt-variant-solid):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-10);
-  }
-  .rt-BaseButton:where(.rt-variant-solid):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-  }
 }
 .rt-BaseButton:where(.rt-variant-solid):where([data-state='open']){
-  background-color: var(--accent-10);
+  background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
   filter: var(--base-button-solid-open-filter);
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-10);
-}
-.rt-BaseButton:where(.rt-variant-solid):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-}
 .rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])){
   filter: var(--base-button-solid-active-filter);
   box-shadow: var(--shadow-1);
@@ -8638,48 +8568,21 @@
   outline-offset: 2px;
 }
 .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast){
-  background-color: var(--accent-12);
+  background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
   color: var(--gray-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast){
-  background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-12);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-}
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover){
-    background-color: var(--accent-12);
+    background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
     filter: var(--base-button-solid-high-contrast-hover-filter);
     box-shadow: var(--shadow-2);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-  }
-  .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-12);
-  }
-  .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-  }
 }
 .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']){
-  background-color: var(--accent-12);
+  background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
   filter: var(--base-button-solid-high-contrast-open-filter);
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-12);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
-}
 .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:active:not([data-state='open'])){
   filter: var(--base-button-solid-high-contrast-active-filter);
   box-shadow: var(--shadow-1);
@@ -8705,16 +8608,7 @@
   pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-soft){
-  background-color: var(--accent-3);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-}
-.rt-BaseButton:where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-3);
-}
-.rt-BaseButton:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
 }
 .rt-BaseButton:where(.rt-variant-soft):where(:focus-visible){
   outline: 2px solid var(--accent-8);
@@ -8722,45 +8616,18 @@
 }
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-soft):where(:hover){
-    background-color: var(--accent-4);
+    background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
     box-shadow: var(--shadow-2);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  }
-  .rt-BaseButton:where(.rt-variant-soft):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-4);
-  }
-  .rt-BaseButton:where(.rt-variant-soft):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  }
 }
 .rt-BaseButton:where(.rt-variant-soft):where([data-state='open']){
-  background-color: var(--accent-4);
+  background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-}
-.rt-BaseButton:where(.rt-variant-soft):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-4);
-}
-.rt-BaseButton:where(.rt-variant-soft):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-}
 .rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])){
-  background-color: var(--accent-5);
+  background-color: color-mix(in srgb, var(--accent-a5) calc(var(--material-alpha) * 100%), var(--accent-5) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])){
-  background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-}
-.rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-5);
-}
-.rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-}
 .rt-BaseButton:where(.rt-variant-soft):where([data-disabled]){
   color: var(--gray-a8);
   background-color: var(--gray-a3);
@@ -8791,16 +8658,7 @@
 }
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-ghost):where(:hover){
-    background-color: var(--accent-3);
-  }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-ghost):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  }
-  .rt-BaseButton:where(.rt-variant-ghost):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-3);
-  }
-  .rt-BaseButton:where(.rt-variant-ghost):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
   }
 }
 .rt-BaseButton:where(.rt-variant-ghost):where(:focus-visible){
@@ -8808,33 +8666,13 @@
   outline-offset: -1px;
 }
 .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']){
-  background-color: var(--accent-3);
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  -webkit-backdrop-filter: var(--backdrop-filter-components);
-          backdrop-filter: var(--backdrop-filter-components);
-}
-.rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-3);
-}
-.rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-}
 .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])){
-  background-color: var(--accent-4);
+  background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-}
-.rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-4);
-}
-.rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-}
 .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]){
   color: var(--gray-a8);
   background-color: transparent;
@@ -8842,71 +8680,26 @@
   pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-outline){
-  box-shadow: inset 0 0 0 1px var(--accent-6);
+  --outline-border-6: color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
+  --outline-border-7: color-mix(in srgb, var(--accent-a7) calc(var(--material-alpha) * 100%), var(--accent-7) var(--material-blend));
+  --outline-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--outline-border-6);
   color: var(--accent-11);
   transition: var(--transition-background-blur);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline){
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  color: var(--accent-a11);
-}
-.rt-BaseButton:where(.rt-variant-outline):where([data-panel-background='solid'], [data-material='solid']){
-  box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-11);
-}
-.rt-BaseButton:where(.rt-variant-outline):where([data-panel-background='translucent'], [data-material='translucent']){
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  color: var(--accent-a11);
-}
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-outline):where(:hover){
-    background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
-  }
-  .rt-BaseButton:where(.rt-variant-outline):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-  .rt-BaseButton:where(.rt-variant-outline):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
+    box-shadow: inset 0 0 0 1px var(--outline-border-7);
   }
 }
 .rt-BaseButton:where(.rt-variant-outline):where([data-state='open']){
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-7), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
-}
-.rt-BaseButton:where(.rt-variant-outline):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-7);
-}
-.rt-BaseButton:where(.rt-variant-outline):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--outline-border-7), var(--shadow-1);
 }
 .rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-.rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--outline-border-8), var(--shadow-1);
 }
 .rt-BaseButton:where(.rt-variant-outline):where(:focus-visible){
   outline: 2px solid var(--focus-8);
@@ -8923,73 +8716,26 @@
   pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-surface){
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-6);
+  --surface-border-6: color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
+  --surface-border-7: color-mix(in srgb, var(--accent-a7) calc(var(--material-alpha) * 100%), var(--accent-7) var(--material-blend));
+  --surface-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
+  background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--surface-border-6);
   color: var(--accent-a11);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface){
-  background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  -webkit-backdrop-filter: var(--backdrop-filter-components);
-          backdrop-filter: var(--backdrop-filter-components);
-}
-.rt-BaseButton:where(.rt-variant-surface):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-6);
-}
-.rt-BaseButton:where(.rt-variant-surface):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-}
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-surface):where(:hover){
-    background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface):where(:hover){
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
-  }
-  .rt-BaseButton:where(.rt-variant-surface):where(:hover):where([data-panel-background='solid'], [data-material='solid']){
-    background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-  .rt-BaseButton:where(.rt-variant-surface):where(:hover):where([data-panel-background='translucent'], [data-material='translucent']){
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+    box-shadow: inset 0 0 0 1px var(--surface-border-7);
   }
 }
 .rt-BaseButton:where(.rt-variant-surface):where([data-state='open']){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface):where([data-state='open']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-.rt-BaseButton:where(.rt-variant-surface):where([data-state='open']):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.rt-BaseButton:where(.rt-variant-surface):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--surface-border-8), var(--shadow-1);
 }
 .rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])){
-  background-color: var(--accent-4);
-  box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-.rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-4);
-  box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--surface-border-8), var(--shadow-1);
 }
 .rt-BaseButton:where(.rt-variant-surface):where(:focus-visible){
   outline: 2px solid var(--focus-8);
@@ -9006,93 +8752,36 @@
   pointer-events: none;
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic){
-  background-color: var(--gray-3);
+  background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--gray-3);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-}
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid){
-  background-color: var(--accent-10);
+  --solid-blend: calc(100% - (var(--material-alpha) * 90%));
+  background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
   opacity: 0.9;
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid){
-  background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-10);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
-}
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast){
   background-color: var(--accent-12);
   opacity: 0.85;
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft){
-  background-color: var(--accent-5);
+  background-color: color-mix(in srgb, var(--accent-a5) calc(var(--material-alpha) * 100%), var(--accent-5) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft){
-  background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-5);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-}
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost){
-  background-color: var(--accent-4);
+  background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
   box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost){
-  background-color: var(--accent-a4);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-4);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: var(--accent-a4);
-}
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-outline){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-outline){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-outline):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-outline):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  --outline-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--outline-border-8), var(--shadow-1);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-surface){
-  background-color: var(--accent-4);
-  box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-surface){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-surface):where([data-panel-background='solid'], [data-material='solid']){
-  background-color: var(--accent-4);
-  box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.rt-BaseButton:where([data-state='on']):where(.rt-variant-surface):where([data-panel-background='translucent'], [data-material='translucent']){
-  background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  --surface-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
+  background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--surface-border-8), var(--shadow-1);
 }
 .rt-BaseButton:where([disabled][aria-pressed]){
   transform: none;
@@ -16081,11 +15770,11 @@
 @media (hover: hover) {
   .rt-Image:where(:-moz-any-link, button, label):where(:hover){
     box-shadow: var(--shadow-3);
-    filter: brightness(1.05) contrast(1.02);
+    filter: brightness(1.08) contrast(1.02);
   }
   .rt-Image:where(:any-link, button, label):where(:hover){
     box-shadow: var(--shadow-3);
-    filter: brightness(1.05) contrast(1.02);
+    filter: brightness(1.08) contrast(1.02);
   }
 }
 .rt-Image:where(:-moz-any-link, button, label):where(:active){
@@ -16113,10 +15802,10 @@
 }
 @media (hover: hover) {
   :where(:-moz-any-link, button, label):where(:hover){
-    filter: brightness(1.05) contrast(1.02);
+    filter: brightness(1.08) contrast(1.02);
   }
   :where(:any-link, button, label):where(:hover){
-    filter: brightness(1.05) contrast(1.02);
+    filter: brightness(1.08) contrast(1.02);
   }
 }
 :where(:-moz-any-link, button, label):where(:active){