feat: update color picker to use colortranslator instead of color pkg

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b",
+  "packageManager": "pnpm@10.1.0+sha512.c89847b0667ddab50396bbbd008a2a43cf3b581efd59cf5d9aa8923ea1fb4b8106c041d540d08acb095037594d73ebc51e1ec89ee40c88b30b8a66c0fae0ac1b",
   "scripts": {
     "test": "vitest",
     "lint": "eslint .",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^12.5.0",
     "@vueuse/shared": "^12.5.0",
-    "color": "^4.2.3",
+    "colortranslator": "^4.1.0",
     "defu": "^6.1.4",
     "ohash": "^1.1.4",
     "reka-ui": "1.0.0-alpha.8",

src/components/ColorPicker/ColorPicker.test.ts

@@ -10,7 +10,8 @@ describe('color-picker', () => {
     ['hex', '#00C16A'],
     ['rgb', 'rgb(0, 193, 106)'],
     ['hsl', 'hsl(153, 100%, 37.8%)'],
-    ['hwb', 'hwb(150, 0%, 24%)'],
+    ['lab', 'lab(68.88% -60.41% 32.55%)'],
+    ['cmyk', 'cmyk(100%, 0%, 45.08%, 24.31%)'],
   ]
 
   it.each<[string, RenderOptions<typeof ColorPicker>]>([

src/components/ColorPicker/ColorPicker.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
 import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { HSLObject } from 'colortranslator'
 import type { VariantProps } from 'tailwind-variants'
 import theme from '@/ui/theme/color-picker'
 import { useElementBounding, useEventListener, watchPausable, watchThrottled } from '@vueuse/core'
 import { isClient } from '@vueuse/shared'
-import Color from 'color'
+import { ColorTranslator } from 'colortranslator'
 import { Primitive } from 'reka-ui'
 import { tv } from 'tailwind-variants'
 import { computed, nextTick, ref, toValue } from 'vue'
@@ -19,12 +20,31 @@ interface HSVColor {
   v: number
 }
 
+function HSLtoHSV(hsl: HSLObject): HSVColor {
+  const x = hsl.S * (hsl.L < 50 ? hsl.L : 100 - hsl.L)
+  const v = hsl.L + (x / 100)
+  return {
+    h: hsl.H,
+    s: hsl.L === 0 ? hsl.S : 2 * x / v,
+    v,
+  }
+}
+
+function HSVtoHSL(hsv: HSVColor): HSLObject {
+  const x = (200 - hsv.s) * hsv.v / 100
+  return {
+    H: hsv.h,
+    S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
+    L: Math.round(x / 2),
+  }
+}
+
 export interface ColorPickerProps {
   as?: any
   throttle?: number
   disabled?: boolean
   defaultValue?: string
-  format?: 'hex' | 'rgb' | 'hsl' | 'hwb'
+  format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
   size?: ColorPickerVariants['size']
   class?: any
   ui?: Partial<typeof colorPicker.slots>
@@ -42,29 +62,38 @@ const modelValue = defineModel<string>(undefined)
 const pickedColor = computed<HSVColor>({
   get() {
     try {
-      const color = Color(modelValue.value || props.defaultValue)
-      return color.hsv().object() as HSVColor
+      const color = new ColorTranslator(modelValue.value || props.defaultValue)
+
+      return HSLtoHSV(color.HSLObject)
     }
     catch (_) {
       return { h: 0, s: 0, v: 100 }
     }
   },
   set(value) {
-    const color = Color.hsv(value.h, value.s, value.v)
+    const color = new ColorTranslator(HSVtoHSL(value), {
+      decimals: 2,
+      labUnit: 'percent',
+      cmykUnit: 'percent',
+      cmykFunction: 'cmyk',
+    })
 
     switch (props.format) {
       case 'rgb':
-        modelValue.value = color.rgb().string()
+        modelValue.value = color.RGB
         break
       case 'hsl':
-        modelValue.value = color.hsl().string()
+        modelValue.value = color.HSL
+        break
+      case 'cmyk':
+        modelValue.value = color.CMYK
         break
-      case 'hwb':
-        modelValue.value = color.hwb().string()
+      case 'lab':
+        modelValue.value = color.CIELab
         break
       case 'hex':
       default:
-        modelValue.value = color.hex()
+        modelValue.value = color.HEX
     }
   },
 })
@@ -179,18 +208,18 @@ watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
   nextTick(resumeWatchColor)
 }, { throttle: () => props.throttle })
 
-const trackThumbColor = computed(() => Color({
+const trackThumbColor = computed(() => new ColorTranslator(HSVtoHSL({
   h: normalizeHue(trackThumbPosition.value.y),
   s: 100,
   v: 100,
-}).hex())
+})).HEX)
 
 const selectorStyle = computed(() => ({
   backgroundColor: trackThumbColor.value,
 }))
 
 const selectorThumbStyle = computed(() => ({
-  backgroundColor: Color(modelValue.value || props.defaultValue).hex(),
+  backgroundColor: new ColorTranslator(modelValue.value || props.defaultValue).HEX,
   left: `${selectorThumbPosition.value.x}%`,
   top: `${selectorThumbPosition.value.y}%`,
 }))

src/components/ColorPicker/__snapshots__/ColorPicker.test.ts.snap

@@ -129,6 +129,48 @@ exports[`color-picker > renders with disabled correctly 1`] = `
 </div>
 `;
 
+exports[`color-picker > renders with format cmyk correctly 1`] = `
+<div
+  class="data-[disabled]:opacity-75"
+  data-testid="color-picker"
+  data-v-0d9dad41=""
+>
+  <div
+    class="flex gap-4"
+    data-v-0d9dad41=""
+  >
+    <div
+      class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42"
+      data-v-0d9dad41=""
+      style="background-color: rgb(0, 255, 140);"
+    >
+      <div
+        class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]"
+        data-color-picker-background=""
+        data-v-0d9dad41=""
+      >
+        <div
+          class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed"
+          data-v-0d9dad41=""
+          style="background-color: rgb(0, 193, 106); left: 100%; top: 24.310000000000002%;"
+        />
+      </div>
+    </div>
+    <div
+      class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42"
+      data-color-picker-track=""
+      data-v-0d9dad41=""
+    >
+      <div
+        class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed"
+        data-v-0d9dad41=""
+        style="background-color: rgb(0, 255, 140); top: 42.48666666666667%;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`color-picker > renders with format hex correctly 1`] = `
 <div
   class="data-[disabled]:opacity-75"
@@ -152,7 +194,7 @@ exports[`color-picker > renders with format hex correctly 1`] = `
         <div
           class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed"
           data-v-0d9dad41=""
-          style="background-color: rgb(0, 193, 106); left: 100%; top: 24.313725490196077%;"
+          style="background-color: rgb(0, 193, 106); left: 100%; top: 24.313726000000003%;"
         />
       </div>
     </div>
@@ -164,7 +206,7 @@ exports[`color-picker > renders with format hex correctly 1`] = `
       <div
         class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed"
         data-v-0d9dad41=""
-        style="background-color: rgb(0, 255, 140); top: 42.48704663212436%;"
+        style="background-color: rgb(0, 255, 140); top: 42.48704666666667%;"
       />
     </div>
   </div>
@@ -213,7 +255,7 @@ exports[`color-picker > renders with format hsl correctly 1`] = `
 </div>
 `;
 
-exports[`color-picker > renders with format hwb correctly 1`] = `
+exports[`color-picker > renders with format lab correctly 1`] = `
 <div
   class="data-[disabled]:opacity-75"
   data-testid="color-picker"
@@ -226,7 +268,7 @@ exports[`color-picker > renders with format hwb correctly 1`] = `
     <div
       class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42"
       data-v-0d9dad41=""
-      style="background-color: rgb(0, 255, 128);"
+      style="background-color: rgb(0, 255, 111);"
     >
       <div
         class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]"
@@ -236,7 +278,7 @@ exports[`color-picker > renders with format hwb correctly 1`] = `
         <div
           class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed"
           data-v-0d9dad41=""
-          style="background-color: rgb(0, 194, 97); left: 100%; top: 24%;"
+          style="background-color: rgb(0, 199, 87); left: 100%; top: 22.031043999999994%;"
         />
       </div>
     </div>
@@ -248,7 +290,7 @@ exports[`color-picker > renders with format hwb correctly 1`] = `
       <div
         class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed"
         data-v-0d9dad41=""
-        style="background-color: rgb(0, 255, 128); top: 41.666666666666664%;"
+        style="background-color: rgb(0, 255, 111); top: 40.609066111111105%;"
       />
     </div>
   </div>
@@ -278,7 +320,7 @@ exports[`color-picker > renders with format rgb correctly 1`] = `
         <div
           class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed"
           data-v-0d9dad41=""
-          style="background-color: rgb(0, 193, 106); left: 100%; top: 24.313725490196077%;"
+          style="background-color: rgb(0, 193, 106); left: 100%; top: 24.313726000000003%;"
         />
       </div>
     </div>
@@ -290,7 +332,7 @@ exports[`color-picker > renders with format rgb correctly 1`] = `
       <div
         class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed"
         data-v-0d9dad41=""
-        style="background-color: rgb(0, 255, 140); top: 42.48704663212436%;"
+        style="background-color: rgb(0, 255, 140); top: 42.48704666666667%;"
       />
     </div>
   </div>