@progress/kendo-theme-material 10.1.0-dev.4 → 10.1.0-dev.6

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.4",
+    "version": "10.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "10.1.0-dev.4",
+  "version": "10.1.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,13 +54,13 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.4",
-    "@progress/kendo-theme-default": "10.1.0-dev.4",
-    "@progress/kendo-theme-utils": "10.1.0-dev.4"
+    "@progress/kendo-theme-core": "10.1.0-dev.6",
+    "@progress/kendo-theme-default": "10.1.0-dev.6",
+    "@progress/kendo-theme-utils": "10.1.0-dev.6"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "4089693fbd3a10aebc8155f11e7b7b7f814be2be"
+  "gitHead": "202e78d7f12ef7ae4a2f25de43f1216470d378f2"
 }

package/scss/button/_variables.scss

@@ -71,17 +71,17 @@ $kendo-button-lg-line-height: math.div( 20, 14 ) !default;
 
 /// The calculated height of the Button.
 /// @group button
-$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-sm-calc-size: 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( #{$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( #{$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( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
-$kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
-$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
-$kendo-button-lg-inner-calc-size: 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

@@ -127,7 +127,7 @@ $kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-em
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
+$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -162,10 +162,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 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></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 24 24'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></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 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></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 20 20'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4 10h12'/></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: 1.25 !default;
 /// @group input
 $kendo-input-lg-line-height: 1.5 !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: (
@@ -464,6 +471,10 @@ $kendo-picker-flat-hover-focus-border: null !default;
     $kendo-input-md-line-height: $kendo-input-md-line-height,
     $kendo-input-lg-line-height: $kendo-input-lg-line-height,
     $kendo-input-sizes: $kendo-input-sizes,
+    $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-bg: $kendo-input-bg,
     $kendo-input-text: $kendo-input-text,
     $kendo-input-border: $kendo-input-border,

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

@@ -153,10 +153,10 @@ $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 12 12'><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 12 12'><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: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
+$kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#adadad'/></svg>") ) !default;
 
 
 // Radio label

package/scss/tabstrip/_variables.scss

@@ -29,6 +29,25 @@ $kendo-tabstrip-line-height: math.div( 20, 14 ) !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: $kendo-tabstrip-font-size !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -64,6 +83,24 @@ $kendo-tabstrip-item-border-radius: 0px !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(6) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(3) !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(6) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(4) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -164,6 +201,33 @@ $kendo-tabstrip-content-border: unset !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,
     $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y,
@@ -172,6 +236,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,
@@ -184,6 +254,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,
@@ -212,5 +288,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/_layout.scss

@@ -6,7 +6,8 @@
 
     @include kendo-toolbar--layout-base();
 
-    .k-toolbar {
+    .k-toolbar,
+    .k-toolbar-popup {
 
         // Button
         .k-button {

package/scss/toolbar/_theme.scss

@@ -8,7 +8,8 @@
 
     @include kendo-toolbar--theme-base();
 
-    .k-toolbar {
+    .k-toolbar,
+    .k-toolbar-popup {
 
         .k-button-solid-base {
             background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));

package/scss/toolbar/_variables.scss

@@ -1,48 +1,62 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../menu/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
 
 // Toolbar
 
 /// 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: 0 !default;
@@ -75,6 +89,10 @@ $kendo-toolbar-gradient: null !default;
 /// The box shadow of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-shadow: k-elevation(4) !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
@@ -91,6 +109,10 @@ $kendo-toolbar-outline-shadow: null !default;
 /// The width of the border around the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-border-width: 1px !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
@@ -107,6 +129,10 @@ $kendo-toolbar-flat-shadow: 0 2px 0 -1px $kendo-component-border !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
@@ -139,17 +165,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;