@progress/kendo-theme-default 10.1.1-dev.0 → 10.2.0-dev.0

package/dist/meta/variables.json

@@ -6381,27 +6381,27 @@
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-sm-width": {
+    "kendo-color-palette-sm-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
     },
-    "kendo-color-palette-tile-sm-height": {
+    "kendo-color-palette-sm-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
     },
-    "kendo-color-palette-tile-md-width": {
+    "kendo-color-palette-md-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-md-height": {
+    "kendo-color-palette-md-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-lg-width": {
+    "kendo-color-palette-lg-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-8, 2rem)"
     },
-    "kendo-color-palette-tile-lg-height": {
+    "kendo-color-palette-lg-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-8, 2rem)"
     },
@@ -6487,9 +6487,33 @@
         "type": "String",
         "value": "var(--kendo-color-border, rgba(0, 0, 0, 0.08))"
     },
+    "kendo-color-gradient-sm-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-color-gradient-sm-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-color-gradient-md-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-color-gradient-md-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-color-gradient-lg-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4\\.5, 1.125rem)"
+    },
+    "kendo-color-gradient-lg-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4\\.5, 1.125rem)"
+    },
     "kendo-color-gradient-sm-width": {
         "type": "Number",
-        "value": "226px"
+        "value": "252px"
     },
     "kendo-color-gradient-md-width": {
         "type": "Number",
@@ -6497,7 +6521,7 @@
     },
     "kendo-color-gradient-lg-width": {
         "type": "Number",
-        "value": "324px"
+        "value": "362px"
     },
     "kendo-color-gradient-sm-gap": {
         "type": "String",
@@ -6533,7 +6557,7 @@
     },
     "kendo-color-gradient-sm-canvas-rectangle-height": {
         "type": "Number",
-        "value": "182px"
+        "value": "180px"
     },
     "kendo-color-gradient-md-canvas-rectangle-height": {
         "type": "Number",
@@ -6581,7 +6605,7 @@
     },
     "kendo-color-gradient-sm-slider-vertical-size": {
         "type": "Number",
-        "value": "182px"
+        "value": "180px"
     },
     "kendo-color-gradient-md-slider-vertical-size": {
         "type": "Number",
@@ -6669,7 +6693,7 @@
     },
     "kendo-color-gradient-lg-input-width": {
         "type": "Number",
-        "value": "62.5px"
+        "value": "62px"
     },
     "kendo-color-gradient-contrast-ratio-font-weight": {
         "type": "String",
@@ -6681,15 +6705,17 @@
     },
     "kendo-color-gradient-sizes": {
         "type": "Map",
-        "value": "(sm: (width: 226px, vertical-slider-height: 182px, rectangle-height: 182px, input-width: 42px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), lg: (width: 324px, vertical-slider-height: 268px, rectangle-height: 268px, input-width: 62.5px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem)))",
+        "value": "(sm: (width: 252px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 42px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), lg: (width: 362px, vertical-slider-height: 268px, rectangle-height: 268px, input-width: 62px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem), padding-x: var(--kendo-spacing-4\\.5, 1.125rem), padding-y: var(--kendo-spacing-4\\.5, 1.125rem)))",
         "prettyValue": {
             "sm": {
-                "width": "226px",
-                "vertical-slider-height": "182px",
-                "rectangle-height": "182px",
+                "width": "252px",
+                "vertical-slider-height": "180px",
+                "rectangle-height": "180px",
                 "input-width": "42px",
                 "gap": "var(--kendo-spacing-3, 0.75rem)",
-                "canvas-gap": "var(--kendo-spacing-3, 0.75rem)"
+                "canvas-gap": "var(--kendo-spacing-3, 0.75rem)",
+                "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                "padding-y": "var(--kendo-spacing-3, 0.75rem)"
             },
             "md": {
                 "width": "272px",
@@ -6697,15 +6723,19 @@
                 "rectangle-height": "180px",
                 "input-width": "46px",
                 "gap": "var(--kendo-spacing-3, 0.75rem)",
-                "canvas-gap": "var(--kendo-spacing-3, 0.75rem)"
+                "canvas-gap": "var(--kendo-spacing-3, 0.75rem)",
+                "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                "padding-y": "var(--kendo-spacing-3, 0.75rem)"
             },
             "lg": {
-                "width": "324px",
+                "width": "362px",
                 "vertical-slider-height": "268px",
                 "rectangle-height": "268px",
-                "input-width": "62.5px",
+                "input-width": "62px",
                 "gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                "canvas-gap": "var(--kendo-spacing-4\\.5, 1.125rem)"
+                "canvas-gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                "padding-x": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                "padding-y": "var(--kendo-spacing-4\\.5, 1.125rem)"
             }
         }
     },

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.1.1-dev.0",
+    "version": "10.2.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "10.1.1-dev.0",
+  "version": "10.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.1-dev.0",
-    "@progress/kendo-theme-utils": "10.1.1-dev.0"
+    "@progress/kendo-theme-core": "10.2.0-dev.0",
+    "@progress/kendo-theme-utils": "10.2.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "462767332d935e8ff5cc24a210024d62f95c5e69"
+  "gitHead": "8131b2e63fdb04068216ad13c1d1dfa74ed6cd97"
 }

