@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/breadcrumb/_variables.scss

@@ -4,20 +4,20 @@
 
 /// The horizontal margin of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-margin-x: k-spacing(0) !default;
+$kendo-breadcrumb-margin-x: var( --kendo-breadcrumb-margin-x, k-spacing(0) ) !default;
 /// The vertical margin of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-margin-y: k-spacing(0) !default;
+$kendo-breadcrumb-margin-y: var( --kendo-breadcrumb-margin-y, k-spacing(0) ) !default;
 /// The horizontal padding of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-padding-x: k-spacing(0) !default;
+$kendo-breadcrumb-padding-x: var( --kendo-breadcrumb-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-padding-y: k-spacing(0) !default;
+$kendo-breadcrumb-padding-y: var( --kendo-breadcrumb-padding-y, k-spacing(0) ) !default;
 
 /// The width of the border around the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
+$kendo-breadcrumb-border-width: var( --kendo-breadcrumb-border-width, 0px ) !default;
 
 /// The font family of the Breadcrumb
 /// @group breadcrumb
@@ -51,185 +51,187 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-bg: k-color(surface-alt) !default;
+$kendo-breadcrumb-bg: var( --kendo-breadcrumb-bg, k-color(surface-alt) ) !default;
 /// The text color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-breadcrumb-text: var( --kendo-breadcrumb-text, get-theme-color-var( neutral-130 ) ) !default;
 /// The border color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-border: transparent !default;
+$kendo-breadcrumb-border: var( --kendo-breadcrumb-border, transparent ) !default;
 /// The box shadow of the focused breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 0 1px color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-breadcrumb-focus-shadow: var( --kendo-breadcrumb-focus-shadow, 0 0 0 1px color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+
 
-/// The horizontal padding of the Breadcrumb link
-/// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
+$kendo-breadcrumb-sm-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-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;
+$kendo-breadcrumb-md-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(2) ) !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-spacing(2) !default;
+$kendo-breadcrumb-lg-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(2) ) !default;
 
-/// The vertical padding of the Breadcrumb link
-/// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-spacing(1.5) !default;
+$kendo-breadcrumb-sm-link-padding-y: var( --kendo-breadcrumb-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;
+$kendo-breadcrumb-md-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(2) ) !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-spacing(2.5) !default;
+$kendo-breadcrumb-lg-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(2.5) ) !default;
 
 /// The radius of the border around the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: 0px !default;
+$kendo-breadcrumb-link-border-radius: var( --kendo-breadcrumb-link-border-radius, 0px ) !default;
+
 /// The initial text color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-initial-text: inherit !default;
+$kendo-breadcrumb-link-initial-text: var( --kendo-breadcrumb-link-initial-text, inherit ) !default;
 /// The background color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-bg: transparent !default;
+$kendo-breadcrumb-link-bg: var( --kendo-breadcrumb-link-bg, transparent ) !default;
 /// The text color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-breadcrumb-link-text: var( --kendo-breadcrumb-link-text, get-theme-color-var( neutral-130 ) ) !default;
 /// The borer color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-border: transparent !default;
+$kendo-breadcrumb-link-border: var( --kendo-breadcrumb-link-border, transparent ) !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: var( --kendo-breadcrumb-link-hover-bg, k-color(base-hover) ) !default;
 /// The text color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: k-color(on-app-surface) !default;
+$kendo-breadcrumb-link-hover-text: var( --kendo-breadcrumb-link-hover-text, k-color(on-app-surface) ) !default;
 /// The border color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
