Add color theme on form-control

Orange-OpenSource · Oct 10, 2023 · 1286d56 · 1286d56
1 parent b3f09aa
commit 1286d56
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 4 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -144,6 +144,8 @@
   --#{$prefix}disabled-color: #{$gray-500};
   --#{$prefix}disabled-filter: #{$disabled-filter};
   --#{$prefix}placeholder-color: #{$gray-700};
+  --#{$prefix}gray-tweak: #{$gray-900};
+  --#{$prefix}input-filter: #{$invert-filter};
   // ******* End additions for dark-mode
 }
 
@@ -220,6 +222,8 @@
     --#{$prefix}disabled-color: #{$gray-700};
     --#{$prefix}disabled-filter: #{$disabled-filter-dark};
     --#{$prefix}placeholder-color: #{$gray-600};
+    --#{$prefix}gray-tweak: #{$gray-700};
+    --#{$prefix}input-filter: #{none};
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1166,7 +1166,8 @@ $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image:       var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color:         $gray-900 !default; // Boosted mod
+$form-check-input-disabled-color:         var(--#{$prefix}gray-tweak) !default; // Boosted mod
+$form-check-input-disabled-filter:        var(--#{$prefix}input-filter) !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
 $form-check-input-indeterminate-color:          $form-check-input-checked-color !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -113,9 +113,9 @@
 
     // Boosted mod
     &:checked,
-    &:indeterminate {
+    &[type="checkbox"]:indeterminate {
       background-color: $form-check-input-disabled-color;
-      filter: $invert-filter;
+      filter: $form-check-input-disabled-filter;
       border-color: $form-check-input-disabled-color;
     }
     // End mod
@@ -387,4 +387,4 @@
   // End mod
 }
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -106,6 +106,16 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="dark"></div>
   </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-gray-tweak</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-input-filter</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-input-filter)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-input-filter)" data-bs-theme="dark"></div>
+  </div>
 </div>
 
 ## Components
@@ -1016,6 +1026,83 @@ sitemap_exclude: true
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light" disabled>
 </div>
 
+### Checkboxes & Radios
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate0" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate1">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate2" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate3">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate4" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #282d55;">
+  <input class="form-check-input" type="checkbox" value="" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate5" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" checked disabled data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate6" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="radio" data-bs-theme="dark">
+  <input class="form-check-input" type="radio" checked data-bs-theme="dark">
+  <input class="form-check-input" type="radio" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="radio" checked disabled data-bs-theme="dark">
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #b5e8f7">
+  <input class="form-check-input" type="checkbox" value="" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate7" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" disabled data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" checked disabled data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate8" disabled data-bs-theme="light">
+  <input class="form-check-input" type="radio" data-bs-theme="light">
+  <input class="form-check-input" type="radio" checked data-bs-theme="light">
+  <input class="form-check-input" type="radio" disabled data-bs-theme="light">
+  <input class="form-check-input" type="radio" checked disabled data-bs-theme="light">
+</div>
+
 ### Controls
 
 <h4 class="mt-3">No theme</h4>