@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0-dev.1

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "11.0.0-dev.0",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "11.0.0-dev.0",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "11.0.0-dev.0",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "11.0.0-dev.0",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "11.0.0-dev.0",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "11.0.0-dev.0",
+  "version": "11.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "11.0.0-dev.0",
-    "@progress/kendo-theme-utils": "11.0.0-dev.0"
+    "@progress/kendo-theme-core": "11.0.0-dev.1",
+    "@progress/kendo-theme-utils": "11.0.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "b83fa9575266e751edf9317822154d05a4fc566a"
+  "gitHead": "57358fb664667fda76ce2febcd9bf331796b263c"
 }

package/scss/action-buttons/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *;
 
 
@@ -6,26 +5,4 @@
 
     @include kendo-action-buttons--layout-base();
 
-    // Actions
-    .k-actions {
-
-        // Button
-        .k-button {
-            @include box-shadow( none );
-        }
-
-
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-        }
-
-
-        // Split button
-        .k-split-button {
-            @include box-shadow( none );
-        }
-
-    }
-
 }

package/scss/action-buttons/_theme.scss

@@ -1,6 +1,3 @@
-@use "../core/_index.scss" as *;
-@use "../button/_variables.scss" as *;
-@use "../core/functions/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *;
 
 
@@ -8,14 +5,4 @@
 
     @include kendo-action-buttons--theme-base();
 
-    // Actions
-    .k-actions {
-
-        .k-button-solid-base {
-            background-color: k-color(base-subtle);
-            border-color: k-color(base-subtle);
-        }
-
-    }
-
 }

package/scss/action-buttons/_variables.scss

@@ -2,9 +2,9 @@
 
 
 // Actions
-$kendo-actions-margin-top: k-spacing(4) !default;
-$kendo-actions-padding-x: k-spacing(2) !default;
-$kendo-actions-padding-y: k-spacing(2) !default;
+$kendo-actions-margin-top: 0 !default;
+$kendo-actions-padding-x: k-spacing(6) !default;
+$kendo-actions-padding-y: k-spacing(6) !default;
 $kendo-actions-border-width: 0px !default;
 $kendo-actions-button-spacing: k-spacing(2) !default;
 

package/scss/action-sheet/_layout.scss

@@ -3,4 +3,10 @@
 
 @mixin kendo-action-sheet--layout() {
     @include kendo-action-sheet--layout-base();
+
+    .k-actionsheet-action {
+        .k-icon-wrap {
+            align-self: center;
+        }
+    }
 }

package/scss/action-sheet/_variables.scss

@@ -15,9 +15,9 @@ $kendo-actionsheet-border-radius: 0px !default;
 
 $kendo-actionsheet-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-actionsheet-line-height: math.div( 20, 14 ) !default;
+$kendo-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
 
-$kendo-actionsheet-bg: k-color(surface-alt) !default;
+$kendo-actionsheet-bg: k-color(surface) !default;
 $kendo-actionsheet-text: k-color(on-app-surface) !default;
 $kendo-actionsheet-border: k-color(border) !default;
 $kendo-actionsheet-shadow: k-elevation(7) !default;
@@ -27,9 +27,9 @@ $kendo-actionsheet-shadow: k-elevation(7) !default;
 $kendo-actionsheet-titlebar-padding-x: k-spacing(4) !default;
 $kendo-actionsheet-titlebar-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-titlebar-border-width: 1px !default;
-$kendo-actionsheet-titlebar-font-size: var( --kendo-font-size-lg, inherit ) !default;
-$kendo-actionsheet-titlebar-font-family: null !default;
-$kendo-actionsheet-titlebar-line-height: 1.25 !default;
+$kendo-actionsheet-titlebar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-actionsheet-titlebar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-actionsheet-titlebar-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
@@ -53,27 +53,28 @@ $kendo-actionsheet-footer-shadow: null !default;
 // Actionsheet item
 $kendo-actionsheet-item-min-height: 40px !default;
 $kendo-actionsheet-item-padding-x: k-spacing(4) !default;
-$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
-$kendo-actionsheet-item-border-width: 1px !default;
-$kendo-actionsheet-item-spacing: k-spacing(3) !default;
+$kendo-actionsheet-item-padding-y: k-spacing(3.5) !default;
+$kendo-actionsheet-item-border-width: 0 !default;
+$kendo-actionsheet-item-spacing: k-spacing(4) !default;
 
 $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
 
-$kendo-actionsheet-item-description-font-size: .875em !default;
+$kendo-actionsheet-item-description-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-actionsheet-item-description-line-height: var( --kendo-line-height-sm, inherit ) !default;
 $kendo-actionsheet-item-description-text: k-color(subtle) !default;
 
-$kendo-actionsheet-item-hover-bg: rgba( black, .04 ) !default;
+$kendo-actionsheet-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 $kendo-actionsheet-item-hover-text: null !default;
 $kendo-actionsheet-item-hover-border: null !default;
 $kendo-actionsheet-item-hover-gradient: null !default;
 $kendo-actionsheet-item-hover-shadow: null !default;
 
