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

package/scss/loader/_variables.scss

@@ -8,21 +8,21 @@ $kendo-loader-segment-border-radius: 50% !default;
 
 /// Size of the loader segment.
 /// @group loader
-$kendo-loader-segment-size-sm: map.get( $kendo-spacing, 1 ) !default;
-$kendo-loader-segment-size-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-loader-segment-size-lg: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-sm-segment-size: map.get( $kendo-spacing, 1 ) !default;
+$kendo-loader-md-segment-size: map.get( $kendo-spacing, 2 ) !default;
+$kendo-loader-lg-segment-size: map.get( $kendo-spacing, 4 ) !default;
 
 /// Horizontal padding of the loader.
 /// @group loader
-$kendo-loader-padding-x-sm: math.div( $kendo-loader-segment-size-sm, 2 ) !default;
-$kendo-loader-padding-x-md: math.div( $kendo-loader-segment-size-md, 2 ) !default;
-$kendo-loader-padding-x-lg: math.div( $kendo-loader-segment-size-lg, 2 ) !default;
+$kendo-loader-sm-padding-x: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-md-padding-x: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-lg-padding-x: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
 
 /// Vertical padding of the loader.
 /// @group loader
-$kendo-loader-padding-y-sm: math.div( $kendo-loader-segment-size-sm, 2 ) !default;
-$kendo-loader-padding-y-md: math.div( $kendo-loader-segment-size-md, 2 ) !default;
-$kendo-loader-padding-y-lg: math.div( $kendo-loader-segment-size-lg, 2 ) !default;
+$kendo-loader-sm-padding-y: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-md-padding-y: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-lg-padding-y: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
 
 /// Equilateral height of the loader.
 /// @group loader
@@ -30,27 +30,27 @@ $kendo-loader-equilateral-height: .8660254038 !default;
 
 /// Width of the spinner-3 loader.
 /// @group loader
-$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
-$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
-$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
+$kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
 
 /// Height of the spinner-3 loader.
 /// @group loader
-$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $kendo-loader-equilateral-height ) !default;
-$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $kendo-loader-equilateral-height ) !default;
-$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $kendo-loader-equilateral-height ) !default;
 
 /// Width of the spinner-4 loader.
 /// @group loader
-$kendo-loader-spinner-4-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
-$kendo-loader-spinner-4-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
-$kendo-loader-spinner-4-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
+$kendo-loader-sm-spinner-4-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-4-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-4-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
 
 /// Height of the spinner-4 loader.
 /// @group loader
-$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
-$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
-$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+$kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;
 
 /// Border width of the container panel.
 /// @group loader
@@ -70,27 +70,27 @@ $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
 /// Horizontal padding of the loader container.
 /// @group loader
-$kendo-loader-container-padding-x-sm: map.get( $kendo-spacing, 4 ) !default;
-$kendo-loader-container-padding-x-md: map.get( $kendo-spacing, 5 ) !default;
-$kendo-loader-container-padding-x-lg: map.get( $kendo-spacing, 6 ) !default;
+$kendo-loader-sm-container-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-md-container-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-loader-lg-container-padding-x: map.get( $kendo-spacing, 6 ) !default;
 
 /// Vertical padding of the loader container.
 /// @group loader
-$kendo-loader-container-padding-y-sm: map.get( $kendo-spacing, 4 ) !default;
-$kendo-loader-container-padding-y-md: map.get( $kendo-spacing, 5 ) !default;
-$kendo-loader-container-padding-y-lg: map.get( $kendo-spacing, 6 ) !default;
+$kendo-loader-sm-container-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-md-container-padding-y: map.get( $kendo-spacing, 5 ) !default;
+$kendo-loader-lg-container-padding-y: map.get( $kendo-spacing, 6 ) !default;
 
 /// Gap of the loader container.
 /// @group loader
-$kendo-loader-container-gap-sm: map.get( $kendo-spacing, 1 ) !default;
-$kendo-loader-container-gap-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-loader-container-gap-lg: map.get( $kendo-spacing, 3 ) !default;
+$kendo-loader-sm-container-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-loader-md-container-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-loader-lg-container-gap: map.get( $kendo-spacing, 3 ) !default;
 
 /// Font size of the loader container.
 /// @group loader
