fix(nav-drawer): different colors in WC and Angular (#409)

src/components/nav-drawer/nav-drawer-header-item.ts

@@ -1,8 +1,8 @@
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles as fluent } from './styles/fluent/nav-drawer-header-item.fluent.css.js';
-import { styles as indigo } from './styles/indigo/nav-drawer-header-item.indigo.css.js';
-import { styles } from './styles/nav-drawer-header-item.base.css.js';
+import { styles as fluent } from './themes/light/fluent/nav-drawer-header-item.fluent.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer-header-item.indigo.css.js';
+import { styles } from './themes/light/nav-drawer-header-item.base.css.js';
 
 /**
  * A wrapper for navigation drawer's header.

src/components/nav-drawer/nav-drawer-item.ts

@@ -7,9 +7,9 @@ import {
 } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as fluent } from './styles/fluent/nav-drawer-item.fluent.css.js';
-import { styles as indigo } from './styles/indigo/nav-drawer-item.indigo.css.js';
-import { styles } from './styles/nav-drawer-item.base.css.js';
+import { styles as fluent } from './themes/light/fluent/nav-drawer-item.fluent.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer-item.indigo.css.js';
+import { styles } from './themes/light/nav-drawer-item.base.css.js';
 
 /**
  * Represents a navigation drawer item.

src/components/nav-drawer/nav-drawer.ts

@@ -2,8 +2,8 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as indigo } from './styles/indigo/nav-drawer.indigo.css.js';
-import { styles } from './styles/nav-drawer.base.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer.indigo.css.js';
+import { styles } from './themes/light/nav-drawer.base.css.js';
 
 /**
  * Represents a side navigation container that provides

src/components/nav-drawer/themes/dark/nav-drawer-item.base.scss

@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100, .5)};
+    }
+}

src/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.scss

@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100)};
+    }
+}

src/components/nav-drawer/themes/dark/nav-drawer-item.fluent.scss

@@ -0,0 +1,10 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100, .5)};
+        --active-background: #{color(primary, 400, .12)};
+        --active-icon-color: #{color(primary, 100)};
+        --active-text-color: #{color(primary, 200)};
+    }
+}

src/components/nav-drawer/themes/dark/nav-drawer-item.indigo.scss

@@ -0,0 +1,9 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --text-color: #{color(gray, 100)};
+        --hover-text-color: #{color(gray, 50)};
+        --active-background: #{color(gray, 400, .5)};
+    }
+}

src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss

@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer {
+        --background: #{color(gray, 500)};
+    }
+}

src/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.scss

@@ -0,0 +1,5 @@
+@use '../../../../../styles/utilities/index' as *;
+
+:host {
+    @include type-category('caption');
+}

src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.scss

@@ -0,0 +1,13 @@
+@use '../../../../../styles/utilities/index' as *;
+
+$active-icon-color: var(--active-icon-color, color(primary, 500)) !default;
+
+[part='base'] {
+    @include type-category('body-2');
+}
+
+:host([active]) {
+    [part='icon'] {
+        color: $active-icon-color;
+    }
+}

src/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.scss

@@ -0,0 +1,5 @@
+@use '../../../../../styles/utilities/index' as *;
+
+:host {
+    color: color(gray, 50);
+}

src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss → src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.scss

@@ -1,18 +1,22 @@
-@use '../../../../styles/utilities/index' as *;
+@use '../../../../../styles/utilities/index' as *;
+
+$active-background: var(--active-background, color(gray, 600, .8)) !default;
+$text-color: var(--text-color, color(gray, 300, .8)) !default;
+$hover-text-color: var(--hover-text-color, color(gray, 100)) !default;
 
 :host {
     [part~='base'] {
         @include border-radius(rem(24px));
 
         gap: rem(24px);
-        color: color(gray, 300, .8);
+        color: $text-color;
         padding: rem(4px);
         margin: rem(15px) rem(8px) !important;
 
         &:hover,
         &:focus-within {
             background: transparent;
-            color: color(gray, 100);
+            color: $hover-text-color;
         }
     }
 
@@ -23,7 +27,7 @@
 
 :host([active]) {
     [part~='base'] {
-        background: color(gray, 600, .8);
+        background: $active-background;
         color: color(gray, 50);
     }
 }

src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.scss

@@ -0,0 +1,16 @@
+@use '../../../../../styles/utilities/index' as *;
+
+$background: var(--background, color(gray, 700)) !default;
+
+:host {
+    [part='base'] {
+        background: $background;
+        border: none;
+        box-shadow: none;
+    }
+}
+
+:host([position='start']) [part='mini'],
+:host([position='end']) [part='mini'] {
+    background: $background;
+}

src/components/nav-drawer/styles/nav-drawer-header-item.base.scss → src/components/nav-drawer/themes/light/nav-drawer-header-item.base.scss

@@ -1,11 +1,11 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
 :host {
     display: block;
     padding: rem(20px) rem(16px);
     white-space: nowrap;
-    color: color(gray, 900);
+    color: color(gray, 800);
 
     @include type-category('subtitle-1');
 }

src/components/nav-drawer/styles/nav-drawer-item.base.scss → src/components/nav-drawer/themes/light/nav-drawer-item.base.scss

@@ -1,6 +1,9 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
+$active-text-color: var(--active-text-color, color(primary, 500)) !default;
+$active-background: var(--active-background, color(primary, 500, .12)) !default;
+$hover-background: var(--hover-background, color(gray, 200, .8)) !default;
 $item-margin: rem(8px);
 
 [part~='base'] {
@@ -9,7 +12,7 @@ $item-margin: rem(8px);
     align-items: center;
     flex-flow: row nowrap;
     position: relative;
-    color: color(gray, 800);
+    color: color(gray, 700);
     max-height: rem(48px);
     margin: #{$item-margin} !important;
     padding: rem(12px) rem(8px);
@@ -31,12 +34,10 @@ $item-margin: rem(8px);
         font: inherit;
     }
 
-    &:hover {
-        background: color(gray, 200, .87);
-    }
-
+    &:hover,
     &:focus-within {
-        background: color(gray, 300, .87);
+        background: $hover-background;
+        color: color(gray, 900);
     }
 }
 
@@ -68,7 +69,7 @@ $item-margin: rem(8px);
 
 :host([active]) {
     [part~='base'] {
-        background: color(primary, 500, .12);
-        color: color(primary, 500);
+        background: $active-background;
+        color: $active-text-color;
     }
 }

src/components/nav-drawer/styles/nav-drawer.base.scss → src/components/nav-drawer/themes/light/nav-drawer.base.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
 :host {
     flex-shrink: 0;

src/styles/themes/dark/bootstrap.scss

@@ -5,6 +5,7 @@
 @use '../../../components/slider/themes/dark/slider.bootstrap' as slider;
 @use '../../../components/list/themes/dark/list.bootstrap' as list;
 @use '../../../components/tree/themes/dark/tree-item.bootstrap' as tree-item;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.bootstrap' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #0d6efd,
@@ -24,3 +25,4 @@ $palette: utils.palette(
 @include slider.theme();
 @include list.theme();
 @include tree-item.theme();
+@include nav-drawer-item.theme();

src/styles/themes/dark/fluent.scss

@@ -10,6 +10,7 @@
 @use '../../../components/slider/themes/dark/slider.fluent.scss' as slider;
 @use '../../../components/list/themes/dark/list.fluent' as list;
 @use '../../../components/tree/themes/dark/tree-item.fluent' as tree-item;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.fluent' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #0078d4,
@@ -33,3 +34,4 @@ $palette: utils.palette(
 @include slider.theme();
 @include list.theme();
 @include tree-item.theme();
+@include nav-drawer-item.theme();

src/styles/themes/dark/indigo.scss

@@ -8,6 +8,8 @@
 @use '../../../components/list/themes/dark/list.indigo' as list;
 @use '../../../components/tree/themes/dark/tree-item.indigo' as tree-item;
 @use '../../../components/dropdown/themes/dark/dropdown.indigo' as dropdown;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer.indigo' as nav-drawer;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.indigo' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #3f51b5,
@@ -30,3 +32,5 @@ $palette: utils.palette(
 @include list.theme();
 @include tree-item.theme();
 @include dropdown.theme();
+@include nav-drawer.theme();
+@include nav-drawer-item.theme();

src/styles/themes/dark/material.scss

@@ -1,6 +1,7 @@
 @use '../../utilities' as utils;
 @use '../base/material' as base;
 @use '../../../components/input/themes/dark/input.dark.material' as input;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.base.scss' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #09f,
@@ -11,3 +12,4 @@ $palette: utils.palette(
 
 @include base.root-styles($palette);
 @include input.theme();
+@include nav-drawer-item.theme();