refactor(nav-drawer): update themes (#1167)

src/components/nav-drawer/themes/container.base.scss

@@ -2,8 +2,7 @@
 @use 'styles/utilities' as *;
 
 :host {
-    --menu-full-width: #{rem(256px)};
-    --menu-mini-width: #{rem(60px)};
+    --menu-full-width: #{rem(240px)};
 
     display: flex;
     flex-shrink: 0;
@@ -26,10 +25,14 @@
     [part~='mini'] {
         width: var(--menu-mini-width);
     }
-
-    [part='main'], [part='base'] {
+	
+	[part='base'] {
         width: var(--menu-full-width);
     }
+
+	[part='main'] {
+		width: 100%;
+	}
 
     [part='overlay'] {
         position: fixed;

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

@@ -6,27 +6,27 @@ import { styles as bootstrapDark } from './dark/container/nav-drawer.bootstrap.c
 import { styles as fluentDark } from './dark/container/nav-drawer.fluent.css.js';
 import { styles as indigoDark } from './dark/container/nav-drawer.indigo.css.js';
 import { styles as materialDark } from './dark/container/nav-drawer.material.css.js';
-import { styles as sharedDark } from './dark/container/nav-drawer.shared.css.js';
 // Light Overrides
 import { styles as bootstrapLight } from './light/container/nav-drawer.bootstrap.css.js';
 import { styles as fluentLight } from './light/container/nav-drawer.fluent.css.js';
 import { styles as indigoLight } from './light/container/nav-drawer.indigo.css.js';
 import { styles as materialLight } from './light/container/nav-drawer.material.css.js';
-import { styles as sharedLight } from './light/container/nav-drawer.shared.css.js';
+import { styles as shared } from './light/container/nav-drawer.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/container/nav-drawer.bootstrap.css.js';
 import { styles as fluent } from './shared/container/nav-drawer.fluent.css.js';
 import { styles as indigo } from './shared/container/nav-drawer.indigo.css.js';
+import { styles as material } from './shared/container/nav-drawer.material.css.js';
 
 const light = {
   shared: css`
-    ${sharedLight}
+    ${shared}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${materialLight}
+    ${material} ${materialLight}
   `,
   fluent: css`
     ${fluent} ${fluentLight}
@@ -38,13 +38,13 @@ const light = {
 
 const dark = {
   shared: css`
-    ${sharedDark}
+    ${shared}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${materialDark}
+    ${material} ${materialDark}
   `,
   fluent: css`
     ${fluent} ${fluentDark}

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

@@ -2,7 +2,6 @@
 @use 'igniteui-theming/sass/themes/schemas/components/dark/navdrawer' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/overlay' as *;
 
-$base: digest-schema($dark-base-navdrawer);
 $material: digest-schema($dark-material-navdrawer);
 $bootstrap: digest-schema($dark-bootstrap-navdrawer);
 $fluent: digest-schema($dark-fluent-navdrawer);

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

@@ -2,7 +2,9 @@
 @use '../themes' as *;
 @use '../../light/themes' as light;
 
+$theme: $bootstrap;
+
 :host {
-    @include css-vars-from-theme(diff($base, $bootstrap), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-nav-drawer');
     @include css-vars-from-theme(diff(light.$base-overlay, $bootstrap-overlay), 'ig-nav-drawer');
 }

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

@@ -2,7 +2,9 @@
 @use '../themes' as *;
 @use '../../light/themes' as light;
 
+$theme: $fluent;
+
 :host {
-    @include css-vars-from-theme(diff($base, $fluent), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-nav-drawer');
     @include css-vars-from-theme(diff(light.$base-overlay, $fluent-overlay), 'ig-nav-drawer');
 }

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

@@ -2,7 +2,9 @@
 @use '../themes' as *;
 @use '../../light/themes' as light;
 
+$theme: $indigo;
+
 :host {
-    @include css-vars-from-theme(diff($base, $indigo), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-nav-drawer');
     @include css-vars-from-theme(diff(light.$base-overlay, $indigo-overlay), 'ig-nav-drawer');
 }

src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss

@@ -2,7 +2,9 @@
 @use '../themes' as *;
 @use '../../light/themes' as light;
 
+$theme: $material;
+
 :host {
-    @include css-vars-from-theme(diff($base, $material), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-nav-drawer');
     @include css-vars-from-theme(diff(light.$base-overlay, $material-overlay), 'ig-nav-drawer');
 }

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

@@ -2,7 +2,7 @@
 @use 'styles/utilities' as *;
 
 :host {
-    display: block;
-    padding: rem(20px) rem(16px);
+    display: flex;
+    align-items: center;
     white-space: nowrap;
 }

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

@@ -3,12 +3,20 @@ import type { Themes } from '../../../theming/types.js';
 
 // Shared Styles
 import { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js';
+import { styles as fluent } from './shared/header-item/header-item.fluent.css.js';
 import { styles as indigo } from './shared/header-item/header-item.indigo.css.js';
+import { styles as material } from './shared/header-item/header-item.material.css.js';
 
 const light = {
   bootstrap: css`
     ${bootstrap}
   `,
+  material: css`
+    ${material}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
   indigo: css`
     ${indigo}
   `,
@@ -18,6 +26,12 @@ const dark = {
   bootstrap: css`
     ${bootstrap}
   `,
+  material: css`
+    ${material}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
   indigo: css`
     ${indigo}
   `,

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

@@ -3,13 +3,9 @@
 
 [part~='base'] {
     display: flex;
-    gap: rem(32px);
     align-items: center;
     flex-flow: row nowrap;
     position: relative;
-    max-height: rem(48px);
-    margin: rem(8px);
-    padding: rem(12px) rem(8px);
     cursor: pointer;
     user-select: none;
     outline: transparent;
@@ -37,10 +33,6 @@
     [part='content'] {
         display: none;
     }
-
-    ::slotted(igc-icon) {
-        width: 100%;
-    }
 }
 
 :host([disabled]) {

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

@@ -5,11 +5,15 @@ import type { Themes } from '../../../theming/types.js';
 import { styles as bootstrap } from './shared/item/item.bootstrap.css.js';
 import { styles as fluent } from './shared/item/item.fluent.css.js';
 import { styles as indigo } from './shared/item/item.indigo.css.js';
+import { styles as material } from './shared/item/item.material.css.js';
 
 const light = {
   bootstrap: css`
     ${bootstrap}
   `,
+  material: css`
+    ${material}
+  `,
   fluent: css`
     ${fluent}
   `,
@@ -22,6 +26,9 @@ const dark = {
   bootstrap: css`
     ${bootstrap}
   `,
+  material: css`
+    ${material}
+  `,
   fluent: css`
     ${fluent}
   `,

src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss

@@ -1,10 +1,10 @@
 @use 'styles/utilities' as *;
-@use '../../light/themes' as *;
-
-$theme: $bootstrap;
 
 :host {
-    [part='overlay'] {
-        background: var-get($overlay-bootstrap, 'background-color');
-    }
+    --menu-mini-width: #{rem(88px)};
+}
+
+[part='mini'],
+[part='main'] {
+    padding: rem(16px);
 }

src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss

@@ -4,17 +4,13 @@
 $theme: $material;
 $background: var-get($theme, 'background') !default;
 
-:host {
-    [part='base'] {
-        border-radius: var-get($theme, 'border-radius');
-        background: $background;
-        border: none;
-        box-shadow: none;
-    }
+[part='overlay'] {
+    background: var-get($overlay-material, 'background-color');
+}
 
-    [part='overlay'] {
-        background: var-get($overlay-material, 'background-color');
-    }
+[part='base'] {
+    border-radius: var-get($theme, 'border-radius');
+    background: $background;
 }
 
 [part='mini'] {
@@ -26,30 +22,13 @@ $background: var-get($theme, 'background') !default;
     box-shadow: var-get($theme, 'elevation');
 }
 
-:host([position='start']) [part='mini'] {
+[part~='base'],
+[part~='mini'] {
     border-inline-end-color: var-get($theme, 'border-color');
 }
 
-:host([position='end']) [part='mini'] {
-    border-inline-start-color: var-get($theme, 'border-color');
-}
-
-:host([open][position='end']) {
-    [part='base'] {
-        border-inline-start-color: var-get($theme, 'border-color');
-    }
-}
-
-:host([position='relative']) {
-    [part='base'],
-    [part~='mini'] {
-        border-inline-end-color: var-get($theme, 'border-color');
-    }
-}
-
 :host([open]:not([position='relative'])) {
     [part='base'] {
-        border-inline-end-color: var-get($theme, 'border-color');
         box-shadow: var-get($theme, 'elevation');
     }
 }

src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss

@@ -4,7 +4,10 @@
 $theme: $fluent;
 
 :host {
-    [part='overlay'] {
-        background: var-get($overlay-fluent, 'background-color');
-    }
+    --menu-mini-width: #{rem(40px)};
+}
+
+[part='base'],
+[part~='mini'] {
+    border: rem(1px) solid var-get($theme, 'border-color');
 }

src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss

@@ -4,7 +4,6 @@
 $theme: $indigo;
 
 :host {
-    --menu-full-width: #{rem(240px)};
     --menu-mini-width: #{rem(48px)};
 
     [part='overlay'] {

src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss

@@ -0,0 +1,10 @@
+@use 'styles/utilities' as *;
+
+:host {
+    --menu-mini-width: #{rem(56px)};
+}
+
+[part='mini'],
+[part='main'] {
+    padding: rem(8px);
+}

src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss

@@ -2,4 +2,8 @@
 
 :host {
     @include type-style('caption');
+
+    padding: rem(8px) rem(16px);
+    min-height: rem(40px);
 }
+

src/components/nav-drawer/themes/shared/header-item/header-item.common.scss

@@ -8,3 +8,4 @@ $theme: $material;
 
     color: var-get($theme, 'item-header-text-color');
 }
+

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

@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+
+:host {
+    padding: rem(10px) rem(8px);
+    min-height: rem(44px)
+}

src/components/nav-drawer/themes/shared/header-item/header-item.material.scss

@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+
+:host {
+    padding: rem(12px) rem(8px);
+    min-height: rem(48px);
+}

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

@@ -1,5 +1,15 @@
 @use 'styles/utilities' as *;
 
+[part~='base'] {
+    padding: rem(8px) rem(16px);
+    gap: rem(8px);
+    min-height: rem(40px);
+}
+
+[part~='base'][part~='mini'] {
+    min-width: rem(56px);
+}
+
 [part='content'] {
     @include type-style('body-2');
 }

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

@@ -1,5 +1,11 @@
 @use 'styles/utilities' as *;
 
+[part~='base'] {
+    padding: rem(10px) rem(8px);
+    gap: rem(8px);
+    min-height: rem(44px);
+}
+
 [part='content'] {
     @include type-style('body-2');
 }