chore: rename $spacing to $kendo-spacing

BREAKING CHANGE: Added `$kendo-` prefix to `$spacing` map

Renamed `$spacing` to `$kendo-spacing` to avoid conflicts with other libraries.

packages/bootstrap/scss/_variables.scss

@@ -24,15 +24,25 @@ $spacer: $spacer !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
 
-$spacing: (
+$kendo-spacing: (
+    // sass-lint:disable-block leading-zero
     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,
@@ -49,14 +59,7 @@ $spacing: (
     21: 5.25rem,
     22: 5.5rem,
     23: 5.75rem,
-    24: 6rem,
-    xs: .25rem,
-    sm: .5rem,
-    md: .75rem,
-    lg: 1rem,
-    xl: 1.5rem,
-    thin: .125rem,
-    hair: .0625rem
+    24: 6rem
 ) !default;
 
 $default-scrollbar-width: 17px !default;
@@ -65,8 +68,8 @@ $default-scrollbar-width: 17px !default;
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: k-map-get( $spacing, 2 ) !default;
-$icon-padding: k-map-get( $spacing, 1 ) !default;
+$icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL

packages/bootstrap/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$actions-margin-top: k-map-get( $spacing, 4 ) !default;
-$actions-padding-x: k-map-get( $spacing, 2 ) !default;
-$actions-padding-y: k-map-get( $spacing, 2 ) !default;
+$actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
+$actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actions-border-width: 0px !default;
-$actions-button-spacing: k-map-get( $spacing, 2 ) !default;
+$actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
 
 $actions-bg: null !default;
 $actions-text: null !default;

packages/bootstrap/scss/action-sheet/_variables.scss

@@ -20,13 +20,13 @@ $actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( bl
 
 
 // Actionsheet header
-$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
-$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actionsheet-titlebar-border-width: null !default;
 $actionsheet-titlebar-font-size: null !default;
 $actionsheet-titlebar-font-family: null !default;
 $actionsheet-titlebar-line-height: null !default;
-$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $actionsheet-titlebar-bg: null !default;
 $actionsheet-titlebar-text: null !default;
@@ -41,8 +41,8 @@ $actionsheet-subtitle-text: $subtle-text !default;
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: k-map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -75,12 +75,12 @@ $actionsheet-item-disabled-shadow: null !default;
 
 // Adaptive Actionsheet
 $adaptive-actionsheet-titlebar-border-width: 1px !default;
-$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
 $adaptive-actionsheet-titlebar-border: $component-border !default;
 
-$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
-$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 
-$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
-$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;

packages/bootstrap/scss/appbar/_variables.scss

@@ -1,16 +1,16 @@
 // Appbar
 $kendo-appbar-margin-y: null !default;
 $kendo-appbar-margin-x: null !default;
-$kendo-appbar-padding-y: k-map-get( $spacing, 2 ) !default;
-$kendo-appbar-padding-x: k-map-get( $spacing, 2 ) !default;
+$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-appbar-border-width: 0px !default;
 
 $kendo-appbar-zindex: 1000 !default;
 
 $kendo-appbar-font-size: $font-size !default;
 $kendo-appbar-line-height: $line-height !default;
 $kendo-appbar-font-family: $font-family !default;
-$kendo-appbar-gap: k-map-get( $spacing, 2 ) !default;
+$kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
 $kendo-appbar-light-bg: $light !default;
 $kendo-appbar-light-text: k-contrast-color( $light ) !default;

packages/bootstrap/scss/avatar/_variables.scss

@@ -17,9 +17,9 @@ $kendo-avatar-line-height: $line-height !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: k-map-get( $spacing, 4 ),
-    md: k-map-get( $spacing, 8 ),
-    lg: k-map-get( $spacing, 16 )
+    sm: k-map-get( $kendo-spacing, 4 ),
+    md: k-map-get( $kendo-spacing, 8 ),
+    lg: k-map-get( $kendo-spacing, 16 )
 ) !default;
 
 /// Theme colors map of the avatar.

packages/bootstrap/scss/badge/_variables.scss

@@ -19,7 +19,7 @@ $kendo-badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
 /// Vertical padding of the badge.
 /// @group badge
 $kendo-badge-padding-y: $badge-padding-y !default;
-$kendo-badge-padding-y-sm: k-math-div( $badge-padding-y, 2 )  !default;
+$kendo-badge-padding-y-sm: k-math-div( $badge-padding-y, 2 ) !default;
 $kendo-badge-padding-y-md: $badge-padding-y !default;
 $kendo-badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
 

packages/bootstrap/scss/bottom-navigation/_variables.scss

@@ -9,17 +9,17 @@ $bottom-nav-font-size: $font-size !default;
 $bottom-nav-line-height: normal !default;
 $bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: k-map-get( $spacing, 2 ) !default;
+$bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
-$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{k-map-get( $spacing, 2 ) * 2} - #{$bottom-nav-padding-x * 2} ) !default;
+$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{k-map-get( $kendo-spacing, 4 )} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: null !default;
-$bottom-nav-item-gap: 0 k-map-get( $spacing, 1 ) !default;
+$bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: k-map-get( $spacing, 2 ) !default;
+$bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
 $bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: k-map-get( $spacing, 6 ) !default;
+$bottom-nav-item-icon-size: k-map-get( $kendo-spacing, 6 ) !default;
 $bottom-nav-item-disabled-opacity: .5 !default;
 
 $bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;

packages/bootstrap/scss/calendar/_variables.scss

@@ -10,8 +10,8 @@ $calendar-bg: $component-bg !default;
 $calendar-text: $component-text !default;
 $calendar-border: $component-border !default;
 
-$calendar-header-padding-x: k-map-get( $spacing, 1 ) !default;
-$calendar-header-padding-y: k-map-get( $spacing, 1 ) !default;
+$calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-header-border-width: 1px !default;
 
 $calendar-header-bg: $header-bg !default;
@@ -22,11 +22,11 @@ $calendar-header-shadow: none !default;
 
 $calendar-nav-gap: null !default;
 
-$calendar-footer-padding-x: k-map-get( $spacing, 4 ) !default;
-$calendar-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$calendar-cell-padding-x: k-map-get( $spacing, 1 ) !default;
-$calendar-cell-padding-y: k-map-get( $spacing, 1 ) !default;
+$calendar-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$calendar-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-cell-line-height: $calendar-line-height !default;
 $calendar-cell-border-radius: $kendo-border-radius-md !default;
 
@@ -40,16 +40,16 @@ $calendar-header-cell-bg: null !default;
 $calendar-header-cell-text: $subtle-text !default;
 $calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: k-map-get( $spacing, 3 ) !default;
-$calendar-caption-padding-y: k-map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-caption-height: $calendar-cell-size !default;
 $calendar-caption-font-size: null !default;
 $calendar-caption-line-height: null !default;
 $calendar-caption-font-weight: bold !default;
 
 $calendar-view-width: ($calendar-cell-size * 8) !default;
 $calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: k-map-get( $spacing, 4 ) !default;
+$calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $calendar-weekend-bg: null !default;
 $calendar-weekend-text: null !default;
@@ -99,10 +99,10 @@ $calendar-navigation-hover-text: $link-hover-text !default;
 
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: k-map-get( $spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: k-map-get( $spacing, 2 ) !default;
+$infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: k-map-get( $spacing, 4 ) !default;
+$infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $infinite-calendar-view-padding-y: 0px !default;
 $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
@@ -120,14 +120,14 @@ $kendo-calendar-sm-cell-padding-y: .125rem !default;
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 38px !default;
-$kendo-calendar-md-cell-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
 $kendo-calendar-lg-font-size: $font-size-lg !default;
 $kendo-calendar-lg-line-height: $line-height-lg !default;
 $kendo-calendar-lg-cell-size: 42px !default;
-$kendo-calendar-lg-cell-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-calendar-lg-cell-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
 $kendo-calendar-sizes: (
     sm: (

packages/bootstrap/scss/captcha/_variables.scss

@@ -1,5 +1,5 @@
 // Captcha
-$captcha-spacer: k-map-get( $spacing, 2 ) !default;
+$captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
 
 $captcha-width: 335px !default;
 $captcha-font-family: $font-family !default;

packages/bootstrap/scss/card/_variables.scss

@@ -8,7 +8,7 @@ $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
 $card-line-height: $line-height !default;
 
-$card-deck-gap: k-map-get( $spacing, 4 ) !default;
+$card-deck-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $card-bg: $component-bg !default;
 $card-text: $component-text !default;
@@ -37,14 +37,14 @@ $card-footer-bg: $card-header-bg !default;
 $card-footer-text: $card-header-text !default;
 $card-footer-border: $card-header-border !default;
 
-$card-title-margin-bottom: k-map-get( $spacing, md ) !default;
+$card-title-margin-bottom: k-map-get( $kendo-spacing, 3 ) !default;
 $card-title-font-size: $h5-font-size !default;
 $card-title-font-family: $headings-font-family !default;
 $card-title-line-height: $headings-line-height !default;
 $card-title-font-weight: $headings-font-weight !default;
 $card-title-letter-spacing: null !default;
 
-$card-subtitle-margin-bottom: k-map-get( $spacing, md ) !default;
+$card-subtitle-margin-bottom: k-map-get( $kendo-spacing, 3 ) !default;
 $card-subtitle-font-size: $h6-font-size !default;
 $card-subtitle-font-family: $headings-font-family !default;
 $card-subtitle-line-height: $headings-line-height !default;
@@ -56,10 +56,10 @@ $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
 $card-avatar-spacing: $card-header-padding-x !default;
 
-$card-actions-padding-x: k-map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: k-map-get( $spacing, 2 ) !default;
+$card-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$card-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $card-actions-border-width: 1px !default;
-$card-actions-gap: k-map-get( $spacing, 2 ) !default;
+$card-actions-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
 $card-deck-scroll-button-offset: -$kendo-button-border-width !default;

packages/bootstrap/scss/checkbox/_variables.scss

@@ -7,19 +7,19 @@ $kendo-checkbox-border-width: 1px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-map-get( $spacing, 3 ),
-        glyph-size: ( k-map-get( $spacing, 3 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-map-get( $spacing, 3 ) * 3
+        size: k-map-get( $kendo-spacing, 3 ),
+        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
+        ripple-size: 300%
     ),
     md: (
-        size: k-map-get( $spacing, 4 ),
-        glyph-size: ( k-map-get( $spacing, 4 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-map-get( $spacing, 4 ) * 3
+        size: k-map-get( $kendo-spacing, 4 ),
+        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
+        ripple-size: 300%
     ),
     lg: (
-        size: k-map-get( $spacing, 5 ),
-        glyph-size: ( k-map-get( $spacing, 5 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-map-get( $spacing, 5 ) * 3
+        size: k-map-get( $kendo-spacing, 5 ),
+        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
+        ripple-size: 300%
     )
 ) !default;
 
@@ -135,14 +135,14 @@ $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: k-map-get( $spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: k-map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;

packages/bootstrap/scss/chip/_variables.scss

@@ -5,21 +5,21 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-md: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-lg: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
-$kendo-chip-padding-y-md: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
+$kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -147,7 +147,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: k-map-get( $spacing, 1 ),
-    md: k-map-get( $spacing, 1 ),
-    lg: k-map-get( $spacing, 1 )
+    sm: k-map-get( $kendo-spacing, 1 ),
+    md: k-map-get( $kendo-spacing, 1 ),
+    lg: k-map-get( $kendo-spacing, 1 )
 ) !default;