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

package/scss/scheduler/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../calendar/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 
@@ -70,10 +70,10 @@ $kendo-scheduler-event-border-radius: var( --kendo-border-radius-md, 0 ) !defaul
 $kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;
 /// Horizontal padding of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-event-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-y: map-get( $kendo-spacing, thin ) !default;
+$kendo-scheduler-event-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Minumum height of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) !default;
@@ -83,7 +83,7 @@ $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #
 $kendo-scheduler-event-bg: get-theme-color-var( primary-100 ) !default;
 /// Text color of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: $white !default;
+$kendo-scheduler-event-text: $kendo-color-white !default;
 /// Border color of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
@@ -132,10 +132,10 @@ $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
 /// Horizontal padding of the scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-cell-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-cell-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Height of the scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
@@ -173,14 +173,14 @@ $kendo-scheduler-othermonth-text: null !default;
 
 /// Horizontal padding of the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the scheduler year view.
 /// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
 /// Spacing between the calendars in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-calendar-gap: map-get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-calendar-gap: map.get( $kendo-spacing, 3 ) !default;
 
 /// Days with events indicator size in the scheduler year view.
 /// @group scheduler
@@ -199,11 +199,11 @@ $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
 $kendo-scheduler-yearview-indicator-bg: get-theme-color-var( primary-100 ) !default;
 /// Background color of the selected days with events indicator in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-selected-bg: $white !default;
+$kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-white !default;
 
 /// Horizontal padding of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-tooltip-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
@@ -212,7 +212,7 @@ $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
 $kendo-scheduler-tooltip-border-width: 0 !default;
 /// Background color of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: $white !default;
+$kendo-scheduler-tooltip-bg: $kendo-color-white !default;
 /// Text color of the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-text: get-theme-color-var( neutral-130 ) !default;
@@ -225,7 +225,7 @@ $kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2 ) !default;
 
 /// Vertical spacing of the scheduler tooltip title.
 /// @group scheduler
-$kendo-scheduler-tooltip-title-margin-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-tooltip-title-margin-y: map.get( $kendo-spacing, 3 ) !default;
 /// Font size of the month inside the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -238,7 +238,7 @@ $kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-fon
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
 /// Spacing between the events inside the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-events-gap: map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-tooltip-events-gap: map.get( $kendo-spacing, 2 ) !default;
 
 /// Horizontal padding of the events inside the scheduler tooltip.
 /// @group scheduler
@@ -251,7 +251,7 @@ $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !defa
 $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
 /// Spacing between the events items inside the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-gap:  map-get( $kendo-spacing, thin ) !default;
+$kendo-scheduler-tooltip-event-gap:  map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// Color of the scheduler tooltip callout.
 /// @group scheduler
@@ -267,4 +267,4 @@ $kendo-scheduler-more-btn-height: 13px !default;
 
 /// Color of the scheduler marquee.
 /// @group scheduler
-$kendo-scheduler-marquee-color: get-theme-color-var( primary-100 );
+$kendo-scheduler-marquee-color: get-theme-color-var( primary-100 ) !default;

package/scss/scheduler/index.scss