package/scss/coloreditor/_layout.scss

@@ -108,24 +108,6 @@
         .k-colorpalette {
             align-self: center;
         }
-
-        .k-colorpalette-tile {
-            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
-            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
-        }
-    }
-
-    // ColorPalette sizes
-    @each $size, $size-props in $kendo-color-palette-sizes {
-        $_tile-width: map.get( $size-props, width );
-        $_tile-height: map.get( $size-props, height );
-
-        .k-coloreditor-#{$size} {
-            .k-colorpalette-tile {
-                width: $_tile-width;
-                height: $_tile-height;
-            }
-        }
     }
 
     // Footer

package/scss/colorgradient/_layout.scss

@@ -132,10 +132,14 @@
         $_rectangle-height: map.get( $size-props, rectangle-height );
         $_input-width: map.get( $size-props, input-width );
         $_canvas-gap: map.get( $size-props, canvas-gap );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
 
         .k-colorgradient-#{$size} {
             width: $_width;
             gap: $_gap;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
 
             .k-colorgradient-inputs {
                 .k-numerictextbox {

package/scss/colorgradient/_variables.scss

@@ -44,15 +44,34 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The vertical padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-y: $kendo-color-gradient-spacer !default;
+/// The horizontal padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-x: $kendo-color-gradient-padding-y !default;
+/// The vertical padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-y: $kendo-color-gradient-spacer !default;
+/// The horizontal padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-x: $kendo-color-gradient-padding-y !default;
+/// The vertical padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-x: k-spacing(4.5) !default;
+
 /// The width of the small ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-sm-width: 226px !default;
+$kendo-color-gradient-sm-width: 252px !default;
 /// The width of the medium ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
 /// The width of the large ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-lg-width: 324px !default;
+$kendo-color-gradient-lg-width: 362px !default;
 
 /// The spacing between the sections of the small ColorGradient.
 /// @group color-gradient
@@ -82,7 +101,7 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// The height the small ColorGradient canvas hsv rectangle.
 /// @group color-gradient
-$kendo-color-gradient-sm-canvas-rectangle-height: 182px !default;
+$kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
 /// The height the medium ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
@@ -121,7 +140,7 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 /// The height of the small ColorGradient vertical slider.
 /// @group color-gradient
-$kendo-color-gradient-sm-slider-vertical-size: 182px !default;
+$kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
 /// The height of the medium ColorGradient vertical slider.
 /// @group color-gradient
 $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
@@ -191,7 +210,7 @@ $kendo-color-gradient-sm-input-width: 42px !default;
 $kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
 /// The width of the large ColorGradient input.
 /// @group color-gradient
-$kendo-color-gradient-lg-input-width: 62.5px !default;
+$kendo-color-gradient-lg-input-width: 62px !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
@@ -209,7 +228,9 @@ $kendo-color-gradient-sizes: (
         rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
         input-width: $kendo-color-gradient-sm-input-width,
         gap: $kendo-color-gradient-sm-gap,
-        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap,
+        padding-x: $kendo-color-gradient-sm-padding-x,
+        padding-y: $kendo-color-gradient-sm-padding-y
     ),
     md: (
         width: $kendo-color-gradient-md-width,
@@ -217,7 +238,9 @@ $kendo-color-gradient-sizes: (
         rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
         input-width: $kendo-color-gradient-md-input-width,
         gap: $kendo-color-gradient-md-gap,
-        canvas-gap: $kendo-color-gradient-md-canvas-gap
+        canvas-gap: $kendo-color-gradient-md-canvas-gap,
+        padding-x: $kendo-color-gradient-md-padding-x,
+        padding-y: $kendo-color-gradient-md-padding-y
     ),
     lg: (
         width: $kendo-color-gradient-lg-width,
@@ -225,6 +248,8 @@ $kendo-color-gradient-sizes: (
         rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
         input-width: $kendo-color-gradient-lg-input-width,
         gap: $kendo-color-gradient-lg-gap,
-        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap,
+        padding-x: $kendo-color-gradient-lg-padding-x,
+        padding-y: $kendo-color-gradient-lg-padding-y
     )
 ) !default;

package/scss/colorpalette/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
 
@@ -54,6 +55,19 @@
         }
     }
 
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }
 
 

