@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.60

package/scss/colors/_index.scss

@@ -1,99 +1,817 @@
 @use '../vars';
+@use '../mixins';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:string';
+
+$color-tokens: (
+  // SECTION: grays
+  gray: (
+      props: (
+        inherits: true,
+      ),
+      media: (
+        base: (
+          light: oklch(0.6483 0.0073 286.19),
+          dark: oklch(0.6483 0.0073 286.19),
+        ),
+        contrast: (
+          light: oklch(0.5326 0.0062 286.19),
+          dark: oklch(0.752 0.0057 286.26),
+        ),
+        fine: (
+          light: oklch(0.746 0.0071 286.23),
+          dark: oklch(0.7073 0.0072 286.21),
+        ),
+        fine-contrast: (
+          light: oklch(0.6347 0.0059 286.23),
+          dark: oklch(0.809 0.0056 286.27),
+        ),
+      ),
+    ),
+  gray2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.752 0.0057 286.26),
+        dark: oklch(0.5007 0.0047 286.23),
+      ),
+      contrast: (
+        light: oklch(0.6483 0.0073 286.19),
+        dark: oklch(0.5876 0.006 286.21),
+      ),
+      fine: (
+        light: oklch(0.8464 0.0055 286.28),
+        dark: oklch(0.5634 0.0046 286.25),
+      ),
+      fine-contrast: (
+        light: oklch(0.746 0.0071 286.23),
+        dark: oklch(0.648 0.0059 286.23),
+      ),
+    ),
+  ),
+  gray3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8312 0.0069 286.25),
+        dark: oklch(0.4024 0.0033 286.25),
+      ),
+      contrast: (
+        light: oklch(0.752 0.0057 286.26),
+        dark: oklch(0.4466 0.0032 286.27),
+      ),
+      fine: (
+        light: oklch(0.9233 0.0067 286.27),
+        dark: oklch(0.4683 0.0032 286.28),
+      ),
+      fine-contrast: (
+        light: oklch(0.8464 0.0055 286.28),
+        dark: oklch(0.5109 0.0031 286.29),
+      ),
+    ),
+  ),
+  gray4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8622 0.0068 286.26),
+        dark: oklch(0.3492 0.0034 286.22),
+      ),
+      contrast: (
+        light: oklch(0.7964 0.0056 286.27),
+        dark: oklch(0.3874 0.0033 286.24),
+      ),
+      fine: (
+        light: oklch(0.9536 0.0067 286.27),
+        dark: oklch(0.4172 0.0033 286.26),
+      ),
+      fine-contrast: (
+        light: oklch(0.8895 0.0054 286.29),
+        dark: oklch(0.4538 0.0032 286.27),
+      ),
+    ),
+  ),
+  gray5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9233 0.0067 286.27),
+        dark: oklch(0.2939 0.0036 286.18),
+      ),
+      contrast: (
+        light: oklch(0.8834 0.0054 286.29),
+        dark: oklch(0.3352 0.0104 285.82),
+      ),
+      fine: (
+        light: oklch(0.9626 0.0066 286.27),
+        dark: oklch(0.3492 0.0034 286.22),
+      ),
+      fine-contrast: (
+        light: oklch(0.9743 0.0053 286.3),
+        dark: oklch(0.4024 0.0033 286.25),
+      ),
+    ),
+  ),
+  gray6: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9626 0.0066 286.27),
+        dark: oklch(0.2273 0.0038 286.09),
+      ),
+      contrast: (
+        light: oklch(0.9415 0.0067 286.27),
+        dark: oklch(0.2611 0.0037 286.14),
+      ),
+      fine: (
+        light: oklch(0.9919 0.003956 286.3273),
+        dark: oklch(0.2939 0.0036 286.18),
+      ),
+      fine-contrast: (
+        light: oklch(1 0 0),
+        dark: oklch(0.3336 0.0035 286.21),
+      ),
+    ),
+  ),
+  blue: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.5771 0.2207 258.72),
+        dark: oklch(0.5983 0.2103 256.76),
+      ),
+    ),
+  ),
+  blue2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7545 0.1248 249.16),
+        dark: oklch(0.3497 0.109177 253.3949),
+      ),
+    ),
+  ),
+  blue3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8728 0.0631 246.39),
+        dark: oklch(0.228 0.0588 246.17),
+      ),
+    ),
+  ),
+  blue4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9063 0.0454 245.27),
+        dark: oklch(0.196 0.0464 241.89),
+      ),
+    ),
+  ),
+  blue5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9399 0.0298 245.27),
+        dark: oklch(0.1602 0.0312 241.89),
+      ),
+    ),
+  ),
+  red: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.6473 0.2385 27.3),
+        dark: oklch(0.6536 0.2325 26.55),
+      ),
+    ),
+  ),
+  red2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7766 0.1308 22.77),
+        dark: oklch(0.3893 0.1278 25.91),
+      ),
+    ),
+  ),
+  red3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8785 0.0643 22),
+        dark: oklch(0.2473 0.0667 23.31),
+      ),
+    ),
+  ),
+  red4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9142 0.0439 23.18),
+        dark: oklch(0.2085 0.047 24.05),
+      ),
+    ),
+  ),
+  red5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        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),
+      ),
+    ),
+  ),
+  //orangeemphasis light: oklch(0.6414 0.157 55.97) dark: oklch(0.83 0.1633 79.36)
+  // SECTION: SystemColor
+  canvas: (
+      props: (
+        inherits: false,
+      ),
+      media: (
+        base: (
+          light: oklch(1 0 0),
+          dark: oklch(0 0 0),
+        ),
+      ),
+    ),
+  canvastext: (
+    props: (
+      inherits: false,
+    ),
+    media: (
+      base: (
+        light: oklch(0 0 0),
+        dark: oklch(1 0 0),
+      ),
+    ),
+  ),
+  // SECTION: bgs
+  primary: (
+      props: (
+        inherits: true,
+      ),
+      media: (
+        base: (
+          light: oklch(0 0 0),
+          dark: oklch(1 0 0),
+        ),
+        fine: (
+          light: oklch(0.2686 0 0),
+          dark: oklch(0.9034 0.0013 106.43),
+        ),
+      ),
+    ),
+  background: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(1 0 0),
+        dark: oklch(0 0 0),
+      ),
+    ),
+  ),
+  secondaryBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9543 0.0067 295.45),
+        dark: oklch(0.2186 0.0039 286.08),
+      ),
+    ),
+  ),
+  tertiaryBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(1 0 0),
+        dark: oklch(0.2735 0.0036 286.16),
+      ),
+    ),
+  ),
+  groupedBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9543 0.0067 295.45),
+        dark: oklch(0 0 0),
+      ),
+    ),
+  ),
+  secondaryGroupedBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(1 0 0),
+        dark: oklch(0.2186 0.0039 286.08),
+      ),
+    ),
+  ),
+  tertiaryGroupedBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9543 0.0067 295.45),
+        dark: oklch(0.2735 0.0036 286.16),
+      ),
+    ),
+  ),
+  // SECTION: semantic colors
+  separator: (
+      props: (
+        inherits: true,
+      ),
+      media: (
+        base: (
+          light: oklch(0.9431 0 0),
+          dark: oklch(0.2858 0.0036 286.17),
+        ),
+        fine: (
+          light: oklch(0.9249 0 0),
+          dark: oklch(0.3452 0.0074 84.59),
+        ),
+      ),
+    )
+);
+
+$colors: map.merge(
+  $color-tokens,
+  (
+    secondary: map.get($color-tokens, gray),
+    tertiary: map.get($color-tokens, gray2),
+    quaternary: map.get($color-tokens, gray3),
+    quinary: map.get($color-tokens, gray4),
+    accentColor: map.get($color-tokens, blue),
+    accentColor2: map.get($color-tokens, blue2),
+    accentColor3: map.get($color-tokens, blue3),
+    accentColor4: map.get($color-tokens, blue4),
+    accentColor5: map.get($color-tokens, blue5),
+    // accent222: map.merge(
+    //     map.get($color-tokens, blue4),
+    //     (
+    //       props: (
+    //         inherits: false,
+    //       ),
+    //     )
+     //   ),
+  )
+);
+
+@include mixins.generate-color-tokens($colors);
+
+// SECTION: colors
+@property --black {
+  syntax: '<color>';
+  initial-value: oklch(0 0 0); // ✅
+  inherits: true;
+}
+
+@property --white {
+  syntax: '<color>';
+  initial-value: oklch(1 0 0); // ✅
+  inherits: true;
+}
+
+@property --clear {
+  syntax: '<color>';
+  initial-value: oklch(0 0 0 / 0%); // ✅
+  inherits: true;
+}
 
 @layer #{vars.$colors-layer} {