-$kendo-loader-container-font-size-sm: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-loader-container-font-size-md: var( --kendo-font-size-md, inherit ) !default;
-$kendo-loader-container-font-size-lg: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-loader-md-container-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// Theme variations for the loader.
 $kendo-loader-brand-colors: (

package/scss/map/_variables.scss

@@ -62,7 +62,7 @@ $kendo-map-navigator-border: get-theme-color-var( neutral-110 ) !default;
 $kendo-map-zoom-control-margin: map.get( $kendo-spacing, 4 ) !default;
 /// Map zoom control horizontal padding.
 /// @group map
-$kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y-md !default;
+$kendo-map-zoom-control-button-padding-x: $kendo-button-md-padding-y !default;
 /// Map zoom control vertical padding.
 /// @group map
 $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;
@@ -82,7 +82,7 @@ $kendo-map-attribution-bg: $kendo-color-white !default;
 
 /// Map marker size.
 /// @group map
-$kendo-map-marker-size: var( --kendo-icon-size-lg, 1rem ) !default;
+$kendo-map-marker-size: var( --kendo-icon-size-xxl, 2rem ) !default;
 /// Map marker fill color.
 /// @group map
 $kendo-map-marker-fill: get-theme-color-var( primary-100 ) !default;

package/scss/mediaplayer/_layout.scss

@@ -1,17 +1,17 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-mediaplayer--layout() {
+@mixin kendo-media-player--layout() {
 
     // Base
     .k-mediaplayer {
-        border-width: var( --kendo-mediaplayer-border-width, #{$kendo-mediaplayer-border-width} );
+        border-width: var( --kendo-media-player-border-width, #{$kendo-media-player-border-width} );
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: var( --kendo-mediaplayer-font-family, #{$kendo-mediaplayer-font-family} );
-        font-size: var( --kendo-mediaplayer-font-size, #{$kendo-mediaplayer-font-size} );
-        line-height: var( --kendo-mediaplayer-line-height, #{$kendo-mediaplayer-line-height} );
+        font-family: var( --kendo-media-player-font-family, #{$kendo-media-player-font-family} );
+        font-size: var( --kendo-media-player-font-size, #{$kendo-media-player-font-size} );
+        line-height: var( --kendo-media-player-line-height, #{$kendo-media-player-line-height} );
         display: block;
         position: relative;
         -webkit-touch-callout: none;
@@ -40,8 +40,8 @@
 
     // Title bar
     .k-mediaplayer-titlebar {
-        padding-inline: var( --kendo-mediaplayer-titlebar-padding-x, #{$kendo-mediaplayer-titlebar-padding-x} );
-        padding-block: var( --kendo-mediaplayer-titlebar-padding-y, #{$kendo-mediaplayer-titlebar-padding-y} );
+        padding-inline: var( --kendo-media-player-titlebar-padding-x, #{$kendo-media-player-titlebar-padding-x} );
+        padding-block: var( --kendo-media-player-titlebar-padding-y, #{$kendo-media-player-titlebar-padding-y} );
         position: absolute;
         z-index: 2;
         top: 0;

package/scss/mediaplayer/_theme.scss

@@ -1,29 +1,29 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-mediaplayer--theme() {
+@mixin kendo-media-player--theme() {
 
     .k-mediaplayer {
         @include fill(
-            var( --kendo-mediaplayer-text, #{$kendo-mediaplayer-text} ),
-            var( --kendo-mediaplayer-bg, #{$kendo-mediaplayer-bg} ),
-            var( --kendo-mediaplayer-border, #{$kendo-mediaplayer-border} )
+            var( --kendo-media-player-text, #{$kendo-media-player-text} ),
+            var( --kendo-media-player-bg, #{$kendo-media-player-bg} ),
+            var( --kendo-media-player-border, #{$kendo-media-player-border} )
         );
     }
 
 
     .k-mediaplayer-overlay {
-        background-color: var( --kendo-mediaplayer-overlay-bg, #{$kendo-mediaplayer-overlay-bg} );
+        background-color: var( --kendo-media-player-overlay-bg, #{$kendo-media-player-overlay-bg} );
     }
 
 
     .k-mediaplayer-titlebar {
-        color: var( --kendo-mediaplayer-titlebar-text, #{$kendo-mediaplayer-titlebar-text} );
-        background-color: var( --kendo-mediaplayer-titlebar-bg, #{$kendo-mediaplayer-titlebar-bg} );
+        color: var( --kendo-media-player-titlebar-text, #{$kendo-media-player-titlebar-text} );
+        background-color: var( --kendo-media-player-titlebar-bg, #{$kendo-media-player-titlebar-bg} );
     }
 
 
     .k-mediaplayer-quality {
-        border-color: var( --kendo-mediaplayer-quality-border, #{$kendo-mediaplayer-quality-border} );
+        border-color: var( --kendo-media-player-quality-border, #{$kendo-media-player-quality-border} );
     }
 }

package/scss/mediaplayer/_variables.scss

@@ -3,44 +3,44 @@
 
 /// Border width of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-border-width: 1px !default;
+$kendo-media-player-border-width: 1px !default;
 /// Font family of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Background color of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-media-player-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-text: var( --kendo-component-text, inherit ) !default;
+$kendo-media-player-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the mediaplayer.
 /// @group mediaplayer
-$kendo-mediaplayer-border: var( --kendo-component-border, inherit ) !default;
+$kendo-media-player-border: var( --kendo-component-border, inherit ) !default;
 
 /// Mediaplayer overlay background color.
 /// @group mediaplayer
-$kendo-mediaplayer-overlay-bg: get-theme-color-var( neutral-130 ) !default;
+$kendo-media-player-overlay-bg: get-theme-color-var( neutral-130 ) !default;
 
 /// Mediaplayer quality button border color.
 /// @group mediaplayer
-$kendo-mediaplayer-quality-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-media-player-quality-border: get-theme-color-var( neutral-110 ) !default;
 
 /// Mediaplayer titlebar horizontal padding.
 /// @group mediaplayer
-$kendo-mediaplayer-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Mediaplayer titlebar vertical padding.
 /// @group mediaplayer
-$kendo-mediaplayer-titlebar-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Mediaplayer titlebar background color.
 /// @group mediaplayer
-$kendo-mediaplayer-titlebar-bg: rgba( $kendo-color-black, .4 ) !default;
+$kendo-media-player-titlebar-bg: rgba( $kendo-color-black, .4 ) !default;
 /// Mediaplayer titlebar text color.
 /// @group mediaplayer
-$kendo-mediaplayer-titlebar-text: $kendo-mediaplayer-bg !default;
+$kendo-media-player-titlebar-text: $kendo-media-player-bg !default;

package/scss/mediaplayer/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin mediaplayer-styles() {
     @include module.render( "mediaplayer" ) {
-        @include kendo-mediaplayer--layout();
-        @include kendo-mediaplayer--theme();
+        @include kendo-media-player--layout();
+        @include kendo-media-player--theme();
     }
 }

package/scss/menu/_layout.scss

@@ -114,12 +114,12 @@
         flex-direction: column;
 
         > .k-menu-item > .k-menu-link {
-            padding-inline-end: var( --kendo-menu-popup-item-padding-end-md, #{$kendo-menu-popup-item-padding-end-md} );
+            padding-inline-end: var( --kendo-menu-popup-md-item-padding-end, #{$kendo-menu-popup-md-item-padding-end} );
         }
 
         > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
-            margin-inline-start: var( --kendo-menu-popup-item-icon-margin-start-md, #{$kendo-menu-popup-item-icon-margin-start-md} );
-            margin-inline-end: var( --kendo-menu-popup-item-icon-margin-end-md, #{$kendo-menu-popup-item-icon-margin-end-md} );
+            margin-inline-start: var( --kendo-menu-popup-item-icon-md-margin-start, #{$kendo-menu-popup-item-icon-md-margin-start} );
+            margin-inline-end: var( --kendo-menu-popup-item-icon-md-margin-end, #{$kendo-menu-popup-item-icon-md-margin-end} );
         }
 
         > .k-menu-item + .k-menu-item {

package/scss/menu/_variables.scss

@@ -12,7 +12,7 @@ $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
 // Font size of the menu.
 /// @group menu
 $kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line heights used along with $font-size.
+/// Line heights used along with $kendo-font-size.
 /// @group menu
 $kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
 
@@ -106,16 +106,16 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 /// Font sizes of the menu popup.
 /// @group menu
 $kendo-menu-popup-font-size: var( --kendo-font-size-md, inherit ) !default;
-$kendo-menu-popup-font-size-sm: $kendo-menu-popup-font-size !default;
-$kendo-menu-popup-font-size-md: $kendo-menu-popup-font-size !default;
-$kendo-menu-popup-font-size-lg: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-sm-font-size: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-md-font-size: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-lg-font-size: $kendo-menu-popup-font-size !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
 $kendo-menu-popup-line-height: var( --kendo-line-height-md, 30px ) !default;
-$kendo-menu-popup-line-height-sm: $kendo-menu-popup-line-height !default;
-$kendo-menu-popup-line-height-md: $kendo-menu-popup-line-height !default;
-$kendo-menu-popup-line-height-lg: $kendo-menu-popup-line-height !default;
+$kendo-menu-popup-sm-line-height: $kendo-menu-popup-line-height !default;
+$kendo-menu-popup-md-line-height: $kendo-menu-popup-line-height !default;
+$kendo-menu-popup-lg-line-height: $kendo-menu-popup-line-height !default;
 
 /// The background of the menu popup.
 /// @group menu
@@ -130,30 +130,30 @@ $kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// Horizontal padding of the menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-sm: $kendo-menu-popup-item-padding-x !default;
-$kendo-menu-popup-item-padding-x-md: $kendo-menu-popup-item-padding-x !default;
-$kendo-menu-popup-item-padding-x-lg: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-item-padding-x !default;
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y-sm: $kendo-list-item-padding-y-sm !default;
-$kendo-menu-popup-item-padding-y-md: $kendo-list-item-padding-y-md !default;
-$kendo-menu-popup-item-padding-y-lg: $kendo-list-item-padding-y-lg !default;
+$kendo-menu-popup-sm-item-padding-y: $kendo-list-sm-item-padding-y !default;
+$kendo-menu-popup-md-item-padding-y: $kendo-list-md-item-padding-y !default;
+$kendo-menu-popup-lg-item-padding-y: $kendo-list-lg-item-padding-y !default;
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-start-sm: map.get( $kendo-spacing, 0 ) !default;
-$kendo-menu-popup-item-icon-margin-start-md: map.get( $kendo-spacing, 0 ) !default;
-$kendo-menu-popup-item-icon-margin-start-lg: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-sm-item-icon-margin-start: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-item-icon-md-margin-start: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-lg-item-icon-margin-start: map.get( $kendo-spacing, 0 ) !default;
 /// The end margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-sm}) ) !default;
-$kendo-menu-popup-item-icon-margin-end-md: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-md}) ) !default;
-$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-lg}) ) !default;
+$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
+$kendo-menu-popup-item-icon-md-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-md-item-padding-x}) ) !default;
+$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-lg-item-padding-x}) ) !default;
 
 /// The base shadow of focused menu item in popup.
 /// @group menu
@@ -169,31 +169,31 @@ $kendo-menu-popup-item-spacing: map.get( $kendo-spacing, 0 ) !default;
 /// @group menu
 $kendo-menu-sizes: (
     sm: (
-        group-font-size: $kendo-menu-popup-font-size-sm,
-        group-line-height: $kendo-menu-popup-line-height-sm,
-        link-padding-x: $kendo-menu-popup-item-padding-x-sm,
-        link-padding-y: $kendo-menu-popup-item-padding-y-sm,
-        link-padding-inline-end: $kendo-menu-popup-item-padding-end-sm,
-        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm,
-        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm,
+        group-font-size: $kendo-menu-popup-sm-font-size,
+        group-line-height: $kendo-menu-popup-sm-line-height,
+        link-padding-x: $kendo-menu-popup-sm-item-padding-x,
+        link-padding-y: $kendo-menu-popup-sm-item-padding-y,
+        link-padding-inline-end: $kendo-menu-popup-sm-item-padding-end,
+        arrow-margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start,
+        arrow-margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end,
     ),
     md: (
-        group-font-size: $kendo-menu-popup-font-size-md,
-        group-line-height: $kendo-menu-popup-line-height-md,
-        link-padding-x: $kendo-menu-popup-item-padding-x-md,
-        link-padding-y: $kendo-menu-popup-item-padding-y-md,
-        link-padding-inline-end: $kendo-menu-popup-item-padding-end-md,
-        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-md,
-        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-md,
+        group-font-size: $kendo-menu-popup-md-font-size,
+        group-line-height: $kendo-menu-popup-md-line-height,
+        link-padding-x: $kendo-menu-popup-md-item-padding-x,
+        link-padding-y: $kendo-menu-popup-md-item-padding-y,
+        link-padding-inline-end: $kendo-menu-popup-md-item-padding-end,
+        arrow-margin-inline-start: $kendo-menu-popup-item-icon-md-margin-start,
+        arrow-margin-inline-end: $kendo-menu-popup-item-icon-md-margin-end,
     ),
     lg: (
-        group-font-size: $kendo-menu-popup-font-size-lg,
-        group-line-height: $kendo-menu-popup-line-height-lg,
-        link-padding-x: $kendo-menu-popup-item-padding-x-lg,
-        link-padding-y: $kendo-menu-popup-item-padding-y-lg,
-        link-padding-inline-end: $kendo-menu-popup-item-padding-end-lg,
-        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg,
-        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg
+        group-font-size: $kendo-menu-popup-lg-font-size,
+        group-line-height: $kendo-menu-popup-lg-line-height,
+        link-padding-x: $kendo-menu-popup-lg-item-padding-x,
+        link-padding-y: $kendo-menu-popup-lg-item-padding-y,
+        link-padding-inline-end: $kendo-menu-popup-lg-item-padding-end,
+        arrow-margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start,
+        arrow-margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end
     )
 ) !default;
 

package/scss/pager/_variables.scss

@@ -5,16 +5,16 @@
 /// Horizontal padding of the pager.
 /// @group pager
 $kendo-pager-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-sm: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-pager-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-lg: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-sm-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-pager-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// Vertical padding of the pager.
 /// @group pager
 $kendo-pager-padding-y: map.get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-y-sm: $kendo-pager-padding-x-sm !default;
-$kendo-pager-padding-y-md: $kendo-pager-padding-x-md !default;
-$kendo-pager-padding-y-lg: $kendo-pager-padding-x-lg !default;
+$kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+$kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+$kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
 /// Border width of the pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
@@ -62,9 +62,9 @@ $kendo-pager-item-spacing: null !default;
 
 /// Spacing between the pager item groups according to the pager size.
 /// @group pager
-$kendo-pager-item-group-spacing-sm: map.get( $kendo-spacing, 2 ) !default;
-$kendo-pager-item-group-spacing-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-pager-item-group-spacing-lg: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-sm-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-md-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-lg-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Text color of the pager sizes label.
 /// @group pager
@@ -85,18 +85,18 @@ $kendo-pager-dropdown-width: 5em !default;
 /// @group pager
 $kendo-pager-sizes: (
     sm: (
-        padding-x: $kendo-pager-padding-x-sm,
-        padding-y: $kendo-pager-padding-y-sm,
-        item-group-spacing: $kendo-pager-item-group-spacing-sm
+        padding-x: $kendo-pager-sm-padding-x,
+        padding-y: $kendo-pager-sm-padding-y,
+        item-group-spacing: $kendo-pager-sm-item-group-spacing
     ),
     md: (
-        padding-x: $kendo-pager-padding-x-md,
-        padding-y: $kendo-pager-padding-y-md,
-        item-group-spacing: $kendo-pager-item-group-spacing-md
+        padding-x: $kendo-pager-md-padding-x,
+        padding-y: $kendo-pager-md-padding-y,
+        item-group-spacing: $kendo-pager-md-item-group-spacing
     ),
     lg: (
-        padding-x: $kendo-pager-padding-x-lg,
-        padding-y: $kendo-pager-padding-y-lg,
-        item-group-spacing: $kendo-pager-item-group-spacing-lg
+        padding-x: $kendo-pager-lg-padding-x,
+        padding-y: $kendo-pager-lg-padding-y,
+        item-group-spacing: $kendo-pager-lg-item-group-spacing
     )
 ) !default;

package/scss/pivotgrid/_layout.scss

@@ -75,7 +75,7 @@
 
     .k-pivotgrid-column-headers .k-pivotgrid-table {
         padding-inline-start: 0;
-        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     }
 
     .k-pivotgrid-column-headers .k-pivotgrid-cell {
@@ -100,7 +100,7 @@
     }
 
     .k-pivotgrid-row-headers .k-pivotgrid-table {
-        padding-bottom: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+        padding-bottom: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     }
 
     .k-pivotgrid-row-headers .k-pivotgrid-cell {

package/scss/radio/_variables.scss

@@ -159,7 +159,7 @@ $kendo-radio-list-spacing: map.get( $kendo-spacing, 4 ) !default;
 $kendo-radio-list-item-padding-x: 0px !default;
 /// The vertical list item padding of radio button.
 /// @group radio
-$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 ///
 /// @group radio
 $kendo-radio-list-item-gap: map.get( $kendo-spacing, 2 ) !default;

package/scss/rating/_variables.scss

@@ -48,4 +48,4 @@ $kendo-rating-item-selected-hover-text: get-theme-color-var( primary-120 ) !defa
 
 /// Icon size of the rating.
 /// @group rating
-$kendo-rating-icon-size: calc( var( --kendo-icon-size, 1rem ) * #{$kendo-line-height} ) !default;
+$kendo-rating-icon-size: calc( var( --kendo-icon-size, 1rem ) * #{$kendo-line-height-md} ) !default;

package/scss/scheduler/_layout.scss

@@ -319,7 +319,7 @@
     // Scheduler view header
     .k-scheduler-header,
     .k-scheduler-view-header {
-        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width});
+        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width});
     }
 
     .k-scheduler-header th {

package/scss/scrollview/_variables.scss

@@ -84,7 +84,7 @@ $kendo-scrollview-pager-dark-bg: rgba( $kendo-color-black, .4 ) !default;
 
 /// Scrollview arrow arrows size.
 /// @group scrollview
-$kendo-scrollview-arrow-icon-size: calc( var( --kendo-icon-size-lg, 2rem ) * 2 ) !default;
+$kendo-scrollview-arrow-icon-size: calc( var( --kendo-icon-size-xxl, 2rem ) * 2 ) !default;
 /// Scrollview navigation text color.
 /// @group scrollview
 $kendo-scrollview-navigation-color: $kendo-color-white !default;

package/scss/signature/_variables.scss

@@ -16,15 +16,15 @@ $kendo-signature-maximized-height: 252px !default;
 /// The horizontal paddings of the signature component.
 /// @group signature
 $kendo-signature-padding-x: map.get( $kendo-spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: $kendo-signature-padding-x !default;
+$kendo-signature-sm-padding-x: $kendo-signature-padding-x !default;
+$kendo-signature-md-padding-x: $kendo-signature-padding-x !default;
+$kendo-signature-lg-padding-x: $kendo-signature-padding-x !default;
 /// The vertical paddings of the signature component.
 /// @group signature
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
-$kendo-signature-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-signature-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-signature-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-signature-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-signature-md-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// The opacity of the disabled signature component.
 /// @group signature
@@ -45,9 +45,9 @@ $kendo-signature-line-disabled-color: get-theme-color-var( neutral-60 ) !default
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
-$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
-$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
-$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
+$kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
+$kendo-signature-md-line-size: calc( 100% - 2 * #{$kendo-signature-md-padding-x} ) !default;
+$kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x} ) !default;
 /// The bottom offset of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-bottom-offset: 33% !default;
@@ -56,19 +56,19 @@ $kendo-signature-line-bottom-offset: 33% !default;
 /// @group signature
 $kendo-signature-sizes: (
     sm: (
-        padding-x: $kendo-signature-padding-x-sm,
-        padding-y: $kendo-signature-padding-y-sm,
-        line-size: $kendo-signature-line-size-sm
+        padding-x: $kendo-signature-sm-padding-x,
+        padding-y: $kendo-signature-sm-padding-y,
+        line-size: $kendo-signature-sm-line-size
     ),
     md: (
-        padding-x: $kendo-signature-padding-x-md,
-        padding-y: $kendo-signature-padding-y-md,
-        line-size: $kendo-signature-line-size-md
+        padding-x: $kendo-signature-md-padding-x,
+        padding-y: $kendo-signature-md-padding-y,
+        line-size: $kendo-signature-md-line-size
     ),
     lg: (
-        padding-x: $kendo-signature-padding-x-lg,
-        padding-y: $kendo-signature-padding-y-lg,
-        line-size: $kendo-signature-line-size-lg
+        padding-x: $kendo-signature-lg-padding-x,
+        padding-y: $kendo-signature-lg-padding-y,
+        line-size: $kendo-signature-lg-line-size
     )
 ) !default;
 

package/scss/split-button/_layout.scss

@@ -16,8 +16,8 @@
     // Split button arrow
     .k-split-button-arrow {
         width: auto;
-        padding-inline: var( --kendo-split-button-arrow-padding-x, #{$kendo-split-button-arrow-padding-x-md} );
-        padding-block: var( --kendo-split-button-arrow-padding-y , #{$kendo-split-button-arrow-padding-y-md} );
+        padding-inline: var( --kendo-split-button-arrow-padding-x, #{$kendo-split-button-md-arrow-padding-x} );
+        padding-block: var( --kendo-split-button-arrow-padding-y , #{$kendo-split-button-md-arrow-padding-y} );
         aspect-ratio: auto;
         flex: none;