oddbird · jgerigmeyer · Sep 29, 2023 · Aug 15, 2023 · Aug 21, 2023 · Aug 22, 2023
diff --git 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 CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -86,6 +87,7 @@
     on:input={handleInput}
     on:keydown={handleKeydown}
   />
+  <CopyButton text={display} size="medium" />
   {#if hasError}
     <div data-color-info="warning">Could not parse input as a valid color.</div>
   {/if}
@@ -95,12 +97,14 @@
   @use 'config';
 
   [data-colors] {
+    align-items: center;
     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) / 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
@@ -3,6 +3,7 @@
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
+  import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -21,6 +22,7 @@
 
 <ul data-group="output {type}">
   <li>
+    <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
     {#if !isInGamut}
@@ -30,3 +32,20 @@
     {/if}
   </li>
 </ul>
+
+<style lang="scss">
+  li {
+    display: grid;
+    grid-template:
+      'copy color' auto
+      'copy message' 3ex / auto 1fr;
+  }
+
+  [data-color-info='value'] {
+    grid-area: color;
+  }
+
+  [data-color-info='warning'] {
+    grid-area: message;
+  }
+</style>
diff --git a/src/lib/components/util/CopyButton.svelte 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="copy" {size} />
+    <span class="sr-only">Copied</span>
+  {/if}
+</button>
diff --git a/src/lib/components/util/Icon.svelte b/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,

diff --git a/src/lib/icons/Clipboard.svelte b/src/lib/icons/Clipboard.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24.12 24.12"
+  {...$$restProps}
+>
+  <path
+    id="arrow"
+    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.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/Copy.svelte b/src/lib/icons/Copy.svelte
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24.12 24.12"
+  data-icon-theme="success"
+  {...$$restProps}
+>
+  <path
+    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>
diff --git a/src/sass/config/_animation.scss b/src/sass/config/_animation.scss
diff --git a/src/sass/config/_index.scss b/src/sass/config/_index.scss
@@ -14,13 +14,17 @@
  */
 @use 'tools';
 @use 'sass:meta';
+@use 'animation/easing';
+@use 'animation/times';
 @use 'color/brand';
 @use 'color/ui' as color-ui;
 @use 'scale/ratio';
 @use 'scale/layout';
 @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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,2 @@
+$fast: 300ms;
+$slow: 1000ms;
diff --git 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);
diff --git 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/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
@@ -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/_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
@@ -2,14 +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);
+}
diff --git 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';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		$grow-in: cubic-bezier(0.175, 0.885, 0.32, 1.275);