@progress/kendo-theme-default 6.5.0-dev.0 → 6.5.0-dev.2

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

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

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

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "api": "legacy",
     "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": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

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

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "api": "legacy",
     "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": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "api": "legacy",
     "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": "6.5.0-dev.0",
+    "version": "6.5.0-dev.2",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

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

package/lib/swatches/default-purple.json

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

package/lib/swatches/default-turquoise.json

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

package/lib/swatches/default-urban.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "6.5.0-dev.0",
+  "version": "6.5.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.5.0",
-    "@progress/kendo-theme-core": "6.5.0-dev.0",
-    "@progress/kendo-theme-utils": "6.5.0-dev.0"
+    "@progress/kendo-theme-core": "6.5.0-dev.2",
+    "@progress/kendo-theme-utils": "6.5.0-dev.2"
   },
-  "gitHead": "b5525f1c4c71eb78873e1fb170ae20cd50a8468d"
+  "gitHead": "a2917c47e4830e54fac051c80e5ae9d26f894fa7"
 }

package/scss/_variables.scss

@@ -1,6 +1,7 @@
 @import "./core/functions/index.import.scss";
-@import "./core/color-system/index.import.scss";
 
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
 // Options
 $kendo-enable-rounded: true !default;
@@ -445,3 +446,7 @@ $kendo-invalid-border: $kendo-color-error !default;
 /// Shadow of the invalid items.
 /// @group component
 $kendo-invalid-shadow: null !default;
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;

package/scss/action-sheet/_layout.scss

@@ -230,6 +230,7 @@
     .k-adaptive-actionsheet {
         max-width: 100%;
         width: 100%;
+        font-size: $kendo-adaptive-actionsheet-font-size;
 
         // TMP: this should be moved to action sheet
         display: flex;
@@ -269,6 +270,12 @@
             padding-inline: 0;
         }
 
+        .k-menu-group {
+            height: 100%;
+            overflow: auto;
+            position: static;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;

package/scss/action-sheet/_variables.scss

@@ -73,6 +73,7 @@ $kendo-actionsheet-item-disabled-shadow: null !default;
 
 
 // Adaptive Actionsheet
+$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
 $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;

package/scss/appbar/_variables.scss

@@ -1,22 +1,54 @@
-// Appbar
-$kendo-appbar-margin-y: null !default;
+// AppBar
+
+/// The horizontal margin of the AppBar.
+/// @group appbar
 $kendo-appbar-margin-x: null !default;
-$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical margin of the AppBar.
+/// @group appbar
+$kendo-appbar-margin-y: null !default;
+/// The horizontal padding of the AppBar.
+/// @group appbar
 $kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the AppBar.
+/// @group appbar
+$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The width of the border around the AppBar.
+/// @group appbar
 $kendo-appbar-border-width: 0px !default;
-
+/// The z-index of the AppBar.
+/// @group appbar
 $kendo-appbar-zindex: 1000 !default;
-
+/// The font family of the AppBar.
+/// @group appbar
+$kendo-appbar-font-family: $kendo-font-family !default;
+/// The font size of the AppBar.
+/// @group appbar
 $kendo-appbar-font-size: $kendo-font-size-md !default;
+/// The line height of the AppBar.
+/// @group appbar
 $kendo-appbar-line-height: $kendo-line-height-md !default;
-$kendo-appbar-font-family: $kendo-font-family !default;
+
+/// The spacing between the AppBar sections.
+/// @group appbar
 $kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The background color of the AppBar based on light theme color.
+/// @group appbar
 $kendo-appbar-light-bg: $kendo-color-light !default;
+/// The text color of the AppBar based on light theme color.
+/// @group appbar
 $kendo-appbar-light-text: k-contrast-legacy( $kendo-color-light ) !default;
 
+/// The background color of the AppBar based on dark theme color.
+/// @group appbar
 $kendo-appbar-dark-bg: $kendo-color-dark !default;
+/// The text color of the AppBar based on dark theme color.
+/// @group appbar
 $kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;
 
+/// The box shadow of the AppBar.
+/// @group appbar
 $kendo-appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
-$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+/// The box shadow of the AppBar with bottom position.
+/// @group appbar
+$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;

package/scss/bottom-navigation/_variables.scss

@@ -1,28 +1,62 @@
-// Bottom-navigation
+// BottomNavigation
+
+/// The horizontal padding of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+/// The spacing between the BottomNavigation items.
+/// @group bottom-navigation
 $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+/// The width of the border around the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
-
+/// The font family of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-font-family: $kendo-font-family !default;
+/// The font size of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-font-size: $kendo-font-size-md !default;
+/// The line height of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-line-height: normal !default;
+/// The letter spacing of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
+/// The horizontal padding of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-padding-y: 0 !default;
+/// The minimum width of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
+/// The maximum width of the BottomNavigation item.
+/// @group bottom-navigation
 $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} + #{$kendo-padding-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+/// The border radius of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: $kendo-border-radius-md !default;
