Dark mode: Switches (#2285)

Orange-OpenSource · Nov 27, 2023 · a4c269f · a4c269f
1 parent 3d55490
commit a4c269f
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 11 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -145,6 +145,7 @@
   --#{$prefix}disabled-filter: #{$disabled-filter};
   --#{$prefix}placeholder-color: #{$gray-700};
   --#{$prefix}gray-tweak: #{$gray-900};
+  --#{$prefix}black-tweak: #{$black};
   --#{$prefix}input-filter: #{$invert-filter};
   --#{$prefix}icon-filter: none;
   // ******* End additions for dark-mode
@@ -224,6 +225,7 @@
     --#{$prefix}disabled-filter: #{$disabled-filter-dark};
     --#{$prefix}placeholder-color: #{$gray-600};
     --#{$prefix}gray-tweak: #{$gray-700};
+    --#{$prefix}black-tweak: #{$gray-950};
     --#{$prefix}input-filter: none;
     --#{$prefix}icon-filter: #{$invert-filter};
     // ******* End additions for dark-mode

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1242,6 +1242,13 @@ $form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // Boosted
 $form-switch-border-radius:       null !default; // Boosted mod
 $form-switch-transition:          background-position .15s ease-in-out, $transition-focus !default; // Boosted mod
 
+$form-switch-square-bg:             var(--#{$prefix}black-tweak) !default; // Boosted mod
+$form-switch-bg:                    $white !default; // Boosted mod
+$form-switch-border-color:          $white !default; // Boosted mod
+$form-switch-filter:                var(--#{$prefix}input-filter) !default; // Boosted mod
+$form-switch-focus-visible-inner:   $black !default; // Boosted mod
+$form-switch-focus-visible-outer:   $white !default; // Boosted mod
+
 // Boosted mod: no $form-switch-focus-color
 // Boosted mod: no $form-switch-focus-bg-image
 
@@ -1250,6 +1257,13 @@ $form-switch-checked-bg-image:    $form-check-input-checked-bg-image !default; /
 $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod
+
+$form-switch-checked-square-bg:     var(--#{$prefix}body-bg) !default; // Boosted mod
+$form-switch-checked-bg:            $primary !default; // Boosted mod
+$form-switch-checked-border-color:  $primary !default; // Boosted mod
+$form-switch-checked-filter:        none !default; // Boosted mod
+$form-switch-checked-focus-inner:   var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod
+$form-switch-checked-focus-outer:   var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -154,7 +154,7 @@
 
 .form-switch {
   // Boosted mod
-  --#{$prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};
+  --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-square-bg $form-switch-bg-square-size, transparent)};
 
   min-height: $form-switch-width * .5;
   padding-left: $form-switch-padding-start;
@@ -166,29 +166,29 @@
     width: $form-switch-width;
     height: $form-switch-width * .5;
     margin-left: $form-switch-padding-start * -1;
-    background-color: $white; // Boosted mod
+    background-color: $form-switch-bg; // Boosted mod
     background-image: var(--#{$prefix}form-switch-bg), var(--#{$prefix}switch-gradient); // Boosted mod: extra param `var(--#{$prefix}switch-gradient)`
-    filter: $invert-filter; // Boosted mod
+    filter: $form-switch-filter; // Boosted mod
     background-position: $form-switch-bg-position, 0 0;
     background-size: $form-switch-bg-size, $form-switch-bg-square-size 100%; // Get a 1px separation
-    border-color: $white; // Boosted mod
+    border-color: $form-switch-border-color; // Boosted mod
     @include border-radius($form-switch-border-radius, 0);
     @include transition($form-switch-transition);
 
     &:focus {
       &[data-focus-visible-added] {
-        @include focus-visible($color: var(--#{$prefix}focus-visible-inner-color), $box-color: var(--#{$prefix}focus-visible-outer-color));
+        @include focus-visible($color: $form-switch-focus-visible-outer, $box-color: $form-switch-focus-visible-inner);
       }
     }
 
     &:checked {
-      background-color: $primary;
-      filter: none; // Boosted mod
-      border-color: $primary;
+      background-color: $form-switch-checked-bg;
+      filter: $form-switch-checked-filter; // Boosted mod
+      border-color: $form-switch-checked-border-color;
 
       &:focus {
         &[data-focus-visible-added] {
-          @include focus-visible($color: var(--#{$prefix}focus-visible-outer-color), $box-color: var(--#{$prefix}focus-visible-inner-color));
+          @include focus-visible($color: $form-switch-checked-focus-outer, $box-color: $form-switch-checked-focus-inner);
         }
       }
 
@@ -203,7 +203,7 @@
       }
 
       &:not(:disabled) {
-        --#{$prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
+        --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-checked-square-bg $form-switch-bg-square-size, transparent)};
       }
     }
 
@@ -215,7 +215,7 @@
 
     &:disabled {
       background-color: $form-check-input-disabled-color;
-      filter: $invert-filter;
+      filter: $form-check-input-disabled-filter;
       border-color: $form-check-input-disabled-color;
     }
   }

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -121,6 +121,11 @@ sitemap_exclude: true
     <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-black-tweak</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="dark"></div>
+  </div>
 </div>
 
 ## Components
@@ -2859,3 +2864,90 @@ sitemap_exclude: true
     <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset></form>
 </div>
+
+### Switches
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex border border-tertiary p-3">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>