From 547b264af35c845ddc45c4a60df57e955292fb6d Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 5 Nov 2026 10:23:37 +0200 Subject: [PATCH 1/2] feat(themes): use schema tokens for combo, input, textarea, rating and tile --- .../color-picker/themes/dark/_themes.scss | 11 ++++------- .../color-picker/themes/light/_themes.scss | 13 +++++-------- src/components/combo/themes/combo.base.scss | 8 -------- src/components/combo/themes/dark/_themes.scss | 11 ++++------- src/components/combo/themes/light/_themes.scss | 14 +++++--------- .../combo/themes/shared/combo.bootstrap.scss | 4 ---- .../combo/themes/shared/combo.common.scss | 8 ++++++++ .../combo/themes/shared/combo.indigo.scss | 12 ------------ .../combo/themes/shared/combo.material.scss | 8 -------- src/components/input/themes/dark/_themes.scss | 2 +- src/components/input/themes/light/_themes.scss | 2 +- .../input/themes/shared/input.bootstrap.scss | 4 ++++ .../input/themes/shared/input.fluent.scss | 4 ++++ .../input/themes/shared/input.indigo.scss | 4 ++++ .../input/themes/shared/input.material.scss | 4 ++++ src/components/rating/themes/dark/_themes.scss | 11 ++++------- src/components/rating/themes/light/_themes.scss | 13 +++++-------- .../rating/themes/shared/rating.common.scss | 2 +- src/components/textarea/themes/light/_themes.scss | 2 +- .../textarea/themes/shared/textarea.common.scss | 5 +++++ .../tile-manager/themes/dark/_themes.scss | 13 +++++-------- .../tile-manager/themes/light/_themes.scss | 13 +++++-------- .../themes/shared/tile/tile.common.scss | 2 +- 23 files changed, 71 insertions(+), 99 deletions(-) diff --git a/src/components/color-picker/themes/dark/_themes.scss b/src/components/color-picker/themes/dark/_themes.scss index d19b5be288..74077541bf 100644 --- a/src/components/color-picker/themes/dark/_themes.scss +++ b/src/components/color-picker/themes/dark/_themes.scss @@ -1,10 +1,7 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/color-picker' as *; -// Schema keys the component styles never read. -$_unused: ('swatch-preview-border-radius',); -$material: map.remove(digest-schema($dark-material-color-picker), $_unused...); -$bootstrap: map.remove(digest-schema($dark-bootstrap-color-picker), $_unused...); -$fluent: map.remove(digest-schema($dark-fluent-color-picker), $_unused...); -$indigo: map.remove(digest-schema($dark-indigo-color-picker), $_unused...); +$material: digest-schema($dark-material-color-picker); +$bootstrap: digest-schema($dark-bootstrap-color-picker); +$fluent: digest-schema($dark-fluent-color-picker); +$indigo: digest-schema($dark-indigo-color-picker); diff --git a/src/components/color-picker/themes/light/_themes.scss b/src/components/color-picker/themes/light/_themes.scss index 615cc87bab..ca3817bfaf 100644 --- a/src/components/color-picker/themes/light/_themes.scss +++ b/src/components/color-picker/themes/light/_themes.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/color-picker' as *; -// Schema keys the component styles never read. -$_unused: ('swatch-preview-border-radius',); -$base: map.remove(digest-schema($light-color-picker), $_unused...); -$material: map.remove(digest-schema($material-color-picker), $_unused...); -$bootstrap: map.remove(digest-schema($bootstrap-color-picker), $_unused...); -$fluent: map.remove(digest-schema($fluent-color-picker), $_unused...); -$indigo: map.remove(digest-schema($indigo-color-picker), $_unused...); +$base: digest-schema($light-color-picker); +$material: digest-schema($material-color-picker); +$bootstrap: digest-schema($bootstrap-color-picker); +$fluent: digest-schema($fluent-color-picker); +$indigo: digest-schema($indigo-color-picker); diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index c306425578..921567ef4f 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -56,14 +56,6 @@ --ig-size: var(--ig-size-small, 1); --ig-theme: material; } - - [part~='case-icon'] { - color: color(gray, 600); - } - - [part='case-icon active'] { - color: color(primary, 500); - } } [part='filter-input'] { diff --git a/src/components/combo/themes/dark/_themes.scss b/src/components/combo/themes/dark/_themes.scss index 7d87fabbac..e2bc51419d 100644 --- a/src/components/combo/themes/dark/_themes.scss +++ b/src/components/combo/themes/dark/_themes.scss @@ -1,10 +1,7 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *; -// Schema keys the component styles never read. -$_unused: ('case-icon-color', 'case-icon-color--active'); -$material: map.remove(digest-schema($dark-material-combo), $_unused...); -$bootstrap: map.remove(digest-schema($dark-bootstrap-combo), $_unused...); -$fluent: map.remove(digest-schema($dark-fluent-combo), $_unused...); -$indigo: map.remove(digest-schema($dark-indigo-combo), $_unused...); +$material: digest-schema($dark-material-combo); +$bootstrap: digest-schema($dark-bootstrap-combo); +$fluent: digest-schema($dark-fluent-combo); +$indigo: digest-schema($dark-indigo-combo); diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss index a7690d98fe..76a3a43cb1 100644 --- a/src/components/combo/themes/light/_themes.scss +++ b/src/components/combo/themes/light/_themes.scss @@ -1,13 +1,9 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *; @use 'components/input/themes/light/themes' as input-theme; -// Schema keys the component styles never read. -$_unused: ('case-icon-color', 'case-icon-color--active'); -$base: map.remove(digest-schema($light-combo), $_unused...); -$material: map.remove(digest-schema($material-combo), $_unused...); -$bootstrap: map.remove(digest-schema($bootstrap-combo), $_unused...); -$fluent: map.remove(digest-schema($fluent-combo), $_unused...); -$indigo: map.remove(digest-schema($indigo-combo), $_unused...); - +$base: digest-schema($light-combo); +$material: digest-schema($material-combo); +$bootstrap: digest-schema($bootstrap-combo); +$fluent: digest-schema($fluent-combo); +$indigo: digest-schema($indigo-combo); diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index 5f94ff907e..c4aaf36244 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -92,10 +92,6 @@ $dropdown-theme: dropdown-theme.$bootstrap; border-inline-end: rem(1px) solid var-get($input-theme, 'border-color'); } -[part='case-icon active'] { - color: color(primary, 500); -} - :host(:disabled), :host([disabled]) { [part~='clear-icon'] { diff --git a/src/components/combo/themes/shared/combo.common.scss b/src/components/combo/themes/shared/combo.common.scss index 4bfacdc8ac..553adc477d 100644 --- a/src/components/combo/themes/shared/combo.common.scss +++ b/src/components/combo/themes/shared/combo.common.scss @@ -48,6 +48,14 @@ $dropdown-theme: dropdown-theme.$material; } } +[part~='case-icon'] { + color: var-get($theme, 'case-icon-color'); +} + +[part='case-icon active'] { + color: var-get($theme, 'case-icon-color-active'); +} + igc-input[slot='anchor']:focus-within { [part~='toggle-icon'] { background: var-get($theme, 'toggle-button-background-focus'); diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index eefaac0dfb..c68da99b0f 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -27,14 +27,6 @@ $dropdown-theme: dropdown-theme.$indigo; } } -[part='case-icon'] { - color: color(gray, 600); -} - -[part='case-icon active'] { - color: color(gray, 900); -} - :host(:not([single-select])) { > igc-input::part(input) { &::selection { @@ -59,10 +51,6 @@ $dropdown-theme: dropdown-theme.$indigo; background: color(primary, 100); } } - - [part='case-icon active'] { - color: color(primary, 500); - } } [part='list'] { diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index 6f0356027f..533e3a7fd4 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -65,14 +65,6 @@ $dropdown-theme: dropdown-theme.$material; background: color(primary, 100); } } - - [part='case-icon'] { - color: color(gray, 600); - } - - [part='case-icon active'] { - color: color(primary, 500); - } } :host(:not([outlined]):focus-within) { diff --git a/src/components/input/themes/dark/_themes.scss b/src/components/input/themes/dark/_themes.scss index f7977f683f..f21cf0ec26 100644 --- a/src/components/input/themes/dark/_themes.scss +++ b/src/components/input/themes/dark/_themes.scss @@ -3,7 +3,7 @@ @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *; // Schema keys the component styles never read. -$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); +$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); $material: map.remove(digest-schema($dark-material-input-group), $_unused...); $bootstrap: map.remove(digest-schema($dark-bootstrap-input-group), $_unused...); $fluent: map.remove(digest-schema($dark-fluent-input-group), $_unused...); diff --git a/src/components/input/themes/light/_themes.scss b/src/components/input/themes/light/_themes.scss index 0d57b7974b..acaf52b111 100644 --- a/src/components/input/themes/light/_themes.scss +++ b/src/components/input/themes/light/_themes.scss @@ -3,7 +3,7 @@ @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *; // Schema keys the component styles never read. -$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); +$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); $base: map.remove(digest-schema($light-input-group), $_unused...); $material: map.remove(digest-schema($material-input-group), $_unused...); $bootstrap: map.remove(digest-schema($bootstrap-input-group), $_unused...); diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss index 73a21caeac..d10af0e9ac 100644 --- a/src/components/input/themes/shared/input.bootstrap.scss +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -83,6 +83,10 @@ $theme: $bootstrap; } } +[part='label']:has(+ [part~='filled']) { + color: var-get($theme, 'filled-secondary-color'); +} + [name='prefix']::slotted(*), [name='suffix']::slotted(*) { display: inline-flex; diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index 3d1bab857e..13decd3867 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -48,6 +48,10 @@ $theme: $fluent; color: var-get($theme, 'idle-secondary-color'); } + [part='label']:has(+ [part~='filled']) { + color: var-get($theme, 'filled-secondary-color'); + } + [part^='container'] { height: var-get($theme, 'size'); background: var-get($theme, 'border-background'); diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index 91fd30e8e8..129cad1ebb 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -65,6 +65,10 @@ $transition-duration: .25s; margin-block-end: rem(4px); } + [part='label']:has(+ [part~='filled']) { + color: var-get($theme, 'filled-secondary-color'); + } + [part^='container'] { border-radius: var-get($theme, 'box-border-radius'); border-end-start-radius: 0; diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 184c88d2ba..1300dbefc2 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -91,6 +91,10 @@ $fs: rem(16px) !default; will-change: font-size, color, transform, translate; } +[part~='filled'] [part='label'] { + color: var-get($theme, 'filled-secondary-color'); +} + [part^='container'] { grid-template-columns: auto auto 1fr auto; } diff --git a/src/components/rating/themes/dark/_themes.scss b/src/components/rating/themes/dark/_themes.scss index e84e74fafe..e9cb029531 100644 --- a/src/components/rating/themes/dark/_themes.scss +++ b/src/components/rating/themes/dark/_themes.scss @@ -1,10 +1,7 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/rating' as *; -// Schema keys the component styles never read. -$_unused: ('disabled-value-label',); -$material: map.remove(digest-schema($dark-material-rating), $_unused...); -$bootstrap: map.remove(digest-schema($dark-bootstrap-rating), $_unused...); -$fluent: map.remove(digest-schema($dark-fluent-rating), $_unused...); -$indigo: map.remove(digest-schema($dark-indigo-rating), $_unused...); +$material: digest-schema($dark-material-rating); +$bootstrap: digest-schema($dark-bootstrap-rating); +$fluent: digest-schema($dark-fluent-rating); +$indigo: digest-schema($dark-indigo-rating); diff --git a/src/components/rating/themes/light/_themes.scss b/src/components/rating/themes/light/_themes.scss index b4c9c61cb4..fd5d271a7b 100644 --- a/src/components/rating/themes/light/_themes.scss +++ b/src/components/rating/themes/light/_themes.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/rating' as *; -// Schema keys the component styles never read. -$_unused: ('disabled-value-label',); -$base: map.remove(digest-schema($light-rating), $_unused...); -$material: map.remove(digest-schema($material-rating), $_unused...); -$bootstrap: map.remove(digest-schema($bootstrap-rating), $_unused...); -$fluent: map.remove(digest-schema($fluent-rating), $_unused...); -$indigo: map.remove(digest-schema($indigo-rating), $_unused...); +$base: digest-schema($light-rating); +$material: digest-schema($material-rating); +$bootstrap: digest-schema($bootstrap-rating); +$fluent: digest-schema($fluent-rating); +$indigo: digest-schema($indigo-rating); diff --git a/src/components/rating/themes/shared/rating.common.scss b/src/components/rating/themes/shared/rating.common.scss index 735b7b22bf..1d318be89b 100644 --- a/src/components/rating/themes/shared/rating.common.scss +++ b/src/components/rating/themes/shared/rating.common.scss @@ -45,7 +45,7 @@ $theme: $material; } [part~='value-label'] { - color: var-get($theme, 'disabled-label-color'); + color: var-get($theme, 'disabled-value-label'); } [part~='symbols'] { diff --git a/src/components/textarea/themes/light/_themes.scss b/src/components/textarea/themes/light/_themes.scss index 0d57b7974b..acaf52b111 100644 --- a/src/components/textarea/themes/light/_themes.scss +++ b/src/components/textarea/themes/light/_themes.scss @@ -3,7 +3,7 @@ @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *; // Schema keys the component styles never read. -$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); +$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color'); $base: map.remove(digest-schema($light-input-group), $_unused...); $material: map.remove(digest-schema($material-input-group), $_unused...); $bootstrap: map.remove(digest-schema($bootstrap-input-group), $_unused...); diff --git a/src/components/textarea/themes/shared/textarea.common.scss b/src/components/textarea/themes/shared/textarea.common.scss index 77c5b9fd05..3cf9b476df 100644 --- a/src/components/textarea/themes/shared/textarea.common.scss +++ b/src/components/textarea/themes/shared/textarea.common.scss @@ -41,6 +41,11 @@ $theme: $base; color: var-get($theme, 'idle-secondary-color'); } +[part~='filled'] [part~='label'], +[part~='label']:has(+ [part~='filled']) { + color: var-get($theme, 'filled-secondary-color'); +} + textarea { background: transparent; color: var-get($theme, 'filled-text-color'); diff --git a/src/components/tile-manager/themes/dark/_themes.scss b/src/components/tile-manager/themes/dark/_themes.scss index b804bc21ed..def23e3a59 100644 --- a/src/components/tile-manager/themes/dark/_themes.scss +++ b/src/components/tile-manager/themes/dark/_themes.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/tile-manager' as *; -// Schema keys the component styles never read. -$_unused: ('overlay-background',); -$base: map.remove(digest-schema($dark-base-tile-manager), $_unused...); -$material: map.remove(digest-schema($dark-material-tile-manager), $_unused...); -$bootstrap: map.remove(digest-schema($dark-bootstrap-tile-manager), $_unused...); -$fluent: map.remove(digest-schema($dark-fluent-tile-manager), $_unused...); -$indigo: map.remove(digest-schema($dark-indigo-tile-manager), $_unused...); +$base: digest-schema($dark-base-tile-manager); +$material: digest-schema($dark-material-tile-manager); +$bootstrap: digest-schema($dark-bootstrap-tile-manager); +$fluent: digest-schema($dark-fluent-tile-manager); +$indigo: digest-schema($dark-indigo-tile-manager); diff --git a/src/components/tile-manager/themes/light/_themes.scss b/src/components/tile-manager/themes/light/_themes.scss index 902ef75f84..541ba8f516 100644 --- a/src/components/tile-manager/themes/light/_themes.scss +++ b/src/components/tile-manager/themes/light/_themes.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/tile-manager' as *; -// Schema keys the component styles never read. -$_unused: ('overlay-background',); -$base: map.remove(digest-schema($light-tile-manager), $_unused...); -$material: map.remove(digest-schema($material-tile-manager), $_unused...); -$bootstrap: map.remove(digest-schema($bootstrap-tile-manager), $_unused...); -$fluent: map.remove(digest-schema($fluent-tile-manager), $_unused...); -$indigo: map.remove(digest-schema($indigo-tile-manager), $_unused...); +$base: digest-schema($light-tile-manager); +$material: digest-schema($material-tile-manager); +$bootstrap: digest-schema($bootstrap-tile-manager); +$fluent: digest-schema($fluent-tile-manager); +$indigo: digest-schema($indigo-tile-manager); diff --git a/src/components/tile-manager/themes/shared/tile/tile.common.scss b/src/components/tile-manager/themes/shared/tile/tile.common.scss index 2202e1644f..875dca851e 100644 --- a/src/components/tile-manager/themes/shared/tile/tile.common.scss +++ b/src/components/tile-manager/themes/shared/tile/tile.common.scss @@ -38,7 +38,7 @@ $theme: $material; } :host([part~='dragging']) { - background: var-get($theme, 'placeholder-background'); + background: var-get($theme, 'overlay-background'); // An outline, not a border, so that the dragged tile keeps its size. outline: rem(1px) solid var-get($theme, 'ghost-border'); From 0bbc78f48bd2c53a7436ed49668243d59ed4f0ed Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 10 Nov 2026 12:06:00 +0200 Subject: [PATCH 2/2] bump: increase igniteui-theming version to 30.2.0 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index a65f0cc8d5..4bac154232 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,7 @@ "husky": "^9.1.7", "ig-typedoc-theme": "^7.0.1", "igniteui-i18n-resources": "^2.0.0-rc.3", - "igniteui-theming": "^30.1.0", + "igniteui-theming": "^30.2.0", "keep-a-changelog": "^3.2.0", "lint-staged": "^17.6.0", "lit-analyzer": "^2.0.3", @@ -8782,9 +8782,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 9aa8b688ae..2d400dd2d6 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "husky": "^9.1.7", "ig-typedoc-theme": "^7.0.1", "igniteui-i18n-resources": "^2.0.0-rc.3", - "igniteui-theming": "^30.1.0", + "igniteui-theming": "^30.2.0", "keep-a-changelog": "^3.2.0", "lint-staged": "^17.6.0", "lit-analyzer": "^2.0.3",