Merge pull request #17492 from craftcms/feature/cms-17474-lightswitch-contrast

Lightswitch tweaks

Author: brandonkelly

CHANGELOG-WIP.md

@@ -24,6 +24,7 @@
 
 ### Accessibility
 - The Crop tool within the Image Editor is now screen reader and keyboard accessible. ([#17358](https://github.com/craftcms/cms/pull/17358))
+- Lightswitches now have a checkmark icon when turned on, and improved styling. ([#17492](https://github.com/craftcms/cms/pull/17492)) 
 
 ### Administration
 - Added the “Content Block” field type. ([#17424](https://github.com/craftcms/cms/pull/17424))

src/templates/tests/forms.twig

@@ -85,29 +85,90 @@
         ]
     }) }}
 
+    <hr/>
+    <div>
+        <h2 id="lightswitches">Lightswitches</h2>
+        {{ forms.lightswitchField({
+            label: 'Default'|t('app'),
+            on: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Small'|t('app'),
+            small: true,
+            on: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Default'|t('app'),
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Small'|t('app'),
+            small: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Disabled'|t('app'),
+            disabled: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Indeterminate'|t('app'),
+            indeterminate: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'Indeterminate (small)'|t('app'),
+            indeterminate: true,
+            small: true,
+        }) }}
+
+        {{ forms.lightswitchField({
+            label: 'With Labels'|t('app'),
+            on: true,
+            onLabel: 'On',
+            offLabel: 'Off'
+        }) }}
+
+        <div class="pane">
+            {{ forms.lightswitchField({
+                label: 'With Background'|t('app'),
+                on: true,
+            }) }}
+            {{ forms.lightswitchField({
+                label: 'With Background'|t('app'),
+                on: false,
+            }) }}
+            {{ forms.lightswitchField({
+                label: 'Disabled'|t('app'),
+                disabled: true,
+            }) }}
+        </div>
+    <hr/>
 {% endblock %}
 
 {% js %}
 var $content = $('#content');
 
 $content.append(Craft.ui.createCheckboxSelectField({
-    label: 'Checkbox select with “All” option (JS)',
-    options: [
-        { value: 'one', label: 'One' },
-        { value: 'two', label: 'Two' },
-        { value: 'three', label: 'Three' },
-    ],
-    showAllOption: true,
+  label: 'Checkbox select with “All” option (JS)',
+  options: [
+    {value: 'one', label: 'One'},
+    {value: 'two', label: 'Two'},
+    {value: 'three', label: 'Three'},
+  ],
+  showAllOption: true,
 }));
 
 $content.append(Craft.ui.createCheckboxSelectField({
-    label: 'Checkbox select without “All” option (JS)',
-    options: [
-        { value: 'one', label: 'One' },
-        { value: 'two', label: 'Two' },
-        { value: 'three', label: 'Three' },
-    ],
-    showAllOption: false,
+  label: 'Checkbox select without “All” option (JS)',
+  options: [
+    {value: 'one', label: 'One'},
+    {value: 'two', label: 'Two'},
+    {value: 'three', label: 'Three'},
+  ],
+  showAllOption: false,
 }));
 {% endjs %}
 

src/web/assets/cp/dist/css/cp.css

@@ -1,5 +1,4 @@
 @charset "UTF-8";
-@charset "UTF-8";
 @use 'sass:color';
 @use 'variables';
 @use '@craftcms/sass/mixins';
@@ -2824,29 +2823,55 @@ div.btn.submit input {
 }
 
 .lightswitch {
+  // Ensures contrast with pane background is over 3:1
+  --_lightswitch-border-color: var(
+    --lightswitch-border-color,
+    hsl(from var(--input-border-color) h s l / 80%)
+  );
   display: block;
   position: relative;
   border: none !important;
   overflow: hidden;
   cursor: pointer;
   user-select: none;
-  background-image: linear-gradient(to right, var(--gray-400), var(--gray-400));
+  background-image: linear-gradient(to right, var(--gray-200), var(--gray-200));
   transition: background-image linear 100ms;
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); // Ensures contrast with pane background is over 3:1
+  box-shadow: inset 0 0 0 1px var(--_lightswitch-border-color);
+
+  &[disabled] {
+    --_lightswitch-border-color: var(
+      --lightswitch-border-color-disabled,
+      hsl(from var(--input-border-color) h s l / 30%)
+    );
+  }
 
   &.on {
+    --_lightswitch-border-color: oklch(
+      from var(--bg-enabled) calc(l - 0.1) c h
+    );
     background-image: linear-gradient(
       to right,
       var(--bg-enabled),
       var(--bg-enabled)
     );
+
+    .lightswitch-container .handle::before {
+      background-color: var(--enabled-color);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E%0A");
+      mask-repeat: no-repeat;
+    }
+
+    // Makes small icon a little darker to compensate for the size
+    &.small .lightswitch-container .handle::before {
+      background-color: hsl(from var(--enabled-color) h s calc(l - 20));
+    }
   }
 
   &.indeterminate {
     background-image: linear-gradient(
       to right,
-      var(--bg-enabled),
-      var(--gray-300)
+      var(--bg-enabled) 40%,
+      var(--gray-200) 60%
     );
   }
 
@@ -2858,7 +2883,17 @@ div.btn.submit input {
       position: absolute;
       inset-block-start: 2px;
       background-color: var(--white);
-      box-shadow: 0 0 0 1px rgb(0 0 0 / 10%); // Ensures contrast with pane background is over 3:1
+      box-shadow: inset 0 0 0 1px var(--_lightswitch-border-color);
+    }
+
+    .handle::before {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 54%;
+      transform: translateX(-50%) translateY(-50%);
+      width: 12px;
+      height: 12px;
     }
   }
 
@@ -2896,6 +2931,11 @@ div.btn.submit input {
         height: 14px;
         inset-inline-start: calc(50% - 7px);
       }
+
+      .handle::before {
+        width: 8px;
+        height: 8px;
+      }
     }
   }