@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.61

package/scss/utils/_frame.scss

@@ -0,0 +1,91 @@
+@use '../vars';
+@use 'sass:math';
+
+@layer #{vars.$utils-layer} {
+  :where([frame\:width='infinity']) {
+    inline-size: 100%;
+  }
+  :where([frame\:max-width='infinity']) {
+    max-inline-size: 100%;
+  }
+  @for $i from 0 through 100 {
+    :where([frame\:max-width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
+    :where([frame\:max-width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
+  }
+
+  :where([frame\:alignment='top']) {
+    align-self: top;
+  }
+  :where([frame\:alignment='leading']) {
+    justify-self: start;
+  }
+
+  // :where([frame-width='infinity']) {
+  //   place-items: stretch; //justify-self: stretch;
+  // }
+  // :where([frame-alignment='leading']) {
+  //   align-self: start;
+  // }
+  // :where([frame-alignment='center']) {
+  //   align-self: center;
+  // }
+  // :where([frame-alignment='trailing']) {
+  //   align-self: end;
+  // }
+  // :where([alignment='start']) {
+  //   place-items: start;
+  // }
+  // :where([alignment='fill']) {
+  //   place-items: stretch;
+  // }
+  // :where([content='start']) {
+  //   place-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([spacer='top']) {
+  //   margin-top: auto;
+  // }
+  // :where([distribution='start']) {
+  //   place-content: start;
+  // }
+  // :where([distribution='space-between']) {
+  //   place-content: space-between;
+  // }
+  // :where(spacer) {
+  //   margin: auto;
+  // }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where([slow]) {
+      visibility: visible;
+
+      transition: opacity 250ms ease-out allow-discrete;
+      will-change: opacity;
+    }
+
+    :where([slow='hide']) {
+      opacity: 0;
+
+      @starting-style {
+        opacity: 1;
+      }
+    }
+
+    :where([slow='show']) {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}

package/scss/utils/_index.scss

@@ -0,0 +1,78 @@
+@use '../vars';
+
+@layer #{vars.$utils-layer} {
+  [background-style='grouped'] {
+    :where(&) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      --face: var(--background);
+      // --face2: var(--secondaryBackground);
+      // --face3: var(--tertiaryBackground);
+    }
+
+    // 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);
+      }
+    }
+  }
+
+  @each $k,
+    $v
+      in (
+        secondary: --secondary,
+        blue: --blue,
+        red: --red,
+        green: --green,
+        orange: --orange,
+        'blue.secondary': --blue2,
+        'red.secondary': --red2,
+        'green.secondary': --green2,
+        'orange.secondary': --orange2,
+        'blue.tertiary': --blue3,
+        'red.tertiary': --red3,
+        'green.tertiary': --green3,
+        'orange.tertiary': --orange3,
+        'blue.quaternary': --blue4,
+        'red.quaternary': --red4,
+        'green.quaternary': --green4,
+        'orange.quaternary': --orange4,
+        'blue.quinary': --blue5,
+        'red.quinary': --red5,
+        'green.quinary': --green5,
+        'orange.quinary': --orange5
+      )
+  {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
+    }
+  }
+
+  @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);
+      // }
+    }
+  }
+}

package/scss/utils/_scroll-view.scss

@@ -0,0 +1,14 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:string';
+
+@layer #{vars.$utils-layer} {
+  scroll-view {
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      // :where(&[background='infinity']) {
+      // :where(&) {
+      //   --face: attr(background type(<color>), inherit);
+      // }
+    }
+  }
+}

package/scss/utils/_spacing.scss

@@ -0,0 +1,25 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+@layer #{vars.$utils-layer} {
+  // general utils
+  @for $i from 0 through 50 {
+    :where([padding-horizontal='#{$i}']) {
+      padding-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([padding-vertical='#{$i}']) {
+      padding-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-horizontal='#{$i}']) {
+      margin-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-vertical='#{$i}']) {
+      margin-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+  }
+}

package/scss/utils/_stacks.scss

@@ -0,0 +1,222 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+$inline-map: (
+  leading: (
+    (justify-items (start)),
+    (justify-content (start)),
+  ),
+  'leading fill': (
+    (justify-items (start)),
+    (justify-content (stretch)),
+  ),
+  center: (
+    (justify-items (center)),
+    (justify-content (center)),
+  ),
+  trailing: (
+    (justify-items (end)),
+    (justify-content (end)),
+  ),
+  fill: (
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+  space-between: (
+    (justify-content (space-between)),
+  ),
+);
+
+$block-map: (
+  leading: (
+    (align-items (start)),
+    (align-content (start)),
+  ),
+  'leading fill': (
+    (align-items (start)),
+    (align-content (stretch)),
+  ),
+  center: (
+    (align-items (center)),
+    (align-content (center)),
+  ),
+  trailing: (
+    (align-items (end)),
+    (align-content (end)),
+  ),
+  fill: (
+    (align-items (stretch)),
+    (align-content (stretch)),
+  ),
+  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)),
+  ),
+  'fill space-between': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+$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)),
+    (justify-content (stretch)),
+  ),
+);
+
+@layer #{vars.$utils-layer} {
+  // Vertical alignment becomes the common tweak
+  h-stack,
+  v-flex-stack {
+    // main axis (horizontal/inline)
+    @each $k, $declarations in $inline-map {
+      &[distribution='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
+        }
+      }
+    }
+
+    // cross axis (vertical/block)
+    @each $k, $declarations in $block-map {
+      &[alignment='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
+        }
+      }
+    }
+
+    // placement="fill leading" -> short cut for distribution="fill" alignment="leading"
+    @each $k, $declarations in $h-placement-map {
+      &[placement='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
+        }
+      }
+    }
+
+    // @each $k, $v in $alignment-map {
+    //   &[align='#{$k}'] {
+    //     justify-items: $v;
+    //   }
+    // }
+
+    // @each $k, $v in $distribution-map {
+    //   &[distribute='#{$k}'] {
+    //     justify-content: $v;
+    //   }
+    // }
+  }
+
+  // Horizontal alignment becomes the common tweak
+  v-stack,
+  h-flex-stack {
+    // block dir for items+content
+    @each $k, $declarations in $block-map {
+      &[distribution='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
+        }
+      }
+    }
+
+    // inline dir for items+content
+    @each $k, $declarations in $inline-map {
+      &[alignment='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
+        }
+      }
+    }
+
+    // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
+    @each $k, $declarations in $v-placement-map {
+      &[placement='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
+        }
+      }
+    }
+
+    // @each $k, $v in $alignment-map {
+    //   &[align='#{$k}'] {
+    //     align-items: $v;
+    //   }
+    // }
+
+    // @each $k, $v in $distribution-map {
+    //   &[distribute='#{$k}'] {
+    //     align-content: $v;
+    //   }
+    // }
+  }
+
+  v-stack,
+  h-stack {
+    // $spaces: 0, 1, 2, 3, 4;
+    // @each $s in $spaces {
+    @for $i from 0 through 50 {
+      :where(&[spacing='#{$i}']) {
+        gap: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+      }
+    }
+
+    :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;
+    }
+
+    :where(scroll-view > &[padding]) {
+      padding-block-end: 1rem;
+    }
+
+    // all direct children (excluding stacks) of stacks get margins, also some special cases like a details>summary[padding] etc.
+    :where(& > [padding]:not(&, sticky-container), & > [is='disclosure-group'] > summary[padding]) {
+      margin-inline: 1rem;
+    }
+
+    :where(& > sticky-container) {
+      padding-inline: 1rem;
+    }
+  }
+}