@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/scss/colors/_index.scss

@@ -195,8 +195,8 @@ $color-tokens: (
     ),
     media: (
       base: (
-        light: oklch(0.9063 0.0454 245.27),
-        dark: oklch(0.196 0.0464 241.89),
+        light: oklch(0.9399 0.0298 245.27),
+        dark: oklch(0.1602 0.0312 241.89),
       ),
     ),
   ),
@@ -250,8 +250,173 @@ $color-tokens: (
     ),
     media: (
       base: (
-        light: oklch(0.9142 0.0439 23.18),
-        dark: oklch(0.2085 0.047 24.05),
+        light: oklch(0.9451 0.0312 23.18),
+        dark: oklch(0.1692 0.0381 24.05),
+      ),
+    ),
+  ),
+  green: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7303 0.1944 147.44),
+        dark: oklch(0.7556 0.2082 146.98),
+      ),
+    ),
+  ),
+  green2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8224 0.1298 162.01),
+        dark: oklch(0.4879 0.1248 152),
+      ),
+    ),
+  ),
+  green3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.906 0.0681 165.21),
+        dark: oklch(0.3559 0.0789 157.3),
+      ),
+    ),
+  ),
+  green4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9323 0.0504 166.1),
+        dark: oklch(0.3156 0.0607 160.27),
+      ),
+    ),
+  ),
+  green5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9558 0.0353 166.1),
+        dark: oklch(0.2632 0.0425 160.27),
+      ),
+    ),
+  ),
+  orange: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7533 0.172 55.72),
+        dark: oklch(0.7619 0.167 57.05),
+      ),
+    ),
+  ),
+  orange2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8548 0.111 68.86),
+        dark: oklch(0.4468 0.0914 61.4),
+      ),
+    ),
+  ),
+  orange3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9268 0.0611 75.74),
+        dark: oklch(0.2823 0.051 67.31),
+      ),
+    ),
+  ),
+  orange4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9443 0.045 74.78),
+        dark: oklch(0.2389 0.04 75.03),
+      ),
+    ),
+  ),
+  orange5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9651 0.0315 74.78),
+        dark: oklch(0.1983 0.028 75.03),
+      ),
+    ),
+  ),
+  purple: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.6167 0.2607 326),
+        dark: oklch(0.6586 0.2795 325.94),
+      ),
+    ),
+  ),
+  purple2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7807 0.1464 325.64),
+        dark: oklch(0.443 0.1667 326.12),
+      ),
+    ),
+  ),
+  purple3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8873 0.0728 324.7),
+        dark: oklch(0.3288 0.0959 325.84),
+      ),
+    ),
+  ),
+  purple4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9184 0.0518 323.99),
+        dark: oklch(0.2981 0.0724 325.02),
+      ),
+    ),
+  ),
+  purple5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9455 0.0358 323.99),
+        dark: oklch(0.2454 0.0522 323.99),
       ),
     ),
   ),
@@ -417,6 +582,12 @@ $colors: map.merge(
   inherits: true;
 }
 
