@swiftwc/ui 0.0.0-dev.42 → 0.0.0-dev.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.42",
+  "version": "0.0.0-dev.43",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_vars.scss

@@ -3,6 +3,7 @@
 
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
+$list-components-layer: sw-list-components !default;
 $nav-components-layer: sw-nav-components !default;
 $tab-components-layer: sw-tab-components !default;
 $utils-layer: sw-utils !default;

package/scss/base/_reboot.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../functions';
 
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-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}, #{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,

package/scss/base/_root.scss

@@ -126,10 +126,10 @@
     // --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));
 
@@ -244,6 +244,8 @@
 
     --form-extra-gap: 3rem;
 
+    --insetform-item-border-radius: 1rem;
+
     @each $v in list, form {
       --#{$v}-item-padding-inline-start: 1rem;
       --#{$v}-item-padding-inline-end: 1rem;
@@ -253,67 +255,58 @@
       // 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) {

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,118 @@ $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),
       ),
     ),
   ),
@@ -496,8 +606,8 @@ $colors: map.merge(
   }
 
   tool-bar-item,
-  tool-bar-item-group,
-  navigation-split-view sidebar-toggle {
+  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
@@ -513,23 +623,25 @@ $colors: map.merge(
       //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
       // }
     }
+  }
 
-    &[tint],
-    [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);
+  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);
+      @include mixins.wire-tinted-glass(toolbaritem);
 
-        > button {
-          --secondary: var(--btntext);
-          --blue: var(--btntext);
+      > button {
+        @include mixins.takeover-color-vars(btn);
+        // --secondary: var(--btntext);
+        // --blue: var(--btntext);
 
-          --accentColorEffective: var(--btntext);
-          --accentColor: var(--btntext);
-        }
+        // --accentColorEffective: var(--btntext);
+        // --accentColor: var(--btntext);
       }
     }
   }
@@ -615,6 +727,10 @@ $colors: map.merge(
     --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(--accentColorEffective, var(--accentColor));
     --btnhighlighttext: light-dark(

package/scss/components/_bordered-prominent-button.scss

@@ -48,8 +48,9 @@
 @layer #{vars.$colors-layer} {
   [is='bordered-prominent-button'] > * {
     :where(&) {
-      --secondary: var(--btntext);
-      --blue: var(--btntext);
+      @include mixins.takeover-color-vars(btn);
+      // --secondary: var(--btntext);
+      // --blue: var(--btntext);
     }
   }
 }

package/scss/components/_disclosure-group.scss

@@ -8,6 +8,13 @@
       overflow: clip;
 
       --disclosure--host-details-content-block-size: 0;
+
+      --disclosure--summary-grid-template-columns: ;
+      --disclosure--summary-grid-auto-flow: ;
+      --disclosure--summary-gap: ;
+
+      --disclosure--marker-display: none;
+      --disclosure--marker-transform: ;
     }
 
     @supports (x: #{string.unquote('if(else:red)')}) {
@@ -27,13 +34,6 @@
     @supports not (x: #{string.unquote('if(else:red)')}) {
       :where(&) {
         --disclosure-style: ;
-
-        --disclosure--summary-grid-template-columns: ;
-        --disclosure--summary-grid-auto-flow: ;
-        --disclosure--summary-gap: ;
-
-        --disclosure--marker-display: none;
-        --disclosure--marker-transform: ;
       }
     }
 
@@ -94,9 +94,9 @@
       block-size: var(--disclosure--host-details-content-block-size);
     }
 
