make bgs persist

src/content-modules/ComparePal.svelte

@@ -27,7 +27,11 @@
       ? $colorStore.palettes[compareIdx]
       : undefined;
 
-  $: bg = ComparisonPal?.background.toHex() || "white";
+  $: bg =
+    $configStore.compareBackground ||
+    ComparisonPal?.background.toHex() ||
+    "white";
+
   let showDiff = false;
 
   let colorSpace = ComparisonPal?.colorSpace || "lab";
@@ -49,6 +53,7 @@
         <Background
           onChange={(background) => {
             bg = background.toHex();
+            configStore.setCompareBackground(background.toHex());
           }}
           bg={Color.colorFromHex(bg, colorSpace)}
           {colorSpace}

src/controls/GetColorsFromString.svelte

@@ -48,7 +48,7 @@
   </div>
   <textarea
     id="current-colors"
-    class="w-full p-2 rounded"
+    class="w-full p-2 rounded border-2"
     style="min-height: {2 * Math.ceil(colors.length / 3)}em;"
     value={colors
       .map((color) => color.toHex())

src/controls/NewPal.svelte

@@ -107,16 +107,20 @@
     <div class="font-bold">New from string of hex</div>
     <textarea
       id="current-colors"
-      class="w-full p-2 rounded"
+      class="w-full p-2 rounded border-2"
       value={inputString}
       on:keydown={(e) => {
         if (e.key === "Enter") {
           e.preventDefault();
           processBodyInput(e.currentTarget.value);
           e.currentTarget.blur();
+          onClick();
         }
       }}
-      on:change={(e) => processBodyInput(e.currentTarget.value)}
+      on:change={(e) => {
+        processBodyInput(e.currentTarget.value);
+        onClick();
+      }}
     />
     <div class="mt-5 border-t-2 border-black"></div>
     <div class="font-bold">Generate a new palette using AI</div>

src/controls/SuggestionModificationToSelection.svelte

@@ -126,7 +126,7 @@
             }
           }}
           id="pal-prompt"
-          class="indent-2 text-sm leading-6"
+          class="indent-2 text-sm leading-6 border-2"
           placeholder="e.g. 'Make them groovier'"
         />
         <button

src/example/ExampleAlaCarte.svelte

@@ -52,6 +52,7 @@
       {paletteIdx}
       hideHeader={true}
       allowInteraction={allowModification}
+      bg={bgColor}
     />
   {:else}
     {#if example.svg}

src/example/Examples.svelte

@@ -163,7 +163,7 @@
   style={`height: calc(100% - 100px)`}
 >
   {#if $configStore.exampleRoute === "swatches"}
-    <Swatches paletteIdx={$colorStore.currentPal} />
+    <Swatches paletteIdx={$colorStore.currentPal} bg={bg.toString()} />
   {/if}
   {#each examples as example, idx}
     {#if exampleShowMap[idx]}

src/example/Swatches.svelte

@@ -10,6 +10,7 @@
   export let paletteIdx: number;
   export let allowInteraction: boolean = true;
   export let hideHeader: boolean = false;
+  export let bg: string;
 
   $: currentPal = $colorStore.palettes[paletteIdx];
   $: colors = currentPal?.colors || [];
@@ -23,7 +24,6 @@
       colors = currentPal?.colors || [];
     }
   }
-  $: bgColor = currentPal?.background?.toHex() || "white";
 
   $: focused = $focusStore.focusedColors;
   $: focusSet = allowInteraction ? new Set(focused) : new Set();
@@ -75,7 +75,7 @@
   {#if !hideHeader}
     <div class="bg-stone-300 w-full justify-between flex p-1">Swatches</div>
   {/if}
-  <div style={`background-color: ${bgColor}; max-width: 600px`} class="flex">
+  <div style={`background-color: ${bg}; max-width: 600px`} class="flex">
     <div class="flex flex-col">
       {#each colors as color, i}
         <button

src/linting/LintCustomizationModal.svelte

@@ -222,7 +222,7 @@
         <div>
           <div class="font-bold">Lint Description:</div>
           <textarea
-            class="ml-2 border border-gray-300 rounded px-2 py-1 w-full"
+            class="ml-2 border-2 border-gray-300 rounded px-2 py-1 w-full"
             value={lint.description}
             on:change={(e) => {
               // @ts-ignore
@@ -237,7 +237,7 @@
             {"If failures of your lint rule can be attributed to a specific color or colors, include {{blame}} in this message"}
           </div>
           <textarea
-            class="ml-2 border border-gray-300 rounded px-2 py-1 w-full"
+            class="ml-2 border-2 border-gray-300 rounded px-2 py-1 w-full"
             value={lint.failMessage}
             on:change={(e) => {
               // @ts-ignore

src/linting/NewLintSuggestion.svelte

@@ -56,7 +56,7 @@
           }
         }}
         id="pal-prompt"
-        class="indent-2 text-sm leading-6"
+        class="indent-2 text-sm leading-6 border-2"
         placeholder="e.g. 'This palette should have a Cascadian vibe'"
       />
       <div>

src/stores/config-store.ts

@@ -5,6 +5,7 @@ interface StoreData {
   comparePal: number | undefined;
   compareSelectedExample: number;
   channelPickerSpace: "lab" | "lch" | "hsl" | "hsv" | "rgb";
+  compareBackground: string | undefined;
   engine: "openai" | "google";
   evalDisplayMode: "regular" | "compact";
   evalDeltaDisplay: "none" | "76" | "CMC" | "2000" | "ITP" | "Jz" | "OK";
@@ -28,6 +29,7 @@ const InitialStore: StoreData = {
   colorSim: "none",
   comparePal: undefined,
   compareSelectedExample: -1,
+  compareBackground: undefined,
   engine: "openai",
   evalDisplayMode: "regular",
   evalDeltaDisplay: "none",
@@ -119,6 +121,8 @@ function createStore() {
       persist((old) => ({ ...old, exampleRoute: n })),
     setChannelPickerSpace: (n: StoreData["channelPickerSpace"]) =>
       persist((old) => ({ ...old, channelPickerSpace: n })),
+    setCompareBackground: (n: StoreData["compareBackground"]) =>
+      persist((old) => ({ ...old, compareBackground: n })),
   };
 }