feat: implement switches, adjust colours

docs/src/usage/inputs.html

@@ -81,4 +81,12 @@ <h2>Inputs</h2>
     <span class="checkmark"></span>
   </label>
   <code></code>
+
+  Switch
+  <label class="switch">
+    Label
+    <input type="checkbox" />
+    <span class="slider"></span>
+  </label>
+  <code></code>
 </div>

src/components/checkboxes.css

@@ -3,6 +3,7 @@
   position: relative;
   padding-left: calc(var(--size-relative-5) + var(--size-relative-3));
   cursor: pointer;
+  min-height: var(--size-relative-5);
 
   &:hover input:not(:checked) ~ .checkmark {
     background: var(--surface-2);

src/components/radios.css

@@ -3,6 +3,7 @@
   position: relative;
   padding-left: calc(var(--size-relative-5) + var(--size-relative-3));
   cursor: pointer;
+  min-height: var(--size-relative-5);
 
   &:hover input:not(:checked) ~ .checkmark {
     background: var(--surface-2);

src/components/switches.css

@@ -0,0 +1,80 @@
+.switch {
+  --switch-width: var(--size-relative-8);
+  --toggle-size: var(--size-relative-4);
+
+  display: inline-block;
+  position: relative;
+  padding-left: calc(var(--switch-width) + var(--size-relative-3));
+  cursor: pointer;
+  min-height: var(--size-relative-5);
+
+  &:hover input:not(:checked) ~ .slider {
+    background: var(--surface-2);
+  }
+
+  & input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+
+    &:checked ~ .slider {
+      background: linear-gradient(
+        var(--gradient-angle),
+        var(--brand-1),
+        var(--brand-2)
+      );
+
+      &:after {
+        left: calc(
+          var(--switch-width) - var(--size-relative-1) - var(--toggle-size)
+        );
+      }
+    }
+
+    &:disabled ~ .slider {
+      cursor: not-allowed;
+      background: var(--surface-1);
+      border: var(--border-size-1) solid var(--surface-4);
+      color: var(--text-3);
+    }
+
+    &:checked:disabled ~ .slider {
+      background: linear-gradient(
+        var(--gradient-angle),
+        var(--brand-1),
+        var(--brand-2)
+      );
+
+      &:after {
+        border-color: var(--gray-3);
+      }
+    }
+  }
+
+  & .slider {
+    position: absolute;
+    inset: 0;
+    height: var(--size-relative-6);
+    width: var(--switch-width);
+    background: var(--surface-0);
+    border-radius: var(--radius-round);
+    transition: background 300ms ease-in-out;
+    box-shadow: 0 0 1px 1px
+      color-mix(in srgb, var(--surface-0) 80%, var(--surface-contrast));
+
+    &:after {
+      content: "";
+      width: var(--toggle-size);
+      aspect-ratio: 1;
+      position: absolute;
+      left: var(--size-relative-1);
+      top: 50%;
+      translate: 0 -50%;
+      transition: left 0.3s ease-in-out;
+      background: var(--surface-contrast);
+      display: block;
+      border-radius: var(--radius-round);
+    }
+  }
+}

src/main.css

@@ -21,6 +21,7 @@
 @import "components/selects.css";
 @import "components/checkboxes.css";
 @import "components/radios.css";
+@import "components/switches.css";
 @import "components/textareas.css";
 
 @import "components/tabs.css";

src/props/theme-extended.css

@@ -1,13 +1,13 @@
 html {
   --text-color: oklch(0.11 0.071 269);
-  --surface-0: oklch(0.98 0.01 269);
-  --surface-1: oklch(0.94 0.015 269);
-  --surface-2: oklch(0.9 0.021 269);
-  --surface-3: oklch(0.87 0.025 269);
-  --surface-4: oklch(0.83 0.03 269);
+  --surface-0: oklch(1 0 0);
+  --surface-1: oklch(0.965 0.01 269);
+  --surface-2: oklch(0.935 0.015 269);
+  --surface-3: oklch(0.89 0.025 269);
+  --surface-4: oklch(0.84 0.03 269);
   --surface-contrast: oklch(0.19 0.073 269);
   --text-3: oklch(0.64 0.035 269); /* same for light and dark */
-  --text-contrast: oklch(0.98 0.01 269);
+  --text-contrast: oklch(1 0 0);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,7 +18,7 @@ html {
     --surface-2: oklch(0.26 0.085 269);
     --surface-3: oklch(0.34 0.09 269);
     --surface-4: oklch(0.41 0.095 269);
-    --surface-contrast: oklch(0.96 0.01 269);
+    --surface-contrast: oklch(0.965 0.01 269);
     --text-contrast: oklch(0.11 0.071 269);
   }
 }

src/props/variable-sizes.css

@@ -6,4 +6,7 @@ html {
   --size-relative-5: 1.5em;
   --size-relative-6: 1.75em;
   --size-relative-7: 2em;
+  --size-relative-8: 3em;
+  --size-relative-9: 4em;
+  --size-relative-10: 5em;
 }