Make a disabled off switch look different from an enabled one (#3073)

.changeset/form-switch-disabled.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/docs": patch
+---
+
+Fixed a disabled off `.form-switch` looking the same as an enabled one by filling its track and darkening the knob.

core/scss/_variables-dark.scss

@@ -73,8 +73,6 @@ $mark-bg-dark: mix-color-css(var(--black), var(--yellow), 60%) !default;
 $form-select-indicator-color-dark: $body-color-dark !default;
 $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
-$form-switch-color-dark: color-transparent(var(--white), 0.25) !default;
-
 // Form validation colors dark
 $form-valid-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;
 $form-valid-border-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;

core/scss/_variables.scss

@@ -2028,7 +2028,7 @@ $form-select-font-size-lg: $input-font-size-lg !default;
 $form-select-border-radius-lg: $input-border-radius-lg !default;
 $form-select-transition: $input-transition !default;
 
-$form-switch-color: var(--gray-200) !default;
+$form-switch-color: light-dark(var(--gray-200), #{color-transparent(var(--white), 0.25)}) !default;
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
 $form-switch-padding-start: $form-switch-width + 0.5rem !default;
@@ -2039,6 +2039,8 @@ $form-switch-transition:
 $form-switch-knob-transition: inset-inline-start 0.15s ease-in-out !default;
 $form-switch-focus-color: mix-color-css(var(--white), var(--primary), 50%) !default;
 $form-switch-checked-color: var(--white) !default;
+$form-switch-disabled-bg: $input-disabled-bg !default;
+$form-switch-disabled-color: light-dark(var(--gray-400), var(--gray-600)) !default;
 
 // Form range
 $form-range-track-width: 100% !default;

core/scss/bootstrap/forms/_form-check.scss

@@ -199,11 +199,3 @@
     }
   }
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --form-switch-color: #{$form-switch-color-dark};
-    }
-  }
-}

core/scss/ui/forms/_form-check.scss

@@ -70,6 +70,13 @@ Form switch
     height: $form-switch-height;
     margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
     @include transition(background-color $transition-time, background-position $transition-time);
+
+    // An off switch that is disabled fills its track like a disabled input,
+    // so it no longer looks like an off switch that can still be toggled.
+    &:disabled:not(:checked) {
+      --form-switch-color: #{$form-switch-disabled-color};
+      background-color: $form-switch-disabled-bg;
+    }
   }
 }
 

docs/content/ui/forms/elements.mdx

@@ -206,6 +206,17 @@ Use toggle switches for the elements of your form which require choosing between
     <span class="form-check-label">Option 3</span>
   </label>
 </div>
+<div class="mb-3">
+  <div class="form-label">Disabled switches</div>
+  <label class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" checked disabled />
+    <span class="form-check-label">Disabled on</span>
+  </label>
+  <label class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" disabled />
+    <span class="form-check-label">Disabled off</span>
+  </label>
+</div>
 <div class="mb-3">
   <div class="form-label">Single switch</div>
   <label class="form-check form-switch">