@@ -17,9 +17,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/scroller/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-scroller--layout() {
 

package/scss/scroller/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-scroller--theme() {
 

package/scss/scroller/_variables.scss

@@ -1 +1 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;

package/scss/scroller/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/scrollview/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-scrollview--layout() {
     kendo-scrollview.k-scrollview-wrap,
@@ -16,7 +16,7 @@
         overflow: hidden;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-scrollview-wrap .k-scrollview,

package/scss/scrollview/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-scrollview--theme() {
 
@@ -43,7 +42,7 @@
         background-color: var( --kendo-scrollview-navigation-bg, #{$kendo-scrollview-navigation-bg} );
         text-shadow: var( --kendo-scrollview-navigation-arrow-shadow, #{$kendo-scrollview-navigation-arrow-shadow} );
         outline-width: 0;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &:focus,
         &.k-focus {

package/scss/scrollview/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 @use "../button/_variables.scss"as *;
 
 /// Width of the border around the scrollview.
@@ -29,7 +29,7 @@ $kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
 $kendo-scrollview-pagebutton-size: 10px !default;
 /// Scrollview page background color.
 /// @group scrollview
-$kendo-scrollview-pagebutton-bg: $white !default;
+$kendo-scrollview-pagebutton-bg: $kendo-color-white !default;
 /// Scrollview page button border color.
 /// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-bg !default;
@@ -77,17 +77,17 @@ $kendo-scrollview-pager-multidot-step: 1px !default;
 
 /// Scrollview pager light background color.
 /// @group scrollview
-$kendo-scrollview-pager-light-bg: rgba( $white, .4 ) !default;
+$kendo-scrollview-pager-light-bg: rgba( $kendo-color-white, .4 ) !default;
 /// Scrollview pager dark background color.
 /// @group scrollview
-$kendo-scrollview-pager-dark-bg: rgba( $black, .4 ) !default;
+$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;
 /// Scrollview navigation text color.
 /// @group scrollview
-$kendo-scrollview-navigation-color: $white !default;
+$kendo-scrollview-navigation-color: $kendo-color-white !default;
 /// Scrollview navigation arrows shadow.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

package/scss/scrollview/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/searchbox/_layout.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-searchbox--layout() {
 

package/scss/searchbox/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-searchbox--theme() {
     .k-searchbox {

package/scss/searchbox/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 
 /// Color of the searchbox icon.
 /// @group searchbox

package/scss/searchbox/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/signature/_layout.scss

@@ -1,4 +1,5 @@
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "./_variables.scss" as *;
 
 @mixin kendo-signature--layout() {
 
@@ -56,10 +57,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-signature-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_line-size: map-get( $size-props, line-size );
-        $_line-offset: map-get( $size-props, line-offset );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_line-size: map.get( $size-props, line-size );
+        $_line-offset: map.get( $size-props, line-offset );
 
         .k-signature-#{$size} {
             padding-inline: $_padding-x;

package/scss/signature/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-signature--theme() {
 

package/scss/signature/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/" as *;
 
 /// The default width of the signature component.
@@ -14,16 +15,16 @@ $kendo-signature-maximized-width: 750px !default;
 $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: 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;
 /// 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, thin ) !default;
-$kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
-$kendo-signature-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !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;
 
 /// The opacity of the disabled signature component.
 /// @group signature
@@ -73,7 +74,7 @@ $kendo-signature-sizes: (
 
 /// The gap between individual action items of the signature component
 /// @group signature
-$kendo-signature-actions-gap: map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-actions-gap: map.get( $kendo-spacing, 1 ) !default;
 
 /// The bottom-border width of the row line of the maximized signature component.
 /// @group signature
@@ -81,4 +82,4 @@ $kendo-signature-maximized-line-width: 3px !default;
 
 /// The min-height of the large size signature component.
 /// @group signature
-$kendo-signature-lg-min-height: 110px;
+$kendo-signature-lg-min-height: 110px !default;

package/scss/signature/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/skeleton/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-skeleton--layout() {
 
@@ -25,6 +25,13 @@
         border-radius: var( --kendo-skeleton-circle-border-radius, #{$kendo-skeleton-circle-border-radius} );
     }
 
+
+    // Legacy alias
+    .k-placeholder-line {
+        @extend .k-skeleton !optional;
+        @extend .k-skeleton-text !optional;
+    }
+
     // Wave animation
     @keyframes k-skeleton-wave {
         0% {

package/scss/skeleton/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-skeleton--theme() {
 

package/scss/skeleton/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 
 /// Text transform scale of the skeleton.
 /// @group skeleton

package/scss/skeleton/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/slider/_layout.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-slider--layout() {
 
@@ -20,7 +20,7 @@
         gap: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/slider/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-slider--theme() {
 

package/scss/slider/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 @use "../core/" as *;
 
 /// The default slider size.
@@ -9,7 +10,7 @@ $kendo-slider-size: 200px !default;
 $kendo-slider-alt-size: 26px !default;
 /// The spacing of the slider.
 /// @group slider
-$kendo-slider-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-slider-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Font family of the slider.
 /// @group slider
@@ -26,10 +27,10 @@ $kendo-slider-text: inherit !default;
 
 /// The size of the slider track.
 /// @group slider
-$kendo-slider-track-size: map-get( $kendo-spacing, 1 ) !default;
+$kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
 /// The border radius of the slider track.
 /// @group slider
-$kendo-slider-track-border-radius: map-get( $kendo-spacing, thin ) !default;
+$kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// The background color of the slider track.
 /// @group slider
 $kendo-slider-track-bg: get-theme-color-var( neutral-60 ) !default;
@@ -58,7 +59,7 @@ $kendo-slider-selection-bg: get-theme-color-var( primary-100 ) !default;
 $kendo-slider-thumb-size: 16px !default;
 /// The default border width of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-width: map-get( $kendo-spacing, thin ) !default;
+$kendo-slider-thumb-border-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// The border radius of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-border-radius: 999em !default;

package/scss/slider/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/split-button/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-split-button--layout() {
 

package/scss/split-button/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-split-button--theme() {
     .k-split-button { }

package/scss/split-button/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 @use "../button/variables" as *;
 
 /// Vertical padding of the split button arrow.

package/scss/split-button/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/splitter/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-splitter--layout() {
 
@@ -16,7 +16,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Pane
         .k-pane {
@@ -51,9 +51,6 @@
         border-style: solid;
         outline: 0;
         position: absolute;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
         display: flex;
         align-items: center;
@@ -155,7 +152,6 @@
         .k-pane {
             position: relative;
             flex: 1 1 auto;
-            display: block; // ie10 + flex
             min-width: 0;
             max-width: 100%;
             min-height: 0;

package/scss/splitter/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-splitter--theme() {
 

package/scss/splitter/_variables.scss

@@ -1,13 +1,13 @@
+@use "sass:map";
 @use "../core/" as *;
-@use "../core/color-system" as *;
 
 /// Width of the border around the splitter.
 /// @group splitter
-$kendo-splitter-border-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-splitter-border-width: 1px !default;
 /// Font size of the splitter.
 /// @group splitter
 $kendo-splitter-font-size: var( --kendo-font-size, initial ) !default;
-/// Line hegiht of the splitter.
+/// Line height of the splitter.
 /// @group splitter
 $kendo-splitter-line-height: var( --kendo-line-height, initial ) !default;
 /// Font family of the splitter.
@@ -26,19 +26,19 @@ $kendo-splitter-border: var( --kendo-component-border, initial ) !default;
 
 /// Size of the splitter splitbar.
 /// @group splitter
-$kendo-splitter-splitbar-size: map-get( $kendo-spacing, 2 ) !default;
+$kendo-splitter-splitbar-size: map.get( $kendo-spacing, 2 ) !default;
 /// Icon size of the splitter splitbar.
 /// @group splitter
-$kendo-splitter-resize-icon-size: ( map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) ) !default;
+$kendo-splitter-resize-icon-size: map.get( $kendo-spacing, 2.5 ) !default;
 /// Length of the splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-length: map-get( $kendo-spacing, 5 ) !default;
+$kendo-splitter-drag-handle-length: map.get( $kendo-spacing, 5 ) !default;
 /// thickness of the splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-thickness: map-get( $kendo-spacing, thin ) !default;
+$kendo-splitter-drag-handle-thickness: map.get( $kendo-spacing, 0.5 ) !default;
 /// Margin of the splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: ( map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, hair ) ) !default;
+$kendo-splitter-drag-icon-margin: map.get( $kendo-spacing, 2 ) !default;
 
 /// Background color of the splitter splitbar.
 /// @group splitter
@@ -63,4 +63,4 @@ $kendo-splitbar-selected-text: var( --kendo-component-bg, inherit ) !default;
 
 /// Size of the splitter static splitbar.
 /// @group splitter
-$kendo-splitter-splitbar-static-size: map-get( $kendo-spacing, thin ) !default;
+$kendo-splitter-splitbar-static-size: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero

package/scss/splitter/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;