From 76abb4afb185905381bfb323dfe852edbfb008ac Mon Sep 17 00:00:00 2001
From: "Samuel M. Bednarz" <samuelmorkbednarz@gmail.com>
Date: Sat, 3 Feb 2024 21:44:09 +0100
Subject: [PATCH] scope umbra to the entire color picker not just the pallet

---
 packages/dye/App.vue                          |  11 ++
 .../dye/components/Canvas/ColorCanvas.vue     |  16 ++-
 packages/dye/components/DyePicker.vue         |  57 +++++-----
 packages/dye/components/Pallet.vue            |  17 +--
 packages/dye/composables/colorName/index.ts   |  17 ++-
 packages/dye/css/block.scss                   |  67 ++++++++++++
 packages/dye/css/color.scss                   |  13 +++
 packages/dye/css/elements.scss                |  61 +++++++++++
 packages/dye/css/index.scss                   |  50 +++++++++
 packages/dye/css/spaces.scss                  |  20 ++++
 packages/dye/css/type.scss                    | 100 ++++++++++++++++++
 packages/dye/index.html                       |  13 +++
 packages/dye/main.ts                          |   4 +
 13 files changed, 388 insertions(+), 58 deletions(-)
 create mode 100644 packages/dye/App.vue
 create mode 100644 packages/dye/css/block.scss
 create mode 100644 packages/dye/css/color.scss
 create mode 100644 packages/dye/css/elements.scss
 create mode 100644 packages/dye/css/index.scss
 create mode 100644 packages/dye/css/spaces.scss
 create mode 100644 packages/dye/css/type.scss
 create mode 100644 packages/dye/index.html
 create mode 100644 packages/dye/main.ts

