@progress/kendo-theme-default 5.12.1-dev.2 → 5.12.1-dev.4

package/scss/draggable/_layout.scss

@@ -2,20 +2,20 @@
 
     // Layout
     .k-drag-clue {
-        @include border-radius( $drag-clue-border-radius );
-        padding: $drag-clue-padding-y $drag-clue-padding-x;
-        border-width: $drag-clue-border-width;
-        border-style: if( $drag-clue-border-width == null, null, solid );
+        @include border-radius( $kendo-drag-hint-border-radius );
+        padding: $kendo-drag-hint-padding-y $kendo-drag-hint-padding-x;
+        border-width: $kendo-drag-hint-border-width;
+        border-style: if( $kendo-drag-hint-border-width == null, null, solid );
         box-sizing: border-box;
-        font-size: $drag-clue-font-size;
-        font-family: $drag-clue-font-family;
-        line-height: $drag-clue-line-height;
+        font-size: $kendo-drag-hint-font-size;
+        font-family: $kendo-drag-hint-font-family;
+        line-height: $kendo-drag-hint-line-height;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
         white-space: nowrap;
-        opacity: $drag-clue-opacity;
+        opacity: $kendo-drag-hint-opacity;
         overflow: hidden;
         position: absolute;
         z-index: 20000;
@@ -31,7 +31,7 @@
     // Drop hint
     .k-drop-hint {
         display: flex;
-        gap: $drop-hint-arrow-spacing;
+        gap: $kendo-drop-hint-arrow-spacing;
         justify-content: space-between;
         align-items: center;
         position: absolute;
@@ -42,31 +42,31 @@
     .k-drop-hint-start,
     .k-drop-hint-end {
         flex-shrink: 0;
-        border-width: k-math-div( $drop-hint-arrow-size, 2 );
+        border-width: k-math-div( $kendo-drop-hint-arrow-size, 2 );
         border-style: solid;
         border-color: transparent;
     }
 
     .k-drop-hint-line {
         flex-grow: 1;
-        background-color: $drop-hint-bg;
+        background-color: $kendo-drop-hint-bg;
     }
 
     .k-drop-hint-h {
         .k-drop-hint-start {
-            border-left-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
-            border-left-color: $drop-hint-bg;
+            border-left-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-color: $kendo-drop-hint-bg;
             border-right-width: 0;
         }
 
         .k-drop-hint-line {
-            width: $drop-hint-line-h-width;
-            height: $drop-hint-line-h-height;
+            width: $kendo-drop-hint-line-h-width;
+            height: $kendo-drop-hint-line-h-height;
         }
 
         .k-drop-hint-end {
-            border-right-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
-            border-right-color: $drop-hint-bg;
+            border-right-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-color: $kendo-drop-hint-bg;
             border-left-width: 0;
         }
     }
@@ -75,19 +75,19 @@
         flex-direction: column;
 
         .k-drop-hint-start {
-            border-top-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
-            border-top-color: $drop-hint-bg;
+            border-top-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-color: $kendo-drop-hint-bg;
             border-bottom-width: 0;
         }
 
         .k-drop-hint-line {
-            width: $drop-hint-line-v-width;
-            height: $drop-hint-line-v-height;
+            width: $kendo-drop-hint-line-v-width;
+            height: $kendo-drop-hint-line-v-height;
         }
 
         .k-drop-hint-end {
-            border-bottom-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
-            border-bottom-color: $drop-hint-bg;
+            border-bottom-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-color: $kendo-drop-hint-bg;
             border-top-width: 0;
         }
     }

package/scss/draggable/_theme.scss

@@ -3,12 +3,12 @@
     // Theme
     .k-drag-clue {
         @include fill(
-            $drag-clue-text,
-            $drag-clue-bg,
-            $drag-clue-border,
-            $drag-clue-gradient
+            $kendo-drag-hint-text,
+            $kendo-drag-hint-bg,
+            $kendo-drag-hint-border,
+            $kendo-drag-hint-gradient
         );
-        @include box-shadow( $drag-clue-shadow );
+        @include box-shadow( $kendo-drag-hint-shadow );
     }
 
 }

