Update form validation styles to use new CSS variables for color and …

…border-color
twbs · Feb 14, 2023 · 7eb2dec · 7eb2dec
1 parent a0e8568
commit 7eb2dec
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -123,6 +123,11 @@
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
   // scss-docs-end root-focus-variables
+
+  --#{$prefix}form-valid-color: #{$green-500};
+  --#{$prefix}form-valid-border-color: #{$green-500};
+  --#{$prefix}form-invalid-color: #{$red-500};
+  --#{$prefix}form-invalid-border-color: #{$red-500};
 }
 
 @if $enable-dark-mode {
@@ -173,6 +178,11 @@
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+    --#{$prefix}form-valid-color: #{$green-300};
+    --#{$prefix}form-valid-border-color: #{$green-300};
+    --#{$prefix}form-invalid-color: #{$red-300};
+    --#{$prefix}form-invalid-border-color: #{$red-300};
     // scss-docs-end root-dark-mode-vars
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1083,20 +1083,20 @@ $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://w
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
-    "color": var(--#{$prefix}success-text),
+    "color": var(--#{$prefix}form-valid-color),
     "icon": $form-feedback-icon-valid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}success),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}success),
+    "border-color": var(--#{$prefix}form-valid-border-color),
   ),
   "invalid": (
-    "color": var(--#{$prefix}danger-text),
+    "color": var(--#{$prefix}form-invalid-color),
     "icon": $form-feedback-icon-invalid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}danger),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}danger),
+    "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 ) !default;
 // scss-docs-end form-validation-states