Inconsistent Nav Drawer CSS custom property names across Angular vs Web Components/React

[ivanvpetrov]

Description

There is an inconsistency in Nav Drawer CSS custom property naming across Ignite UI platforms:

• igniteui-angular uses:
  • --ig-nav-drawer-size
  • --ig-nav-drawer-size--mini
• igniteui-webcomponents (and therefore igniteui-react, which wraps WC) uses:
  • --menu-full-width
  • --menu-mini-width

This makes cross-platform theming inconsistent and creates confusion when moving between Angular and WC/React implementations.

Code snippets

igniteui-angular

File: projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss

%navdrawer-display {
    --ig-nav-drawer-size: #{rem(240px)};
    --ig-nav-drawer-size--mini: #{$item-mini-size};
}

igniteui-webcomponents

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

:host {
    --menu-full-width: #{rem(240px)};
}
...
[part='mini'] {
    width: var(--menu-mini-width);
}
[part='base'] {
    width: var(--menu-full-width);
}

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

:host {
    --menu-mini-width: #{rem(56px)};
}

Expected behavior

Nav Drawer CSS custom properties should be aligned across platforms (Angular, Web Components, and React wrapper) so users can apply the same theming tokens consistently.

Scope / follow-up

After introducing the naming fix/aliasing, all usages of old names across related repos should be updated, including:

• docs/samples
• skills and guidance content (e.g., in igniteui-react repo)
• any wrappers/integration examples that reference old variable names

Notes

Given current cross-repo usage, this likely needs a coordinated change to avoid breaking existing apps (e.g., support aliases/deprecation window).