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

package/scss/base/_root.scss

@@ -1,6 +1,7 @@
 @use '../vars';
 @use '../mixins';
 @use 'sass:map';
+@use 'sass:string';
 
 @property --root-font-size {
   syntax: '<number>';
@@ -12,6 +13,10 @@
   :root {
     color-scheme: light dark;
 
+    // --font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+
+    // --font-variation-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+
     // --ipad-bp: #{vars.$ipad-portrait-bp};
 
     // --edge-inset-inline-start: 10px;
@@ -61,8 +66,27 @@
       --liquid-glass-bg-alpha: 99%;
       --liquid-glass-bg-alpha-dark: 99%;
     }
+    //
     --liquid-glass-bg: oklch(var(--liquid-glass-bg-lch) / var(--liquid-glass-bg-alpha));
     --liquid-glass-bg-dark: oklch(var(--liquid-glass-bg-lch-dark) / var(--liquid-glass-bg-alpha-dark));
+
+    --clear-glass-bg: var(--liquid-glass-bg);
+    --clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --clear-glass-focus-bg: var(--clear-glass-bg);
+    --clear-glass-focus-bg-dark: var(--clear-glass-bg-dark);
+    --clear-glass-active-bg: var(--clear-glass-bg);
+    --clear-glass-active-bg-dark: var(--clear-glass-bg-dark);
+
+    // @include mixins.wire-tinted-glass(tinted-glass-bg, tinted-glass-focus-bg, tinted-glass-active-bg);
+
+    // This is for glass effect on interactive elements like controls that supports hover on fine screens and active state!
+    // NOTE: On fine screens this fallbacks/transforms into a basic color w/out glass efect!
+    --control-clear-glass-bg: var(--liquid-glass-bg);
+    --control-clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --control-clear-glass-focus-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-focus-bg-dark: var(--control-clear-glass-bg-dark);
+    --control-clear-glass-active-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-active-bg-dark: var(--control-clear-glass-bg-dark);
     //color-mix(in oklch, red calc(100% - 50%), transparent)
 
     // --sidebar-bg-lch: 1 0 0;
@@ -80,51 +104,52 @@
     --liquid-glass-bs-soft-bevel-blur: inset 1px 1px 0 -0.5px light-dark(#fff, #fff6);
     --liquid-glass-bs-outer: 0 0 25px 0 light-dark(#0003, #00000026);
     --liquid-glass-box-shadow:
-      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626),
-      inset -3px -3px 10px -3px light-dark(#ddd, #262626), inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26),
-      inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
+      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626), inset -3px -3px 10px -3px light-dark(#ddd, #262626),
+      inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26), inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
+
+    --control-clear-glass-box-shadow: var(--liquid-glass-box-shadow);
 
     --navigation-bar-block-size: var(--tool-bar-block-size);
 
     --nav-split-view-sidebar-inline-size: 20rem;
     --nav-split-view-content-inline-size: 25rem;
 
-    --nav-split-view-separator-color: var(--divider); //oklch(0 0 0);
-    --nav-split-view-separator-color-dark: var(--divider-dark); //oklch(1 0 0);
+    // --nav-split-view-separator-color: var(--divider); //var(--black);
+    // --nav-split-view-separator-color-dark: var(--divider-dark); //var(--white);
 
-    --primary-label: oklch(0 0 0);
-    --primary-label-dark: oklch(1 0 0);
+    // --primary-label: var(--black);
+    // --primary-label-dark: var(--white);
 
     // --secondary-label: oklch(0.4962 0 0); // ✅
     // --secondary-label-dark: oklch(0.6334 0 0); // ✅
 
-    --secondary-text: oklch(0 0 0);
-    --secondary-text-dark: oklch(1 0 0);
+    // --secondary-text: var(--black);
+    // --secondary-text-dark: var(--white);
 
-    --tint: oklch(0.5325 0.1899 257.12);
-    --tint1g: color-mix(in oklch, white 70%, var(--tint)); //oklch(0.9208 0.0306 249.69);
-    --tint2: color-mix(in oklch, white 80%, var(--tint)); //oklch(0.9208 0.0306 249.69);
-    --tint3: color-mix(in oklch, white 90%, var(--tint)); //oklch(0.9607 0.0148 251.16);
+    // --tint: oklch(0.5325 0.1899 257.12);
+    // --tint1g: color-mix(in oklch, white 70%, var(--tint)); //oklch(0.9208 0.0306 249.69);
+    // --tint2: color-mix(in oklch, white 80%, var(--tint)); //oklch(0.9208 0.0306 249.69);
+    // --tint3: color-mix(in oklch, white 90%, var(--tint)); //oklch(0.9607 0.0148 251.16);
 
     --tintcontrast: white; //--tintcontrast: contrast-color(var(--tint));
 
     // --tint-lch: 0.452 0.313214 264.052;
     // --tint-lch-dark: 0.452 0.313214 264.052;
 
-    --divider: oklch(0.9431 0 0); // ✅
-    --divider-dark: oklch(0.2858 0.0036 286.17); // ✅
+    // --divider: oklch(0.9431 0 0); // ✅
+    // --divider-dark: oklch(0.2858 0.0036 286.17); // ✅
 
-    --system-bg: oklch(1 0 0); // ✅
-    --system-bg-dark: oklch(0 0 0); // ✅
+    // --system-bg: var(--white); // ✅
+    // --system-bg-dark: var(--black); // ✅
 
-    --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
-    --primary-bg-dark: oklch(0 0 0); // ✅
+    // --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
+    // --primary-bg-dark: var(--black); // ✅
 
-    --primary-grouped-bg: oklch(1 0 0); //0.8136 0.0428 255.03;
-    --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
+    // --primary-grouped-bg: var(--white); //0.8136 0.0428 255.03;
+    // --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
 
-    --secondary-bg: oklch(0.8045 0.0779 73.42);
-    --secondary-bg-dark: oklch(0.8045 0.0779 73.42);
+    // --secondary-bg: oklch(0.8045 0.0779 73.42);
+    // --secondary-bg-dark: oklch(0.8045 0.0779 73.42);
 
     --view-transition-leading-x: -50%;
     --view-transition-principal-x: 0%;
@@ -146,31 +171,32 @@
     --clear: transparent;
 
     --toolbar-col-gap: 0.5rem;
-    --toolbar-cell-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)); //oklch(0 0 0 / 0%);
-    --toolbar-cell-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)); //oklch(0 0 0 / 0%);
+    --toolbar-cell-bg: var(--control-clear-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)); //oklch(0 0 0 / 0%);
+    --toolbar-cell-bg-dark: var(--control-clear-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)); //oklch(0 0 0 / 0%);
     --toolbar-cell-inline-padding-start: 0.25rem;
     --toolbar-cell-inline-padding-end: 0.25rem;
     --toolbar-cell-block-padding-start: 0.25rem;
     --toolbar-cell-block-padding-end: 0.25rem;
     --toolbar-cell-border-radius: var(--pill-border-radius);
