From 03da47904a9aab26bb9d6a1f000f9b50cacc83bd Mon Sep 17 00:00:00 2001 From: sivanova Date: Fri, 19 Jan 2024 17:08:12 +0200 Subject: [PATCH 1/4] fix(input/combo/select): styling issues --- src/components/combo/themes/dark/combo.bootstrap.scss | 3 +++ src/components/combo/themes/dark/combo.fluent.scss | 3 +++ src/components/combo/themes/dark/combo.indigo.scss | 3 +++ src/components/combo/themes/dark/combo.material.scss | 3 +++ src/components/combo/themes/light/combo.bootstrap.scss | 3 +++ src/components/combo/themes/light/combo.fluent.scss | 3 +++ src/components/combo/themes/light/combo.indigo.scss | 3 +++ src/components/combo/themes/light/combo.material.scss | 3 +++ src/components/input/themes/shared/input.material.scss | 7 ++++--- src/components/select/themes/dark/select.bootstrap.scss | 3 +++ src/components/select/themes/dark/select.fluent.scss | 3 +++ src/components/select/themes/dark/select.indigo.scss | 3 +++ src/components/select/themes/dark/select.material.scss | 3 +++ src/components/select/themes/light/select.bootstrap.scss | 6 +++--- src/components/select/themes/light/select.fluent.scss | 3 +++ src/components/select/themes/light/select.indigo.scss | 3 +++ src/components/select/themes/light/select.material.scss | 3 +++ 17 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/components/combo/themes/dark/combo.bootstrap.scss b/src/components/combo/themes/dark/combo.bootstrap.scss index 93f06e4fd..934cf891e 100644 --- a/src/components/combo/themes/dark/combo.bootstrap.scss +++ b/src/components/combo/themes/dark/combo.bootstrap.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; +@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $bootstrap; $dropdown: map.remove(dropdown.$bootstrap, 'default-size'); +$input-theme: input-theme.$bootstrap; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.fluent.scss b/src/components/combo/themes/dark/combo.fluent.scss index 06348b11e..79c707713 100644 --- a/src/components/combo/themes/dark/combo.fluent.scss +++ b/src/components/combo/themes/dark/combo.fluent.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; +@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $fluent; $dropdown: map.remove(dropdown.$fluent, 'default-size'); +$input-theme: input-theme.$fluent; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.indigo.scss b/src/components/combo/themes/dark/combo.indigo.scss index bf58869c4..9454901d7 100644 --- a/src/components/combo/themes/dark/combo.indigo.scss +++ b/src/components/combo/themes/dark/combo.indigo.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; +@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $indigo; $dropdown: map.remove(dropdown.$indigo, 'default-size'); +$input-theme: input-theme.$indigo; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.material.scss b/src/components/combo/themes/dark/combo.material.scss index db5e27bc5..43054cc18 100644 --- a/src/components/combo/themes/dark/combo.material.scss +++ b/src/components/combo/themes/dark/combo.material.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; +@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $material; $dropdown: map.remove(dropdown.$material, 'default-size'); +$input-theme: input-theme.$material; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.bootstrap.scss b/src/components/combo/themes/light/combo.bootstrap.scss index 04843492e..c7200e0cd 100644 --- a/src/components/combo/themes/light/combo.bootstrap.scss +++ b/src/components/combo/themes/light/combo.bootstrap.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; +@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $bootstrap; $dropdown: map.remove(dropdown.$bootstrap, 'default-size'); +$input-theme: input-theme.$bootstrap; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.fluent.scss b/src/components/combo/themes/light/combo.fluent.scss index e6144690b..862402726 100644 --- a/src/components/combo/themes/light/combo.fluent.scss +++ b/src/components/combo/themes/light/combo.fluent.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; +@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $fluent; $dropdown: map.remove(dropdown.$fluent, 'default-size'); +$input-theme: input-theme.$fluent; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss index 9625e0929..07d30a590 100644 --- a/src/components/combo/themes/light/combo.indigo.scss +++ b/src/components/combo/themes/light/combo.indigo.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; +@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $indigo; $dropdown: map.remove(dropdown.$indigo, 'default-size'); +$input-theme: input-theme.$indigo; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss index 6c455a709..47336c633 100644 --- a/src/components/combo/themes/light/combo.material.scss +++ b/src/components/combo/themes/light/combo.material.scss @@ -1,12 +1,15 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; +@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $material; $dropdown: map.remove(dropdown.$material, 'default-size'); +$input-theme: input-theme.$material; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); + @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 95133dcfb..86abb6fd6 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -1,5 +1,6 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; +@use 'igniteui-theming/sass/animations/easings' as *; $theme: $material; $idle-border-width: rem(1px) !default; @@ -74,7 +75,7 @@ input:placeholder-shown + [part='notch'] [part='label'], transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), font-size 150ms cubic-bezier(.4, 0, .2, 1); - line-height: 1; + line-height: normal; text-overflow: ellipsis; overflow: hidden; will-change: font-size, color, transform; @@ -231,7 +232,7 @@ input:placeholder-shown + [part='notch'] [part='label'], input:placeholder-shown + [part='notch'] [part='label'], [part~='filled'] + [part='notch'] [part='label'] { - transform: translateY(-106%); + transform: translateY(-73%); } } @@ -259,7 +260,7 @@ input:placeholder-shown + [part='notch'] [part='label'], } [part='notch'] [part='label'] { - transform: translateY(-106%); + transform: translateY(-73%); } } diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss index a3447c7a6..2a21cac95 100644 --- a/src/components/select/themes/dark/select.bootstrap.scss +++ b/src/components/select/themes/dark/select.bootstrap.scss @@ -1,14 +1,17 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$bootstrap; +$input-theme: input-theme.$bootstrap; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss index df97e9ec3..3f5447d5d 100644 --- a/src/components/select/themes/dark/select.fluent.scss +++ b/src/components/select/themes/dark/select.fluent.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$fluent; +$input-theme: input-theme.$fluent; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss index 5fa13aa46..cd35ea165 100644 --- a/src/components/select/themes/dark/select.indigo.scss +++ b/src/components/select/themes/dark/select.indigo.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$indigo; +$input-theme: input-theme.$indigo; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss index 111c83ebe..92ed5dae2 100644 --- a/src/components/select/themes/dark/select.material.scss +++ b/src/components/select/themes/dark/select.material.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$material; +$input-theme: input-theme.$material; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss index 450e78983..a7c0e4c64 100644 --- a/src/components/select/themes/light/select.bootstrap.scss +++ b/src/components/select/themes/light/select.bootstrap.scss @@ -1,18 +1,18 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$bootstrap; +$input-theme: input-theme.$bootstrap; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')}; --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } - - - diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss index a0f052222..29b6e02e9 100644 --- a/src/components/select/themes/light/select.fluent.scss +++ b/src/components/select/themes/light/select.fluent.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$fluent; +$input-theme: input-theme.$fluent; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss index 0af85f64e..1b2ab4e15 100644 --- a/src/components/select/themes/light/select.indigo.scss +++ b/src/components/select/themes/light/select.indigo.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$indigo; +$input-theme: input-theme.$indigo; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss index 034a47bf4..60f6bd185 100644 --- a/src/components/select/themes/light/select.material.scss +++ b/src/components/select/themes/light/select.material.scss @@ -1,13 +1,16 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$material; +$input-theme: input-theme.$material; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; From ae4ba22ef4ff72e55a52b092cb59a119f31cda65 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 1 Feb 2024 11:34:26 +0200 Subject: [PATCH 2/4] fix(combo/select): helper text styles --- .../combo/themes/dark/combo.bootstrap.scss | 3 --- src/components/combo/themes/dark/combo.fluent.scss | 3 --- src/components/combo/themes/dark/combo.indigo.scss | 3 --- .../combo/themes/dark/combo.material.scss | 3 --- src/components/combo/themes/light/_themes.scss | 14 ++++++++++++++ .../combo/themes/light/combo.bootstrap.scss | 3 --- .../combo/themes/light/combo.fluent.scss | 3 --- .../combo/themes/light/combo.indigo.scss | 3 --- .../combo/themes/light/combo.material.scss | 3 --- .../combo/themes/shared/combo.bootstrap.scss | 7 ++++--- .../combo/themes/shared/combo.fluent.scss | 10 ++++------ .../combo/themes/shared/combo.indigo.scss | 8 ++++---- .../combo/themes/shared/combo.material.scss | 8 ++++---- .../select/themes/dark/select.bootstrap.scss | 3 --- .../select/themes/dark/select.fluent.scss | 3 --- .../select/themes/dark/select.indigo.scss | 3 --- .../select/themes/dark/select.material.scss | 3 --- src/components/select/themes/light/_themes.scss | 13 +++++++++++++ .../select/themes/light/select.bootstrap.scss | 3 --- .../select/themes/light/select.fluent.scss | 3 --- .../select/themes/light/select.indigo.scss | 3 --- .../select/themes/light/select.material.scss | 3 --- .../select/themes/shared/select.bootstrap.scss | 6 +++--- .../select/themes/shared/select.fluent.scss | 10 ++++++++-- .../select/themes/shared/select.indigo.scss | 10 +++++----- .../select/themes/shared/select.material.scss | 6 +++--- 26 files changed, 62 insertions(+), 78 deletions(-) diff --git a/src/components/combo/themes/dark/combo.bootstrap.scss b/src/components/combo/themes/dark/combo.bootstrap.scss index 934cf891e..93f06e4fd 100644 --- a/src/components/combo/themes/dark/combo.bootstrap.scss +++ b/src/components/combo/themes/dark/combo.bootstrap.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; -@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $bootstrap; $dropdown: map.remove(dropdown.$bootstrap, 'default-size'); -$input-theme: input-theme.$bootstrap; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.fluent.scss b/src/components/combo/themes/dark/combo.fluent.scss index 79c707713..06348b11e 100644 --- a/src/components/combo/themes/dark/combo.fluent.scss +++ b/src/components/combo/themes/dark/combo.fluent.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; -@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $fluent; $dropdown: map.remove(dropdown.$fluent, 'default-size'); -$input-theme: input-theme.$fluent; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.indigo.scss b/src/components/combo/themes/dark/combo.indigo.scss index 9454901d7..bf58869c4 100644 --- a/src/components/combo/themes/dark/combo.indigo.scss +++ b/src/components/combo/themes/dark/combo.indigo.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; -@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $indigo; $dropdown: map.remove(dropdown.$indigo, 'default-size'); -$input-theme: input-theme.$indigo; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/dark/combo.material.scss b/src/components/combo/themes/dark/combo.material.scss index 43054cc18..db5e27bc5 100644 --- a/src/components/combo/themes/dark/combo.material.scss +++ b/src/components/combo/themes/dark/combo.material.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/dark/themes' as dropdown; -@use '../../../input/themes/dark/themes' as input-theme; @use 'themes' as *; $theme: $material; $dropdown: map.remove(dropdown.$material, 'default-size'); -$input-theme: input-theme.$material; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss index ad2a306be..89a717422 100644 --- a/src/components/combo/themes/light/_themes.scss +++ b/src/components/combo/themes/light/_themes.scss @@ -1,6 +1,20 @@ +@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *; +@use '../../../input/themes/light/themes' as input-theme; +$material-helper-text: map.get(input-theme.$material, 'helper-text-color'); +$material-disabled-text: map.get(input-theme.$material, 'disabled-text-color'); +$material-error-text: map.get(input-theme.$material, 'error-secondary-color'); +$fluent-helper-text: map.get(input-theme.$fluent, 'helper-text-color'); +$fluent-disabled-text: map.get(input-theme.$fluent, 'disabled-text-color'); +$fluent-error-text: map.get(input-theme.$fluent, 'error-secondary-color'); +$bootstrap-helper-text: map.get(input-theme.$bootstrap, 'helper-text-color'); +$bootstrap-disabled-text: map.get(input-theme.$bootstrap, 'disabled-text-color'); +$bootstrap-error-text: map.get(input-theme.$bootstrap, 'error-secondary-color'); +$indigo-helper-text: map.get(input-theme.$indigo, 'helper-text-color'); +$indigo-disabled-text: map.get(input-theme.$indigo, 'disabled-text-color'); +$indigo-error-text: map.get(input-theme.$indigo, 'error-secondary-color'); $material: digest-schema($light-combo); $bootstrap: digest-schema($bootstrap-combo); $fluent: digest-schema($fluent-combo); diff --git a/src/components/combo/themes/light/combo.bootstrap.scss b/src/components/combo/themes/light/combo.bootstrap.scss index c7200e0cd..04843492e 100644 --- a/src/components/combo/themes/light/combo.bootstrap.scss +++ b/src/components/combo/themes/light/combo.bootstrap.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; -@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $bootstrap; $dropdown: map.remove(dropdown.$bootstrap, 'default-size'); -$input-theme: input-theme.$bootstrap; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.fluent.scss b/src/components/combo/themes/light/combo.fluent.scss index 862402726..e6144690b 100644 --- a/src/components/combo/themes/light/combo.fluent.scss +++ b/src/components/combo/themes/light/combo.fluent.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; -@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $fluent; $dropdown: map.remove(dropdown.$fluent, 'default-size'); -$input-theme: input-theme.$fluent; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss index 07d30a590..9625e0929 100644 --- a/src/components/combo/themes/light/combo.indigo.scss +++ b/src/components/combo/themes/light/combo.indigo.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; -@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $indigo; $dropdown: map.remove(dropdown.$indigo, 'default-size'); -$input-theme: input-theme.$indigo; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss index 47336c633..6c455a709 100644 --- a/src/components/combo/themes/light/combo.material.scss +++ b/src/components/combo/themes/light/combo.material.scss @@ -1,15 +1,12 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'components/dropdown/themes/light/themes' as dropdown; -@use '../../../input/themes/light/themes' as input-theme; @use 'themes' as *; $theme: $material; $dropdown: map.remove(dropdown.$material, 'default-size'); -$input-theme: input-theme.$material; :host { @include css-vars-from-theme($theme, 'ig-combo'); @include css-vars-from-theme($dropdown, 'ig-combo-list'); - @include css-vars-from-theme($input-theme, 'ig-input'); } diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index 463441682..c9a238ea1 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -14,6 +14,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; [part='helper-text'] { margin-top: rem(4px); + color: $bootstrap-helper-text; } [part='list-wrapper'] { @@ -93,7 +94,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $bootstrap-error-text; } } @@ -104,13 +105,13 @@ $dropdown-theme: dropdown-theme.$bootstrap; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $bootstrap-disabled-text; } [part~='clear-icon'] { border-inline-end: rem(1px) solid var-get($input-theme, 'disabled-border-color'); background: inherit; - color: var-get($input-theme, 'disabled-text-color'); + color: $bootstrap-disabled-text; igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss index e990adb1f..e74b887e1 100644 --- a/src/components/combo/themes/shared/combo.fluent.scss +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -1,10 +1,8 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../input/themes/light/themes' as input-theme; @use '../../../dropdown/themes/light/themes' as dropdown-theme; $theme: $fluent; -$input-theme: input-theme.$fluent; $dropdown-theme: dropdown-theme.$fluent; :host { @@ -17,7 +15,7 @@ $dropdown-theme: dropdown-theme.$fluent; display: block; padding: 0; margin-top: rem(5px); - color: color(gray, 700); + color: $fluent-helper-text; } } @@ -81,7 +79,7 @@ $dropdown-theme: dropdown-theme.$fluent; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $fluent-error-text; } } @@ -109,12 +107,12 @@ $dropdown-theme: dropdown-theme.$fluent; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: color(gray, 500); + color: $fluent-disabled-text; } [part~='clear-icon'] { background: inherit; - color: var-get($input-theme, 'disabled-text-color'); + color: $fluent-disabled-text; igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index a8a22a9e5..e96dc32fd 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -21,7 +21,7 @@ $dropdown-theme: dropdown-theme.$indigo; } ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); + color: $indigo-helper-text; } } @@ -101,7 +101,7 @@ $dropdown-theme: dropdown-theme.$indigo; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $indigo-error-text; } } @@ -110,7 +110,7 @@ $dropdown-theme: dropdown-theme.$indigo; ::slotted([slot='prefix']), ::slotted([slot='suffix']), ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $indigo-disabled-text; } igc-input::part(input)::selection { @@ -119,7 +119,7 @@ $dropdown-theme: dropdown-theme.$indigo; [part~='clear-icon'] { background: inherit; - color: var-get($input-theme, 'disabled-text-color'); + color: $indigo-disabled-text; igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index 97da633d8..b8856e690 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -19,7 +19,7 @@ $dropdown-theme: dropdown-theme.$material; ::slotted([slot='helper-text']) { @include type-style('caption'); - color: var-get($input-theme, 'helper-text-color'); + color: $material-helper-text; line-height: 1; } @@ -122,7 +122,7 @@ $dropdown-theme: dropdown-theme.$material; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $material-error-text; } } @@ -133,12 +133,12 @@ $dropdown-theme: dropdown-theme.$material; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $material-disabled-text; } [part~='clear-icon'] { background: inherit; - color: var-get($input-theme, 'disabled-text-color'); + color: $material-disabled-text; igc-icon { color: inherit; diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss index 2a21cac95..a3447c7a6 100644 --- a/src/components/select/themes/dark/select.bootstrap.scss +++ b/src/components/select/themes/dark/select.bootstrap.scss @@ -1,17 +1,14 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$bootstrap; -$input-theme: input-theme.$bootstrap; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss index 3f5447d5d..df97e9ec3 100644 --- a/src/components/select/themes/dark/select.fluent.scss +++ b/src/components/select/themes/dark/select.fluent.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$fluent; -$input-theme: input-theme.$fluent; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss index cd35ea165..5fa13aa46 100644 --- a/src/components/select/themes/dark/select.indigo.scss +++ b/src/components/select/themes/dark/select.indigo.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$indigo; -$input-theme: input-theme.$indigo; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss index 92ed5dae2..111c83ebe 100644 --- a/src/components/select/themes/dark/select.material.scss +++ b/src/components/select/themes/dark/select.material.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $dropdown-theme: dropdown-theme.$material; -$input-theme: input-theme.$material; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/_themes.scss b/src/components/select/themes/light/_themes.scss index 1213f801b..89aa1084d 100644 --- a/src/components/select/themes/light/_themes.scss +++ b/src/components/select/themes/light/_themes.scss @@ -1,7 +1,20 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/select' as *; +@use '../../../input/themes/light/themes' as input-theme; +$material-helper-text: map.get(input-theme.$material, 'helper-text-color'); +$material-disabled-text: map.get(input-theme.$material, 'disabled-text-color'); +$material-error-text: map.get(input-theme.$material, 'error-secondary-color'); +$fluent-helper-text: map.get(input-theme.$fluent, 'helper-text-color'); +$fluent-disabled-text: map.get(input-theme.$fluent, 'disabled-text-color'); +$fluent-error-text: map.get(input-theme.$fluent, 'error-secondary-color'); +$bootstrap-helper-text: map.get(input-theme.$bootstrap, 'helper-text-color'); +$bootstrap-disabled-text: map.get(input-theme.$bootstrap, 'disabled-text-color'); +$bootstrap-error-text: map.get(input-theme.$bootstrap, 'error-secondary-color'); +$indigo-helper-text: map.get(input-theme.$indigo, 'helper-text-color'); +$indigo-disabled-text: map.get(input-theme.$indigo, 'disabled-text-color'); +$indigo-error-text: map.get(input-theme.$indigo, 'error-secondary-color'); $material: digest-schema($light-select); $bootstrap: digest-schema($bootstrap-select); $fluent: digest-schema($fluent-select); diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss index a7c0e4c64..3b4d615ca 100644 --- a/src/components/select/themes/light/select.bootstrap.scss +++ b/src/components/select/themes/light/select.bootstrap.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$bootstrap; -$input-theme: input-theme.$bootstrap; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss index 29b6e02e9..a0f052222 100644 --- a/src/components/select/themes/light/select.fluent.scss +++ b/src/components/select/themes/light/select.fluent.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$fluent; -$input-theme: input-theme.$fluent; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss index 1b2ab4e15..0af85f64e 100644 --- a/src/components/select/themes/light/select.indigo.scss +++ b/src/components/select/themes/light/select.indigo.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$indigo; -$input-theme: input-theme.$indigo; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss index 60f6bd185..034a47bf4 100644 --- a/src/components/select/themes/light/select.material.scss +++ b/src/components/select/themes/light/select.material.scss @@ -1,16 +1,13 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; $dropdown-theme: dropdown-theme.$material; -$input-theme: input-theme.$material; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-select'); @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - @include css-vars-from-theme($input-theme, 'ig-input'); --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss index f6b96c969..6e15c0aef 100644 --- a/src/components/select/themes/shared/select.bootstrap.scss +++ b/src/components/select/themes/shared/select.bootstrap.scss @@ -17,7 +17,7 @@ $input-theme: input-theme.$bootstrap; ::slotted([slot='helper-text']) { @include type-style('body-2'); - color: var-get($input-theme, 'helper-text-color'); + color: $bootstrap-helper-text; } } @@ -63,14 +63,14 @@ $input-theme: input-theme.$bootstrap; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $bootstrap-error-text; } } :host([disabled]), :host(:disabled) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $bootstrap-disabled-text; } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss index 450b5521c..54bf193bf 100644 --- a/src/components/select/themes/shared/select.fluent.scss +++ b/src/components/select/themes/shared/select.fluent.scss @@ -24,7 +24,7 @@ $focused-border-width: rem(2px); margin-top: rem(5px); ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); + color: $fluent-helper-text; } } @@ -67,10 +67,16 @@ $focused-border-width: rem(2px); } } +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: $fluent-error-text; + } +} + :host(:disabled), :host([disabled]) { [part='helper-text'] ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $fluent-disabled-text; } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss index 84dc5f969..8b5131e6e 100644 --- a/src/components/select/themes/shared/select.indigo.scss +++ b/src/components/select/themes/shared/select.indigo.scss @@ -13,7 +13,7 @@ $input-theme: input-theme.$indigo; --dropdown-size: var(--component-size); ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); + color: $indigo-helper-text; } igc-input::part(input) { @@ -70,24 +70,24 @@ $input-theme: input-theme.$indigo; :host([invalid]) { ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); + color: $indigo-error-text; } } :host([invalid]:focus-within) { igc-input::part(label) { - color: var-get($input-theme, 'error-secondary-color'); + color: $indigo-error-text; } } :host(:disabled), :host([disabled]) { igc-input::part(input) { - color: var-get($input-theme, 'disabled-text-color'); + color: $indigo-disabled-text; } ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); + color: $indigo-disabled-text; } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss index 69b7d3090..126fadf47 100644 --- a/src/components/select/themes/shared/select.material.scss +++ b/src/components/select/themes/shared/select.material.scss @@ -156,14 +156,14 @@ $active-border-width: rem(2px) !default; [part='helper-text'] { - color: var-get($input-theme, 'helper-text-color'); + color: $material-helper-text; margin-top: rem(5px); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } :host([invalid]) { [part='helper-text'] { - color: var-get($input-theme, 'error-secondary-color'); + color: $material-error-text; } } @@ -183,7 +183,7 @@ $active-border-width: rem(2px) !default; } [part='helper-text'] { - color: var-get($input-theme, 'disabled-text-color'); + color: $material-disabled-text; } } From e386a4bfac6cfe85da5685c50960c5d8e91ff644 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 2 Feb 2024 16:54:23 +0200 Subject: [PATCH 3/4] refactor(input/select): replace map.get with var-get --- .../combo/themes/light/_themes.scss | 24 +++++++++---------- .../select/themes/light/_themes.scss | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss index 89a717422..8b0928d0b 100644 --- a/src/components/combo/themes/light/_themes.scss +++ b/src/components/combo/themes/light/_themes.scss @@ -3,18 +3,18 @@ @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *; @use '../../../input/themes/light/themes' as input-theme; -$material-helper-text: map.get(input-theme.$material, 'helper-text-color'); -$material-disabled-text: map.get(input-theme.$material, 'disabled-text-color'); -$material-error-text: map.get(input-theme.$material, 'error-secondary-color'); -$fluent-helper-text: map.get(input-theme.$fluent, 'helper-text-color'); -$fluent-disabled-text: map.get(input-theme.$fluent, 'disabled-text-color'); -$fluent-error-text: map.get(input-theme.$fluent, 'error-secondary-color'); -$bootstrap-helper-text: map.get(input-theme.$bootstrap, 'helper-text-color'); -$bootstrap-disabled-text: map.get(input-theme.$bootstrap, 'disabled-text-color'); -$bootstrap-error-text: map.get(input-theme.$bootstrap, 'error-secondary-color'); -$indigo-helper-text: map.get(input-theme.$indigo, 'helper-text-color'); -$indigo-disabled-text: map.get(input-theme.$indigo, 'disabled-text-color'); -$indigo-error-text: map.get(input-theme.$indigo, 'error-secondary-color'); +$material-helper-text: var-get(input-theme.$material, 'helper-text-color'); +$material-disabled-text: var-get(input-theme.$material, 'disabled-text-color'); +$material-error-text: var-get(input-theme.$material, 'error-secondary-color'); +$fluent-helper-text: var-get(input-theme.$fluent, 'helper-text-color'); +$fluent-disabled-text: var-get(input-theme.$fluent, 'disabled-text-color'); +$fluent-error-text: var-get(input-theme.$fluent, 'error-secondary-color'); +$bootstrap-helper-text: var-get(input-theme.$bootstrap, 'helper-text-color'); +$bootstrap-disabled-text: var-get(input-theme.$bootstrap, 'disabled-text-color'); +$bootstrap-error-text: var-get(input-theme.$bootstrap, 'error-secondary-color'); +$indigo-helper-text: var-get(input-theme.$indigo, 'helper-text-color'); +$indigo-disabled-text: var-get(input-theme.$indigo, 'disabled-text-color'); +$indigo-error-text: var-get(input-theme.$indigo, 'error-secondary-color'); $material: digest-schema($light-combo); $bootstrap: digest-schema($bootstrap-combo); $fluent: digest-schema($fluent-combo); diff --git a/src/components/select/themes/light/_themes.scss b/src/components/select/themes/light/_themes.scss index 89aa1084d..35c7a2c86 100644 --- a/src/components/select/themes/light/_themes.scss +++ b/src/components/select/themes/light/_themes.scss @@ -3,18 +3,18 @@ @use 'igniteui-theming/sass/themes/schemas/components/light/select' as *; @use '../../../input/themes/light/themes' as input-theme; -$material-helper-text: map.get(input-theme.$material, 'helper-text-color'); -$material-disabled-text: map.get(input-theme.$material, 'disabled-text-color'); -$material-error-text: map.get(input-theme.$material, 'error-secondary-color'); -$fluent-helper-text: map.get(input-theme.$fluent, 'helper-text-color'); -$fluent-disabled-text: map.get(input-theme.$fluent, 'disabled-text-color'); -$fluent-error-text: map.get(input-theme.$fluent, 'error-secondary-color'); -$bootstrap-helper-text: map.get(input-theme.$bootstrap, 'helper-text-color'); -$bootstrap-disabled-text: map.get(input-theme.$bootstrap, 'disabled-text-color'); -$bootstrap-error-text: map.get(input-theme.$bootstrap, 'error-secondary-color'); -$indigo-helper-text: map.get(input-theme.$indigo, 'helper-text-color'); -$indigo-disabled-text: map.get(input-theme.$indigo, 'disabled-text-color'); -$indigo-error-text: map.get(input-theme.$indigo, 'error-secondary-color'); +$material-helper-text: var-get(input-theme.$material, 'helper-text-color'); +$material-disabled-text: var-get(input-theme.$material, 'disabled-text-color'); +$material-error-text: var-get(input-theme.$material, 'error-secondary-color'); +$fluent-helper-text: var-get(input-theme.$fluent, 'helper-text-color'); +$fluent-disabled-text: var-get(input-theme.$fluent, 'disabled-text-color'); +$fluent-error-text: var-get(input-theme.$fluent, 'error-secondary-color'); +$bootstrap-helper-text: var-get(input-theme.$bootstrap, 'helper-text-color'); +$bootstrap-disabled-text: var-get(input-theme.$bootstrap, 'disabled-text-color'); +$bootstrap-error-text: var-get(input-theme.$bootstrap, 'error-secondary-color'); +$indigo-helper-text: var-get(input-theme.$indigo, 'helper-text-color'); +$indigo-disabled-text: var-get(input-theme.$indigo, 'disabled-text-color'); +$indigo-error-text: var-get(input-theme.$indigo, 'error-secondary-color'); $material: digest-schema($light-select); $bootstrap: digest-schema($bootstrap-select); $fluent: digest-schema($fluent-select); From 87ca0bc75cf0a1370610231656e3203958f7ae23 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 2 Feb 2024 18:31:19 +0200 Subject: [PATCH 4/4] refactor(select,combo): change how input colors are consumed --- src/components/combo/themes/dark/_themes.scss | 26 +++++++++++-- .../combo/themes/light/_themes.scss | 38 ++++++++++--------- .../combo/themes/shared/combo.bootstrap.scss | 12 +++--- .../combo/themes/shared/combo.fluent.scss | 10 ++--- .../combo/themes/shared/combo.indigo.scss | 12 +++--- .../combo/themes/shared/combo.material.scss | 12 +++--- .../select/themes/dark/_themes.scss | 25 ++++++++++-- .../select/themes/dark/select.bootstrap.scss | 2 +- .../select/themes/dark/select.fluent.scss | 2 +- .../select/themes/dark/select.indigo.scss | 2 +- .../select/themes/dark/select.material.scss | 2 +- .../select/themes/light/_themes.scss | 38 ++++++++++--------- .../select/themes/light/select.bootstrap.scss | 2 +- .../select/themes/light/select.fluent.scss | 2 +- .../select/themes/light/select.indigo.scss | 2 +- .../select/themes/light/select.material.scss | 2 +- .../themes/shared/select.bootstrap.scss | 8 ++-- .../select/themes/shared/select.fluent.scss | 10 ++--- .../select/themes/shared/select.indigo.scss | 14 +++---- .../select/themes/shared/select.material.scss | 10 ++--- 20 files changed, 137 insertions(+), 94 deletions(-) diff --git a/src/components/combo/themes/dark/_themes.scss b/src/components/combo/themes/dark/_themes.scss index a1a4000b8..78a38ae27 100644 --- a/src/components/combo/themes/dark/_themes.scss +++ b/src/components/combo/themes/dark/_themes.scss @@ -1,7 +1,25 @@ +@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *; +@use 'components/input/themes/dark/themes' as input-theme; -$material: digest-schema($dark-combo); -$bootstrap: digest-schema($dark-bootstrap-combo); -$fluent: digest-schema($dark-fluent-combo); -$indigo: digest-schema($dark-indigo-combo); +$material: map.merge(digest-schema($dark-combo), ( + helper-text-color: map.get(input-theme.$material, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$material, 'helper-text-color') +)); +$bootstrap: map.merge(digest-schema($dark-bootstrap-combo), ( + helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color') +)); +$fluent: map.merge(digest-schema($dark-fluent-combo), ( + helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color') +)); +$indigo: map.merge(digest-schema($dark-indigo-combo), ( + helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color') +)); diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss index 8b0928d0b..5da37329c 100644 --- a/src/components/combo/themes/light/_themes.scss +++ b/src/components/combo/themes/light/_themes.scss @@ -1,21 +1,25 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/input/themes/light/themes' as input-theme; -$material-helper-text: var-get(input-theme.$material, 'helper-text-color'); -$material-disabled-text: var-get(input-theme.$material, 'disabled-text-color'); -$material-error-text: var-get(input-theme.$material, 'error-secondary-color'); -$fluent-helper-text: var-get(input-theme.$fluent, 'helper-text-color'); -$fluent-disabled-text: var-get(input-theme.$fluent, 'disabled-text-color'); -$fluent-error-text: var-get(input-theme.$fluent, 'error-secondary-color'); -$bootstrap-helper-text: var-get(input-theme.$bootstrap, 'helper-text-color'); -$bootstrap-disabled-text: var-get(input-theme.$bootstrap, 'disabled-text-color'); -$bootstrap-error-text: var-get(input-theme.$bootstrap, 'error-secondary-color'); -$indigo-helper-text: var-get(input-theme.$indigo, 'helper-text-color'); -$indigo-disabled-text: var-get(input-theme.$indigo, 'disabled-text-color'); -$indigo-error-text: var-get(input-theme.$indigo, 'error-secondary-color'); -$material: digest-schema($light-combo); -$bootstrap: digest-schema($bootstrap-combo); -$fluent: digest-schema($fluent-combo); -$indigo: digest-schema($indigo-combo); +$material: map.merge(digest-schema($light-combo), ( + helper-text-color: map.get(input-theme.$material, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$material, 'helper-text-color') +)); +$bootstrap: map.merge(digest-schema($bootstrap-combo), ( + helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color') +)); +$fluent: map.merge(digest-schema($fluent-combo), ( + helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color') +)); +$indigo: map.merge(digest-schema($indigo-combo), ( + helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color') +)); diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index c9a238ea1..ad5131f77 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $theme: $bootstrap; $input-theme: input-theme.$bootstrap; @@ -14,7 +14,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; [part='helper-text'] { margin-top: rem(4px); - color: $bootstrap-helper-text; + color: var-get($theme, 'helper-text-color'); } [part='list-wrapper'] { @@ -94,7 +94,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $bootstrap-error-text; + color: var-get($theme, 'error-secondary-color'); } } @@ -105,13 +105,13 @@ $dropdown-theme: dropdown-theme.$bootstrap; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: $bootstrap-disabled-text; + color: var-get($theme, 'disabled-text-color'); } [part~='clear-icon'] { border-inline-end: rem(1px) solid var-get($input-theme, 'disabled-border-color'); background: inherit; - color: $bootstrap-disabled-text; + color: var-get($theme, 'disabled-text-color'); igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss index e74b887e1..4a5c68fd9 100644 --- a/src/components/combo/themes/shared/combo.fluent.scss +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $theme: $fluent; $dropdown-theme: dropdown-theme.$fluent; @@ -15,7 +15,7 @@ $dropdown-theme: dropdown-theme.$fluent; display: block; padding: 0; margin-top: rem(5px); - color: $fluent-helper-text; + color: var-get($theme, 'helper-text-color'); } } @@ -79,7 +79,7 @@ $dropdown-theme: dropdown-theme.$fluent; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $fluent-error-text; + color: var-get($theme, 'error-secondary-color'); } } @@ -107,12 +107,12 @@ $dropdown-theme: dropdown-theme.$fluent; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: $fluent-disabled-text; + color: var-get($theme, 'disabled-text-color'); } [part~='clear-icon'] { background: inherit; - color: $fluent-disabled-text; + color: var-get($theme, 'disabled-text-color'); igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index e96dc32fd..576823e13 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $theme: $indigo; $input-theme: input-theme.$indigo; @@ -21,7 +21,7 @@ $dropdown-theme: dropdown-theme.$indigo; } ::slotted([slot='helper-text']) { - color: $indigo-helper-text; + color: var-get($theme, 'helper-text-color'); } } @@ -101,7 +101,7 @@ $dropdown-theme: dropdown-theme.$indigo; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $indigo-error-text; + color: var-get($theme, 'error-secondary-color'); } } @@ -110,7 +110,7 @@ $dropdown-theme: dropdown-theme.$indigo; ::slotted([slot='prefix']), ::slotted([slot='suffix']), ::slotted([slot='helper-text']) { - color: $indigo-disabled-text; + color: var-get($theme, 'disabled-text-color'); } igc-input::part(input)::selection { @@ -119,7 +119,7 @@ $dropdown-theme: dropdown-theme.$indigo; [part~='clear-icon'] { background: inherit; - color: $indigo-disabled-text; + color: var-get($theme, 'disabled-text-color'); igc-icon { color: inherit; diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index b8856e690..f86da7140 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $theme: $material; $input-theme: input-theme.$material; @@ -19,7 +19,7 @@ $dropdown-theme: dropdown-theme.$material; ::slotted([slot='helper-text']) { @include type-style('caption'); - color: $material-helper-text; + color: var-get($theme, 'helper-text-color'); line-height: 1; } @@ -122,7 +122,7 @@ $dropdown-theme: dropdown-theme.$material; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $material-error-text; + color: var-get($theme, 'error-secondary-color'); } } @@ -133,12 +133,12 @@ $dropdown-theme: dropdown-theme.$material; igc-input::part(label), igc-input::part(input)::placeholder, ::slotted([slot='helper-text']) { - color: $material-disabled-text; + color: var-get($theme, 'disabled-text-color'); } [part~='clear-icon'] { background: inherit; - color: $material-disabled-text; + color: var-get($theme, 'disabled-text-color'); igc-icon { color: inherit; diff --git a/src/components/select/themes/dark/_themes.scss b/src/components/select/themes/dark/_themes.scss index 5ad0744ed..9388fc262 100644 --- a/src/components/select/themes/dark/_themes.scss +++ b/src/components/select/themes/dark/_themes.scss @@ -1,8 +1,25 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/select' as *; +@use 'components/input/themes/dark/themes' as input-theme; -$material: digest-schema($dark-select); -$indigo: digest-schema($dark-indigo-select); -$fluent: digest-schema($dark-fluent-select); -$bootstrap: digest-schema($dark-bootstrap-select); +$material: map.merge(digest-schema($dark-select), ( + helper-text-color: map.get(input-theme.$material, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$material, 'helper-text-color') +)); +$bootstrap: map.merge(digest-schema($dark-bootstrap-select), ( + helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color') +)); +$fluent: map.merge(digest-schema($dark-fluent-select), ( + helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color') +)); +$indigo: map.merge(digest-schema($dark-indigo-select), ( + helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color') +)); diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss index a3447c7a6..e7343c2a0 100644 --- a/src/components/select/themes/dark/select.bootstrap.scss +++ b/src/components/select/themes/dark/select.bootstrap.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use 'components/dropdown/themes/dark/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$bootstrap; $theme: $bootstrap; diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss index df97e9ec3..59fac4b7b 100644 --- a/src/components/select/themes/dark/select.fluent.scss +++ b/src/components/select/themes/dark/select.fluent.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use 'components/dropdown/themes/dark/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$fluent; $theme: $fluent; diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss index 5fa13aa46..9a10bbdd7 100644 --- a/src/components/select/themes/dark/select.indigo.scss +++ b/src/components/select/themes/dark/select.indigo.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use 'components/dropdown/themes/dark/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$indigo; $theme: $indigo; diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss index 111c83ebe..08c2ec060 100644 --- a/src/components/select/themes/dark/select.material.scss +++ b/src/components/select/themes/dark/select.material.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; +@use 'components/dropdown/themes/dark/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$material; $theme: $material; diff --git a/src/components/select/themes/light/_themes.scss b/src/components/select/themes/light/_themes.scss index 35c7a2c86..7a89db7e9 100644 --- a/src/components/select/themes/light/_themes.scss +++ b/src/components/select/themes/light/_themes.scss @@ -1,21 +1,25 @@ @use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/select' as *; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/input/themes/light/themes' as input-theme; -$material-helper-text: var-get(input-theme.$material, 'helper-text-color'); -$material-disabled-text: var-get(input-theme.$material, 'disabled-text-color'); -$material-error-text: var-get(input-theme.$material, 'error-secondary-color'); -$fluent-helper-text: var-get(input-theme.$fluent, 'helper-text-color'); -$fluent-disabled-text: var-get(input-theme.$fluent, 'disabled-text-color'); -$fluent-error-text: var-get(input-theme.$fluent, 'error-secondary-color'); -$bootstrap-helper-text: var-get(input-theme.$bootstrap, 'helper-text-color'); -$bootstrap-disabled-text: var-get(input-theme.$bootstrap, 'disabled-text-color'); -$bootstrap-error-text: var-get(input-theme.$bootstrap, 'error-secondary-color'); -$indigo-helper-text: var-get(input-theme.$indigo, 'helper-text-color'); -$indigo-disabled-text: var-get(input-theme.$indigo, 'disabled-text-color'); -$indigo-error-text: var-get(input-theme.$indigo, 'error-secondary-color'); -$material: digest-schema($light-select); -$bootstrap: digest-schema($bootstrap-select); -$fluent: digest-schema($fluent-select); -$indigo: digest-schema($indigo-select); +$material: map.merge(digest-schema($light-select), ( + helper-text-color: map.get(input-theme.$material, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$material, 'helper-text-color') +)); +$bootstrap: map.merge(digest-schema($bootstrap-select), ( + helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color') +)); +$fluent: map.merge(digest-schema($fluent-select), ( + helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color') +)); +$indigo: map.merge(digest-schema($indigo-select), ( + helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'), + disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'), + error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color') +)); diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss index 3b4d615ca..7c7ed241a 100644 --- a/src/components/select/themes/light/select.bootstrap.scss +++ b/src/components/select/themes/light/select.bootstrap.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$bootstrap; $theme: $bootstrap; diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss index a0f052222..7e71a00c3 100644 --- a/src/components/select/themes/light/select.fluent.scss +++ b/src/components/select/themes/light/select.fluent.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$fluent; $theme: $fluent; diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss index 0af85f64e..0b7798e9a 100644 --- a/src/components/select/themes/light/select.indigo.scss +++ b/src/components/select/themes/light/select.indigo.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$indigo; $theme: $indigo; diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss index 034a47bf4..c0feec57c 100644 --- a/src/components/select/themes/light/select.material.scss +++ b/src/components/select/themes/light/select.material.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; $dropdown-theme: dropdown-theme.$material; $theme: $material; diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss index 6e15c0aef..6e17d1001 100644 --- a/src/components/select/themes/shared/select.bootstrap.scss +++ b/src/components/select/themes/shared/select.bootstrap.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/input/themes/light/themes' as input-theme; $theme: $bootstrap; $input-theme: input-theme.$bootstrap; @@ -17,7 +17,7 @@ $input-theme: input-theme.$bootstrap; ::slotted([slot='helper-text']) { @include type-style('body-2'); - color: $bootstrap-helper-text; + color: var-get($theme, 'helper-text-color'); } } @@ -63,14 +63,14 @@ $input-theme: input-theme.$bootstrap; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $bootstrap-error-text; + color: var-get($theme, 'error-secondary-color'); } } :host([disabled]), :host(:disabled) { ::slotted([slot='helper-text']) { - color: $bootstrap-disabled-text; + color: var-get($theme, 'disabled-text-color'); } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss index 54bf193bf..faf8b7aa7 100644 --- a/src/components/select/themes/shared/select.fluent.scss +++ b/src/components/select/themes/shared/select.fluent.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; $theme: $fluent; $dropdown-theme: dropdown-theme.$fluent; @@ -24,7 +24,7 @@ $focused-border-width: rem(2px); margin-top: rem(5px); ::slotted([slot='helper-text']) { - color: $fluent-helper-text; + color: var-get($theme, 'helper-text-color'); } } @@ -69,14 +69,14 @@ $focused-border-width: rem(2px); :host([invalid]) { ::slotted([slot='helper-text']) { - color: $fluent-error-text; + color: var-get($theme, 'error-secondary-color'); } } :host(:disabled), :host([disabled]) { [part='helper-text'] ::slotted([slot='helper-text']) { - color: $fluent-disabled-text; + color: var-get($fluent, 'disabled-text-color'); } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss index 8b5131e6e..0468beb31 100644 --- a/src/components/select/themes/shared/select.indigo.scss +++ b/src/components/select/themes/shared/select.indigo.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; $theme: $indigo; $dropdown-theme: dropdown-theme.$indigo; @@ -13,7 +13,7 @@ $input-theme: input-theme.$indigo; --dropdown-size: var(--component-size); ::slotted([slot='helper-text']) { - color: $indigo-helper-text; + color: var-get($theme, 'helper-text-color'); } igc-input::part(input) { @@ -70,24 +70,24 @@ $input-theme: input-theme.$indigo; :host([invalid]) { ::slotted([slot='helper-text']) { - color: $indigo-error-text; + color: var-get($theme, 'error-secondary-color'); } } :host([invalid]:focus-within) { igc-input::part(label) { - color: $indigo-error-text; + color: var-get($theme, 'error-secondary-color'); } } :host(:disabled), :host([disabled]) { igc-input::part(input) { - color: $indigo-disabled-text; + color: var-get($theme, 'disabled-text-color'); } ::slotted([slot='helper-text']) { - color: $indigo-disabled-text; + color: var-get($theme, 'disabled-text-color'); } [part~='toggle-icon'] { diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss index 126fadf47..40c138bd8 100644 --- a/src/components/select/themes/shared/select.material.scss +++ b/src/components/select/themes/shared/select.material.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; @use '../light/themes' as *; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; +@use 'components/dropdown/themes/light/themes' as dropdown-theme; +@use 'components/input/themes/light/themes' as input-theme; $theme: $material; $dropdown-theme: dropdown-theme.$material; @@ -156,14 +156,14 @@ $active-border-width: rem(2px) !default; [part='helper-text'] { - color: $material-helper-text; + color: var-get($theme, 'helper-text-color'); margin-top: rem(5px); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } :host([invalid]) { [part='helper-text'] { - color: $material-error-text; + color: var-get($theme, 'error-secondary-color'); } } @@ -183,7 +183,7 @@ $active-border-width: rem(2px) !default; } [part='helper-text'] { - color: $material-disabled-text; + color: var-get($theme, 'disabled-text-color'); } }