feat(core): implement spacing module

telerik · Mar 25, 2024 · 7b863e5 · 7b863e5
1 parent d324df2
commit 7b863e5
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 50 deletions.
diff --git a/packages/core/scss/_variables.scss b/packages/core/scss/_variables.scss
@@ -6,43 +6,6 @@ $kendo-enable-rounded: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
 
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 0.125rem,
-    1: 0.25rem,
-    1.5: 0.375rem,
-    2: 0.5rem,
-    2.5: 0.625rem,
-    3: 0.75rem,
-    3.5: 0.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;
-
 /// Border radius for all components.
 $kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
 $kendo-border-radius-sm: k-math-div($kendo-border-radius, 2) !default;
@@ -59,16 +22,6 @@ $kendo-border-radii: (
     full: 9999px,
 ) !default;
 
-// Metrics
-$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
-$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
-$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
-
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
 $equilateral-index: 1.7320508076 !default;
@@ -77,4 +30,4 @@ $equilateral-height: 0.8660254038 !default;
 
 // Loading
 $kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
+$kendo-zindex-loading: 100 !default;
diff --git a/packages/core/scss/index.import.scss b/packages/core/scss/index.import.scss
@@ -5,4 +5,5 @@
 @import "./styles/index.import.scss";
 @import "./elevation/index.import.scss";
 @import "./typography/index.import.scss";
+@import "./spacing/index.import.scss";
 @import "./_variables.scss";
diff --git a/packages/core/scss/spacing/index.import.scss b/packages/core/scss/spacing/index.import.scss
@@ -0,0 +1,101 @@
+@import "../functions/index.import.scss";
+
+$_default-spacing: (
+    0: 0px,
+    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,
+    25: 7rem,
+    26: 8rem,
+    27: 9rem,
+    28: 10rem,
+    29: 11rem,
+    30: 12rem
+) !default;
+
+/// The global default Spacing map.
+/// @group spacing
+$kendo-spacing: $_default-spacing !default;
+
+$kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);
+
+
+@function k-spacing($step) {
+    $spacing: k-map-get($kendo-spacing, $step);
+    $_step: k-escape-class-name( $step );
+    @return var(--kendo-spacing-#{$_step}, #{$spacing});
+}
+
+// Generate a CSS variable for each value in the Spacing map
+@mixin kendo-spacing--styles() {
+    :root {
+        @each $step, $spacing in $kendo-spacing {
+            $_step: k-escape-class-name( $step );
+            --kendo-spacing-#{$_step}: #{$spacing};
+        }
+    }
+}
+
+$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;
diff --git a/packages/core/scss/styles/_base.scss b/packages/core/scss/styles/_base.scss
@@ -16,7 +16,7 @@
 
     // Horizontal line
     .k-hr {
-        margin-block: k-map-get( $kendo-spacing, 4 );
+        margin-block: k-spacing(4);
         padding: 0;
         height: 0;
         border-width: 1px 0 0;
@@ -130,4 +130,4 @@
         inset-block-start: 0;
         inset-inline-end: 0;
     }
-}
+}