From 188906ba3d9ec423ecf9bb7be58a28f8f5952363 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 15 Aug 2023 14:05:40 -0400
Subject: [PATCH 01/31] Add click to copy behavior

---
 src/lib/components/colors/Header.svelte |  9 +++++++++
 src/lib/components/colors/Output.svelte |  8 ++++++++
 src/lib/components/util/Icon.svelte     |  2 ++
 src/lib/icons/Copy.svelte               | 20 ++++++++++++++++++++
 4 files changed, 39 insertions(+)
 create mode 100644 src/lib/icons/Copy.svelte

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 7e339c1b..fffea928 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/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 name="copy" />
+    <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}
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 437698dd..783fc176 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/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 name="copy" />
+      <span class="sr-only">Click to copy</span>
+    </button>
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
     {#if !isInGamut}
diff --git a/src/lib/components/util/Icon.svelte b/src/lib/components/util/Icon.svelte
index e5f2ef53..9fbbcfbc 100644
--- a/src/lib/components/util/Icon.svelte
+++ b/src/lib/components/util/Icon.svelte
@@ -2,6 +2,7 @@
   import type { SvelteComponent } from 'svelte';
 
   import Check from '$lib/icons/Check.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 +14,7 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const icons: { [key: string]: typeof SvelteComponent<any> } = {
     check: Check,
+    copy: Copy,
     logo: Logo,
     newtab: NewTab,
     warning: Warning,
diff --git a/src/lib/icons/Copy.svelte b/src/lib/icons/Copy.svelte
new file mode 100644
index 00000000..f1701b4f
--- /dev/null
+++ b/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>

From affb40c93155d2339c881be6b58c0239cf3e4c83 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 21 Aug 2023 16:21:53 -0500
Subject: [PATCH 02/31] add clipboard icon and styles for copy

---
 src/lib/components/colors/Header.svelte | 13 +++++++------
 src/lib/components/colors/Output.svelte | 21 +++++++++++++++++++--
 src/lib/components/util/Icon.svelte     |  2 ++
 src/lib/icons/Clipboard.svelte          | 14 ++++++++++++++
 src/sass/config/scale/_ui.scss          |  1 +
 src/sass/patterns/_buttons.scss         | 16 ++++++----------
 src/sass/patterns/_icons.scss           |  4 ++++
 7 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/icons/Clipboard.svelte

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index fffea928..72b8d6dc 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -91,8 +91,8 @@
     on:input={handleInput}
     on:keydown={handleKeydown}
   />
-  <button on:click={copyOutput} type="button" data-btn>
-    <Icon name="copy" />
+  <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}
@@ -105,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));
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 783fc176..9ddcc41e 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -25,8 +25,8 @@
 
 <ul data-group="output {type}">
   <li>
-    <button on:click={copyOutput} type="button" data-btn>
-      <Icon name="copy" />
+    <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>
@@ -38,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>
diff --git a/src/lib/components/util/Icon.svelte b/src/lib/components/util/Icon.svelte
index 9fbbcfbc..27253082 100644
--- a/src/lib/components/util/Icon.svelte
+++ b/src/lib/components/util/Icon.svelte
@@ -2,6 +2,7 @@
   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';
@@ -14,6 +15,7 @@
   // 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,
diff --git a/src/lib/icons/Clipboard.svelte b/src/lib/icons/Clipboard.svelte
new file mode 100644
index 00000000..5813b6cf
--- /dev/null
+++ b/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>
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index d10aabbc..ac92be25 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/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;
diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 9d6f0e33..552494c8 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/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);
 }
diff --git a/src/sass/patterns/_icons.scss b/src/sass/patterns/_icons.scss
index a54aa96b..33804a1e 100644
--- a/src/sass/patterns/_icons.scss
+++ b/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);
+}

From c55d07023487e1adfaa4b5ad627b7c3118c8dca2 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 22 Aug 2023 14:15:36 -0400
Subject: [PATCH 03/31] Add copy component, switch icon after copy

---
 src/lib/components/colors/Header.svelte   | 11 ++----
 src/lib/components/colors/Output.svelte   | 10 ++----
 src/lib/components/util/CopyButton.svelte | 27 ++++++++++++++
 test/js/lib/components/CopyButton.spec.ts | 44 +++++++++++++++++++++++
 test/js/setup.js                          |  1 +
 5 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/util/CopyButton.svelte
 create mode 100644 test/js/lib/components/CopyButton.spec.ts

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 72b8d6dc..19ed31d5 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -3,7 +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 CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -64,10 +64,6 @@
         break;
     }
   };
-
-  function copyOutput() {
-    void navigator.clipboard.writeText(display);
-  }
 </script>
 
 <div
@@ -91,10 +87,7 @@
     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>
+  <CopyButton text={display} size="medium" />
   {#if hasError}
     <div data-color-info="warning">Could not parse input as a valid color.</div>
   {/if}
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 9ddcc41e..62207e44 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -3,7 +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 CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -18,17 +18,11 @@
     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>
+    <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
     {#if !isInGamut}
diff --git a/src/lib/components/util/CopyButton.svelte b/src/lib/components/util/CopyButton.svelte
new file mode 100644
index 00000000..7a700897
--- /dev/null
+++ b/src/lib/components/util/CopyButton.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Icon from '$lib/components/util/Icon.svelte';
+  export let text: string;
+  export let size: string | null = null;
+
+  let justCopied = false;
+  let timeout: ReturnType<typeof setTimeout>;
+
+  function copyOutput() {
+    justCopied = true;
+    void navigator.clipboard.writeText(text);
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      justCopied = false;
+    }, 1000);
+  }
+</script>
+
+<button on:click={copyOutput} type="button" data-btn="icon">
+  {#if !justCopied}
+    <Icon name="clipboard" {size} />
+    <span class="sr-only">Click to copy</span>
+  {:else}
+    <Icon name="check" {size} />
+    <span class="sr-only">Copied</span>
+  {/if}
+</button>
diff --git a/test/js/lib/components/CopyButton.spec.ts b/test/js/lib/components/CopyButton.spec.ts
new file mode 100644
index 00000000..b95381a8
--- /dev/null
+++ b/test/js/lib/components/CopyButton.spec.ts
@@ -0,0 +1,44 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte';
+
+import CopyButton from '$lib/components/util/CopyButton.svelte';
+
+describe('Copy Button', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+  it('renders a button', () => {
+    const { getByRole } = render(CopyButton, {
+      props: { text: 'Copy' },
+    });
+    const button = getByRole('button');
+    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+  });
+  it('copies content', async () => {
+    const spy = vi.spyOn(navigator.clipboard, 'writeText');
+    const { getByRole } = render(CopyButton, {
+      props: { text: 'Copy' },
+    });
+    const button = getByRole('button');
+    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    await fireEvent.click(button);
+
+    expect(spy).toHaveBeenCalledWith('Copy');
+  });
+
+  it('swaps icons', async () => {
+    const { getByRole } = render(CopyButton, {
+      props: { text: 'Copy' },
+    });
+    const button = getByRole('button');
+    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    await fireEvent.click(button);
+    expect(button.firstChild).toHaveAttribute('data-icon', 'check');
+    vi.runAllTimers();
+    await waitFor(() => {
+      expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    });
+  });
+});
diff --git a/test/js/setup.js b/test/js/setup.js
index efcd8bba..27680436 100644
--- a/test/js/setup.js
+++ b/test/js/setup.js
@@ -2,4 +2,5 @@ import '@testing-library/jest-dom';
 
 beforeAll(() => {
   window.CSS.supports = () => true;
+  window.navigator.clipboard = { writeText: () => { } }
 });

