From a8efd9f3e340cbcb1bf6a7e9808d4c7d8b5e0166 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Thu, 24 Aug 2023 11:13:37 +0200
Subject: [PATCH] Add validation icon

---
 scss/_root.scss           |  4 ++++
 scss/_variables-dark.scss |  5 +++++
 scss/_variables.scss      | 12 ++++++------
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index ab720a38e4..566c8b45a9 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -123,8 +123,10 @@
   // scss-docs-start root-form-validation-variables
   --#{$prefix}form-valid-color: #{$form-valid-color};
   --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
   --#{$prefix}form-invalid-color: #{$form-invalid-color};
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
   // scss-docs-end root-form-validation-variables
 }
 
@@ -177,8 +179,10 @@
 
     --#{$prefix}form-valid-color: #{$form-valid-color-dark};
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
     --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 79f29a3058..3651acfc5f 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -72,6 +72,11 @@ $form-invalid-color-dark:           $red-300 !default;
 $form-invalid-border-color-dark:    $red-300 !default;
 // scss-docs-end form-validation-colors-dark
 
+$form-feedback-icon-valid-color-dark:   $form-valid-color-dark !default;
+$form-feedback-icon-valid-dark:         escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color-dark}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>")) !default;
+$form-feedback-icon-invalid-color-dark: $form-invalid-color-dark !default;
+$form-feedback-icon-invalid-dark:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color-dark}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color-dark}' stroke='none'/></svg>")) !default;
+
 
 //
 // Accordion
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7706c0f6a5..e170c3c632 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1088,10 +1088,10 @@ $form-feedback-font-style:          $form-text-font-style !default;
 $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+$form-feedback-icon-valid-color:        $form-feedback-valid-color !default;
+$form-feedback-icon-valid:              escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>")) !default;
+$form-feedback-icon-invalid-color:      $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:            escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>")) !default;
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
@@ -1105,7 +1105,7 @@ $form-invalid-border-color:         $form-feedback-invalid-color !default;
 $form-validation-states: (
   "valid": (
     "color": var(--#{$prefix}form-valid-color),
-    "icon": $form-feedback-icon-valid,
+    "icon": var(--#{$prefix}form-valid-icon),
     "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),
@@ -1113,7 +1113,7 @@ $form-validation-states: (
   ),
   "invalid": (
     "color": var(--#{$prefix}form-invalid-color),
-    "icon": $form-feedback-icon-invalid,
+    "icon": var(--#{$prefix}form-invalid-icon),
     "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),