-    --toolbar-cell-min-size: 2.8rem;
+    --toolbar-cell-min-size: 2.96rem;
+
+    --toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg); //oklch(0 0 0 / 0%);
+    --toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark); //oklch(0 0 0 / 0%);
+    --toolbar-cell-active-bg: var(--control-clear-glass-active-bg); //oklch(0 0 0 / 0%);
+    --toolbar-cell-active-bg-dark: var(--control-clear-glass-active-bg-dark); //oklch(0 0 0 / 0%);
 
-    --toolbar-cell-focus-bg: var(--toolbar-cell-bg); //oklch(0 0 0 / 0%);
-    --toolbar-cell-focus-bg-dark: var(--toolbar-cell-bg-dark); //oklch(0 0 0 / 0%);
-    --toolbar-cell-active-bg: var(--toolbar-cell-bg); //oklch(0 0 0 / 0%);
-    --toolbar-cell-active-bg-dark: var(--toolbar-cell-bg-dark); //oklch(0 0 0 / 0%);
+    --toolbar-cell-box-shadow: var(--control-clear-glass-box-shadow);
 
-    --toolbar-cell-box-shadow: var(--liquid-glass-box-shadow);
+    --menu-bg: var(--control-clear-glass-bg); //--menu-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
+    --menu-bg-dark: var(--control-clear-glass-bg-dark); //--menu-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark));
 
