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

package/scss/colorgradient/_variables.scss

@@ -4,149 +4,149 @@
 
 /// Spacer of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 
 /// Default width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-width: 260px !default;
+$kendo-color-gradient-width: 260px !default;
 /// Border width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border-width: 1px !default;
+$kendo-color-gradient-border-width: 1px !default;
 /// Border radius of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Vertical padding of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-padding-y: $kendo-colorgradient-spacer !default;
+$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
 /// Horizontal padding of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-padding-x: math.div( $kendo-colorgradient-spacer, 2 ) !default;
+$kendo-color-gradient-padding-x: math.div( $kendo-color-gradient-spacer, 2 ) !default;
 /// Spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-spacing: $kendo-colorgradient-spacer !default;
+$kendo-color-gradient-spacing: $kendo-color-gradient-spacer !default;
 /// Font family of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Background color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-color-gradient-bg: var( --kendo-component-bg, initial ) !default;
 /// Text color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-text: var( --kendo-component-text, initial ) !default;
+$kendo-color-gradient-text: var( --kendo-component-text, initial ) !default;
 /// Border color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border: var( --kendo-component-border, initial ) !default;
+$kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
 /// Shadow of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// Focus border of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-focus-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-gradient-focus-border: get-theme-color-var( neutral-20 ) !default;
 /// Focus shadow of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// Border radius of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Border width of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-border-width: 0 !default;
+$kendo-color-gradient-canvas-border-width: 0 !default;
 /// Spacing of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-spacing: math.div( $kendo-colorgradient-spacer, 2 ) !default;
+$kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2 ) !default;
 /// Height the color gradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-colorgradient-canvas-rectangle-height: 180px !default;
+$kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// Border color of the color gradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-colorgradient-canvas-rectangle-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-canvas-rectangle-border: get-theme-color-var( neutral-30 ) !default;
 /// Shadow of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
+$kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
 
 /// Default input width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-width: 48px !default;
+$kendo-color-gradient-input-width: 48px !default;
 /// Input spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
 /// Input label font size of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Input label spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-label-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
 /// Input label text color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
 
 /// Font weight of the color gradient contrast ratio text.
 /// @group cologradient
-$kendo-colorgradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// Spacing of the color gradient contrast tool.
 /// @group cologradient
-$kendo-colorgradient-contrast-spacing: math.div( $kendo-colorgradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
 
 /// The size of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-track-size: 20px !default;
+$kendo-color-gradient-slider-track-size: 20px !default;
 /// Border radius of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Border width of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border-width: 1px !default;
+$kendo-color-gradient-slider-border-width: 1px !default;
 /// Border color of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-slider-border: get-theme-color-var( neutral-30 ) !default;
 
 /// Height of the color gradient vertical slider.
 /// @group cologradient
-$kendo-colorgradient-slider-vertical-size: 180px !default;
+$kendo-color-gradient-slider-vertical-size: 180px !default;
 /// Width of the color gradient horizontal slider.
 /// @group cologradient
-$kendo-colorgradient-slider-horizontal-size: 100% !default;
+$kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// Background image of the color gradient alpha slider.
 /// @group cologradient
-$kendo-colorgradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 
 /// Width of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-width: 20px !default;
+$kendo-color-gradient-draghandle-width: 20px !default;
 /// Height of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-height: 20px !default;
+$kendo-color-gradient-draghandle-height: 20px !default;
 /// Border width of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-width: 1px !default;
 /// Border color of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: get-theme-color-var( neutral-110 ) !default;
 /// Shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// Focus shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-focus-shadow: $kendo-colorgradient-draghandle-shadow !default;
+$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;
 /// Focus border color of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-focus-border: get-theme-color-var( neutral-160 ) !default;
+$kendo-color-gradient-draghandle-focus-border: get-theme-color-var( neutral-160 ) !default;
 /// Hover shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-hover-shadow: $kendo-colorgradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
 
 /// Vertical offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-colorgradient-draghandle-height, 2 ) ) !default;
+$kendo-color-gradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) ) !default;
 /// Horizontal offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-colorgradient-draghandle-width, 2 ) ) !default;
+$kendo-color-gradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) ) !default;

package/scss/colorgradient/index.scss

@@ -23,7 +23,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin colorgradient-styles() {
     @include module.render( "colorgradient" ) {
-        @include kendo-colorgradient--layout();
-        @include kendo-colorgradient--theme();
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
     }
 }

package/scss/colorpalette/_layout.scss

