Add color mode on select

Orange-OpenSource · Oct 25, 2023 · 4d5485d · 4d5485d
1 parent 670f453
commit 4d5485d
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 6 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -147,6 +147,8 @@
   --#{$prefix}gray-tweak: #{$gray-900};
   --#{$prefix}input-filter: #{$invert-filter};
   --#{$prefix}icon-filter: none;
+  --#{$prefix}select-indicator: #{$form-select-indicator};
+  --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
   // ******* End additions for dark-mode
 }
 
@@ -226,6 +228,8 @@
     --#{$prefix}gray-tweak: #{$gray-700};
     --#{$prefix}input-filter: none;
     --#{$prefix}icon-filter: #{$invert-filter};
+    --#{$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
@@ -99,7 +99,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
@@ -1270,13 +1270,13 @@ $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-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:             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-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;

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
@@ -2301,3 +2301,90 @@ sitemap_exclude: true
     </ol>
   </nav>
 </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>