✨ feat(flex.scss): Add flex gap utility classes

dist/cirrus.css

@@ -13662,6 +13662,61 @@ a.tag:hover {
     align-items: baseline !important;
   }
 }
+.u-gap-0 {
+  gap: calc(0.5rem * 0) !important;
+}
+
+.u-gap-1 {
+  gap: calc(0.5rem * 1) !important;
+}
+
+.u-gap-2 {
+  gap: calc(0.5rem * 2) !important;
+}
+
+.u-gap-3 {
+  gap: calc(0.5rem * 3) !important;
+}
+
+.u-gap-4 {
+  gap: calc(0.5rem * 4) !important;
+}
+
+.u-gap-5 {
+  gap: calc(0.5rem * 5) !important;
+}
+
+.u-gap-6 {
+  gap: calc(0.5rem * 6) !important;
+}
+
+.u-gap-8 {
+  gap: calc(0.5rem * 8) !important;
+}
+
+.u-gap-10 {
+  gap: calc(0.5rem * 10) !important;
+}
+
+.u-gap-12 {
+  gap: calc(0.5rem * 12) !important;
+}
+
+.u-gap-16 {
+  gap: calc(0.5rem * 16) !important;
+}
+
+.u-gap-20 {
+  gap: calc(0.5rem * 20) !important;
+}
+
+.u-gap-24 {
+  gap: calc(0.5rem * 24) !important;
+}
+
+.u-gap-32 {
+  gap: calc(0.5rem * 32) !important;
+}
 /*
   Functions
   TODO Refactor to different categories

internal/_flags.scss

@@ -14,4 +14,5 @@ $_VIEWPORT_CLASS_FLAGS: (
     'HEIGHTS': true,
     'ZINDEX': false,
     'ABSOLUTE': false,
+    'FLEX-GAP': false,
 );

src/core/utils/flex.scss

@@ -7,6 +7,35 @@ $justify-content: flex-start, center, flex-end, space-between, space-around, spa
 
 $align-items: stretch, flex-start, center, flex-end, baseline;
 
-@include generate-classes-for-viewport($flex-directions, 'flex-direction', 'u#{delimitize('flex')}', $generate-viewports: #{get-viewport-flag('FLEX')});
-@include generate-classes-for-viewport($justify-content, 'justify-content', 'u#{delimitize('justify')}', $generate-viewports: #{get-viewport-flag('FLEX')});
-@include generate-classes-for-viewport($align-items, 'align-items', 'u#{delimitize('items')}', $generate-viewports: #{get-viewport-flag('FLEX')});
+@include generate-classes-for-viewport(
+    $flex-directions,
+    'flex-direction',
+    'u#{delimitize('flex')}',
+    $generate-viewports: #{get-viewport-flag('FLEX')}
+);
+@include generate-classes-for-viewport(
+    $justify-content,
+    'justify-content',
+    'u#{delimitize('justify')}',
+    $generate-viewports: #{get-viewport-flag('FLEX')}
+);
+@include generate-classes-for-viewport(
+    $align-items,
+    'align-items',
+    'u#{delimitize('items')}',
+    $generate-viewports: #{get-viewport-flag('FLEX')}
+);
+
+// Generate flex gap class map
+$flex-gaps-both: ();
+// TODO: Consider if we need to generate for row and col only
+@each $size in $spacing-system {
+    $flex-gaps-both: map-merge(
+        $flex-gaps-both,
+        (
+            'gap-#{$size}': calc(#{$space-size} * #{$size}),
+        )
+    );
+}
+
+@include generate-classes-for-viewport-with-map($flex-gaps-both, 'gap', $generate-viewports: #{get-viewport-flag('FLEX-GAP')});