-    --menu-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
-    --menu-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark));
     --menu-max-inline-size: 15rem;
     --menu-max-block-size: 60vh;
     --menu-spacing: 1rem;
     --menu-host-offscreen-transform: scale(0);
     --menu-host-offscreen-filter: blur(10px);
 
-    --menu-popover-box-shadow: var(--liquid-glass-box-shadow);
+    --menu-popover-box-shadow: var(--control-clear-glass-box-shadow);
 
     --menu-padding: 0.5rem;
 
@@ -181,12 +207,6 @@
 
     --menu-item-border-radius: 1.2rem; // define this to be like a pill, based on an exemplar item min-height
 
-    --menu-item-focus-bg: oklch(0 0 0 / 0%);
-    --menu-item-focus-bg-dark: oklch(0 0 0 / 0%);
-
-    --menu-item-active-bg: oklch(0 0 0 / 20%);
-    --menu-item-active-bg-dark: oklch(1 0 0 / 20%);
-
     --touchglass-transition-duration: 300ms;
     // --touchglass-transition-duration: 15s;
 
@@ -202,6 +222,9 @@
 
     --screen-box-shadow: 2px 0 6px oklch(0 0 0 / 48%), 6px 0 16px oklch(0 0 0 / 67%);
 
+    --labeled-content-column-gap: 1rem;
+    --labeled-content-row-gap: 0.5rem;
+
     // @media (prefers-color-scheme: dark) {
     //   @include dark-theme;
     // }
@@ -216,7 +239,8 @@
 
     // lists
 
-    --insetlist-item-border-radius: 1rem;
+    --insetlist-item-border-radius: 2rem;
+    --insetform-item-border-radius: 2rem;
 
     //
     --list-row-gap: 3rem;