-  navigation-stack,
-  navigation-split-view,
-  body-view {
-    --canvas-bg: var(--primary-bg);
+  :root {
+    // --background: light-dark(oklch(1 0 0), oklch(0 0 0)); // ✅
+
+    // ANCHOR: level 0
+    --face: var(--background); //light-dark(var(--primary-bg), var(--primary-bg-dark));
+    // --face2: var(--secondaryBackground); //light-dark(var(--primary-bg), var(--primary-bg-dark));
+    // --face3: var(--tertiaryBackground); //light-dark(var(--primary-bg), var(--primary-bg-dark));
+    // --groupedface: light-dark(var(--primary-grouped-bg), var(--primary-grouped-bg-dark));
+
+    --text: var(--primary); //light-dark(var(--primary-label), var(--primary-label-dark));
+
+    // --separator: light-dark(var(--divider), var(--divider-dark));
+
+    // --mutedtext: light-dark(var(--secondary-label), var(--secondary-label-dark));
   }
 
-  [is='sheet-view'],
-  [is='full-screen'] {
-    --canvas-bg: var(--secondary-bg);
+  // :where(navigation-stack, navigation-split-view) {
+  //   --canvas: light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
+  //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
+  // }
+
+  :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!
+
+    // 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));
   }
 
-  body-view {
-    --primary-bg: oklch(0.984 0.019 200.873);
-    --secondary-bg: oklch(0.984 0.019 200.873);
+  :where(navigation-split-view > [is='sidebar-view']) {
+    // --canvas: light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
+    // --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)));
+
+      // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    }
   }
 
-  body-view > body-view {
-    --primary-bg: oklch(0.956 0.045 203.388);
-    --secondary-bg: oklch(0.956 0.045 203.388);
+  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)));
+      // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    }
+
+    :where(& [is='form-view']) {
+      --list--highlighteditem-background-color: transparent;
+      --list--highlighteditem-color: var(--accentColor);
+    }
+    // :where(& [is='tab-item'][aria-selected='true']) {
+    //   --itemtext: blue;
+    //   --itemhighlighttext: blue;
+    //   --itemactivetext: blue;
+    // }
   }
 