package/scss/draggable/_variables.scss

@@ -1,27 +1,27 @@
 // Drag hint
-$drag-clue-padding-x: $kendo-padding-md-x !default;
-$drag-clue-padding-y: $kendo-padding-md-y !default;
-$drag-clue-border-width: 1px !default;
-$drag-clue-border-radius: $kendo-border-radius-md !default;
-$drag-clue-font-size: $font-size !default;
-$drag-clue-font-family: $font-family !default;
-$drag-clue-line-height: $line-height !default;
+$kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
+$kendo-drag-hint-padding-y: $kendo-padding-md-y !default;
+$kendo-drag-hint-border-width: 1px !default;
+$kendo-drag-hint-border-radius: $kendo-border-radius-md !default;
+$kendo-drag-hint-font-size: $kendo-font-size-md !default;
+$kendo-drag-hint-font-family: $kendo-font-family !default;
+$kendo-drag-hint-line-height: $kendo-line-height-md !default;
 
-$drag-clue-bg: $base-bg !default;
-$drag-clue-text: $base-text !default;
-$drag-clue-border: $base-border !default;
-$drag-clue-gradient: null !default;
-$drag-clue-shadow: null !default;
+$kendo-drag-hint-bg: $kendo-base-bg !default;
+$kendo-drag-hint-text: $kendo-base-text !default;
+$kendo-drag-hint-border: $kendo-base-border !default;
+$kendo-drag-hint-gradient: null !default;
+$kendo-drag-hint-shadow: null !default;
 
-$drag-clue-opacity: null !default;
+$kendo-drag-hint-opacity: null !default;
 
 
 // Drop hint
-$drop-hint-arrow-size: 8px !default;
-$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
-$drop-hint-line-h-width: 20px !default;
-$drop-hint-line-h-height: 1px !default;
-$drop-hint-line-v-width: $drop-hint-line-h-height !default;
-$drop-hint-line-v-height: $drop-hint-line-h-width !default;
+$kendo-drop-hint-arrow-size: 8px !default;
+$kendo-drop-hint-arrow-spacing: k-math-div( $kendo-drop-hint-arrow-size, 2 ) !default;
+$kendo-drop-hint-line-h-width: 20px !default;
+$kendo-drop-hint-line-h-height: 1px !default;
+$kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
+$kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
-$drop-hint-bg: $kendo-color-primary !default;
+$kendo-drop-hint-bg: $kendo-color-primary !default;

package/scss/drawer/_variables.scss

@@ -3,9 +3,9 @@ $kendo-drawer-bg: $kendo-component-bg !default;
 $kendo-drawer-text: $kendo-component-text !default;
 $kendo-drawer-border: $kendo-component-border !default;
 $kendo-drawer-border-width: 1px !default;
-$kendo-drawer-font-family: $font-family !default;
-$kendo-drawer-font-size: $font-size !default;
-$kendo-drawer-line-height: $line-height !default;
+$kendo-drawer-font-family: $kendo-font-family !default;
+$kendo-drawer-font-size: $kendo-font-size-md !default;
+$kendo-drawer-line-height: $kendo-line-height-md !default;
 $kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
 $kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
 
@@ -18,7 +18,7 @@ $kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;
 $kendo-drawer-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
 $kendo-drawer-item-font-size: 16px !default;
-$kendo-drawer-item-line-height: $line-height-lg !default;
+$kendo-drawer-item-line-height: $kendo-line-height-lg !default;
 
 $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 $kendo-drawer-item-level-count: 5 !default;

package/scss/dropdowntree/_layout.scss

@@ -8,11 +8,11 @@
         padding: 0;
 
         .k-check-all {
-            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x 0;
+            padding: $kendo-dropdowntree-popup-padding-y $kendo-dropdowntree-popup-padding-x 0;
         }
 
         .k-treeview {
-            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
+            padding: $kendo-dropdowntree-popup-padding-y $kendo-dropdowntree-popup-padding-x;
         }
     }
 

package/scss/dropdowntree/_variables.scss

@@ -1,3 +1,3 @@
 // Dropdowntree
-$dropdowntree-popup-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropdowntree-popup-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;

