refactor(DatePicker, DateRangePicker): improve validation styles

Author: mrholek

scss/_date-picker.scss

@@ -48,12 +48,14 @@
   // scss-docs-end date-picker-css-vars
 
   &.is-invalid {
-    --#{$prefix}date-picker-border-color: #{$form-feedback-invalid-color} !important; // stylelint-disable-line declaration-no-important
+    --#{$prefix}date-picker-border-color: #{$date-picker-invalid-border-color} !important; // stylelint-disable-line declaration-no-important
+    --#{$prefix}date-picker-indicator-icon-color: #{$date-picker-indicator-invalid-icon-color} !important; // stylelint-disable-line declaration-no-important
     --#{$prefix}date-picker-indicator-icon: #{escape-svg($date-picker-indicator-invalid-icon)} !important; // stylelint-disable-line declaration-no-important
   }
 
   &.is-valid {
-    --#{$prefix}date-picker-border-color: #{$form-feedback-valid-color} !important; // stylelint-disable-line declaration-no-important
+    --#{$prefix}date-picker-border-color: #{$date-picker-valid-border-color} !important; // stylelint-disable-line declaration-no-important
+    --#{$prefix}date-picker-indicator-icon-color: #{$date-picker-indicator-valid-icon-color} !important; // stylelint-disable-line declaration-no-important
     --#{$prefix}date-picker-indicator-icon: #{escape-svg($date-picker-indicator-valid-icon)} !important; // stylelint-disable-line declaration-no-important
   }
 }
@@ -286,12 +288,3 @@
   --#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size-lg};
   --#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size-lg};
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .date-picker {
-      --#{$prefix}date-picker-indicator-invalid-icon: #{escape-svg($date-picker-indicator-invalid-icon-dark)};
-      --#{$prefix}date-picker-indicator-valid-icon: #{escape-svg($date-picker-indicator-valid-icon-dark)};
-    }
-  }
-}

scss/_variables-dark.scss

@@ -213,13 +213,6 @@ $button-outline-ghost-variants-dark: (
   "info":       btn-outline-color-map($info-dark)
 ) !default;
 
-//
-// Date Picker
-//
-
-$date-picker-indicator-invalid-icon-dark:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-invalid-color}'></rect></svg>") !default;
-$date-picker-indicator-valid-icon-dark:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-valid-color}'></rect></svg>") !default;
-
 //
 // Multi Select
 //

scss/_variables.scss

@@ -2281,6 +2281,9 @@ $date-picker-border-radius:            $border-radius !default;
 $date-picker-border-radius-sm:         $border-radius-sm !default;
 $date-picker-border-radius-lg:         $border-radius-lg !default;
 
+$date-picker-invalid-border-color:     var(--#{$prefix}form-invalid-border-color) !default;
+$date-picker-valid-border-color:       var(--#{$prefix}form-valid-border-color) !default;
+
 $date-picker-disabled-color:           $input-disabled-color !default;
 $date-picker-disabled-bg:              $input-disabled-bg !default;
 $date-picker-disabled-border-color:    $input-disabled-border-color !default;
@@ -2306,10 +2309,13 @@ $date-picker-cleaner-icon-size:         1rem !default;
 $date-picker-cleaner-icon-size-sm:      .875rem !default;
 $date-picker-cleaner-icon-size-lg:      1.25rem !default;
 
-$date-picker-indicator-icon-color:       var(--#{$prefix}tertiary-color) !default;
-$date-picker-indicator-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#000'></rect><rect width='32' height='32' x='200' y='224' fill='#000'></rect><rect width='32' height='32' x='280' y='224' fill='#000'></rect><rect width='32' height='32' x='368' y='224' fill='#000'></rect><rect width='32' height='32' x='112' y='296' fill='#000'></rect><rect width='32' height='32' x='200' y='296' fill='#000'></rect><rect width='32' height='32' x='280' y='296' fill='#000'></rect><rect width='32' height='32' x='368' y='296' fill='#000'></rect><rect width='32' height='32' x='112' y='368' fill='#000'></rect><rect width='32' height='32' x='200' y='368' fill='#000'></rect><rect width='32' height='32' x='280' y='368' fill='#000'></rect><rect width='32' height='32' x='368' y='368' fill='#000'></rect></svg>") !default;
-$date-picker-indicator-invalid-icon:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-invalid-color}'></rect></svg>") !default;
-$date-picker-indicator-valid-icon:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-valid-color}'></rect></svg>") !default;
+$date-picker-indicator-icon-color:          var(--#{$prefix}tertiary-color) !default;
+$date-picker-indicator-icon:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#000'></rect><rect width='32' height='32' x='200' y='224' fill='#000'></rect><rect width='32' height='32' x='280' y='224' fill='#000'></rect><rect width='32' height='32' x='368' y='224' fill='#000'></rect><rect width='32' height='32' x='112' y='296' fill='#000'></rect><rect width='32' height='32' x='200' y='296' fill='#000'></rect><rect width='32' height='32' x='280' y='296' fill='#000'></rect><rect width='32' height='32' x='368' y='296' fill='#000'></rect><rect width='32' height='32' x='112' y='368' fill='#000'></rect><rect width='32' height='32' x='200' y='368' fill='#000'></rect><rect width='32' height='32' x='280' y='368' fill='#000'></rect><rect width='32' height='32' x='368' y='368' fill='#000'></rect></svg>") !default;
+$date-picker-indicator-invalid-icon:        $date-picker-indicator-icon !default;
+$date-picker-indicator-invalid-icon-color:  var(--#{$prefix}form-invalid-color) !default;
+$date-picker-indicator-valid-icon:          $date-picker-indicator-icon !default;
+$date-picker-indicator-valid-icon-color:    var(--#{$prefix}form-valid-color) !default;
+
 $date-picker-indicator-icon-size:        1rem !default;
 $date-picker-indicator-icon-size-sm:     .875rem !default;
 $date-picker-indicator-icon-size-lg:     1.25rem !default;