Implement clickable color swatches to copy color props to clipboard (#…

…476)

* replace color swatch spans with buttons

* add click to copy functionality

* update color swatch css for use with buttons

* add basic markup and rough styles for copy option selector

* move color copy css to separate file

* move javascript to separate file

* add tooltip functionality and styles

* update index.css for tooltips

* implement selecting format for copied color

* change tooltip style to match buttons

* clean up js

* move checkbox outside of label and refactor css to match

* started implementing roving-ux

* replaced color swatches with lists

* style copy type selectors

* added missing 12th color swatch

* remove unnecessary classes

* update package-lock

* fix mobile layout and make tooltips unclickable

* fix animation not playing when first clicking

* fix misshapen outline on tabover

* fix color of copy options when light mode

* fix ease squish animation speed

* change copy example to reflect default selected option

* Apply suggestions from code review

Co-authored-by: Adam Argyle <[email protected]>

* move color conversion to separate file

---------

Co-authored-by: Adam Argyle <[email protected]>

docsite/color-copy.css

@@ -0,0 +1,106 @@
+.copy-options {
+  font-family: var(--font-sans);
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--size-3);
+
+  & .example {
+    font-style: italic;
+    color: var(--text-2);
+  }
+
+  [data-theme="light"] & .example {
+    color: var(--gray-7);
+  }
+
+  & input:is(:disabled) {
+    cursor: not-allowed;
+
+    &~label {
+      color: var(--gray-5);
+      cursor: not-allowed;
+    }
+  }
+
+  @media (--md-n-below) {
+    flex-direction: column;
+  }
+}
+
+.options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-7);
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--size-4);
+  padding-block: var(--size-3);
+  margin: var(--size-2) 0;
+  overflow: auto;
+  border-radius: var(--radius-conditional-2);
+  border: var(--border-size-1) solid var(--surface-3);
+  background: white;
+  box-shadow: var(--shadow-4);
+
+  [data-theme="dark"] & {
+    background: var(--surface-2);
+    box-shadow: var(--shadow-3);
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.options:nth-child(2) {
+  gap: var(--size-5);
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  /* justify-content: flex-start; */
+  & > label {
+    padding-inline-start: var(--size-2);
+  }
+}
+
+.color-format:has(:disabled) {
+  color: var(--gray-5);
+}
+
+.tooltip {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -100%;
+  min-width: max-content;
+  border-radius: var(--radius-round);
+  padding: var(--size-1) var(--size-2);
+  font-size: var(--size-2);
+  background-color: #000;
+  color: #fff;
+  z-index: 9999;
+  pointer-events: none;
+
+}
+
+.tooltip-show {
+  animation: var(--animation-fade-in) forwards;
+  animation-duration: 0.5s;
+}
+
+.tooltip-hide {
+  animation: var(--animation-fade-out) forwards;
+  animation-duration: 0.5s;
+}
+
+.color-swatch:has(.tooltip) {
+  position: relative;
+}
+
+.color-swatch-list {
+  list-style: none;
+}

docsite/index.css

@@ -7,6 +7,7 @@
 @import "../src/props.masks.corner-cuts.css";
 
 @import "./syntax-highlight.css";
+@import "./color-copy.css";
 
 :root {
   --max-inline-body: calc(100vw - (var(--size-8) * 2));
@@ -456,7 +457,7 @@ pre[class*="language-"] {
   & > h4 {
     counter-reset: basic -1;
   }
-
+  
   & > h4::before {
     display: none;
   }
@@ -512,50 +513,75 @@ pre[class*="language-"] {
   }
 }
 
-.color-swatch {
+.color-swatch-list {
+  padding-inline-start: 0;
+}
+
+.color-swatch-list > li {
+  --scale: 1.5;
   --size: var(--size-5);
-  border-radius: var(--radius-round);
-  box-shadow: var(--inner-shadow-0);
+  padding-inline-start: 0;
   inline-size: 6.7%;
   block-size: var(--size);
-  display: grid;
-  place-content: center;
-  color: black;
-  text-shadow: 0 0 1px hsl(0 0% 0% / 40%);
 
-  &::before {
-    opacity: 0;
-    transition: opacity .4s var(--ease-out-3);
-  }
-
-  &:nth-child(n+8)::before {
+  &:nth-child(n+8)>button::before {
     color: white;
   }
 
-  &:is(:hover,:focus) {
-    transform: scale(1.5);
+  &:is(:hover, :focus-visible),
+  &:has(button:is(:focus-visible))
+  {
+    transform: scale(var(--scale));
     transition-delay: 0s;
     transition-timing-function: var(--ease-elastic-out-3);
 
-    &::before {
+    & > button::before {
       opacity: 1;
     }
   }
 
+  &:is(:active) {
+    transform: scale(calc(var(--scale) * .88)) !important;
+  }
+
   @media (--motionOK) {
-    transition: transform 2s var(--ease-squish-5) 3s;
+    transition: transform var(--ease-squish-5);
+    transition-duration: 2s;
+    transition-delay: 3s;
 
-    &:is(:hover,:focus) {
+    &:is(:hover, :focus-visible),
+    &:has(button:is(:focus-visible)) {
       transition-duration: .1s;
     }
   }
 
   @media (--md-n-below) {
     --size: var(--size-3);
   }
+
   @media (--xs-n-below) {
     --size: var(--size-2);
   }
+
+}
+
+.color-swatch {
+  padding-inline: 0;
+  border-radius: var(--radius-round);
+  box-shadow: var(--inner-shadow-0);
+  inline-size: 100%;
+  block-size: var(--size);
+  display: grid;
+  place-content: center;
+  color: black;
+  text-shadow: 0 0 1px hsl(0 0% 0% / 40%);
+
+  &::before {
+    opacity: 0;
+    transition: opacity .4s var(--ease-out-3);
+    line-height: 1;
+  }
+
 }
 
 .ui-gradients {
@@ -1245,13 +1271,18 @@ pre[class*="language-"] {
 
 .count-em {
 
-  &::before {
-  content: '';
-  counter-reset: basic;
-  position: absolute;
-}
+  &:not(.tooltip, li)::before {
+    content: '';
+    counter-reset: basic -1;
+    position: absolute;
+  }
+
+  & > *:not(.tooltip, li)::before {
+    counter-increment: basic;
+    content: counter(basic);
+  }
 
-  & > *::before {
+  & button::before {
     counter-increment: basic;
     content: counter(basic);
   }