fix: override invalid / warning styles with style api (#4055)

Author: mxschll

src/input/styles.scss

@@ -126,7 +126,10 @@
   }
 
   &.input-invalid {
-    @include styles.form-invalid-control();
+    @include styles.form-invalid-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-error),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error)
+    );
     &.input-has-icon-left {
       padding-inline-start: calc(
         #{styles.$control-icon-horizontal-padding} -
@@ -136,7 +139,10 @@
   }
 
   &.input-warning {
-    @include styles.form-warning-control();
+    @include styles.form-warning-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-warning),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning)
+    );
     &.input-has-icon-left {
       padding-inline-start: calc(
         #{styles.$control-icon-horizontal-padding} -

src/internal/styles/forms/mixins.scss

@@ -193,9 +193,9 @@
   @include typography.font-body-s;
 }
 
-@mixin form-invalid-control {
-  color: awsui.$color-text-status-error;
-  border-color: awsui.$color-text-status-error;
+@mixin form-invalid-control($color: awsui.$color-text-status-error, $border-color: awsui.$color-text-status-error) {
+  color: $color;
+  border-color: $border-color;
   padding-inline-start: constants.$invalid-control-left-padding;
   border-inline-start-width: constants.$invalid-control-left-border;
   &:focus {
@@ -204,9 +204,9 @@
   @content;
 }
 
-@mixin form-warning-control {
-  color: awsui.$color-text-status-warning;
-  border-color: awsui.$color-text-status-warning;
+@mixin form-warning-control($color: awsui.$color-text-status-warning, $border-color: awsui.$color-text-status-warning) {
+  color: $color;
+  border-color: $border-color;
   padding-inline-start: constants.$invalid-control-left-padding;
   border-inline-start-width: constants.$invalid-control-left-border;
   &:focus {

src/prompt-input/styles.scss

@@ -71,14 +71,20 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   }
 
   &.textarea-invalid {
-    @include styles.form-invalid-control();
+    @include styles.form-invalid-control(
+      $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-error),
+      $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-error)
+    );
     & {
       padding-inline-start: 0;
     }
 
     &:focus-within,
     &:focus {
-      @include styles.form-invalid-control();
+      @include styles.form-invalid-control(
+        $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-error),
+        $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-error)
+      );
       & {
         padding-inline-start: 0;
         box-shadow: foundation.$box-shadow-focused-light-invalid;
@@ -87,14 +93,20 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   }
 
   &.textarea-warning {
-    @include styles.form-warning-control();
+    @include styles.form-warning-control(
+      $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-warning),
+      $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-warning)
+    );
     & {
       padding-inline-start: 0;
     }
 
     &:focus-within,
     &:focus {
-      @include styles.form-warning-control();
+      @include styles.form-warning-control(
+        $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-warning),
+        $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-warning)
+      );
       & {
         padding-inline-start: 0;
         box-shadow: foundation.$box-shadow-focused-light-invalid;

src/textarea/styles.scss

@@ -117,10 +117,16 @@
   }
 
   &.textarea-invalid {
-    @include styles.form-invalid-control();
+    @include styles.form-invalid-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-error),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error)
+    );
   }
 
   &.textarea-warning {
-    @include styles.form-warning-control();
+    @include styles.form-warning-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-warning),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning)
+    );
   }
 }