refactor(styles): remove hardcoded styles

[Marina-L-Stoyanova]

Description

Related Issue

Closes #1748

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Refactoring / code cleanup
• Build / CI configuration change

Affected Packages

• igniteui-cli (packages/cli)
• @igniteui/cli-core (packages/core)
• @igniteui/angular-templates (packages/igx-templates)
• @igniteui/angular-schematics (packages/ng-schematics)
• @igniteui/mcp-server (packages/igniteui-mcp)

Checklist

• I have tested my changes locally (npm run test)
• I have built the project successfully (npm run build)
• I have run the linter (npm run lint)
• I have added/updated tests as needed
• My changes do not introduce new warnings or errors

Additional Context

[Copilot]

Pull request overview

This PR updates the React side-nav-auth template styling to remove hardcoded colors and reduce excessive component state styling, aligning the generated auth UI more closely with Ignite UI theme tokens (issue #1748).

Changes:

• Replaced hardcoded error colors in OAuth redirect pages with the theme token var(--ig-error-500).
• Updated auth-related CSS modules to prefer Ignite UI palette variables (e.g., --ig-surface-500, --ig-primary-500, --ig-gray-*) and removed several hardcoded hover/disabled overrides.
• Adjusted focus-visible outline styling to use a theme token.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx	Switches inline error color from a hex value to var(--ig-error-500).
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx	Switches inline error color from a hex value to var(--ig-error-500).
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx	Switches inline error color from a hex value to var(--ig-error-500).
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css	Replaces several hardcoded colors with theme tokens in the profile card layout.
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css	Removes hardcoded input/button styling and updates remaining colors to theme tokens.
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css	Removes hardcoded title color to allow theme to control it.
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css	Removes hardcoded button/avatar colors and uses a theme token for focus outline.
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css	Removes hardcoded input/button styling, updates error/border colors to theme tokens.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coveralls]

coverage: 87.816%. remained the same — mstoyanova/remove-hardcoded-styles-react into master

[Copilot]

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated no new comments.

Suppressed comments (2)

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx:49

• This interactive element is rendered as an without an href and only wires onClick; with role="button" + tabIndex it should also support keyboard activation (Enter/Space). Otherwise keyboard users can tab to it but not reliably activate it.

        <a onClick={onRegister} role="button" tabIndex={0}>Create new account</a>

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx:63

• This interactive element is rendered as an without an href and only wires onClick; with role="button" + tabIndex it should also support keyboard activation (Enter/Space). Otherwise keyboard users can tab to it but not reliably activate it.

        <a onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>

[ivanvpetrov]

After comparing the React templates in the PR against master, I found several visual regressions. I fixed them so the generated templates now match the previous appearance while still using theme tokens instead of hardcoded values. The main root cause was a missing Material theme import.

Example:
PR before fix:

Before and PR after fix:

[Copilot]

Pull request overview

Copilot reviewed 18 out of 18 changed files in this pull request and generated no new comments.

Suppressed comments (8)

packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx:7

• react-app-polyfill/ie11 should be imported before any other module so the polyfills run before React/router/app code executes. Also, importing the Ignite UI theme CSS here means some templates will now import it twice (e.g. side-nav*/src/app/app.tsx already imports it); consider standardizing on a single import location.

import App from './app/app';
import { routes } from "./app/app-routes";
import 'react-app-polyfill/ie11';
import 'igniteui-webcomponents/themes/light/material.css';

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx:49

• This element is an anchor without an href, so it is not keyboard-activatable by default (and there is no key handler). Use an actual button component for accessibility (e.g. IgrButton variant="flat") instead of role="button" on an <a>.

        <a onClick={onRegister} role="button" tabIndex={0}>Create new account</a>

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx:63

• This element is an anchor without an href, so it is not keyboard-activatable by default (and there is no key handler). Use an actual button component for accessibility (e.g. IgrButton variant="flat") instead of role="button" on an <a>.

        <a onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css:4

• Issue #1748 requests removing extra button styling for the auth flow. This rule still forces custom colors/hover styling (even though they are theme variables), which keeps the template opinionated. Consider dropping the color/background/border overrides and the hover rule and relying on the built-in outlined button theme.

  color: var(--ig-primary-500);
  background: var(--ig-surface-500);
  border-color: var(--ig-primary-500);

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css:71

• These icon color rules won’t take effect because IgrIcon is given an inline style={{ color: ... }} with hardcoded hex colors in src/app/app.tsx (e.g. #0075D2). Inline styles override stylesheet rules, so this template will still render hardcoded colors unless the inline color is removed (or switched to CSS variables/classes).

igc-nav-drawer-item[active] igc-icon {
  color: var(--ig-primary-500);
}

igc-nav-drawer-item:not([active]) igc-icon {
  color: var(--ig-gray-900);

packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css:74

• This active icon color rule won’t take effect because IgrIcon is given an inline style={{ color: ... }} with hardcoded hex colors in src/app/app.tsx (e.g. #0075D2 / #2d2d2d). Inline styles override stylesheet rules, so this template will still render hardcoded colors unless the inline color is removed (or switched to CSS variables/classes).

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-primary-100);
  color: var(--ig-primary-500);
}

igc-nav-drawer-item[active] igc-icon {
  color: var(--ig-primary-500);
}

packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css:69

• This active icon color rule won’t take effect because IgrIcon is given an inline style with a hardcoded hex color in src/app/app.tsx (e.g. #0075D2). Inline styles override stylesheet rules, so this template will still render hardcoded colors unless the inline color is removed (or switched to CSS variables/classes).

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-primary-100);
  color: var(--ig-primary-700);
}

igc-nav-drawer-item[active] igc-icon {
  color: var(--ig-primary-700);
}

packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.css:71

• These icon color rules won’t take effect because IgrIcon is given an inline style={{ color: ... }} with hardcoded hex colors in src/app/app.tsx (e.g. #0075D2). Inline styles override stylesheet rules, so this template will still render hardcoded colors unless the inline color is removed (or switched to CSS variables/classes).

igc-nav-drawer-item[active] igc-icon {
  color: var(--ig-primary-500);
}

igc-nav-drawer-item:not([active]) igc-icon {
  color: var(--ig-gray-900);

[damyanpetev]

Okay, not sure why those ended up staying (most the other similar stylings are correctly gone); Surely the items already use similar (e.g. primary-500) values already?

Also, there should be CSS variables for exactly these modifications and (assuming derived states are in, might need to check on that) those will correctly handle combinatory states (such as color when hovered, selected, active, disabled) and might even do the default icon styling, since that's likely driven by that as well.

The reason I raised those in the PR was for such cases too - there should be a CSS var like --ig-navdrawer-item-background or an -active such that should be used as the primary customization API for components, if/when needed. Touching the part elements directly is an escape hatch that requires both other options to be exhausted and great care taken when applying styles. That's IMO, but you could verify and adjust guidance if needed (docs, mcp-s, although theming mcp will rarely give you this as a result I think).

[damyanpetev]

Edit: Okay, https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer#styling does use the parts. I've no idea why you'd do it like that. Is it outdated from before we had CSS vars?

Cuz note there's already --ig-nav-drawer-item-active-background and -color that are exposed for customization, (although the default value is already --ig-primary-500 in bootstrap). There's also icon color and actually a few colors (like hover, which this setup doesn't style)

Don't think I see computed/derived states unf.

Anyway, this can and should be compressed to

igc-nav-drawer {
  --background-color:
  --item-text-color:
  --item-active-background:
  --item-active-icon-color:
  ....
}