From ff3d931d74042a05de3dfbaa7f621418b8497464 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 22 Aug 2023 14:18:20 -0400
Subject: [PATCH 04/31] Lint

---
 test/js/setup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/js/setup.js b/test/js/setup.js
index 27680436..6c7a2776 100644
--- a/test/js/setup.js
+++ b/test/js/setup.js
@@ -2,5 +2,5 @@ import '@testing-library/jest-dom';
 
 beforeAll(() => {
   window.CSS.supports = () => true;
-  window.navigator.clipboard = { writeText: () => { } }
+  window.navigator.clipboard = { writeText: () => {} };
 });

From e0ae97295127c317f81a3c84955821f224c6f7a0 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 14:08:49 -0500
Subject: [PATCH 05/31] copied icon

---
 src/lib/icons/Copied.svelte | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/lib/icons/Copied.svelte

diff --git a/src/lib/icons/Copied.svelte b/src/lib/icons/Copied.svelte
new file mode 100644
index 00000000..90d96c02
--- /dev/null
+++ b/src/lib/icons/Copied.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24.1 25.92"
+  {...$$restProps}
+>
+  <path
+    id="copied-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"
+  />
+  <path
+    id="copied-checkmark"
+    d="m5.68,18.11c1.11.58,4.02,2.22,5.48,4.06.18.23.54.19.67-.08.76-1.66,3.02-6.02,5.95-6.28.94-.09,3.38-.13,6.33,2.08,0,0-.92-3.39-3.97-4.61-1.45-.58-6.33-1.67-9.34,5.05,0,0-1.88-1.35-2.94-2.78-.15-.2-.46-.21-.62-.01l-1.66,1.96c-.17.2-.11.49.11.61Z"
+  />
+</svg>

From 195a0c344cd184bde6fdecb4d7838838483b2367 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 16:53:22 -0500
Subject: [PATCH 06/31] add new copy(copied) button

---
 src/lib/components/util/CopyButton.svelte |  2 +-
 src/lib/icons/Clipboard.svelte            |  6 +++---
 src/lib/icons/Copied.svelte               | 14 --------------
 src/lib/icons/Copy.svelte                 | 21 ++++++++-------------
 src/sass/config/color/_ui.scss            |  1 +
 5 files changed, 13 insertions(+), 31 deletions(-)
 delete mode 100644 src/lib/icons/Copied.svelte

diff --git a/src/lib/components/util/CopyButton.svelte b/src/lib/components/util/CopyButton.svelte
index 7a700897..672efbaa 100644
--- a/src/lib/components/util/CopyButton.svelte
+++ b/src/lib/components/util/CopyButton.svelte
@@ -21,7 +21,7 @@
     <Icon name="clipboard" {size} />
     <span class="sr-only">Click to copy</span>
   {:else}
-    <Icon name="check" {size} />
+    <Icon name="copy" {size} />
     <span class="sr-only">Copied</span>
   {/if}
 </button>
