From 607e9d40c1a398a2f735e236766c825672c844bc Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 5 Nov 2026 10:26:02 +0200 Subject: [PATCH 1/2] feat(themes): use schema tokens for chip, combo, rating and input group --- .../igniteui-angular/chips/src/chips/themes/_base.scss | 2 +- .../igniteui-angular/combo/src/combo/themes/_base.scss | 6 +++--- .../src/core/styles/components/rating/_rating-theme.scss | 7 +++++-- .../input-group/src/input-group/themes/_base.scss | 4 ++++ 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/chips/src/chips/themes/_base.scss b/projects/igniteui-angular/chips/src/chips/themes/_base.scss index 5d394290698..f2f953cbb35 100644 --- a/projects/igniteui-angular/chips/src/chips/themes/_base.scss +++ b/projects/igniteui-angular/chips/src/chips/themes/_base.scss @@ -495,7 +495,7 @@ $_theme: digest-schema($material-chip); position: absolute; box-shadow: var-get($_theme, 'ghost-elevation'); overflow: hidden; - color: var-get($_theme, 'focus-text-color'); + color: var-get($_theme, 'ghost-text-color'); // The ghost is cloned into , where an unlayered host/reset rule // (e.g. `body > * { height: 100% }`) outranks these layered styles and // stretches it. `!important` keeps the ghost at its intended row height diff --git a/projects/igniteui-angular/combo/src/combo/themes/_base.scss b/projects/igniteui-angular/combo/src/combo/themes/_base.scss index e20bc65e1ae..1bed763abce 100644 --- a/projects/igniteui-angular/combo/src/combo/themes/_base.scss +++ b/projects/igniteui-angular/combo/src/combo/themes/_base.scss @@ -43,18 +43,18 @@ $theme: digest-schema($light-combo); @include e(case-icon) { cursor: pointer; - color: color($color: 'gray', $variant: 600); + color: var-get($theme, 'case-icon-color'); background: transparent; .igx-icon--inactive { - --ig-icon-disabled-color: #{color($color: 'gray', $variant: 600)}; + --ig-icon-disabled-color: #{var-get($theme, 'case-icon-color')}; opacity: 1; } } @include e(case-icon, $m: 'active') { - color: color($color: 'primary') + color: var-get($theme, 'case-icon-color-active'); } @include e(content) { diff --git a/projects/igniteui-angular/core/src/core/styles/components/rating/_rating-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/rating/_rating-theme.scss index ffc4fac67f4..dbd9fbbeef9 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/rating/_rating-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/rating/_rating-theme.scss @@ -17,11 +17,14 @@ color: var-get($theme, 'value-label'); } - igc-rating[disabled]::part(label), - igc-rating[disabled]::part(value-label) { + igc-rating[disabled]::part(label) { color: var-get($theme, 'disabled-label-color'); } + igc-rating[disabled]::part(value-label) { + color: var-get($theme, 'disabled-value-label'); + } + igc-rating[disabled] { --symbol-empty-color: #{var-get( $theme, diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index 4c8804001dc..cbd18247eb4 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -466,6 +466,10 @@ $transition-timing: .25s $out-cubic; color: var(--clear-button-foreground); background: var(--clear-button-background); } + + @include e(label) { + color: var-get($theme, 'filled-secondary-color'); + } } @include m(focused) { From 8e926d3e89dcbf1b4afc89143e9568025a134b26 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 10 Nov 2026 11:49:02 +0200 Subject: [PATCH 2/2] bump: igniteui-themnig version to 30.2.0 --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index f8548c91525..98507bc8a57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,7 +80,7 @@ "igniteui-grid-lite": "~0.12.0-beta.0", "igniteui-i18n-resources": "^2.0.0-rc.3", "igniteui-sassdoc-theme": "^3.0.0", - "igniteui-theming": "^30.1.0", + "igniteui-theming": "^30.2.0", "igniteui-webcomponents": "^7.5.0-beta.0", "lit-html": "^3.2.1", "ng-packagr": "^22.0.0", @@ -14307,9 +14307,9 @@ } }, "node_modules/igniteui-theming": { - "version": "30.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-30.1.0.tgz", - "integrity": "sha512-3UEK2p4Aw5fu9v0MNlyqauapx99oBVoPmYp/A3IA71Y3FhKHnfEhnPshwxLR4qHi7XRSpAO84Nekmo4gSH1ZoA==", + "version": "30.2.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-30.2.0.tgz", + "integrity": "sha512-nYdHKYG1FjuzB3rpz6sLlc2sYTR4HOABB3wuWokQwZj8i/cfvoBbJrsH9JESXGwcyYuq++3ZaaFG4yWBWEZG7Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index b53321a2892..08a4e5afcce 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "igniteui-grid-lite": "~0.12.0-beta.0", "igniteui-i18n-resources": "^2.0.0-rc.3", "igniteui-sassdoc-theme": "^3.0.0", - "igniteui-theming": "^30.1.0", + "igniteui-theming": "^30.2.0", "igniteui-webcomponents": "^7.5.0-beta.0", "lit-html": "^3.2.1", "ng-packagr": "^22.0.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 852220e0cc6..de2d80d09f3 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -75,7 +75,7 @@ "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", - "igniteui-theming": "^30.1.0", + "igniteui-theming": "^30.2.0", "igniteui-i18n-core": "^2.0.0-rc.3", "@igniteui/material-icons-extended": "^3.1.0" },