Add click to copy behavior

src/lib/components/colors/Header.svelte

@@ -3,6 +3,7 @@
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
   import type { Writable } from 'svelte/store';
 
+  import Icon from '$lib/components/util/Icon.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -63,6 +64,10 @@
         break;
     }
   };
+
+  function copyOutput() {
+    void navigator.clipboard.writeText(display);
+  }
 </script>
 
 <div
@@ -86,6 +91,10 @@
     on:input={handleInput}
     on:keydown={handleKeydown}
   />
+  <button on:click={copyOutput} type="button" data-btn="icon">
+    <Icon name="clipboard" size="medium" />
+    <span class="sr-only">Click to copy</span>
+  </button>
   {#if hasError}
     <div data-color-info="warning">Could not parse input as a valid color.</div>
   {/if}
@@ -96,11 +105,12 @@
 
   [data-colors] {
     display: grid;
+    column-gap: var(--shim);
     grid-template:
-      'label' auto
-      'swatch' var(--swatch-height, var(--swatch))
-      'input' auto
-      'error' minmax(var(--double-gutter), auto) / 1fr;
+      'label label' auto
+      'swatch swatch' var(--swatch-height, var(--swatch))
+      'copy input' auto
+      'error error' minmax(var(--double-gutter), auto) / var(--icon-medium) 1fr;
 
     @include config.above('sm-page-break') {
       --swatch-height: calc(2 * var(--swatch));

src/lib/components/colors/Output.svelte

@@ -3,6 +3,7 @@
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
+  import Icon from '$lib/components/util/Icon.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -17,10 +18,17 @@
     format,
     inGamut: false,
   });
+  function copyOutput() {
+    void navigator.clipboard.writeText(targetColorValue);
+  }
 </script>
 
 <ul data-group="output {type}">
   <li>
+    <button on:click={copyOutput} type="button" data-btn="icon">
+      <Icon name="clipboard" />
+      <span class="sr-only">Click to copy</span>
+    </button>
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
     {#if !isInGamut}
@@ -30,3 +38,20 @@
     {/if}
   </li>
 </ul>
+
+<style lang="scss">
+  li {
+    display: grid;
+    grid-template:
+      'copy color' auto
+      'copy message' 3ex / var(--icon-medium) 1fr;
+  }
+
+  [data-color-info='value'] {
+    grid-area: color;
+  }
+
+  [data-color-info='warning'] {
+    grid-area: message;
+  }
+</style>

src/lib/components/util/Icon.svelte

@@ -2,6 +2,8 @@
   import type { SvelteComponent } from 'svelte';
 
   import Check from '$lib/icons/Check.svelte';
+  import Clipboard from '$lib/icons/Clipboard.svelte';
+  import Copy from '$lib/icons/Copy.svelte';
   import GitHub from '$lib/icons/GitHub.svelte';
   import Logo from '$lib/icons/Logo.svelte';
   import Mastodon from '$lib/icons/Mastodon.svelte';
@@ -13,6 +15,8 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const icons: { [key: string]: typeof SvelteComponent<any> } = {
     check: Check,
+    clipboard: Clipboard,
+    copy: Copy,
     logo: Logo,
     newtab: NewTab,
     warning: Warning,

src/lib/icons/Clipboard.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 26.24 25.92"
+  {...$$restProps}
+>
+  <path
+    id="arrow"
+    d="m14.36,12.26l-.55.06v-1.65c0-.27-.18-.4-.25-.44-.08-.04-.28-.13-.51,0l-5.56,3.21c-.23.13-.25.35-.25.44s.02.31.25.44l5.56,3.21c.23.13.43.04.51,0,.08-.04.25-.18.25-.44v-1.26l.44-.06c.91-.12,1.76-.17,2.54-.17,3.74,0,6.02,1.2,7.32,2.28-2.06-5.77-7.38-5.89-9.74-5.63Z"
+  />
+  <path
+    id="clipboard"
+    d="m19.21,23.71c0,.33-.27.6-.6.6H2.24c-.33,0-.6-.27-.6-.6V5.29c0-.33.27-.6.6-.6h.6v.6c0,.8.65,1.45,1.45,1.45h12.28c.8,0,1.45-.65,1.45-1.45v-.6h.6c.33,0,.6.27.6.6v6.45c.55.18,1.09.41,1.63.7v-6.94c0-1.34-1.09-2.42-2.42-2.42h-2.29c-.25-.56-.81-.95-1.46-.95h-2.13c-.29,0-.53-.24-.53-.53,0-.88-.71-1.6-1.6-1.6s-1.6.71-1.6,1.6c0,.29-.24.53-.53.53h-2.13c-.65,0-1.21.39-1.46.95h-2.29c-1.34,0-2.42,1.09-2.42,2.42v18c0,1.34,1.09,2.42,2.42,2.42h16c1.34,0,2.42-1.09,2.42-2.42v-6.27c-.49-.17-1.03-.31-1.63-.41v6.9Z"
+  />
+</svg>

src/lib/icons/Copy.svelte

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="39"
+  height="27.81"
+  viewBox="0 0 39 27.81"
+  {...$$restProps}
+>
+  <path
+    id="copy"
+    data-name="copy"
+    d="M38.19,.82c1.08,1.08,1.09,2.84,0,3.93,0,0,0,0,0,0L15.94,26.99c-1.08,1.08-2.84,1.09-3.93,0,0,0,0,0,0,0L.88,15.87c-1.12-1.05-1.18-2.81-.13-3.93,1.05-1.12,2.81-1.18,3.93-.13,.04,.04,.09,.08,.13,.13l9.08,9.15L34.26,.82c1.08-1.08,2.84-1.09,3.92,0,0,0,0,0,0,0Z"
+  />
+</svg>
+
+<style lang="scss">
+  [data-icon] {
+    // a small change in width to make it visually equal to warning
+    --icon-width: calc(var(--icon-size-default) - 0.2em);
+  }
+</style>

src/sass/config/scale/_ui.scss

@@ -11,5 +11,6 @@ $logo: 12rem;
 $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
+$icon-medium: 1.65em;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;

src/sass/patterns/_buttons.scss

@@ -14,11 +14,11 @@ button {
 [data-btn] {
   appearance: none;
   align-items: center;
-  background-color: var(--btn-bg-color-active, var(--btn-bg-color, var(--bg)));
+  background-color: var(--btn-bg-color, var(--bg));
   border: var(--btn-border-width, var(--border-width, 0)) solid
     var(--btn-border-color-active, var(--btn-border-color, var(--text)));
   border-radius: var(--border-radius);
-  color: var(--btn-text-color-active, var(--btn-text-color, var(--text)));
+  color: var(--btn-text-color, var(--text));
   cursor: pointer;
   display: inline-flex;
   padding: var(--btn-padding-block, var(--half-shim))
@@ -29,18 +29,14 @@ button {
 
   &:hover,
   &:focus {
-    --btn-bg-color-active: var(--text);
-    --btn-text-color: var(--bg);
-  }
-
-  &:active,
-  &[aria-pressed='true'] {
-    --btn-bg-color-active: var(--text);
-    --btn-text-color: var(--bg);
+    background-color: var(--btn-bg-color-active, var(--text));
+    color: var(--btn-text-color-active, var(--action));
   }
 }
 
 [data-btn~='icon'] {
+  --btn-bg-color-active: transparent;
   --btn-border-width: 0;
   --btn-padding-inline: var(--half-shim);
+  --btn-text-color-active: var(--action);
 }

src/sass/patterns/_icons.scss

@@ -13,3 +13,7 @@
 [data-icon-size='small'] {
   --icon-size: var(--icon-small);
 }
+
+[data-icon-size='medium'] {
+  --icon-size: var(--icon-medium);
+}