@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.101

package/scss/base/_reboot.scss

@@ -0,0 +1,191 @@
+@use '../vars';
+@use '../functions';
+
+@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+
+@layer #{vars.$base-layer} {
+  // html,
+  // body {
+  //   overflow: auto;
+  // }
+
+  :root {
+    interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
+  }
+
+  *,
+  *::before,
+  *::after,
+  *::part(root) {
+    box-sizing: border-box;
+  }
+
+  *,
+  *::part(root) {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  *,
+  *::part(root) {
+    -webkit-touch-callout: none; // disables long-press menu
+  }
+
+  *:not(input, textarea),
+  *::part(root) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  // FIXME:
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
+  button,
+  *::part(button),
+  input,
+  *::part(input),
+  optgroup,
+  *::part(optgroup),
+  select,
+  *::part(select),
+  textarea *::part(textarea) {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    // color: inherit;
+  }
+
+  [role='button'],
+  button,
+  *::part(button) {
+    text-align: unset;
+
+    // appearance: none;
+    // -webkit-appearance: none;
+
+    touch-action: manipulation;
+  }
+
+  [role='button'],
+  summary,
+  button,
+  *::part(button) {
+    cursor: pointer;
+  }
+
+  input,
+  *::part(input) {
+    min-inline-size: 25px; // NOTE: For inputs overflowing-x
+  }
+
+  body {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0px, 1fr);
+
+    position: absolute;
+    inset: 0;
+
+    margin: 0;
+    padding: 0;
+
+    background-color: var(--canvas); //light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
+
+    color: var(--canvastext); //light-dark(var(--primary-label), var(--primary-label-dark));
+
+    touch-action: none !important;
+  }
+
+  html {
+    transition: font-size 1ms step-start;
+
+    @media (pointer: fine) {
+      font-size: 14px;
+    }
+
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+
+    font-feature-settings: var(--host--font-feature-settings, normal);
+
+    font-variation-settings: var(--host--font-variation-settings, normal);
+
+    :where(&:has(body > v-keyboard[system-font='Inter'])) {
+      --host--font-family: Inter, sans-serif;
+
+      --host--font-feature-settings: 'liga' 1, 'calt' 1;
+
+      @supports (font-variation-settings: normal) {
+        --host--font-family: InterVariable, sans-serif;
+      }
+    }
+  }
+
+  // label {
+  //   // remove this
+  //   display: inline-grid;
+  //   position: relative;
+  //   // min-height: var(--toolbar-cell-min-size);
+  //   // min-width: var(--toolbar-cell-min-size);
+  //   // container-type: inline-size;
+
+  //   grid-template-columns: minmax(0, 1fr);
+  //   grid-template-rows: minmax(0, 1fr);
+
+  //   place-content: center;
+  //   place-items: center;
+  //   // line-height: 1;
+
+  //   > svg {
+  //     display: inline-grid;
+  //     width: 2rem;
+  //     height: 2rem;
+  //   }
+
+  //   > i {
+  //     display: inline-grid;
+  //     font-size: 2rem;
+  //   }
+  // }
+
+  $CONFIG: (
+    vt-fwd-class-name: vars.$vt-fwd-class-name,
+
+    // sidebar-toggle-padding-inline-start-css-prop: vars.$sidebar-toggle-padding-inline-start-css-prop,
+    //
+    // toolbar-leading-stack-part-name: vars.$toolbar-leading-stack-part-name,
+    // toolbar-principal-stack-part-name: vars.$toolbar-principal-stack-part-name,
+    // toolbar-trailing-stack-part-name: vars.$toolbar-trailing-stack-part-name,
+    //
+    // ipad-portrait-bp-max: vars.$ipad-portrait-bp-max,
+    // ipad-portrait-bp-min: vars.$ipad-portrait-bp-min,
+    // ipad-landscape-bp-max: vars.$ipad-landscape-bp-max,
+    // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
+    ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
+    ipad-sheet-view-height: vars.$ipad-sheet-view-height,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
+  );
+
+  @debug functions.map-to-query($CONFIG);
+
+  html::before {
+    content: '#{functions.map-to-query($CONFIG)}';
+    display: none;
+  }
+}

package/scss/base/_root.scss

