@progress/kendo-theme-fluent 6.5.0-dev.0 → 6.5.0-dev.1

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.5.0-dev.0",
+    "version": "6.5.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.5.0-dev.0",
+    "version": "6.5.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.5.0-dev.0",
+  "version": "6.5.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,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.1",
+    "@progress/kendo-theme-utils": "6.5.0-dev.1"
   },
-  "gitHead": "b5525f1c4c71eb78873e1fb170ae20cd50a8468d"
+  "gitHead": "6669ee878325bbdc367a4efc94ce2315e2b680e5"
 }

package/scss/appbar/_variables.scss

@@ -1,50 +1,50 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Background color of the appbar.
+/// The horizontal margin of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: get-theme-color-var( neutral-10 ) !default;
-/// Text color of the appbar.
-/// @group appbar
-$kendo-appbar-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the appbar.
-/// @group appbar
-$kendo-appbar-border: var( --kendo-component-border, initial ) !default;
-
-/// Vertical margin of the appbar.
+$kendo-appbar-margin-x: 0 !default;
+/// The vertical margin of the AppBar.
 /// @group appbar
 $kendo-appbar-margin-y: 0 !default;
-/// Horizontal margin of the appbar.
+/// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-margin-x: 0 !default;
-/// Vertical padding of the appbar.
+$kendo-appbar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the AppBar.
 /// @group appbar
 $kendo-appbar-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Horizontal padding of the appbar.
-/// @group appbar
-$kendo-appbar-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Width of the border around the appbar.
+/// The width of the border around the AppBar.
 /// @group appbar
 $kendo-appbar-border-width: 0px !default;
-
-/// Z-index of the appbar.
+/// The z-index of the AppBar.
 /// @group appbar
 $kendo-appbar-zindex: 1000 !default;
-
-/// Font size of the appbar.
+/// The font family of the AppBar.
+/// @group appbar
+$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;
-/// Line height of the appbar.
+/// The line height of the AppBar.
 /// @group appbar
 $kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
-/// Font family of the appbar.
-/// @group appbar
-$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
-/// Content spacing of the appbar.
+
+/// The spacing between the AppBar sections.
 /// @group appbar
 $kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
 
-/// Theme variations for the appbar.
+/// The text color of the AppBar.
+/// @group appbar
+$kendo-appbar-text: var( --kendo-component-text, initial ) !default;
+/// The background color of the AppBar.
+/// @group appbar
+$kendo-appbar-bg: get-theme-color-var( neutral-10 ) !default;
+/// The border color of the AppBar.
+/// @group appbar
+$kendo-appbar-border: var( --kendo-component-border, initial ) !default;
+
+/// The theme variations for the AppBar.
+/// @group appbar
 $kendo-appbar-brand-colors: (
     primary: primary,
     error: error,
@@ -71,7 +71,8 @@ $_tc-appbar-light-matrix: (
     (normal: (50, 160, 50)),
 ) !default;
 
-/// Theme colors map for the appbar variations.
+/// The theme colors map for the AppBar variations.
+/// @group appbar
 $kendo-appbar-theme-colors: () !default;
 
 @each $ui-states in $_tc-appbar-matrix {
@@ -102,4 +103,4 @@ $kendo-appbar-theme-colors: () !default;
         $kendo-appbar-theme-colors,
         generate-theme-variation( light, neutral, $ui-states )
     );
-}
+}

package/scss/bottom-navigation/_variables.scss

@@ -1,74 +1,69 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Horizontal padding of the bottom navigation.
+/// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
-/// Vertical padding of the bottom navigation.
+/// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
-/// Spacing of the bottom navigation.
+/// The spacing between the BottomNavigation items.
 /// @group bottom-navigation
 $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
-/// Border width of the bottom navigation.
+/// The width of the border around the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
-/// Font family of the bottom navigation.
+/// The font family of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
-/// Font size of the bottom navigation.
+/// The font size of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-font-size: var( --kendo-font-size-md, 1rem ) !default;
-/// Line height of the bottom navigation.
+/// The line height of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-line-height: var( --kendo-line-height-md, normal ) !default;
-/// Letter spacing of the bottom navigation.
+/// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
-/// Horizontal padding of the bottom navigation item.
+/// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the bottom navigation item.
+/// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
-/// Minimum width of the bottom navigation item.
+/// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
-/// Maximum width of the bottom navigation item.
+/// The maximum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-max-width: none !default;
-/// Minimum height of the bottom navigation item.
+/// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
-/// Border radius of the bottom navigation item.
+/// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Spacing of the bottom navigation item.
+/// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-gap: map.get( $kendo-spacing, 1 ) !default;
-/// Offset of the focused bottom navigation item.
-/// @group bottom-nav
+
+/// The offset of the focused BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-focus-offset: map.get( $kendo-spacing, 0.5 ) !default;
-/// Outline width of the focused bottom navigation item.
-/// @group bottom-nav
+/// The outline width of the focused BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-focus-outline-width: 1px !default;
-/// Outline style of the focused bottom navigation item.
-/// @group bottom-nav
+/// The outline style of the focused BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-focus-outline-style: solid !default;
 
-/// Vertical margin of the focused bottom navigation item icon.
-/// @group bottom-nav
-$kendo-bottom-nav-item-icon-margin-y: map.get( $kendo-spacing, 2 ) !default;
-/// Horizontal margin of the focused bottom navigation item icon.
-/// @group bottom-nav
-$kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
-
-/// Box shadow of the bottom navigation.
-/// @group bottom-nav
+/// The box shadow of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 
-// Theme variations for the bottom-nav.
+/// The theme variations for the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-brand-colors: (
     primary: primary,
     error: error,
