From 6b88aa548ae0525ee682c00daa9ea5af48ba985f Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 21:36:21 +0000
Subject: [PATCH] Start styling switch button

---
 src/lib/components/colors/SwitchButton.svelte |  9 +++++++++
 src/lib/components/colors/index.svelte        |  6 ++++--
 src/lib/components/util/Icon.svelte           |  2 ++
 src/lib/icons/Switch.svelte                   | 17 +++++++++++++++++
 src/sass/initial/_layout.scss                 |  4 ++--
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/colors/SwitchButton.svelte
 create mode 100755 src/lib/icons/Switch.svelte

diff --git a/src/lib/components/colors/SwitchButton.svelte b/src/lib/components/colors/SwitchButton.svelte
new file mode 100644
index 00000000..fd531ed4
--- /dev/null
+++ b/src/lib/components/colors/SwitchButton.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Icon from '$lib/components/util/Icon.svelte';
+  import { switchColors } from '$lib/stores';
+</script>
+
+<button type="button" onclick={switchColors} data-btn="icon">
+  <Icon name="switch" />
+  <span class="sr-only">Click to swap colors</span></button
+>
diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
index edefc17b..f952e194 100644
--- a/src/lib/components/colors/index.svelte
+++ b/src/lib/components/colors/index.svelte
@@ -3,7 +3,9 @@
   import Header from '$lib/components/colors/Header.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
-  import { bg, fg, format, switchColors } from '$lib/stores';
+  import { bg, fg, format } from '$lib/stores';
+
+  import SwitchButton from './SwitchButton.svelte';
 </script>
 
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
@@ -13,7 +15,7 @@
 <form data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />
   <Sliders type="bg" color={bg} format={$format} />
-  <button type="button" on:click={switchColors}>Switch colors</button>
+  <SwitchButton />
   <Header type="fg" color={fg} format={$format} />
   <Sliders type="fg" color={fg} format={$format} />
 </form>
diff --git a/src/lib/components/util/Icon.svelte b/src/lib/components/util/Icon.svelte
index 659ed6d5..9e43e609 100644
--- a/src/lib/components/util/Icon.svelte
+++ b/src/lib/components/util/Icon.svelte
@@ -12,6 +12,7 @@
   import OddBird from '$lib/icons/OddBird.svelte';
   import Twitter from '$lib/icons/Twitter.svelte';
   import Warning from '$lib/icons/Warning.svelte';
+  import Switch from '$src/lib/icons/Switch.svelte';
 
   const icons: Record<string, Component> = {
     check: Check,
@@ -25,6 +26,7 @@
     oddbird: OddBird,
     linkedin: LinkedIn,
     mastodon: Mastodon,
+    switch: Switch,
   };
 
   interface Props {
diff --git a/src/lib/icons/Switch.svelte b/src/lib/icons/Switch.svelte
new file mode 100755
index 00000000..dbfb9e12
--- /dev/null
+++ b/src/lib/icons/Switch.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  let props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  width="26"
+  height="26"
+  {...props}
+>
+  <path
+    id="switch"
+    data-name="switch"
+    d="M406.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224l-293.5 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288l293.5 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
+  />
+</svg>
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index c8517246..8efaccd4 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -81,8 +81,8 @@ body {
   @include config.above('sm-page-break') {
     display: grid;
     grid-template:
-      'bginput fginput' auto
-      'bgslide fgslide' auto / 1fr 1fr;
+      'bginput switch fginput' auto
+      'bgslide . fgslide' auto / 1fr min-content 1fr;
   }
 }