-  body-view > body-view > body-view {
-    --primary-bg: oklch(0.917 0.08 205.041);
-    --secondary-bg: oklch(0.917 0.08 205.041);
+  :where([is='tab-bar']) {
+    --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));
   }
 
-  body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.865 0.127 207.078);
-    --secondary-bg: oklch(0.865 0.127 207.078);
+  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));
+      // }
+    }
   }
 
-  body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.789 0.154 211.53);
-    --secondary-bg: oklch(0.789 0.154 211.53);
+  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(&) {
+      // --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);
+      }
+    }
   }
 
-  body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.715 0.143 215.221);
-    --secondary-bg: oklch(0.715 0.143 215.221);
+  // [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 {
+    // [is='disclosure-group'] {
+    :where(&) {
+      --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));
+    }
   }
 
-  body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.609 0.126 221.723);
-    --secondary-bg: oklch(0.609 0.126 221.723);
+  menu-view {
+    :where(&) {
+      --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));
+      }
+
+      --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;
+    // }
   }
 
-  body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view {
-    --primary-bg: oklch(0.52 0.105 223.128);
-    --secondary-bg: oklch(0.52 0.105 223.128);
+  :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));
+    // --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) {
+    //   --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));
+    //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
+    // }
   }
 
-  body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view {
-    --primary-bg: oklch(0.45 0.085 224.283);
-    --secondary-bg: oklch(0.45 0.085 224.283);
+  :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));
   }
 
-  body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view {
-    --primary-bg: oklch(0.398 0.07 227.392);
-    --secondary-bg: oklch(0.398 0.07 227.392);
+  /**
+  * 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(--accentColorEffective, var(--accentColor));
+    --btnhighlighttext: light-dark(
+      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(--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(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)), var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)));
+    --btnhighlightface: light-dark(
+      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(--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']) {
+    --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) 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(--accentColorEffective, var(--accentColor));
+    --btnhighlighttext: light-dark(
+      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(--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(--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));
   }
 
-  body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view
-    > body-view {
-    --primary-bg: oklch(0.302 0.056 229.695);
-    --secondary-bg: oklch(0.302 0.056 229.695);
+  :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);
+
+    @include mixins.wire-tinted-glass(btn);
   }
+
+  /* list-view {
+    :where(&) {
+      // --toolbaritemface: ;
+      // --toolbaritemhighlightface: magenta;
+      --toolbaritemactiveface: light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+      // --toolbaritemhighlighttext: yellow;
+      --toolbaritemactivetext: white;
+    }
+
+    :where(& [aria-selected='true']) {
+      --toolbaritemface: light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+      --toolbaritemhighlightface: light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+      --toolbaritemactiveface: light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+      --toolbaritemtext: white;
+      --toolbaritemhighlighttext: white;
+      --toolbaritemactivetext: white;
+    }
+  } */
 }