+@property --clear {
+  syntax: '<color>';
+  initial-value: oklch(0 0 0 / 0%); // ✅
+  inherits: true;
+}
+
 @layer #{vars.$colors-layer} {
   :root {
     // --background: light-dark(oklch(1 0 0), oklch(0 0 0)); // ✅
@@ -439,14 +610,15 @@ $colors: map.merge(
   //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
   // }
 
-  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog']) {
+  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
     // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
     // ANCHOR: level 1
     --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
     // --face2: var(--secondaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
     // --face3: var(--tertiaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
 
-    --background: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
+    // FIXME: feat-sheet 1/3
+    --background: var(--secondaryBackground); //light-dark(var(--secondary-bg), var(--secondary-bg-dark));
     // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
 
     // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
@@ -457,10 +629,8 @@ $colors: map.merge(
     // --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
 
     @include mixins.if-2col-split-view-fits {
-      --face: light-dark(
-        var(--liquid-glass-bg),
-        var(--liquid-glass-bg-dark)
-      ); //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
+      --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+      //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
 
       // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
     }
@@ -468,10 +638,8 @@ $colors: map.merge(
 
   tab-view > [is='sidebar-view'] {
     :where(&) {
-      --face: light-dark(
-        var(--liquid-glass-bg),
-        var(--liquid-glass-bg-dark)
-      ); //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
+      --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+      //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
       // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
     }
 
@@ -487,38 +655,65 @@ $colors: map.merge(
   }
 
   :where([is='tab-bar']) {
-    --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemtext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
 
-  :where(tool-bar-item, tool-bar-item-group, navigation-split-view sidebar-toggle) {
-    //, list-view) {
-    //, [is='form-view'] BREAKS sidebar
-    --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
-
-    // @media (pointer: fine) {
-    //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
-    // }
+  tool-bar-item,
+  tool-bar-item-group {
+    // navigation-split-view sidebar-toggle { // NOTE: removed since all s-toggles alreay have a toolbaritem inside
+    :where(&) {
+      //, list-view) {
+      //, [is='form-view'] BREAKS sidebar
+      --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+
+      // @media (pointer: fine) {
+      //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
+      // }
+    }
   }
 
-  [is='tab-bar'] [is='tab-item'] {
+  tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
+  tool-bar-item-group[tint],
+  tool-bar-item-group[tint] > tool-bar-item:not([tint]) {
     :where(&) {
-      --toolbaritemhighlighttext: yellow;
-      --toolbaritemactivetext: chocolate;
+      // --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      // --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      // --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+
+      @include mixins.wire-tinted-glass(toolbaritem);
+
+      > button {
+        @include mixins.takeover-color-vars(toolbaritem);
+        // --secondary: var(--btntext);
+        // --blue: var(--btntext);
+
+        // --accentColorEffective: var(--btntext);
+        // --accentColor: var(--btntext);
+      }
     }
   }
 
-  sidebar-toggle,
+  // [is='tab-bar'] [is='tab-item'] {
+  //   :where(&) {
+  //     --toolbaritemhighlighttext: yellow;
+  //     --toolbaritemactivetext: chocolate;
+  //   }
+  // }
+
+  sidebar-toggle {
     // tool-bar-item,
     // [is='tab-item'],
     // list-view > button,
     // this is temp for toolbar look aboove tables
-    menu-view {
+    // menu-view {
     // [is='disclosure-group'] {
     :where(&) {
       --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
@@ -528,15 +723,46 @@ $colors: map.merge(
 
   menu-view {
     :where(&) {
-      --menuitemhighlighttext: light-dark(var(--menu-item-focus-color), var(--menu-item-focus-color-dark));
-      --menuitemhighlightface: light-dark(var(--menu-item-focus-bg), var(--menu-item-focus-bg-dark));
+      --menuitemhighlightface: light-dark(var(--clear), var(--clear));
+
+      --menuitemactiveface: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
+
+      @media (pointer: fine) {
+        --menuitemhighlightface: light-dark(var(--accentColor), var(--accentColor));
+
+        --menuitemhighlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+        --menuitemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+        --menuitemactiveface: light-dark(
+          oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
+          oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h)
+        ); //color-mix(in oklch, black 10%, var(--accentColor)); //color-mix(in oklch, white 10%, var(--accentColor));
+      }
 
-      --menuitemactivetext: light-dark(var(--menu-item-active-color), var(--menu-item-active-color-dark));
-      --menuitemactiveface: light-dark(var(--menu-item-active-bg), var(--menu-item-active-bg-dark));
+      --menusummaryhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      --menusummaryactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
     }
+
+    tool-bar-item > picker-view > &,
+    tool-bar-item > & {
+      :where(&) {
+        --menusummaryface: var(--toolbaritemface);
+        --menusummaryhighlightface: var(--toolbaritemhighlightface);
+        --menusummaryactiveface: var(--toolbaritemactiveface);
+        --menusummarytext: var(--toolbaritemtext);
+        --menusummaryhighlighttext: var(--toolbaritemhighlighttext);
+        --menusummaryactivetext: var(--toolbaritemactivetext);
+      }
+    }
+
+    // :where(&[tint]) {
+    // @include mixins.wire-tinted-menu(menuitemface, menuitemhighlightface, menuitemactiveface);
+    // @include mixins.wire-menu-colors;
+    // }
   }
 
-  :where([is='confirmation-dialog']) {
+  :where([is='confirmation-dialog'], [is='alert-dialog']) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --dialogbtnhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --dialogbtnactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
@@ -552,36 +778,43 @@ $colors: map.merge(
 
   :where([is='borderless-button']) {
     --btntext: var(--accentColor);
-    --btnhighlighttext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactivetext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlighttext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
+    --btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
   }
 
+  /**
+  * NOTE: --accentColorEffective does NOT exist, it is NOT set anywhere initially!
+  * NOTE: Some controls use it to override the initial style WHEN/IF ...Effective is set by someone above.
+  */
   :where([is='bordered-button']) {
-    --btntext: var(--accentEmphasis, var(--accentColor));
+    --btntext: var(--accentColorEffective, var(--accentColor));
     --btnhighlighttext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
     );
     --btnactivetext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
     );
 
-    --btnface: light-dark(var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)), var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)));
+    --btnface: light-dark(var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)), var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)));
     --btnhighlightface: light-dark(
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.95), 0) min(calc(c * 1.8), c) h),
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.2), 1) min(calc(c * 1.8), c) h)
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.95), 0) min(calc(c * 1.8), c) h),
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.2), 1) min(calc(c * 1.8), c) h)
     );
     --btnactiveface: light-dark(
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.9), 0) min(calc(c * 1.8), c) h),
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.3), 1) min(calc(c * 1.8), c) h)
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.9), 0) min(calc(c * 1.8), c) h),
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.3), 1) min(calc(c * 1.8), c) h)
     );
