Fixes $form-control-select-arrow-image value

Author: fredtitao

src/scss/colors/schemes/dark/_variables.scss

@@ -41,4 +41,6 @@ $component-backdrop-background-color-dark: hsla(180, 1%, 25%, 0.9) !default;
 $label-background-color-dark: $gray-500 !default;
 
 // Forms
-$form-control-select-arrow-image-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text-muted-dark}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>');
+$form-control-select-arrow-image-fill-dark: 'rgba(' + red($text-muted-dark) + ', ' + green($text-muted-dark) + ', ' + blue($text-muted-dark) +
+  ', ' + alpha($text-muted-dark) + ')';
+$form-control-select-arrow-image-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$form-control-select-arrow-image-fill-dark}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>');

src/scss/colors/schemes/light/_variables.scss

@@ -39,4 +39,6 @@ $component-box-shadow-color-active: rgba($black, 0.25) !default;
 $component-outline-color: rgba($black, 0.1) !default;
 
 // Forms
-$form-control-select-arrow-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text-muted}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>');
+$form-control-select-arrow-image-fill: 'rgba(' + red($text-muted) + ', ' + green($text-muted) + ', ' + blue($text-muted) + ', ' +
+  alpha($text-muted) + ')';
+$form-control-select-arrow-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$form-control-select-arrow-image-fill}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>');

src/scss/forms/_variables.scss

@@ -31,9 +31,11 @@ $form-switch-active-color-hover: var(--component-background-color-hover, #{$comp
 $form-switch-size: $font-size-base * 1.125 !default;
 $form-switch-inner-padding: 2px !default;
 
+$form-control-select-arrow-image-fill: 'rgba(' + red($text-muted) + ', ' + green($text-muted) + ', ' + blue($text-muted) + ', ' +
+  alpha($text-muted) + ')' !default;
 $form-control-select-arrow-image: var(
   --form-control-select-arrow-image,
-  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$form-control-color-muted}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>')
-);
+  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$form-control-select-arrow-image-fill}" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>')
+) !default;
 
 @import 'controls/slider/variables';