Merge pull request #119 from oddbird/100-copy-colors-to-clipboard

Add click to copy behavior

.sassdocrc

@@ -18,6 +18,7 @@ herman:
     sassOptions:
       loadPaths:
         - 'src/sass'
+        - 'node_modules'
     use:
       - 'config'
 display:

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>

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';
 
@@ -13,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)
@@ -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,13 @@
   @use 'config';
 
   [data-colors] {
+    align-items: center;
     display: grid;
     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' minmax(var(--double-gutter), auto) / auto 1fr;
 
     @include config.above('sm-page-break') {
       --swatch-height: calc(2 * var(--swatch));
@@ -154,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'] {

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,21 @@
     {/if}
   </li>
 </ul>
+
+<style lang="scss">
+  li {
+    column-gap: 1ch;
+    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>

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
   }
 

src/lib/components/util/CopyButton.svelte

@@ -0,0 +1,28 @@
+<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>;
+
+  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">
+  {#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>

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 LinkedIn from '$lib/icons/LinkedIn.svelte';
   import Logo from '$lib/icons/Logo.svelte';
@@ -14,6 +16,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 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>

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>

src/sass/app.scss

@@ -4,3 +4,4 @@
 @use 'config';
 @use 'initial';
 @use 'patterns';
+@use 'components';

src/sass/components/_index.scss

@@ -0,0 +1,4 @@
+// Components Manifest
+// ===================
+
+@forward 'social-nav';

src/sass/components/_social-nav.scss

@@ -0,0 +1,18 @@
+[data-nav='social'] {
+  --li-padding-bottom: 0;
+  --link: var(--action-light);
+  --link-focus: var(--action);
+
+  a {
+    &:link,
+    &:visited {
+      --outline-width: 0;
+
+      display: block;
+
+      &:focus-visible {
+        transform: scale(1.15);
+      }
+    }
+  }
+}

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 */
 }

src/sass/config/_index.scss

@@ -6,14 +6,16 @@
 @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';
+@use 'animation/times';
 @use 'color/brand';
 @use 'color/ui' as color-ui;
 @use 'scale/ratio';
@@ -28,3 +30,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'));

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: ''
 );

src/sass/config/animation/_easing.scss

@@ -0,0 +1 @@
+$springy: cubic-bezier(0.175, 0.885, 0.32, 1.275);

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}; */
+///   }

src/sass/config/animation/_times.scss

@@ -0,0 +1,2 @@
+$fast: 300ms;
+$slow: 1000ms;

src/sass/config/color/_ui.scss

@@ -15,3 +15,9 @@ $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);
+$action-light: color.adjust(
+  brand.$brand-blue,
+  $saturation: -45%,
+  $lightness: 10%
+);

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

src/sass/config/scale/_ui.scss

@@ -11,5 +11,7 @@ $logo: 12rem;
 $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
+$icon-medium: 1.5em;
+$ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;