Add color mode on form switch

Orange-OpenSource · Oct 12, 2023 · f26a5cc · f26a5cc
1 parent 0e9a3e1
commit f26a5cc
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 11 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1231,6 +1231,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:             $black !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
 
@@ -1239,6 +1246,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}highlight-color) !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
@@ -2111,3 +2111,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">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" 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">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" checked disabled>
+  </div>
+</div>