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

package/scss/components/_list-view.scss

@@ -82,6 +82,7 @@ $list-ifs: (
     --list--opensummary-color: var(--sidebarlist-opensummary-color,),
     //
     // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-size: 0rem,
     --list--accessories-display: none,
     //
     --list--rootsummary-marker-display: marker-trailing,
@@ -108,7 +109,7 @@ $list-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   list-view {
     &:not(& &, [is='form-view'] &, table-view &) {
       @extend %list;
@@ -118,26 +119,12 @@ $list-elses: (
         --list--section-gap: var(--list-row-gap);
 
         @include mixins.write-props($list-elses);
-        // --list--item-padding-inline-start: var(--list-item-padding-inline-start);
-        // --list--item-padding-inline-end: var(--list-item-padding-inline-end);
-        // --list--item-padding-block-start: var(--list-item-padding-block-start);
-        // --list--item-padding-block-end: var(--list-item-padding-block-end);
-
-        // --list--item-background-color: var(--list-item-background-color,);
       }
 
       // SECTION: ifs
       @supports (x: #{string.unquote('if(else:red)')}) {
         :where(&) {
-          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses);
-          // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
-
-          // --toolbaritemradius: if(style(--list-style: inset-grouped): 1rem ; style(--list-style: sidebar): 1rem ;);
-
-          // --list--separator-block-size: if(style(--list-style: sidebar): 0px ;);
-          // --list--separator-visibility: if(style(--list-style: collapse): 0px ;);
-
-          // --list--root-background-color: if(style(--list-style: sidebar): transparent ;);
+          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses); // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
         }
       }
 
@@ -146,12 +133,16 @@ $list-elses: (
         :where(&:not([list-style])) {
           @each $v in vars.$list-styles {
             @container style(--list-style: #{$v}) {
+              --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
               @include mixins.write-props(map.get($list-ifs, $v));
             }
           }
         }
         @each $v in vars.$list-styles {
           :where(&[list-style='#{$v}']) {
+            --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
             @include mixins.write-props(map.get($list-ifs, $v));
           }
         }
@@ -180,6 +171,64 @@ $list-elses: (
         }
       }
 
+      // FINALLY AFTER ALL IFS
+
+      // NOTE: on safari takes it from manually setting it above
+      // make list-buttons tintable
+      @container not style(--list-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(--list-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor);
+            --itemactiveface: var(--accentColor);
+          }
+        }
+      }
+
+      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/2
+      @include mixins.if-content-view-list {
+        :where(&) {
+          --list--accessories-size: 0rem;
+          --list--accessories-display: none;
+
+          --insetlist-highlighteditem-background-color: var(--accentColor);
+          --insetlist-highlighteditem-color: var(--tintcontrast);
+          --insetgroupedlist-highlighteditem-background-color: var(--accentColor);
+          --insetgroupedlist-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;
+      }
+
       &[preferred-root-disclosure-style='sidebar'] {
         --list--rootsummary-color: var(--primary);
         --list--selectedrootsummary-color: var(--primary);
@@ -215,15 +264,6 @@ $list-elses: (
           }
         }
       }
-
-      // FINALLY AFTER ALL IFS
-      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/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);
-          --list--accessories-display: none;
-        }
-      }
     }
   }
 }

package/scss/components/_menu-view.scss

@@ -155,15 +155,17 @@
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
       @include mixins.add-hover-state {
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
     }
     > menu-view {
@@ -171,15 +173,17 @@
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
       @include mixins.add-hover-state('::part(menu-summary)') {
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
     }
   }

package/scss/components/_picker-view.scss

@@ -14,37 +14,37 @@ $picker-elses: (
   --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
 );
 