-$kendo-actionsheet-item-focus-bg: rgba( black, .12 ) !default;
+$kendo-actionsheet-item-focus-bg: null !default;
 $kendo-actionsheet-item-focus-text: null !default;
 $kendo-actionsheet-item-focus-border: null !default;
 $kendo-actionsheet-item-focus-gradient: null !default;
-$kendo-actionsheet-item-focus-shadow: unset !default;
+$kendo-actionsheet-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 $kendo-actionsheet-item-disabled-bg: null !default;
 $kendo-actionsheet-item-disabled-text: null !default;
@@ -81,21 +82,20 @@ $kendo-actionsheet-item-disabled-border: null !default;
 $kendo-actionsheet-item-disabled-gradient: null !default;
 $kendo-actionsheet-item-disabled-shadow: null !default;
 
-$kendo-actionsheet-item-hover-background: rgba( black, .04 ) !default;
-$kendo-actionsheet-item-focus-background: rgba( black, .12 ) !default;
-$kendo-actionsheet-item-disabled-opacity: .42 !default;
-
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
-$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
+$kendo-adaptive-actionsheet-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(3) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
 
+$kendo-adaptive-actionsheet-titlebar-border: k-color(border) !default;
+
 $kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
 $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
-$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
-$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(3) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(3) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with (
     $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x,
@@ -142,6 +142,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight,
     $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
     $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
+    $kendo-actionsheet-item-description-line-height: $kendo-actionsheet-item-description-line-height,
     $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
     $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
     $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
@@ -158,10 +159,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-disabled-border: $kendo-actionsheet-item-disabled-border,
     $kendo-actionsheet-item-disabled-gradient: $kendo-actionsheet-item-disabled-gradient,
     $kendo-actionsheet-item-disabled-shadow: $kendo-actionsheet-item-disabled-shadow,
-    $kendo-actionsheet-item-hover-background: $kendo-actionsheet-item-hover-background,
-    $kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background,
-    $kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity,
     $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size,
+    $kendo-adaptive-actionsheet-line-height: $kendo-adaptive-actionsheet-line-height,
     $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y,
     $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x,
     $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y,

package/scss/appbar/_variables.scss

@@ -11,7 +11,7 @@ $kendo-appbar-margin-x: null !default;
 $kendo-appbar-margin-y: null !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: k-spacing(2) !default;
+$kendo-appbar-padding-x: k-spacing(4) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
 $kendo-appbar-padding-y: k-spacing(2) !default;
@@ -26,7 +26,7 @@ $kendo-appbar-zindex: 1000 !default;
 $kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-appbar-font-size: var( --kendo-font-size-lg, inherit )  !default;
 /// The line height of the AppBar.
 /// @group appbar
 $kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
@@ -51,7 +51,7 @@ $kendo-appbar-dark-text: k-color(on-dark) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
-$kendo-appbar-box-shadow: k-elevation(4) !default;
+$kendo-appbar-box-shadow: null !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;

package/scss/badge/_layout.scss

@@ -1,6 +1,5 @@
 @use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *;
 
-
 @mixin kendo-badge--layout() {
     @include kendo-badge--layout-base();
 }

package/scss/badge/_variables.scss

@@ -52,29 +52,29 @@ $kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group badge
-$kendo-badge-line-height: 1 !default;
+$kendo-badge-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the small Badge.
 /// @group badge
-$kendo-badge-sm-line-height: $kendo-badge-line-height !default;
+$kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Badge.
 /// @group badge
-$kendo-badge-md-line-height: $kendo-badge-line-height !default;
+$kendo-badge-md-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Badge.
 /// @group badge
-$kendo-badge-lg-line-height: $kendo-badge-line-height !default;
+$kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The calculated minimum width of the circular Badge.
 /// @group badge
-$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height } * 1em + calc( #{$kendo-badge-padding-y} * 2 ) + #{$kendo-badge-border-width * 2}) !default;
 /// The calculated minimum width of the small circular Badge.
 /// @group badge
-$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height } * 1em + calc( #{$kendo-badge-sm-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 /// The calculated minimum width of the medium circular Badge.
 /// @group badge
-$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height } * 1em + calc( #{$kendo-badge-md-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 /// The calculated minimum width of the large circular Badge.
 /// @group badge
-$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height  } * 1em + calc( #{$kendo-badge-lg-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 
 /// The sizes map for the Badge.
 /// @group badge

package/scss/bottom-navigation/_theme.scss

@@ -6,14 +6,65 @@
 
     @include kendo-bottom-navigation--theme-base();
 
+    .k-bottom-nav {
+        .k-bottom-nav-item.k-selected {
+            font-weight: var(--kendo-font-weight-bold, normal );
+        }
+    }
+
+    // Solid
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
+        .k-bottom-nav-solid-#{$name} {
+            @include fill(
+                $color: k-color(on-#{$name})
+            );
+
+            .k-bottom-nav-item.k-focus,
+            .k-bottom-nav-item:focus,
+            .k-bottom-nav-item.k-selected {
+                @include fill( $bg: k-color(#{$name}-active));
+            }
+        }
+    }
+
     // Flat
     @each $name, $color in $kendo-bottom-navigation-theme-colors {
         .k-bottom-nav-flat-#{$name} {
+            @if $name == "primary"  {
+                color: k-color(subtle);
+            } @else {
+                $color: k-color(#{$name}-on-surface);
+            }
+
+            @if $name == "primary" or $name == "secondary" {
+                background: k-color(surface);
+            } @else if $name == "light" {
+                background: k-color(dark-subtle);
+            } @else if $name == "dark"  {
+                background: k-color(light-subtle);
+            } @else {
+                background: k-color(#{$name}-subtle);
+            }
+
             .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: color-mix(in srgb, k-color( on-app-surface ) 6%, transparent));
+            .k-bottom-nav-item:focus,
+            .k-bottom-nav-item.k-selected {
+                background: color-mix(in srgb, currentColor 12%, transparent);
+            }
+
+            .k-bottom-nav-item.k-selected {
+                @if $name == "primary"  {
+                    @include fill(
+                        $color: k-color(on-secondary),
+                        $bg: k-color(secondary)
+                    );
+                } @else {
+                    @include fill(
+                        $color: k-color(#{$name}-on-surface),
+                        $bg: color-mix(in srgb, currentColor 12%, transparent)
+                    );
+                }
             }
         }
     }
-
 }

package/scss/bottom-navigation/_variables.scss

@@ -5,35 +5,35 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: k-spacing(0) !default;
+$kendo-bottom-nav-padding-x: k-spacing(2) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-padding-y: k-spacing(3) !default;
 /// The spacing between the BottomNavigation items.
 /// @group bottom-navigation
-$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-gap: k-spacing(2) !default;
 /// The width of the border around the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
+$kendo-bottom-nav-border-width: 0 !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-bottom-nav-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-letter-spacing: .2px !default;
+$kendo-bottom-nav-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
+$kendo-bottom-nav-item-padding-x: k-spacing(2.5) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
+$kendo-bottom-nav-item-padding-y: k-spacing(1) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -42,27 +42,27 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: null !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{k-spacing(2)} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-bottom-nav-item-padding-y} * 4 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: unset !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(xxl) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;
+$kendo-bottom-nav-item-gap: k-spacing(2) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: k-elevation(4) !default;
+$kendo-bottom-nav-shadow: null !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-text: k-color(on-app-surface) !default;
+$kendo-bottom-nav-flat-text: k-color(subtle) !default;
 /// The background color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-bg: k-color(surface-alt) !default;
+$kendo-bottom-nav-flat-bg: k-color(surface) !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-border: k-color(border) !default;
+$kendo-bottom-nav-flat-border: null !default;
 
 $kendo-bottom-navigation-theme-colors: (
     "primary": k-color(primary),

package/scss/breadcrumb/_variables.scss

@@ -53,43 +53,43 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: k-color(surface-alt) !default;
+$kendo-breadcrumb-bg: null !default;
 /// The base text color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-text: k-color(on-app-surface) !default;
+$kendo-breadcrumb-text: k-color(primary) !default;
 /// The base border color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-border: k-color(border) !default;
+$kendo-breadcrumb-border: null !default;
 
 /// The box shadow of the focused Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
+$kendo-breadcrumb-focus-shadow: null !default;
 
 /// The horizontal padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(3) !default;
 
 /// The vertical padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-spacing(1) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(2.5) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-spacing(0.5) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-spacing(1.5) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(3.5) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
@@ -97,7 +97,7 @@ $kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-spacing(2.5) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(3) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
@@ -106,7 +106,7 @@ $kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Breadcrumb link icon.
 /// @group breadcrumb
@@ -141,17 +141,17 @@ $kendo-breadcrumb-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-bg: k-color(base-hover) !default;
+$kendo-breadcrumb-link-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: k-color(primary) !default;
+$kendo-breadcrumb-link-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-bg: k-color(base-active) !default;
+$kendo-breadcrumb-link-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: k-color(primary) !default;
@@ -160,7 +160,7 @@ $kendo-breadcrumb-link-focus-text: k-color(primary) !default;
 $kendo-breadcrumb-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: unset !default;
+$kendo-breadcrumb-link-focus-shadow: null !default;
 
 /// The background color of the Breadcrumb root link.
 /// @group breadcrumb
@@ -174,7 +174,7 @@ $kendo-breadcrumb-root-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-bg: k-color(base-hover) !default;
+$kendo-breadcrumb-root-link-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
@@ -184,7 +184,7 @@ $kendo-breadcrumb-root-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-bg: k-color(base-active) !default;
+$kendo-breadcrumb-root-link-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of the focused Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
@@ -193,7 +193,7 @@ $kendo-breadcrumb-root-link-focus-text: null !default;
 $kendo-breadcrumb-root-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-shadow: unset !default;
+$kendo-breadcrumb-root-link-focus-shadow: null !default;
 
 /// The background color of the current Breadcrumb root link.
 /// @group breadcrumb