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

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.2",
     "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.2",
     "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.2",
   "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.2",
+    "@progress/kendo-theme-utils": "6.5.0-dev.2"
   },
-  "gitHead": "b5525f1c4c71eb78873e1fb170ae20cd50a8468d"
+  "gitHead": "a2917c47e4830e54fac051c80e5ae9d26f894fa7"
 }

package/scss/action-sheet/_layout.scss

@@ -260,6 +260,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;
@@ -299,6 +300,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

@@ -114,7 +114,7 @@ $kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
-$kendo-actionsheet-item-icon-color: get-theme-color-var( primary-110 ) !default;
+$kendo-actionsheet-item-icon-color: k-get-theme-color-var( primary-110 ) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet
@@ -179,6 +179,9 @@ $kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit )
 
 // Adaptive Actionsheet
 
+/// Font size of the adaptive action sheet.
+$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
+
 /// Border width of the adaptive action sheet titlebar.
 /// @group action-sheet
 $kendo-adaptive-actionsheet-header-border-width: 1px !default;

package/scss/adaptive/_variables.scss

@@ -9,10 +9,10 @@ $kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
 
-$kendo-adaptive-menu-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-bg: k-get-theme-color-var( primary-100 ) !default;
 $kendo-adaptive-menu-text: $kendo-color-white !default;
 
-$kendo-adaptive-menu-clear-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-clear-text: k-get-theme-color-var( primary-100 ) !default;
 
 $kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
@@ -24,10 +24,10 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-grid-sort-text: k-get-theme-color-var( primary-100 ) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-scheduler-current-text: k-get-theme-color-var( primary-100 ) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;

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: k-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,
@@ -60,7 +60,7 @@ $_tc-appbar-matrix: (
 ) !default;
 
 $_tc-appbar-warning-matrix: (
-    (normal: (100, get-theme-color-var( neutral-160 ), 100)),
+    (normal: (100, k-get-theme-color-var( neutral-160 ), 100)),
 ) !default;
 
 $_tc-appbar-dark-matrix: (
@@ -71,14 +71,15 @@ $_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 {
     @each $brand-color, $palette in $kendo-appbar-brand-colors {
         $kendo-appbar-theme-colors: map.deep-merge(
             $kendo-appbar-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -86,20 +87,20 @@ $kendo-appbar-theme-colors: () !default;
 @each $ui-states in $_tc-appbar-warning-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( warning, warning, $ui-states )
+        k-generate-theme-variation( warning, warning, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-dark-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-light-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
-}
+}

package/scss/avatar/_variables.scss

@@ -46,7 +46,7 @@ $_tc-avatar-matrix: (
 
 $_tc-avatar-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100)
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
         normal: ($kendo-color-white, 100, 100)
@@ -79,7 +79,7 @@ $kendo-avatar-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-avatar-brand-colors {
         $kendo-avatar-theme-colors: map.deep-merge(
             $kendo-avatar-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -87,20 +87,20 @@ $kendo-avatar-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-avatar-warning-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
 }

package/scss/badge/_variables.scss

@@ -120,7 +120,7 @@ $_tc-badge-matrix: (
 
 $_tc-badge-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100)
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
         normal: ($kendo-color-white, 100, 100)
@@ -153,7 +153,7 @@ $kendo-badge-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-badge-brand-colors {
         $kendo-badge-theme-colors: map.deep-merge(
             $kendo-badge-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -161,20 +161,20 @@ $kendo-badge-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-badge-warning-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-dark-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-light-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, 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.
+$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+/// 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),
@@ -87,7 +82,7 @@ $_tc-bottom-nav-matrix: (
         disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-30 )),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 )),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
@@ -96,13 +91,13 @@ $_tc-bottom-nav-matrix: (
 
 $_tc-bottom-nav-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100),
-        focus: (100, get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
-        active: (120, get-theme-color-var( neutral-190 ), 120),
-        disabled: (inherit, get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100),
+        focus: (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
+        active: (120, k-get-theme-color-var( neutral-190 ), 120),
+        disabled: (inherit, k-get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), 100),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
@@ -117,7 +112,7 @@ $_tc-bottom-nav-dark-matrix: (
         disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-140 )),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 )),
         focus: (inherit, 160, transparent, 130),
         active: (inherit, 170, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
@@ -126,27 +121,28 @@ $_tc-bottom-nav-dark-matrix: (
 
 $_tc-bottom-nav-light-matrix: (
     solid: (
-        normal: (50, get-theme-color-var( neutral-160 ), 50),
+        normal: (50, k-get-theme-color-var( neutral-160 ), 50),
         focus: (50, 190, 50, $kendo-color-white),
         active: (70, 190, 70),
         disabled: (inherit, 120 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), transparent),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent),
         focus: (inherit, 130, transparent, 130),
         active: (inherit, 130, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
     )
 ) !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 {
     @each $brand-color, $palette in $kendo-bottom-nav-brand-colors {
         $kendo-bottom-nav-theme-colors: map.deep-merge(
             $kendo-bottom-nav-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -154,20 +150,20 @@ $kendo-bottom-nav-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-bottom-nav-warning-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-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} );
+            }
+        }
+    }
+
 }