@progress/kendo-theme-fluent 5.12.1-dev.2 → 5.12.1-dev.3

package/scss/split-button/_variables.scss

@@ -3,15 +3,15 @@
 
 /// Vertical padding of the split button arrow.
 /// @group split-button
-$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
-$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
-$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
+$kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
+$kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
+$kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
 
 /// Horizontal padding of the split button arrow.
 /// @group split-button
-$kendo-split-button-arrow-padding-x-sm: $kendo-split-button-arrow-padding-y-sm !default;
-$kendo-split-button-arrow-padding-x-md: $kendo-split-button-arrow-padding-y-md !default;
-$kendo-split-button-arrow-padding-x-lg: $kendo-split-button-arrow-padding-y-lg !default;
+$kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-y !default;
+$kendo-split-button-md-arrow-padding-x: $kendo-split-button-md-arrow-padding-y !default;
+$kendo-split-button-lg-arrow-padding-x: $kendo-split-button-lg-arrow-padding-y !default;
 
 /// Height of the split button arrow delimiter.
 /// @group split-button
@@ -26,7 +26,7 @@ $kendo-split-button-arrow-delimiter-bg: get-theme-color-var( neutral-60 ) !defau
 /// Sizes map for the split button.
 /// @group split-button
 $kendo-split-button-sizes: (
-    sm: $kendo-split-button-arrow-padding-y-sm,
-    md: $kendo-split-button-arrow-padding-y-md,
-    lg: $kendo-split-button-arrow-padding-y-lg
+    sm: $kendo-split-button-sm-arrow-padding-y,
+    md: $kendo-split-button-md-arrow-padding-y,
+    lg: $kendo-split-button-lg-arrow-padding-y
 ) !default;

package/scss/spreadsheet/_layout.scss

