From daf481627f2e7a8ecde31c6fe633c09e2a6868c4 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 22 Aug 2023 12:14:56 +0200
Subject: [PATCH] Proposal for form validation

---
 scss/forms/_form-check.scss   |  4 ++--
 scss/forms/_form-control.scss |  6 +++---
 scss/forms/_form-select.scss  |  8 ++++----
 scss/mixins/_forms.scss       | 31 ++++++++++---------------------
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index eec99c58cc..45922fddd9 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -35,11 +35,11 @@
   &:focus {
     border-color: $form-check-input-focus-border;
     outline: 0;
-    box-shadow: $form-check-input-focus-box-shadow;
+    box-shadow: var(--#{$prefix}form-check-focus-box-shadow, $form-check-input-focus-box-shadow);
   }
 
   &:checked {
-    background-color: $form-check-input-checked-bg-color;
+    background-color: var(--#{$prefix}form-check-checked-bg-color, $form-check-input-checked-bg-color);
     @if $enable-gradients {
       background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
     } @else {
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 0ecef1057d..307e31aa60 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -21,7 +21,7 @@
   appearance: none; // Fix appearance for date inputs in Safari
   background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -41,7 +41,7 @@
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
+    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -165,7 +165,7 @@
 }
 
 .form-control-color {
-  width: $form-color-width;
+  width: var(--#{$prefix}form-color-width, $form-color-width);
   padding: var(--#{$prefix}form-control-padding-y);
 
   &:not(:disabled):not([readonly]) {
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 69ace529d7..df6514ec74 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -20,19 +20,19 @@
   background-repeat: no-repeat;
   background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
+  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
 
   &:focus {
-    border-color: $form-select-focus-border-color;
+    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+      @include box-shadow($form-select-box-shadow, var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow));
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $form-select-focus-box-shadow;
+      box-shadow: var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow);
     }
   }
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index d47b1e41d6..4c38f7180f 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -57,7 +57,9 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}input-border-color: #{$border-color};
+      --#{$prefix}input-focus-border-color: #{$border-color};
+      --#{$prefix}input-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -66,11 +68,6 @@
         background-position: right $input-height-inner-quarter center;
         background-size: $input-height-inner-half $input-height-inner-half;
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
@@ -86,7 +83,9 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}form-select-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
@@ -97,34 +96,24 @@
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
   .form-control-color {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
+        --#{$prefix}form-color-width: #{add($form-color-width, $input-height-inner)};
       }
     }
   }
 
   .form-check-input {
     @include form-validation-state-selector($state) {
+      --#{$prefix}form-check-focus-box-shadow: #{$focus-box-shadow};
+      --#{$prefix}form-check-checked-bg-color: #{$color};
+
       border-color: $border-color;
 
-      &:checked {
-        background-color: $color;
-      }
-
-      &:focus {
-        box-shadow: $focus-box-shadow;
-      }
-
       ~ .form-check-label {
         color: $color;
       }