From f8278c1ab1ffff6318ae37bd8136e12adfa49ebd Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 11 Oct 2023 17:05:46 +0200
Subject: [PATCH] Add color mode on form validation

---
 scss/_root.scss                    |   3 +
 scss/_variables-dark.scss          |  11 ++-
 scss/_variables.scss               |   1 +
 scss/mixins/_forms.scss            |   1 +
 site/content/docs/5.3/dark-mode.md | 119 ++++++++++++++++++++++++++++-
 5 files changed, 130 insertions(+), 5 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 560de0834f..825bd6ee3d 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -152,6 +152,9 @@
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars
+    --#{$prefix}success-icon: #{escape-svg($success-icon-dark)};
+    --#{$prefix}error-icon: #{escape-svg($danger-icon-dark)};
+
     --#{$prefix}body-color: #{$body-color-dark};
     --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
     --#{$prefix}body-bg: #{$body-bg-dark};
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 22a7eeea31..f03cd08eb9 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -94,6 +94,9 @@ $disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boos
 $focus-visible-inner-color-dark:    $black !default; // Boosted mod
 $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 
+$success-icon-dark:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$functional-green-dark}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
+$danger-icon-dark:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$functional-red-dark}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default;
+
 //
 // Forms
 //
@@ -105,10 +108,10 @@ $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 // Boosted mod: no $form-switch-bg-image-dark
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             $green-300 !default;
-$form-valid-border-color-dark:      $green-300 !default;
-$form-invalid-color-dark:           $red-300 !default;
-$form-invalid-border-color-dark:    $red-300 !default;
+$form-valid-color-dark:             var(--#{$prefix}success-text-emphasis) !default;
+$form-valid-border-color-dark:      var(--#{$prefix}success) !default;
+$form-invalid-color-dark:           var(--#{$prefix}danger-text-emphasis) !default;
+$form-invalid-border-color-dark:    var(--#{$prefix}danger) !default;
 // scss-docs-end form-validation-colors-dark
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d6a7bb6059..49bbeb88dd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1339,6 +1339,7 @@ $form-feedback-icon-valid:          var(--#{$prefix}success-icon) !default;
 $form-feedback-icon-invalid:        var(--#{$prefix}error-icon) !default;
 $form-feedback-icon-size:           add($spacer * .25, $spacer * .5) !default; // Boosted mod
 $form-feedback-line-height:         $line-height-sm !default; // Boosted mod
+$form-feedback-color:               var(--#{$prefix}body-color) !default; // Boosted mod
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 65a4a85b49..ec13a75197 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -62,6 +62,7 @@
       font-style: $form-feedback-font-style;
       font-weight: $font-weight-bold; // Boosted mod
       line-height: $form-feedback-line-height; // Boosted mod
+      color: $form-feedback-color; // Boosted mod
 
       // Boosted mod: status should not rely on color only
       @if $enable-validation-icons {
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 160608c2fd..5e418889cf 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -1734,7 +1734,7 @@ sitemap_exclude: true
   </div>
 </div>
 
-### Labels, required fields & text
+### Labels, fields & text
 
 <h4 class="mt-3">No theme</h4>
 
@@ -2029,3 +2029,120 @@ sitemap_exclude: true
     <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset></form>
 </div>
+
+### Form validation
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="dark">
+  <select class="form-select is-valid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color" data-bs-theme="dark">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="dark"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="dark" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark" checked></div>
+  <div class="input-group quantity-selector" data-bs-theme="dark"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100" data-bs-theme="dark"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="light">
+  <select class="form-select is-valid"><option selected disabled value="" data-bs-theme="light">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color" data-bs-theme="light">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="light"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""  data-bs-theme="light" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light" checked></div>
+  <div class="input-group quantity-selector" data-bs-theme="light"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid" data-bs-theme="light"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+</div>