Merge 626f21f into 1f86e38

package.json

@@ -78,7 +78,7 @@
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "ig-typedoc-theme": "^5.0.3",
-    "igniteui-theming": "^6.2.0",
+    "igniteui-theming": "^6.3.0-beta.4",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.2",
     "lit-analyzer": "^2.0.3",

src/components/checkbox/themes/shared/switch/switch.common.scss

@@ -10,6 +10,12 @@ $theme: $material;
     transition: all .2s ease-in-out;
 }
 
+:host(:hover) {
+    [part~='label'] {
+        color: var-get($theme, 'label-hover-color');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     [part~='label'] {

src/components/checkbox/themes/shared/switch/switch.indigo.scss

@@ -6,7 +6,7 @@ $checked-color: var-get($theme, 'track-on-color') !default;
 $border-width: rem(1px);
 
 :host {
-    --size: #{rem(34px)};
+    --size: #{rem(32px)};
     --thumb-size: #{rem(8px)};
     --border-size: #{rem(1px)};
     --thumb-offset: #{rem(2px)};
@@ -15,11 +15,22 @@ $border-width: rem(1px);
     font-weight: 600;
 }
 
-[part~='base'] {
-    &:hover {
-        [part~='control'][part~='checked'] {
-            border-color: var-get($theme, 'border-on-hover-color');
-        }
+[part~='label'] {
+    @include type-style('body-2');
+}
+
+:host(:hover) {
+    [part~='control'] {
+        border-color: var-get($theme, 'border-hover-color');
+    }
+
+    [part~='thumb']:not([part~='checked']) {
+        background: var-get($theme, 'border-hover-color');
+    }
+
+    [part~='control'][part~='checked'] {
+        background: var-get($theme, 'track-on-hover-color');
+        border-color: var-get($theme, 'border-on-hover-color');
     }
 }
 
@@ -91,6 +102,6 @@ $border-width: rem(1px);
 :host([disabled]),
 :host(:disabled) {
     [part~='control'][part~='checked'] {
-        border-color: var-get($theme, 'border-disabled-color');
+        border-color: transparent;
     }
 }

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

@@ -24,10 +24,10 @@
     }
 
     [part~='mini'] {
-        min-width: var(--menu-mini-width);
+        width: var(--menu-mini-width);
     }
 
-    [part='main'] {
+    [part='main'], [part='base'] {
         width: var(--menu-full-width);
     }
 

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

@@ -1,19 +1,26 @@
 import { css } from 'lit';
-
 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 indigo } from './shared/header-item/header-item.indigo.css.js';
 
 const light = {
   bootstrap: css`
     ${bootstrap}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 const dark = {
   bootstrap: css`
     ${bootstrap}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 export const all: Themes = { light, dark };

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

@@ -4,7 +4,14 @@
 $theme: $indigo;
 
 :host {
+    --menu-full-width: #{rem(240px)};
+    --menu-mini-width: #{rem(48px)};
+
     [part='overlay'] {
         background: var-get($overlay-indigo, 'background-color');
     }
+
+    [part='mini'], [part="main"] {
+        padding: rem(8px);
+    }
 }

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

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+
+:host {
+    @include type-style('overline');
+
+    padding: rem(8px) rem(16px);
+    box-sizing: content-box;
+    min-height: 16px;
+}

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

@@ -1,11 +1,16 @@
 @use 'styles/utilities' as *;
 
 [part~='base'] {
-    gap: rem(24px);
-    padding: rem(4px);
-    margin: rem(15px) rem(8px);
+    gap: rem(16px);
+    padding: rem(8px) rem(16px);
+    margin: 0;
+    margin-block-end: rem(4px);
+
+    ::slotted(igc-icon) {
+        --ig-size: 2;
+    }
 }
 
-[part='content'] {
-    padding-inline-start: rem(8px);
+[part='base mini'] {
+    padding: rem(8px);
 }

src/components/navbar/themes/shared/navbar.bootstrap.scss

@@ -6,7 +6,6 @@ $theme: $bootstrap;
 :host {
     box-shadow: var(--ig-elevation-0);
     padding: 0 rem(8px);
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
 }
 
 [part='base'] {

src/components/navbar/themes/shared/navbar.common.scss

@@ -6,6 +6,7 @@ $theme: $material;
 :host {
     background: var-get($theme, 'background');
     color: var-get($theme, 'text-color');
+    border-bottom: rem(1px) solid var-get($theme, 'border-color');
     box-shadow: var(--ig-elevation-4);
 }
 

src/components/navbar/themes/shared/navbar.indigo.scss

@@ -1,5 +1,30 @@
 @use 'styles/utilities' as *;
 
 :host {
+    min-height: rem(56px);
     box-shadow: var(--ig-elevation-0);
+
+    [name='start']::slotted(*),
+    [name='end']::slotted(*) {
+        margin: initial;
+    }
+}
+
+[part='end'] {
+    gap: rem(8px);
+}
+
+[part='base'] {
+    gap: rem(16px);
+}
+
+::slotted(*) {
+    @include type-style('h5');
+}
+
+::slotted(igc-icon) {
+    --size: rem(16px);
+
+    padding: rem(6px);
+    margin: 0;
 }