Skip to content

refactor(styles): remove hardcoded styles #1760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kdinev merged 8 commits into from
Aug 5, 2026
Merged

refactor(styles): remove hardcoded styles #1760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d8bdf66
refactor(styles): remove hardcoded styles
Marina-L-Stoyanova Jul 30, 2026
8b0f20c
Potential fix for pull request finding
Marina-L-Stoyanova Jul 31, 2026
4cd5ff0
refactor(styles): remove hardcoded styles from Login and Register com…
Marina-L-Stoyanova Jul 31, 2026
25c17f3
Merge branch 'mstoyanova/remove-hardcoded-styles-react' of https://gi…
Marina-L-Stoyanova Jul 31, 2026
e80eaea
refactor(styles): replace hardcoded styles with CSS variables in mult…
Marina-L-Stoyanova Jul 31, 2026
25a33cc
Merge branch 'master' into mstoyanova/remove-hardcoded-styles-react
ivanvpetrov Aug 4, 2026
48a7046
fix(templates): react templates was missing theme import and some css
ivanvpetrov Aug 4, 2026
9bdd778
Merge branch 'master' into mstoyanova/remove-hardcoded-styles-react
ivanvpetrov Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './app/app';
import { routes } from "./app/app-routes";
import 'react-app-polyfill/ie11';
import 'igniteui-webcomponents/themes/light/material.css';

const basename = import.meta.env.VITE_BASENAME || '/';

Expand Down
6 changes: 3 additions & 3 deletions ...s/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
padding: 24px;
box-sizing: border-box;
text-align: center;
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
color: #000;
font-family: var(--ig-font-family);
color: var(--ig-gray-900);
}

:local(.header) {
color: #09f;
color: var(--ig-primary-500);
font-size: 80px;
font-weight: 300;
line-height: 1.2;
Expand Down
16 changes: 8 additions & 8 deletions packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
flex: 0 0 auto;
height: 56px;
padding: 0 16px;
background: #239ef0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
background: var(--ig-primary-500);
box-shadow: var(--ig-elevation-4);
box-sizing: border-box;
position: relative;
z-index: 10;
Expand All @@ -27,7 +27,7 @@
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
color: #000;
color: var(--ig-primary-500-contrast);
}

.app__menu-button {
Expand All @@ -37,7 +37,7 @@
width: 40px;
height: 40px;
padding: 0;
color: #000;
color: var(--ig-primary-500-contrast);
border: 0;
background: transparent;
cursor: pointer;
Expand All @@ -61,16 +61,16 @@

igc-nav-drawer-item::part(base) {
min-height: 48px;
color: #2d2d2d;
color: var(--ig-gray-900);
}

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

igc-nav-drawer-item[active] igc-icon {
color: #0075d2;
color: var(--ig-primary-500);
}
Comment on lines 62 to 74

@damyanpetev damyanpetev Aug 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 damyanpetev Aug 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
image

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:
  ....
}


.app__content {
Expand Down
70 changes: 1 addition & 69 deletions ...ct/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,10 @@
padding: 8px 0 0;
}

.form igc-input {
width: 100%;
--ig-input-group-focused-secondary-color: #239ef0;
--ig-input-group-focused-border-color: #239ef0;
--ig-input-group-filled-text-color: #2d2d2d;
}

.form igc-input igc-icon {
color: #0075d2;
--ig-icon-size: 1.50rem;
}

.error {
margin: 0;
font-size: .875rem;
color: #d32f2f;
color: var(--ig-error-500);
}

.actions {
Expand All @@ -30,64 +18,8 @@
padding-top: 4px;
}

.submitBtn {
display: block;
}

.submitBtn::part(base) {
width: 100%;
min-height: 40px;
font-weight: 600;
text-transform: uppercase;
}

.submitBtn:not([disabled])::part(base) {
background: #239ef0;
color: #fff;
}

.submitBtn:not([disabled])::part(base):hover {
background: #1a8fd8;
}

.submitBtn[disabled]::part(base) {
background: #e0e0e0;
color: #767676;
}

.linkBtn {
align-self: center;
color: #0075d2;
font-size: .875rem;
cursor: pointer;
text-decoration: underline;
text-transform: none;
}

.linkBtn:hover,
.linkBtn:focus-visible {
color: #005da8;
}

.socialLogin {
display: grid;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #d7d7d7;
}

.socialBtn {
display: block;
}

.socialBtn::part(base) {
width: 100%;
min-height: 40px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
}