package/scss/colorpalette/_variables.scss

@@ -20,22 +20,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
@@ -51,15 +51,15 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;

package/scss/tabstrip/_layout.scss

@@ -281,6 +281,10 @@
             .k-item {
                 @include border-top-radius( $kendo-tabstrip-item-border-radius );
                 border-bottom-width: 0;
+
+                .k-link {
+                    justify-content: center;
+                }
             }
             .k-item:active,
             .k-item.k-active {
@@ -304,6 +308,10 @@
             .k-item {
                 @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
                 border-top-width: 0;
+
+                .k-link {
+                    justify-content: center;
+                }
             }
             .k-item:active,
             .k-item.k-active {

package/scss/tabstrip/_theme.scss

@@ -129,21 +129,21 @@
             }
         }
     }
-}
-
-// RTL
-.k-rtl,
-[dir="rtl"] {
-    &.k-tabstrip-scrollable-overlay {
-        &.k-tabstrip-top,
-        &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper {
-                &::before {
-                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                }
 
-                &::after {
-                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        &.k-tabstrip-scrollable-overlay {
+            &.k-tabstrip-top,
+            &.k-tabstrip-bottom {
+                .k-tabstrip-items-wrapper {
+                    &::before {
+                        background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                    }
+
+                    &::after {
+                        background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+                    }
                 }
             }
         }

package/scss/toolbar/_layout.scss

@@ -42,32 +42,31 @@
         &.k-toolbar-scrollable {
             flex-wrap: nowrap;
             position: relative;
+        }
+
+        &.k-toolbar-scrollable-overlay {
+
+            &::before,
+            &::after {
+                content: '';
+                height: 100%;
+                aspect-ratio: 1;
+                position: absolute;
+                z-index: 3;
+            }
 
-            &.k-toolbar-scrollable-overlay {
-                &::before {
-                    content: '';
-                    height: 100%;
-                    aspect-ratio: 1;
-                    position: absolute;
-                    inset-inline-start: 0;
-                    z-index: 3;
-                }
-
-                &::after {
-                    content: '';
-                    height: 100%;
-                    aspect-ratio: 1;
-                    position: absolute;
-                    inset-inline-end: 0;
-                    z-index: 3;
-                }
-
-                &.k-toolbar-scrollable-start::before,
-                &.k-toolbar-scrollable-end::after {
-                    display: none;
-                }
+            &::before {
+                inset-inline-start: 0;
+            }
+
+            &::after {
+                inset-inline-end: 0;
             }
 
+            &.k-toolbar-scrollable-start::before,
+            &.k-toolbar-scrollable-end::after {
+                display: none;
+            }
         }
 
         > * {