Add color mode on select

Orange-OpenSource · Oct 6, 2023 · f0d947a · f0d947a
1 parent 0001f3c
commit f0d947a
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 34 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -143,6 +143,8 @@
   --#{$prefix}active-bg: #{$gray-400};
   --#{$prefix}disabled-color: #{$gray-500};
   --#{$prefix}placeholder-color: #{$gray-700};
+  --#{$prefix}select-indicator: #{$form-select-indicator};
+  --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
   // ******* End additions for dark-mode
 }
 
@@ -218,6 +220,8 @@
     --#{$prefix}active-bg: #{$gray-700};
     --#{$prefix}disabled-color: #{$gray-700};
     --#{$prefix}placeholder-color: #{$gray-600};
+    --#{$prefix}select-indicator: #{$form-select-indicator-dark};
+    --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -97,7 +97,9 @@ $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 //
 
 // Boosted mod: no $form-select-indicator-color-dark
-// Boosted mod: no $form-select-indicator-dark
+
+$form-select-indicator-dark:          escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#fff' d='M7 7 0 0h14L7 7z'/></svg>")) !default;
+$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#999' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1230,47 +1230,47 @@ $input-group-addon-border-color:        null !default;
 // scss-docs-end input-group-variables
 
 // scss-docs-start form-select-variables
-$form-select-padding-y:             $input-padding-y !default;
-$form-select-padding-x:             $input-padding-x !default;
-$form-select-font-family:           $input-font-family !default;
-$form-select-font-size:             $input-font-size !default;
-$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
-$form-select-font-weight:           $input-font-weight !default;
-$form-select-line-height:           $input-line-height !default;
-$form-select-color:                 $input-color !default;
-$form-select-bg:                    $input-bg !default;
-$form-select-disabled-color:        $gray-700 !default;
-$form-select-disabled-bg:           $input-disabled-bg !default;
-$form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position:           right $form-select-padding-x top add(50%, 1px) !default;
-$form-select-bg-size:               .875rem 1rem !default; // In pixels because image dimensions
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7 0 0h14L7 7z'/></svg>") !default;
-$form-select-disabled-indicator:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$form-select-disabled-color}' d='M7 7 0 0h14L7 7z'/></svg>") !default; // Boosted mod
+$form-select-padding-y:                 $input-padding-y !default;
+$form-select-padding-x:                 $input-padding-x !default;
+$form-select-font-family:               $input-font-family !default;
+$form-select-font-size:                 $input-font-size !default;
+$form-select-indicator-padding:         $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight:               $input-font-weight !default;
+$form-select-line-height:               $input-line-height !default;
+$form-select-color:                     $input-color !default;
+$form-select-bg:                        $input-bg !default;
+$form-select-disabled-color:            $input-disabled-color !default; // Boosted mod: instead of `null`
+$form-select-disabled-bg:               $input-disabled-bg !default;
+$form-select-disabled-border-color:     $input-disabled-border-color !default;
+$form-select-bg-position:               right $form-select-padding-x top add(50%, 1px) !default;
+$form-select-bg-size:                   .875rem 1rem !default; // In pixels because image dimensions
+$form-select-indicator:                 escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7 0 0h14L7 7z'/></svg>")) !default;
+$form-select-disabled-indicator:        escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#666' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
 $form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
 $form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
 
-$form-select-border-width:        $input-border-width !default;
-$form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          none !default; // Boosted mod
+$form-select-border-width:              $input-border-width !default;
+$form-select-border-color:              $input-border-color !default;
+$form-select-border-radius:             $input-border-radius !default;
+$form-select-box-shadow:                none !default; // Boosted mod
 
-$form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
+$form-select-focus-border-color:        $input-color !default; // Boosted mod: for border to show in Firefox
 // Boosted mod: no $form-select-focus-width
-$form-select-focus-box-shadow:    none !default; // Boosted mod
+$form-select-focus-box-shadow:          none !default; // Boosted mod
 
-$form-select-padding-y-sm:        add($input-padding-y-sm, 1px) !default; // Boosted mod
-$form-select-padding-x-sm:        $input-padding-x-sm !default;
-$form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-border-radius-sm:    $input-border-radius-sm !default;
+$form-select-padding-y-sm:              add($input-padding-y-sm, 1px) !default; // Boosted mod
+$form-select-padding-x-sm:              $input-padding-x-sm !default;
+$form-select-font-size-sm:              $input-font-size-sm !default;
+$form-select-border-radius-sm:          $input-border-radius-sm !default;
 
-$form-select-padding-y-lg:        $spacer * .5 !default; // Boosted mod
-$form-select-padding-x-lg:        $input-padding-x-lg !default;
-$form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-border-radius-lg:    $input-border-radius-lg !default;
+$form-select-padding-y-lg:              $spacer * .5 !default; // Boosted mod
+$form-select-padding-x-lg:              $input-padding-x-lg !default;
+$form-select-font-size-lg:              $input-font-size-lg !default;
+$form-select-border-radius-lg:          $input-border-radius-lg !default;
 
-$form-select-transition:          $input-transition !default;
+$form-select-transition:                $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -4,7 +4,7 @@
 // https://primer.github.io/.
 
 .form-select {
-  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+  --#{$prefix}form-select-bg-img: var(--#{$prefix}select-indicator);
 
   display: block;
   width: 100%;
@@ -45,7 +45,7 @@
   &:disabled {
     color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
-    background-image: escape-svg($form-select-disabled-indicator); // Boosted mod
+    background-image: var(--#{$prefix}select-disabled-indicator); // Boosted mod
     border-color: $form-select-disabled-border-color;
   }
 

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -750,6 +750,93 @@ Additional variables for dark-mode (temporary)
   <input type="range" class="form-range" data-bs-theme="light">
 </div>
 
+### Select
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <select class="form-select" aria-label="Default select example" data-bs-theme="dark">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" data-bs-theme="dark" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <select class="form-select" aria-label="Default select example" data-bs-theme="light">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" data-bs-theme="light" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
 ### Star rating
 
 <h4 class="mt-3">No theme</h4>