@@ -1,16 +1,16 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpalette--layout() {
+@mixin kendo-color-palette--layout() {
 
     // ColorPalette
     .k-colorpalette {
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
-        font-size: var( --kendo-colorpalette-font-size, #{$kendo-colorpalette-font-size} );
-        font-family: var( --kendo-colorpalette-font-family, #{$kendo-colorpalette-font-family} );
-        line-height: var( --kendo-colorpalette-line-height, #{$kendo-colorpalette-line-height} );
+        font-size: var( --kendo-color-palette-font-size, #{$kendo-color-palette-font-size} );
+        font-family: var( --kendo-color-palette-font-family, #{$kendo-color-palette-font-family} );
+        line-height: var( --kendo-color-palette-line-height, #{$kendo-color-palette-line-height} );
         display: inline-flex;
         position: relative;
         -webkit-touch-callout: none;
@@ -37,10 +37,10 @@
 
     // Tile
     .k-colorpalette-tile {
-        outline-width: var( --kendo-colorpalette-tile-outline-width, #{$kendo-colorpalette-tile-outline-width} );
-        outline-style: var( --kendo-colorpalette-tile-outline-style, #{$kendo-colorpalette-tile-outline-style} );
-        width: var( --kendo-colorpalette-tile-width, #{$kendo-colorpalette-tile-width} );
-        height: var( --kendo-colorpalette-tile-height, #{$kendo-colorpalette-tile-height} );
+        outline-width: var( --kendo-color-palette-tile-outline-width, #{$kendo-color-palette-tile-outline-width} );
+        outline-style: var( --kendo-color-palette-tile-outline-style, #{$kendo-color-palette-tile-outline-style} );
+        width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
+        height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;

package/scss/colorpalette/_theme.scss

@@ -1,42 +1,42 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpalette--theme() {
+@mixin kendo-color-palette--theme() {
 
     // Tile
     .k-colorpalette-tile {
-        outline-color: var( --kendo-colorpalette-tile-outline, #{$kendo-colorpalette-tile-outline} );
+        outline-color: var( --kendo-color-palette-tile-outline, #{$kendo-color-palette-tile-outline} );
 
         // Hover
         &:hover,
         &.k-hover {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-hover-shadow, #{$kendo-colorpalette-tile-hover-shadow} )
+                var( --kendo-color-palette-tile-hover-shadow, #{$kendo-color-palette-tile-hover-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-hover-outline, #{$kendo-colorpalette-tile-hover-outline} );
+            outline-color: var( --kendo-color-palette-tile-hover-outline, #{$kendo-color-palette-tile-hover-outline} );
         }
 
         // Focus
         &:focus,
         &.k-focus {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-focus-shadow, #{$kendo-colorpalette-tile-focus-shadow} )
+                var( --kendo-color-palette-tile-focus-shadow, #{$kendo-color-palette-tile-focus-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-focus-outline, #{$kendo-colorpalette-tile-focus-outline} );
+            outline-color: var( --kendo-color-palette-tile-focus-outline, #{$kendo-color-palette-tile-focus-outline} );
         }
 
         // Selected
         &.k-selected {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-selected-shadow, #{$kendo-colorpalette-tile-selected-shadow} )
+                var( --kendo-color-palette-tile-selected-shadow, #{$kendo-color-palette-tile-selected-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-selected-outline, #{$kendo-colorpalette-tile-selected-outline} );
+            outline-color: var( --kendo-color-palette-tile-selected-outline, #{$kendo-color-palette-tile-selected-outline} );
         }
 
         // Selected hover/focus
         &.k-selected:hover,
         &.k-selected:focus {
-            outline-color: var( --kendo-colorpalette-tile-selected-hover-outline, #{$kendo-colorpalette-tile-selected-hover-outline} );
+            outline-color: var( --kendo-color-palette-tile-selected-hover-outline, #{$kendo-color-palette-tile-selected-hover-outline} );
         }
     }
 

package/scss/colorpalette/_variables.scss

@@ -3,47 +3,47 @@
 
 /// Font family of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-line-height: 0 !default;
+$kendo-color-palette-line-height: 0 !default;
 
 /// Outline width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline-width: 1px !default;
+$kendo-color-palette-tile-outline-width: 1px !default;
 /// Outline style of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline-style: solid !default;
+$kendo-color-palette-tile-outline-style: solid !default;
 /// Outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline: transparent !default;
+$kendo-color-palette-tile-outline: transparent !default;
 /// Width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-width: map.get( $kendo-spacing, 6 ) !default;
+$kendo-color-palette-tile-width: map.get( $kendo-spacing, 6 ) !default;
 /// Height of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
+$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// Focus outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
+$kendo-color-palette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
 /// Focus shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
+$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
 /// Hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-palette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
 /// Hover shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
+$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
 /// Selected outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-outline: $kendo-colorpalette-tile-hover-outline !default;
+$kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;
 /// Selected shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-shadow: $kendo-colorpalette-tile-hover-shadow !default;
+$kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shadow !default;
 /// Selected hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-hover-outline: $kendo-colorpalette-tile-focus-outline !default;
+$kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;

package/scss/colorpalette/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin colorpalette-styles() {
     @include module.render( "colorpalette" ) {
-        @include kendo-colorpalette--layout();
-        @include kendo-colorpalette--theme();
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
     }
 }

package/scss/core/_variables.scss

@@ -64,7 +64,7 @@ $kendo-font-size-xl: 20px !default;
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
 
 
-/// Line height used along with $font-size.
+/// Line height used along with $kendo-font-size.
 $kendo-line-height: math.div( 20, 14 ) !default;
 $kendo-line-height-xs: 1 !default;
 $kendo-line-height-sm: 1.25 !default;
@@ -80,7 +80,7 @@ $kendo-font-weight-bold: 600 !default;
 
 $kendo-letter-spacing: normal !default;
 
-$default-scrollbar-width: 17px !default;
+$kendo-scrollbar-width: 17px !default;
 
 /// Border radius for all components.
 $kendo-border-radius: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero

package/scss/core/mixins/_hide-scrollbar.scss

@@ -2,7 +2,7 @@
 // Infinite calendar and timepicker
 @mixin hide-scrollbar($max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
-    $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
     padding-inline-end: $max-scrollbar;

package/scss/core/mixins/_typography.scss

@@ -1,17 +1,7 @@
-@mixin typography($font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null) {
-    @if $font-size {
-        font-size: $font-size;
-    }
-    @if $font-family {
-        font-family: $font-family;
-    }
-    @if $line-height {
-        line-height: $line-height;
-    }
-    @if $font-weight {
-        font-weight: $font-weight;
-    }
-    @if $letter-spacing {
-        letter-spacing: $letter-spacing;
-    }
+@mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
+    font-size: $font-size;
+    font-family: $font-family;
+    line-height: $line-height;
+    font-weight: $font-weight;
+    letter-spacing: $letter-spacing;
 }

package/scss/dataviz/_layout.scss

@@ -344,10 +344,10 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
 
 
@@ -442,7 +442,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: get-theme-color( neutral, 30 )
+        gauge-track: get-theme-color-var( neutral-30 )
     );
 
     @each $name, $value in $exported {

package/scss/dataviz/_variables.scss

@@ -3,51 +3,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: get-theme-color( series-a, 100 ) !default;
-$kendo-series-a-dark: get-theme-color( series-a, 130 ) !default;
-$kendo-series-a-darker: get-theme-color( series-a, 160 ) !default;
-$kendo-series-a-light: get-theme-color( series-a, 70 ) !default;
-$kendo-series-a-lighter: get-theme-color( series-a, 40 ) !default;
+$kendo-series-a: get-theme-color-var( series-a-100 ) !default;
+$kendo-series-a-dark: get-theme-color-var( series-a-130 ) !default;
+$kendo-series-a-darker: get-theme-color-var( series-a-160 ) !default;
+$kendo-series-a-light: get-theme-color-var( series-a-70 ) !default;
+$kendo-series-a-lighter: get-theme-color-var( series-a-40 ) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: get-theme-color( series-b, 100 ) !default;
-$kendo-series-b-dark: get-theme-color( series-b, 130 ) !default;
-$kendo-series-b-darker: get-theme-color( series-b, 160 ) !default;
-$kendo-series-b-light: get-theme-color( series-b, 70 ) !default;
-$kendo-series-b-lighter: get-theme-color( series-b, 40 ) !default;
+$kendo-series-b: get-theme-color-var( series-b-100 ) !default;
+$kendo-series-b-dark: get-theme-color-var( series-b-130 ) !default;
+$kendo-series-b-darker: get-theme-color-var( series-b-160 ) !default;
+$kendo-series-b-light: get-theme-color-var( series-b-70 ) !default;
+$kendo-series-b-lighter: get-theme-color-var( series-b-40 ) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: get-theme-color( series-c, 100 ) !default;
-$kendo-series-c-dark: get-theme-color( series-c, 130 ) !default;
-$kendo-series-c-darker: get-theme-color( series-c, 160 ) !default;
-$kendo-series-c-light: get-theme-color( series-c, 70 ) !default;
-$kendo-series-c-lighter: get-theme-color( series-c, 40 ) !default;
+$kendo-series-c: get-theme-color-var( series-c-100 ) !default;
+$kendo-series-c-dark: get-theme-color-var( series-c-130 ) !default;
+$kendo-series-c-darker: get-theme-color-var( series-c-160 ) !default;
+$kendo-series-c-light: get-theme-color-var( series-c-70 ) !default;
+$kendo-series-c-lighter: get-theme-color-var( series-c-40 ) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: get-theme-color( series-d, 100 ) !default;
-$kendo-series-d-dark: get-theme-color( series-d, 130 ) !default;
-$kendo-series-d-darker: get-theme-color( series-d, 160 ) !default;
-$kendo-series-d-light: get-theme-color( series-d, 70 ) !default;
-$kendo-series-d-lighter: get-theme-color( series-d, 40 ) !default;
+$kendo-series-d: get-theme-color-var( series-d-100 ) !default;
+$kendo-series-d-dark: get-theme-color-var( series-d-130 ) !default;
+$kendo-series-d-darker: get-theme-color-var( series-d-160 ) !default;
+$kendo-series-d-light: get-theme-color-var( series-d-70 ) !default;
+$kendo-series-d-lighter: get-theme-color-var( series-d-40 ) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: get-theme-color( series-e, 100 ) !default;
-$kendo-series-e-dark: get-theme-color( series-e, 130 ) !default;
-$kendo-series-e-darker: get-theme-color( series-e, 160 ) !default;
-$kendo-series-e-light: get-theme-color( series-e, 70 ) !default;
-$kendo-series-e-lighter: get-theme-color( series-e, 40 ) !default;
+$kendo-series-e: get-theme-color-var( series-e-100 ) !default;
+$kendo-series-e-dark: get-theme-color-var( series-e-130 ) !default;
+$kendo-series-e-darker: get-theme-color-var( series-e-60 ) !default;
+$kendo-series-e-light: get-theme-color-var( series-e-70 ) !default;
+$kendo-series-e-lighter: get-theme-color-var( series-e-40 ) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: get-theme-color( series-f, 100 ) !default;
-$kendo-series-f-dark: get-theme-color( series-f, 130 ) !default;
-$kendo-series-f-darker: get-theme-color( series-f, 160 ) !default;
-$kendo-series-f-light: get-theme-color( series-f, 70 ) !default;
-$kendo-series-f-lighter: get-theme-color( series-f, 40 ) !default;
+$kendo-series-f: get-theme-color-var( series-f-100 ) !default;
+$kendo-series-f-dark: get-theme-color-var( series-f-130 ) !default;
+$kendo-series-f-darker: get-theme-color-var( series-f-160 ) !default;
+$kendo-series-f-light: get-theme-color-var( series-f-70 ) !default;
+$kendo-series-f-lighter: get-theme-color-var( series-f-40 ) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -92,9 +92,9 @@ $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the chart component.
 /// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-chart-font-size-sm: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-chart-font-size-md: var( --kendo-font-size-md, inherit ) !default;
-$kendo-chart-font-size-lg: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-chart-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-chart-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line-height of the chart component.
 /// @group charts
 $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;

package/scss/dialog/_variables.scss

@@ -33,10 +33,10 @@ $kendo-dialog-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
 /// Vertical padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
 /// Width of the top border of the dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
@@ -46,7 +46,7 @@ $kendo-dialog-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
 /// Spacing between the buttons in the header of the dialog.
 /// @group dialog
-$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $actions-padding-y
+$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-actions-padding-y
 
 /// Box shadow around the dialog.
 /// @group dialog

package/scss/editor/_layout.scss

@@ -447,8 +447,8 @@
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            inset-inline-start: $kendo-input-padding-x-md;
-            inset-block-start: $kendo-input-padding-y-md;
+            inset-inline-start: $kendo-input-md-padding-x;
+            inset-block-start: $kendo-input-md-padding-y;
 
             .k-icon {
                 position: static;

package/scss/fab/_variables.scss

@@ -22,16 +22,16 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
-$kendo-fab-padding-x-sm: 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: 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: 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: 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;
 
 /// Offset of the focused FAB.
 /// @group floating-action-button
@@ -127,16 +127,16 @@ $kendo-fab-theme-colors: (
 /// @group floating-action-button
 $kendo-fab-sizes: (
     sm: (
-        padding-x: $kendo-fab-padding-x-sm,
-        padding-y: $kendo-fab-padding-y-sm
+        padding-x: $kendo-fab-sm-padding-x,
+        padding-y: $kendo-fab-sm-padding-y
     ),
     md: (
-        padding-x: $kendo-fab-padding-x-md,
-        padding-y: $kendo-fab-padding-y-md
+        padding-x: $kendo-fab-md-padding-x,
+        padding-y: $kendo-fab-md-padding-y
     ),
     lg: (
-        padding-x: $kendo-fab-padding-x-lg,
-        padding-y: $kendo-fab-padding-y-lg
+        padding-x: $kendo-fab-lg-padding-x,
+        padding-y: $kendo-fab-lg-padding-y
     )
 ) !default;