diff --git a/.changeset/fluffy-balloons-peel.md b/.changeset/fluffy-balloons-peel.md new file mode 100644 index 000000000000..4127dd9b623a --- /dev/null +++ b/.changeset/fluffy-balloons-peel.md @@ -0,0 +1,9 @@ +--- +"@db-ux/core-components": patch +"@db-ux/ngx-core-components": patch +"@db-ux/react-core-components": patch +"@db-ux/wc-core-components": patch +"@db-ux/v-core-components": patch +--- + +fix(form elements): `valid` background- and border-colors diff --git a/packages/components/src/styles/internal/_form-components.scss b/packages/components/src/styles/internal/_form-components.scss index 8a21e0f789ac..8e2dc97dccb5 100644 --- a/packages/components/src/styles/internal/_form-components.scss +++ b/packages/components/src/styles/internal/_form-components.scss @@ -101,15 +101,15 @@ $db-min-inline-size: var( @mixin set-floating-label-overwrites($selector) { &[data-variant="floating"] { - @include get-validity($selector) { + @include get-validity($selector, "valid") { label { - color: var(--db-successful-on-bg-basic-emphasis-80-default); + color: var(--db-successful-on-bg-basic-emphasis-90-default); } } @include get-validity($selector, "invalid") { label { - color: var(--db-critical-on-bg-basic-emphasis-80-default); + color: var(--db-critical-on-bg-basic-emphasis-90-default); } } @@ -376,13 +376,8 @@ $input-valid-types: @include set-floating-label-overwrites($selector); - @include get-validity($selector) { - &:has( - > .db-infotext[data-semantic="successful"], - > db-infotext > .db-infotext[data-semantic="successful"] - ) { - @include get-validity-color($selector, "valid"); - } + @include get-validity($selector, "valid") { + @include get-validity-color($selector, "valid"); } @include get-validity($selector, "invalid") {