Styles: add switch

lib/Styles/Granite/_card.scss

@@ -4,7 +4,7 @@ paper,
     box-shadow:
         highlight(),
         // Intentionally not in ems since it's used as a stroke
-        0 0 0 1px $border-color,
+        0 0 0 1px scale-color($border-color, $alpha: -50%),
         shadow(1);
 
     &.rounded {

lib/Styles/Gtk/Index.scss

@@ -3,6 +3,7 @@
 @import 'Image.scss';
 @import 'ShortcutsWindow.scss';
 @import 'Spinner.scss';
+@import 'Switch.scss';
 @import 'Tooltip.scss';
 @import 'WindowControls.scss';
 @import 'Window.scss';

lib/Styles/Gtk/Switch.scss

@@ -0,0 +1,58 @@
+switch {
+    background-color: scale-color($toplevel-border-color, $alpha: -50%); // FIXME: abstract as trough color?
+    border-radius: 99px;
+
+    &:checked:not(.mode-switch):not(:backdrop) {
+        background: $BLUEBERRY_500; // FIXME: accent color
+    }
+
+    &:disabled {
+        background-color: scale-color($toplevel-border-color, $alpha: -60%); // FIXME: abstract as trough color?
+    }
+
+    image {
+        color: transparent;
+    }
+
+    slider {
+        border-radius: 99px;
+        background-color: bg-color(0);
+        background-image:
+            linear-gradient(
+                to bottom,
+                scale-color($highlight_color, $alpha: -80%),
+                rgba(white, 0)
+            );
+        box-shadow:
+            highlight(),
+            0 0 0 1px $border-color,
+            shadow(2);
+
+        &:backdrop {
+            background-image: none;
+            box-shadow:
+                highlight(),
+                0 0 0 1px $border-color,
+                shadow(1);
+        }
+
+        &:disabled {
+            background-color: bg-color(3);
+            background-image: none;
+            box-shadow:
+                0 0 0 1px $border-color,
+                shadow(1);
+        }
+
+        :focus & {
+            box-shadow:
+                highlight(),
+                0 0 0 1px $BLUEBERRY_500, // FIXME: accent color
+                shadow(2);
+            outline-color: rgba($BLUEBERRY_500, 0.3); // FIXME: accent color
+            // Off-by-one to account for padding-box clip
+            outline-width: rem(3px);
+            outline-style: solid;
+        }
+    }
+}

lib/Styles/Index-dark.scss

@@ -28,7 +28,7 @@ $toplevel-border-color: rgba(black, 0.75);
 }
 
 // Outset box shadow or border color on inputs like buttons, entries, checkboxes
-$border-color: rgba(black, 0.1);
+$border-color: rgba(black, 0.2);
 
 // Text, images, and other foreground elements
 $fg-color: white;

lib/Styles/Index.scss

@@ -28,7 +28,7 @@ $toplevel-border-color: rgba(black, 0.2);
 }
 
 // Outset box shadow or border color on inputs like buttons, entries, checkboxes
-$border-color: rgba(black, 0.05);
+$border-color: rgba(black, 0.1);
 
 // Text, images, and other foreground elements
 $fg-color: $BLACK_500;