@progress/kendo-theme-classic 10.1.0-dev.5 → 10.1.0-dev.6

package/scss/button/_variables.scss

@@ -70,17 +70,17 @@ $kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The calculated height of the Button.
 /// @group button
-$kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 /// The calculated inner height of the Button excluding the border width.
 /// @group button
-$kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
-$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
-$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
-$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
+$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// The sizes map for the Button.
 /// @group button

package/scss/checkbox/_variables.scss

@@ -159,10 +159,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image for a checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#f35800' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // CheckBox label

package/scss/index.scss

@@ -114,6 +114,7 @@
 @forward "./map/_index.scss";
 @forward "./orgchart/_index.scss";
 @forward "./signature/_index.scss";
+@forward "./otp/_index.scss";
 
 
 // Use component modules
@@ -200,8 +201,7 @@
 @use "./switch/_index.scss" as *;
 @use "./upload/_index.scss" as *;
 @use "./dropzone/_index.scss" as *;
-
-
+@use "./otp/_index.scss" as *;
 // Command interfaces
 @use "./action-buttons/_index.scss" as *;
 @use "./appbar/_index.scss" as *;
@@ -372,6 +372,7 @@
     @include kendo-switch--styles();
     @include kendo-upload--styles();
     @include kendo-dropzone--styles();
+    @include kendo-otp--styles();
 
 
     // Command interfaces

package/scss/input/_variables.scss

@@ -73,6 +73,13 @@ $kendo-input-md-line-height: var( --kendo-line-height, normal ) !default;
 /// @group input
 $kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
+/// The calculated height of the Input.
+/// @group input
+$kendo-input-calc-size: calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
 /// The sizes map for the Input components.
 /// @group input
 $kendo-input-sizes: (
@@ -469,6 +476,10 @@ $kendo-picker-flat-hover-focus-border: null !default;
     $kendo-input-sm-line-height: $kendo-input-sm-line-height,
     $kendo-input-md-line-height: $kendo-input-md-line-height,
     $kendo-input-lg-line-height: $kendo-input-lg-line-height,
+    $kendo-input-calc-size: $kendo-input-calc-size,
+    $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
+    $kendo-input-md-calc-size: $kendo-input-md-calc-size,
+    $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
     $kendo-input-sizes: $kendo-input-sizes,
     $kendo-input-bg: $kendo-input-bg,
     $kendo-input-text: $kendo-input-text,

package/scss/otp/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-otp--styles() {
+    @include import-once( "otp" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-otp--layout();
+        @include kendo-otp--theme();
+    }
+}

package/scss/otp/_layout.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/otp/_layout.scss" as *;
+
+@mixin kendo-otp--layout() {
+    @include kendo-otp--layout-base();
+}

package/scss/otp/_theme.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/otp/_theme.scss" as *;
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}

package/scss/otp/_variables.scss

@@ -0,0 +1,77 @@
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+// OTP
+
+/// The gap between the items in the OTP.
+/// @group one-time-password
+$kendo-otp-gap: k-spacing(1.5) !default;
+/// The gap between the items in the small OTP.
+/// @group one-time-password
+$kendo-otp-sm-gap: k-spacing(1) !default;
+/// The gap between the items in the medium OTP.
+/// @group one-time-password
+$kendo-otp-md-gap: $kendo-otp-gap !default;
+/// The gap between the items in the large OTP.
+/// @group one-time-password
+$kendo-otp-lg-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-input-width: $kendo-input-calc-size !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-input-width: $kendo-otp-input-width !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
+
+$kendo-otp-sizes: (
+    sm: (
+        gap: $kendo-otp-sm-gap,
+        separator-padding-x: $kendo-otp-sm-separator-padding-x,
+        input-width: $kendo-otp-sm-input-width
+    ),
+    md: (
+        gap: $kendo-otp-md-gap,
+        separator-padding-x: $kendo-otp-md-separator-padding-x,
+        input-width: $kendo-otp-md-input-width
+    ),
+    lg: (
+        gap: $kendo-otp-lg-gap,
+        separator-padding-x: $kendo-otp-lg-separator-padding-x,
+        input-width: $kendo-otp-lg-input-width
+    )
+) !default;
+
+@forward "@progress/kendo-theme-default/scss/otp/_variables.scss" with (
+    $kendo-otp-gap: $kendo-otp-gap,
+    $kendo-otp-sm-gap: $kendo-otp-sm-gap,
+    $kendo-otp-md-gap: $kendo-otp-md-gap,
+    $kendo-otp-lg-gap: $kendo-otp-lg-gap,
+    $kendo-otp-separator-padding-x: $kendo-otp-separator-padding-x,
+    $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
+    $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
+    $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
+    $kendo-otp-input-width: $kendo-otp-input-width,
+    $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
+    $kendo-otp-md-input-width: $kendo-otp-md-input-width,
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
+    $kendo-otp-sizes: $kendo-otp-sizes
+);

