fix(bottom-nav): rename themeColor class to match current convention

k-bottom-nav-#{$themeColor} renamed to k-bottom-nav-#{$fillMode}-#{$themeColor}
telerik · Apr 21, 2023 · 7ad724a · 7ad724a
1 parent 153b853
commit 7ad724a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/packages/default/scss/bottom-navigation/_theme.scss b/packages/default/scss/bottom-navigation/_theme.scss
@@ -2,7 +2,7 @@
 
     // Solid
     @each $name, $color in $kendo-theme-colors {
-        .k-bottom-nav-solid.k-bottom-nav-#{$name} {
+        .k-bottom-nav-solid-#{$name} {
             @include fill(
                 $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%),
                 $bg: $color
@@ -17,30 +17,37 @@
                 @include fill( $color: k-contrast-legacy( $color ) );
             }
         }
+        // TODO: remove when suites update class names
+        .k-bottom-nav-solid.k-bottom-nav-#{$name} {
+            @extend .k-bottom-nav-solid-#{$name} !optional;
+        }
     }
 
     // Flat
-    .k-bottom-nav-flat {
-        @include fill(
-            $kendo-bottom-nav-flat-text,
-            $kendo-bottom-nav-flat-bg,
-            $kendo-bottom-nav-flat-border
-        );
-
-        .k-bottom-nav-item.k-focus,
-        .k-bottom-nav-item:focus {
-            @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) );
-        }
+    @each $name, $color in $kendo-theme-colors {
+        .k-bottom-nav-flat-#{$name} {
+            @include fill(
+                $kendo-bottom-nav-flat-text,
+                $kendo-bottom-nav-flat-bg,
+                $kendo-bottom-nav-flat-border
+            );
 
-        @each $name, $color in $kendo-theme-colors {
-            &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
+            .k-bottom-nav-item.k-focus,
+            .k-bottom-nav-item:focus {
+                @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) );
+            }
+
+            .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: k-try-shade($color, 3) );
                 } @else {
                     @include fill( $color: $color );
                 }
             }
         }
+        .k-bottom-nav-flat.k-bottom-nav-#{$name} {
+            @extend .k-bottom-nav-flat-#{$name} !optional;
+        }
     }
 
 }

diff --git a/packages/fluent/scss/bottom-navigation/_theme.scss b/packages/fluent/scss/bottom-navigation/_theme.scss
@@ -69,7 +69,7 @@
             $_disabled-bg: map.get( $color-props, disabled-bg );
             $_disabled-border: map.get( $color-props, disabled-border );
 
-            .k-bottom-nav-#{$fill-mode}.k-bottom-nav-#{$theme-color} {
+            .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} );
@@ -87,6 +87,10 @@
                 --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} );
             }
+            // 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;
+            }
         }
     }