@@ -52,7 +52,7 @@
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: var( --kendo-toolbar-padding-y-md, #{$kendo-toolbar-padding-y-md} );
+        padding: var( --kendo-toolbar-md-padding-y, #{$kendo-toolbar-md-padding-y} );
         display: inline-flex;
         flex-direction: row;
         position: absolute;
@@ -149,9 +149,9 @@
         }
 
         .k-spreadsheet-formula-input {
-            padding-inline: var( --kendo-input-padding-x-md, #{$kendo-input-padding-x-md} );
-            padding-block: var( --kendo-input-padding-y-md, #{$kendo-input-padding-y-md} );
-            line-height: var( --kendo-input-line-height-md, #{$kendo-input-line-height-md} );
+            padding-inline: var( --kendo-input-md-padding-x, #{$kendo-input-md-padding-x} );
+            padding-block: var( --kendo-input-md-padding-y, #{$kendo-input-md-padding-y} );
+            line-height: var( --kendo-input-md-line-height, #{$kendo-input-md-line-height} );
 
             &.k-spreadsheet-array-formula {
                 &::before {
@@ -190,8 +190,8 @@
         min-width: 100px;
 
         .k-item {
-            padding-inline: var( --kendo-list-item-padding-x-md, #{$kendo-list-item-padding-x-md} );
-            padding-block: var( --kendo-list-item-padding-y-md, #{$kendo-list-item-padding-y-md} );
+            padding-inline: var( --kendo-list-md-item-padding-x, #{$kendo-list-md-item-padding-x} );
+            padding-block: var( --kendo-list-md-item-padding-y, #{$kendo-list-md-item-padding-y} );
         }
     }
     .k-syntax-func,
@@ -588,7 +588,7 @@
                 color: inherit;
             }
             .k-link {
-                padding-inline-start: var( --filter-menu-padding-left, #{$filter-menu-padding-left} );
+                padding-inline-start: var( --filter-menu-padding-left, #{$kendo-filter-menu-padding-left} );
             }
             .k-icon {
                 margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-md-y} ) );
@@ -624,8 +624,8 @@
         }
         .k-details-summary,
         .k-columnmenu-item {
-            padding-block: var( --kendo-menu-popup-item-padding-y-md, #{$kendo-menu-popup-item-padding-y-md} );
-            padding-inline: var( --kendo-menu-popup-item-padding-x-md, #{$kendo-menu-popup-item-padding-x-md} );
+            padding-block: var( --kendo-menu-popup-md-item-padding-y, #{$kendo-menu-popup-md-item-padding-y} );
+            padding-inline: var( --kendo-menu-popup-md-item-padding-x, #{$kendo-menu-popup-md-item-padding-x} );
             display: flex;
             align-items: center;
             cursor: pointer;

package/scss/spreadsheet/_variables.scss

@@ -39,7 +39,7 @@ $kendo-spreadsheet-sheets-remove-inline-end:  map.get( $kendo-spacing, 2 ) !defa
 
 /// Left padding of the spreadsheet sheets menu.
 /// @group spreadsheet
-$filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) ) !default;
+$kendo-filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) ) !default;
 
 /// Background color of the spreadsheet.
 /// @group spreadsheet

package/scss/table/_layout.scss

@@ -70,7 +70,7 @@
 
     // Table header
     .k-table-header {
-        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
         border-block-start-width: 0;
         border-block-end-width: 1px;
         border-inline-width: 0;
@@ -223,7 +223,7 @@
 
     // Table footer
     .k-table-footer {
-        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
         border-block-start-width: 1px;
         border-block-end-width: 0;
         border-inline-width: 0;

package/scss/table/_variables.scss

@@ -19,23 +19,23 @@ $kendo-table-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// @group table
 $kendo-table-cell-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
-$kendo-table-cell-padding-x-sm: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-cell-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-table-sm-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-sm-cell-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
-$kendo-table-cell-padding-x-md: $kendo-table-cell-padding-x !default;
-$kendo-table-cell-padding-y-md: $kendo-table-cell-padding-y !default;
+$kendo-table-md-cell-padding-x: $kendo-table-cell-padding-x !default;
+$kendo-table-md-cell-padding-y: $kendo-table-cell-padding-y !default;
 
-$kendo-table-cell-padding-x-lg: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-cell-padding-y-lg: map.get( $kendo-spacing, 3.5 ) !default;
+$kendo-table-lg-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-lg-cell-padding-y: map.get( $kendo-spacing, 3.5 ) !default;
 
-$kendo-table-cell-padding-x-sm: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-cell-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-table-sm-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-sm-cell-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
-$kendo-table-cell-padding-x-md: $kendo-table-cell-padding-x !default;
-$kendo-table-cell-padding-y-md: $kendo-table-cell-padding-y !default;
+$kendo-table-md-cell-padding-x: $kendo-table-cell-padding-x !default;
+$kendo-table-md-cell-padding-y: $kendo-table-cell-padding-y !default;
 
-$kendo-table-cell-padding-x-lg: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-cell-padding-y-lg: map.get( $kendo-spacing, 3.5 ) !default;
+$kendo-table-lg-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-lg-cell-padding-y: map.get( $kendo-spacing, 3.5 ) !default;
 
 /// Font weight of the table header cells.
 /// @group table
@@ -47,29 +47,29 @@ $kendo-table-sizes: (
     sm: (
         font-size: var( --kendo-font-size, inherit ),
         line-height: var( --kendo-line-height, inherit ),
-        cell-padding-x: $kendo-table-cell-padding-x-sm,
-        cell-padding-y: $kendo-table-cell-padding-y-sm,
-        group-label-padding-x: $kendo-list-item-group-label-padding-x-sm,
-        group-label-padding-y: $kendo-list-item-group-label-padding-y-sm,
-        group-label-font-size: $kendo-list-item-group-label-font-size-sm
+        cell-padding-x: $kendo-table-sm-cell-padding-x,
+        cell-padding-y: $kendo-table-sm-cell-padding-y,
+        group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
+        group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
+        group-label-font-size: $kendo-list-item-group-label-sm-font-size
     ),
     md: (
         font-size: var( --kendo-font-size, inherit ),
         line-height: var( --kendo-line-height, inherit ),
-        cell-padding-x: $kendo-table-cell-padding-x-md,
-        cell-padding-y: $kendo-table-cell-padding-y-md,
-        group-label-padding-x: $kendo-list-item-group-label-padding-x-md,
-        group-label-padding-y: $kendo-list-item-group-label-padding-y-md,
-        group-label-font-size: $kendo-list-item-group-label-font-size-md
+        cell-padding-x: $kendo-table-md-cell-padding-x,
+        cell-padding-y: $kendo-table-md-cell-padding-y,
+        group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
+        group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
+        group-label-font-size: $kendo-list-item-group-label-md-font-size
     ),
     lg: (
         font-size: var( --kendo-font-size, inherit ),
         line-height: var( --kendo-line-height, inherit ),
-        cell-padding-x: $kendo-table-cell-padding-x-lg,
-        cell-padding-y: $kendo-table-cell-padding-y-lg,
-        group-label-padding-x: $kendo-list-item-group-label-padding-x-lg,
-        group-label-padding-y: $kendo-list-item-group-label-padding-y-lg,
-        group-label-font-size: $kendo-list-item-group-label-font-size-lg
+        cell-padding-x: $kendo-table-lg-cell-padding-x,
+        cell-padding-y: $kendo-table-lg-cell-padding-y,
+        group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
+        group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
+        group-label-font-size: $kendo-list-item-group-label-lg-font-size
     )
 ) !default;
 

package/scss/tilelayout/_layout.scss

@@ -1,10 +1,10 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-tilelayout--layout() {
+@mixin kendo-tile-layout--layout() {
 
     .k-tilelayout {
-        border-width: var( --kendo-tilelayout-border-width, #{$kendo-tilelayout-border-width} );
+        border-width: var( --kendo-tile-layout-border-width, #{$kendo-tile-layout-border-width} );
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -19,8 +19,8 @@
     }
 
     .k-layout-item-hint {
-        @include border-radius( var( --kendo-tilelayout-hint-border-radius, #{$kendo-tilelayout-hint-border-radius} ) );
-        border-width: var( --kendo-tilelayout-hint-border-width, #{$kendo-tilelayout-hint-border-width} );
+        @include border-radius( var( --kendo-tile-layout-hint-border-radius, #{$kendo-tile-layout-hint-border-radius} ) );
+        border-width: var( --kendo-tile-layout-hint-border-width, #{$kendo-tile-layout-hint-border-width} );
         border-style: solid;
         position: relative;
 

package/scss/tilelayout/_theme.scss

@@ -1,18 +1,18 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-tilelayout--theme() {
+@mixin kendo-tile-layout--theme() {
 
     .k-tilelayout {
         @include fill(
-            $bg: var( --kendo-tilelayout-bg, #{$kendo-tilelayout-bg} )
+            $bg: var( --kendo-tile-layout-bg, #{$kendo-tile-layout-bg} )
         );
     }
 
     .k-layout-item-hint {
         @include fill(
-            $bg: var( --kendo-tilelayout-hint-bg, #{$kendo-tilelayout-hint-bg} ),
-            $border: var( --kendo-tilelayout-hint-border, #{$kendo-tilelayout-hint-border} )
+            $bg: var( --kendo-tile-layout-hint-bg, #{$kendo-tile-layout-hint-bg} ),
+            $border: var( --kendo-tile-layout-hint-border, #{$kendo-tile-layout-hint-border} )
         );
     }
 }

package/scss/tilelayout/_variables.scss

@@ -4,20 +4,20 @@
 
 /// Width of the border around the tilelayout.
 /// @group tilelayout
-$kendo-tilelayout-border-width: 0px !default;
+$kendo-tile-layout-border-width: 0px !default;
 /// Background color of the tilelayout.
 /// @group tilelayout
-$kendo-tilelayout-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-tile-layout-bg: get-theme-color-var( neutral-10 ) !default;
 
 /// Width of the border around the tilelayout hint.
 /// @group tilelayout
-$kendo-tilelayout-hint-border-width: 1px !default;
+$kendo-tile-layout-hint-border-width: 1px !default;
 /// Color of the border around the tilelayout hint.
 /// @group tilelayout
-$kendo-tilelayout-hint-border: var( --kendo-component-border, initial ) !default;
+$kendo-tile-layout-hint-border: var( --kendo-component-border, initial ) !default;
 /// Radius of the border around the tilelayout hint.
 /// @group tilelayout
-$kendo-tilelayout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
+$kendo-tile-layout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
 /// Background color of the tilelayout hint.
 /// @group tilelayout
-$kendo-tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;

package/scss/tilelayout/index.scss

@@ -19,7 +19,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin tilelayout-styles() {
     @include module.render( "tilelayout" ) {
-        @include kendo-tilelayout--layout();
-        @include kendo-tilelayout--theme();
+        @include kendo-tile-layout--layout();
+        @include kendo-tile-layout--theme();
     }
 }

package/scss/timeselector/_layout.scss

@@ -39,7 +39,7 @@
 
         .k-title,
         .k-time-selector-header-title {
-            padding: var( --kendo-button-padding-y-md, $kendo-button-padding-y-md ) var( --kendo-button-padding-x-md, $kendo-button-padding-x-md );
+            padding: var( --kendo-button-md-padding-y, $kendo-button-md-padding-y ) var( --kendo-button-md-padding-x, $kendo-button-md-padding-x );
             font-weight: bold;
             display: inline-block;
         }

package/scss/timeselector/_variables.scss

@@ -92,27 +92,27 @@ $kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default;
 
 /// Font sizes of the time-selector.
 /// @group time-selector
-$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
-$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
-$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
+$kendo-time-selector-sm-font-size: $kendo-list-sm-font-size !default;
+$kendo-time-selector-md-font-size: $kendo-list-md-font-size !default;
+$kendo-time-selector-lg-font-size: $kendo-list-lg-font-size !default;
 
-/// Line heights used along with $font-size.
+/// Line heights used along with $kendo-font-size.
 /// @group time-selector
-$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
-$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
-$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
+$kendo-time-selector-sm-line-height: $kendo-list-sm-line-height !default;
+$kendo-time-selector-md-line-height: $kendo-list-md-line-height !default;
+$kendo-time-selector-lg-line-height: $kendo-list-lg-line-height !default;
 
 ///  Horizontal padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
-$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
-$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
+$kendo-time-selector-sm-list-item-padding-x: $kendo-list-sm-item-padding-x !default;
+$kendo-time-selector-md-list-item-padding-x: $kendo-list-md-item-padding-x !default;
+$kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !default;
 
 ///  Vertical padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
-$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
+$kendo-time-selector-sm-list-item-padding-y: $kendo-list-sm-item-padding-y !default;
+$kendo-time-selector-md-list-item-padding-y: $kendo-list-md-item-padding-y !default;
+$kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
 
 /// Sizes map for the time-selector.
 /// @group time-selector

package/scss/toolbar/_layout.scss

@@ -118,25 +118,25 @@
     }
     // Remove once we decide to not size empty containers
     .k-toolbar-sm::before {
-        height: var( --kendo-button-inner-calc-size-sm, #{$kendo-button-inner-calc-size-sm} );
+        height: var( --kendo-button-sm-inner-calc-size, #{$kendo-button-sm-inner-calc-size} );
     }
     .k-toolbar-md::before {
-        height: var( --kendo-button-inner-calc-size-md, #{$kendo-button-inner-calc-size-md} );
+        height: var( --kendo-button-md-inner-calc-size, #{$kendo-button-md-inner-calc-size} );
     }
     .k-toolbar-lg::before {
-        height: var( --kendo-button-inner-calc-size-lg, #{$kendo-button-inner-calc-size-lg} );
+        height: var( --kendo-button-lg-inner-calc-size, #{$kendo-button-lg-inner-calc-size} );
     }
 
     // sass-lint:disable class-name-format
     .k-floating-toolbar,
     .editorToolbarWindow.k-window-content {
-        padding-inline: var( --kendo-toolbar-padding-x-md, #{$kendo-toolbar-padding-x-md} ) !important; // sass-lint:disable-line no-important
-        padding-block: var( --kendo-toolbar-padding-y-md, #{$kendo-toolbar-padding-y-md} ) !important; // sass-lint:disable-line no-important
+        padding-inline: var( --kendo-toolbar-md-padding-x, #{$kendo-toolbar-md-padding-x} ) !important; // sass-lint:disable-line no-important
+        padding-block: var( --kendo-toolbar-md-padding-y, #{$kendo-toolbar-md-padding-y} ) !important; // sass-lint:disable-line no-important
         border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
         border-style: solid;
         display: flex;
         flex-flow: row nowrap;
-        gap: var( --kendo-toolbar-spacing-md, #{$kendo-toolbar-spacing-md} );
+        gap: var( --kendo-toolbar-md-spacing, #{$kendo-toolbar-md-spacing} );
         align-items: center;
 
         .k-toolbar {
@@ -160,8 +160,8 @@
     // Remove once the Overflow Popup uses
     // the proper Menu rendering in all suites.
     .k-overflow-container {
-        font-size: var( --kendo-menu-popup-font-size-md, inherit );
-        line-height: var( --kendo-menu-popup-line-height-md, normal );
+        font-size: var( --kendo-menu-popup-md-font-size, inherit );
+        line-height: var( --kendo-menu-popup-md-line-height, normal );
 
         > .k-item {
             border-color: inherit;
@@ -178,8 +178,8 @@
 
         // Button
         .k-overflow-button {
-            padding-inline: var( --kendo-menu-popup-item-padding-x-md, 8px );
-            padding-block: var( --kendo-menu-popup-item-padding-y-md, 4px );
+            padding-inline: var( --kendo-menu-popup-md-item-padding-x, 8px );
+            padding-block: var( --kendo-menu-popup-md-item-padding-y, 4px );
             width: 100%;
             height: auto;
             border-width: 0;

package/scss/toolbar/_variables.scss

@@ -3,21 +3,21 @@
 
 /// The horizontal padding of the toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-x-sm: map.get( $kendo-spacing, 1 ) !default;
-$kendo-toolbar-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-padding-x-lg: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-sm-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// The vertical padding of the toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-y-sm: map.get( $kendo-spacing, 1 ) !default;
-$kendo-toolbar-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-md-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// The spacing between the toolbar tools.
 /// @group toolbar
-$kendo-toolbar-spacing-sm: map.get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-spacing-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-spacing-lg: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-sm-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Width of the border around the toolbar.
 /// @group toolbar
@@ -65,18 +65,18 @@ $kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !def
 /// @group toolbar
 $kendo-toolbar-sizes: (
     sm: (
-        padding-x: $kendo-toolbar-padding-x-sm,
-        padding-y: $kendo-toolbar-padding-y-sm,
-        spacing: $kendo-toolbar-spacing-sm
+        padding-x: $kendo-toolbar-sm-padding-x,
+        padding-y: $kendo-toolbar-sm-padding-y,
+        spacing: $kendo-toolbar-sm-spacing
     ),
     md: (
-        padding-x: $kendo-toolbar-padding-x-md,
-        padding-y: $kendo-toolbar-padding-y-md,
-        spacing: $kendo-toolbar-spacing-md
+        padding-x: $kendo-toolbar-md-padding-x,
+        padding-y: $kendo-toolbar-md-padding-y,
+        spacing: $kendo-toolbar-md-spacing
     ),
     lg: (
-        padding-x: $kendo-toolbar-padding-x-lg,
-        padding-y: $kendo-toolbar-padding-y-lg,
-        spacing: $kendo-toolbar-spacing-lg
+        padding-x: $kendo-toolbar-lg-padding-x,
+        padding-y: $kendo-toolbar-lg-padding-y,
+        spacing: $kendo-toolbar-lg-spacing
     )
 ) !default;

package/scss/treeview/_variables.scss

@@ -6,28 +6,28 @@
 $kendo-treeview-font-family: var( --kendo-font-family, normal ) !default;
 /// Font size of the treeview component.
 /// @group treeview
-$kendo-treeview-font-size-sm: var( --kendo-font-size, inherit ) !default;
-$kendo-treeview-font-size-md: var( --kendo-font-size, inherit ) !default;
-$kendo-treeview-font-size-lg: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-lg-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the treeview component.
 /// @group treeview
-$kendo-treeview-line-height-sm: var( --kendo-line-height, normal ) !default;
-$kendo-treeview-line-height-md: var( --kendo-line-height, normal ) !default;
-$kendo-treeview-line-height-lg: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-lg-line-height: var( --kendo-line-height, normal ) !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: map.get( $kendo-spacing, 4 ) !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-sm-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-md-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-treeview-item-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-treeview-sm-item-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-treeview-md-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0 !default;
@@ -47,22 +47,22 @@ $kendo-treeview-filter-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $kendo-treeview-font-size-sm,
-        line-height: $kendo-treeview-line-height-sm,
-        item-padding-x: $kendo-treeview-item-padding-x-sm,
-        item-padding-y: $kendo-treeview-item-padding-y-sm
+        font-size: $kendo-treeview-sm-font-size,
+        line-height: $kendo-treeview-sm-line-height,
+        item-padding-x: $kendo-treeview-sm-item-padding-x,
+        item-padding-y: $kendo-treeview-sm-item-padding-y
     ),
     md: (
-        font-size: $kendo-treeview-font-size-md,
-        line-height: $kendo-treeview-line-height-md,
-        item-padding-x: $kendo-treeview-item-padding-x-md,
-        item-padding-y: $kendo-treeview-item-padding-y-md
+        font-size: $kendo-treeview-md-font-size,
+        line-height: $kendo-treeview-md-line-height,
+        item-padding-x: $kendo-treeview-md-item-padding-x,
+        item-padding-y: $kendo-treeview-md-item-padding-y
     ),
     lg: (
-        font-size: $kendo-treeview-font-size-lg,
-        line-height: $kendo-treeview-line-height-lg,
-        item-padding-x: $kendo-treeview-item-padding-x-lg,
-        item-padding-y: $kendo-treeview-item-padding-y-lg
+        font-size: $kendo-treeview-lg-font-size,
+        line-height: $kendo-treeview-lg-line-height,
+        item-padding-x: $kendo-treeview-lg-item-padding-x,
+        item-padding-y: $kendo-treeview-lg-item-padding-y
     )
 ) !default;
 

package/scss/typography/_layout.scss

@@ -90,13 +90,13 @@
     }
 
     // Display
-    @each $display, $display-props in $kendo-display {
-        $_font-size: map.get( $display-props, font-size );
-        $_font-family: map.get( $display-props, font-family );
-        $_line-height: map.get( $display-props, line-height );
-        $_font-weight: map.get( $display-props, font-weight );
-        $_letter-spacing: map.get( $display-props, letter-spacing );
-        $_margin: map.get( $display-props, margin );
+    @each $display, $kendo-display-props in $kendo-display {
+        $_font-size: map.get( $kendo-display-props, font-size );
+        $_font-family: map.get( $kendo-display-props, font-family );
+        $_line-height: map.get( $kendo-display-props, line-height );
+        $_font-weight: map.get( $kendo-display-props, font-weight );
+        $_letter-spacing: map.get( $kendo-display-props, letter-spacing );
+        $_margin: map.get( $kendo-display-props, margin );
 
         .k-display-#{$display} {
             @include typography(

package/scss/upload/_variables.scss

@@ -76,7 +76,7 @@ $kendo-upload-icon-color: var( --kendo-subtle-text, inherit ) !default;
 
 /// Font size of the file icons in the upload.
 /// @group upload
-$kendo-upload-group-icon-size: var( --kendo-icon-size-lg, 2rem ) !default;
+$kendo-upload-group-icon-size: var( --kendo-icon-size-xxl, 2rem ) !default;
 
 /// Thickness of the upload progress bar.
 /// @group upload

package/scss/window/_variables.scss

@@ -60,10 +60,10 @@ $kendo-window-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+$kendo-window-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
 /// Vertical padding of the window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+$kendo-window-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
 /// Width of the top border of the window action buttons.
 /// @group window
 $kendo-window-buttongroup-border-width: 0 !default;