adjust dye

package.json

@@ -5,6 +5,7 @@
     "dev": "cd packages/playground && pnpm run dev",
     "docs": "cd packages/docs && pnpm run dev",
     "dye": "cd packages/dye && pnpm run dev",
+    "dye:build": "cd packages/dye && pnpm run build",
     "build": "cd packages/core && tsc && vite build && copy package.json dist && copy README.md dist",
     "publish": "cd packages/core/dist && npm publish",
     "tree": "tree -I 'node_modules|dist'"

packages/dye/src/components/Canvas/ColorCanvas.vue → packages/dye/components/Canvas/ColorCanvas.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, Ref, watch } from 'vue'
-import tinycolor from 'tinycolor2'
+import { colord } from 'colord'
 import {
   hexType,
   offCanvas,
@@ -48,8 +48,8 @@ const { mouseOn } = outsideCanvas({
 })
 
 function getHue(color: string = props.color.value) {
-  const hsv = tinycolor(color).toHsv()
-  return tinycolor({ h: hsv.h, s: 100, v: 100 }).toHexString()
+  const hsv = colord(color).toHsv()
+  return colord({ h: hsv.h, s: 100, v: 100 }).toHex()
 }
 
 const { width, height } = responsiveCanvas({
@@ -71,7 +71,7 @@ function getPercent(percent: number, height?: number) {
 }
 
 watch(width, () => {
-  var color = tinycolor(props.color.value)
+  var color = colord(props.color.value)
   const hsl = color.toHsl()
   position.value = {
     x: getPercent(hsl.s * 100, width.value),

packages/dye/src/components/Canvas/HueCanvas.vue → packages/dye/components/Canvas/HueCanvas.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import tinycolor from 'tinycolor2'
+import { colord } from 'colord'
 import { ref, onMounted, Ref, watch } from 'vue'
 import { getDimentions } from '../../composables/canvas'
 import {
@@ -44,8 +44,9 @@ function hueGradient(
   hsl: Hsl = { h: 0, s: 1, l: 0.5 }
 ) {
   const gradient = ctx.createLinearGradient(0, 0, 0, height)
+  console.log('rex: ', hsl)
   for (var hue = 0; hue <= 360; hue++) {
-    var hslColor = `hsl(${hue}, ${hsl.s * 100}%, ${hsl.l * 100}%)`
+    var hslColor = `hsl(${hue}, ${hsl.s}%, ${hsl.l}%)`
     gradient.addColorStop(hue / 360, hslColor)
   }
   return gradient
@@ -57,7 +58,7 @@ function fillHueCanvas(color: string = props.color.value) {
   if (ctx === null) return
   const { height, width } = getDimentions(hueCanvas.value)
 
-  const hsl = tinycolor(color).toHsl()
+  const hsl = colord(color).toHsl()
   ctx.fillStyle = hueGradient(ctx, height, hsl)
   ctx.fillRect(0, 0, width, height)
 }
@@ -115,7 +116,7 @@ onMounted(() => {
   fillHueCanvas()
   setCenterHandle()
 
-  var color = tinycolor(props.color.value)
+  var color = colord(props.color.value)
   const hsl = color.toHsl()
 
   updateCanvas({

packages/dye/src/components/DyePicker.vue → packages/dye/components/DyePicker.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import tinycolor from "tinycolor2"
+import { colord } from 'colord'
 import { vOnClickOutside } from '@vueuse/components'
 
 import { ref } from 'vue'
-import { colorName } from "../composables/colorName"
+import { colorName } from '../composables/colorName'
 import { hexType } from '../composables/canvas'
-import Pallet from "./Pallet.vue";
-import ColorCanvas from "./Canvas/ColorCanvas.vue";
-import HueCanvas from "./Canvas/HueCanvas.vue";
+import Pallet from './Pallet.vue'
+import ColorCanvas from './Canvas/ColorCanvas.vue'
+import HueCanvas from './Canvas/HueCanvas.vue'
 
 const emit = defineEmits(['change'])
 const props = defineProps<{
-  default: string;
+  default: string
 }>()
 
 const pallet = ref<HTMLElement | null>(null)
@@ -27,7 +27,7 @@ function setRef(el: HTMLCanvasElement) {
 
 const color = ref({
   name: 'red',
-  value: props.default,
+  value: props.default
 })
 
 function handleChange(hex?: hexType) {
@@ -38,7 +38,7 @@ function handleChange(hex?: hexType) {
 
   emit('change', {
     name,
-    value: tinycolor(value),
+    value: colord(value),
     position: hex.position
   })
 }
@@ -49,41 +49,45 @@ const hueWidth = ref(25)
 </script>
 
 <template>
-  <div 
-    class="dyepicker-wrapper" 
-    :class="{ compact }"
-    v-on-click-outside="() => compact = true"
-  >
-    <div 
-      ref="pallet" 
-      class="pallet-wrapper"
-    >
-      <slot :color="color" >
+  <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"
+          @edit="() => (compact = false)"
         />
       </slot>
     </div>
-    <ColorCanvas
-      @change="handleChange"
-      :getRef="getRef"
-      :setRef="setRef"
-      :color="color"
-    />
-    <HueCanvas
-      @change="handleChange"
-      :colorCanvas="getRef"
-      :color="color"
-      :width="hueWidth"
-    />
+    <ColorCanvas @change="handleChange" :getRef="getRef" :setRef="setRef" :color="color" />
+    <HueCanvas @change="handleChange" :colorCanvas="getRef" :color="color" :width="hueWidth" />
   </div>
 </template>
 
 <style lang="scss" scoped>
+$mobile: 360px;
+$phablet: 540px;
+$tablet: 850px;
+$desktop: 1200px;
+
+.dyepicker-wrapper {
+  --radius: 5px;
+  --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));
+  @media only screen and (max-width: $tablet) {
+    --space: 12px;
+  }
+  @media only screen and (max-width: $mobile) {
+    --space: 6px;
+  }
+}
+
 .dyepicker-wrapper {
   --hueWidth: calc(v-bind(hueWidth) * 1px);
 
@@ -99,7 +103,7 @@ const hueWidth = ref(25)
   border-radius: var(--radius);
   overflow: hidden;
 
-  transition: .4s;
+  transition: 0.4s;
   .pallet-wrapper {
     grid-column: span 2;
   }

packages/dye/composables/gradient.ts

@@ -0,0 +1,60 @@
+import { colord } from 'colord'
+import { getDimentions } from './canvas'
+
+type dimentionsType = {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+
+type sizesType = {
+  height: number
+  width: number
+  dimentions: dimentionsType
+}
+
+type colorWheelType = {
+  hue?: string
+  saturation?: number
+  lightness?: number
+}
+
+//shared canvas functions
+export function fillRect(ctx: CanvasRenderingContext2D, dimentions: dimentionsType) {
+  ctx.fillRect(dimentions.left, dimentions.top, dimentions.right, dimentions.bottom)
+}
+
+function draw(hue: string, ctx: CanvasRenderingContext2D, sizes: sizesType) {
+  const { width, height, dimentions } = sizes
+  var color = colord(hue)
+  const hsl = color.toHsl()
+  for (var row = 0; row < 100; row++) {
+    var grad = ctx.createLinearGradient(0, 0, width, 0)
+    grad.addColorStop(0, 'hsl(' + hsl.h + ', 0%, ' + (100 - row) + '%)')
+    grad.addColorStop(1, 'hsl(' + hsl.h + ', 100%, ' + (100 - row) + '%)')
+    ctx.fillStyle = grad
+    fillRect(ctx, {
+      left: dimentions.left,
+      top: dimentions.top + (row * height) / 100,
+      right: dimentions.right,
+      bottom: dimentions.bottom
+    })
+  }
+}
+
+//composition
+export function fillColorCanvas(props?: colorWheelType, canvas?: HTMLCanvasElement | null) {
+  if (!canvas) return
+  const { hue = 'red', saturation = 100, lightness = 100 } = props || {}
+
+  const ctx = canvas.getContext('2d')
+  if (ctx === null) return
+
+  const sizes = getDimentions(canvas, {
+    height: lightness,
+    width: saturation
+  })
+
+  draw(hue, ctx, sizes)
+}

packages/dye/index.ts

@@ -0,0 +1,7 @@
+import DyePicker from './components/DyePicker.vue'
+import ColorCanvas from './components/Canvas/ColorCanvas.vue'
+import HueCanvas from './components/Canvas/HueCanvas.vue'
+import Pallet from './components/Pallet.vue'
+import Handle from './components/Handle.vue'
+
+export { DyePicker, ColorCanvas, HueCanvas, Pallet, Handle }

packages/dye/package.json

@@ -38,13 +38,12 @@
     "@umbrajs/core": "link:../core",
     "@vueuse/components": "^10.1.2",
     "@vueuse/core": "^10.1.2",
+    "colord": "^2.9.3",
     "nearest-color": "^0.4.4",
-    "tinycolor2": "^1.6.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^20.2.1",
-    "@types/tinycolor2": "^1.4.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "sass": "^1.56.2",