@swiftwc/ui 0.0.0-dev.0 → 0.0.0-dev.100

package/scss/utils/_stacks.scss

@@ -0,0 +1,112 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use '../vars';
+@use '../maps';
+
+@layer #{vars.$utils-layer} {
+  // Vertical alignment becomes the common tweak
+  h-stack,
+  v-flex-stack {
+    // main axis (horizontal/inline)
+    @each $k, $declarations in maps.$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 maps.$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 maps.$inline-placement-map {
+      &[placement='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
+        }
+      }
+    }
+  }
+
+  // Horizontal alignment becomes the common tweak
+  v-stack,
+  h-flex-stack {
+    // block dir for items+content
+    @each $k, $declarations in maps.$block-map {
+      :where(&[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 maps.$inline-map {
+      :where(&[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 maps.$block-placement-map {
+      :where(&[placement='#{$k}']) {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
+        }
+      }
+    }
+  }
+
+  v-stack,
+  h-stack {
+    @for $i from 0 through 50 {
+      :where(&[spacing='#{$i}']) {
+        gap: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+      }
+    }
+  }
+
+  // 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;
+    }
+  }
+}
+
+@layer #{vars.$components-layer} {
+  // readable 1/2
+  v-stack {
+    :where(&[readable]) {
+      @each $decl in map.get(maps.$block-placement-map, 'leading fill') {
+        #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //->[placement='leading fill']->[distribution='leading'][alignment='fill']
+      }
+    }
+  }
+}

package/web-components.css-data/en.json

@@ -0,0 +1,28 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--accentColor",
+      "description": {
+        "kind": "markdown",
+        "value": "Sets the accent color used by interactive elements.\n\nRegistered via `@property` with `syntax: '<color>'`, `inherits: true`."
+      },
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/tokens/tint"
+        }
+      ],
+      "values": [
+        {
+          "name": "blue",
+          "description": "System blue"
+        },
+        {
+          "name": "red",
+          "description": "System red"
+        }
+      ]
+    }
+  ]
+}