@@ -225,73 +249,66 @@
     --form-extra-gap: 3rem;
 
     @each $v in list, form {
-      --#{$v}-item-padding-inline-start: 1rem;
-      --#{$v}-item-padding-inline-end: 1rem;
+      --#{$v}-item-padding-inline-start: 2rem;
+      --#{$v}-item-padding-inline-end: 2rem;
       --#{$v}-item-padding-block-start: 1rem;
       --#{$v}-item-padding-block-start: 1rem;
 
+      // FIXME: feat-sheet 3/3
       --#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
       --#{$v}-item-color: var(--primary);
-      --#{$v}-highlighteditem-background-color: var(--tint1g);
+      --#{$v}-highlighteditem-background-color: var(--accentColor3);
       --#{$v}-highlighteditem-color: ;
 
+      // FIXME: feat-sheet 3/3
       --inset#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
       --inset#{$v}-item-color: var(--primary);
-      --inset#{$v}-highlighteditem-background-color: var(--accentColor);
-      --inset#{$v}-highlighteditem-color: var(--tintcontrast);
+      --inset#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
+      --inset#{$v}-highlighteditem-color: ; //var(--tintcontrast);
 
       --insetgrouped#{$v}-item-background-color: var(--secondaryGroupedBackground); //light-dark(var(--system-bg), oklch(0.2186 0.0039 286.08)); // ✅
       --insetgrouped#{$v}-item-color: var(--primary);
-      --insetgrouped#{$v}-highlighteditem-background-color: var(--accentColor);
-      --insetgrouped#{$v}-highlighteditem-color: var(--tintcontrast);
+      --insetgrouped#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
+      --insetgrouped#{$v}-highlighteditem-color: ; //var(--tintcontrast);
 
       --sidebar#{$v}-item-background-color: transparent;
       --sidebar#{$v}-item-color: var(--primary);
       --sidebar#{$v}-highlighteditem-background-color: var(--accentColor);
       --sidebar#{$v}-highlighteditem-color: var(--tintcontrast);
 
-      --#{$v}-openitem-background-color: var(--tint3);
+      --#{$v}-openitem-background-color: var(--accentColor5);
       --#{$v}-openitem-color: var(--primary);
-      --#{$v}-opensummary-background-color: var(--tint2);
+      --#{$v}-opensummary-background-color: var(--accentColor4);
       --#{$v}-opensummary-color: var(--primary);
 
-      --insetgrouped#{$v}-openitem-background-color: var(--tint3);
+      --insetgrouped#{$v}-openitem-background-color: var(--accentColor5);
       --insetgrouped#{$v}-openitem-color: var(--primary);
-      --insetgrouped#{$v}-opensummary-background-color: var(--tint2);
+      --insetgrouped#{$v}-opensummary-background-color: var(--accentColor4);
       --insetgrouped#{$v}-opensummary-color: var(--primary);
 
-      --inset#{$v}-openitem-background-color: var(--tint3);
+      --inset#{$v}-openitem-background-color: var(--accentColor5);
       --inset#{$v}-openitem-color: var(--primary);
-      --inset#{$v}-opensummary-background-color: var(--tint2);
+      --inset#{$v}-opensummary-background-color: var(--accentColor4);
       --inset#{$v}-opensummary-color: var(--primary);
 
       --sidebar#{$v}-openitem-background-color: transparent;
       --sidebar#{$v}-openitem-color: var(--primary);
       --sidebar#{$v}-opensummary-background-color: transparent;
       --sidebar#{$v}-opensummary-color: var(--primary);
-    }
 
-    //
-
-    --insetform-item-border-radius: 1rem;
+      --insetgrouped#{$v}-background-color: var(--groupedBackground);
 
-    --insetgroupedlist-background-color: var(--groupedBackground);
-    --insetgroupedform-background-color: var(--groupedBackground);
+      --inset#{$v}-padding-inline: 1rem;
+      --inset#{$v}-padding-block: 0rem;
 
-    --insetlist-padding-inline: 1rem;
-    --insetlist-padding-block: 0rem;
-    --insetform-padding-inline: 1rem;
-    --insetform-padding-block: 0rem;
+      --insetgrouped#{$v}-padding-inline: 1rem;
+      --insetgrouped#{$v}-padding-block: 1rem;
 
-    --insetgroupedlist-padding-inline: 1rem;
-    --insetgroupedform-padding-inline: 1rem;
-    --insetgroupedlist-padding-block: 1rem;
-    --insetgroupedform-padding-block: 1rem;
+      --sidebar#{$v}-padding-inline: 1rem;
+      --sidebar#{$v}-padding-block: 1rem;
+    }
 
-    --sidebarlist-padding-inline: 1rem;
-    --sidebarform-padding-inline: 1rem;
-    --sidebarlist-padding-block: 1rem;
-    --sidebarform-padding-block: 1rem;
+    //
 
     // --list-item-border-radius: 1rem;
     // @media (pointer: fine) {
@@ -305,13 +322,6 @@
     --table-accessory-gap: 0.2rem;
     --table-accessory-size: 1.2rem;
 
-    --glass-btn-bg: var(--liquid-glass-bg);
-    --glass-btn-bg-dark: var(--liquid-glass-bg-dark);
-    --glass-btn-focus-bg: var(--glass-btn-bg);
-    --glass-btn-focus-bg-dark: var(--glass-btn-bg-dark);
-    --glass-btn-active-bg: var(--glass-btn-bg);
-    --glass-btn-active-bg-dark: var(--glass-btn-bg-dark);
-
     // button sizes 1/2
     @each $size, $media in vars.$button-sizes {
       $props: map.get($media, default);
@@ -323,6 +333,11 @@
       }
     }
 