-@mixin make-button-affordance() {
-  position: relative;
+// @mixin make-button-affordance() {
+//   position: relative;
 
-  grid-auto-flow: column;
-  grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
-  column-gap: var(--picker-affordance-col-gap);
+//   grid-auto-flow: column;
+//   grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
+//   column-gap: var(--picker-affordance-col-gap);
 
-  @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
+//   @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
 
-  &::before {
-    display: grid;
+//   &::before {
+//     display: grid;
 
-    block-size: var(--picker-affordance-size);
-    inline-size: var(--picker-affordance-size);
+//     block-size: var(--picker-affordance-size);
+//     inline-size: var(--picker-affordance-size);
 
-    background-color: var(--menuitemtext, var(--text));
+//     background-color: var(--menuitemtext, var(--text));
 
-    transform: var(--tablecol--after-rotate,);
+//     transform: var(--tablecol--after-rotate,);
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform 100ms ease-out;
-      will-change: transform;
-    }
+//     @media (prefers-reduced-motion: no-preference) {
+//       transition: transform 100ms ease-out;
+//       will-change: transform;
+//     }
 
-    opacity: 0;
-  }
+//     opacity: 0;
+//   }
 
-  &[aria-selected='true']::before {
-    opacity: 1;
-  }
-}
+//   &[aria-selected='true']::before {
+//     opacity: 1;
+//   }
+// }
 
 @layer #{vars.$components-layer} {
   picker-view {
@@ -84,11 +84,11 @@ $picker-elses: (
         margin-inline-start: 2rem;
       }
     }
-    :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
-      @container style(--picker-style: menu) {
-        @include make-button-affordance;
-      }
-    }
+    // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+    //   @container style(--picker-style: menu) {
+    //     @include make-button-affordance;
+    //   }
+    // }
 
     // SECTION: ifs
     @supports (x: #{string.unquote('if(else:red)')}) {
@@ -112,9 +112,9 @@ $picker-elses: (
             margin-inline-start: 2rem;
           }
 
-          :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
-            @include make-button-affordance;
-          }
+          // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+          //   @include make-button-affordance;
+          // }
 
           @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
         }

package/scss/components/_table-row.scss

@@ -32,6 +32,7 @@
         &:after {
           display: none;
         }
+        --list--accessories-size: 0rem;
         --list--accessories-display: none;
         // background: red;
         grid-auto-flow: column;

package/scss/components/_table-view.scss

