fix: set border- and label-color for in/valid state of select, textarea, custom select and input (#4258)

* feat: set border- and label-color for in/valid state of textarea, custom select and input

* test: updated snapshots

* test: updated snapshots

* test: updated snapshots

* fix(): set validity color for textarea border

* test: updated snapshots

* feat(): set border- and label-color for valid and invalid textarea and input

* feat(): revert override in package

* feat(): set border color for valid and invalid state

* auto update snapshots (#4990)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat(): replace textarea-specific block with the existing variable that holds input and textarea

* auto update snapshots (#4999)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat(): change color of label and border to correct value

* auto update snapshots (#5000)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore(): add changeset

* chore(): fix screenshots

* auto update snapshots (#5177)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore(): remove redundant textarea block

* feat(): only color in/valid floating labels

* chore(): remove unused import

* Update four-carrots-flow.md

* Update border color for form elements based on state

---------

Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 3 people

.changeset/four-carrots-flow.md

@@ -0,0 +1,9 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/wc-core-components": patch
+---
+
+Set border of select, textarea, custom select and input to corresponding color when in/valid state is set.

packages/components/src/styles/internal/_form-components.scss

@@ -88,6 +88,18 @@ $db-min-inline-size: var(
 
 @mixin set-floating-label-overwrites($selector) {
 	&[data-variant="floating"] {
+		@include get-validity($selector) {
+			label {
+				color: var(--db-successful-on-bg-basic-emphasis-80-default);
+			}
+		}
+
+		@include get-validity($selector, "invalid") {
+			label {
+				color: var(--db-critical-on-bg-basic-emphasis-80-default);
+			}
+		}
+
 		> label {
 			@extend %db-overwrite-font-size-md;