Start styling switch button

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
+>

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>

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 {

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>

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;
   }
 }