scope umbra to the entire color picker not just the pallet

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>

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>

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

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>

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);
-}
+  return (hex: string = h) => nearest(hex)
+}

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

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

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

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