diff --git a/src/lib/icons/Clipboard.svelte b/src/lib/icons/Clipboard.svelte
index 5813b6cf..65dde9ed 100644
--- a/src/lib/icons/Clipboard.svelte
+++ b/src/lib/icons/Clipboard.svelte
@@ -1,14 +1,14 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 26.24 25.92"
+  viewBox="0 0 24.12 24.12"
   {...$$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"
+    d="m14.37,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,0s.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.63h0Z"
   />
   <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"
+    d="m19.22,21.9c0,.33-.27.6-.6.6H2.25c-.33,0-.6-.27-.6-.6V5.3c0-.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.47c.55.18,1.09.41,1.63.7v-6.96c0-1.34-1.09-2.43-2.42-2.43h-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.43v16.18c0,1.34,1.09,2.43,2.42,2.43h16c1.34,0,2.42-1.09,2.42-2.43v-4.42c-.49-.17-1.03-.31-1.63-.41v5.05h0Z"
   />
 </svg>
diff --git a/src/lib/icons/Copied.svelte b/src/lib/icons/Copied.svelte
deleted file mode 100644
index 90d96c02..00000000
--- a/src/lib/icons/Copied.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24.1 25.92"
-  {...$$restProps}
->
-  <path
-    id="copied-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"
-  />
-  <path
-    id="copied-checkmark"
-    d="m5.68,18.11c1.11.58,4.02,2.22,5.48,4.06.18.23.54.19.67-.08.76-1.66,3.02-6.02,5.95-6.28.94-.09,3.38-.13,6.33,2.08,0,0-.92-3.39-3.97-4.61-1.45-.58-6.33-1.67-9.34,5.05,0,0-1.88-1.35-2.94-2.78-.15-.2-.46-.21-.62-.01l-1.66,1.96c-.17.2-.11.49.11.61Z"
-  />
-</svg>
diff --git a/src/lib/icons/Copy.svelte b/src/lib/icons/Copy.svelte
index f1701b4f..d596cc4a 100644
--- a/src/lib/icons/Copy.svelte
+++ b/src/lib/icons/Copy.svelte
@@ -1,20 +1,15 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="39"
-  height="27.81"
-  viewBox="0 0 39 27.81"
+  viewBox="0 0 24.12 24.12"
+  data-icon-theme="success"
   {...$$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"
+    id="checkmark"
+    d="m4.59,13.25c1.26.68,4.17,2.37,5.48,4.21.09.13.28.12.35-.02.87-1.66,4.8-10.28,12.46-8.69,0,0-7.71-4.73-13.37,4.62,0,0-1.09-.83-2.01-2.18-.14-.2-.41-.27-.62-.14l-2.32,1.49c-.26.17-.25.54.02.69v.02Z"
+  />
+  <path
+    id="circle"
+    d="m19.14,10.58c.84,3.69-.78,7.66-4.23,9.63-4.23,2.42-9.64.95-12.07-3.29-1.61-2.81-1.49-6.14,0-8.77.76-1.33,1.86-2.48,3.28-3.3s2.97-1.18,4.5-1.15c2.04.03,4.02.76,5.6,2.09.1.09.21.17.31.26.58-.09,1.59-.1,2.18-.11-1.09-1.36-2.47-2.38-4-3.05-.71-.31-1.45-.54-2.21-.69-2.39-.46-4.95-.11-7.22,1.19S1.32,6.86.53,9.25C.22,10.19.04,11.17,0,12.17c-.07,1.9.36,3.83,1.37,5.6s2.46,3.12,4.13,4.02c2.04,1.1,4.41,1.51,6.73,1.13,1.2-.2,2.39-.6,3.51-1.24s2.07-1.46,2.85-2.4c1.33-1.6,2.15-3.54,2.38-5.57.14-1.24.06-2.5-.25-3.74-.49.09-1.14.22-1.64.4.02.07.04.14.06.21Z"
   />
 </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>
diff --git a/src/sass/config/color/_ui.scss b/src/sass/config/color/_ui.scss
index 2224197f..5a2b9319 100644
--- a/src/sass/config/color/_ui.scss
+++ b/src/sass/config/color/_ui.scss
@@ -15,3 +15,4 @@ $border-light: tools.tint(brand.$brand-blue, 65%);
 $warning: tools.shade(brand.$brand-pink, 5%);
 $action: tools.shade(brand.$brand-pink, 15%);
 $active: brand.$brand-blue;
+$success: oklab(51.527% -0.099 0.0131);

From 6752d1391dd6a779d6073afd86bf58e5382fe692 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 16:53:38 -0500
Subject: [PATCH 07/31] adjust grid track size for icons

---
 src/lib/components/colors/Header.svelte | 3 ++-
 src/lib/components/colors/Output.svelte | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 19ed31d5..0712b9d7 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -97,13 +97,14 @@
   @use 'config';
 
   [data-colors] {
+    align-items: center;
     display: grid;
     column-gap: var(--shim);
     grid-template:
       'label label' auto
       'swatch swatch' var(--swatch-height, var(--swatch))
       'copy input' auto
-      'error error' minmax(var(--double-gutter), auto) / var(--icon-medium) 1fr;
+      'error error' minmax(var(--double-gutter), auto) / auto 1fr;
 
     @include config.above('sm-page-break') {
       --swatch-height: calc(2 * var(--swatch));
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 62207e44..a6110fc2 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -38,7 +38,7 @@
     display: grid;
     grid-template:
       'copy color' auto
-      'copy message' 3ex / var(--icon-medium) 1fr;
+      'copy message' 3ex / auto 1fr;
   }
 
   [data-color-info='value'] {

From ec4f27385bb7bee7964638fdafa22bc966be8625 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 16:54:02 -0500
Subject: [PATCH 08/31] add icon documentation and color option for success
 icon

---
 src/sass/patterns/_icons.scss | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/sass/patterns/_icons.scss b/src/sass/patterns/_icons.scss
index 33804a1e..357c6543 100644
--- a/src/sass/patterns/_icons.scss
+++ b/src/sass/patterns/_icons.scss
@@ -2,18 +2,44 @@
 // ----
 /// By default, icons take on the size of surrounding text.
 /// @group icons
+/// @example html
+///   <svg data-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 27.81">
+///     <path 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>
 [data-icon] {
-  fill: currentcolor;
+  fill: var(--icon-color, currentcolor);
   display: inline-block;
   height: var(--icon-height, var(--icon-size, var(--icon-size-default)));
   overflow: visible;
   width: var(--icon-width, var(--icon-size, var(--icon-size-default)));
 }
 
+/// Small Icon
+/// @group icons
+/// @example html
+///   <svg data-icon data-icon-size="small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 27.81">
+///     <path 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>
 [data-icon-size='small'] {
   --icon-size: var(--icon-small);
 }
 
+///  Medium Icon
+/// @group icons
+/// @example html
+///   <svg data-icon data-icon-size="medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 27.81">
+///     <path 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>
 [data-icon-size='medium'] {
   --icon-size: var(--icon-medium);
 }
+
+/// Success Icon
+/// @group icons
+/// @example html
+///   <svg data-icon data-icon-theme="success"
+///     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.12 24.12">
+///     <path d="m4.59,13.25c1.26.68,4.17,2.37,5.48,4.21.09.13.28.12.35-.02.87-1.66,4.8-10.28,12.46-8.69,0,0-7.71-4.73-13.37,4.62,0,0-1.09-.83-2.01-2.18-.14-.2-.41-.27-.62-.14l-2.32,1.49c-.26.17-.25.54.02.69v.02Z"/>
+///     <path d="m19.14,10.58c.84,3.69-.78,7.66-4.23,9.63-4.23,2.42-9.64.95-12.07-3.29-1.61-2.81-1.49-6.14,0-8.77.76-1.33,1.86-2.48,3.28-3.3s2.97-1.18,4.5-1.15c2.04.03,4.02.76,5.6,2.09.1.09.21.17.31.26.58-.09,1.59-.1,2.18-.11-1.09-1.36-2.47-2.38-4-3.05-.71-.31-1.45-.54-2.21-.69-2.39-.46-4.95-.11-7.22,1.19S1.32,6.86.53,9.25C.22,10.19.04,11.17,0,12.17c-.07,1.9.36,3.83,1.37,5.6s2.46,3.12,4.13,4.02c2.04,1.1,4.41,1.51,6.73,1.13,1.2-.2,2.39-.6,3.51-1.24s2.07-1.46,2.85-2.4c1.33-1.6,2.15-3.54,2.38-5.57.14-1.24.06-2.5-.25-3.74-.49.09-1.14.22-1.64.4.02.07.04.14.06.21Z"/></svg>
+[data-icon-theme='success'] {
+  animation: grow-in var(--slow) var(--springy);
+
+  --icon-color: var(--success);
+}

From b23230b2f4a40e47515104bef53e5d5f8a72260a Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 16:54:35 -0500
Subject: [PATCH 09/31] add animation documentation

---
 src/sass/config/_animation.scss        |  9 ------
 src/sass/config/_index.scss            |  4 +++
 src/sass/config/_tools.scss            |  5 ++--
 src/sass/config/animation/_easing.scss |  1 +
 src/sass/config/animation/_index.scss  | 39 ++++++++++++++++++++++++++
 src/sass/config/animation/_times.scss  |  2 ++
 src/sass/initial/_root.scss            |  1 +
 src/sass/patterns/_animation.scss      | 12 ++++++++
 src/sass/patterns/_index.scss          |  1 +
 9 files changed, 63 insertions(+), 11 deletions(-)
 delete mode 100644 src/sass/config/_animation.scss
 create mode 100644 src/sass/config/animation/_easing.scss
 create mode 100644 src/sass/config/animation/_index.scss
 create mode 100644 src/sass/config/animation/_times.scss
 create mode 100644 src/sass/patterns/_animation.scss

diff --git a/src/sass/config/_animation.scss b/src/sass/config/_animation.scss
deleted file mode 100644
index de0e8dca..00000000
--- a/src/sass/config/_animation.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'tools';
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
-
-/// # Animation Configuration
-/// @group animation
-/// @link https://www.oddbird.net/accoutrement/docs/animate
-///   Accoutrement Scale
-
-tools.$times: ('fast': 300ms);
diff --git a/src/sass/config/_index.scss b/src/sass/config/_index.scss
index 85c49908..68ee8a10 100644
--- a/src/sass/config/_index.scss
+++ b/src/sass/config/_index.scss
@@ -14,6 +14,8 @@
  */
 @use 'tools';
 @use 'sass:meta';
+@use 'animation/easing';
+@use 'animation/times';
 @use 'color/brand';
 @use 'color/ui' as color-ui;
 @use 'scale/ratio';
@@ -21,6 +23,8 @@
 @use 'scale/spacing';
 @use 'scale/text';
 @use 'scale/ui' as scale-ui;
+@include tools.add-easing(meta.module-variables('easing'));
+@include tools.add-times(meta.module-variables('times'));
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('color-ui'));
 @include tools.add-sizes(meta.module-variables('ratio'));
diff --git a/src/sass/config/_tools.scss b/src/sass/config/_tools.scss
index fec40929..c4a965ad 100644
--- a/src/sass/config/_tools.scss
+++ b/src/sass/config/_tools.scss
@@ -1,6 +1,7 @@
 @forward 'accoutrement/sass/tools' with (
-  $size-var-prefix: '',
-  $ratio-var-prefix: '',
   $color-var-prefix: '',
+  $easing-var-prefix: '',
+  $ratio-var-prefix: '',
+  $size-var-prefix: '',
   $time-var-prefix: ''
 );
diff --git a/src/sass/config/animation/_easing.scss b/src/sass/config/animation/_easing.scss
new file mode 100644
index 00000000..70c7b97e
--- /dev/null
+++ b/src/sass/config/animation/_easing.scss
@@ -0,0 +1 @@
+$grow-in: cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/src/sass/config/animation/_index.scss b/src/sass/config/animation/_index.scss
new file mode 100644
index 00000000..41c3a2b8
--- /dev/null
+++ b/src/sass/config/animation/_index.scss
@@ -0,0 +1,39 @@
+@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use '../tools';
+@use 'easing';
+@use 'times';
+@use 'sass:meta';
+@forward 'easing';
+@forward 'times';
+
+/// # Animation Config
+/// Accoutrement maps for storing global animation tokens.
+/// @link https://www.oddbird.net/accoutrement/docs/animate.html
+///   Accoutrement Animate
+/// @group animation
+
+/// ## Easing
+/// ---------
+/// Named easings that can be re-used to create consistent movement.
+/// @group animation
+/// @example scss
+///   @use 'config/animation/easing';
+///   @use 'config/tools';
+///   @use 'sass:meta';
+///
+///   @each $name, $easing in tools.compile-easing(meta.module-variables('easing')) {
+///   /* #{$name}: #{$easing}; */
+///   }
+
+/// ## Times
+/// ---------
+/// Named times that can be re-used to create consistent motion timing.
+/// @group animation
+/// @example scss
+///   @use 'config/animation/times';
+///   @use 'config/tools';
+///   @use 'sass:meta';
+///
+///   @each $name, $time in tools.compile-times(meta.module-variables('times')) {
+///   /* #{$name}: #{$time}; */
+///   }
diff --git a/src/sass/config/animation/_times.scss b/src/sass/config/animation/_times.scss
new file mode 100644
index 00000000..921b737b
--- /dev/null
+++ b/src/sass/config/animation/_times.scss
@@ -0,0 +1,2 @@
+$fast: 300ms;
+$slow: 1000ms;
diff --git a/src/sass/initial/_root.scss b/src/sass/initial/_root.scss
index 821674c2..d331bd70 100644
--- a/src/sass/initial/_root.scss
+++ b/src/sass/initial/_root.scss
@@ -7,6 +7,7 @@ html {
   @include config.ratios--;
   @include config.sizes--;
   @include config.times--;
+  @include config.easing--;
 
   font-size: config.size('rem');
   line-height: config.ratio('line-height');
diff --git a/src/sass/patterns/_animation.scss b/src/sass/patterns/_animation.scss
new file mode 100644
index 00000000..92907f10
--- /dev/null
+++ b/src/sass/patterns/_animation.scss
@@ -0,0 +1,12 @@
+// Animation Patterns
+// ------------------
+/// @group animation
+@keyframes grow-in {
+  0% {
+    transform: scale(0);
+  }
+
+  25% {
+    transform: scale(1);
+  }
+}
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
index 4db942a6..85b59cbe 100644
--- a/src/sass/patterns/_index.scss
+++ b/src/sass/patterns/_index.scss
@@ -2,6 +2,7 @@
 // ================
 
 @forward 'a11y';
+@forward 'animation';
 @forward 'forms';
 @forward 'buttons';
 @forward 'icons';

From 22db19f94804804cedd6e695163a6fec2e213a12 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 20:57:50 -0500
Subject: [PATCH 10/31] update test

---
 test/js/lib/components/CopyButton.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/js/lib/components/CopyButton.spec.ts b/test/js/lib/components/CopyButton.spec.ts
index b95381a8..15b33f60 100644
--- a/test/js/lib/components/CopyButton.spec.ts
+++ b/test/js/lib/components/CopyButton.spec.ts
@@ -35,7 +35,7 @@ describe('Copy Button', () => {
     const button = getByRole('button');
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
     await fireEvent.click(button);
-    expect(button.firstChild).toHaveAttribute('data-icon', 'check');
+    expect(button.firstChild).toHaveAttribute('data-icon', 'copy');
     vi.runAllTimers();
     await waitFor(() => {
       expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');

From b6f7af2a061dc2dc48dfe7b039721025ad0426a2 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 25 Sep 2023 21:26:10 -0500
Subject: [PATCH 11/31] update easing variable name

---
 src/sass/config/animation/_easing.scss | 2 +-
 src/sass/patterns/_animation.scss      | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/sass/config/animation/_easing.scss b/src/sass/config/animation/_easing.scss
index 70c7b97e..97611d9c 100644
--- a/src/sass/config/animation/_easing.scss
+++ b/src/sass/config/animation/_easing.scss
@@ -1 +1 @@
-$grow-in: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$springy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/src/sass/patterns/_animation.scss b/src/sass/patterns/_animation.scss
index 92907f10..1f2a141a 100644
--- a/src/sass/patterns/_animation.scss
+++ b/src/sass/patterns/_animation.scss
@@ -1,5 +1,9 @@
-// Animation Patterns
-// ------------------
+/// ## Animation Patterns
+/// ---------------------
+
+/// ### Grow In
+/// -----------
+/// Scale something from 0 to 1
 /// @group animation
 @keyframes grow-in {
   0% {

From 916eac58e3306a2eb2250da4ca65a0cd149f3f23 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 26 Sep 2023 11:15:11 -0400
Subject: [PATCH 12/31] Allow importing from node_modules in Herman examples.

---
 .sassdocrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.sassdocrc b/.sassdocrc
index b0366f1b..29b27743 100644
--- a/.sassdocrc
+++ b/.sassdocrc
@@ -18,6 +18,7 @@ herman:
     sassOptions:
       loadPaths:
         - 'src/sass'
+        - 'node_modules'
     use:
       - 'config'
 display:

From cde9f037f1fb2f317f7ff9c79dc4ebba8bd01b94 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 10:40:25 -0500
Subject: [PATCH 13/31] change css to sass comments

---
 src/sass/config/_index.scss | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/sass/config/_index.scss b/src/sass/config/_index.scss
index 68ee8a10..5048031f 100644
--- a/src/sass/config/_index.scss
+++ b/src/sass/config/_index.scss
@@ -6,12 +6,12 @@
 @forward 'scale';
 @forward 'utilities';
 
-/**
- * To turn Sass tokens into CSS custom properties:
- *   - load each color module with `@use`
- *   - use the `tools.add-colors` mixin with the `sass:meta` module to create a map of the variables in the imported module
- *   - in `initial/_root.scss` call the `config.colors--()` mixin to create custom properties
- */
+// To turn Sass tokens into CSS custom properties:
+//   - load each color module with `@use`
+//   - use the `tools.add-*` mixin with the `sass:meta` module to create a
+//       map of the variables in the imported module
+//   - in `initial/_root.scss` call the `config.*--()` mixin to create
+//       custom properties
 @use 'tools';
 @use 'sass:meta';
 @use 'animation/easing';
@@ -23,8 +23,7 @@
 @use 'scale/spacing';
 @use 'scale/text';
 @use 'scale/ui' as scale-ui;
-@include tools.add-easing(meta.module-variables('easing'));
-@include tools.add-times(meta.module-variables('times'));
+
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('color-ui'));
 @include tools.add-sizes(meta.module-variables('ratio'));
@@ -32,3 +31,5 @@
 @include tools.add-sizes(meta.module-variables('spacing'));
 @include tools.add-sizes(meta.module-variables('text'));
 @include tools.add-sizes(meta.module-variables('scale-ui'));
+@include tools.add-easing(meta.module-variables('easing'));
+@include tools.add-times(meta.module-variables('times'));

From 609b5ff0cb2e7016c14993e0d71147cd87c5546d Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 10:58:54 -0500
Subject: [PATCH 14/31] remove less helpful keyframe animation documentation

---
 src/sass/patterns/_animation.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/sass/patterns/_animation.scss b/src/sass/patterns/_animation.scss
index 1f2a141a..ec9aa513 100644
--- a/src/sass/patterns/_animation.scss
+++ b/src/sass/patterns/_animation.scss
@@ -1,10 +1,6 @@
-/// ## Animation Patterns
-/// ---------------------
+/// Animation Patterns
+/// ------------------
 
-/// ### Grow In
-/// -----------
-/// Scale something from 0 to 1
-/// @group animation
 @keyframes grow-in {
   0% {
     transform: scale(0);

From e5fea472295cd64660c34cf68da96bcfe2256dc0 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 11:01:01 -0500
Subject: [PATCH 15/31] remove heading from sassdoc comments

---
 src/sass/patterns/_animation.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sass/patterns/_animation.scss b/src/sass/patterns/_animation.scss
index ec9aa513..35c10c9c 100644
--- a/src/sass/patterns/_animation.scss
+++ b/src/sass/patterns/_animation.scss
@@ -1,5 +1,5 @@
-/// Animation Patterns
-/// ------------------
+// Animation Patterns
+// ------------------
 
 @keyframes grow-in {
   0% {

From 63738d31ea98e99b771bb33ae364278ae176de57 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 11:35:41 -0500
Subject: [PATCH 16/31] adjust type and breakpoints to accomodate new clipboard
 icon

---
 src/lib/components/colors/Header.svelte | 1 -
 src/sass/config/scale/_layout.scss      | 2 +-
 src/sass/initial/_type.scss             | 6 +++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 0712b9d7..1edb0d2f 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -99,7 +99,6 @@
   [data-colors] {
     align-items: center;
     display: grid;
-    column-gap: var(--shim);
     grid-template:
       'label label' auto
       'swatch swatch' var(--swatch-height, var(--swatch))
diff --git a/src/sass/config/scale/_layout.scss b/src/sass/config/scale/_layout.scss
index 0e7d0ebc..70c594a3 100644
--- a/src/sass/config/scale/_layout.scss
+++ b/src/sass/config/scale/_layout.scss
@@ -8,6 +8,6 @@
 
 $page: 60rem;
 $sm-column-break: 30em;
-$sm-page-break: 40em;
+$sm-page-break: 42em;
 $lg-page-break: 80em;
 $page-margin: calc(spacing.$quarter-shim + 4vw);
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
index 128e2c57..f3f42728 100644
--- a/src/sass/initial/_type.scss
+++ b/src/sass/initial/_type.scss
@@ -92,7 +92,11 @@ strong {
 
   // Container widths here were determined by when the longer color values (p3)
   // would overflow the container
-  @container tool (min-width: 20rem) {
+  @container tool (min-width: 15rem) {
+    --tool-font-size: 5cqi;
+  }
+
+  @container tool (min-width: 21rem) {
     --tool-font-size: var(--input-small);
   }
 

From 74e172e8963562cd5d497ac82e5da4cefa1a2280 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 11:36:32 -0500
Subject: [PATCH 17/31] add fixed ratio width to prevent jumping in results

---
 src/lib/components/ratio/index.svelte | 4 +++-
 src/sass/config/scale/_ui.scss        | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index b1be86dc..953f01ae 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -98,9 +98,10 @@
 
     @include config.between('sm-column-break', 'lg-page-break') {
       gap: var(--shim) var(--gutter);
+      // fixed width column to prevent layout shift as the ratio number changes
       grid-template:
         'heading number' min-content
-        'intro   intro' 1fr / auto 1fr;
+        'intro   intro' 1fr / auto var(--ratio-width);
     }
 
     @include config.above('lg-page-break') {
@@ -134,6 +135,7 @@
     align-items: start;
     display: inline-flex;
     grid-area: number;
+    justify-content: flex-end;
     line-height: 0.7; // weird number alignment
   }
 
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index ac92be25..ff824f15 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -12,5 +12,6 @@ $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
 $icon-medium: 1.65em;
+$ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;

From b3da1cb60645047f52b49d3e18d5e498f4fdf170 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 11:45:40 -0500
Subject: [PATCH 18/31] lint

---
 src/sass/config/_index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sass/config/_index.scss b/src/sass/config/_index.scss
index 5048031f..10e0bd4a 100644
--- a/src/sass/config/_index.scss
+++ b/src/sass/config/_index.scss
@@ -23,7 +23,6 @@
 @use 'scale/spacing';
 @use 'scale/text';
 @use 'scale/ui' as scale-ui;
-
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('color-ui'));
 @include tools.add-sizes(meta.module-variables('ratio'));

From e54b9142425bc3c5e452b8b08582c98ac8c9fc49 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 26 Sep 2023 14:20:52 -0400
Subject: [PATCH 19/31] review

---
 src/lib/components/colors/Header.svelte   |  4 ++--
 src/lib/components/util/CopyButton.svelte |  5 +++--
 test/js/lib/components/CopyButton.spec.ts | 10 ++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 1edb0d2f..d955fb52 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -14,8 +14,8 @@
   $: targetSpace = getSpaceFromFormatId(format);
   $: display = serialize($color, { inGamut: false, format });
   $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  $: editing = false;
-  $: inputValue = '';
+  let editing = false;
+  let inputValue = '';
   let hasError = false;
 
   // When not editing, sync input value with color (e.g. when sliders change)
diff --git a/src/lib/components/util/CopyButton.svelte b/src/lib/components/util/CopyButton.svelte
index 672efbaa..ca174b2c 100644
--- a/src/lib/components/util/CopyButton.svelte
+++ b/src/lib/components/util/CopyButton.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
   import Icon from '$lib/components/util/Icon.svelte';
+
   export let text: string;
   export let size: string | null = null;
 
   let justCopied = false;
   let timeout: ReturnType<typeof setTimeout>;
 
-  function copyOutput() {
+  const copyOutput = () => {
     justCopied = true;
     void navigator.clipboard.writeText(text);
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       justCopied = false;
     }, 1000);
-  }
+  };
 </script>
 
 <button on:click={copyOutput} type="button" data-btn="icon">
diff --git a/test/js/lib/components/CopyButton.spec.ts b/test/js/lib/components/CopyButton.spec.ts
index 15b33f60..566a4324 100644
--- a/test/js/lib/components/CopyButton.spec.ts
+++ b/test/js/lib/components/CopyButton.spec.ts
@@ -6,23 +6,29 @@ describe('Copy Button', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
+
   afterEach(() => {
     vi.restoreAllMocks();
   });
+
   it('renders a button', () => {
     const { getByRole } = render(CopyButton, {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
   });
+
   it('copies content', async () => {
     const spy = vi.spyOn(navigator.clipboard, 'writeText');
     const { getByRole } = render(CopyButton, {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+
     await fireEvent.click(button);
 
     expect(spy).toHaveBeenCalledWith('Copy');
@@ -33,9 +39,13 @@ describe('Copy Button', () => {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+
     await fireEvent.click(button);
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'copy');
+
     vi.runAllTimers();
     await waitFor(() => {
       expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');

From 27b6376039769f1398bf713f10a60331bcb25cb5 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:17:00 -0500
Subject: [PATCH 20/31] clean up alpha order

---
 src/sass/patterns/_buttons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 552494c8..21f65643 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/src/sass/patterns/_buttons.scss
@@ -2,8 +2,8 @@
 /// @group buttons
 
 button {
-  font-size: inherit;
   font-family: inherit;
+  font-size: inherit;
 }
 
 // Basic Buttons

From 98dd9331b8174902516eef4775318f76ef8476c9 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:20:15 -0500
Subject: [PATCH 21/31] add transform to button transition

---
 src/sass/patterns/_buttons.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 21f65643..5a63c27e 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/src/sass/patterns/_buttons.scss
@@ -25,7 +25,8 @@ button {
     var(--btn-padding-inline, var(--gutter));
   transition:
     color var(--fast),
-    background-color var(--fast);
+    background-color var(--fast)
+    transform var(--fast);
 
   &:hover,
   &:focus {

From 7fa832c66cba1e815975abdbcd025fbad2f4fdc3 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:20:48 -0500
Subject: [PATCH 22/31] move input styles to global pattern

---
 src/lib/components/colors/Header.svelte |  2 --
 src/sass/patterns/_forms.scss           | 18 ++++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 1edb0d2f..c2333b57 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -157,9 +157,7 @@
   }
 
   [data-input='color'] {
-    border-width: 0 0 var(--border-width) 0;
     grid-area: input;
-    padding: var(--shim) 0.25ch;
   }
 
   [data-color-info='warning'] {
diff --git a/src/sass/patterns/_forms.scss b/src/sass/patterns/_forms.scss
index 1cecbddd..0ad43e57 100644
--- a/src/sass/patterns/_forms.scss
+++ b/src/sass/patterns/_forms.scss
@@ -16,6 +16,24 @@ select {
   width: 100%;
 }
 
+input {
+  border-color: var(--input-border-color, var(--border));
+  border-width: 0 0 var(--border-width) 0;
+  font-family: inherit;
+  font-size: inherit;
+  padding: var(--shim) 0.25ch;
+
+  &:focus-visible {
+    box-shadow: 0 3px 2px -2px var(--input-shadow-color, currentColor);
+    outline: none;
+  }
+
+  [data-needs-changes~='true'] & {
+    --input-border-color: var(--warning);
+    --input-shadow-color: var(--warning);
+  }
+}
+
 select {
   border: 0;
   box-shadow: 1px 1px var(--half-shim) var(--border-light);

From 7624868941ef4038fa85743ae5bbafb22b0de159 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:21:32 -0500
Subject: [PATCH 23/31] remove unused

---
 src/sass/patterns/_forms.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/sass/patterns/_forms.scss b/src/sass/patterns/_forms.scss
index 0ad43e57..e4b906af 100644
--- a/src/sass/patterns/_forms.scss
+++ b/src/sass/patterns/_forms.scss
@@ -10,7 +10,6 @@ label {
 
 input,
 select {
-  border-color: var(--border);
   font-family: inherit;
   font-size: inherit;
   width: 100%;
@@ -40,16 +39,6 @@ select {
   padding: var(--half-shim) var(--shim);
 }
 
-input {
-  transition:
-    outline-color var(--fast),
-    outline-style var(--fast);
-
-  [data-needs-changes] & {
-    --focus-ring: var(--warning);
-  }
-}
-
 // ## Range Thumbs
 // ---------------
 /// For some reason you have to style the webkit and moz ranges separately.

From caa6a9da128ee1af2872ce999947ae5cbc2846a8 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:21:48 -0500
Subject: [PATCH 24/31] update range thumb focus color

---
 src/sass/patterns/_forms.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sass/patterns/_forms.scss b/src/sass/patterns/_forms.scss
index e4b906af..65dacf9b 100644
--- a/src/sass/patterns/_forms.scss
+++ b/src/sass/patterns/_forms.scss
@@ -51,13 +51,13 @@ select {
   border-radius: var(--range-thumb-size);
   cursor: pointer;
   height: var(--range-thumb-size);
-  outline: var(--thumb-outline-color, transparent) solid var(--border-width);
+  outline: var(--thumb-outline-color, transparent) solid var(--border-width-md);
   transition: outline var(--fast);
   width: var(--range-thumb-size);
 }
 
 @mixin range-thumb-focus {
-  --thumb-outline-color: var(--text);
+  --thumb-outline-color: var(--action);
 }
 
 input[type='range'] {

From b62fd1205b74871d387eb2bde0868d3a84498208 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:22:33 -0500
Subject: [PATCH 25/31] switch to using focus-visible

---
 src/sass/initial/_links.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/sass/initial/_links.scss b/src/sass/initial/_links.scss
index 3b4e123c..5ebb321f 100644
--- a/src/sass/initial/_links.scss
+++ b/src/sass/initial/_links.scss
@@ -4,15 +4,16 @@
 /// Initial global defaults for links
 /// @group links
 
+// Hide default browser focus for mouse-users but interactive elements will
+// have custom focus styles applied
+:focus:not(:focus-visible) { outline: none }
+
 // Focus
 // -----
-/// By default, all elements get a dotted outline on focus.
-/// In practice, we can override this when other focus styles exist.
+/// Show focus with keyboard navigation using focus-visible
 /// @group links
-:focus {
+:focus-visible {
   @include config.focus-ring;
-
-  --outline-offset: -1px;
 }
 
 // Links

From be37579a2f5de02e806a04b29f34a4f581e3b42e Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:23:04 -0500
Subject: [PATCH 26/31] add link transform, move social nav to component

---
 src/lib/components/Footer.svelte     |  8 --------
 src/sass/app.scss                    |  1 +
 src/sass/components/_index.scss      |  4 ++++
 src/sass/components/_social-nav.scss | 18 ++++++++++++++++++
 src/sass/initial/_links.scss         |  4 +++-
 5 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/sass/components/_index.scss
 create mode 100644 src/sass/components/_social-nav.scss

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 71ae6003..81bb8095 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -24,11 +24,3 @@
     {/each}
   </ul>
 </footer>
-
-<style lang="scss">
-  [data-nav='social'] {
-    --li-padding-bottom: 0;
-    --link: var(--text);
-    --link-focus: var(--action);
-  }
-</style>
diff --git a/src/sass/app.scss b/src/sass/app.scss
index 07df236c..a0446cc1 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -4,3 +4,4 @@
 @use 'config';
 @use 'initial';
 @use 'patterns';
+@use 'components';
diff --git a/src/sass/components/_index.scss b/src/sass/components/_index.scss
new file mode 100644
index 00000000..33703f58
--- /dev/null
+++ b/src/sass/components/_index.scss
@@ -0,0 +1,4 @@
+// Components Manifest
+// ===================
+
+@forward 'social-nav';
diff --git a/src/sass/components/_social-nav.scss b/src/sass/components/_social-nav.scss
new file mode 100644
index 00000000..c1edaf82
--- /dev/null
+++ b/src/sass/components/_social-nav.scss
@@ -0,0 +1,18 @@
+[data-nav='social'] {
+  --li-padding-bottom: 0;
+  --link: var(--text);
+  --link-focus: var(--action);
+
+  a {
+    &:link,
+    &:visited {
+      --outline-width: 0;
+
+      display: block;
+
+      &:focus-visible {
+        transform: scale(1.15);
+      }
+    }
+  }
+}
diff --git a/src/sass/initial/_links.scss b/src/sass/initial/_links.scss
index 5ebb321f..4d334115 100644
--- a/src/sass/initial/_links.scss
+++ b/src/sass/initial/_links.scss
@@ -31,7 +31,9 @@ a {
     text-decoration-thickness: var(--line-thickness, var(--border-width));
     transition:
       color var(--fast),
-      text-decoration-thickness var(--fast);
+      text-decoration-thickness var(--fast)
+      transform var(--fast);
+    transform: scale(1);
   }
 
   &:hover,

From dc9cf673a2f6e15368183b376da6e5148cbe7390 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:23:31 -0500
Subject: [PATCH 27/31] add icon-only button focus styles

---
 src/sass/patterns/_buttons.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 5a63c27e..62e931d4 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/src/sass/patterns/_buttons.scss
@@ -40,4 +40,9 @@ button {
   --btn-border-width: 0;
   --btn-padding-inline: var(--half-shim);
   --btn-text-color-active: var(--action);
+
+  &:focus-visible {
+    --outline-width: 0;
+    transform: scale(1.15);
+  }
 }

From 776a54b4beb3662f40f20483c11906647918f43b Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:23:43 -0500
Subject: [PATCH 28/31] update focus mixin

---
 src/sass/config/_focus.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/sass/config/_focus.scss b/src/sass/config/_focus.scss
index c2494f1c..4be84ace 100644
--- a/src/sass/config/_focus.scss
+++ b/src/sass/config/_focus.scss
@@ -14,9 +14,9 @@
 /// @group focus
 @mixin focus-ring() {
   /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-  outline-color: var(--focus-ring, var(--text, currentColor));
+  outline-color: var(--focus-ring, currentColor);
   outline-offset: var(--outline-offset, 0);
-  outline-style: var(--outline-style, dotted);
-  outline-width: var(--outline-width, var(--border-width));
+  outline-style: var(--outline-style, solid);
+  outline-width: var(--outline-width, var(--border-width-md));
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }

From 4a16883c787c18e970086f3d2960fc0bd59cdd33 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:23:57 -0500
Subject: [PATCH 29/31] align warning text with input

---
 src/lib/components/colors/Header.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index c2333b57..a74b51dc 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -103,7 +103,7 @@
       'label label' auto
       'swatch swatch' var(--swatch-height, var(--swatch))
       'copy input' auto
-      'error error' minmax(var(--double-gutter), auto) / auto 1fr;
+      '.... error' minmax(var(--double-gutter), auto) / auto 1fr;
 
     @include config.above('sm-page-break') {
       --swatch-height: calc(2 * var(--swatch));

From 91575ef2e817d80f21384e2dd5977405fe170d37 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 27 Sep 2023 14:27:22 -0500
Subject: [PATCH 30/31] lint

---
 src/sass/initial/_links.scss    | 7 ++++---
 src/sass/patterns/_buttons.scss | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/sass/initial/_links.scss b/src/sass/initial/_links.scss
index 4d334115..2517cc7c 100644
--- a/src/sass/initial/_links.scss
+++ b/src/sass/initial/_links.scss
@@ -6,7 +6,9 @@
 
 // Hide default browser focus for mouse-users but interactive elements will
 // have custom focus styles applied
-:focus:not(:focus-visible) { outline: none }
+:focus:not(:focus-visible) {
+  outline: none;
+}
 
 // Focus
 // -----
@@ -31,8 +33,7 @@ a {
     text-decoration-thickness: var(--line-thickness, var(--border-width));
     transition:
       color var(--fast),
-      text-decoration-thickness var(--fast)
-      transform var(--fast);
+      text-decoration-thickness var(--fast) transform var(--fast);
     transform: scale(1);
   }
 
diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 62e931d4..7822a3a5 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/src/sass/patterns/_buttons.scss
@@ -25,8 +25,7 @@ button {
     var(--btn-padding-inline, var(--gutter));
   transition:
     color var(--fast),
-    background-color var(--fast)
-    transform var(--fast);
+    background-color var(--fast) transform var(--fast);
 
   &:hover,
   &:focus {
@@ -43,6 +42,7 @@ button {
 
   &:focus-visible {
     --outline-width: 0;
+
     transform: scale(1.15);
   }
 }

From 392d049313479c2e0f476a943dfddd3b2609a419 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Fri, 29 Sep 2023 09:59:12 -0500
Subject: [PATCH 31/31] lighten icon actions

---
 src/lib/components/colors/Output.svelte | 1 +
 src/sass/components/_social-nav.scss    | 2 +-
 src/sass/config/color/_ui.scss          | 5 +++++
 src/sass/config/scale/_ui.scss          | 2 +-
 src/sass/patterns/_buttons.scss         | 7 ++++---
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index a6110fc2..6a906f44 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -35,6 +35,7 @@
 
 <style lang="scss">
   li {
+    column-gap: 1ch;
     display: grid;
     grid-template:
       'copy color' auto
diff --git a/src/sass/components/_social-nav.scss b/src/sass/components/_social-nav.scss
index c1edaf82..9f5da3da 100644
--- a/src/sass/components/_social-nav.scss
+++ b/src/sass/components/_social-nav.scss
@@ -1,6 +1,6 @@
 [data-nav='social'] {
   --li-padding-bottom: 0;
-  --link: var(--text);
+  --link: var(--action-light);
   --link-focus: var(--action);
 
   a {
diff --git a/src/sass/config/color/_ui.scss b/src/sass/config/color/_ui.scss
index 5a2b9319..a913a09f 100644
--- a/src/sass/config/color/_ui.scss
+++ b/src/sass/config/color/_ui.scss
@@ -16,3 +16,8 @@ $warning: tools.shade(brand.$brand-pink, 5%);
 $action: tools.shade(brand.$brand-pink, 15%);
 $active: brand.$brand-blue;
 $success: oklab(51.527% -0.099 0.0131);
+$action-light: color.adjust(
+  brand.$brand-blue,
+  $saturation: -45%,
+  $lightness: 10%
+);
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index ff824f15..0ce73c07 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -11,7 +11,7 @@ $logo: 12rem;
 $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
-$icon-medium: 1.65em;
+$icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
diff --git a/src/sass/patterns/_buttons.scss b/src/sass/patterns/_buttons.scss
index 7822a3a5..134f9751 100644
--- a/src/sass/patterns/_buttons.scss
+++ b/src/sass/patterns/_buttons.scss
@@ -18,7 +18,7 @@ button {
   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, var(--text));
+  color: var(--btn-color, var(--text));
   cursor: pointer;
   display: inline-flex;
   padding: var(--btn-padding-block, var(--half-shim))
@@ -30,7 +30,7 @@ button {
   &:hover,
   &:focus {
     background-color: var(--btn-bg-color-active, var(--text));
-    color: var(--btn-text-color-active, var(--action));
+    color: var(--btn-color-active, var(--action));
   }
 }
 
@@ -38,7 +38,8 @@ button {
   --btn-bg-color-active: transparent;
   --btn-border-width: 0;
   --btn-padding-inline: var(--half-shim);
-  --btn-text-color-active: var(--action);
+  --btn-color-active: var(--action);
+  --btn-color: var(--action-light);
 
   &:focus-visible {
     --outline-width: 0;