Add button and drag to swap colors

src/lib/components/colors/Header.svelte

@@ -4,6 +4,7 @@
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { switchColors } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
   interface Props {
@@ -20,6 +21,7 @@
   let editing = $state(false);
   let inputValue = $state('');
   let hasError = $state(false);
+  let isDragging = false;
 
   // When not editing, sync input value with color (e.g. when sliders change)
   $effect(() => {
@@ -80,6 +82,12 @@
         break;
     }
   };
+  const switchColorsT = () => {
+    switchColors();
+  };
+  const makeDropable = (event: DragEvent) => {
+    if (!isDragging) event.preventDefault();
+  };
 </script>
 
 <div
@@ -88,7 +96,16 @@
   data-column="tool"
   data-needs-changes={hasError}
 >
-  <div class="swatch {type}"></div>
+  <div
+    role="complementary"
+    class="swatch {type}"
+    draggable="true"
+    ondrop={switchColorsT}
+    ondragenter={makeDropable}
+    ondragover={makeDropable}
+    ondragstart={() => (isDragging = true)}
+    ondragend={() => (isDragging = false)}
+  ></div>
   <label for="{type}-color" data-label>
     {displayType} Color
   </label>

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

@@ -4,6 +4,8 @@
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   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} />
-
+  <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/lib/stores.ts

@@ -10,7 +10,7 @@ import {
   REC_2020,
   sRGB,
 } from 'colorjs.io/fn';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved
 import { browser, dev } from '$app/environment';
@@ -57,6 +57,12 @@ export const reset = () => {
   fg.set(INITIAL_FG);
 };
 
+export const switchColors = () => {
+  const temp = get(bg);
+  bg.set(get(fg));
+  fg.set(temp);
+};
+
 /* c8 ignore next 5 */
 if (browser && dev) {
   bg.subscribe(($bg) => (window.bg = $bg));

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