@@ -78,7 +73,7 @@ $kendo-bottom-nav-brand-colors: (
     tertiary: tertiary,
  ) !default;
 
-// Matrix with bottom-nav theme colors in the order: bg, color, border
+// Matrix with BottomNavigation theme colors in the order: bg, color, border
 $_tc-bottom-nav-matrix: (
     solid: (
         normal: (100, $kendo-color-white, 100),
@@ -139,7 +134,8 @@ $_tc-bottom-nav-light-matrix: (
     )
 ) !default;
 
-/// Theme colors map for the bottom-nav variations.
+/// The theme colors map for the BottomNavigation variations.
+/// @group bottom-navigation
 $kendo-bottom-nav-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-matrix {
@@ -170,4 +166,4 @@ $kendo-bottom-nav-theme-colors: () !default;
         $kendo-bottom-nav-theme-colors,
         generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
-}
+}

package/scss/breadcrumb/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
@@ -14,8 +15,8 @@
         box-sizing: border-box;
         outline: 0;
         font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
-        font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
-        line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
+        font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
+        line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -67,8 +68,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
-        padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
-        padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
+        padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
+        padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
         color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
         text-decoration: none;
         white-space: nowrap;
@@ -92,10 +93,6 @@
        }
     }
 
-    .k-breadcrumb-root-link {
-        margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
-    }
-
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
@@ -103,8 +100,8 @@
     }
 
     .k-breadcrumb-icon-link {
-        padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
-        padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
+        padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
+        padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
     }
 
 
@@ -124,4 +121,34 @@
         }
     }
 
+
+    // Sizing
+    @each $size, $size-props in $kendo-breadcrumb-sizes {
+        $_link-padding-x: map.get( $size-props, link-padding-x );
+        $_link-padding-y: map.get( $size-props, link-padding-y );
+        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
+        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+
+        // Breadcrumb sizes
+        .k-breadcrumb-#{$size} {
+            --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
+
+            // Breadcrumb links
+            .k-breadcrumb-link,
+            .k-breadcrumb-root-link {
+                --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
+                --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
+            }
+
+            // Breadcrumb icon links
+            .k-breadcrumb-icon-link {
+                --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
+                --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
+            }
+        }
+    }
+
 }

package/scss/breadcrumb/_variables.scss

@@ -2,62 +2,105 @@
 @use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
-/// The horizontal margin of the breadcrumb
+/// The horizontal margin of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-x: 0px !default;
-/// The vertical margin of the breadcrumb
+/// The vertical margin of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-y: 0px !default;
-/// The horizontal padding of the breadcrumb
+/// The horizontal padding of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-x: 0px !default;
-/// The vertical padding of the breadcrumb
+/// The vertical padding of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-y: 0px !default;
-/// The width of the border around the breadcrumb
+
+/// The width of the border around the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-border-width: 0px !default;
-/// The font family of the breadcrumb
+
+/// The font family of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the breadcrumb
+/// The font size of the Breadcrumb
+
 /// @group breadcrumb
 $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
-/// The line height of the breadcrumb
+/// The font size of the small breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the medium breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the large breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
+
+/// The line height used along with the $kendo-font-size variable of the Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
-/// The background color of the breadcrumb
+/// The line height used along with the $kendo-font-size variable of the small breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the medium breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the large breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
-/// The text color of the breadcrumb
+/// The text color of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
-/// The border color of the breadcrumb
+/// The border color of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-border: transparent !default;
 /// The box shadow of the focused breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !default;
 
-/// The horizontal padding of the breadcrumb link
+/// The horizontal padding of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the breadcrumb link
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: 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: map.get( $kendo-spacing, 2 ) !default;
+
+/// The vertical padding of the Breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-/// The radius of the border around the breadcrumb link
+$kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-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: map.get( $kendo-spacing, 2.5 ) !default;
+
+/// The radius of the border around the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: 0px !default;
-/// The initial text color of the breadcrumb link
+/// The initial text color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The background color of the breadcrumb link
+/// The background color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-bg: transparent !default;
-/// The text color of the breadcrumb link
+/// The text color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
-/// The borer color of the breadcrumb link
+/// The borer color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border: transparent !default;
 /// The background color of the hovered breadcrumb link
@@ -87,7 +130,7 @@ $kendo-breadcrumb-link-focus-text: get-theme-color-var( neutral-190 ) !default;
 /// The box shadow of the focused breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
-/// The focus and hover background color of the breadcrumb link
+/// The focus and hover background color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
 /// The background color of the disabled breadcrumb link
@@ -99,7 +142,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
 /// The border color of the disabled breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-disabled-border: none !default;
-/// The background color of selected the breadcrumb link
+/// The background color of selected the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the selected breadcrumb link
@@ -112,13 +155,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
-/// The background color of the breadcrumb root link
+/// The background color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
-/// The text color of the breadcrumb root link
+/// The text color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
-/// The border color of the breadcrumb root link
+/// The border color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
 /// The background color of the hovered breadcrumb root link
@@ -148,7 +191,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
 /// The border color of the focused breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
-/// The focus and hover background color of the breadcrumb root link
+/// The focus and hover background color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
 /// The text color of the disabled breadcrumb root link
@@ -159,13 +202,61 @@ $kendo-breadcrumb-current-item-bg: null !default;
 $kendo-breadcrumb-current-item-text: null !default;
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The horizontal padding of the breadcrumb link icon
+/// The vertical padding of the Breadcrumb link icon
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !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: map.get( $kendo-spacing, 3 ) !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-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The vertical padding of the breadcrumb link icon
+$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-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
+$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;
 
 // Root link spacing
-$kendo-breadcrumb-root-link-spacing: 0px !default;
 $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !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;