.google::part(base) { background: rgb(255, 19, 74); }
.facebook::part(base) { background: rgb(19, 119, 213); }
.microsoft::part(base){ background: rgb(27, 158, 245); }
10 changes: 5 additions & 5 deletions ...tes/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,23 +43,23 @@ export function Login({ onRegister, onSuccess }: LoginProps) {
</IgrInput>
{error && <p className={styles.error}>{error}</p>}
<div className={styles.actions}>
<IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
<IgrButton variant="contained" type="submit" disabled={!canSubmit}>
<span>Log In</span>
</IgrButton>
<a className={styles.linkBtn} onClick={onRegister} role="button" tabIndex={0}>Create new account</a>
<a onClick={onRegister} role="button" tabIndex={0}>Create new account</a>
</div>
{ExternalAuth.hasProvider() && (
<div className={styles.socialLogin}>
{ExternalAuth.hasProvider('google') && (
<IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.google}`}
<IgrButton variant="contained" type="button"
onClick={() => ExternalAuth.login('google')}><span>Sign in with Google</span></IgrButton>
)}
{ExternalAuth.hasProvider('facebook') && (
<IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.facebook}`}
<IgrButton variant="contained" type="button"
onClick={() => ExternalAuth.login('facebook')}><span>Sign in with Facebook</span></IgrButton>
)}
{ExternalAuth.hasProvider('microsoft') && (
<IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.microsoft}`}
<IgrButton variant="contained" type="button"
onClick={() => ExternalAuth.login('microsoft')}><span>Sign in with Microsoft</span></IgrButton>
)}
</div>
Expand Down
31 changes: 5 additions & 26 deletions ...igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,21 @@
.loginBtn::part(base) {
color: #0075d2;
background: #fff;
border-color: rgba(0, 117, 210, 0.35);
color: var(--ig-primary-500);
background: var(--ig-surface-500);
border-color: var(--ig-primary-500);
font-weight: 600;
white-space: nowrap;
transition: background .15s;
}

.loginBtn::part(base):hover {
background: #e8f3fc;
background: var(--ig-primary-100);
}

.profileAvatar {
cursor: pointer;
color: #0075d2;
--ig-avatar-background: #fff;
--ig-avatar-color: #0075d2;
}

:global(igc-dropdown-item:hover),
:global(igc-dropdown-item[active]:hover) {
background: #e8f3fc;
color: #0075d2;
}

:global(igc-dropdown-item[active]) {
background: #e8f3fc;
color: #0075d2;
}

:global(igc-dropdown-item[selected]),
:global(igc-dropdown-item[selected]:hover),
:global(igc-dropdown-item[selected][active]) {
background: #e8f3fc;
color: #0075d2;
}

.profileAvatar:focus-visible {
outline: 2px solid #fff;
outline: 2px solid var(--ig-surface-500);
outline-offset: 2px;
}
1 change: 0 additions & 1 deletion ...-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
.dialog::part(title) {
font-size: 1.125rem;
font-weight: 600;
color: #2d2d2d;
}

.body {
Expand Down
57 changes: 1 addition & 56 deletions ...igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,10 @@
padding: 8px 0 0;
}

.form igc-input {
width: 100%;
--ig-input-group-focused-secondary-color: #239ef0;
--ig-input-group-focused-border-color: #239ef0;
--ig-input-group-filled-text-color: #2d2d2d;
}

.form igc-input igc-icon {
color: #0075d2;
--ig-icon-size: 1.50rem;
}

.error {
margin: 0;
font-size: .875rem;
color: #d32f2f;
color: var(--ig-error-500);
}

.actions {
Expand All @@ -29,46 +17,3 @@
gap: 8px;
padding-top: 4px;
}

.submitBtn {
display: block;
}

.submitBtn::part(base) {
width: 100%;
min-height: 40px;
font-weight: 600;
text-transform: uppercase;
}

.submitBtn:not([disabled])::part(base) {
background: #239ef0;
color: #fff;
}

.submitBtn:not([disabled])::part(base):hover {
background: #1a8fd8;
}

.submitBtn[disabled]::part(base) {
background: #e0e0e0;
color: #767676;
}

.linkBtn {
align-self: center;
color: #0075d2;
font-size: .875rem;
cursor: pointer;
text-decoration: underline;
text-transform: none;
}

.linkBtn:hover,
.linkBtn:focus-visible {
color: #005da8;
}

.linkBtn::part(base):hover {
color: #005da8;
}
4 changes: 2 additions & 2 deletions .../react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ export function Register({ onLogin, onSuccess }: RegisterProps) {
</IgrInput>
{error && <p className={styles.error}>{error}</p>}
<div className={styles.actions}>
<IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
<IgrButton variant="contained" type="submit" disabled={!canSubmit}>
<span>Sign Up</span>
</IgrButton>
<a className={styles.linkBtn} onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
<a onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
</div>
</form>
);
Expand Down
Loading