From c86e2700bcd52047731c4988e29d06ccaf8c3226 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 11 Mar 2025 09:28:09 +0200 Subject: [PATCH 1/2] feat(bottom-nav): improve bottom-nav theme --- .../bottom-nav/_bottom-nav-theme.scss | 41 ++++++------------- 1 file changed, 13 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index fdb0a893aea..1ba44284d63 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -51,42 +51,32 @@ $theme: digest-schema($bottom-nav-schema); - $meta: map.get($theme, '_meta'); - - @if not($label-color) and $background { - @if meta.type-of($background) == 'color' { - $label-color: text-contrast($background); - } + @if not($label-color) and not($icon-color) and $background { + $label-color: adaptive-contrast($background); } @if not($icon-color) and $label-color { - @if meta.type-of($label-color) == 'color' { - $icon-color: $label-color; - } + $icon-color: $label-color; + } + + @if not($label-color) and $icon-color { + $label-color: $icon-color; } @if not($icon-disabled-color) and $label-disabled-color { - @if meta.type-of($label-disabled-color) == 'color' { - $icon-disabled-color: $label-disabled-color; - } + $icon-disabled-color: $label-disabled-color; } @if not($label-disabled-color) and $icon-disabled-color { - @if meta.type-of($icon-disabled-color) == 'color' { - $label-disabled-color: $icon-disabled-color; - } + $label-disabled-color: $icon-disabled-color; } @if not($icon-selected-color) and $label-selected-color { - @if meta.type-of($background) == 'color' { - $icon-selected-color: $label-selected-color; - } + $icon-selected-color: $label-selected-color; } - @if not($icon-color) and $background { - @if meta.type-of($background) == 'color' { - $icon-color: text-contrast($background); - } + @if not($label-selected-color) and $icon-selected-color { + $label-selected-color: $icon-selected-color; } @if not($shadow) { @@ -105,11 +95,6 @@ label-disabled-color: $label-disabled-color, border-color: $border-color, shadow: $shadow, - theme: map.get($schema, '_meta', 'theme'), - _meta: map.merge(if($meta, $meta, ()), ( - variant: map.get($schema, '_meta', 'theme'), - theme-variant: map.get($schema, '_meta', 'variant') - )), )); } @@ -119,7 +104,7 @@ @mixin bottom-nav($theme) { @include css-vars($theme); - $variant: map.get($theme, '_meta', 'variant'); + $variant: map.get($theme, '_meta', 'theme'); $menu-height: rem(56px); $item-min-width: rem(80px); $item-max-width: rem(168px); From a5926ca484104dd2275b2d281b2546fe21ba57cc Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 12 Mar 2025 10:20:53 +0200 Subject: [PATCH 2/2] feat(bottom-nav): use background css var --- .../styles/components/bottom-nav/_bottom-nav-theme.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 1ba44284d63..87da896f8a7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -52,7 +52,7 @@ $theme: digest-schema($bottom-nav-schema); @if not($label-color) and not($icon-color) and $background { - $label-color: adaptive-contrast($background); + $label-color: adaptive-contrast(var(--background)); } @if not($icon-color) and $label-color { @@ -63,6 +63,10 @@ $label-color: $icon-color; } + @if not($icon-disabled-color) and not($label-disabled-color) and $label-color { + $label-disabled-color: adaptive-contrast(var(--background)); + } + @if not($icon-disabled-color) and $label-disabled-color { $icon-disabled-color: $label-disabled-color; }