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

[michaelmkraus]

Proposed changes

• set border of textarea to corresponding color when in/valid state is set
• set floating label color of textarea, input and custom select to corresponding color when in/valid state is set

closes #4209

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (fix on existing components or architectural decisions)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

[github-actions]

🔭🐙🐈 Test this branch here: https://db-ux-design-system.github.io/core-web/review/fix-valid-invalid-data-inputs-border-label-color

[nmerget]

Suggested change

	&:is(textarea) {
	@each $state, $variant in (valid: successful, invalid: critical) {
	&[data-custom-validity="#{$state}"] {
	border: var(--db-border-width-3xs)
	solid
	var(--db-#{$variant}-on-bg-basic-emphasis-70-default);
	}
	}
	}

We don't need this here replace https://github.com/db-ux-design-system/core-web/pull/4258/files#diff-fc8ed644a470e8653bcb58e284747ce63f7ab258a112d921ab5605159aa41a8cR204-R228 with:

` & {
@if ($selector == textarea) {
--db-textarea-read-only: var(
--db-#{$variant}-bg-basic-level-1-default
);
}

	@extend %db-#{$variant}-variables;
}`

I don't know why there was a workaround for textarea but with this we set all adaptive colors like we should.

[nmerget]

Suggested change

	@each $state, $variant in (valid: successful, invalid: critical) {
	&[data-custom-validity="#{$state}"] > label,
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) > label {
	color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default);
	}
	@if ($selector == textarea) {
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) {
	&::before,
	&::after {
	// necessary to force this override over the placeholder-content mixin's ::before rule
	// to avoid the label to influence the border of the textarea
	content: none !important;
	}
	}
	}
	}

You cannot remove the content on ::before or ::after it is a workaround to ensure the floating label stays above the text. You see the problem, when you add a lot of text into the textarea.

[michaelmkraus]

I see the problem with long texts. We could handle it like that

Suggested change

	@each $state, $variant in (valid: successful, invalid: critical) {
	&[data-custom-validity="#{$state}"] > label,
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) > label {
	color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default);
	}
	@if ($selector == textarea) {
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) {
	&::before,
	&::after {
	// necessary to force this override over the placeholder-content mixin's ::before rule
	// to avoid the label to influence the border of the textarea
	content: none !important;
	}
	}
	}
	}
	@each $state, $variant in (valid: successful, invalid: critical) {
	&[data-custom-validity="#{$state}"] > label,
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) > label {
	color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default);
	}
	@if ($selector == textarea) {
	&:has(> #{$selector}[data-custom-validity="#{$state}"]) {
	&::before,
	&::after {
	// necessary to force this override over the placeholder-content mixin's ::before rule
	// to avoid the label to influence the border of the textarea
	border-color: transparent;
	background-color: inherit !important;
	}
	}
	}
	}

This way, we would keep the workaround and ensure that the label does not influence the border of the textarea.

[nmerget]

There is another issue with the label for variant="floating" it should be colored with the invalid or valid color