diff --git a/package-lock.json b/package-lock.json index 469f3c594..b13db99e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "globby": "^14.1.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.0.0", - "igniteui-theming": "^15.0.0", + "igniteui-theming": "^15.1.1", "keep-a-changelog": "^2.6.1", "lint-staged": "^15.4.3", "lit-analyzer": "^2.0.3", @@ -7496,11 +7496,10 @@ } }, "node_modules/igniteui-theming": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.0.0.tgz", - "integrity": "sha512-4ANFe6t3t9fEDexmB8/H7hEO1eBBWohu1tbEUFdfQPBMgUT/qqXbSlxW3FGCmZV7Oxr5rn9ZdXyScPxzwRx1lg==", + "version": "15.1.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.1.1.tgz", + "integrity": "sha512-PvU7znjYOUAT3fSX94gRrAmgFvvM8z04x6JJNAnO/7/jYSJmSWFtW3G4NfAMm8Uross5IGZuYq4cjlQo1a/Hkw==", "dev": true, - "license": "MIT", "peerDependencies": { "sass": "^1.69.5" } diff --git a/package.json b/package.json index eeb69aafb..a0b905dd6 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "globby": "^14.1.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.0.0", - "igniteui-theming": "^15.0.0", + "igniteui-theming": "^15.1.1", "keep-a-changelog": "^2.6.1", "lint-staged": "^15.4.3", "lit-analyzer": "^2.0.3", diff --git a/src/components/combo/themes/shared/combo.common.scss b/src/components/combo/themes/shared/combo.common.scss index 73db7c722..65d70592b 100644 --- a/src/components/combo/themes/shared/combo.common.scss +++ b/src/components/combo/themes/shared/combo.common.scss @@ -59,6 +59,13 @@ $dropdown-theme: dropdown-theme.$material; } } +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + ::part(helper-text) { + color: var-get($theme, 'error-secondary-color'); + } +} + :host(:disabled), :host([disabled]) { ::slotted([slot='prefix']), diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss index 1510f69aa..ebe753dc1 100644 --- a/src/components/combo/themes/shared/combo.fluent.scss +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -62,7 +62,7 @@ $dropdown-theme: dropdown-theme.$fluent; :host(:focus-within) { [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); + background: var-get($theme, 'toggle-button-background-focus'); color: var-get($theme, 'toggle-button-foreground-focus'); igc-icon { diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index 932bde5a8..f56c8a9e0 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -92,6 +92,13 @@ $dropdown-theme: dropdown-theme.$indigo; } } +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + ::part(helper-text) { + color: var-get($input-theme, 'helper-text-color'); + } +} + :host(:disabled), :host([disabled]) { ::slotted([slot='prefix']), diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index 5d11f7bf9..34763daed 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -75,16 +75,24 @@ $dropdown-theme: dropdown-theme.$material; color: var-get($theme, 'toggle-button-foreground-filled'); } -:host(:focus-within) { +:host(:not([outlined]):focus-within) { + igc-input::part(container) { + --_toggle-focus-background: #{var-get($theme, 'toggle-button-background')}; + --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground')}; + + &:focus-within { + --_toggle-focus-background: #{var-get($theme, 'toggle-button-background-focus')}; + --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-filled')}; + } + } + [part~='toggle-icon'] { - color: var-get($theme, 'toggle-button-foreground-filled'); - background: var-get($theme, 'toggle-button-background-focus'); + color: var(--_toggle-focus-foreground); + background: var(--_toggle-focus-background); } -} -:host(:not([outlined]):focus-within) { - > igc-input::part(container) { - background: var-get($input-theme, 'box-background-focus'); + [part='toggle-icon filled'] { + color: var-get($theme, 'toggle-button-foreground-filled'); } } diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss index be4d08cf2..8732e2e4e 100644 --- a/src/components/date-picker/themes/shared/date-picker.common.scss +++ b/src/components/date-picker/themes/shared/date-picker.common.scss @@ -73,10 +73,21 @@ igc-icon, --component-size: var(--input-size); } +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + ::part(helper-text) { + color: var-get($theme, 'error-secondary-color'); + } +} + :host(:disabled), :host([disabled]) { [part='label'], igc-validator { color: var-get($input-theme, 'disabled-text-color'); } + + ::part(helper-text) { + color: var-get($input-theme, 'disabled-text-color'); + } } diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss index c7d52372e..601221525 100644 --- a/src/components/date-picker/themes/shared/date-picker.indigo.scss +++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss @@ -40,3 +40,10 @@ $input-theme: input-theme.$indigo; color: var-get($input-theme, 'focused-secondary-color'); } } + +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + ::part(helper-text) { + color: var-get($input-theme, 'helper-text-color'); + } +} diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 67915c89a..0eabc0cd8 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -380,7 +380,6 @@ input:placeholder-shown + [part='notch'] [part='label'], } } - :host(:not([type='search'])[readonly][outlined]:focus-within) { :not([part~='filled']) { input:not(:placeholder-shown) + [part='notch'] [part='label'] { @@ -397,6 +396,20 @@ input:placeholder-shown + [part='notch'] [part='label'], } } +:host(:not([type='search'])[outlined]:hover) { + [part='notch'], + [part='start'], + [part='end'], + [part='filler'] { + border-color: var-get($theme, 'hover-border-color'); + } + + input:placeholder-shown + [part='notch'], + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + } +} + :host(:not([type='search'])[outlined]:focus-within) { [part='label'] { margin-block-start: calc(#{$active-border-width} / 2); diff --git a/src/components/select/themes/shared/select.common.scss b/src/components/select/themes/shared/select.common.scss index 0efc209c8..5a1b7f65e 100644 --- a/src/components/select/themes/shared/select.common.scss +++ b/src/components/select/themes/shared/select.common.scss @@ -32,7 +32,6 @@ $dropdown-theme: dropdown-theme.$material; } } -:host(:hover), :host(:focus-within) { [part~='toggle-icon'] { background: var-get($theme, 'toggle-button-background-focus--border'); diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss index 7e331f198..d6470f2c2 100644 --- a/src/components/select/themes/shared/select.fluent.scss +++ b/src/components/select/themes/shared/select.fluent.scss @@ -36,6 +36,10 @@ $focused-border-width: rem(2px); } :host(:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus'); + } + igc-input[readonly]:not([disabled])::part(container) { border-width: #{$focused-border-width}; } diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss index d79a7ae95..f9dafdac2 100644 --- a/src/components/select/themes/shared/select.indigo.scss +++ b/src/components/select/themes/shared/select.indigo.scss @@ -33,6 +33,12 @@ $input-theme: input-theme.$indigo; padding: rem(3px); } +:host(:hover) { + [part~='toggle-icon'] { + color: var-get($theme, 'toggle-button-foreground-focus'); + } +} + :host(:focus-within) { igc-input::part(label) { color: var-get($input-theme, 'focused-secondary-color'); diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 9c240c3ea..2c0797bc2 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -330,6 +330,22 @@ textarea { } } +:host([outlined]:hover) { + [part='notch'], + [part='start'], + [part='end'], + [part='filler'] { + border-color: var-get($theme, 'hover-border-color'); + } + + [part~='container'][part~='filled'], + [part~='container'][part~='placeholder'] { + [part='notch'] { + border-block-start-color: transparent; + } + } +} + :host([outlined]:focus-within) { [part='filler'], [part='notch'] {