package/scss/dropzone/_layout.scss

@@ -2,20 +2,20 @@
 
     // Dropzone
     .k-external-dropzone {
-        height: $dropzone-min-height;
+        height: $kendo-dropzone-min-height;
         display: flex;
         flex-flow: row nowrap;
     }
 
     // Dropzpne inner
     .k-dropzone-inner {
-        padding: $dropzone-padding-y $dropzone-padding-x;
-        border-width: $dropzone-border-width;
+        padding: $kendo-dropzone-padding-y $kendo-dropzone-padding-x;
+        border-width: $kendo-dropzone-border-width;
         border-style: solid;
         box-sizing: border-box;
-        font-size: $dropzone-font-size;
-        font-family: $dropzone-font-family;
-        line-height: $dropzone-line-height;
+        font-size: $kendo-dropzone-font-size;
+        font-family: $kendo-dropzone-font-family;
+        line-height: $kendo-dropzone-line-height;
         flex: 1 1 auto;
         display: flex;
         flex-flow: column nowrap;
@@ -26,18 +26,18 @@
 
         > .k-icon,
         .k-dropzone-icon {
-            margin-bottom: $dropzone-icon-spacing;
-            font-size: $dropzone-icon-size;
+            margin-bottom: $kendo-dropzone-icon-spacing;
+            font-size: $kendo-dropzone-icon-size;
         }
 
         .k-dropzone-hint {
-            margin-bottom: $dropzone-hint-spacing;
-            font-size: $dropzone-hint-font-size;
+            margin-bottom: $kendo-dropzone-hint-spacing;
+            font-size: $kendo-dropzone-hint-font-size;
         }
 
         .k-dropzone-note {
-            margin-bottom: $dropzone-note-spacing;
-            font-size: $dropzone-note-font-size;
+            margin-bottom: $kendo-dropzone-note-spacing;
+            font-size: $kendo-dropzone-note-font-size;
         }
     }
 

package/scss/dropzone/_theme.scss

@@ -3,20 +3,20 @@
     // Dropzone
     .k-dropzone-inner {
         @include fill(
-            $dropzone-text,
-            $dropzone-bg,
-            $dropzone-border
+            $kendo-dropzone-text,
+            $kendo-dropzone-bg,
+            $kendo-dropzone-border
         );
 
         > .k-icon,
         .k-dropzone-icon {
-            color: $dropzone-icon-text;
+            color: $kendo-dropzone-icon-text;
         }
         .k-dropzone-hint {
-            color: $dropzone-hint-text;
+            color: $kendo-dropzone-hint-text;
         }
         .k-dropzone-note {
-            color: $dropzone-note-text;
+            color: $kendo-dropzone-note-text;
         }
     }
 
@@ -26,7 +26,7 @@
 
         .k-icon,
         .k-dropzone-icon {
-            color: $dropzone-icon-hover-text;
+            color: $kendo-dropzone-icon-hover-text;
         }
     }
 

package/scss/dropzone/_variables.scss

@@ -1,27 +1,27 @@
 // Dropzone
 
-$dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$dropzone-border-width: 1px !default;
-$dropzone-min-height: 220px !default;
+$kendo-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-border-width: 1px !default;
+$kendo-dropzone-min-height: 220px !default;
 
-$dropzone-font-family: $font-family !default;
-$dropzone-font-size: $font-size !default;
-$dropzone-line-height: $line-height !default;
+$kendo-dropzone-font-family: $kendo-font-family !default;
+$kendo-dropzone-font-size: $kendo-font-size-md !default;
+$kendo-dropzone-line-height: $kendo-line-height-md !default;
 
-$dropzone-bg: $base-bg !default;
-$dropzone-text: $base-text !default;
-$dropzone-border: $base-border !default;
+$kendo-dropzone-bg: $kendo-base-bg !default;
+$kendo-dropzone-text: $kendo-base-text !default;
+$kendo-dropzone-border: $kendo-base-border !default;
 