+    // --picker-affordance-size: 1rem;
+    // --picker-affordance-col-gap: 1rem;
+
+    // SECTION
+
     // fine
     @media (pointer: fine) {
       // button sizes 2/2
@@ -336,49 +351,37 @@
         }
       }
 
-      --primary-bg: oklch(0.9761 0 0); // ✅
-      --primary-bg-dark: oklch(0.2666 0.0071 67.52); // ✅
+      --insetlist-item-border-radius: 1rem;
+      --insetform-item-border-radius: 1rem;
+
+      @each $v in list, form {
+        --#{$v}-item-padding-inline-start: 1rem;
+        --#{$v}-item-padding-inline-end: 1rem;
+      }
+
+      // --primary-bg: oklch(0.9761 0 0); // ✅
+      // --primary-bg-dark: oklch(0.2666 0.0071 67.52); // ✅
 
-      --divider: oklch(0.9249 0 0); // ✅
-      --divider-dark: oklch(0.3452 0.0074 84.59); // ✅
+      // --divider: oklch(0.9249 0 0); // ✅
+      // --divider-dark: oklch(0.3452 0.0074 84.59); // ✅
 
       // --secondary-label: oklch(0.5999 0 0); // ✅
       // --secondary-label-dark: oklch(0.69 0.0019 67.79); // ✅
 
-      --noglass-bg: oklch(1 0 0);
-      --noglass-bg-dark: oklch(0.2871 0.0029 17.33);
-
-      --toolbar-cell-bg: var(--noglass-bg);
-      --toolbar-cell-bg-dark: var(--noglass-bg-dark);
+      // SECTION Glass
 
-      --toolbar-cell-focus-bg: oklch(0.9551 0 0); //FIXME: gray6!!!
-      --toolbar-cell-focus-bg-dark: oklch(0.3578 0.008 75.3); //FIXME: gray4!!!
-      --toolbar-cell-active-bg: oklch(0.9128 0 0); //FIXME: gray5!!!
-      --toolbar-cell-active-bg-dark: oklch(0.3995 0.0077 75.32); //FIXME: gray3!!!
+      --control-clear-glass-bg: var(--white);
+      --control-clear-glass-bg-dark: oklch(0.2871 0.0029 17.33);
+      --control-clear-glass-focus-bg: var(--gray5); //oklch(0.9551 0 0); //FIXME: gray6!!!
+      --control-clear-glass-focus-bg-dark: oklch(0.3578 0.008 75.3); //FIXME: gray4!!!
+      --control-clear-glass-active-bg: var(--gray3); //oklch(0.9128 0 0); //FIXME: gray5!!!
+      --control-clear-glass-active-bg-dark: oklch(0.3995 0.0077 75.32); //FIXME: gray3!!!
 
-      --menu-bg: var(--noglass-bg);
-      --menu-bg-dark: var(--noglass-bg-dark);
+      --control-clear-glass-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
 
-      --toolbar-cell-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
-      --menu-popover-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
+      // SECTION
 
       //
-      --menu-item-focus-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-focus-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-
-      --menu-item-active-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-active-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-
-      --menu-item-focus-bg: var(--accentColor);
-      --menu-item-focus-bg-dark: var(--accentColor);
-
-      --menu-item-active-bg: oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h); //color-mix(in oklch, black 10%, var(--accentColor));
-      --menu-item-active-bg-dark: oklch(
-        from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h
-      ); //color-mix(in oklch, white 10%, var(--accentColor));
-
-      --picker-affordance-size: 1rem;
-      --picker-affordance-col-gap: 1rem;
 
       // list
       // @each $v in list, form {
@@ -390,10 +393,10 @@
   }
 
   html:has(color-scheme[dark]) {
-    color-scheme: dark;
+    color-scheme: dark only;
   }
 
   html:has(color-scheme[light]) {
-    color-scheme: light;
+    color-scheme: light only;
   }
 }