diff --git a/packages/dye/App.vue b/packages/dye/App.vue
new file mode 100644
index 0000000..af1354d
--- /dev/null
+++ b/packages/dye/App.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import DyePicker from './components/DyePicker.vue'
+</script>
+
+<template>
+  <DyePicker default="#36576a" />
+</template>
+
+<style lang="scss">
+@import './css';
+</style>
diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
index d602a08..38ade41 100644
--- a/packages/dye/components/Canvas/ColorCanvas.vue
+++ b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -57,15 +57,11 @@ function getHue(color: string = props.color.value) {
 
 const { width, height } = responsiveCanvas({
   canvas: props.getRef(),
-  updateCanvas: () =>
-    fillColorCanvas(
-      {
-        hue: getHue(),
-        saturation: 100,
-        lightness: 100
-      },
-      props.getRef().value
-    )
+  updateCanvas: () => {
+    const hue = getHue()
+    const data = { hue, saturation: 100, lightness: 100 }
+    fillColorCanvas(data, props.getRef().value)
+  }
 })
 
 function getPercent(percent: number, height?: number) {
@@ -114,6 +110,6 @@ canvas.color-canvas {
   aspect-ratio: 1/1;
   width: 100%;
   height: 100%;
-  background-color: var(--base-20, rgb(64, 0, 0));
+  background-color: var(--base-20, rgb(30, 0, 64));
 }
 </style>
diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
index 028a7de..0d94b7c 100644
--- a/packages/dye/components/DyePicker.vue
+++ b/packages/dye/components/DyePicker.vue
@@ -3,7 +3,8 @@ import { colord } from 'colord'
 import type { Colord } from 'colord'
 import { vOnClickOutside } from '@vueuse/components'
 
-import { ref } from 'vue'
+import { umbra } from '@umbrajs/core'
+import { ref, watch } from 'vue'
 import { colorName } from '../composables/colorName'
 import { hexType } from '../composables/canvas'
 import Pallet from './Pallet.vue'
@@ -22,10 +23,10 @@ const emit = defineEmits<{
 }>()
 
 interface Props {
-  default: string
-  compact: boolean
-  compactSize: number
-  hueWidth: number
+  default?: string
+  compact?: boolean
+  compactSize?: number
+  hueWidth?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -35,9 +36,21 @@ const props = withDefaults(defineProps<Props>(), {
   hueWidth: 25
 })
 
-const pallet = ref<HTMLElement | null>(null)
+const pickerRef = ref<HTMLElement | null>(null)
 const colorCanvas = ref<HTMLCanvasElement | null>(null)
 
+const color = ref({
+  name: 'red',
+  value: props.default
+})
+
+watch(color, (c) => {
+  if (!pickerRef.value) return
+  umbra({
+    background: c.value
+  }).apply({ target: pickerRef.value })
+})
+
 function getRef() {
   return colorCanvas
 }
@@ -46,11 +59,6 @@ function setRef(el: HTMLCanvasElement) {
   colorCanvas.value = el
 }
 
-const color = ref({
-  name: 'red',
-  value: props.default
-})
-
 function handleChange(hex?: hexType, mounted = false) {
   if (!hex) return
   const get = colorName(hex.color)
@@ -71,18 +79,19 @@ const hueWidth = ref(props.hueWidth)
 </script>
 
 <template>
-  <div class="dyepicker-wrapper" :class="{ compact }" v-on-click-outside="() => (compact = true)">
-    <div ref="pallet" class="pallet-wrapper">
-      <slot :color="color">
-        <Pallet
-          :color="color"
-          :hueWidth="hueWidth"
-          :compact="compact"
-          :compactSize="compactSize"
-          @edit="() => (compact = false)"
-        />
-      </slot>
-    </div>
+  <div
+    ref="pickerRef"
+    class="dyepicker-wrapper"
+    :class="{ compact }"
+    v-on-click-outside="() => (compact = true)"
+  >
+    <Pallet
+      :color="color"
+      :hueWidth="hueWidth"
+      :compact="compact"
+      :compactSize="compactSize"
+      @edit="() => (compact = false)"
+    />
     <ColorCanvas @change="handleChange" :getRef="getRef" :setRef="setRef" :color="color" />
     <HueCanvas
       @change="(props) => handleChange(props.hex, props.mounted)"
@@ -131,7 +140,7 @@ $desktop: 1200px;
   overflow: hidden;
 
   transition: 0.4s;
-  .pallet-wrapper {
+  .pallet {
     grid-column: span 2;
   }
 }
diff --git a/packages/dye/components/Pallet.vue b/packages/dye/components/Pallet.vue
index f9f53e9..84fc38b 100644
--- a/packages/dye/components/Pallet.vue
+++ b/packages/dye/components/Pallet.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { umbra } from '@umbrajs/core'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const emit = defineEmits(['edit'])
 const props = defineProps<{
@@ -13,18 +12,6 @@ const props = defineProps<{
   }
 }>()
 
-const pallet = ref<HTMLElement>()
-
-watch(
-  () => props.color,
-  (color) => {
-    if (!pallet.value) return
-    umbra({
-      background: color.value
-    }).apply({ target: pallet.value })
-  }
-)
-
 const copied = ref(false)
 
 function copyToClipboard() {
@@ -40,7 +27,7 @@ function handleClick() {
 </script>
 
 <template>
-  <div ref="pallet" class="pallet" :class="{ copied }" @click="handleClick">
+  <div class="pallet" :class="{ copied }" @click="handleClick">
     <div class="edit" v-if="compact">
       <p>Edit</p>
     </div>
diff --git a/packages/dye/composables/colorName/index.ts b/packages/dye/composables/colorName/index.ts
index 2732353..686e7a7 100644
--- a/packages/dye/composables/colorName/index.ts
+++ b/packages/dye/composables/colorName/index.ts
@@ -1,16 +1,15 @@
 // @ts-ignore
-import nearestColor from 'nearest-color';
-import {c} from './colornames'; //'color-name-list'
+import nearestColor from 'nearest-color'
+import { c } from './colornames' //'color-name-list'
 
 type nearestType = (hex: string) => {
-  name: string;
+  name: string
   value: string
-};
+}
 
-// @ts-ignore
-const colors = c.reduce((o, { name, hex }) => Object.assign(o, { [name]: hex }), {});
-const nearest: nearestType = nearestColor.from(colors);
+const colors = c.reduce((o, { name, hex }) => Object.assign(o, { [name]: hex }), {})
+const nearest: nearestType = nearestColor.from(colors)
 
 export function colorName(h: string) {
-  return (hex: string = h) => nearest(hex);
-}
\ No newline at end of file
+  return (hex: string = h) => nearest(hex)
+}
diff --git a/packages/dye/css/block.scss b/packages/dye/css/block.scss
new file mode 100644
index 0000000..6bbb025
--- /dev/null
+++ b/packages/dye/css/block.scss
@@ -0,0 +1,67 @@
+:root {
+  --block-size: 3em;
+  --block-inner-size: calc(var(--block-size) - var(--space-s));
+
+  --border-size: 1px;
+  --border-color: var(--base-120);
+  --border-style: solid;
+  --border: var(--border-size) var(--border-style) var(--border-color);
+}
+
+.page {
+  margin: auto;
+  max-width: calc(100vw - var(--space-xl));
+  width: 1300px;
+  transition: background 0.4s ease-in-out;
+
+  @media (max-width: 500px) {
+    max-width: calc(100vw);
+  }
+}
+
+.block {
+  display: flex;
+  align-items: center;
+  height: var(--block-size);
+  padding: 0px var(--space-s);
+}
+
+.rounded {
+  border-radius: var(--radius);
+}
+
+.border {
+  border: var(--border);
+  border-radius: var(--radius);
+}
+
+.panel {
+  border-radius: var(--radius);
+  //padding: var(--space-m);
+  background-color: var(--base-10);
+}
+
+.compact-panel {
+  border-radius: var(--radius);
+  padding: var(--space-s);
+  background-color: var(--base-10);
+}
+
+.post-flex {
+  display: flex;
+  gap: var(--space-s);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.color-flip {
+  filter: invert(90);
+  img,
+  .img {
+    filter: invert(1);
+    &::after {
+      filter: invert(90);
+    }
+  }
+}
diff --git a/packages/dye/css/color.scss b/packages/dye/css/color.scss
new file mode 100644
index 0000000..b2fab40
--- /dev/null
+++ b/packages/dye/css/color.scss
@@ -0,0 +1,13 @@
+html {
+  background: var(--base);
+  color: var(--base-120);
+}
+
+:root {
+  --background: #0c0915;
+  --background-10: #1e1a23;
+  --background-20: #423b40;
+  --foreground: #c0aea3;
+  --foreground-10: #9c8d87;
+  --foreground-20: #665c5c;
+}
diff --git a/packages/dye/css/elements.scss b/packages/dye/css/elements.scss
new file mode 100644
index 0000000..0581f5e
--- /dev/null
+++ b/packages/dye/css/elements.scss
@@ -0,0 +1,61 @@
+button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: 0px;
+  padding: 0.5rem 2rem;
+}
+
+button:not(.plain) {
+  background: var(--base-10);
+  border-radius: var(--radius);
+  border: 0px var(--border-style) var(--base-100);
+
+  min-width: var(--block-inner-size);
+  min-height: var(--block-inner-size);
+  max-height: var(--block-inner-size);
+}
+
+button.primary {
+  min-width: var(--block-size);
+  min-height: var(--block-size);
+  max-height: var(--block-size);
+}
+
+button.active {
+  background: var(--accent-20);
+  color: var(--accent);
+}
+
+button:disabled {
+  background: var(--base-110);
+  color: var(--base-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+button:focus button:active {
+  outline: 0px;
+}
+
+button:focus:not(.plain),
+button:active:not(.plain),
+textarea:focus:not(.plain),
+textarea:active:not(.plain),
+.focus:focus:not(.plain),
+.focus:active:not(.plain) {
+  outline: 2px var(--border-style) var(--accent);
+}
+
+img {
+  object-fit: cover;
+}
+
+.ProseMirror {
+  position: relative;
+}
diff --git a/packages/dye/css/index.scss b/packages/dye/css/index.scss
new file mode 100644
index 0000000..d701073
--- /dev/null
+++ b/packages/dye/css/index.scss
@@ -0,0 +1,50 @@
+@import "./block.scss";
+@import "./spaces";
+@import "./color";
+@import "./type";
+@import "./elements";
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html, body {
+  height: 100%;
+  overflow-x: hidden;
+  transition: background .8s ease-in-out;
+}
+/*
+  6. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+img {
+  background: var(--accent);
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
\ No newline at end of file
diff --git a/packages/dye/css/spaces.scss b/packages/dye/css/spaces.scss
new file mode 100644
index 0000000..34bcbc0
--- /dev/null
+++ b/packages/dye/css/spaces.scss
@@ -0,0 +1,20 @@
+$mobile: 360px;
+$phablet: 540px;
+$tablet: 850px;
+$desktop: 1200px;
+
+:root {
+  --space-xs: calc(var(--space) / 4);
+  --space-s: calc(var(--space) / 2);
+  --space: 25px;
+  --space-m: calc(2 * var(--space));
+  --space-l: calc(4 * var(--space));
+  --space-xl: calc(8 * var(--space));
+  
+  --inner-radius: 3px;
+  --radius: 10px;
+  --outer-radius: calc(var(--radius) + var(--space-s));
+
+  @media only screen and (max-width: $tablet) {--space: 12px;}
+  @media only screen and (max-width: $mobile) {--space: 6px;}
+}
\ No newline at end of file
diff --git a/packages/dye/css/type.scss b/packages/dye/css/type.scss
new file mode 100644
index 0000000..1d81fc5
--- /dev/null
+++ b/packages/dye/css/type.scss
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --font-bold: 'wght' 900, 'wdth' 100;
+  --font-semibold: 'wght' 800, 'wdth' 100;
+  --font-medium: 'wght' 700, 'wdth' 100;
+  --font-regular: 'wght' 200, 'wdth' 100;
+  --font-light: 'wght' 100, 'wdth' 100;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: 'Inter', 'Flexa', sans-serif;
+  font-size: clamp(16px, 1vw, 24px);
+}
+
+body {
+  line-height: 1.5;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+button {
+  max-width: clamp(100px, 100vw, 55ch);
+  text-transform: uppercase;
+  transition: color 0.004s ease-in-out;
+}
+
+h1,
+.h1 {
+  --size: clamp(3.2rem, 5vw, 5rem);
+  font-size: var(--size);
+  line-height: var(--size);
+  font-variation-settings: var(--font-bold);
+}
+
+h2,
+.h2 {
+  --size: clamp(2.5rem, 4vw, 3rem);
+  font-size: var(--size);
+  line-height: var(--size);
+  font-variation-settings: var(--font-bold);
+}
+
+h3,
+.h3 {
+  --size: clamp(1.5rem, 4vw, 2rem);
+  font-size: var(--size);
+  line-height: var(--size);
+  letter-spacing: -0.5px;
+  font-variation-settings: var(--font-medium);
+}
+
+::-moz-selection,
+::-webkit-selection,
+::selection {
+  color: var(--accent) !important;
+  background: var(--accent-20) !important;
+}
+
+p,
+button,
+.bodycopy,
+blockquote {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.3rem;
+  letter-spacing: 0px;
+  max-width: clamp(300px, 100vw, 500px);
+  font-variation-settings: var(--font-regular);
+  color: var(--base-120);
+  transition: color 0.004s ease-in-out;
+  span,
+  strong {
+    font-variation-settings: var(--font-bold);
+  }
+  &.slugline {
+    //text-transform: uppercase;
+    //letter-spacing: 0.1rem;
+    font-size: 1.3rem;
+    line-height: 1.2;
+    font-variation-settings: var(--font-bold);
+  }
+  &.caption {
+    font-size: 1rem;
+    line-height: 1rem;
+    font-variation-settings: var(--font-light);
+  }
+}
+
+button {
+  font-variation-settings: var(--font-semibold);
+  font-weight: 900;
+  text-transform: lowercase;
+}
diff --git a/packages/dye/index.html b/packages/dye/index.html
new file mode 100644
index 0000000..9235ee6
--- /dev/null
+++ b/packages/dye/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/packages/dye/main.ts b/packages/dye/main.ts
new file mode 100644
index 0000000..01433bc
--- /dev/null
+++ b/packages/dye/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')