@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/scss/utils/_stacks.scss

@@ -1,230 +1,85 @@
-@use '../vars';
 @use 'sass:math';
 @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),
-  ),
-  '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 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: (
-  'leading fill': (
-    (place-items (start stretch)),
-    (place-content (start stretch)),
-  ),
-  'space-between fill': (
-    (align-content (space-between)),
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-);
+@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 $inline-map {
+    @each $k, $declarations in maps.$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)};
         }
       }
     }
 
     // cross axis (vertical/block)
-    @each $k, $declarations in $block-map {
+    @each $k, $declarations in maps.$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)};
         }
       }
     }
 
     // placement="fill leading" -> short cut for distribution="fill" alignment="leading"
-    @each $k, $declarations in $h-placement-map {
+    @each $k, $declarations in maps.$inline-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 $k, $declarations in maps.$block-map {
+      :where(&[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)};
         }
       }
     }
 
     // inline dir for items+content
-    @each $k, $declarations in $inline-map {
-      &[alignment='#{$k}'] {
+    @each $k, $declarations in maps.$inline-map {
+      :where(&[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)};
         }
       }
     }
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
-    @each $k, $declarations in $v-placement-map {
-      &[placement='#{$k}'] {
+    @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), ' ')};
         }
       }
     }
-
-    // @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 {
+  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;
       }
     }
-
-    :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 +90,23 @@ $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;
+    }
+  }
+}
+
+@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"
+        }
+      ]
+    }
+  ]
+}