@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.1

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "8.0.0-dev.0",
+  "version": "8.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.0",
-    "@progress/kendo-theme-utils": "8.0.0-dev.0"
+    "@progress/kendo-theme-core": "8.0.0-dev.1",
+    "@progress/kendo-theme-utils": "8.0.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "82fa9745206aad68ed9f5a6d8c11d84dbb70c20c"
+  "gitHead": "798500c0cb615e834197322b581e870888968fd1"
 }

package/scss/action-buttons/_variables.scss

@@ -3,10 +3,10 @@
 
 /// Horizontal padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-actions-padding-x: k-spacing(3) !default;
 /// Vertical padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-actions-padding-y: k-spacing(3) !default;
 /// Width of the border around the action buttons container.
 /// @group action-buttons
 $kendo-actions-border-width: 0px !default;
@@ -22,4 +22,4 @@ $kendo-actions-border: inherit !default;
 
 /// Spacing between the action buttons.
 /// @group button
-$kendo-actions-button-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-actions-button-spacing: k-spacing(2) !default;

package/scss/action-sheet/_layout.scss

@@ -283,7 +283,7 @@
         }
 
         .k-actionsheet-filter {
-            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-header-padding-x * 2}) ) );
+            width: calc( min(100%, calc( 360px - calc( #{$kendo-adaptive-actionsheet-header-padding-x} * 2 ) ) ) );
         }
         .k-actionsheet-content,
         .k-actionsheet-footer {

package/scss/action-sheet/_variables.scss

@@ -3,10 +3,10 @@
 
 /// Horizontal padding of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-padding-x: 0px !default;
+$kendo-actionsheet-padding-x: k-spacing(0) !default;
 /// Vertical padding of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-padding-y: 0px !default;
+$kendo-actionsheet-padding-y: k-spacing(0) !default;
 /// Width of the action sheet.
 /// @group action-sheet
 $kendo-actionsheet-width: 360px !default;
@@ -52,10 +52,10 @@ $kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-7, none ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-header-padding-x: k-spacing(4) !default;
 /// Vertical padding of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-header-padding-y: k-spacing(2) !default;
 /// Border width of the action sheet header.
 /// @group action-sheet
 $kendo-actionsheet-header-border-width: 1px !default;
@@ -70,7 +70,7 @@ $kendo-actionsheet-header-font-family: inherit !default;
 $kendo-actionsheet-header-line-height: inherit !default;
 /// Spacing between the action sheet header groups.
 /// @group action-sheet
-$kendo-actionsheet-header-gap: map.get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-header-gap: k-spacing(4) !default;
 
 
 /// Background color of the action sheet header.
@@ -101,16 +101,16 @@ $kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
 $kendo-actionsheet-item-min-height: 40px !default;
 /// Horiozontal padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-item-padding-x: k-spacing(4) !default;
 /// Vertical padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
 /// Border around the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-border-width: 1px !default;
 /// Spacing between the icon and the text in the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-spacing: k-spacing(2) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
@@ -187,7 +187,7 @@ $kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
 $kendo-adaptive-actionsheet-header-border-width: 1px !default;
 /// Vertical padding of the adaptive action sheet titlebar.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-header-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-header-padding-y: k-spacing(4) !default;
 /// Horizontal padding of the adaptive action sheet titlebar.
 /// @group action-sheet
 $kendo-adaptive-actionsheet-header-padding-x: $kendo-adaptive-actionsheet-header-padding-y !default;
@@ -197,14 +197,14 @@ $kendo-adaptive-actionsheet-header-border: var( --kendo-component-border, initia
 
 /// Vertical padding of the adaptive action sheet content.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-content-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
 /// Horizontal padding of the adaptive action sheet content.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
 /// Vertical padding of the adaptive action sheet footer.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
 /// Horizontal padding of the adaptive action sheet footer.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-footer-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;

package/scss/adaptive/_layout.scss

@@ -354,7 +354,7 @@
     .k-pane-wrapper {
 
         .k-appbar {
-            padding: map.get( $kendo-spacing, 1 );
+            padding: k-spacing(1);
         }
 
         .k-list-title,
@@ -378,15 +378,15 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: map.get( $kendo-spacing, 4 );
+            margin-top: k-spacing(4);
         }
 
         // Column menu
         .k-column-menu {
-            padding: map.get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: map.get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
@@ -398,16 +398,16 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map.get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 
         // Filter menu
         .k-filter-menu {
-            padding: map.get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: map.get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-list-title {
                 padding: 0;
@@ -427,7 +427,7 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map.get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 

package/scss/appbar/_variables.scss

@@ -3,16 +3,16 @@
 
 /// The horizontal margin of the AppBar.
 /// @group appbar
-$kendo-appbar-margin-x: 0 !default;
+$kendo-appbar-margin-x: k-spacing(0) !default;
 /// The vertical margin of the AppBar.
 /// @group appbar
-$kendo-appbar-margin-y: 0 !default;
+$kendo-appbar-margin-y: k-spacing(0) !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: k-spacing(2) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-y: k-spacing(2) !default;
 /// The width of the border around the AppBar.
 /// @group appbar
 $kendo-appbar-border-width: 0px !default;
@@ -31,7 +31,7 @@ $kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar
-$kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-spacing: k-spacing(2) !default;
 
 /// The text color of the AppBar.
 /// @group appbar
@@ -103,4 +103,4 @@ $kendo-appbar-theme-colors: () !default;
         $kendo-appbar-theme-colors,
         k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
-}
+}

package/scss/avatar/_variables.scss

@@ -18,9 +18,9 @@ $kendo-avatar-line-height: var( --kendo-line-height, inherit ) !default;
 /// The sizes map of the Avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map.get( $kendo-spacing, 4 ),
-    md: map.get( $kendo-spacing, 8 ),
-    lg: map.get( $kendo-spacing, 16 )
+    sm: k-spacing(4),
+    md: k-spacing(8),
+    lg: k-spacing(16)
 ) !default;
 
 /// The theme variations for the Avatar.

package/scss/badge/_variables.scss

@@ -21,23 +21,23 @@ $kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
 
 /// Horizontal padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
 /// Horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-x: k-spacing(1) !default;
 /// Horizontal padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-x: k-spacing(1.5) !default;
 
 /// Vertical padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
 /// Vertical padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-y: k-spacing(1) !default;
 /// Vertical padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the small Badge.
 /// @group badge

package/scss/bottom-navigation/_variables.scss

@@ -3,7 +3,7 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-bottom-nav-padding-x: k-spacing(1.5) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
@@ -18,20 +18,20 @@ $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
 $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: var( --kendo-font-size-md, 1rem ) !default;
+$kendo-bottom-nav-font-size: var( --kendo-font-size, 1rem ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: var( --kendo-line-height-md, normal ) !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-bottom-nav-item-padding-y: k-spacing(0.5) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -43,14 +43,14 @@ $kendo-bottom-nav-item-max-width: none !default;
 $kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-gap: k-spacing(1) !default;
 
 /// The offset of the focused BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-focus-offset: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-bottom-nav-item-focus-offset: k-spacing(0.5) !default;
 /// The outline width of the focused BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-focus-outline-width: 1px !default;

package/scss/breadcrumb/_variables.scss

@@ -4,16 +4,16 @@
 
 /// The horizontal margin of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-margin-x: 0px !default;
+$kendo-breadcrumb-margin-x: k-spacing(0) !default;
 /// The vertical margin of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-margin-y: 0px !default;
+$kendo-breadcrumb-margin-y: k-spacing(0) !default;
 /// The horizontal padding of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-padding-x: 0px !default;
+$kendo-breadcrumb-padding-x: k-spacing(0) !default;
 /// The vertical padding of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-padding-y: 0px !default;
+$kendo-breadcrumb-padding-y: k-spacing(0) !default;
 
 /// The width of the border around the Breadcrumb
 /// @group breadcrumb
@@ -28,13 +28,13 @@ $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-breadcrumb-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size variable of the Breadcrumb.
 /// @group breadcrumb
@@ -64,29 +64,29 @@ $kendo-breadcrumb-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, color-m
 
 /// The horizontal padding of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(2.5) !default;
 
 /// The radius of the border around the Breadcrumb link
 /// @group breadcrumb
@@ -204,16 +204,16 @@ $kendo-breadcrumb-current-item-border: null !default;
 
 /// The vertical padding of the Breadcrumb link icon
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(2.5) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Breadcrumb link icon
 /// @group breadcrumb

package/scss/button/_layout.scss

@@ -78,7 +78,7 @@
         $_font-size: map.get( $size-props, font-size );
         $_line-height: map.get( $size-props, line-height );
 
-        $_icon-button-padding: math.div( $_padding-x, 2 );
+        $_icon-button-padding: calc( #{$_padding-x} / 2 );
 
         .k-button-#{$size} {
             --INTERNAL--kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );

package/scss/button/_variables.scss

@@ -8,23 +8,23 @@ $kendo-button-border-width: 1px !default;
 
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-sm-padding-x: k-spacing(5) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-md-padding-x: k-spacing(5) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-lg-padding-x: k-spacing(5) !default;
 
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-button-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-button-md-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-button-lg-padding-y: k-spacing(2) !default;
 
 /// The font size of the small Button.
 /// @group button
@@ -93,11 +93,11 @@ $kendo-button-sizes: (
 
 /// The content spacing of the Button.
 /// @group button
-$kendo-button-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-button-spacing: k-spacing(2) !default;
 
 /// The offset of the focused Button.
 /// @group button
-$kendo-button-focus-offset: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-button-focus-offset: k-spacing(0.5) !default;
 /// The Outline width of the focused Button.
 /// @group button
 $kendo-button-focus-outline-width: 1px !default;
@@ -110,7 +110,7 @@ $kendo-button-focus-outline-style: solid !default;
 $kendo-button-flat-focus-offset: 1px !default;
 /// The outline width of the flat focused Button.
 /// @group button
-$kendo-button-flat-focus-outline-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-button-flat-focus-outline-width: k-spacing(0.5) !default;
 
 /// The offset of the link focused Button.
 /// @group button