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

package/scss/utils/_index.scss

@@ -1,68 +1,83 @@
 @use '../vars';
 
 @layer #{vars.$utils-layer} {
-  :where([background-style='grouped']) {
-    --background: var(--groupedBackground);
-    --secondaryBackground: var(--secondaryGroupedBackground);
-    --tertiaryBackground: var(--tertiaryGroupedBackground);
-
-    --face: var(--background);
-    // --face2: var(--secondaryBackground);
-    // --face3: var(--tertiaryBackground);
-  }
-
-  :where([foreground='secondary']) {
-    color: var(--secondary);
-  }
-
-  :where([foreground='blue']) {
-    color: var(--blue);
-  }
-
-  :where([foreground='blue.secondary']) {
-    color: var(--blue2);
-  }
-
-  [tint='gray'] {
+  [background-style='grouped'] {
     :where(&) {
-      --accentColor: var(--gray);
-      --accentColor2: var(--gray2);
-      --accentColor3: var(--gray3);
-      --accentColor4: var(--gray4);
-      --accentColor5: var(--gray5);
-    }
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
 
-    :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);
+      --face: var(--background);
+      // --face2: var(--secondaryBackground);
+      // --face3: var(--tertiaryBackground);
     }
-  }
 
-  [tint='blue'] {
-    :where(&) {
-      --accentColor: var(--blue);
-      --accentColor2: var(--blue2);
-      --accentColor3: var(--blue3);
-      --accentColor4: var(--blue4);
-      --accentColor5: var(--blue5);
+    // FIXME: feat-sheet 2/3
+    [is='sheet-view'] &,
+    [is='full-screen'] &,
+    [is='confirmation-dialog'] &,
+    [is='alert-dialog'] & {
+      :where(&) {
+        // --background: var(--secondaryGroupedBackground);
+        // --secondaryBackground: var(--secondaryGroupedBackground);
+        // --tertiaryBackground: var(--tertiaryGroupedBackground);
+      }
     }
+  }
 
-    :where(&[is='bordered-button']) {
-      --accentSubtle: var(--blue4);
+  @each $k,
+    $v
+      in (
+        secondary: --secondary,
+        blue: --blue,
+        red: --red,
+        green: --green,
+        orange: --orange,
+        purple: --purple,
+        'blue.secondary': --blue2,
+        'red.secondary': --red2,
+        'green.secondary': --green2,
+        'orange.secondary': --orange2,
+        'purple.secondary': --purple2,
+        'blue.tertiary': --blue3,
+        'red.tertiary': --red3,
+        'green.tertiary': --green3,
+        'orange.tertiary': --orange3,
+        'purple.tertiary': --purple3,
+        'blue.quaternary': --blue4,
+        'red.quaternary': --red4,
+        'green.quaternary': --green4,
+        'orange.quaternary': --orange4,
+        'purple.quaternary': --purple4,
+        'blue.quinary': --blue5,
+        'red.quinary': --red5,
+        'green.quinary': --green5,
+        'orange.quinary': --orange5,
+        'purple.quinary': --purple5
+      )
+  {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
     }
   }
 
-  [tint='red'] {
-    :where(&) {
-      --accentColor: var(--red);
-      --accentColor2: var(--red2);
-      --accentColor3: var(--red3);
-      --accentColor4: var(--red4);
-      --accentColor5: var(--red5);
-    }
+  @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);
+      }
 
-    :where(&[is='bordered-button']) {
-      --accentSubtle: var(--red4);
+      // :where(&[is='bordered-button']) {
+      //   --accentSubtle: var(--red4);
+      // }
     }
   }
 }

package/scss/utils/_stacks.scss

@@ -3,101 +3,67 @@
 @use 'sass:map';
 @use 'sass:list';
 
-$h-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$v-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$placement-map: (
-  top-leading: start start,
-  top: start center,
-  top-trailing: start end,
-  center-leading: center start,
-  center: center center,
-  center-trailing: center end,
-  bottom-leading: end start,
-  bottom: end center,
-  bottom-trailing: end end,
-);
-
-$alignment-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$distribution-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch,
-  between: space-between,
-  evenly: space-evenly,
-);
-
 $inline-map: (
   leading: (
-    (justify-items start),
-    (justify-content start),
+    (justify-items (start)),
+    (justify-content (start)),
   ),
   'leading fill': (
-    (justify-items start),
-    (justify-content stretch),
+    (justify-items (start)),
+    (justify-content (stretch)),
   ),
   center: (
-    (justify-items center),
-    (justify-content center),
+    (justify-items (center)),
+    (justify-content (center)),
   ),
   trailing: (
-    (justify-items end),
-    (justify-content end),
+    (justify-items (end)),
+    (justify-content (end)),
   ),
   fill: (
-    (justify-items stretch),
-    (justify-content stretch),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
   ),
   space-between: (
-    (justify-content space-between),
+    (justify-content (space-between)),
   ),
 );
 
 $block-map: (
   leading: (
-    (align-items start),
-    (align-content start),
+    (align-items (start)),
+    (align-content (start)),
   ),
   'leading fill': (
-    (align-items start),
-    (align-content stretch),
+    (align-items (start)),
+    (align-content (stretch)),
   ),
   center: (
-    (align-items center),
-    (align-content center),
+    (align-items (center)),
+    (align-content (center)),
   ),
   trailing: (
-    (align-items end),
-    (align-content end),
+    (align-items (end)),
+    (align-content (end)),
   ),
   fill: (
-    (align-items stretch),
-    (align-content stretch),
+    (align-items (stretch)),
+    (align-content (stretch)),
   ),
   space-between: (
-    (align-content space-between),
+    (align-content (space-between)),
   ),
 );
 
 $h-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
   'fill leading': (
     (place-items (start stretch)),
     (place-content (start stretch)),
@@ -110,10 +76,18 @@ $h-placement-map: (
 );
 
 $v-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
   'leading fill': (
     (place-items (start stretch)),
     (place-content (start stretch)),
   ),
+  'fill leading': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
   'space-between fill': (
     (align-content (space-between)),
     (justify-items (stretch)),
@@ -129,7 +103,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -138,7 +112,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -172,7 +146,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -181,7 +155,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -208,7 +182,8 @@ $v-placement-map: (
     // }
   }
 
-  v-stack {
+  v-stack,
+  h-stack {
     // $spaces: 0, 1, 2, 3, 4;
     // @each $s in $spaces {
     @for $i from 0 through 50 {
@@ -217,14 +192,18 @@ $v-placement-map: (
       }
     }
 
-    :where(&[frame\:alignment='center']) {
-      justify-self: center;
-    }
+    // :where(&[frame\:alignment='leading']) {
+    //   justify-self: start;
+    // }
+    // :where(&[frame\:alignment='center']) {
+    //   justify-self: center;
+    // }
   }
 
   // padding reserved word for stacks
   v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack {
     :where(&[padding]) {
       padding-inline: 1rem;
@@ -235,8 +214,12 @@ $v-placement-map: (
     }
 
     // all direct children (excluding stacks) of stacks get margins, also some special cases like a details>summary[padding] etc.
-    :where(& > [padding]:not(&), & > [is='disclosure-group'] > summary[padding]) {
+    :where(& > [padding]:not(&, sticky-container), & > [is='disclosure-group'] > summary[padding]) {
       margin-inline: 1rem;
     }
+
+    :where(& > sticky-container) {
+      padding-inline: 1rem;
+    }
   }
 }