From b66aa35570d58e1192ed78d5eeae10a2aae01259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 21 Mar 2024 22:44:13 -0700
Subject: [PATCH] Styles: add switch

---
 lib/Styles/Granite/_card.scss |  2 +-
 lib/Styles/Gtk/Index.scss     |  1 +
 lib/Styles/Gtk/Switch.scss    | 58 +++++++++++++++++++++++++++++++++++
 lib/Styles/Index-dark.scss    |  2 +-
 lib/Styles/Index.scss         |  2 +-
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 lib/Styles/Gtk/Switch.scss

diff --git a/lib/Styles/Granite/_card.scss b/lib/Styles/Granite/_card.scss
index 67826d50e..4ede4feb7 100644
--- a/lib/Styles/Granite/_card.scss
+++ b/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 {
diff --git a/lib/Styles/Gtk/Index.scss b/lib/Styles/Gtk/Index.scss
index d591b7de3..6f1b6aa33 100644
--- a/lib/Styles/Gtk/Index.scss
+++ b/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';
diff --git a/lib/Styles/Gtk/Switch.scss b/lib/Styles/Gtk/Switch.scss
new file mode 100644
index 000000000..9c7e0dd33
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss
index 9cbe6fe73..00949e64c 100644
--- a/lib/Styles/Index-dark.scss
+++ b/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;
diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss
index a421a0ad5..0c8e27e64 100644
--- a/lib/Styles/Index.scss
+++ b/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;