-$dropzone-icon-size: ( $kendo-icon-size * 3 ) !default;
-$dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
-$dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
-$dropzone-icon-hover-text: $kendo-color-primary !default;
+$kendo-dropzone-icon-size: ( $kendo-icon-size * 3 ) !default;
+$kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 4 ) !default;
+$kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
 
-$dropzone-hint-font-size: null !default;
-$dropzone-hint-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-$dropzone-hint-text: null !default;
+$kendo-dropzone-hint-font-size: null !default;
+$kendo-dropzone-hint-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-hint-text: null !default;
 
-$dropzone-note-font-size: $font-size-sm !default;
-$dropzone-note-spacing: null !default;
-$dropzone-note-text: $kendo-subtle-text !default;
+$kendo-dropzone-note-font-size: $kendo-font-size-sm !default;
+$kendo-dropzone-note-spacing: null !default;
+$kendo-dropzone-note-text: $kendo-subtle-text !default;

package/scss/editor/_variables.scss

@@ -1,8 +1,8 @@
 // Editor
 $kendo-editor-border-width: 1px !default;
-$kendo-editor-font-family: $font-family !default;
-$kendo-editor-font-size: $font-size !default;
-$kendo-editor-line-height: $line-height !default;
+$kendo-editor-font-family: $kendo-font-family !default;
+$kendo-editor-font-size: $kendo-font-size-md !default;
+$kendo-editor-line-height: $kendo-line-height-md !default;
 
 $kendo-editor-placeholder-text: $kendo-input-placeholder-text !default;
 $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;

package/scss/expansion-panel/_layout.scss

