switch to @texel/color for color conversions

appears to be faster & smaller

Author: CaptainCodeman

package.json

@@ -54,8 +54,7 @@
 		"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
 	},
 	"dependencies": {
-		"@types/culori": "^2.1.1",
-		"culori": "^4.0.1"
+		"@texel/color": "^1.1.4"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.6",

pnpm-lock.yaml

@@ -9,7 +9,7 @@
 	} from './constants'
 	import { render_main_image, render_slider_image } from './render'
 	import type { RGB, OKlab, OKhsv } from './color'
-	import { oklab_to_okhsv, rgb_to_oklab, okhsv_to_oklab, oklab_to_rgb } from './color'
+	import { oklab_to_okhsv, okhsv_to_oklab, rgb_to_okhsv, okhsv_to_rgb } from './color'
 
 	export let rgb: RGB | undefined = undefined
 	export let oklab: OKlab | undefined = undefined
@@ -48,7 +48,7 @@
 		}
 
 		if (rgb) {
-			return oklab_to_okhsv(rgb_to_oklab(rgb))
+			return rgb_to_okhsv(rgb)
 		}
 
 		throw 'rgb, oklab, or okhsv required'
@@ -66,7 +66,7 @@
 		}
 
 		if (rgb) {
-			rgb = oklab_to_rgb(okhsv_to_oklab(color))
+			rgb = okhsv_to_rgb(color)
 			dispatch('change', { rgb })
 		}
 	}

src/lib/ColorSelect.svelte

@@ -1,53 +1,50 @@
-import {
-  convertOklabToRgb,
-  convertOkhsvToOklab,
-  convertRgbToOklab,
-  convertOklabToOkhsv,
-  convertOkhslToOklab,
-} from 'culori/fn'
-
+import { convert, OKHSL, OKHSV, OKLab, sRGB } from '@texel/color'
 
 export interface RGB {
-  r: number
-  g: number
-  b: number
+	r: number
+	g: number
+	b: number
 }
 
 export interface OKlab {
-  l: number
-  a: number
-  b: number
+	l: number
+	a: number
+	b: number
 }
 
 export interface OKhsv {
-  h: number
-  s: number
-  v: number
+	h: number
+	s: number
+	v: number
 }
 
 export interface OKhsl {
-  h: number
-  s: number
-  l: number
+	h: number
+	s: number
+	l: number
 }
 
-export function oklab_to_rgb(oklab: OKlab): RGB {
-  return convertOklabToRgb(oklab)
+export function oklab_to_okhsv(oklab: OKlab): OKhsv {
+	const [h, s, v] = convert([oklab.l, oklab.a, oklab.b], OKLab, OKHSV)
+	return { h: h ?? 0, s, v }
 }
 
-export function oklab_to_okhsv(oklab: OKlab): OKhsv {
-  const { h, s, v } = convertOklabToOkhsv(oklab)
-  return { h: h ?? 0, s, v }
+export function okhsv_to_rgb(okhsv: OKhsv): RGB {
+	const [r, g, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, sRGB)
+	return { r, g, b }
 }
 
 export function okhsv_to_oklab(okhsv: OKhsv): OKlab {
-  return convertOkhsvToOklab(okhsv)
+	const [l, a, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, OKLab)
+	return { l, a, b }
 }
 
-export function rgb_to_oklab(rgb: RGB): OKlab {
-  return convertRgbToOklab(rgb)
+export function rgb_to_okhsv(rgb: RGB): OKhsv {
+	const [h, s, v] = convert([rgb.r, rgb.g, rgb.b], sRGB, OKHSV)
+	return { h, s, v }
 }
 
-export function okhsl_to_oklab(okhsl: OKhsl): OKlab {
-  return convertOkhslToOklab(okhsl)
+export function okhsl_to_rgb(okhsl: OKhsl): RGB {
+	const [r, g, b] = convert([okhsl.h, okhsl.s, okhsl.l], OKHSL, sRGB)
+	return { r, g, b }
 }

src/lib/color.ts

@@ -1,6 +1,6 @@
 import { f_shader, v_shader } from './shaders'
 import { picker_size, slider_width } from './constants'
-import { okhsl_to_oklab, oklab_to_rgb } from './color'
+import { okhsl_to_rgb } from './color'
 
 export function render_slider_image(canvas: HTMLCanvasElement) {
 	const ctx = canvas.getContext('2d')!
@@ -10,11 +10,11 @@ export function render_slider_image(canvas: HTMLCanvasElement) {
 		const a_ = Math.cos(2 * Math.PI * i / picker_size)
 		const b_ = Math.sin(2 * Math.PI * i / picker_size)
 
-		const rgb = oklab_to_rgb(okhsl_to_oklab({
+		const rgb = okhsl_to_rgb({
 			h: i / picker_size * 360,
 			s: 0.9,
 			l: 0.65 + 0.17 * b_ - 0.08 * a_,
-		}))
+		})
 
 		for (let j = 0; j < slider_width; j++) {
 			const index = 4 * (i * slider_width + j)