fix types

src/components/ColorChannelPicker.svelte

@@ -133,8 +133,7 @@
     onColorChange(outColor);
   }
 
-  $: formatter = (x: number) =>
-    Number(colorPickerConfig[colorMode].axisLabel(x));
+  $: formatter = (x: any) => Number(colorPickerConfig[colorMode].axisLabel(x));
 </script>
 
 <div class="flex flex-col">

src/components/Modal.svelte

@@ -58,7 +58,4 @@
       opacity: 1;
     }
   }
-  button {
-    display: block;
-  }
 </style>

src/components/PalPreview.svelte

@@ -40,8 +40,8 @@
     {:else}
       <div
         class={"w-6 h-6 mx-2 rounded-full transition-all"}
-        class:w-8={highlightSelected && focusedColors.has(idx)}
-        class:h-8={highlightSelected && focusedColors.has(idx)}
+        class:w-8={highlightSelected && focusSet.has(idx)}
+        class:h-8={highlightSelected && focusSet.has(idx)}
         style="background-color: {color.toDisplay()}"
       ></div>
     {/if}

src/content-modules/Examples.svelte

@@ -19,7 +19,7 @@
   let modalState: "closed" | "input-svg" | "edit-colors" = "closed";
   let modifyingExample: number | false = false;
   $: bg = $colorStore.currentPal.background;
-  $: colorSpace = $colorStore.currentPal.colorSpace as any;
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   let value = "";
 
   function detectColorsInSvgString(svgString: string) {
@@ -101,7 +101,6 @@
                 class={buttonStyle}
                 on:click={() => {
                   value = example.svg;
-                  console.log(value);
                   modalState = "input-svg";
                   modifyingExample = idx;
                 }}

src/content-modules/SavedPals.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div class="overflow-auto">
-  {#each $colorStore.palettes as pal}
+  {#each $colorStore.palettes as pal, i}
     <div class="flex flex-col mt-2 h-fit">
       <div class="flex items-center justify-between">
         <div>
@@ -33,7 +33,7 @@
             <button
               class={buttonStyle}
               on:click={() => {
-                colorStore.removePal(pal.name);
+                colorStore.removePal(i);
                 onClick();
               }}
             >

src/content-modules/SwatchTooltipContent.svelte

@@ -10,7 +10,7 @@
   export let color: Color;
   export let closeTooltip: () => void;
   $: colors = $colorStore.currentPal.colors;
-  $: colorSpace = $colorStore.currentPal.colorSpace as any;
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   function updateColor(color: Color) {
     const updatedColors = [...colors];

src/content-modules/contextual-tools/AddColor.svelte

@@ -152,9 +152,11 @@
           class={buttonStyle}
           on:click={() => {
             const newSuggestions = [...suggestions];
-            [randColor(), randColor(), randColor()].map((x) =>
-              newSuggestions.push(x.toHex())
-            );
+            [
+              randColor(colorSpace),
+              randColor(colorSpace),
+              randColor(colorSpace),
+            ].map((x) => newSuggestions.push(x.toHex()));
             suggestions = newSuggestions;
           }}
         >

src/content-modules/contextual-tools/InterpolatePoints.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Color, colorFromChannels, toColorSpace } from "../../lib/Color";
+  import { Color, colorFromChannels } from "../../lib/Color";
   import type { Palette } from "../../stores/color-store";
   import ColorIO from "colorjs.io";
   import colorStore from "../../stores/color-store";
@@ -33,15 +33,11 @@
       }
 
       if (t === 0 || t === 1) continue;
-      const adjustedSpace = colorSpace === "rgb" ? "srgb" : colorSpace;
-      const space = pointA.spaceName === "rgb" ? "srgb" : pointA.spaceName;
-      const [x1, x2, x3] = new ColorIO(space, pointA.toChannels()).to(
-        adjustedSpace
-      ).coords;
-      const bSpace = pointB.spaceName === "rgb" ? "srgb" : pointB.spaceName;
-      const [y1, y2, y3] = new ColorIO(bSpace, pointB.toChannels()).to(
-        adjustedSpace
-      ).coords;
+      const spaceOverWrite = { rgb: "srgb" } as any;
+      const adjustedSpace = spaceOverWrite[colorSpace] || colorSpace;
+      const space = spaceOverWrite[pointA.spaceName] || pointA.spaceName;
+      const [x1, x2, x3] = pointA.toColorIO().to(adjustedSpace).coords;
+      const [y1, y2, y3] = pointB.toColorIO().to(adjustedSpace).coords;
       const lab = [
         x1 * (1 - t) + y1 * t,
         x2 * (1 - t) + y2 * t,

src/lib/Color.ts

@@ -5,7 +5,6 @@ import ColorIO from "colorjs.io";
 type Domain = Record<string, [number, number]>;
 type Channels = [number, number, number];
 const hexCache = new Map<string, string>();
-const cssColorCache = new Map<string, string>();
 export class Color {
   name: string = "";
   channels: Record<string, number> = {};
@@ -304,7 +303,7 @@ export const colorDirectory = {
   lch: LCH,
   oklab: OKLAB,
   oklch: OKLCH,
-  // rgb: RGB,
+  rgb: RGB,
   srgb: RGB,
 };
 

src/lib/lints/background-differentiability.ts

@@ -40,7 +40,10 @@ export default class BackgroundDifferentiability extends ColorLint<
       const color = colors[idx];
       const newColor = toColorSpace(color, "lab");
       const [_l, a, b] = newColor.toChannels();
-      return toColorSpace(newColor.fromChannels([newL, a, b]), colorSpace);
+      return toColorSpace(
+        newColor.fromChannels([newL, a, b]),
+        colorSpace as any
+      );
     });
     return { ...this.palette, colors: newColors };
   }

src/lib/utils.ts

@@ -39,9 +39,9 @@ export function avgColors(
   ] as ColorChannels);
   const avgColor = sumColor.map((x) => x / colors.length) as ColorChannels;
   if (avgColor.some((x) => isNaN(x))) {
-    return colorFromString("#000000", colorSpace);
+    return colorFromString("#000000", colorSpace as any);
   }