@@ -2,14 +2,14 @@
 
     // Base
     .k-expander {
-        border-width: $expander-border-width;
+        border-width: $kendo-expander-border-width;
         border-style: solid;
         box-sizing: border-box;
         overflow: hidden;
         outline: 0;
-        font-family: $expander-font-family;
-        font-size: $expander-font-size;
-        line-height: $expander-line-height;
+        font-family: $kendo-expander-font-family;
+        font-size: $kendo-expander-font-size;
+        line-height: $kendo-expander-line-height;
         display: flex;
         flex-direction: column;
         -webkit-touch-callout: none;
@@ -27,14 +27,14 @@
             // Expand / collapse icon
             .k-expander-indicator {
                 margin-left: 0;
-                margin-right: $expander-indicator-margin-x;
+                margin-right: $kendo-expander-indicator-margin-x;
             }
         }
     }
 
     // Header
     .k-expander-header {
-        padding: $expander-header-padding-y $expander-header-padding-x;
+        padding: $kendo-expander-header-padding-y $kendo-expander-header-padding-x;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -54,18 +54,18 @@
 
     // Expand / collapse icon
     .k-expander-indicator {
-        margin-left: $expander-indicator-margin-x;
+        margin-left: $kendo-expander-indicator-margin-x;
     }
 
     // Expander content
     .k-expander-content {
-        padding: $expander-content-padding-y $expander-content-padding-x;
+        padding: $kendo-expander-content-padding-y $kendo-expander-content-padding-x;
     }
 
     // Multiple expanders
     .k-expander + .k-expander.k-expanded,
     .k-expander.k-expanded + .k-expander {
-        margin-top: $expander-spacing-y;
+        margin-top: $kendo-expander-spacing-y;
     }
 
     .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {

package/scss/expansion-panel/_theme.scss

@@ -2,40 +2,40 @@
 
     .k-expander {
         @include fill(
-            $expander-text,
-            $expander-bg,
-            $expander-border
+            $kendo-expander-text,
+            $kendo-expander-bg,
+            $kendo-expander-border
         );
 
         &.k-focus {
-            @include focus-indicator( $expander-focus-shadow, true );
+            @include focus-indicator( $kendo-expander-focus-shadow, true );
         }
     }
 
     .k-expander-header {
         @include fill(
-            $expander-header-text,
-            $expander-header-bg,
-            $expander-header-border
+            $kendo-expander-header-text,
+            $kendo-expander-header-bg,
+            $kendo-expander-header-border
         );
         outline: none;
 
         &:hover,
         &.k-hover {
-            background-color: $expander-header-hover-bg;
+            background-color: $kendo-expander-header-hover-bg;
         }
 
         &.k-focus {
-            background-color: $expander-header-focus-bg;
-            @include focus-indicator( $expander-header-focus-shadow, true );
+            @include focus-indicator( $kendo-expander-header-focus-shadow, true );
+            background-color: $kendo-expander-header-focus-bg;
         }
     }
 
     .k-expander-title {
-        color: $expander-title-text;
+        color: $kendo-expander-title-text;
     }
 
     .k-expander-sub-title {
-        color: $expander-header-sub-title-text;
+        color: $kendo-expander-header-sub-title-text;
     }
 }

package/scss/expansion-panel/_variables.scss

@@ -1,33 +1,33 @@
 // Expansion panel
-$expander-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
-$expander-font-family: $font-family !default;
-$expander-font-size: $font-size !default;
-$expander-line-height: $line-height !default;
-$expander-border-width: 1px !default;
+$kendo-expander-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-expander-font-family: $kendo-font-family !default;
+$kendo-expander-font-size: $kendo-font-size-md !default;
+$kendo-expander-line-height: $kendo-line-height-md !default;
+$kendo-expander-border-width: 1px !default;
 
-$expander-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$expander-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-expander-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 
-$expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
 
-$expander-bg: $kendo-component-bg !default;
-$expander-text: $kendo-component-text !default;
-$expander-border: $kendo-component-border !default;
+$kendo-expander-bg: $kendo-component-bg !default;
+$kendo-expander-text: $kendo-component-text !default;
+$kendo-expander-border: $kendo-component-border !default;
 
-$expander-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$expander-header-bg: transparent !default;
-$expander-header-text: $expander-text !default;
-$expander-header-border: null !default;
+$kendo-expander-header-bg: transparent !default;
+$kendo-expander-header-text: $kendo-expander-text !default;
+$kendo-expander-header-border: null !default;
 
-$expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
+$kendo-expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
 
-$expander-header-focus-bg: null !default;
-$expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-expander-header-focus-bg: null !default;
+$kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$expander-title-text: $kendo-color-primary !default;
+$kendo-expander-title-text: $kendo-color-primary !default;
 
-$expander-header-sub-title-text: $kendo-subtle-text !default;
+$kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
 
-$expander-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;

package/scss/fab/_layout.scss

@@ -48,13 +48,13 @@
 
     // Sizes
     .k-fab-sm {
-        padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
+        padding: $kendo-fab-sm-padding-y $kendo-fab-sm-padding-x;
     }
     .k-fab-md {
         padding: $kendo-fab-padding-y $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
+        padding: $kendo-fab-lg-padding-y $kendo-fab-lg-padding-x;
     }
 
     // Items

package/scss/fab/_theme.scss

@@ -91,7 +91,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+            @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
         } @else {
             outline-style: solid;
             outline-width: 2px;

package/scss/fab/_variables.scss

@@ -9,27 +9,27 @@ $kendo-fab-border-radius: $kendo-border-radius-md !default;
 
 /// Font family of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-family: $font-family !default;
+$kendo-fab-font-family: $kendo-font-family !default;
 /// Font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: $font-size !default;
+$kendo-fab-font-size: $kendo-font-size-md !default;
 /// Line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: $line-height !default;
+$kendo-fab-line-height: $kendo-line-height-md !default;
 
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-fab-padding-x-sm: k-math-div( $kendo-fab-padding-x, 2 ) !default;
-$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
-$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+$kendo-fab-sm-padding-x: k-math-div( $kendo-fab-padding-x, 2 ) !default;
+$kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+$kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
 
 /// Vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
-$kendo-fab-padding-y-sm: k-math-div( $kendo-fab-padding-y, 2 ) !default;
-$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
-$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+$kendo-fab-sm-padding-y: k-math-div( $kendo-fab-padding-y, 2 ) !default;
+$kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+$kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
 
 /// FAB icon width.
 /// @group floating-action-button
@@ -62,7 +62,7 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-radius: 2px !default;
 /// Font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: $font-size-xs !default;
+$kendo-fab-item-text-font-size: $kendo-font-size-xs !default;
 /// Line height of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-line-height: 1.2 !default;