-    :where(& > *:not(summary)) {
-      margin: 0;
-    }
+    // :where(& > *:not(summary)) {
+    // margin: 0;
+    // }
 
     &[open] {
       :where(&) {

package/scss/components/_form-view.scss

@@ -84,6 +84,7 @@ $form-ifs: (
     --list--opensummary-color: var(--sidebarform-opensummary-color,),
     //
     // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-size: 0rem,
     --list--accessories-display: none,
     //
     --list--rootsummary-marker-display: marker-trailing,
@@ -105,7 +106,7 @@ $form-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   [is='form-view'] {
     &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
       @extend %list;
@@ -115,13 +116,6 @@ $form-elses: (
         --list--section-gap: var(--form-gap);
 
         @include mixins.write-props($form-elses);
-
-        // --list--item-padding-inline-start: var(--form-item-padding-inline-start);
-        // --list--item-padding-inline-end: var(--form-item-padding-inline-end);
-        // --list--item-padding-block-start: var(--form-item-padding-block-start);
-        // --list--item-padding-block-end: var(--form-item-padding-block-end);
-
-        // --list--item-background-color: var(--list-item-background-color,);
       }
 
       :where(section-view:has(> [slot='header']), section-view:has(> [slot='footer']) + section-view) {
@@ -131,15 +125,7 @@ $form-elses: (
       // SECTION: ifs
       @supports (x: #{string.unquote('if(else:red)')}) {
         :where(&) {
-          @include mixins.write-ifs(--form-style, $form-ifs, $form-elses);
-          // --list--root-padding-inline: if(style(--form-style: inset-grouped): 0.5rem ; style(--form-style: sidebar): 0.5rem ;);
-
-          // --toolbaritemradius: if(style(--form-style: inset-grouped): 1rem ; style(--form-style: sidebar): 1rem ;);
-
-          // --list--separator-block-size: if(style(--form-style: sidebar): 0px ;);
-          // --list--separator-visibility: if(style(--form-style: collapse): 0px ;);
-
-          // --list--root-background-color: if(style(--form-style: sidebar): transparent ;);
+          @include mixins.write-ifs(--form-style, $form-ifs, $form-elses); // --list--root-padding-inline: if(style(--form-style: inset-grouped): 0.5rem ; style(--form-style: sidebar): 0.5rem ;);
         }
       }
 
@@ -148,12 +134,16 @@ $form-elses: (
         :where(&:not([form-style])) {
           @each $v in vars.$form-styles {
             @container style(--form-style: #{$v}) {
+              --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
               @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
             }
           }
         }
         @each $v in vars.$form-styles {
           :where(&[form-style='#{$v}']) {
+            --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
             @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
           }
         }
@@ -182,14 +172,62 @@ $form-elses: (
         }
       }
 
+      // NOTE: on safari takes it from manually setting it above
+      // make list-buttons tintable
+      @container not style(--form-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor3);
+            --itemactiveface: var(--accentColor3);
+          }
+          &:not([is='navigation-link']) {
+            --itemtext: var(--accentColor);
+            --itemhighlighttext: var(--accentColor);
+            --itemactivetext: var(--accentColor);
+          }
+        }
+      }
+      @container style(--form-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor);
+            --itemactiveface: var(--accentColor);
+          }
+        }
+      }
+
       // FINALLY AFTER ALL IFS
       // TODO: Also apply this on state of sidebar w/ full-screen detail 2/2
-      @include mixins.if-2col-split-view-fits {
-        :where(navigation-split-view > scroll-view &, navigation-split-view > body-view > scroll-view &) {
-          // --list--item-grid-template-columns: minmax(0, 1fr);
+      @include mixins.if-content-view-list {
+        :where(&) {
+          --list--accessories-size: 0rem;
           --list--accessories-display: none;
+
+          --insetform-highlighteditem-background-color: var(--accentColor);
+          --insetform-highlighteditem-color: var(--tintcontrast);
+          --insetgroupedform-highlighteditem-background-color: var(--accentColor);
+          --insetgroupedform-highlighteditem-color: var(--tintcontrast);
+        }
+
+        // override tint colors of tintable buttons
+        @container style(--list-style: inset) or style(--list-style: inset-grouped) {
+          button[list-item-tint] {
+            :where(&) {
+              // --itemhighlighttext: var(--tintcontrast);
+              // --itemactivetext: var(--tintcontrast);
+
+              --itemhighlightface: var(--accentColor);
+              --itemactiveface: var(--accentColor);
+            }
+          }
         }
       }
+
+      // Hide accessories
+      :where(&[navigation-link-indicator-visibility='hidden']) {
+        --list--accessories-size: 0rem;
+        --list--accessories-display: none;
+      }
     }
   }
 }

package/scss/components/_glass-prominent-button.scss

@@ -1,5 +1,6 @@
 @use '../vars';
 @use '../placeholders';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   [is='glass-prominent-button'] {
@@ -53,8 +54,9 @@
 @layer #{vars.$colors-layer} {
   [is='glass-prominent-button'] > * {
     :where(&) {
-      --secondary: var(--btntext);
-      --blue: var(--btntext);
+      @include mixins.takeover-color-vars(btn);
+      // --secondary: var(--btntext);
+      // --blue: var(--btntext);
     }
   }
 }

package/scss/components/_label-view.scss

@@ -85,10 +85,16 @@ $label-line-ifs: (
   } @else if $label-style == h-icon-only {
     --label-style: icon-only;
 
+    --label--host-align-items: center;
+    --label--host-justify-items: normal;
+
     --label--iconstack-display: grid;
   } @else if $label-style == h-title-only {
     --label-style: title-only;
 
+    --label--host-align-items: center;
+    --label--host-justify-items: normal;
+
     --label--titlestack-display: grid;
   } @else if $label-style == v-title-and-icon {
     --label-style: title-and-icon;
@@ -103,10 +109,16 @@ $label-line-ifs: (
   } @else if $label-style == v-icon-only {
     --label-style: icon-only;
 
+    --label--host-align-items: normal;
+    --label--host-justify-items: center;
+
     --label--iconstack-display: grid;
   } @else if $label-style == v-title-only {
     --label-style: title-only;
 
+    --label--host-align-items: normal;
+    --label--host-justify-items: center;
+
     --label--titlestack-display: grid;
   }
 }