-  return colorFromChannels(avgColor, colorSpace);
+  return colorFromChannels(avgColor, colorSpace as any);
 }
 
 export function opposingColor(color: Color): Color {

src/stores/color-store.ts

@@ -77,13 +77,15 @@ function convertStoreHexToColor(store: StorageData): StoreData {
   return {
     palettes: store.palettes.map((x) => ({
       ...x,
-      background: colorFromString(x.background, x.colorSpace),
-      colors: x.colors.map((y) => colorFromString(y, x.colorSpace)),
+      background: colorFromString(x.background, x.colorSpace as any),
+      colors: x.colors.map((y) => colorFromString(y, x.colorSpace as any)),
     })),
     currentPal: {
       ...store.currentPal,
-      background: colorFromString(store.currentPal.background, space),
-      colors: store.currentPal.colors.map((y) => colorFromString(y, space)),
+      background: colorFromString(store.currentPal.background, space as any),
+      colors: store.currentPal.colors.map((y) =>
+        colorFromString(y, space as any)
+      ),
     },
   };
 }
@@ -236,7 +238,8 @@ function createStore() {
         currentPal: newPal,
         palettes: insertPalette(n.palettes, n.currentPal),
       })),
-    removePal: (pal: string) => palsUp((n) => n.filter((x) => x.name !== pal)),
+    removePal: (index: number) =>
+      palsUp((n) => n.filter((_x, idx) => idx !== index)),
     copyPal: (pal: string) =>
       palsUp((n) => insertPalette(n, n.find((x) => x.name === pal)!)),
     setSort: (sort: Color[]) => palUp((n) => ({ ...n, colors: deDup(sort) })),