Add gap util

1 files changed, 24 insertions, 18 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 3dae3b6..dc0fb32 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -171,7 +171,7 @@ $-font-sizes: (
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
                         $theme-name: static-#{string.slice($theme, 3)};
-    
+
                         @include bem.at-theme($theme-name) {
                                 color: props.get(vars.$transparent-colors, $theme, --900);
                         }
@@ -183,7 +183,7 @@ $-font-sizes: (
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
                         $theme-name: static-#{string.slice($theme, 3)};
-    
+
                         @include bem.at-theme($theme-name) {
                                 color: props.get(vars.$transparent-colors, $theme, --800);
                         }
@@ -195,7 +195,7 @@ $-font-sizes: (
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
                         $theme-name: static-#{string.slice($theme, 3)};
-    
+
                         @include bem.at-theme($theme-name) {
                                 color: props.get(vars.$transparent-colors, $theme, --700);
                         }
@@ -207,7 +207,7 @@ $-font-sizes: (
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
                         $theme-name: static-#{string.slice($theme, 3)};
-    
+
                         @include bem.at-theme($theme-name) {
                                 color: props.get(vars.$transparent-colors, $theme, --600);
                         }
@@ -224,23 +224,23 @@ $-font-sizes: (
                 @include bem.utility('#{$dir}-100') {
                         #{$prop}: 100%;
                 }
-        
+
                 @include bem.utility('#{$dir}-75') {
                         #{$prop}: 75%;
                 }
-        
+
                 @include bem.utility('#{$dir}-50') {
                         #{$prop}: 50%;
                 }
-        
+
                 @include bem.utility('#{$dir}-25') {
                         #{$prop}: 25%;
                 }
-        
+
                 @include bem.utility('#{$dir}-1px') {
                         #{$prop}: 1px;
                 }
-        
+
                 @include bem.utility('#{$dir}-0') {
                         #{$prop}: 0;
                 }
@@ -290,11 +290,17 @@ $-font-sizes: (
                 border-radius: props.get(vars.$rounding--sm);
         }
 
+        @each $mod, $size in $-sizes {
+                @include bem.utility('g-#{$mod}') {
+                        gap: props.get($size);
+                }
+        }
+
         @each $dir, $suffix in $-dirs {
                 @include bem.utility('m#{$dir}-auto') {
                         margin#{$suffix}: auto;
                 }
-        
+
                 @include bem.utility('p#{$dir}-auto') {
                         padding#{$suffix}: auto;
                 }
@@ -303,12 +309,12 @@ $-font-sizes: (
                         @include bem.utility('m#{$dir}-#{$mod}') {
                                 margin#{$suffix}: props.get($size);
                         }
-            
+
                         @include bem.utility('p#{$dir}-#{$mod}') {
                                 padding#{$suffix}: props.get($size);
                         }
                 }
-        
+
                 @include bem.utility('b#{$dir}-0') {
                         border#{$suffix}: 0;
 
@@ -317,14 +323,14 @@ $-font-sizes: (
                                         border#{$suffix}: 0;
                                 }
                         }
-        
+
                         @include bem.suffix('dark') {
                                 @media (prefers-color-scheme: dark) {
                                         border#{$suffix}: 0;
                                 }
                         }
                 }
-        
+
                 @include bem.utility('b#{$dir}-1') {
                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
 
@@ -333,14 +339,14 @@ $-font-sizes: (
                                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                                 }
                         }
-        
+
                         @include bem.suffix('dark') {
                                 @media (prefers-color-scheme: dark) {
                                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                                 }
                         }
                 }
-        
+
                 @include bem.utility('b#{$dir}-1-mute') {
                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
 
@@ -349,7 +355,7 @@ $-font-sizes: (
                                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
                                 }
                         }
-        
+
                         @include bem.suffix('dark') {
                                 @media (prefers-color-scheme: dark) {
                                         border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
@@ -365,7 +371,7 @@ $-font-sizes: (
                         content:       '';
                 }
         }
-    
+
         @include bem.utility('sr-only') {
                 position:    absolute;
                 width:       1px;