feat(utils): integrate spacing module

telerik · Mar 25, 2024 · a83b524 · a83b524
1 parent c24f703
commit a83b524
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 106 deletions.
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
@@ -1,5 +1,7 @@
 @import "@progress/kendo-theme-core/scss/color-system/index.import.scss";
 
+@import "./spacing/index.import.scss";
+
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
 $kendo-enable-color-system: false !default;
@@ -47,76 +49,9 @@ $kendo-util-colors: () !default;
     }
 }
 
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem
-) !default;
+$kendo-spacing: () !default;
 
-$kendo-sizing: k-map-merge( $kendo-spacing, (
-    "auto": auto,
-    "1/2": 50%,
-    "1/3": 33.333333%,
-    "2/3": 66.666667%,
-    "1/4": 25%,
-    "2/4": 50%,
-    "3/4": 75%,
-    "1/5": 20%,
-    "2/5": 40%,
-    "3/5": 60%,
-    "4/5": 80%,
-    "1/6": 16.666667%,
-    "2/6": 33.333333%,
-    "3/6": 50%,
-    "4/6": 66.666667%,
-    "5/6": 83.333333%,
-    "1/12": 8.333333%,
-    "2/12": 16.666667%,
-    "3/12": 25%,
-    "4/12": 33.333333%,
-    "5/12": 41.666667%,
-    "6/12": 50%,
-    "7/12": 58.333333%,
-    "8/12": 66.666667%,
-    "9/12": 75%,
-    "10/12": 83.333333%,
-    "11/12": 91.666667%,
-    "full": 100%,
-    "min": min-content,
-    "max": max-content,
-    "fit": fit-content
-)) !default;
+$kendo-sizing: () !default;
 
 $kendo-border-radii: (
     DEFAULT: .25rem,
@@ -492,13 +427,13 @@ $kendo-utils: (
     ),
     "gap": k-map-merge( $kendo-spacing, (
         // TODO: remove this extension once we fix docs
-        xs: k-map-get( $kendo-spacing, 1 ),
-        sm: k-map-get( $kendo-spacing, 2 ),
-        md: k-map-get( $kendo-spacing, 3 ),
-        lg: k-map-get( $kendo-spacing, 4 ),
-        xl: k-map-get( $kendo-spacing, 6 ),
-        thin: k-map-get( $kendo-spacing, 0.5 ),
-        hair: k-map-get( $kendo-spacing, 1px )
+        xs: k-spacing(1),
+        sm: k-spacing(2),
+        md: k-spacing(3),
+        lg: k-spacing(4),
+        xl: k-spacing(6),
+        thin: k-spacing(0.5),
+        hair: k-spacing(1px)
     )),
     "align-content": (
         normal: normal,
@@ -635,24 +570,24 @@ $kendo-utils: (
     "margin": k-map-merge( $kendo-spacing,
         k-map-negate( $kendo-spacing), (
         // TODO: remove this extension once we fix docs
-        xs: k-map-get( $kendo-spacing, 1 ),
-        sm: k-map-get( $kendo-spacing, 2 ),
-        md: k-map-get( $kendo-spacing, 3 ),
-        lg: k-map-get( $kendo-spacing, 4 ),
-        xl: k-map-get( $kendo-spacing, 6 ),
-        thin: k-map-get( $kendo-spacing, 0.5 ),
-        hair: k-map-get( $kendo-spacing, 1px ),
+        xs: k-spacing(1),
+        sm: k-spacing(2),
+        md: k-spacing(3),
+        lg: k-spacing(4),
+        xl: k-spacing(6),
+        thin: k-spacing(0.5),
+        hair: k-spacing(1px),
         auto: auto
     )),
     "padding": k-map-merge( $kendo-spacing, (
         // TODO: remove this extension once we fix docs
-        xs: k-map-get( $kendo-spacing, 1 ),
-        sm: k-map-get( $kendo-spacing, 2 ),
-        md: k-map-get( $kendo-spacing, 3 ),
-        lg: k-map-get( $kendo-spacing, 4 ),
-        xl: k-map-get( $kendo-spacing, 6 ),
-        thin: k-map-get( $kendo-spacing, 0.5 ),
-        hair: k-map-get( $kendo-spacing, 1px )
+        xs: k-spacing(1),
+        sm: k-spacing(2),
+        md: k-spacing(3),
+        lg: k-spacing(4),
+        xl: k-spacing(6),
+        thin: k-spacing(0.5),
+        hair: k-spacing(1px)
     )),
     "space-between": (),
 

diff --git a/packages/utils/scss/spacing/_margin.scss b/packages/utils/scss/spacing/_margin.scss
@@ -547,13 +547,12 @@
 @mixin kendo-utils--spacing--margin() {
 
     // Margin utility classes
-    $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
-    @include generate-utils( m, margin, $kendo-utils-margin );
-    @include generate-utils( mt, margin-top, $kendo-utils-margin );
-    @include generate-utils( mr, margin-right, $kendo-utils-margin );
-    @include generate-utils( mb, margin-bottom, $kendo-utils-margin );
-    @include generate-utils( ml, margin-left, $kendo-utils-margin );
-    @include generate-utils( mx, margin-inline, $kendo-utils-margin );
-    @include generate-utils( my, margin-block, $kendo-utils-margin );
+    @include generate-utils( m, margin, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( mt, margin-top, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( mr, margin-right, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( mb, margin-bottom, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( ml, margin-left, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( mx, margin-inline, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( my, margin-block, $kendo-spacing, $css-var: "spacing" );
 
 }
diff --git a/packages/utils/scss/spacing/_padding.scss b/packages/utils/scss/spacing/_padding.scss
@@ -547,13 +547,12 @@
 @mixin kendo-utils--spacing--padding() {
 
     // Padding utility classes
-    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
-    @include generate-utils( p, padding, $kendo-utils-padding );
-    @include generate-utils( pt, padding-top, $kendo-utils-padding );
-    @include generate-utils( pr, padding-right, $kendo-utils-padding );
-    @include generate-utils( pb, padding-bottom, $kendo-utils-padding );
-    @include generate-utils( pl, padding-left, $kendo-utils-padding );
-    @include generate-utils( px, padding-inline, $kendo-utils-padding );
-    @include generate-utils( py, padding-block, $kendo-utils-padding );
+    @include generate-utils( p, padding, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( pt, padding-top, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( pr, padding-right, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( pb, padding-bottom, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( pl, padding-left, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( px, padding-inline, $kendo-spacing, $css-var: "spacing" );
+    @include generate-utils( py, padding-block, $kendo-spacing, $css-var: "spacing" );
 
 }
diff --git a/packages/utils/scss/spacing/index.import.scss b/packages/utils/scss/spacing/index.import.scss
@@ -1,3 +1,5 @@
+@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+
 @import "./_margin.scss";
 @import "./_padding.scss";
 @import "./_space-between.scss";