@kushagradhawan/kookie-ui 0.1.71 → 0.1.72

package/README.md

@@ -306,6 +306,8 @@ Kookie UI uses a comprehensive theming system with:
 
 ⚠️ **Beta** - Kookie UI is in beta. Components and APIs are still evolving, and breaking changes may happen. Check changelogs carefully before upgrading.
 
+> Note: This package uses npm Trusted Publishing with OIDC for secure CI/CD deployments.
+
 ## License
 
 MIT © [Kushagra Dhawan](https://github.com/kushagradhawan)
@@ -315,3 +317,5 @@ MIT © [Kushagra Dhawan](https://github.com/kushagradhawan)
 - [Documentation](https://github.com/kushagradhawan/kookie-ui)
 - [GitHub Repository](https://github.com/kushagradhawan/kookie-ui)
 - [Issue Tracker](https://github.com/kushagradhawan/kookie-ui/issues)
+
+---

package/components.css

@@ -3260,6 +3260,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;
 }
@@ -3422,31 +3430,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);
@@ -3454,57 +3443,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);
@@ -3577,47 +3527,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);
@@ -3633,48 +3557,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);
@@ -3700,16 +3597,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);
@@ -3717,45 +3605,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);
@@ -3786,16 +3647,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) {
@@ -3803,33 +3655,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;
@@ -3837,71 +3669,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);
@@ -3918,73 +3705,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);
@@ -4001,93 +3741,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;
@@ -11076,11 +10759,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) {
@@ -11108,10 +10791,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) {