From 1286d56fcac75684fff8dd42acb9b0e8b4258b77 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 4 Oct 2023 10:41:36 +0200
Subject: [PATCH] Add color theme on form-control

---
 scss/_root.scss                    |  4 ++
 scss/_variables.scss               |  3 +-
 scss/forms/_form-check.scss        |  6 +--
 site/content/docs/5.3/dark-mode.md | 87 ++++++++++++++++++++++++++++++
 4 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 560de0834f..f7506fd87b 100644
--- 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
index 35c32a14f5..ad3a3f5d04 100644
--- 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
index bd3ce9acc2..e68035014b 100644
--- 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
index fbe0365b5c..dee8d368d8 100644
--- 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>