+/// The spacing of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
-$kendo-bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
-$kendo-bottom-nav-item-disabled-opacity: .5 !default;
-
+/// The box shadow of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
 
-$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+/// The text color of the flat BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-flat-text: $kendo-component-text !default;
-$kendo-bottom-nav-flat-border: $kendo-component-border !default;
+/// The background color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+/// The border color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-border: $kendo-component-border !default;

package/scss/breadcrumb/_layout.scss

@@ -11,8 +11,6 @@
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-breadcrumb-font-family;
-        font-size: $kendo-breadcrumb-font-size;
-        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -64,8 +62,6 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding-block: $kendo-breadcrumb-link-padding-y;
-        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -79,21 +75,12 @@
         transition: $kendo-transition;
     }
 
-    .k-breadcrumb-root-link {
-        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
-    }
-
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
-    .k-breadcrumb-icon-link {
-        padding-block: $kendo-breadcrumb-icon-link-padding-y;
-        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
-    }
-
 
     // Breadcrumb delimiter
     .k-breadcrumb-delimiter,
@@ -112,6 +99,34 @@
         }
     }
 
+
+    // Sizes
+    @each $size, $size-props in $kendo-breadcrumb-sizes {
+        $_link-padding-x: k-map-get( $size-props, link-padding-x );
+        $_link-padding-y: k-map-get( $size-props, link-padding-y );
+        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
+        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+
+        .k-breadcrumb-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+
+            .k-breadcrumb-link,
+            .k-breadcrumb-root-link {
+                padding-block: $_link-padding-y;
+                padding-inline: $_link-padding-x;
+            }
+
+            .k-breadcrumb-icon-link {
+                padding-block: $_icon-link-padding-y;
+                padding-inline: $_icon-link-padding-x;
+            }
+        }
+    }
+
 }
 
 

package/scss/breadcrumb/_variables.scss

@@ -1,59 +1,230 @@
 // Breadcrumb
 
+/// The width of the border around the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-border-width: 0px !default;
+
+/// The horizontal margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
+/// The vertical margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
+/// The horizontal padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
+/// The vertical padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
-$kendo-breadcrumb-border-width: 0px !default;
 
+/// The font family of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
+
+/// The font size of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+/// The font size of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
+/// The font size of the large Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
+
+/// The line-height of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
+/// The line-height of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
+/// The line-height of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
+/// The line-height of the height Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
 
+/// The base background of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
+/// The base text color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
+/// The base border color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
+/// The box shadow of the focused Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+
+/// The horizontal padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !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-map-get( $kendo-spacing, 2 ) !default;
+
+/// The vertical padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !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-map-get( $kendo-spacing, 2 ) !default;
+
+/// The border-radius of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
+/// The vertical padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$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-map-get( $kendo-spacing, 3 ) !default;
 
-$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
-$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
+/// The horizontal padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The horizontal padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+/// The horizontal padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
 
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
+/// The spacing of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
+/// The background color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
+/// The border color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
+/// The text color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !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: null !default;
+/// The text color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
+/// The border color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
+/// The background color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
+/// The text color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
+/// The border color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
+/// The text color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
+/// The border color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $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: null !default;
+/// The text color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
+/// The border color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $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: $kendo-breadcrumb-link-focus-shadow !default;
 
+/// The background color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
+/// The text color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
+/// The border color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+/// The sizes map for the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sizes: (
+    sm: (
+        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-sm-font-size,
+        line-height: $kendo-breadcrumb-sm-line-height
+    ),
+    md: (
+        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-md-font-size,
+        line-height: $kendo-breadcrumb-md-line-height
+    ),
+    lg: (
+        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-lg-font-size,
+        line-height: $kendo-breadcrumb-lg-line-height
+    )
+) !default;