fix compare pal idiocy

lint-language-sketching.txt

@@ -0,0 +1,60 @@
+# Usability Checks
+Color Name discriminability: ALL colors a, ALL colors b, NAME(a) != NAME(b)
+Thin Discriminability: ALL colors a, ALL colors b, JND(a, b, thin) > threshold
+Medium Discriminability: ALL colors a, ALL colors b, JND(a, b, medium) > threshold
+Wide Discriminability: ALL colors a, ALL colors b, JND(a, b, wide) > threshold
+Sequential: OR (ALL_SEQ colors next current, lab(current, l) > lab(next, l)) (ALL_SEQ colors next current, lab(current, l) < lab(next, l))
+Diverging: 
+
+# Aesthetics Checks
+Max Colors: count(colors) < threshold
+Palette does not have ugly colors: NOT ALL c in colors, ALL u in ugly, c similar to u
+Avoid extreme colors: NOT ALL c in colors, ALL e in extreme, c equal to e
+Fair: range(colors, lch, c) < threshold_1 AND range(colors, lch, l) < threshold_2
+
+# Accessibility Checks
+Colorblind Friendly for deuteranopia: ALL colors a, ALL colors b, NOT (sim(a) similar to sim(b))
+Colorblind Friendly for protanopia: ALL colors a, ALL colors b, NOT (sim(a) similar to sim(b))
+Colorblind Friendly for tritanopia: ALL colors a, ALL colors b, NOT (sim(a) similar to sim(b))
+All colors differentiable from background: ALL colors c, deltaE(c, bg) > threshold
+Background Contrast: ALL colors c, contrast(c, bg) > threshold
+
+# Ad Hoc-y ideas: 
+All complementary Pairs: ALL colors a, EXIST color b, hue(a) approx hue(b) + PI
+Exist complementary pair: EXIST colors a, EXIST color b, hue(a) approx hue(b) + PI
+All monochromatic: ALL colors a, EXIST color b, hue(a) approx hue(b)
+
+Gender Colors Not Conformist: NOT ((EXIST color a similar to "LIGHT BLUE") AND (EXIST color b similar to "PINK"))
+
+Specific value included: EXIST color a, value(a) equal to X
+
+
+# Affective Color Assertions
+"Highly saturated light colors will not be appropriate for SERIOUS/TRUST/CALM": ALL (FILTER colors c, lab(c) > threshold) b, NOT hsl(b) > threshold
+"light blues, beiges, and grays are appropriate for PLAYFUL"
+"dark reds and browns are not POSITIVE": ALL colors c, NOT (c similar to "DARK RED" OR c similar to "BROWN")
+"light colors, particularly greens, do not communicate NEGATIVE"
+"trustworthy has two themeatic strategies (blue-gray, green-gray) bridge by a common color (yellow)"
+
+
+Functions: similar to, sim, deltaE, contrast, count, range, name, JND, approx, equal to
+
+Expressions:
+e = NOT e | e AND e | e OR e | p  | Q e p | T | F
+Quantifiers: (v[]) => T | F
+Q = ALL | EXIST | ALL SEQ
+Predicates (v, v) => T | F
+p = ... | v > v | v < v | v ~= v | v == v
+Values
+v = number | color | channel(color, colorSpace, channel)
+
+JSON syntax:
+{
+    all: {
+        input: colors,
+        value: 'c',
+        predicate: {
+
+        }
+    }
+}

src/components/MiniPalPreview.svelte

@@ -2,9 +2,10 @@
   import type { Palette } from "../stores/color-store";
   export let pal: Palette;
   export let onClick: () => void;
+  export let className = "";
 </script>
 
-<div class="relative mr-2 mb-2 flex justify-center items-center">
+<div class="relative mr-2 mb-2 flex justify-center items-center {className}">
   <div class="w-full flex absolute top-0 opacity-50 pointer-events-none">
     {#each pal.colors as color}
       <div

src/content-modules/ComparePal.svelte

@@ -11,18 +11,18 @@
 
   import SetColorSpace from "../controls/SetColorSpace.svelte";
 
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: currentPalIdx = $colorStore.currentPal;
+  $: currentPal = $colorStore.palettes[currentPalIdx];
   $: compareIdx = $configStore.comparePal;
   $: focused = $focusStore.focusedColors;
-  $: ComparisonPal = compareIdx ? $colorStore.palettes[compareIdx] : undefined;
-  $: {
-    if (!ComparisonPal && $colorStore.currentPal === compareIdx) {
-      ComparisonPal = currentPal;
-    }
-  }
-  let bg = ComparisonPal?.background.toHex() || "white";
+  $: ComparisonPal =
+    typeof compareIdx === "number"
+      ? $colorStore.palettes[compareIdx]
+      : undefined;
+
+  $: bg = ComparisonPal?.background.toHex() || "white";
 
-  let colorSpace = ComparisonPal?.colorSpace || "lab";
+  $: colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
 <div class="flex flex-col" style={`background: ${bg}`}>
@@ -34,7 +34,7 @@
       scatterPlotMode="looking"
       Pal={{ ...ComparisonPal, background: Color.colorFromHex(bg, colorSpace) }}
       {colorSpace}
-      focusedColors={$colorStore.currentPal === compareIdx ? focused : []}
+      focusedColors={currentPalIdx === compareIdx ? focused : []}
       height={450}
       width={450}
       onColorsChange={() => {}}
@@ -55,18 +55,12 @@
       Select comparison. Currently: {ComparisonPal?.name || "none"}
     </button>
     <div class="flex flex-col w-80" slot="content">
-      <div class="flex flex-col">
-        Current Palette:
-        <MiniPalPreview
-          pal={currentPal}
-          onClick={() => configStore.setComparePal($colorStore.currentPal)}
-        />
-      </div>
-      <div>Other Saved Palettes:</div>
+      <div>Saved Palettes:</div>
       <div class="flex flex-wrap">
-        {#each [currentPal, ...$colorStore.palettes] as pal, idx}
+        {#each $colorStore.palettes as pal, idx (idx)}
           <MiniPalPreview
             {pal}
+            className={compareIdx === idx ? "border-2 border-black" : ""}
             onClick={() => configStore.setComparePal(idx)}
           />
         {/each}