let you grab colors

Author: KTibow

src/routes/theme/ColorCard.svelte

@@ -4,9 +4,12 @@
     MaterialDynamicColors,
     hexFromArgb,
   } from "@material/material-color-utilities";
+  import { createEventDispatcher } from "svelte";
   export let fg: string;
   export let bg: string;
   export let scheme: DynamicScheme;
+  export let grabbing: boolean;
+
   type Color =
     | "primary"
     | "onPrimary"
@@ -45,19 +48,59 @@
     | "surfaceContainerHigh"
     | "surfaceContainerHighest"
     | "surfaceTint";
+
+  let state = 0;
+  const dispatch = createEventDispatcher();
   $: bgColor = hexFromArgb(MaterialDynamicColors[bg as Color].getArgb(scheme));
   $: fgColor = hexFromArgb(MaterialDynamicColors[fg as Color].getArgb(scheme));
+  $: if (!grabbing) state = 0;
 </script>
 
-<div style="background-color: {bgColor}; color: {fgColor};">
+<div
+  class="card"
+  style="background-color: {bgColor}; color: {fgColor};"
+  role={grabbing ? "button" : undefined}
+  on:click={(e) => {
+    if (state) {
+      if (state == 2) {
+        navigator.clipboard.writeText(bgColor);
+      } else {
+        navigator.clipboard.writeText(fgColor);
+      }
+      dispatch("grabbed");
+    }
+  }}
+  on:mousemove={(e) => {
+    if (grabbing) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const y = Math.min(Math.max(e.clientY - rect.top, 0), rect.height) / rect.height;
+      state = y < 0.3 ? 1 : 2;
+    }
+  }}
+  on:mouseleave={() => {
+    state = 0;
+  }}
+>
   <p class="m3-font-headline-small">{bg}</p>
   <p class="m3-font-body-large">{fg} text</p>
+  {#if state}
+    <div class="overlay" style:background-color={state == 2 ? bgColor : fgColor} />
+  {/if}
 </div>
 
 <style>
-  div {
+  .card {
     padding: 1rem;
     white-space: pre-wrap;
+    position: relative;
+  }
+  .card[role="button"] {
+    cursor: pointer;
+  }
+  .overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
   }
   p {
     margin: 0;

src/routes/theme/SchemeShowcase.svelte

@@ -4,6 +4,7 @@
   import iconCopy from "@ktibow/iconset-material-symbols/content-copy-outline";
   import iconLight from "@ktibow/iconset-material-symbols/light-mode-outline";
   import iconDark from "@ktibow/iconset-material-symbols/dark-mode-outline";
+  import iconGrab from "@ktibow/iconset-material-symbols/unarchive-outline";
   import { onMount } from "svelte";
 
   import StyleFromScheme from "$lib/misc/StyleFromScheme.svelte";
@@ -14,6 +15,7 @@
   export let schemeLight: DynamicScheme;
   export let schemeDark: DynamicScheme;
   let showDark = false;
+  let grabbing = false;
 
   const copyUsage = () =>
     navigator.clipboard.writeText(
@@ -35,7 +37,13 @@
   <h2 class="m3-font-title-large">Your scheme 🎉</h2>
   <div class="color-container">
     {#each pairs as [bgName, fgName]}
-      <ColorCard scheme={showDark ? schemeDark : schemeLight} fg={fgName} bg={bgName} />
+      <ColorCard
+        scheme={showDark ? schemeDark : schemeLight}
+        fg={fgName}
+        bg={bgName}
+        {grabbing}
+        on:grabbed={() => (grabbing = false)}
+      />
     {/each}
   </div>
   <div class="buttons">
@@ -47,6 +55,17 @@
       <Icon icon={showDark ? iconLight : iconDark} />
       {showDark ? "Light" : "Dark"}
     </Button>
+    {#if grabbing}
+      <Button type="tonal" iconType="left" on:click={() => (grabbing = false)}>
+        <Icon icon={iconGrab} />
+        Stop grab
+      </Button>
+    {:else}
+      <Button type="tonal" iconType="left" on:click={() => (grabbing = true)}>
+        <Icon icon={iconGrab} />
+        Grab
+      </Button>
+    {/if}
   </div>
 </div>