+    // --btnface: light-dark(var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)), var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)));
+    // --btnhighlightface: light-dark(
+    //   oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.95), 0) min(calc(c * 1.8), c) h),
+    //   oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.2), 1) min(calc(c * 1.8), c) h)
+    // );
+    // --btnactiveface: light-dark(
+    //   oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.9), 0) min(calc(c * 1.8), c) h),
+    //   oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.3), 1) min(calc(c * 1.8), c) h)
+    // );
   }
 
   :where([is='bordered-prominent-button']) {
@@ -590,46 +823,32 @@ $colors: map.merge(
     --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
     --btnface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlightface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h));
+    --btnactiveface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
   }
 
   :where([is='glass-button']) {
-    --btntext: var(--accentEmphasis, var(--accentColor));
+    --btntext: var(--accentColorEffective, var(--accentColor));
     --btnhighlighttext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
     );
     --btnactivetext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
     );
 
-    --btnface: light-dark(var(--glass-btn-bg), var(--glass-btn-bg-dark));
-    --btnhighlightface: light-dark(var(--glass-btn-focus-bg), var(--glass-btn-focus-bg-dark));
-    --btnactiveface: light-dark(var(--glass-btn-active-bg), var(--glass-btn-active-bg-dark));
+    --btnface: light-dark(var(--clear-glass-bg), var(--clear-glass-bg-dark));
+    --btnhighlightface: light-dark(var(--clear-glass-focus-bg), var(--clear-glass-focus-bg-dark));
+    --btnactiveface: light-dark(var(--clear-glass-active-bg), var(--clear-glass-active-bg-dark));
   }
 
   :where([is='glass-prominent-button']) {
-    --btntext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btntext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
-    --btnface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
-    );
+    @include mixins.wire-tinted-glass(btn);
   }
 
   /* list-view {

package/scss/components/_alert-dialog.scss

@@ -0,0 +1,111 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='alert-dialog'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      @include mixins.make-backdrop-transitionable;
+
+      color: var(--text,);
+
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: fit-content;
+      block-size: fit-content;
+      height: auto; // safari
+      max-inline-size: min(20rem, 80vw);
+      max-block-size: 80vh;
+
+      margin-block: auto;
+      margin-inline: auto;
+
+      transform: var(--alert--dialog-scale,);
+      opacity: var(--alert--dialog-opacity,);
+
+      place-self: center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+      padding-block: 1rem;
+      padding-inline: 1rem;
+      gap: 1rem;
+
+      // finally
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+
+    &[open] {
+      :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+
+        --alert--dialog-scale: scale(1);
+        --alert--dialog-opacity: 1;
+
+        @starting-style {
+          --alert--dialog-scale: scale(1.2);
+          --alert--dialog-opacity: 0.8;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--clear));
+
+        --alert--dialog-scale: scale(0.98);
+        --alert--dialog-opacity: 0;
+      }
+    }
+
+    // SECTION: componentize
+    // > button {
+    //   :where(&) {
+    // @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
+  }
+}
+
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_bordered-button.scss

@@ -6,17 +6,52 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+
       @media (pointer: fine) {
         --accentColor: var(--primary);
       }
     }
 
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
+    }
+
     :where(&[role='destructive']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }