@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/rating/_theme.scss

@@ -15,13 +15,6 @@
             @include fill(
                 $color: $kendo-rating-item-selected-text
             );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $color: $kendo-rating-item-selected-hover-text
-                );
-            }
         }
 
         &:hover,
@@ -37,12 +30,8 @@
             outline-color: $kendo-rating-item-focus-outline;
         }
 
-        &.k-disabled {
-            @include disabled(
-                color-mix(in srgb, k-color(on-app-surface) 46%, transparent),
-                inherit,
-                transparent
-            );
+        .k-disabled & {
+            opacity: .3;
         }
     }
 }

package/scss/rating/_variables.scss

@@ -23,13 +23,13 @@ $kendo-rating-item-padding-x: var( --kendo-rating-item-padding-x, #{k-spacing(0.
 $kendo-rating-item-padding-y: var( --kendo-rating-item-padding-y, #{k-spacing(2)} ) !default;
 /// The text color of the Rating item.
 /// @group rating
-$kendo-rating-item-text: var( --kendo-rating-item-text, #{k-color(subtle)} ) !default;
+$kendo-rating-item-text: var( --kendo-rating-item-text, #{k-color(on-app-surface)} ) !default;
 /// The text color of the hovered Rating item.
 /// @group rating
-$kendo-rating-item-hover-text: var( --kendo-rating-item-hover-text, #{k-color(primary)} ) !default;
+$kendo-rating-item-hover-text: var( --kendo-rating-item-hover-text, #{k-color(on-app-surface)} ) !default;
 /// The outline width of the focused Rating item.
 /// @group rating
-$kendo-rating-item-focus-outline-width: var( --kendo-rating-item-focus-outline-width, 1px ) !default;
+$kendo-rating-item-focus-outline-width: var( --kendo-rating-item-focus-outline-width, 2px ) !default;
 /// The outline style of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-outline-style: var( --kendo-rating-item-focus-outline-style, solid ) !default;
@@ -39,9 +39,6 @@ $kendo-rating-item-focus-outline: var( --kendo-rating-item-focus-outline, curren
 /// The text color of the selected Rating item.
 /// @group rating
 $kendo-rating-item-selected-text: var( --kendo-rating-item-selected-text, #{k-color(on-app-surface)} ) !default;
-/// The text color of the selected and hovered Rating item.
-/// @group rating
-$kendo-rating-item-selected-hover-text: var( --kendo-rating-item-selected-hover-text, #{k-color(primary-active)} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with (
     $kendo-rating-font-family: $kendo-rating-font-family,

package/scss/scheduler/_layout.scss

@@ -155,16 +155,6 @@
         }
     }
 
-   .k-rtl {
-        .k-scheduler,
-        &.k-scheduler {
-            .k-scheduler-agendaday {
-                float: right;
-                margin: 0 0 0 .2em;
-            }
-        }
-    }
-
     .k-safari {
         .k-scheduler-yearview .k-calendar-view .k-month {
             margin-inline: calc( #{$kendo-scheduler-yearview-calendar-gap} / 2);

package/scss/scheduler/_variables.scss

@@ -18,17 +18,17 @@ $kendo-scheduler-line-height: var( --kendo-scheduler-line-height, var( --kendo-l
 
 /// The background color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-bg: var( --kendo-scheduler-bg, k-color(surface-alt) ) !default;
+$kendo-scheduler-bg: var( --kendo-scheduler-bg, k-color(app-surface) ) !default;
 /// The text color of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-text: var( --kendo-scheduler-text, k-color(on-app-surface) ) !default;
 /// The border color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-border: var( --kendo-scheduler-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-scheduler-border: var( --kendo-scheduler-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The background color of the selected row in Scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-bg: var( --kendo-scheduler-selected-bg, k-color(primary-subtle) ) !default;
+$kendo-scheduler-selected-bg: var( --kendo-scheduler-selected-bg, k-color(primary-active) ) !default;
 /// The text color of the selected row in Scheduler.
 /// @group scheduler
 $kendo-scheduler-selected-text: var( --kendo-scheduler-selected-text, $kendo-scheduler-text ) !default;
@@ -38,20 +38,20 @@ $kendo-scheduler-selected-border: var( --kendo-scheduler-selected-border, $kendo
 
 /// The background color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-bg: var( --kendo-scheduler-toolbar-bg, var( --kendo-toolbar-bg, $kendo-toolbar-bg ) ) !default;
+$kendo-scheduler-toolbar-bg: var( --kendo-scheduler-toolbar-bg, k-color(app-surface) ) !default;
 /// The text color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-text: var( --kendo-scheduler-toolbar-text, var( --kendo-toolbar-text, $kendo-toolbar-text ) ) !default;
+$kendo-scheduler-toolbar-text: var( --kendo-scheduler-toolbar-text, k-color(on-app-surface) ) !default;
 /// The border color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-border: var( --kendo-scheduler-toolbar-border, var( --kendo-toolbar-border, $kendo-toolbar-border ) ) !default;
+$kendo-scheduler-toolbar-border: var( --kendo-scheduler-toolbar-border, k-color(border) ) !default;
 /// The gradient of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-gradient: var( --kendo-scheduler-toolbar-gradient, null ) !default; // $kendo-toolbar-gradient
 
 /// The background color of the Scheduler footer.
-/// @group scheduler
-$kendo-scheduler-footer-bg: var( --kendo-scheduler-footer-bg, var( --kendo-toolbar-bg, $kendo-toolbar-bg ) ) !default;
+/// @group schedulers
+$kendo-scheduler-footer-bg: var( --kendo-scheduler-footer-bg, k-color(app-surface) ) !default;
 /// The text color of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-text: var( --kendo-scheduler-footer-text, var( --kendo-toolbar-text, $kendo-toolbar-text ) ) !default;
@@ -83,7 +83,7 @@ $kendo-scheduler-event-min-height: var( --kendo-scheduler-event-min-height, calc
 $kendo-scheduler-event-bg: var( --kendo-scheduler-event-bg, k-color(primary) ) !default;
 /// The text color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(app-surface) ) !default;
+$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(on-primary) ) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: var( --kendo-scheduler-event-border, $kendo-scheduler-event-bg ) !default;
@@ -96,10 +96,10 @@ $kendo-scheduler-event-shadow: var( --kendo-scheduler-event-shadow, null ) !defa
 
 /// The background color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-bg: var( --kendo-scheduler-event-hover-bg, k-color(base-hover) ) !default;
+$kendo-scheduler-event-hover-bg: var( --kendo-scheduler-event-hover-bg, k-color(primary-hover) ) !default;
 /// The text color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-text: var( --kendo-scheduler-event-hover-text, k-color(on-base) ) !default;
+$kendo-scheduler-event-hover-text: var( --kendo-scheduler-event-hover-text, k-color(on-primary) ) !default;
 /// The border color of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-border: var( --kendo-scheduler-event-hover-border, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;

package/scss/signature/_layout.scss

@@ -4,12 +4,4 @@
 
 @mixin kendo-signature--layout() {
     @include kendo-signature--layout-base();
-
-    .k-signature {
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            opacity: $kendo-signature-disabled-opacity;
-        }
-    }
 }

package/scss/signature/_theme.scss

@@ -9,7 +9,7 @@
         &[disabled],
         &.k-disabled {
             .k-signature-line {
-                border-bottom-color: $kendo-signature-line-disabled-color;
+                border-block-end-color: $kendo-signature-line-disabled-color;
             }
         }
     }

package/scss/signature/_variables.scss

@@ -24,10 +24,6 @@ $kendo-signature-sm-padding-y: var( --kendo-signature-sm-padding-y, k-spacing(0.
 $kendo-signature-md-padding-y: var( --kendo-signature-md-padding-y, k-spacing(1) ) !default;
 $kendo-signature-lg-padding-y: var( --kendo-signature-lg-padding-y, k-spacing(1.5) ) !default;
 
-/// The opacity of the disabled signature component.
-/// @group signature
-$kendo-signature-disabled-opacity: var( --kendo-signature-disabled-opacity, .3 ) !default;
-
 /// The bottom-border width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-width: var( --kendo-signature-line-width, 1px ) !default;
@@ -36,10 +32,10 @@ $kendo-signature-line-width: var( --kendo-signature-line-width, 1px ) !default;
 $kendo-signature-line-style: var( --kendo-signature-line-style, dashed ) !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: var( --kendo-signature-line-color, color-mix(in srgb, k-color(info) 40%, transparent) ) !default;
+$kendo-signature-line-color: var( --kendo-signature-line-color, k-color(info-emphasis) ) !default;
 /// The color of the row line of the disabled signature component.
 /// @group signature
-$kendo-signature-line-disabled-color: var( --kendo-signature-line-disabled-color, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-signature-line-disabled-color: var( --kendo-signature-line-disabled-color, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-sm-line-size: var( --kendo-signature-sm-line-size, calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) ) !default;

package/scss/skeleton/_variables.scss

@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: var( --kendo-skeleton-circle-border-radius
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, color-mix(in srgb, k-color(on-app-surface) 23%, transparent) ) !default;
+$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, color-mix(in srgb, k-color(on-app-surface) 9%, transparent) ) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: var( --kendo-skeleton-wave-bg, k-color(base) ) !default;

package/scss/slider/_layout.scss

@@ -8,12 +8,10 @@
     @include kendo-slider--layout-base();
 
     .k-slider {
-        width: min-content;
-        height: min-content;
         gap: $kendo-slider-spacing;
 
         .k-label {
-            font-size: .875em;
+            font-size: var(--kendo-font-size-sm, inherit);
             pointer-events: all;
         }
 
@@ -25,6 +23,21 @@
                 cursor: default;
             }
         }
+
+        .k-draghandle {
+
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 12px;
+                height: 12px;
+                border-radius: k-border-radius(full);
+            }
+        }
     }
 
     // Fluent uses k-slider-thumb instead of k-draghandle
@@ -44,6 +57,7 @@
             transition: none;
         }
     }
+
     .k-slider-thumb {
         width: $kendo-slider-thumb-size;
         height: $kendo-slider-thumb-size;
@@ -68,6 +82,7 @@
         display: contents;
         pointer-events: none;
     }
+
     .k-slider-tick {
         background-color: transparent;
         background-position: center center;
@@ -90,14 +105,13 @@
 
     // Horizontal slider
     .k-horizontal-slider {
-        width: $kendo-slider-size;
 
         .k-slider-track-wrap {
             height: $kendo-slider-alt-size;
         }
 
         .k-slider-thumb {
-            top: 50%;
+            inset-block-start: 50%;
             transform: translate(-50%, -50%);
         }
         .k-slider-thumb:focus,
@@ -122,60 +136,12 @@
         }
     }
 
-    // Vertical slider
-    .k-vertical-slider {
-        height: $kendo-slider-size;
-
-        .k-slider-track-wrap {
-            width: $kendo-slider-alt-size;
-        }
-        .k-slider-thumb {
-            left: 50%;
-            transform: translate(-50%, 50%);
-        }
-        .k-slider-thumb:focus,
-        .k-slider-thumb:active {
-            transform: if( $kendo-slider-thumb-active-scale, translate(-50%, 50%) scale($kendo-slider-thumb-active-scale), null );
-        }
-        .k-slider-thumb-start {
-            bottom: calc( var( --kendo-slider-start, 0) * 1% );
-        }
-        .k-slider-thumb-end {
-            bottom: calc( var( --kendo-slider-end, 0) * 1% );
-        }
-
-        // Transitions
-        &.k-slider-transitions {
-            .k-slider-selection {
-                transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
-            }
-            .k-slider-thumb {
-                transition: bottom $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-thumb-transition-speed $kendo-slider-thumb-transition-function;
-            }
-        }
-    }
-
-    // RTL specific for fluent thumb classes
-    .k-slider-rtl {
-        &.k-horizontal-slider {
-            .k-slider-thumb {
-                transform: translate(50%, -50%);
-            }
-            .k-slider-thumb:focus,
-            .k-slider-thumb:active {
-                transform: if( $kendo-slider-thumb-active-scale, translate(50%, -50%) scale($kendo-slider-thumb-active-scale), null );
-            }
-        }
-    }
-
     // Aliases - fluent specific thumb classes
-    .k-slider .k-button { @extend .k-slider-button !optional; }
     .k-tick { @extend .k-slider-tick !optional; }
     .k-draghandle { @extend .k-slider-thumb !optional; }
     .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
     .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
     .k-slider-horizontal { @extend .k-horizontal-slider !optional; }
-    .k-slider-vertical { @extend .k-vertical-slider !optional; }
     .k-tick-horizontal { @extend .k-slider-tick-vertical !optional; }
     .k-tick-vertical { @extend .k-slider-tick-horizontal !optional; }
 

package/scss/slider/_theme.scss

@@ -10,6 +10,28 @@
     .k-slider {
         color: $kendo-slider-text;
 
+        .k-slider-thumb {
+
+            &::after {
+                background: k-color(primary);
+            }
+
+            &:hover::after,
+            &.k-hover::after {
+                background: k-color(primary-hover);
+            }
+
+            &:active::after,
+            &.k-active::after,
+            &.k-selected::after {
+                background: k-color(primary-active);
+            }
+        }
+
+        .k-label {
+            color: k-color(subtle);
+        }
+
         &.k-disabled {
             color: $kendo-slider-disabled-text;
 
@@ -23,8 +45,13 @@
 
             .k-slider-thumb {
                 border-color: $kendo-slider-thumb-disabled-border;
+
+                &::after {
+                    background: color-mix(in srgb, k-color(on-app-surface) 30%, transparent);
+                }
             }
         }
+
     }
 
 

package/scss/slider/_variables.scss

@@ -33,7 +33,7 @@ $kendo-slider-track-size: var( --kendo-slider-track-size, #{k-spacing(1)} ) !def
 $kendo-slider-track-border-radius: var( --kendo-slider-track-border-radius, #{k-spacing(0.5)} ) !default;
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: var( --kendo-slider-track-bg, #{k-color(base-emphasis)} ) !default;
+$kendo-slider-track-bg: var( --kendo-slider-track-bg, #{k-color(border)} ) !default;
 /// The border color of the Slider track.
 /// @group slider
 $kendo-slider-track-border: var( --kendo-slider-track-border, inherit ) !default;
@@ -44,10 +44,10 @@ $kendo-slider-selection-bg: var( --kendo-slider-selection-bg, #{k-color(primary)
 
 /// The default size of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-size: var( --kendo-slider-thumb-size, 16px ) !default;
+$kendo-slider-thumb-size: var( --kendo-slider-thumb-size, 18px ) !default;
 /// The default border width of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-width: var( --kendo-slider-thumb-border-width, #{k-spacing(0.5)} ) !default;
+$kendo-slider-thumb-border-width: var( --kendo-slider-thumb-border-width, 1px ) !default;
 /// The border radius of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-border-radius: var( --kendo-slider-thumb-border-radius, 999em ) !default;
@@ -63,7 +63,7 @@ $kendo-slider-thumb-bg: var( --kendo-slider-thumb-bg, #{k-color(surface-alt)} )
 $kendo-slider-thumb-text: var( --kendo-slider-thumb-text, inherit ) !default;
 /// The border color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border: var( --kendo-slider-thumb-border, #{k-color(primary)} ) !default;
+$kendo-slider-thumb-border: var( --kendo-slider-thumb-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The gradient of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-gradient: var( --kendo-slider-thumb-gradient, transparent ) !default;
@@ -76,7 +76,7 @@ $kendo-slider-thumb-hover-bg: var( --kendo-slider-thumb-hover-bg, #{$kendo-slide
 $kendo-slider-thumb-hover-text: var( --kendo-slider-thumb-hover-text, inherit ) !default;
 /// The border color of the hovered Slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-border: var( --kendo-slider-thumb-hover-border, #{k-color(primary-hover)} ) !default;
+$kendo-slider-thumb-hover-border: var( --kendo-slider-thumb-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 /// The gradient of the hovered Slider thumb.
 /// @group slider
 $kendo-slider-thumb-hover-gradient: var( --kendo-slider-thumb-hover-gradient, transparent ) !default;
@@ -112,10 +112,10 @@ $kendo-slider-thumb-focus-gradient: var( --kendo-slider-thumb-focus-gradient, tr
 $kendo-slider-disabled-text: var( --kendo-slider-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 70%, transparent)} ) !default;
 /// The background color of the disabled Slider track.
 /// @group slider
-$kendo-slider-track-disabled-bg: var( --kendo-slider-track-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 6%, transparent)} ) !default;
+$kendo-slider-track-disabled-bg: var( --kendo-slider-track-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 14%, transparent)} ) !default;
 /// The background color of the disabled Slider's track selection.
 /// @group slider
-$kendo-slider-selection-disabled-bg: var( --kendo-slider-selection-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
+$kendo-slider-selection-disabled-bg: var( --kendo-slider-selection-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 30%, transparent)} ) !default;
 /// The background color of the disabled Slider thumb.
 /// @group slider
 $kendo-slider-thumb-disabled-border: var( --kendo-slider-thumb-disabled-border, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;

package/scss/split-button/_layout.scss

@@ -5,52 +5,4 @@
 
 @mixin kendo-split-button--layout() {
     @include kendo-split-button--layout-base();
-
-    .k-split-button {
-        > .k-button:first-child {
-            border-inline-end-width: 0;
-        }
-
-        > .k-button:last-child {
-            border-inline-start-width: 0;
-        }
-    }
-
-    .k-split-button-arrow {
-        .k-button-icon {
-            &::after {
-                content:"";
-                width: $kendo-split-button-arrow-delimiter-line-size;
-                height: $kendo-split-button-arrow-delimiter-size;
-                position: absolute;
-                top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
-                background: $kendo-split-button-arrow-delimiter-bg;
-                z-index: 2;
-            }
-        }
-
-        @each $size, $size-props in $kendo-split-button-sizes {
-            &.k-button-#{$size} {
-                .k-button-icon {
-                    &::after {
-                        inset-inline-start: calc( #{$size-props} * -1 );
-                    }
-                }
-            }
-        }
-    }
-
-    // Sizes
-    @each $size, $size-props in $kendo-button-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-
-        .k-button-#{$size}.k-split-button-arrow {
-            .k-button-icon {
-                min-width: calc( #{$_font-size} * #{$_line-height} );
-            }
-        }
-    }
 }
-
-

package/scss/split-button/_variables.scss

@@ -3,33 +3,23 @@
 
 /// The vertical padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-y: var( --kendo-split-button-sm-arrow-padding-y, #{k-spacing(1)} ) !default;
+$kendo-split-button-sm-arrow-padding-y: var( --kendo-split-button-sm-arrow-padding-y, calc( #{k-spacing(0.5)} + 1px ) ) !default;
 /// The vertical padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-y: var( --kendo-split-button-md-arrow-padding-y, #{k-spacing(1.5)} ) !default;
+$kendo-split-button-md-arrow-padding-y: var( --kendo-split-button-md-arrow-padding-y, calc( #{k-spacing(1)} + 1px ) ) !default;
 /// The vertical padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-y: var( --kendo-split-button-lg-arrow-padding-y, #{k-spacing(2)} ) !default;
+$kendo-split-button-lg-arrow-padding-y: var( --kendo-split-button-lg-arrow-padding-y, calc( #{k-spacing(2)} + 1px ) ) !default;
 
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-x: var( --kendo-split-button-sm-arrow-padding-x, #{k-spacing(1)} ) !default;
+$kendo-split-button-sm-arrow-padding-x: var( --kendo-split-button-sm-arrow-padding-x, calc( #{k-spacing(0.5)} + 1px ) ) !default;
 /// The horizontal padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-x: var( --kendo-split-button-md-arrow-padding-x, #{k-spacing(1.5)} ) !default;
+$kendo-split-button-md-arrow-padding-x: var( --kendo-split-button-md-arrow-padding-x, calc( #{k-spacing(0.5)} + 1px ) ) !default;
 /// The horizontal padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-x: var( --kendo-split-button-lg-arrow-padding-x, #{k-spacing(2)} ) !default;
-
-/// The height of the SplitButton arrow delimiter.
-/// @group split-button
-$kendo-split-button-arrow-delimiter-size: calc( #{$kendo-button-inner-calc-size} / 2 ) !default;
-/// The width of the SplitButton arrow delimiter.
-/// @group split-button
-$kendo-split-button-arrow-delimiter-line-size: var( --kendo-split-button-arrow-delimiter-line-size, 1px ) !default;
-/// The background color of the SplitButton arrow delimiter.
-/// @group split-button
-$kendo-split-button-arrow-delimiter-bg: var( --kendo-split-button-arrow-delimiter-bg, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
+$kendo-split-button-lg-arrow-padding-x: var( --kendo-split-button-lg-arrow-padding-x, calc( #{k-spacing(1.5)} + 1px ) ) !default;
 
 /// The sizes map for the SplitButton.
 /// @group split-button

package/scss/splitter/_variables.scss

@@ -16,58 +16,58 @@ $kendo-splitter-font-family: var( --kendo-splitter-font-family, var( --kendo-fon
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: var( --kendo-splitter-bg, #{k-color(surface-alt)} ) !default;
+$kendo-splitter-bg: var( --kendo-splitter-bg, k-color(surface-alt) ) !default;
 /// The text color of the Splitter.
 /// @group splitter
-$kendo-splitter-text: var( --kendo-splitter-text, #{k-color(on-app-surface)} ) !default;
+$kendo-splitter-text: var( --kendo-splitter-text, k-color(base-on-surface) ) !default;
 /// The border color of the Splitter.
 /// @group splitter
-$kendo-splitter-border: var( --kendo-splitter-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-splitter-border: var( --kendo-splitter-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
-$kendo-splitter-splitbar-size: var( --kendo-splitter-splitbar-size, #{k-spacing(3)} ) !default;
+$kendo-splitter-splitbar-size: var( --kendo-splitter-splitbar-size, k-spacing(3) ) !default;
 /// The length of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-length: var( --kendo-splitter-drag-handle-length, #{k-spacing(5)} ) !default;
+$kendo-splitter-drag-handle-length: var( --kendo-splitter-drag-handle-length, k-spacing(5) ) !default;
 /// The thickness of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-thickness: var( --kendo-splitter-drag-handle-thickness, #{k-spacing(0.5)} ) !default;
+$kendo-splitter-drag-handle-thickness: var( --kendo-splitter-drag-handle-thickness, k-spacing(0.5) ) !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: var( --kendo-splitter-drag-icon-margin, #{k-spacing(2)} ) !default;
+$kendo-splitter-drag-icon-margin: var( --kendo-splitter-drag-icon-margin, k-spacing(2) ) !default;
 
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: var( --kendo-splitter-collapse-icon-padding-x, null ) !default;
 /// The vertical padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-y: var( --kendo-splitter-collapse-icon-padding-y, #{k-spacing(.5)} ) !default;
+$kendo-splitter-collapse-icon-padding-y: var( --kendo-splitter-collapse-icon-padding-y, k-spacing(.5) ) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-bg: var( --kendo-splitbar-bg, #{k-color(surface)} ) !default;
+$kendo-splitbar-bg: var( --kendo-splitbar-bg, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: var( --kendo-splitbar-text, #{k-color(on-app-surface)} ) !default;
+$kendo-splitbar-text: var( --kendo-splitbar-text, k-color(base-on-subtle) ) !default;
 
 /// The hover background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-bg: var( --kendo-splitbar-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-splitbar-hover-bg: var( --kendo-splitbar-hover-bg, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 /// The hover text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-text: var( --kendo-splitbar-hover-text, #{$kendo-splitbar-text} ) !default;
+$kendo-splitbar-hover-text: var( --kendo-splitbar-hover-text, $kendo-splitbar-text ) !default;
 
 /// The selected background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-bg: var( --kendo-splitbar-selected-bg, #{k-color(primary)} ) !default;
+$kendo-splitbar-selected-bg: var( --kendo-splitbar-selected-bg, k-color(primary) ) !default;
 /// The selected text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-text: var( --kendo-splitbar-selected-text, #{k-color(surface-alt)} ) !default;
+$kendo-splitbar-selected-text: var( --kendo-splitbar-selected-text, k-color(on-primary) ) !default;
 
 /// The size of the Splitter static split bar.
 /// @group splitter
-$kendo-splitter-splitbar-static-size: var( --kendo-splitter-splitbar-static-size, #{k-spacing(0.5)} ) !default;
+$kendo-splitter-splitbar-static-size: var( --kendo-splitter-splitbar-static-size, k-spacing(0.5) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with (
     $kendo-splitter-border-width: $kendo-splitter-border-width,