package/scss/radio/_variables.scss

@@ -152,7 +152,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// The image of the checked RadioButton indicator.
 /// @group radio
-$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#ffffff'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

package/scss/tabstrip/_variables.scss

@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal )!default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(0.5) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(1.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,6 +199,32 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 
+/// The left and right scroll overlay of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-md-font-size,
+        line-height: $kendo-tabstrip-md-line-height,
+        item-padding-x: $kendo-tabstrip-md-item-padding-x,
+        item-padding-y: $kendo-tabstrip-md-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with (
     $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
@@ -171,6 +234,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
     $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
     $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
     $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
     $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
     $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
@@ -183,6 +252,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
     $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
     $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
     $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
     $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
     $kendo-tabstrip-item-gradient: $kendo-tabstrip-item-gradient,
@@ -211,5 +286,6 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg,
     $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
     $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
-    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border
+    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay
 );

package/scss/toolbar/_variables.scss

@@ -5,43 +5,56 @@
 
 /// The horizontal padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: k-spacing(2) !default;
+$kendo-toolbar-md-padding-x: $kendo-toolbar-padding-x !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: k-spacing(2) !default;
+$kendo-toolbar-md-padding-y: $kendo-toolbar-padding-y !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;
 
 /// The spacing between the Toolbar tools.
 /// @group toolbar
-$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-spacing: k-spacing(1.5) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: k-spacing(2) !default;
+$kendo-toolbar-md-spacing: $kendo-toolbar-spacing !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: $kendo-button-md-calc-size !default;
+/// The height of the small Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-sm-separator-height: $kendo-button-sm-calc-size !default;
+/// The height of the medium Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-md-separator-height: $kendo-toolbar-separator-height !default;
+/// The height of the large Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-lg-separator-height: $kendo-button-lg-calc-size !default;
+
 /// The width of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
@@ -74,6 +87,10 @@ $kendo-toolbar-gradient: null !default;
 /// The box shadow of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-shadow: null !default;
+/// The left and right scroll overlay of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The text color of the outline Toolbar.
 /// @group toolbar
@@ -90,6 +107,10 @@ $kendo-toolbar-outline-shadow: null !default;
 /// The width of the border around the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+/// The left and right scroll overlay of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The text color of the flat Toolbar.
 /// @group toolbar
@@ -106,6 +127,10 @@ $kendo-toolbar-flat-shadow: null !default;
 /// Border width of the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-border-width: 1px !default;
+/// The left and right scroll overlay of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
@@ -125,17 +150,20 @@ $kendo-toolbar-sizes: (
     sm: (
         padding-x: $kendo-toolbar-sm-padding-x,
         padding-y: $kendo-toolbar-sm-padding-y,
-        spacing: $kendo-toolbar-sm-spacing
+        spacing: $kendo-toolbar-sm-spacing,
+        separator-height: $kendo-toolbar-sm-separator-height
     ),
     md: (
         padding-x: $kendo-toolbar-md-padding-x,
         padding-y: $kendo-toolbar-md-padding-y,
-        spacing: $kendo-toolbar-md-spacing
+        spacing: $kendo-toolbar-md-spacing,
+        separator-height: $kendo-toolbar-md-separator-height
     ),
     lg: (
         padding-x: $kendo-toolbar-lg-padding-x,
         padding-y: $kendo-toolbar-lg-padding-y,
-        spacing: $kendo-toolbar-lg-spacing
+        spacing: $kendo-toolbar-lg-spacing,
+        separator-height: $kendo-toolbar-lg-separator-height
     )
 ) !default;