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

package/scss/bottom-navigation/_variables.scss

@@ -3,16 +3,16 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: k-spacing(1.5) !default;
+$kendo-bottom-nav-padding-x: var( --kendo-bottom-nav-padding-x, k-spacing(1.5) ) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-padding-y: var( --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;
+$kendo-bottom-nav-gap: var( --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;
+$kendo-bottom-nav-border-width: var( --kendo-bottom-nav-border-width, 1px 0px 0px 0px ) !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
@@ -24,146 +24,87 @@ $kendo-bottom-nav-font-size: var( --kendo-font-size, 1rem ) !default;
 $kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-letter-spacing: .2px !default;
+$kendo-bottom-nav-letter-spacing: var( --kendo-bottom-nav-letter-spacing, .2px ) !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
+$kendo-bottom-nav-item-padding-x: var( --kendo-bottom-nav-item-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: k-spacing(0.5) !default;
+$kendo-bottom-nav-item-padding-y: var( --kendo-bottom-nav-item-padding-y, k-spacing(0.5) ) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-width: 72px !default;
+$kendo-bottom-nav-item-min-width: var( --kendo-bottom-nav-item-min-width, 72px ) !default;
 /// The maximum width of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-max-width: none !default;
+$kendo-bottom-nav-item-max-width: var( --kendo-bottom-nav-item-max-width, none ) !default;
 /// 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;
+$kendo-bottom-nav-item-min-height: var( --kendo-bottom-nav-item-min-height, calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
+$kendo-bottom-nav-item-border-radius: var( --kendo-bottom-nav-item-border-radius, k-border-radius(md) ) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: k-spacing(1) !default;
+$kendo-bottom-nav-item-gap: var( --kendo-bottom-nav-item-gap, k-spacing(1) ) !default;
 
 /// The offset of the focused BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-focus-offset: k-spacing(0.5) !default;
+$kendo-bottom-nav-item-focus-offset: var( --kendo-bottom-nav-item-focus-offset, k-spacing(0.5) ) !default;
 /// The outline width of the focused BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-focus-outline-width: 1px !default;
+$kendo-bottom-nav-item-focus-outline-width: var( --kendo-bottom-nav-item-focus-outline-width, 1px ) !default;
 /// The outline style of the focused BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-focus-outline-style: solid !default;
+$kendo-bottom-nav-item-focus-outline-style: var( --kendo-bottom-nav-item-focus-outline-style, solid ) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
-/// The theme variations for the BottomNavigation.
-/// @group bottom-navigation
-$kendo-bottom-nav-brand-colors: (
-    primary: primary,
-    error: error,
-    success: success,
-    info: info,
-    secondary: secondary,
-    tertiary: tertiary,
- ) !default;
-
-// Matrix with BottomNavigation theme colors in the order: bg, color, border
-$_tc-bottom-nav-matrix: (
-    solid: (
-        normal: (color, on-color, color),
-        focus: (color, on-color, color, inherit),
-        active: (color-active, on-color, color-active),
-        disabled: (inherit, on-color-disabled, transparent)
-    ),
-    flat: (
-        normal: (app-surface, on-app-surface, color-mix(in srgb, k-color(border) 16%, transparent)),
-        focus: (inherit, color, transparent, color),
-        active: (inherit, color, transparent),
-        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
-    )
-) !default;
-
-$_tc-bottom-nav-warning-matrix: (
-    solid: (
-        normal: (color, on-color, color),
-        focus: (color, on-color, color, app-surface),
-        active: (color-active, on-color, color-active),
-        disabled: (inherit, on-color-disabled, transparent),
-    ),
-    flat: (
-        normal: (app-surface, on-app-surface, color),
-        focus: (inherit, color, transparent, color),
-        active: (inherit, color, transparent),
-        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
-    )
-) !default;
-
-$_tc-bottom-nav-dark-matrix: (
-    solid: (
-        normal: (color, on-color, color),
-        focus: (color, on-color, color, on-color),
-        active: (color-active, on-color, color-active),
-        disabled: (inherit, on-color-disabled, transparent)
-    ),
-    flat: (
-        normal: (app-surface, on-app-surface, color),
-        focus: (inherit, color, transparent, color),
-        active: (inherit, color, transparent),
-        disabled: (inherit, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
-    )
-) !default;
-
-$_tc-bottom-nav-light-matrix: (
-    solid: (
-        normal: (color, on-color, color),
-        focus: (color, on-color, color, app-surface),
-        active: (color-active, on-color, color-active),
-        disabled: (inherit, on-color-disabled, transparent),
-    ),
-    flat: (
-        normal: (app-surface, on-app-surface, transparent),
-        focus: (inherit, color, transparent, color),
-        active: (inherit, color, transparent),
-        disabled: (inherit, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
-    )
-) !default;
-
-/// The theme colors map for the BottomNavigation variations.
+/// The text color of the flat BottomNavigation.
 /// @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,
-            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $fill-mode, $ui-states in $_tc-bottom-nav-warning-matrix {
-    $kendo-bottom-nav-theme-colors: map.deep-merge(
-        $kendo-bottom-nav-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
-    );
-}
+$kendo-bottom-nav-flat-text: var( --kendo-bottom-nav-text, k-color(on-app-surface) ) !default;
+/// The background color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-bg: var( --kendo-bottom-nav-bg, k-color(app-surface) ) !default;
+/// The border color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-border: var( --kendo-bottom-nav-border, k-color(border) ) !default;
 
-@each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
-    $kendo-bottom-nav-theme-colors: map.deep-merge(
-        $kendo-bottom-nav-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $ui-states )
-    );
-}
+$kendo-bottom-navigation-theme-colors: (
+    "base": k-color(base),
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
-@each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
-    $kendo-bottom-nav-theme-colors: map.deep-merge(
-        $kendo-bottom-nav-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
+    $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
+    $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y,
+    $kendo-bottom-nav-gap: $kendo-bottom-nav-gap,
+    $kendo-bottom-nav-border-width: $kendo-bottom-nav-border-width,
+    $kendo-bottom-nav-font-family: $kendo-bottom-nav-font-family,
+    $kendo-bottom-nav-font-size: $kendo-bottom-nav-font-size,
+    $kendo-bottom-nav-line-height: $kendo-bottom-nav-line-height,
+    $kendo-bottom-nav-letter-spacing: $kendo-bottom-nav-letter-spacing,
+    $kendo-bottom-nav-item-padding-x: $kendo-bottom-nav-item-padding-x,
+    $kendo-bottom-nav-item-padding-y: $kendo-bottom-nav-item-padding-y,
+    $kendo-bottom-nav-item-min-width: $kendo-bottom-nav-item-min-width,
+    $kendo-bottom-nav-item-max-width: $kendo-bottom-nav-item-max-width,
+    $kendo-bottom-nav-item-min-height: $kendo-bottom-nav-item-min-height,
+    $kendo-bottom-nav-item-border-radius: $kendo-bottom-nav-item-border-radius,
+    $kendo-bottom-nav-item-gap: $kendo-bottom-nav-item-gap,
+    $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
+    $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
+    $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border,
+    $kendo-bottom-navigation-theme-colors: $kendo-bottom-navigation-theme-colors
+);

package/scss/breadcrumb/_layout.scss

@@ -1,153 +1,29 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *;
 
 @mixin kendo-breadcrumb--layout() {
 
+    @include kendo-breadcrumb--layout-base();
+
     // Breadcrumb
     .k-breadcrumb {
-        margin-inline: var( --kendo-breadcrumb-margin-x, #{$kendo-breadcrumb-margin-x} );
-        margin-block: var( --kendo-breadcrumb-margin-y, #{$kendo-breadcrumb-margin-y} );
-        padding-inline: var( --kendo-breadcrumb-padding-x, #{$kendo-breadcrumb-padding-x} );
-        padding-block: var( --kendo-breadcrumb-padding-y, #{$kendo-breadcrumb-padding-y} );
-        border-width: var( --kendo-breadcrumb-border-width, #{$kendo-breadcrumb-border-width} );
-        border-style: solid;
-        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} );
-        display: flex;
-        flex-direction: row;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Breadcrumb container
-    .k-breadcrumb-container,
-    .k-breadcrumb-root-item-container {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: hidden;
+        font-size: $kendo-breadcrumb-font-size;
+        line-height: $kendo-breadcrumb-line-height;
     }
 
-    .k-breadcrumb-root-item-container {
-        align-items: flex-start;
-        flex-shrink: 0;
-    }
-
-
-    // Breadcrumb item
-    .k-breadcrumb-item {
-        vertical-align: middle;
-        display: inline-flex;
-        flex-direction: row;
-        flex: none;
-        align-items: center;
-        overflow: hidden;
-    }
-
-
-    // Breadcrumb root item
-    .k-breadcrumb-root-item {
-        flex-shrink: 0;
-    }
-
-
     // Breadcrumb links
     .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} );
-        color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
-        text-decoration: none;
-        white-space: nowrap;
-        outline: none;
-        cursor: pointer;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        align-self: stretch;
-        overflow: hidden;
-        transition: var( --kendo-transition, none );
-
        &.k-selected {
-            font-weight: var( --kendo-breadcrumb-link-selected-font-weight, #{$kendo-breadcrumb-link-selected-font-weight} );
+            font-weight: $kendo-breadcrumb-link-selected-font-weight;
        }
 
        &:disabled,
        &.k-disabled {
-            background: var( --kendo-breadcrumb-link-disabled-bg, #{$kendo-breadcrumb-link-disabled-bg} );
-            border: var( --kendo-breadcrumb-link-disabled-border, #{$kendo-breadcrumb-link-disabled-border} )
+            background: $kendo-breadcrumb-link-disabled-bg;
+            border: $kendo-breadcrumb-link-disabled-border
        }
     }
-
-    .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon {
-        margin-inline-end: var( --kendo-breadcrumb-link-icon-spacing, #{$kendo-breadcrumb-link-icon-spacing} );
-    }
-
-    .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} );
-    }
-
-
-    // Breadcrumb delimiter
-    .k-breadcrumb-delimiter,
-    .k-breadcrumb-delimiter-icon {
-        color: inherit;
-    }
-
-
-    // Editing
-    .k-breadcrumb-input-container {
-        width: 100%;
-
-        .k-breadcrumb-input-container {
-            border-color: transparent;
-        }
-    }
-
-
-    // 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} {
-            --kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
-            --kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
-
-            // Breadcrumb links
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                --kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
-                --kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
-            }
-
-            // Breadcrumb icon links
-            .k-breadcrumb-icon-link {
-                --kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
-                --kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
-            }
-        }
-    }
-
 }

package/scss/breadcrumb/_theme.scss

@@ -1,64 +1,30 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *;
 
 @mixin kendo-breadcrumb--theme() {
 
-    // Breadcrumb
-    .k-breadcrumb {
-        @include fill(
-            var( --kendo-breadcrumb-text, #{$kendo-breadcrumb-text} ),
-            var( --kendo-breadcrumb-bg, #{$kendo-breadcrumb-bg} ),
-            var( --kendo-breadcrumb-border, #{$kendo-breadcrumb-border} )
-        );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow( var( --kendo-breadcrumb-focus-shadow, #{$kendo-breadcrumb-focus-shadow} ) )
-        }
-    }
-
+    @include kendo-breadcrumb--theme-base();
 
     // Breadcrumb link
     .k-breadcrumb-link {
-        @include fill(
-            var( --kendo-breadcrumb-link-text, #{$kendo-breadcrumb-link-text} ),
-            var( --kendo-breadcrumb-link-bg, #{$kendo-breadcrumb-link-bg} ),
-            var( --kendo-breadcrumb-link-border, #{$kendo-breadcrumb-link-border} )
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                var( --kendo-breadcrumb-link-hover-text, #{$kendo-breadcrumb-link-hover-text} ),
-                var( --kendo-breadcrumb-link-hover-bg, #{$kendo-breadcrumb-link-hover-bg} ),
-                var( --kendo-breadcrumb-link-hover-border, #{$kendo-breadcrumb-link-hover-border} )
-            );
-        }
-
         // Active state
         &:active,
         &.k-active {
             @include fill(
-                var( --kendo-breadcrumb-link-active-text, #{$kendo-breadcrumb-link-active-text} ),
-                var( --kendo-breadcrumb-link-active-bg, #{$kendo-breadcrumb-link-active-bg} ),
-                var( --kendo-breadcrumb-link-active-border, #{$kendo-breadcrumb-link-active-border} )
+                $kendo-breadcrumb-link-active-text,
+                $kendo-breadcrumb-link-active-bg,
+                $kendo-breadcrumb-link-active-border
             );
         }
 
         // Focused state
         &:focus,
         &.k-focus {
-            @include fill(
-                $color: var( --kendo-breadcrumb-link-focus-text, #{$kendo-breadcrumb-link-focus-text} ),
-                $bg: var( --kendo-breadcrumb-link-focus-bg, #{$kendo-breadcrumb-link-focus-bg} ),
-            );
-            @include box-shadow( var( --kendo-breadcrumb-link-focus-shadow, #{$kendo-breadcrumb-link-focus-shadow} ) );
-
             // Focus-hover state
             &:hover,
             &.k-hover {
-                @include fill( $bg: var( --kendo-breadcrumb-link-focus-hover-bg, #{$kendo-breadcrumb-link-focus-hover-bg} ) );
+                @include fill( $bg: $kendo-breadcrumb-link-focus-hover-bg );
             }
         }
 
@@ -66,60 +32,38 @@
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include fill( $color: var( --kendo-breadcrumb-link-disabled-text, #{$kendo-breadcrumb-link-disabled-text} ) );
+            @include fill( $color: $kendo-breadcrumb-link-disabled-text );
         }
 
         // Selected state
         &.k-selected {
             @include fill(
-                var( --kendo-breadcrumb-link-selected-text, #{$kendo-breadcrumb-link-selected-text} ),
-                var( --kendo-breadcrumb-link-selected-bg, #{$kendo-breadcrumb-link-selected-bg} ),
-                var( --kendo-breadcrumb-link-selected-border, #{$kendo-breadcrumb-link-selected-border} ),
+                $kendo-breadcrumb-link-selected-text,
+                $kendo-breadcrumb-link-selected-bg,
+                $kendo-breadcrumb-link-selected-border
             );
         }
     }
 
     // Breadcrumb root link
     .k-breadcrumb-root-link {
-        @include fill(
-            var( --kendo-breadcrumb-root-link-text, #{$kendo-breadcrumb-root-link-text} ),
-            var( --kendo-breadcrumb-root-link-bg, #{$kendo-breadcrumb-root-link-bg} ),
-            var( --kendo-breadcrumb-root-link-border, #{$kendo-breadcrumb-root-link-border} )
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                var( --kendo-breadcrumb-root-link-hover-text, #{$kendo-breadcrumb-root-link-hover-text} ),
-                var( --kendo-breadcrumb-root-link-hover-bg, #{$kendo-breadcrumb-root-link-hover-bg} ),
-                var( --kendo-breadcrumb-root-link-hover-border, #{$kendo-breadcrumb-root-link-hover-border} )
-            );
-        }
-
         // Active state
         &:active,
         &.k-active {
             @include fill(
-                var( --kendo-breadcrumb-root-link-active-text, #{$kendo-breadcrumb-root-link-active-text} ),
-                var( --kendo-breadcrumb-root-link-active-bg, #{$kendo-breadcrumb-root-link-active-bg} ),
-                var( --kendo-breadcrumb-root-link-active-border, #{$kendo-breadcrumb-root-link-active-border} )
+                $kendo-breadcrumb-root-link-active-text,
+                $kendo-breadcrumb-root-link-active-bg,
+                $kendo-breadcrumb-root-link-active-border
             );
         }
 
         // Focused state
         &:focus,
         &.k-focus {
-            @include fill(
-                $color: var( --kendo-breadcrumb-root-link-focus-text, #{$kendo-breadcrumb-root-link-focus-text} ),
-                $bg: var( --kendo-breadcrumb-root-link-focus-bg, #{$kendo-breadcrumb-root-link-focus-bg} ),
-            );
-            @include box-shadow( var( --kendo-breadcrumb-root-link-focus-shadow, #{$kendo-breadcrumb-root-link-focus-shadow} ) );
-
             // Focus-hover state
             &:hover,
             &.k-hover {
-                @include fill( $bg: var( --kendo-breadcrumb-root-link-focus-hover-bg, #{$kendo-breadcrumb-root-link-focus-hover-bg} ) );
+                @include fill( $bg: $kendo-breadcrumb-root-link-focus-hover-bg );
             }
         }
 
@@ -127,7 +71,7 @@
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include fill( $color: var( --kendo-breadcrumb-root-link-disabled-text, #{$kendo-breadcrumb-root-link-disabled-text} ) );
+            @include fill( $color: $kendo-breadcrumb-root-link-disabled-text );
         }
     }