Dark mode: Form Validation (#2302)

Orange-OpenSource · Oct 30, 2023 · 88ae687 · 88ae687
1 parent 1ebcff3
commit 88ae687
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 5 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -198,6 +198,12 @@
       --#{$prefix}#{$color}-border-subtle: #{$value};
     }
 
+    // Boosted mod
+    @each $icon, $svg in $svg-as-custom-props-dark {
+      --#{$prefix}#{$icon}-icon: #{escape-svg($svg)};
+    }
+    // End mod
+
     --#{$prefix}heading-color: #{$headings-color-dark};
 
     --#{$prefix}link-color: #{$link-color-dark};

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -94,6 +94,16 @@ $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; // Boosted mod
+$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; // Boosted mod
+
+// Boosted mod
+$svg-as-custom-props-dark: (
+  "success": $success-icon-dark,
+  "error":   $danger-icon-dark
+) !default;
+// End mod
+
 //
 // Forms
 //
@@ -106,10 +116,10 @@ $form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xm
 // 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; // Boosted mod: instead of `$green-300`
+$form-valid-border-color-dark:      var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
+$form-invalid-color-dark:           var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
+$form-invalid-border-color-dark:    var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
 // scss-docs-end form-validation-colors-dark
 
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1366,6 +1366,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
@@ -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 {