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

package/scss/badge/_layout.scss

@@ -1,155 +1,12 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *;
 
 @mixin kendo-badge--layout() {
+    @include kendo-badge--layout-base();
 
     .k-badge {
-        padding-inline: var( --kendo-badge-padding-x, 0 );
-        padding-block: var( --kendo-badge-padding-y, 0 );
-        min-width: var( --kendo-badge-min-width, auto );
-        font-size: var( --kendo-badge-font-size, 1rem );
-        font-weight: var( --kendo-badge-font-weight, #{$kendo-badge-font-weight} );
-        line-height: var( --kendo-badge-line-height, normal );
-        border-width: var( --kendo-badge-border-width, #{$kendo-badge-border-width} );
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        color: inherit;
-        background-color: transparent;
-        text-align: center;
-        white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-    .k-badge > * {
-        color: inherit;
-    }
-
-
-    // Links
-    a.k-badge,
-    .k-badge > a {
-        text-decoration: none;
-    }
-    a.k-badge:hover,
-    .k-badge > a:hover {
-        text-decoration: underline;
-    }
-
-
-    // Icon
-    .k-badge-icon {
-        max-width: 1em;
-        max-height: 1em;
-        font-size: inherit;
-    }
-    .k-badge-icon svg {
-        fill: currentColor;
-    }
-
-    // Badge sizes
-    @each $size, $size-props in $kendo-badge-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_min-width: map.get( $size-props, min-width );
-
-        .k-badge-#{$size} {
-            --kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
-            --kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
-            --kendo-badge-font-size: var( --kendo-badge-#{$size}-font-size, #{$_font-size} );
-            --kendo-badge-line-height: var( --kendo-badge-#{$size}-line-height, #{$_line-height} );
-            --kendo-badge-min-width: var( --kendo-badge-#{$size}-min-width, #{$_min-width} );
-
-            &:empty {
-                --kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
-                --kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
-
-                min-width: auto;
-            }
-        }
-    }
-
-    kendo-badge-container {
-        display: inline-block;
-    }
-
-    // Badge position
-    .k-badge-container {
-        position: relative;
-        overflow: visible;
-    }
-
-    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {
-
-        .k-badge-#{$placement} {
-            position: absolute;
-            z-index: 9999;
-
-            &.k-top-start {
-                @if $translate {
-                    transform: translate( -1% * $translate, -1% * $translate );
-                }
-            }
-            &.k-top-end {
-                @if $translate {
-                    transform: translate( 1% * $translate, -1% * $translate );
-                }
-            }
-            &.k-bottom-start {
-                @if $translate {
-                    transform: translate( -1% * $translate, 1% * $translate );
-                }
-            }
-            &.k-bottom-end {
-                @if $translate {
-                    transform: translate( 1% * $translate, 1% * $translate );
-                }
-            }
-        }
-
-        .k-rtl .k-badge-#{$placement},
-        [dir="rtl"].k-badge-#{$placement},
-        [dir="rtl"] .k-badge-#{$placement} {
-            &.k-top-start {
-                @if $translate {
-                    transform: translate( 1% * $translate, -1% * $translate );
-                }
-            }
-            &.k-top-end {
-                @if $translate {
-                    transform: translate( -1% * $translate, -1% * $translate );
-                }
-            }
-            &.k-bottom-start {
-                @if $translate {
-                    transform: translate( 1% * $translate, 1% * $translate );
-                }
-            }
-            &.k-bottom-end {
-                @if $translate {
-                    transform: translate( -1% * $translate, 1% * $translate );
-                }
-            }
-        }
+        font-weight: $kendo-badge-font-weight;
     }
-
-
-    // Border cutout
-    .k-badge-border-cutout {
-        box-shadow: 0 0 0 2px k-color(surface-alt);
-    }
-
 }

package/scss/badge/_theme.scss

@@ -1,31 +1,18 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *;
 
 @mixin kendo-badge--theme() {
+    @include kendo-badge--theme-base();
 
-    .k-badge {
-        color: var( --kendo-badge-text, #{$kendo-badge-text} );
-        background-color: var( --kendo-badge-bg, #{$kendo-badge-bg} );
-        border-color: var( --kendo-badge-border, #{$kendo-badge-border} );
+    .k-badge-solid-base {
+        color: $kendo-badge-text;
+        background-color: $kendo-badge-bg;
+        border-color: $kendo-badge-border;
     }
 
-    .k-badge-outline {
-        background-color: transparent;
-    }
-
-    @each $fill-mode, $theme-colors in $kendo-badge-theme-colors {
-        @each $theme-color, $color-props in $theme-colors {
-
-            $_text: map.get( $color-props, text );
-            $_bg: map.get( $color-props, bg );
-            $_border: map.get( $color-props, border );
-
-            .k-badge-#{$fill-mode}-#{$theme-color} {
-                --kendo-badge-text: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-text, #{$_text} );
-                --kendo-badge-bg: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
-                --kendo-badge-border: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-border, #{$_border} );
-            }
-        }
+    .k-badge-outline-base {
+        border-color: $kendo-badge-border;
     }
 }

package/scss/badge/_variables.scss

@@ -3,28 +3,28 @@
 
 /// The background color of the Badge.
 /// @group badge
-$kendo-badge-bg: k-color(surface-alt) !default;
+$kendo-badge-bg: var( --kendo-badge-bg, k-color(surface-alt) ) !default;
 /// The text color of the Badge.
 /// @group badge
-$kendo-badge-text: k-color(on-app-surface) !default;
+$kendo-badge-text: var( --kendo-badge-text, k-color(on-app-surface) ) !default;
 /// The border color of the Badge.
 /// @group badge
-$kendo-badge-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-badge-border: var( --kendo-badge-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The border width of the Badge.
 /// @group badge
-$kendo-badge-border-width: 1px !default;
+$kendo-badge-border-width: var( --kendo-badge-border-width, 1px ) !default;
 
 /// The font weight of the Badge.
 /// @group badge
-$kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
+$kendo-badge-font-weight: var( --kendo-badge-font-weight, var( --kendo-font-weight, normal ) ) !default;
 
 /// Horizontal padding of the small Badge.
 /// @group badge
 $kendo-badge-sm-padding-x: k-spacing(0.5) !default;
 /// Horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: k-spacing(1) !default;
+$kendo-badge-md-padding-x: var( --kendo-badge-padding-x, k-spacing(1) ) !default;
 /// Horizontal padding of the large Badge.
 /// @group badge
 $kendo-badge-lg-padding-x: k-spacing(1.5) !default;
@@ -34,7 +34,7 @@ $kendo-badge-lg-padding-x: k-spacing(1.5) !default;
 $kendo-badge-sm-padding-y: k-spacing(0.5) !default;
 /// Vertical padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-y: k-spacing(1) !default;
+$kendo-badge-md-padding-y: var( --kendo-badge-padding-y, k-spacing(1) ) !default;
 /// Vertical padding of the large Badge.
 /// @group badge
 $kendo-badge-lg-padding-y: k-spacing(1.5) !default;
@@ -44,7 +44,7 @@ $kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 $kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The font size of the medium Badge.
 /// @group badge
-$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-md-font-size: var( --kendo-badge-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// The font size of the large Badge.
 /// @group badge
 $kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
@@ -54,7 +54,7 @@ $kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 $kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Badge.
 /// @group badge
-$kendo-badge-md-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-md-line-height: var( --kendo-badge-line-height, var( --kendo-line-height-xs, normal ) ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Badge.
 /// @group badge
 $kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
@@ -96,85 +96,38 @@ $kendo-badge-sizes: (
     )
 ) !default;
 
-
-/// The theme variations for the Badge.
-/// @group badge
-$kendo-badge-brand-colors: (
-    primary: primary,
-    error: error,
-    success: success,
-    info: info,
-    secondary: secondary,
-    tertiary: tertiary,
- ) !default;
-
-// Matrices with Badge theme colors in the order: bg, color, border
-$_tc-badge-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (transparent, color, color)
-    )
-) !default;
-
-$_tc-badge-warning-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (transparent, color, color)
-    )
-) !default;
-
-$_tc-badge-dark-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (transparent, color, color)
-    )
-) !default;
-
-$_tc-badge-light-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (transparent, color, color)
-    )
-) !default;
-
 /// The theme colors map for the Badge variations.
 /// @group badge
