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

package/scss/utils/_index.scss

@@ -0,0 +1,91 @@
+@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);
+      }
+    }
+  }
+
+  :where([foreground='secondary']) {
+    color: var(--secondary);
+  }
+
+  :where([foreground='blue']) {
+    color: var(--blue);
+  }
+
+  :where([foreground='blue.secondary']) {
+    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);
+
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+
+    // :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,209 @@
+@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 (safe center)),
+    (justify-content (safe 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 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)),
+  ),
+  '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 {
+    // $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;
+    }
+  }
+}