fix package

package-lock.json

@@ -35,7 +35,6 @@
         "@million/lint": "^1.0.14",
         "@react-hook/resize-observer": "^2.0.1",
         "@replit/codemirror-interact": "^6.3.1",
-        "@texel/color": "^1.1.10",
         "@ts-stack/markdown": "^1.5.0",
         "@tweenjs/tween.js": "^23.1.1",
         "@xstate/inspect": "^0.8.0",
@@ -44,6 +43,7 @@
         "bson": "^6.10.3",
         "chokidar": "^4.0.3",
         "codemirror": "^6.0.1",
+        "culori": "^4.0.2",
         "decamelize": "^6.0.0",
         "diff": "^7.0.0",
         "electron-updater": "^6.6.2",
@@ -93,6 +93,7 @@
         "@playwright/test": "^1.52.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^15.0.7",
+        "@types/culori": "^4.0.0",
         "@types/diff": "^7.0.2",
         "@types/electron": "^1.6.10",
         "@types/hammerjs": "^2.0.46",
@@ -7244,12 +7245,6 @@
         }
       }
     },
-    "node_modules/@texel/color": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@texel/color/-/color-1.1.10.tgz",
-      "integrity": "sha512-0du+jhP68nvdXGoS/dxAyqkmWWzsogtU3chygmNf/u4QtDIbG1e5OfcVIWfx29B5ANCLEDOPEQIvOhrvwhlORg==",
-      "license": "MIT"
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -7399,6 +7394,13 @@
       "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==",
       "license": "MIT"
     },
+    "node_modules/@types/culori": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/culori/-/culori-4.0.0.tgz",
+      "integrity": "sha512-aFljQwjb++sl6TAyEXeHTiK/fk9epZOQ+nMmadjnAvzZFIvNoQ0x8XQYfcOaRTBwmDUPUlghhZCJ66MTcqQAsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -11830,6 +11832,15 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/culori": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-4.0.2.tgz",
+      "integrity": "sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",

package.json

@@ -37,7 +37,6 @@
     "@million/lint": "^1.0.14",
     "@react-hook/resize-observer": "^2.0.1",
     "@replit/codemirror-interact": "^6.3.1",
-    "@texel/color": "^1.1.10",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
     "@xstate/inspect": "^0.8.0",
@@ -46,6 +45,7 @@
     "bson": "^6.10.3",
     "chokidar": "^4.0.3",
     "codemirror": "^6.0.1",
+    "culori": "^4.0.2",
     "decamelize": "^6.0.0",
     "diff": "^7.0.0",
     "electron-updater": "^6.6.2",
@@ -168,6 +168,7 @@
     "@playwright/test": "^1.52.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
+    "@types/culori": "^4.0.0",
     "@types/diff": "^7.0.2",
     "@types/electron": "^1.6.10",
     "@types/hammerjs": "^2.0.46",

src/lib/theme.ts

@@ -1,5 +1,5 @@
 import type { AppTheme } from '@rust/kcl-lib/bindings/AppTheme'
-import { convert, OKLCH, sRGB } from '@texel/color'
+import { converter } from 'culori'
 
 /** A media query matcher for dark mode */
 export const darkModeMatcher =
@@ -60,20 +60,28 @@ export function getOppositeTheme(theme: Themes) {
 }
 
 /**
- * Converts OKLCH values to RGB using @texel/color library
+ * Converts OKLCH values to RGB using Culori library
  * @param l - Lightness (0-1)
  * @param c - Chroma (0-1)
  * @param h - Hue (0-360 degrees)
  * @returns RGB values as [r, g, b] where each component is 0-255
  */
 function oklchToRgb(l: number, c: number, h: number): [number, number, number] {
-  // Convert OKLCH to sRGB using @texel/color
+  // Create a converter from OKLCH to RGB using Culori
-  const [r, g, b] = convert([l, c, h], OKLCH, sRGB)
+  const toRgb = converter('rgb')
+
+  // Convert OKLCH to RGB using Culori
+  const rgb = toRgb({ mode: 'oklch', l, c, h })
+
+  if (!rgb) {
+    // Fallback if conversion fails
+    return [255, 255, 255]
+  }
 
   // Clamp values. When OKLCH values represent colors outside the sRGB gamut, the RGB values can be negative or greater than 1.
-  const clampedR = Math.max(0, Math.min(1, r))
+  const clampedR = Math.max(0, Math.min(1, rgb.r))
-  const clampedG = Math.max(0, Math.min(1, g))
+  const clampedG = Math.max(0, Math.min(1, rgb.g))
-  const clampedB = Math.max(0, Math.min(1, b))
+  const clampedB = Math.max(0, Math.min(1, rgb.b))
 
   // Convert from 0-1 range to 0-255 range
   return [