@@ -0,0 +1,415 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
+
+@property --root-font-size {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 16;
+}
+
+@layer #{vars.$components-layer} {
+  :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;
+    // --edge-inset-inline-end: 10px;
+    // --edge-inset-block-start: 10px;
+    // --edge-inset-block-end: 10px;
+
+    // tabview adds extra to these
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+
+    --tool-bar-block-size: 4rem;
+
+    --top-layer-polyfill-z-index: 999999;
+
+    --iphone-tabbar-max-inline-size: 90svw;
+    --iphone-tabbar-block-size: var(--tool-bar-block-size);
+    --iphone-tabbar-border-radius: 9999px;
+    --iphone-tabbar-inline-padding-start: 3px;
+    --iphone-tabbar-inline-padding-end: 3px;
+    --iphone-tabbar-block-padding-start: 3px;
+    --iphone-tabbar-block-padding-end: 3px;
+
+    --ipad-tabbar-max-inline-size: 60svw;
+    --ipad-tabbar-block-size: 3rem;
+    --ipad-tabbar-border-radius: 9999px;
+    --ipad-tabbar-inline-padding-start: 5px;
+    --ipad-tabbar-inline-padding-end: 5px;
+    --ipad-tabbar-block-padding-start: 5px;
+    --ipad-tabbar-block-padding-end: 5px;
+
+    --tabbar-after-tabreveal-duration: 250ms;
+    // --tabbar-after-tabreveal-duration: 3250ms;
+
+    --sidebar-inline-size: 20rem;
+    --sidebar-border-radius: 1rem;
+    --sidebar-block-spacing: 1rem;
+    --sidebar-inline-spacing: 1rem;
+
+    --liquid-glass-bg-lch: 1 0 0;
+    --liquid-glass-bg-alpha: 74.9%;
+    --liquid-glass-bg-lch-dark: 0.3171 0 0;
+    --liquid-glass-bg-alpha-dark: 50.2%;
+    @media (prefers-reduced-transparency: reduce) {
+      --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;
+    // --sidebar-bg-lch-dark: 0.3171 0 0;
+    // --sidebar-bg-alpha: 74.9%;
+    // --sidebar-bg-alpha-dark: 50.2%;
+
+    // @media (prefers-reduced-transparency: reduce) {
+    //   --sidebar-bg-alpha: 99%;
+    //   --sidebar-bg-alpha-dark: 99%;
+    // }
+
+    --liquid-glass-backdrop-filter: saturate(180%) blur(16px); //blur(4px);
+    --liquid-glass-bs-bevel-highlight: inset -1px -1px 0 -0.5px light-dark(#fff, #fff6);
+    --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);
+
+    --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); //var(--black);
+    // --nav-split-view-separator-color-dark: var(--divider-dark); //var(--white);
+
+    // --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: 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);
+
+    --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); // ✅
+
+    // --system-bg: var(--white); // ✅
+    // --system-bg-dark: var(--black); // ✅
+
+    // --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
+    // --primary-bg-dark: var(--black); // ✅
+
+    // --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);
+
+    --view-transition-leading-x: -50%;
+    --view-transition-principal-x: 0%;
+    --view-transition-trailing-x: 100%;
+
+    --view-transition-toolbar-cell-onscreen-scale: 1;
+    --view-transition-toolbar-cell-offscreen-scale: 0;
+
+    --view-transition-dialog-onscreen-y: 0lvh;
+    --view-transition-dialog-onscreen-backdrop-bg: oklch(0 0 0 / 25%);
+    --view-transition-dialog-offscreen-y: 100lvh;
+
+    --view-transition-duration: 500ms;
+    // --view-transition-duration: 9s;
+
+    --sidebar-transition-duration: 250ms;
+
+    --pill-border-radius: 99999px;
+    --clear: transparent;
+
+    --toolbar-col-gap: 0.5rem;
+    --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.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-box-shadow: var(--control-clear-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-max-inline-size: 20rem;
+    --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(--control-clear-glass-box-shadow);
+
+    --menu-padding: 0.5rem;
+
+    --menu-item-padding-inline-start: 1rem;
+    --menu-item-padding-inline-end: 1rem;
+    --menu-item-padding-block-start: 0.5rem;
+    --menu-item-padding-block-end: 0.5rem;
+
+    --menu-item-border-radius: 1.2rem; // define this to be like a pill, based on an exemplar item min-height
+
+    --touchglass-transition-duration: 300ms;
+    // --touchglass-transition-duration: 15s;
+
+    --disclosure-group-animation-duration: 300ms;
+    // --disclosure-group-animation-duration: 4500ms;
+    // #{vars.$disclosure-group-animation-duration-css-prop}: 4500ms;
+    --disclosure-group-animation-easing: ease-out;
+
+    // --glass-shadow:
+    //   inset -1px -1px 0px -0.5px #fff, inset 1px 1px 0px -0.5px #fff, inset 3px 3px 10px -3px #ddd, inset -3px -3px 10px -3px #ddd, inset 0 0 5px 1px #fff,
+    //   inset 0 0 0 0.5px #00000040, inset 0 0 24px 0 #0000001a, 0 0 25px 0 #0003;
+    // --glass-shadow: var(--liquid-glass-box-shadow);
+
+    --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;
+
+    --toggle-inline-size: 3.4rem;
+    --toggle-block-size: 1.5rem;
+    --toggle-border-radius: var(--pill-border-radius);
+
+    --toggle-track-off-bg: var(--gray2);
+    --toggle-track-off-bg-dark: var(--gray2);
+    --toggle-track-on-bg: var(--green);
+    --toggle-track-on-bg-dark: var(--green);
+
+    --toggle-dot-bg: var(--control-clear-glass-bg);
+    --toggle-dot-bg-dark: var(--control-clear-glass-bg-dark);
+    --toggle-dot-focus-bg: var(--control-clear-glass-focus-bg);
+    --toggle-dot-focus-bg-dark: var(--control-clear-glass-focus-bg-dark);
+    --toggle-dot-active-bg: var(--control-clear-glass-active-bg);
+    --toggle-dot-active-bg-dark: var(--control-clear-glass-active-bg-dark);
+
+    --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
+
+    // @media (prefers-color-scheme: dark) {
+    //   @include dark-theme;
+    // }
+
+    // label-view
+
+    @each $label, $props in maps.$label-fonts-map {
+      --label-#{$label}-font-size: #{map.get($props, size)};
+      --label-#{$label}-line-height: #{map.get($props, leading)};
+      --label-#{$label}-font-weight: #{map.get($props, weight)};
+    }
+
+    // lists
+
+    --insetlist-item-border-radius: 2rem;
+    --insetform-item-border-radius: 2rem;
+
+    //
+    --list-row-gap: 3rem;
+    --form-gap: 1rem;
+
+    --form-extra-gap: 3rem;
+
+    @each $v in list, form {
+      --#{$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(--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(--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(--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(--accentColor5);
+      --#{$v}-openitem-color: var(--primary);
+      --#{$v}-opensummary-background-color: var(--accentColor4);
+      --#{$v}-opensummary-color: var(--primary);
+
+      --insetgrouped#{$v}-openitem-background-color: var(--accentColor5);
+      --insetgrouped#{$v}-openitem-color: var(--primary);
+      --insetgrouped#{$v}-opensummary-background-color: var(--accentColor4);
+      --insetgrouped#{$v}-opensummary-color: var(--primary);
+
+      --inset#{$v}-openitem-background-color: var(--accentColor5);
+      --inset#{$v}-openitem-color: var(--primary);
+      --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);
+
+      --insetgrouped#{$v}-background-color: var(--groupedBackground);
+
+      --inset#{$v}-padding-inline: 1rem;
+      --inset#{$v}-padding-block: 0rem;
+
+      --insetgrouped#{$v}-padding-inline: 1rem;
+      --insetgrouped#{$v}-padding-block: 1rem;
+
+      --sidebar#{$v}-padding-inline: 1rem;
+      --sidebar#{$v}-padding-block: 1rem;
+    }
+
+    //
+
+    // --list-item-border-radius: 1rem;
+    // @media (pointer: fine) {
+    //   --list-item-border-radius: 0.5rem;
+    // }
+
+    // tables
+    --table-row-gap: 0.5rem;
+    --table-col-gap: 1rem;
+
+    --table-accessory-gap: 0.2rem;
+    --table-accessory-size: 1.2rem;
+
+    // button sizes 1/2
+    @each $size, $media in maps.$button-sizes-map {
+      $props: map.get($media, default);
+      @if $props {
+        @each $k, $v in $props {
+          --#{$size}-btn-#{$k}: #{$v};
+          --#{$size}-btn-#{$k}: #{$v};
+        }
+      }
+    }
+
+    // --picker-affordance-size: 1rem;
+    // --picker-affordance-col-gap: 1rem;
+
+    // SECTION
+
+    // fine
+    @media (pointer: fine) {
+      // button sizes 2/2
+      @each $size, $media in maps.$button-sizes-map {
+        $props: map.get($media, fine);
+        @if $props {
+          @each $k, $v in $props {
+            --#{$size}-btn-#{$k}: #{$v};
+            --#{$size}-btn-#{$k}: #{$v};
+          }
+        }
+      }
+
+      --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;
+      }
+
+      --toggle-inline-size: 3.4rem;
+      --toggle-block-size: 1.3rem;
+
+      // SECTION Glass
+
+      --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!!!
+
+      --control-clear-glass-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
+
+      // SECTION
+
+      //
+
+      // list
+      // @each $v in list, form {
+      //// --#{$v}-item-background-color: light-dark(var(--system-bg), oklch(0.2978 0.0076 84.59)); // ✅
+      //// --inset#{$v}-item-background-color: light-dark(var(--system-bg), oklch(0.2978 0.0076 84.59)); // ✅
+      //--insetgrouped#{$v}-item-background-color: light-dark(var(--system-bg), oklch(0.2978 0.0076 84.59)); // ✅
+      // }
+    }
+  }
+
+  html:has(color-scheme[dark]) {
+    color-scheme: dark only;
+  }
+
+  html:has(color-scheme[light]) {
+    color-scheme: light only;
+  }
+}