-$kendo-badge-theme-colors: () !default;
-
-@each $fill-mode, $ui-states in $_tc-badge-matrix {
-    @each $brand-color, $palette in $kendo-badge-brand-colors {
-        $kendo-badge-theme-colors: map.deep-merge(
-            $kendo-badge-theme-colors,
-            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $fill-mode, $ui-states in $_tc-badge-warning-matrix {
-    $kendo-badge-theme-colors: map.deep-merge(
-        $kendo-badge-theme-colors,
-        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,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $ui-states )
-    );
-}
+$kendo-badge-theme-colors: (
+    "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-badge-light-matrix {
-    $kendo-badge-theme-colors: map.deep-merge(
-        $kendo-badge-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
+    $kendo-badge-border-width: $kendo-badge-border-width,
+    $kendo-badge-sm-padding-x: $kendo-badge-sm-padding-x,
+    $kendo-badge-md-padding-x: $kendo-badge-md-padding-x,
+    $kendo-badge-lg-padding-x: $kendo-badge-lg-padding-x,
+    $kendo-badge-sm-padding-y: $kendo-badge-sm-padding-y,
+    $kendo-badge-md-padding-y: $kendo-badge-md-padding-y,
+    $kendo-badge-lg-padding-y: $kendo-badge-lg-padding-y,
+    $kendo-badge-sm-font-size: $kendo-badge-sm-font-size,
+    $kendo-badge-md-font-size: $kendo-badge-md-font-size,
+    $kendo-badge-lg-font-size: $kendo-badge-lg-font-size,
+    $kendo-badge-sm-line-height: $kendo-badge-sm-line-height,
+    $kendo-badge-md-line-height: $kendo-badge-md-line-height,
+    $kendo-badge-lg-line-height: $kendo-badge-lg-line-height,
+    $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
+    $kendo-badge-md-min-width: $kendo-badge-md-min-width,
+    $kendo-badge-lg-min-width: $kendo-badge-lg-min-width,
+    $kendo-badge-sizes: $kendo-badge-sizes,
+    $kendo-badge-theme-colors: $kendo-badge-theme-colors
+);

package/scss/bottom-navigation/_layout.scss

@@ -1,126 +1,23 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *;
 
 @mixin kendo-bottom-navigation--layout() {
 
-    // Bottom Navigation
-    .k-bottom-nav {
-        padding-block: var( --kendo-bottom-nav-padding-y, #{$kendo-bottom-nav-padding-y} );
-        padding-inline: var( --kendo-bottom-nav-padding-x, #{$kendo-bottom-nav-padding-x} );
-        width: 100%;
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        font-size: var( --kendo-bottom-nav-font-size, #{$kendo-bottom-nav-font-size} );
-        line-height: var( --kendo-bottom-nav-line-height, #{$kendo-bottom-nav-line-height} );
-        font-family: var( --kendo-bottom-nav-font-family, #{$kendo-bottom-nav-font-family} );
-        letter-spacing: var( --kendo-bottom-nav-letter-spacing, #{$kendo-bottom-nav-letter-spacing} );
-        display: flex;
-        flex-flow: row nowrap;
-        white-space: nowrap;
-        gap: var( --kendo-bottom-nav-gap, #{$kendo-bottom-nav-gap} );
-        overflow: hidden;
-        outline: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-bottom-nav-border {
-        border-width: var( --kendo-bottom-nav-border-width, #{$kendo-bottom-nav-border-width} );
-    }
-
-    .k-bottom-nav-shadow {
-        box-shadow: var( --kendo-bottom-nav-shadow, #{$kendo-bottom-nav-shadow} );
-    }
+    @include kendo-bottom-navigation--layout-base();
 
     // Items
     .k-bottom-nav-item {
-        padding-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
-        padding-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
-        min-width: var( --kendo-bottom-nav-item-min-width, #{$kendo-bottom-nav-item-min-width} );
-        max-width: var( --kendo-bottom-nav-item-max-width, #{$kendo-bottom-nav-item-max-width} );
-        min-height: var( --kendo-bottom-nav-item-min-height, #{$kendo-bottom-nav-item-min-height} );
-        border-width: 0;
-        border-radius: var( --kendo-bottom-nav-item-border-radius, #{$kendo-bottom-nav-item-border-radius} );
-        box-sizing: border-box;
         position: relative;
-        font: inherit;
-        display: inline-flex;
-        flex: 1 1 auto;
-        align-items: center;
-        justify-content: center;
-        gap: var( --kendo-bottom-nav-item-gap, #{$kendo-bottom-nav-item-gap} );
-        text-decoration: none;
-        cursor: pointer;
-        color: inherit;
-        background-color: inherit;
-        border-color: inherit;
-        outline: none;
-
-        &:focus {
-            outline: none;
-        }
 
         &:focus::after,
         &.k-focus::after {
             content: "";
             position: absolute;
             border: medium none;
-            inset: var( --kendo-bottom-nav-item-focus-offset, #{$kendo-bottom-nav-item-focus-offset} );
-            outline-width: var( --kendo-bottom-nav-item-focus-outline-width, #{$kendo-bottom-nav-item-focus-outline-width} );
-            outline-style: var( --kendo-bottom-nav-item-focus-outline-style, #{$kendo-bottom-nav-item-focus-outline-style} );
+            inset: $kendo-bottom-nav-item-focus-offset;
+            outline-width: $kendo-bottom-nav-item-focus-outline-width;
+            outline-style: $kendo-bottom-nav-item-focus-outline-style;
             z-index: 1;
         }
-
-        &:hover {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        > .k-bottom-nav-link {
-            margin-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
-            margin-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
-            padding-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
-            padding-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
-            width: 100%;
-            color: inherit;
-            display: flex;
-            flex-flow: row nowrap;
-            flex: 1 0 auto;
-            align-items: center;
-            justify-content: center;
-            outline: 0;
-        }
-    }
-    .k-bottom-nav-item.k-disabled {
-        background-color: initial;
-    }
-
-    .k-bottom-nav-item-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
-    }
-
-    // Horizontal Item Layout
-    .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item {
-        flex-flow: row nowrap;
     }
-
-    // Vertical Item Layout
-    .k-bottom-nav-item-flow-vertical .k-bottom-nav-item {
-        flex-direction: column;
-    }
-
-    // Positioning
-    .k-bottom-nav.k-pos-fixed {
-        bottom: 0;
-        z-index: 1;
-    }
-
 }

package/scss/bottom-navigation/_theme.scss

@@ -1,89 +1,88 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *;
 
 @mixin kendo-bottom-navigation--theme() {
 
-    .k-bottom-nav {
-        color: var( --kendo-bottom-nav-text, inherit );
-        background-color: var( --kendo-bottom-nav-bg, initial );
-        border-color: var( --kendo-bottom-nav-border, initial );
-    }
-
-    .k-bottom-nav-item {
-        color: var( --kendo-bottom-nav-item-text, inherit );
-        background-color: var( --kendo-bottom-nav-item-bg, initial );
-        border-color: var( --kendo-bottom-nav-item-border, initial );
-
-        &:focus,
-        &.k-focus {
-            color: var( --kendo-bottom-nav-item-focus-text, inherit );
-            background-color: var( --kendo-bottom-nav-item-focus-bg, initial );
-            border-color: var( --kendo-bottom-nav-item-focus-border, initial );
-        }
-
-        &:focus::after,
-        &.k-focus::after {
-            outline-color: var( --kendo-bottom-nav-item-focus-outline, initial );
-        }
-
-        &.k-selected {
-            color: var( --kendo-bottom-nav-item-selected-text, inherit );
-            background-color: var( --kendo-bottom-nav-item-selected-bg, initial );
-            border-color: var( --kendo-bottom-nav-item-selected-border, initial );
-        }
-
-        &:disabled,
-        &.k-disabled{
-            color: var( --kendo-bottom-nav-item-disabled-text, inherit );
-            background-color: var( --kendo-bottom-nav-item-disabled-bg, initial );
-            border-color: var( --kendo-bottom-nav-item-disabled-border, initial );
+    @include kendo-bottom-navigation--theme-base();
+
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
+        .k-bottom-nav-solid-#{$name} {
+            color: k-color(on-#{$name});
+            background-color: k-color(#{$name});
+            border-color: k-color(#{$name});
+
+            .k-bottom-nav-item {
+                &:focus,
+                &.k-focus {
+                    color: k-color(on-#{$name});
+                    background-color: k-color(#{$name});
+                    border-color: k-color(#{$name});
+                    outline-color: inherit;
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    color: k-color(on-#{$name});
+                    background-color: k-color(#{$name}-active);
+                    border-color: k-color(#{$name}-active);
+                }
+
+                &:disabled,
+                &.k-disabled {
+                    color: color-mix(in srgb, k-color(on-#{$name}) 46%, transparent);
+                    background-color: inherit;
+                    border-color: transparent;
+                }
+            }
         }
     }
 
-    @each $fill-mode, $theme-colors in $kendo-bottom-nav-theme-colors {
-        @each $theme-color, $color-props in $theme-colors {
-
-            $_text-color: map.get( $color-props, text );
-            $_bg: map.get( $color-props, bg );
-            $_border-color: map.get( $color-props, border );
-
-            $_focus-text: map.get( $color-props, focus-text );
-            $_focus-bg: map.get( $color-props, focus-bg );
-            $_focus-border: map.get( $color-props, focus-border );
-            $_focus-outline: map.get( $color-props, focus-outline );
-
-            $_active-text: map.get( $color-props, active-text );
-            $_active-bg: map.get( $color-props, active-bg );
-            $_active-border: map.get( $color-props, active-border );
-
-            $_disabled-text: map.get( $color-props, disabled-text );
-            $_disabled-bg: map.get( $color-props, disabled-bg );
-            $_disabled-border: map.get( $color-props, disabled-border );
-
-            .k-bottom-nav-#{$fill-mode}-#{$theme-color} {
-                --kendo-bottom-nav-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
-                --kendo-bottom-nav-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
-                --kendo-bottom-nav-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
-
-                --kendo-bottom-nav-item-focus-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
-                --kendo-bottom-nav-item-focus-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
-                --kendo-bottom-nav-item-focus-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
-                --kendo-bottom-nav-item-focus-outline: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
-
-                --kendo-bottom-nav-item-selected-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
-                --kendo-bottom-nav-item-selected-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
-                --kendo-bottom-nav-item-selected-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );
+    .k-bottom-nav-solid-warning,
+    .k-bottom-nav-solid-light {
+         .k-bottom-nav-item:focus::after,
+         .k-bottom-nav-item.k-focus::after {
+            outline-color: k-color(app-surface);
+         }
+    }
 
-                --kendo-bottom-nav-item-disabled-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
-                --kendo-bottom-nav-item-disabled-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
-                --kendo-bottom-nav-item-disabled-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
+        .k-bottom-nav-flat-#{$name} {
+            color: k-color(on-app-surface);
+            background-color: k-color(app-surface);
+            border-color: color-mix(in srgb, k-color(border) 16%, transparent);
+
+            .k-bottom-nav-item {
+                &:focus,
+                &.k-focus {
+                    color: k-color(#{$name});
+                    background-color: inherit;
+                    border-color: transparent;
+                    outline-color: k-color(#{$name});
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    color: k-color(#{$name});
+                    background-color: inherit;
+                    border-color: transparent;
+                }
+
+                &:disabled,
+                &.k-disabled {
+                    color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
+                    background-color: initial;
+                    border-color: initial;
+                }
             }
-            // TODO: remove when suites update class names
-            .k-bottom-nav-#{$fill-mode}.k-bottom-nav-#{$theme-color} {
-                @extend .k-bottom-nav-#{$fill-mode}-#{$theme-color} !optional;
+        }
+        @if ($name == "warning" or $name == "dark" or $name == "inverse") {
+            .k-bottom-nav-flat-#{$name} {
+                border-color: k-color(#{$name});
             }
         }
     }
-
 }