@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/slider/_theme.scss

@@ -1,72 +1,63 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/slider/_theme.scss" as *;
 
 @mixin kendo-slider--theme() {
 
+     @include kendo-slider--theme-base();
+
     // Slider
     .k-slider {
-        color: var( --kendo-slider-text, #{$kendo-slider-text} );
+        color: $kendo-slider-text;
 
         &.k-disabled {
-            --kendo-slider-text: var( --kendo-slider-disabled-text, #{$kendo-slider-disabled-text} );
-            --kendo-slider-track-bg: var( --kendo-slider-track-disabled-bg, #{$kendo-slider-track-disabled-bg} );
-            --kendo-slider-selection-bg: var( --kendo-slider-selection-disabled-bg, #{$kendo-slider-selection-disabled-bg} );
-            --kendo-slider-thumb-border: var( --kendo-slider-thumb-disabled-border, #{$kendo-slider-thumb-disabled-border});
-        }
-    }
+            color: $kendo-slider-disabled-text;
 
+            .k-slider-track {
+                background-color: $kendo-slider-track-disabled-bg;
+            }
 
-    // Slider track
-    .k-slider-track {
-        background-color: var( --kendo-slider-track-bg, #{$kendo-slider-track-bg} );
-    }
-
+            .k-slider-selection {
+                background-color: $kendo-slider-selection-disabled-bg;
+            }
 
-    // Slider selection
-    .k-slider-selection {
-        background-color:var( --kendo-slider-selection-bg, #{$kendo-slider-selection-bg} );
+            .k-slider-thumb {
+                border-color: $kendo-slider-thumb-disabled-border;
+            }
+        }
     }
 
 
     // Slider thumb
     .k-slider-thumb {
-        color: var( --kendo-slider-thumb-text,  #{$kendo-slider-thumb-text});
-        background-color: var( --kendo-slider-thumb-bg,  #{$kendo-slider-thumb-bg});
-        border-color: var( --kendo-slider-thumb-border,  #{$kendo-slider-thumb-border});
-        background-image: linear-gradient( var( --kendo-slider-thumb-gradient,  #{$kendo-slider-thumb-gradient}), transparent, transparent ) ;
+        color: $kendo-slider-thumb-text;
+        background-color: $kendo-slider-thumb-bg;
+        border-color: $kendo-slider-thumb-border;
+        background-image: linear-gradient( $kendo-slider-thumb-gradient, transparent, transparent );
 
         &:hover,
         &.k-hover {
-            --kendo-slider-thumb-bg: #{$kendo-slider-thumb-hover-bg};
-            --kendo-slider-thumb-text: #{$kendo-slider-thumb-hover-text};
-            --kendo-slider-thumb-border: #{$kendo-slider-thumb-hover-border};
-            --kendo-slider-thumb-gradient: #{$kendo-slider-thumb-hover-gradient};
+            background-color: $kendo-slider-thumb-hover-bg;
+            color: $kendo-slider-thumb-hover-text;
+            border-color: $kendo-slider-thumb-hover-border;
+            background-image: linear-gradient( $kendo-slider-thumb-hover-gradient, transparent, transparent );
         }
 
         &:active,
         &.k-active {
-            --kendo-slider-thumb-bg: #{$kendo-slider-thumb-active-bg};
-            --kendo-slider-thumb-text: #{$kendo-slider-thumb-active-text};
-            --kendo-slider-thumb-border: #{$kendo-slider-thumb-active-border};
-            --kendo-slider-thumb-gradient: #{$kendo-slider-thumb-active-gradient};
+            background-color: $kendo-slider-thumb-active-bg;
+            color: $kendo-slider-thumb-active-text;
+            border-color: $kendo-slider-thumb-active-border;
+            background-image: linear-gradient( $kendo-slider-thumb-active-gradient, transparent, transparent );
         }
 
         &:focus,
         &.k-focus {
-            --kendo-slider-thumb-bg: #{$kendo-slider-thumb-focus-bg};
-            --kendo-slider-thumb-text: #{$kendo-slider-thumb-focus-text};
-            --kendo-slider-thumb-border: #{$kendo-slider-thumb-focus-border};
-            --kendo-slider-thumb-gradient: #{$kendo-slider-thumb-focus-gradient};
+            background-color: $kendo-slider-thumb-focus-bg;
+            color: $kendo-slider-thumb-focus-text;
+            border-color: $kendo-slider-thumb-focus-border;
+            background-image: linear-gradient( $kendo-slider-thumb-focus-gradient, transparent, transparent );
         }
     }
 
-    .k-slider-horizontal .k-tick {
-        background-image: url(#{$kendo-slider-tick-v-image});
-    }
-
-    .k-slider-vertical .k-tick {
-        background-image: url(#{$kendo-slider-tick-h-image});
-    }
-
-
 }

package/scss/slider/_variables.scss

@@ -4,140 +4,157 @@
 
 /// The default size of the Slider.
 /// @group slider
-$kendo-slider-size: 200px !default;
+$kendo-slider-size: var( --kendo-slider-size, 200px ) !default;
 /// The default size of the Slider's track wrap.
 /// @group slider
-$kendo-slider-alt-size: 26px !default;
+$kendo-slider-alt-size: var( --kendo-slider-alt-size, 26px ) !default;
 /// The spacing of the Slider.
 /// @group slider
-$kendo-slider-spacing: k-spacing(2) !default;
+$kendo-slider-spacing: var( --kendo-slider-spacing, #{k-spacing(2)} ) !default;
 
 /// The font family of the Slider.
 /// @group slider
-$kendo-slider-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-slider-font-family: var( --kendo-slider-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Slider.
 /// @group slider
-$kendo-slider-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-slider-font-size: var( --kendo-slider-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Slider.
 /// @group slider
-$kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-slider-line-height: var( --kendo-slider-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The text color of the Slider.
 /// @group slider
-$kendo-slider-text: inherit !default;
+$kendo-slider-text: var( --kendo-slider-text, inherit ) !default;
 
 /// The size of the Slider track.
 /// @group slider
-$kendo-slider-track-size: k-spacing(1) !default;
+$kendo-slider-track-size: var( --kendo-slider-track-size, #{k-spacing(1)} ) !default;
 /// The border radius of the Slider track.
 /// @group slider
-$kendo-slider-track-border-radius: k-spacing(0.5) !default;
+$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: k-color(base-emphasis) !default;
+$kendo-slider-track-bg: var( --kendo-slider-track-bg, #{k-color(base-emphasis)} ) !default;
 /// The border color of the Slider track.
 /// @group slider
-$kendo-slider-track-border: inherit !default;
+$kendo-slider-track-border: var( --kendo-slider-track-border, inherit ) !default;
 
 /// The background color of the Slider's track selection.
 /// @group slider
-$kendo-slider-selection-bg: k-color(primary) !default;
+$kendo-slider-selection-bg: var( --kendo-slider-selection-bg, #{k-color(primary)} ) !default;
 
 /// The default size of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-size: 16px !default;
+$kendo-slider-thumb-size: var( --kendo-slider-thumb-size, 16px ) !default;
 /// The default border width of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-width: k-spacing(0.5) !default;
+$kendo-slider-thumb-border-width: var( --kendo-slider-thumb-border-width, #{k-spacing(0.5)} ) !default;
 /// The border radius of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-radius: 999em !default;
+$kendo-slider-thumb-border-radius: var( --kendo-slider-thumb-border-radius, 999em ) !default;
 /// The transition scale of the active Slider thumb.
 /// @group slider
 $kendo-slider-thumb-active-scale: null !default;
 
 /// The background color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-bg: k-color(surface-alt) !default;
+$kendo-slider-thumb-bg: var( --kendo-slider-thumb-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-text: inherit !default;
+$kendo-slider-thumb-text: var( --kendo-slider-thumb-text, inherit ) !default;
 /// The border color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border: k-color(primary) !default;
+$kendo-slider-thumb-border: var( --kendo-slider-thumb-border, #{k-color(primary)} ) !default;
 /// The gradient of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-gradient: transparent !default;
+$kendo-slider-thumb-gradient: var( --kendo-slider-thumb-gradient, transparent ) !default;
 
 /// The background color of the hovered Slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-bg: $kendo-slider-thumb-bg !default;
+$kendo-slider-thumb-hover-bg: var( --kendo-slider-thumb-hover-bg, #{$kendo-slider-thumb-bg} ) !default;
 /// The text color of the hovered Slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-text: inherit !default;
+$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: k-color(primary-hover) !default;
+$kendo-slider-thumb-hover-border: var( --kendo-slider-thumb-hover-border, #{k-color(primary-hover)} ) !default;
 /// The gradient of the hovered Slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-gradient: transparent !default;
+$kendo-slider-thumb-hover-gradient: var( --kendo-slider-thumb-hover-gradient, transparent ) !default;
 
 /// The background color of the active Slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-bg: $kendo-slider-thumb-hover-bg !default;
+$kendo-slider-thumb-active-bg: var( --kendo-slider-thumb-active-bg, #{$kendo-slider-thumb-hover-bg} ) !default;
 /// The text color of the active Slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-text: inherit !default;
+$kendo-slider-thumb-active-text: var( --kendo-slider-thumb-active-text, inherit ) !default;
 /// The border color of the active Slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-border: k-color(primary-active) !default;
+$kendo-slider-thumb-active-border: var( --kendo-slider-thumb-active-border, #{k-color(primary-active)} ) !default;
 /// The gradient of the active Slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-gradient: transparent !default;
+$kendo-slider-thumb-active-gradient: var( --kendo-slider-thumb-active-gradient, transparent ) !default;
 
 /// The background color of the focused Slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-bg: $kendo-slider-thumb-hover-bg !default;
+$kendo-slider-thumb-focus-bg: var( --kendo-slider-thumb-focus-bg, #{$kendo-slider-thumb-hover-bg} ) !default;
 /// The text color of the focused Slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-text: inherit !default;
+$kendo-slider-thumb-focus-text: var( --kendo-slider-thumb-focus-text, inherit ) !default;
 /// The border color of the focused Slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-border: $kendo-slider-thumb-active-border !default;
+$kendo-slider-thumb-focus-border: var( --kendo-slider-thumb-focus-border, #{$kendo-slider-thumb-active-border} ) !default;
 /// The gradient of the focused Slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-gradient: transparent !default;
+$kendo-slider-thumb-focus-gradient: var( --kendo-slider-thumb-focus-gradient, transparent ) !default;
 
 /// The text color of the disabled Slider.
 /// @group slider
-$kendo-slider-disabled-text: color-mix(in srgb, k-color(on-app-surface) 70%, transparent) !default;
+$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: 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) 6%, transparent)} ) !default;
 /// The background color of the disabled Slider's track selection.
 /// @group slider
-$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) 46%, transparent)} ) !default;
 /// The background color of the disabled Slider thumb.
 /// @group slider
-$kendo-slider-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-slider-thumb-disabled-border: var( --kendo-slider-thumb-disabled-border, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
 
 
 /// The transition speed of the Slider.
 /// @group slider
-$kendo-slider-transition-speed: .3s !default;
+$kendo-slider-transition-speed: var( --kendo-slider-transition-speed, .3s ) !default;
 /// The transition function of the Slider.
 /// @group slider
-$kendo-slider-transition-function: ease-out !default;
+$kendo-slider-transition-function: var( --kendo-slider-transition-function, ease-out ) !default;
 
 /// The transition speed of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-transition-speed: .4s !default;
+$kendo-slider-thumb-transition-speed: var( --kendo-slider-thumb-transition-speed, .4s ) !default;
 /// The transition function of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
+$kendo-slider-thumb-transition-function: var( --kendo-slider-thumb-transition-function, cubic-bezier(.25, .8, .25, 1) ) !default;
 
 /// The background image of the horizontal Slider tick.
 /// @group slider
-$kendo-slider-tick-h-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+$kendo-slider-tick-h-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
 /// The background image of the vertical Slider tick.
 /// @group slider
-$kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+$kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+
+@forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
+    $kendo-slider-size: $kendo-slider-size,
+    $kendo-slider-alt-size: $kendo-slider-alt-size,
+    $kendo-slider-font-family: $kendo-slider-font-family,
+    $kendo-slider-font-size: $kendo-slider-font-size,
+    $kendo-slider-line-height: $kendo-slider-line-height,
+    $kendo-slider-transition-speed: $kendo-slider-transition-speed,
+    $kendo-slider-transition-function: $kendo-slider-transition-function,
+    $kendo-slider-track-bg: $kendo-slider-track-bg,
+    $kendo-slider-selection-bg: $kendo-slider-selection-bg,
+    $kendo-slider-tick-horizontal-image: $kendo-slider-tick-h-image,
+    $kendo-slider-tick-vertical-image: $kendo-slider-tick-v-image,
+    $kendo-slider-draghandle-active-scale: $kendo-slider-thumb-active-scale,
+    $kendo-slider-track-thickness: $kendo-slider-track-size,
+    $kendo-slider-draghandle-size: $kendo-slider-spacing
+);

package/scss/speech-to-text-button/_layout.scss

@@ -1,13 +1,5 @@
 @use "./_variables.scss" as *;
-
-@mixin kendo-speech-to-text-button--layout-base() {
-
-    .k-speech-to-text-button {
-        &.k-listening {
-            animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/speech-to-text-button/_layout.scss" as *;
 
 @mixin kendo-speech-to-text-button--layout() {
     @include kendo-speech-to-text-button--layout-base();

package/scss/speech-to-text-button/_theme.scss

@@ -1,6 +1,4 @@
-@mixin kendo-speech-to-text-button--theme-base() {
-    .k-speech-to-text-button {}
-}
+@use "@progress/kendo-theme-core/scss/components/speech-to-text-button/_theme.scss" as *;
 
 @mixin kendo-speech-to-text-button--theme() {
     @include kendo-speech-to-text-button--theme-base();

package/scss/split-button/_layout.scss

@@ -1,8 +1,11 @@
+@use "sass:map";
 @use "./_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *;
 
 @mixin kendo-split-button--layout() {
+    @include kendo-split-button--layout-base();
 
-    // Split button
     .k-split-button {
         > .k-button:first-child {
             border-inline-end-width: 0;
@@ -13,40 +16,41 @@
         }
     }
 
-    // Split button arrow
     .k-split-button-arrow {
-        width: auto;
-        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;
-
         .k-button-icon {
-            min-width: 0;
-
             &::after {
                 content:"";
-                width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
-                height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
+                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: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
+                background: $kendo-split-button-arrow-delimiter-bg;
                 z-index: 2;
             }
         }
 
-        // Sizes
         @each $size, $size-props in $kendo-split-button-sizes {
-
             &.k-button-#{$size} {
-                padding: var( --kendo-split-button-arrow-padding-y-#{$size}, #{$size-props} );
-
                 .k-button-icon {
                     &::after {
-                        inset-inline-start: calc( var( --kendo-split-button-delimiter-offset-#{$size}, #{$size-props} ) * -1 );
+                        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/_theme.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/split-button/_theme.scss" as *;
 
 @mixin kendo-split-button--theme() {
-    .k-split-button { }
+    @include kendo-split-button--theme-base();
 }

package/scss/split-button/_variables.scss

@@ -3,33 +3,33 @@
 
 /// The vertical padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
+$kendo-split-button-sm-arrow-padding-y: var( --kendo-split-button-sm-arrow-padding-y, #{$kendo-button-sm-padding-y} ) !default;
 /// The vertical padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
+$kendo-split-button-md-arrow-padding-y: var( --kendo-split-button-md-arrow-padding-y, #{$kendo-button-md-padding-y} ) !default;
 /// The vertical padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
+$kendo-split-button-lg-arrow-padding-y: var( --kendo-split-button-lg-arrow-padding-y, #{$kendo-button-lg-padding-y} ) !default;
 
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-y !default;
+$kendo-split-button-sm-arrow-padding-x: var( --kendo-split-button-sm-arrow-padding-x, #{$kendo-split-button-sm-arrow-padding-y} ) !default;
 /// The horizontal padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-x: $kendo-split-button-md-arrow-padding-y !default;
+$kendo-split-button-md-arrow-padding-x: var( --kendo-split-button-md-arrow-padding-x, #{$kendo-split-button-md-arrow-padding-y} ) !default;
 /// The horizontal padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-x: $kendo-split-button-lg-arrow-padding-y !default;
+$kendo-split-button-lg-arrow-padding-x: var( --kendo-split-button-lg-arrow-padding-x, #{$kendo-split-button-lg-arrow-padding-y} ) !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;
+$kendo-split-button-arrow-delimiter-size: var( --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: 1px !default;
+$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: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$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;
 
 /// The sizes map for the SplitButton.
 /// @group split-button
@@ -38,3 +38,12 @@ $kendo-split-button-sizes: (
     md: $kendo-split-button-md-arrow-padding-y,
     lg: $kendo-split-button-lg-arrow-padding-y
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/split-button/_variables.scss" with (
+    $kendo-split-button-sm-arrow-padding-y: $kendo-split-button-sm-arrow-padding-y,
+    $kendo-split-button-md-arrow-padding-y: $kendo-split-button-md-arrow-padding-y,
+    $kendo-split-button-lg-arrow-padding-y: $kendo-split-button-lg-arrow-padding-y,
+    $kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-x,
+    $kendo-split-button-md-arrow-padding-x: $kendo-split-button-md-arrow-padding-x,
+    $kendo-split-button-lg-arrow-padding-x: $kendo-split-button-lg-arrow-padding-x
+);