+$kendo-breadcrumb-link-hover-border: var( --kendo-breadcrumb-link-hover-border, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;
 /// The background color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-bg: k-color(base-active) !default;
+$kendo-breadcrumb-link-active-bg: var( --kendo-breadcrumb-link-active-bg, k-color(base-active) ) !default;
 /// The text color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-text: k-color(on-base) !default;
+$kendo-breadcrumb-link-active-text: var( --kendo-breadcrumb-link-active-text, k-color(on-base) ) !default;
 /// The border color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-border: k-color(base-active) !default;
+$kendo-breadcrumb-link-active-border: var( --kendo-breadcrumb-link-active-border, k-color(base-active) ) !default;
 /// The background color of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-bg: transparent !default;
+$kendo-breadcrumb-link-focus-bg: var( --kendo-breadcrumb-link-focus-bg, transparent ) !default;
 /// The text color of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: k-color(on-app-surface) !default;
+$kendo-breadcrumb-link-focus-text: var( --kendo-breadcrumb-link-focus-text, k-color(on-app-surface) ) !default;
+/// The border color of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-border: var( --kendo-breadcrumb-link-focus-border, null ) !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;
+$kendo-breadcrumb-link-focus-shadow: var( --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
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-hover-bg: k-color(base-hover) !default;
+$kendo-breadcrumb-link-focus-hover-bg: var( --kendo-breadcrumb-link-focus-hover-bg, k-color(base-hover) ) !default;
 /// The background color of the disabled breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-disabled-bg: none !default;
+$kendo-breadcrumb-link-disabled-bg: var( --kendo-breadcrumb-link-disabled-bg, none ) !default;
 /// The text color of the disabled breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-breadcrumb-link-disabled-text: var( --kendo-breadcrumb-link-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The border color of the disabled breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-disabled-border: none !default;
+$kendo-breadcrumb-link-disabled-border: var( --kendo-breadcrumb-link-disabled-border, none ) !default;
 /// The background color of selected the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-bg: k-color(surface-alt) !default;
+$kendo-breadcrumb-link-selected-bg: var( --kendo-breadcrumb-link-selected-bg, k-color(surface-alt) ) !default;
 /// The text color of the selected breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-text: k-color(on-app-surface) !default;
+$kendo-breadcrumb-link-selected-text: var( --kendo-breadcrumb-link-selected-text, k-color(on-app-surface) ) !default;
 /// The border color of the selected breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-border: transparent !default;
+$kendo-breadcrumb-link-selected-border: var( --kendo-breadcrumb-link-selected-border, transparent ) !default;
 /// The font weight of the selected breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
 /// The background color of the Breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
+$kendo-breadcrumb-root-link-bg: var( --kendo-breadcrumb-root-link-bg, $kendo-breadcrumb-link-bg ) !default;
 /// The text color of the Breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
+$kendo-breadcrumb-root-link-text: var( --kendo-breadcrumb-root-link-text, $kendo-breadcrumb-link-text ) !default;
 /// The border color of the Breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
+$kendo-breadcrumb-root-link-border: var( --kendo-breadcrumb-root-link-border, $kendo-breadcrumb-link-border ) !default;
 /// The background color of the hovered breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-link-hover-bg !default;
+$kendo-breadcrumb-root-link-hover-bg: var( --kendo-breadcrumb-root-link-hover-bg, $kendo-breadcrumb-link-hover-bg )!default;
 /// The text color of the hovered breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-link-hover-text !default;
+$kendo-breadcrumb-root-link-hover-text: var( --kendo-breadcrumb-root-link-hover-text, $kendo-breadcrumb-link-hover-text ) !default;
 /// The border color of the hovered breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-link-hover-border !default;
+$kendo-breadcrumb-root-link-hover-border: var( --kendo-breadcrumb-root-link-hover-border, $kendo-breadcrumb-link-hover-border ) !default;
 /// The background color of the active breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-active-bg: $kendo-breadcrumb-link-active-bg !default;
+$kendo-breadcrumb-root-link-active-bg: var( --kendo-breadcrumb-root-link-active-bg, $kendo-breadcrumb-link-active-bg ) !default;
 /// The text color of the active breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-active-text: $kendo-breadcrumb-link-active-text !default;
+$kendo-breadcrumb-root-link-active-text: var( --kendo-breadcrumb-root-link-active-text, $kendo-breadcrumb-link-active-text ) !default;
 /// The border color of the active breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-active-border: $kendo-breadcrumb-link-active-border !default;
+$kendo-breadcrumb-root-link-active-border: var( --kendo-breadcrumb-root-link-active-border, $kendo-breadcrumb-link-active-border ) !default;
 /// The background color of the focused breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-link-focus-bg !default;
+$kendo-breadcrumb-root-link-focus-bg: var( --kendo-breadcrumb-root-link-focus-bg, $kendo-breadcrumb-link-focus-bg ) !default;
 /// The text color of the focused breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !default;
+$kendo-breadcrumb-root-link-focus-text: var( --kendo-breadcrumb-root-link-focus-text, $kendo-breadcrumb-link-focus-text ) !default;
+/// The border color of the focused Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-border: var( --kendo-breadcrumb-root-link-focus-border, null ) !default;
 /// The border color of the focused breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
+$kendo-breadcrumb-root-link-focus-shadow: var( --kendo-breadcrumb-root-link-focus-shadow, $kendo-breadcrumb-link-focus-shadow ) !default;
 /// 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;
+$kendo-breadcrumb-root-link-focus-hover-bg: var( --kendo-breadcrumb-root-link-focus-hover-bg, $kendo-breadcrumb-link-focus-hover-bg ) !default;
 /// The text color of the disabled breadcrumb root link
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-disabled-text: $kendo-breadcrumb-link-disabled-text !default;
+$kendo-breadcrumb-root-link-disabled-text: var( --kendo-breadcrumb-root-link-disabled-text, $kendo-breadcrumb-link-disabled-text ) !default;
 
+/// The background color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-$kendo-breadcrumb-current-item-text: null !default;
-$kendo-breadcrumb-current-item-border: null !default;
-
-/// The vertical padding of the Breadcrumb link icon
+/// 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-icon-link-padding-y: k-spacing(2.5) !default;
+$kendo-breadcrumb-current-item-border: null  !default;
+
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: var(--kendo-breadcrumb-sm-icon-link-padding-y, k-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;
+$kendo-breadcrumb-md-icon-link-padding-y: var(--kendo-breadcrumb-md-icon-link-padding-y, k-spacing(2.5) ) !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: var(--kendo-breadcrumb-lg-icon-link-padding-y, k-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-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+$kendo-breadcrumb-sm-icon-link-padding-x: var( --kendo-breadcrumb-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;
+$kendo-breadcrumb-md-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-md-icon-link-padding-y ) !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;
+$kendo-breadcrumb-lg-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-lg-icon-link-padding-y ) !default;
 
 // Root link spacing
-$kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;
+$kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, $kendo-icon-spacing ) !default;
 
 
 /// The sizes map for the Breadcrumb.
@@ -260,3 +262,63 @@ $kendo-breadcrumb-sizes: (
         line-height: $kendo-breadcrumb-lg-line-height
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with (
+    $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width,
+    $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x,
+    $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y,
+    $kendo-breadcrumb-padding-x: $kendo-breadcrumb-padding-x,
+    $kendo-breadcrumb-padding-y: $kendo-breadcrumb-padding-y,
+    $kendo-breadcrumb-font-family: $kendo-breadcrumb-font-family,
+    $kendo-breadcrumb-font-size: $kendo-breadcrumb-font-size,
+    $kendo-breadcrumb-sm-font-size: $kendo-breadcrumb-sm-font-size,
+    $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-md-font-size,
+    $kendo-breadcrumb-lg-font-size: $kendo-breadcrumb-lg-font-size,
+    $kendo-breadcrumb-line-height: $kendo-breadcrumb-line-height,
+    $kendo-breadcrumb-sm-line-height: $kendo-breadcrumb-sm-line-height,
+    $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-md-line-height,
+    $kendo-breadcrumb-lg-line-height: $kendo-breadcrumb-lg-line-height,
+    $kendo-breadcrumb-bg: $kendo-breadcrumb-bg,
+    $kendo-breadcrumb-text: $kendo-breadcrumb-text,
+    $kendo-breadcrumb-border: $kendo-breadcrumb-border,
+    $kendo-breadcrumb-focus-shadow: $kendo-breadcrumb-focus-shadow,
+    $kendo-breadcrumb-sm-link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+    $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+    $kendo-breadcrumb-lg-link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+    $kendo-breadcrumb-sm-link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+    $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+    $kendo-breadcrumb-lg-link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+    $kendo-breadcrumb-link-border-radius: $kendo-breadcrumb-link-border-radius,
+    $kendo-breadcrumb-sm-icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+    $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+    $kendo-breadcrumb-lg-icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+    $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+    $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+    $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+    $kendo-breadcrumb-link-initial-text: $kendo-breadcrumb-link-initial-text,
+    $kendo-breadcrumb-link-icon-spacing: $kendo-breadcrumb-link-icon-spacing,
+    $kendo-breadcrumb-link-bg: $kendo-breadcrumb-link-bg,
+    $kendo-breadcrumb-link-text: $kendo-breadcrumb-link-text,
+    $kendo-breadcrumb-link-border: $kendo-breadcrumb-link-border,
+    $kendo-breadcrumb-link-hover-bg: $kendo-breadcrumb-link-hover-bg,
+    $kendo-breadcrumb-link-hover-text: $kendo-breadcrumb-link-hover-text,
+    $kendo-breadcrumb-link-hover-border: $kendo-breadcrumb-link-hover-border,
+    $kendo-breadcrumb-link-focus-bg: $kendo-breadcrumb-link-focus-bg,
+    $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-focus-text,
+    $kendo-breadcrumb-link-focus-border: $kendo-breadcrumb-link-focus-border,
+    $kendo-breadcrumb-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow,
+    $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-root-link-bg,
+    $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-root-link-text,
+    $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-root-link-border,
+    $kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-root-link-hover-bg,
+    $kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-root-link-hover-text,
+    $kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-root-link-hover-border,
+    $kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-root-link-focus-bg,
+    $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-root-link-focus-text,
+    $kendo-breadcrumb-root-link-focus-border: $kendo-breadcrumb-root-link-focus-border,
+    $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-root-link-focus-shadow,
+    $kendo-breadcrumb-current-item-bg: $kendo-breadcrumb-current-item-bg,
+    $kendo-breadcrumb-current-item-text: $kendo-breadcrumb-current-item-text,
+    $kendo-breadcrumb-current-item-border: $kendo-breadcrumb-current-item-border,
+    $kendo-breadcrumb-sizes: $kendo-breadcrumb-sizes
+);

package/scss/button/_layout.scss

@@ -2,62 +2,26 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
 
 @mixin kendo-button--layout() {
 
+    @include kendo-button--layout-base();
+
     // Button
     .k-button {
-        padding-inline: var( --kendo-button-padding-x, 0 );
-        padding-block: var( --kendo-button-padding-y, 0 );
-        border-width: var( --kendo-button-border-width, #{$kendo-button-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        font-family: var( --kendo-button-font-family, #{$kendo-button-font-family} );
-        font-size: var( --kendo-button-font-size, 1rem );
-        font-weight: var( --kendo-button-font-weight, #{$kendo-button-font-weight} );
-        line-height: var( --kendo-button-line-height, normal );
-        text-align: center;
-        white-space: nowrap;
-        text-decoration: none;
-        vertical-align: middle;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        gap: var( --kendo-button-spacing, #{$kendo-button-spacing} );
-        position: relative;
-        cursor: pointer;
-        color: inherit;
-        background: none;
-        outline: none;
-        user-select: none;
-        -webkit-appearance: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        &::-moz-focus-inner {
-            padding: 0;
-            outline: 0;
-            border: 0;
-        }
-
-        &:hover,
-        &:focus {
-            outline: 0;
-            text-decoration: none;
-        }
 
         &:focus::after,
         &.k-focus::after {
             content: "";
+            display: block;
+            opacity: 1;
             position: absolute;
             border: medium none;
-            inset: var( --kendo-button-focus-offset, #{$kendo-button-focus-offset} );
-            outline-width: var( --kendo-button-focus-outline-width, #{$kendo-button-focus-outline-width} );
-            outline-style: var( --kendo-button-focus-outline-style, #{$kendo-button-focus-outline-style} );
+            border-radius: 0;
+            inset: $kendo-button-focus-offset;
+            outline-width: $kendo-button-focus-outline-width;
+            outline-style: $kendo-button-focus-outline-style;
             z-index: 1;
         }
 
@@ -78,25 +42,9 @@
         $_font-size: map.get( $size-props, font-size );
         $_line-height: map.get( $size-props, line-height );
 
-        $_icon-button-padding: calc( #{$_padding-x} / 2 );
-
-        .k-button-#{$size} {
-            --kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );
-            --kendo-button-padding-y: var( --kendo-button-#{$size}-padding-y, #{$_padding-y} );
-            --kendo-button-font-size: var( --kendo-button-#{$size}-font-size, #{$_font-size} );
-            --kendo-button-line-height: var( --kendo-button-#{$size}-line-height, #{$_line-height} );
-        }
-
         .k-icon-button.k-button-#{$size} {
-            --kendo-button-padding-x: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
-            --kendo-button-padding-y: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
 
             .k-button-icon {
-                min-width: calc( #{$_font-size} * #{$_line-height} );
-                min-height: calc( #{$_font-size} * #{$_line-height} );
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
 
                 &.k-svg-icon > svg,
                 &.k-icon-md > svg {
@@ -137,23 +85,6 @@
         }
     }
 
-    // Icon Button
-    .k-icon-button {
-        gap: 0;
-
-        .k-icon {
-            display: inline-flex;
-        }
-    }
-
-
-    // Content
-    .k-button-icon {
-        align-self: center;
-        position: relative;
-        color: inherit;
-    }
-
 
     // Flat button
     .k-button-flat {
@@ -164,8 +95,9 @@
         &:focus::after,
         &.k-focus::after {
             @include border-radius( inherit );
-            inset: var( --kendo-button-flat-focus-offset, #{$kendo-button-flat-focus-offset} );
-            outline-width: var( --kendo-button-flat-focus-outline-width, #{$kendo-button-flat-focus-outline-width} );
+            inset: $kendo-button-flat-focus-offset;
+            outline-width: $kendo-button-flat-focus-outline-width;
+            box-shadow: none;
         }
     }
 
@@ -183,10 +115,10 @@
             display: block;
             pointer-events: none;
             position: absolute;
-            left: -$kendo-button-border-width;
-            right: -$kendo-button-border-width;
-            top: -$kendo-button-border-width;
-            bottom: -$kendo-button-border-width;
+            left: calc(-1 * #{$kendo-button-border-width});
+            right: calc(-1 * #{$kendo-button-border-width});
+            top: calc(-1 * #{$kendo-button-border-width});
+            bottom: calc(-1 * #{$kendo-button-border-width});
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }
@@ -260,28 +192,15 @@
     }
 
 
-    // Outline button
-    .k-button-outline {
-        color: inherit;
-        border-color: currentColor;
-        background: none;
-    }
-
     // Link button
     .k-button-link {
-        border-color: transparent !important; // stylelint-disable-line declaration-no-important
-        text-decoration: none;
-        background: none;
-
         &:focus::after,
         &.k-focus::after {
             @include border-radius( inherit );
-            inset: var( --kendo-button-link-focus-offset, #{$kendo-button-link-focus-offset} );
-            outline-width: var( --kendo-button-link-focus-outline-width, #{$kendo-button-link-focus-outline-width} );
+            inset: $kendo-button-link-focus-offset;
+            outline-width: $kendo-button-link-focus-outline-width;
         }
 
-        &:hover,
-        &.k-hover,
         &:focus,
         &.k-focus {
             text-decoration: underline;
@@ -291,93 +210,10 @@
 
     // Clear button
     .k-button-clear {
-        border-color: transparent !important; // stylelint-disable-line declaration-no-important
-        color: inherit;
-        background: none;
-
         &:focus::after,
         &.k-focus::after {
             inset: auto;
             outline-width: 0;
         }
     }
-
-    // Button generating state
-    .k-button.k-generating {
-        animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
-    }
-
-    @keyframes k-button-pulsing {
-        0% {
-            opacity: 1;
-        }
-        50% {
-            opacity: $kendo-button-pulsing-opacity;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-
-
-    // Button group
-    .k-button-group {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        list-style: none;
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        > .k-button + .k-button {
-            margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
-        }
-
-        > .k-button:hover,
-        > .k-button.k-hover,
-        > .k-button:focus,
-        > .k-button.k-focus,
-        > .k-button:active,
-        > .k-button.k-active,
-        > .k-button.k-selected {
-            z-index: 2;
-        }
-
-        .k-button:not(:first-child, :last-child) {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0;
-            border-start-start-radius: 0;
-            border-end-start-radius: 0;
-        }
-        > .k-button:first-child:not(:only-child) {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0;
-        }
-        > .k-button:last-child:not(:only-child) {
-            border-start-start-radius: 0;
-            border-end-start-radius: 0;
-        }
-
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            opacity: 1;
-            filter: none;
-        }
-    }
-
-    .k-button-group-stretched {
-        width: 100%;
-
-        > * {
-            flex: 1 0 0%;
-            overflow: hidden;
-        }
-    }
 }