@@ -51,7 +51,7 @@ $table-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   table-view {
     &:not(& &, list-view &, [is='form-view'] &) {
       @extend %list;

package/scss/mixins/_index.scss

@@ -202,6 +202,18 @@
   border-radius: var(--#{$prefix}radiustl#{','}) var(--#{$prefix}radiustr#{','}) var(--#{$prefix}radiusbr#{','}) var(--#{$prefix}radiusbl#{','});
 }
 
+@mixin takeover-color-vars($prefix) {
+  --secondary: var(--#{$prefix}text);
+  --blue: var(--#{$prefix}text);
+  --red: var(--#{$prefix}text);
+  --green: var(--#{$prefix}text);
+  --orange: var(--#{$prefix}text);
+
+  // NOTE: breaks list-item-tints
+  --accentColor: var(--#{$prefix}text);
+  --accentColorEffective: var(--#{$prefix}text);
+}
+
 @mixin vt-toolbar-cell-offscreen-keyframe() {
   --toolbar-cell-scale: scale(var(--view-transition-toolbar-cell-offscreen-scale));
   --toolbar-cell-filter: blur(10px);
@@ -286,6 +298,25 @@
   }
 }
 
+@mixin if-content-view-list {
+  @include if-2col-split-view-fits {
+    // is content-view!
+    navigation-split-view > scroll-view & {
+      @content;
+    }
+    // is content-view!
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+  // is content-view!
+  @include if-3col-split-view-fits {
+    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+}
+
 // Mixin for plain CSS (linear)
 @mixin write-props($props) {
   @each $prop, $val in $props {

package/scss/placeholders/_lists.scss

@@ -1,7 +1,9 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+$list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker-view, menu-view, menu-view *, whatever-name)';
+
+@layer #{vars.$list-components-layer} {
   %list {
     :where(&) {
       background-color: var(--list--host-background-color,);
@@ -13,9 +15,9 @@
     }
 
     // componentize buttons
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(summary:not([is='disclosure-group'] [is='disclosure-group'] summary))) {
       //   box-shadow: inset 0 0 4px magenta;
       // }
@@ -76,18 +78,17 @@
     //   }
     // }
 
-    // SECTION: wire gaps
-    :not([slot], section-view) ~ section-view {
-      :where(&:not(menu-view *)) {
-        padding-block-start: var(--list--section-gap,);
-      }
-    }
-    section-view:not([slot]) ~ section-view {
+    // SECTION: wire gaps between
+    // NOTE: apply gap to top of sections when adjacent to any
+    // :not([slot], section-view) ~ section-view:not([slot]),
+    // section-view:not([slot]) ~ section-view:not([slot]) {
+    :not([slot]) ~ section-view:not([slot]) {
       :where(&:not(menu-view *)) {
         padding-block-start: var(--list--section-gap,);
       }
     }
-    section-view:has(~ :not([slot], section-view)) {
+    // NOTE: apply to bottom of sections when they have non-section adjacents
+    section-view:not([slot]):has(~ :not([slot], section-view)) {
       :where(&:not(menu-view *)) {
         padding-block-end: var(--list--section-gap,);
       }
@@ -97,26 +98,29 @@
     // padding-bottom: calc(var(--list--section-gap, 0px) / 2);
     //   }
     // }
-    :not([slot], [is='disclosure-group']) ~ [is='disclosure-group'] {
+    // NOTE: apply gap to top of details when adjacent to any(except summary)
+    // :not([slot], [is='disclosure-group'], summary) ~ [is='disclosure-group']:not([slot]) {
+    :not([slot], summary) ~ [is='disclosure-group']:not([slot]) {
       :where(&:not(menu-view *)) {
         margin-block-start: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:not([slot]) ~ [is='disclosure-group'] {
-      :where(&:not(menu-view *)) {
-        margin-block-start: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
-    [is='disclosure-group']:has(~ :not([slot], [is='disclosure-group'])) {
+    // [is='disclosure-group']:not([slot]) ~ [is='disclosure-group']:not([slot]) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-start: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
+    // NOTE: apply to bottom of details when they have non-details adjacents
+    [is='disclosure-group']:not([slot]):has(~ :not([slot], [is='disclosure-group'])) {
       :where(&:not(menu-view *)) {
         margin-block-end: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:has(~ [is='disclosure-group']:not([slot])) {
-      :where(&:not(menu-view *)) {
-        margin-block-end: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
+    // [is='disclosure-group']:not([slot]):has(~ [is='disclosure-group']:not([slot])) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-end: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
 
     // SECTION: wire paddings
     :where(&:not(menu-view *)) {
@@ -454,26 +458,11 @@
 
     // SECTION: add accessories
     // &:has(summary[marker-placement='leading']) {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
-      // --itempadistart: 4rem;
-
-      // --item-accessory-size: 24px;
-
-      // --list--item-grid-template-columns: minmax(0, 1fr) 50px;
-
-      // &:not(:is(button)) {
-      //   --list--accessories-display: none;
-      //   // --list--accessories-padding-inline-end: 24px;
-      // }
-
-      // &:is(button) {
-      // position: relative;
-      // display: grid;
-      // grid-template-columns: minmax(0, 1fr) 24px;
-
-      &:is(button) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      &:is(navigation-split-view button[is='navigation-link'], navigation-stack button[is='navigation-link']) {
         :where(&) {
           position: relative;
 
@@ -505,6 +494,31 @@
     //   }
     // }
 
+    // SECTION: add tints
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      // &:is(button:not([is='navigation-link'])) {
+      //   :where(&) {
+      //     --itemtext: blue;
+      //   }
+      // }
+      &:is(label-view[list-item-tint]) {
+        :where(&[list-item-tint] > [slot='image']) {
+          color: var(--accentColor);
+        }
+      }
+      // &:is(button[list-item-tint='red']) {
+      //   :where(&) {
+      //     --itemtext: red;
+
+      //     --insetgroupedlist-highlighteditem-background-color:red;
+      //     --insetgroupedlist-highlighteditem-color:red;
+      //   }
+      // }
+    }
+
     // // SECTION: add searchable
     // > [slot='searchable'] {
     //   :where(&) {
@@ -521,17 +535,20 @@
 @layer #{vars.$colors-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       @include mixins.add-focus-visible-state {
         --itemface: var(--itemhighlightface,);
         --itemtext: var(--itemhighlighttext,);
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+          // --secondary: var(--itemtext);
+          // --blue: var(--itemtext);
+        }
       }
     }
   }
@@ -540,9 +557,9 @@
 @layer #{vars.$ui-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(button)) {
       @include mixins.add-jsactive-state {
         --itemface: var(--itemactiveface,);
@@ -550,8 +567,11 @@
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+        }
+        // --secondary: var(--itemtext);
+        // --blue: var(--itemtext);
       }
 
       &[aria-selected='true'] {
@@ -561,8 +581,11 @@
 
           --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-          --secondary: var(--itemtext);
-          --blue: var(--itemtext);
+          > * {
+            @include mixins.takeover-color-vars(item);
+            // --secondary: var(--itemtext);
+            // --blue: var(--itemtext);
+          }
         }
       }
       // }

package/scss/utils/_index.scss

@@ -37,55 +37,23 @@
     color: var(--blue2);
   }
 
-  [tint='gray'] {
-    :where(&) {
-      --accentColorEffective: var(--gray);
-      --accentColorEffective4: var(--gray4);
-
-      --accentColor: var(--gray);
-      --accentColor2: var(--gray2);
-      --accentColor3: var(--gray3);
-      --accentColor4: var(--gray4);
-      --accentColor5: var(--gray5);
-    }
-
-    // :where(&[is='bordered-button']) {
-    //   // --accentEmphasis: light-dark(color-mix(in oklch, var(--gray) 50%, var(--black)), color-mix(in oklch, var(--gray) 50%, var(--white)));
-    //   --accentSubtle: var(--gray4);
-    // }
-  }
-
-  [tint='blue'] {
-    :where(&) {
-      --accentColorEffective: var(--blue);
-      --accentColorEffective4: var(--blue4);
-
-      --accentColor: var(--blue);
-      --accentColor2: var(--blue2);
-      --accentColor3: var(--blue3);
-      --accentColor4: var(--blue4);
-      --accentColor5: var(--blue5);
-    }
-
-    // :where(&[is='bordered-button']) {
-    //   --accentSubtle: var(--blue4);
-    // }
-  }
-
-  [tint='red'] {
-    :where(&) {
-      --accentColorEffective: var(--red);
-      --accentColorEffective4: var(--red4);
+  @each $tint in gray, blue, red, green, orange {
+    [tint='"" + $tint'],
+    [list-item-tint='"" + $tint'] {
+      :where(&) {
+        --accentColorEffective: var(--#{$tint});
+        --accentColorEffective4: var(--#{$tint}4);
+
+        --accentColor: var(--#{$tint});
+        --accentColor2: var(--#{$tint}2);
+        --accentColor3: var(--#{$tint}3);
+        --accentColor4: var(--#{$tint}4);
+        --accentColor5: var(--#{$tint}5);
+      }
 
-      --accentColor: var(--red);
-      --accentColor2: var(--red2);
-      --accentColor3: var(--red3);
-      --accentColor4: var(--red4);
-      --accentColor5: var(--red5);
+      // :where(&[is='bordered-button']) {
+      //   --accentSubtle: var(--red4);
+      // }
     }
-
-    // :where(&[is='bordered-button']) {
-    //   --accentSubtle: var(--red4);
-    // }
   }
 }