fix: invalid text color for inputs (#3539)

* fix: we need to correctly set the variant at the very beginning

* Update _form-components.scss

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

@@ -165,6 +165,10 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 @mixin get-validity-color($selector, $key: "valid") {
 	$variant: "successful";
 
+	@if ($key != "valid") {
+		$variant: "critical";
+	}
+
 	@include get-validity-message($key);
 
 	#{$selector},
@@ -173,10 +177,6 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 		caret-color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default);
 	}
 
-	@if ($key != "valid") {
-		$variant: "critical";
-	}
-
 	@if ($selector != textarea) {
 		@extend %db-#{$variant}-variables;
 		/* stylelint-disable-next-line at-rule-empty-line-before */