From 9d518c20ac07acfe86db9fd9a72e004ccc9bf4ba Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sun, 10 Mar 2024 20:01:29 -0700
Subject: [PATCH] in progress

---
 src/components/PalPreview.svelte           | 50 +++++++-----
 src/content-modules/Browse.svelte          |  4 +-
 src/content-modules/Controls.svelte        | 12 +--
 src/content-modules/MainColumn.svelte      |  5 +-
 src/controls/ColorTagger.svelte            | 88 ++++++++++++++++++++++
 src/controls/Config.svelte                 |  5 ++
 src/controls/GetColorsFromString.svelte    | 17 ++++-
 src/controls/SuggestColorPal.svelte        |  5 ++
 src/lib/ColorLint.test.ts                  |  8 +-
 src/lib/lint-language/LintLanguage.test.ts | 24 +++++-
 src/lib/linter-tools/lint-worker.worker.ts |  9 ++-
 src/lib/utils.ts                           | 56 ++++++++++----
 src/scatterplot/ColorScatterPlot.svelte    | 46 ++++++-----
 src/stores/color-store.ts                  | 35 +++++++--
 src/types.ts                               | 26 ++++---
 15 files changed, 294 insertions(+), 96 deletions(-)
 create mode 100644 src/controls/ColorTagger.svelte

diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
index 1fd89fec..0b26325d 100644
--- a/src/components/PalPreview.svelte
+++ b/src/components/PalPreview.svelte
@@ -4,6 +4,7 @@
   export let pal: Palette;
   export let allowModification: boolean = false;
   export let highlightSelected: boolean = false;
+  export let showTags: boolean = false;
 
   import { dealWithFocusEvent } from "../lib/utils";
 
@@ -18,25 +19,34 @@
   on:click={() => focusStore.clearColors()}
 >
   {#each pal.colors as color, idx}
-    {#if allowModification}
-      <button
-        on:click|stopPropagation|preventDefault={(e) =>
-          focusStore.setColors(
-            dealWithFocusEvent(e, idx, $focusStore.focusedColors)
-          )}
-        class={"w-6 h-6 mx-2 rounded-full transition-all"}
-        class:w-8={highlightSelected && focusSet.has(idx)}
-        class:h-8={highlightSelected && focusSet.has(idx)}
-        class:mb-5={highlightSelected && !focusSet.has(idx)}
-        style="background-color: {color.toDisplay()}"
-      ></button>
-    {:else}
-      <div
-        class={"w-6 h-6 mx-1 rounded-full transition-all"}
-        class:w-8={highlightSelected && focusSet.has(idx)}
-        class:h-8={highlightSelected && focusSet.has(idx)}
-        style="background-color: {color.toDisplay()}"
-      ></div>
-    {/if}
+    <div class="flex flex-col text-center">
+      {#if allowModification}
+        <button
+          on:click|stopPropagation|preventDefault={(e) =>
+            focusStore.setColors(
+              dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+            )}
+          class={"w-6 h-6 mx-2 rounded-full transition-all"}
+          class:w-8={highlightSelected && focusSet.has(idx)}
+          class:h-8={highlightSelected && focusSet.has(idx)}
+          class:mb-5={highlightSelected && !focusSet.has(idx)}
+          style="background-color: {color.toDisplay()}"
+        ></button>
+      {:else}
+        <div
+          class={"w-6 h-6 mx-1 rounded-full transition-all"}
+          class:w-8={highlightSelected && focusSet.has(idx)}
+          class:h-8={highlightSelected && focusSet.has(idx)}
+          style="background-color: {color.toDisplay()}"
+        ></div>
+      {/if}
+      {#if showTags}
+        <div class="text-xs flex flex-col">
+          {#each pal.colorSemantics[idx].tags as tag}
+            <span>{tag}</span>
+          {/each}
+        </div>
+      {/if}
+    </div>
   {/each}
 </div>
diff --git a/src/content-modules/Browse.svelte b/src/content-modules/Browse.svelte
index 5b6e2f2b..172d5348 100644
--- a/src/content-modules/Browse.svelte
+++ b/src/content-modules/Browse.svelte
@@ -205,7 +205,9 @@
           <Tooltip>
             <div slot="content">
               <div class="font-bold">Colors</div>
-              <div>{pal.palette.colors.map((x) => x.toHex()).join(", ")}</div>
+              <div>
+                {pal.palette.colors.map((x) => x.color.toHex()).join(", ")}
+              </div>
               <div class="font-bold">Controls</div>
               <button
                 class={buttonStyle}
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 7614ef71..6b74b830 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -5,14 +5,15 @@
 
   import { Color } from "../lib/Color";
 
-  import AlignSelection from "../controls/AlignSelection.svelte";
-  import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
-  import InterpolatePoints from "../controls/InterpolatePoints.svelte";
-  import DistributePoints from "../controls/DistributePoints.svelte";
-  import AdjustColor from "../controls/AdjustColor.svelte";
   import AddColor from "../controls/AddColor.svelte";
+  import AdjustColor from "../controls/AdjustColor.svelte";
+  import AlignSelection from "../controls/AlignSelection.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
+  import ColorTagger from "../controls/ColorTagger.svelte";
+  import DistributePoints from "../controls/DistributePoints.svelte";
+  import InterpolatePoints from "../controls/InterpolatePoints.svelte";
   import Rotate from "../controls/Rotate.svelte";
+  import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -51,6 +52,7 @@
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />
+    <ColorTagger />
   {/if}
 
   <DistributePoints />
diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
index a9792a16..15813fb7 100644
--- a/src/content-modules/MainColumn.svelte
+++ b/src/content-modules/MainColumn.svelte
@@ -65,7 +65,7 @@
     stopDragging={() => colorStore.resumePersistance()}
     blindColors={selectedBlindType === "none"
       ? []
-      : currentPal.colors.map((x) => simulate_cvd(selectedBlindType, x))}
+      : currentPal.colors.map((x) => simulate_cvd(selectedBlindType, x.color))}
   />
 
   <div class="flex flex-wrap">
@@ -83,9 +83,10 @@
   <div class="flex flex-col pl-2">
     <!-- overview / preview -->
     <PalPreview
+      allowModification={true}
       highlightSelected={true}
       pal={currentPal}
-      allowModification={true}
+      showTags={true}
     />
     <Nav
       tabs={["palette-config", "example"]}
diff --git a/src/controls/ColorTagger.svelte b/src/controls/ColorTagger.svelte
new file mode 100644
index 00000000..eefc0d3b
--- /dev/null
+++ b/src/controls/ColorTagger.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  import focusStore from "../stores/focus-store";
+  import colorStore from "../stores/color-store";
+
+  import { buttonStyle } from "../lib/styles";
+
+  $: currentPalette = $colorStore.palettes[$colorStore.currentPal];
+  // guaranteed to be a single value by usage context
+  $: focusedColorIdx = $focusStore.focusedColors[0];
+  $: semantics = currentPalette.colorSemantics[focusedColorIdx];
+
+  const updateTags = (updatedTags: string[]) =>
+    updateSemantics({ ...semantics, tags: updatedTags });
+  const updateSize = (size: (typeof sizes)[number]) =>
+    updateSemantics({ ...semantics, size });
+
+  const updateMarkType = (markType: (typeof markTypes)[number]) =>
+    updateSemantics({ ...semantics, markType });
+  function updateSemantics(updatedSemantics: typeof semantics) {
+    const newSemantics = [...currentPalette.colorSemantics];
+    newSemantics[focusedColorIdx] = updatedSemantics;
+    colorStore.updateColorSemantics(newSemantics);
+  }
+  let tagInput = "";
+  const sizes = [undefined, "small", "medium", "large"] as const;
+  const markTypes = [
+    undefined,
+    "line",
+    "point",
+    "bar",
+    "area",
+    "text",
+    "background",
+  ] as const;
+</script>
+
+<div class="font-bold">Tags</div>
+<div class="italic text-sm">
+  These to mark properties like color, brand, and so on
+</div>
+
+<form
+  on:submit|preventDefault|stopPropagation={() => {
+    updateTags([...semantics.tags, tagInput]);
+    tagInput = "";
+  }}
+>
+  <input type="text" placeholder="Add tag" bind:value={tagInput} />
+</form>
+<div class="flex">
+  {#each semantics.tags as tag}
+    <div class={buttonStyle}>
+      {tag}
+      <button
+        on:click={() => {
+          updateTags(semantics.tags.filter((x) => x !== tag));
+        }}
+      >
+        ✕
+      </button>
+    </div>
+  {/each}
+</div>
+<div class="text-sm">Object for this color</div>
+<select
+  value={semantics.markType}
+  on:change={(e) => {
+    // @ts-ignore
+    updateMarkType(e.currentTarget.value);
+  }}
+>
+  {#each markTypes as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>
+
+<div class="text-sm">Size of color</div>
+<select
+  value={semantics.size}
+  on:change={(e) => {
+    // @ts-ignore
+    updateSize(e.currentTarget.value);
+  }}
+>
+  {#each sizes as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>
diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
index acd6884d..05534461 100644
--- a/src/controls/Config.svelte
+++ b/src/controls/Config.svelte
@@ -53,6 +53,11 @@
                 colors: colors.map((c: string) =>
                   Color.colorFromString(c, colorSpace)
                 ),
+                colorSemantics: colors.map(() => ({
+                  size: undefined,
+                  markType: undefined,
+                  tags: [],
+                })),
                 evalConfig: {},
                 name,
                 type,
diff --git a/src/controls/GetColorsFromString.svelte b/src/controls/GetColorsFromString.svelte
index 016fa766..135cda3b 100644
--- a/src/controls/GetColorsFromString.svelte
+++ b/src/controls/GetColorsFromString.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
+  import type { ColorWrap } from "../types";
   import configStore from "../stores/config-store";
+  import { wrapInBlankSemantics } from "../lib/utils";
   import Sort from "./Sort.svelte";
   let state: "idle" | "error" = "idle";
-  export let onChange: (colors: Color[]) => void;
-  export let colors: Color[];
+  export let onChange: (colors: ColorWrap<Color>[]) => void;
+  export let colors: ColorWrap<Color>[];
   export let colorSpace: string;
   export let allowSort: boolean;
 
@@ -14,7 +16,14 @@
         .split(",")
         .map((x) => x.replace(/"/g, "").trim())
         .filter((x) => x.length > 0)
-        .map((x) => Color.colorFromString(x, colorSpace as any));
+        .map((x) => Color.colorFromString(x, colorSpace as any))
+        .map((x, idx) => {
+          if (colors[idx]) {
+            return { ...colors[idx], color: x };
+          } else {
+            return wrapInBlankSemantics(x);
+          }
+        });
       onChange(newColors);
       state = "idle";
     } catch (e) {
@@ -51,7 +60,7 @@
     class="w-full p-2 rounded border-2"
     style="min-height: {2 * Math.ceil(colors.length / 3)}em;"
     value={colors
-      .map((color) => color.toHex())
+      .map((color) => color.color.toHex())
       .map((x) => (includeQuotes ? `"${x}"` : x))
       .join(", ")}
     on:keydown={(e) => {
diff --git a/src/controls/SuggestColorPal.svelte b/src/controls/SuggestColorPal.svelte
index df473c67..fdc76d28 100644
--- a/src/controls/SuggestColorPal.svelte
+++ b/src/controls/SuggestColorPal.svelte
@@ -25,6 +25,11 @@
         suggestion.background,
         colorSpace as any
       ),
+      colorSemantics: suggestion.colors.map(() => ({
+        size: undefined,
+        markType: undefined,
+        tags: [],
+      })),
       name: palPrompt,
       type: "categorical",
       evalConfig: {},
diff --git a/src/lib/ColorLint.test.ts b/src/lib/ColorLint.test.ts
index 87214ade..37e6fc4b 100644
--- a/src/lib/ColorLint.test.ts
+++ b/src/lib/ColorLint.test.ts
@@ -92,10 +92,10 @@ test("ColorLint - ColorNameDiscriminability", async () => {
   );
   const fix = await suggestLintFix(examplePal, exampleLint);
   const oldColorNames = unique<string>(
-    examplePal.colors.map((x) => getName(x))
+    examplePal.colors.map((x) => getName(x.color))
   );
   expect(oldColorNames.length).toBe(1);
-  const colorNames = unique<string>(fix[0].colors.map((x) => getName(x)));
+  const colorNames = unique<string>(fix[0].colors.map((x) => getName(x.color)));
   expect(colorNames.length).toBe(2);
 });
 
@@ -148,7 +148,7 @@ test("ColorLint - Background Contrast", async () => {
     "These colors (#fdfdfc) do not have a sufficient contrast ratio with the background and may be hard to discriminate in some contexts."
   );
   const fix = await suggestLintFix(examplePal, exampleLint).then((x) => x[0]);
-  expect(fix.colors.map((x) => x.toHex())).toMatchSnapshot();
+  expect(fix.colors.map((x) => x.color.toHex())).toMatchSnapshot();
 
   examplePal.background = Color.colorFromHex("#00e4ff", "lab");
   const exampleLint2 = new BackgroundContrastLint(examplePal).run();
@@ -157,7 +157,7 @@ test("ColorLint - Background Contrast", async () => {
     "These colors (#00e4ff) do not have a sufficient contrast ratio with the background and may be hard to discriminate in some contexts."
   );
   const fix2 = await suggestLintFix(examplePal, exampleLint2).then((x) => x[0]);
-  expect(fix2.colors.map((x) => x.toHex())).toMatchSnapshot();
+  expect(fix2.colors.map((x) => x.color.toHex())).toMatchSnapshot();
   autoTest(BackgroundContrast);
 });
 
diff --git a/src/lib/lint-language/LintLanguage.test.ts b/src/lib/lint-language/LintLanguage.test.ts
index e3c3758c..30ddfb71 100644
--- a/src/lib/lint-language/LintLanguage.test.ts
+++ b/src/lib/lint-language/LintLanguage.test.ts
@@ -10,24 +10,40 @@ const toPal = (colors: string[]): Palette => ({
   colorSpace: "lab",
   evalConfig: {},
   background: toColors(["#fff"])[0],
-  colors: toColors(colors),
+  colors: toColorWithSemantics(colors),
   intendedAffects: [],
   intendedContexts: [],
 });
-const toColors = (colors: string[]): Color[] =>
+const wrapWithSemantics = (color: Color) => ({
+  size: undefined,
+  markType: undefined,
+  tags: [],
+  color,
+});
+const toColors = (colors: string[]) =>
   colors.map((x) => Color.colorFromString(x, "lab"));
+const toColorWithSemantics = (colors: string[]) =>
+  colors.map((x) => wrapWithSemantics(Color.colorFromString(x, "lab")));
 const exampleColors = toPal(["#d4a8ff", "#7bb9ff", "#008694"]);
 
 test("LintLanguage basic eval - eval with no references ", () => {
   const prog1: LintProgram = {
-    "<": { left: { count: exampleColors.colors }, right: 2 },
+    "<": {
+      left: { count: exampleColors.colors.map((x) => x.color) },
+      right: 2,
+    },
   };
   expect(prettyPrintLL(prog1)).toBe("count([#d4a8ff, #7bb9ff, #008694]) < 2");
   expect(LLEval(prog1, exampleColors).result).toBe(false);
 });
 
 test("LintLanguage basic eval - eval with no references 2 ", () => {
-  const prog2 = { "<": { left: { count: exampleColors.colors }, right: 10 } };
+  const prog2 = {
+    "<": {
+      left: { count: exampleColors.colors.map((x) => x.color) },
+      right: 10,
+    },
+  };
   const prog2Result = LLEval(prog2, exampleColors);
   expect(prog2Result.result).toBe(true);
   expect(prog2Result.blame).toStrictEqual([]);
diff --git a/src/lib/linter-tools/lint-worker.worker.ts b/src/lib/linter-tools/lint-worker.worker.ts
index c86e82c8..29723044 100644
--- a/src/lib/linter-tools/lint-worker.worker.ts
+++ b/src/lib/linter-tools/lint-worker.worker.ts
@@ -2,7 +2,7 @@ import * as idb from "idb-keyval";
 import { runLintChecks } from "../linter";
 import { prettyPrintLL } from "../lint-language/lint-language";
 import type { CustomLint } from "../CustomLint";
-import type { Palette } from "../../types";
+import type { Palette, StringPalette } from "../../types";
 import { Color } from "../Color";
 import type { LintResult } from "../ColorLint";
 
@@ -23,10 +23,13 @@ const getColor = (hex: string, space: string): Color => {
 };
 
 const hydratePal = (pal: string): Palette => {
-  const parsed = JSON.parse(pal);
+  const parsed = JSON.parse(pal) as StringPalette;
   return {
     background: getColor(parsed.background, parsed.colorSpace),
-    colors: parsed.colors.map((x: string) => getColor(x, parsed.colorSpace)),
+    colors: parsed.colors.map((x) => ({
+      ...x,
+      color: getColor(x.color, parsed.colorSpace),
+    })),
     type: parsed.type,
     colorSpace: parsed.colorSpace,
     name: parsed.name,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index db920b33..0f633aa6 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
 import { Color, colorPickerConfig } from "./Color";
-import type { Palette, StringPalette } from "../types";
+import type { Palette, StringPalette, ColorWrap } from "../types";
 import type { LintProgram } from "./lint-language/lint-type";
 import { Formatter, FracturedJsonOptions, EolStyle } from "fracturedjsonjs";
 import fits from "../assets/outfits.json";
@@ -42,10 +42,10 @@ export function avgColors(
   return Color.colorFromChannels(avgColor, colorSpace as any);
 }
 
-export function deDup(arr: Color[]): Color[] {
+export function deDup(arr: ColorWrap<Color>[]): ColorWrap<Color>[] {
   const seen = new Set();
   return arr.filter((item) => {
-    const k = item.toHex();
+    const k = item.color.toHex();
     return seen.has(k) ? false : seen.add(k);
   });
 }
@@ -221,10 +221,24 @@ export const makePal = (
   };
 };
 
+export const wrapInBlankSemantics = (x: Color): ColorWrap<Color> => ({
+  color: x,
+  markType: undefined,
+  size: undefined,
+  tags: [],
+});
+
+export const wrapInBlankStringSemantics = (x: string): ColorWrap<string> => ({
+  color: x,
+  markType: undefined,
+  size: undefined,
+  tags: [],
+});
+
 export function createPalFromHexes(colors: string[]): StringPalette {
   return {
     ...defaultHexPal,
-    colors,
+    colors: colors.map((x) => wrapInBlankStringSemantics(x)),
   };
 }
 const outfitToPal = (x: any) => [x.fill1, x.fill2, x.fill3];
@@ -242,7 +256,9 @@ export function makePalFromString(
 ): Palette {
   return {
     ...defaultHexPal,
-    colors: strings.map((str) => Color.colorFromString(str, "lab")),
+    colors: strings.map((str) =>
+      wrapInBlankSemantics(Color.colorFromString(str))
+    ),
     background: Color.colorFromString(bg, "lab"),
   };
 }
@@ -254,7 +270,9 @@ export const toPal = (
 ): Palette => {
   return {
     ...defaultHexPal,
-    colors: colors.map((x) => Color.colorFromString(x, colorSpace)),
+    colors: colors.map((x) =>
+      wrapInBlankSemantics(Color.colorFromString(x, colorSpace))
+    ),
     name: "mods",
     background: currentPal.background,
     type: currentPal.type,
@@ -277,7 +295,7 @@ type selectColorsFromDrag = (
   dragBox: { x: number; y: number },
   dragging: { x: number; y: number },
   parentPos: { x: number; y: number },
-  colors: Color[],
+  colors: ColorWrap<Color>[],
   config: {
     isPolar: boolean;
     plotHeight: number;
@@ -386,13 +404,13 @@ export function makeScales(
 
 type dragEventToColor = (
   e: any,
-  originalColor: Color,
+  originalColor: ColorWrap<Color>,
   originalPos: { x: number; y: number },
   config: (typeof colorPickerConfig)[string],
   scales: ReturnType<typeof makeScales>,
   colorSpace: any,
   dragDelta: { x: number; y: number }
-) => Color;
+) => ColorWrap<Color>;
 export const dragEventToColorZ: dragEventToColor = (
   e,
   originalColor,
@@ -404,13 +422,16 @@ export const dragEventToColorZ: dragEventToColor = (
 ) => {
   const { zInv, z } = scales;
   const screenPosDelta = toXY(e).y - originalPos.y + dragDelta.y;
-  const coords = originalColor.toChannels();
+  const coords = originalColor.color.toChannels();
   const zClamp = (v: number) => clampToRange(v, config.zDomain);
   coords[config.zChannelIndex] = zClamp(
-    zInv(z(originalColor) + screenPosDelta)
+    zInv(z(originalColor.color) + screenPosDelta)
   );
 
-  return Color.colorFromChannels(coords, colorSpace);
+  return {
+    ...originalColor,
+    color: Color.colorFromChannels(coords, colorSpace),
+  };
 };
 
 export const dragEventToColorXY: dragEventToColor = (
@@ -433,18 +454,21 @@ export const dragEventToColorXY: dragEventToColor = (
   const yClamp = (v: number) => clampToRange(v, config.yDomain);
   // screen coordinates
   const newPos = [
-    x(originalColor) + screenPosDelta.x,
-    y(originalColor) + screenPosDelta.y,
+    x(originalColor.color) + screenPosDelta.x,
+    y(originalColor.color) + screenPosDelta.y,
   ];
   // color space coordinates
   const newVal = [
     xClamp(xInv(newPos[0], newPos[1])),
     yClamp(yInv(newPos[0], newPos[1])),
   ];
-  const coords = originalColor.toChannels();
+  const coords = originalColor.color.toChannels();
   coords[config.xChannelIndex] = newVal[0];
   coords[config.yChannelIndex] = newVal[1];
-  return Color.colorFromChannels(coords, colorSpace);
+  return {
+    ...originalColor,
+    color: Color.colorFromChannels(coords, colorSpace),
+  };
 };
 
 export const screenSpaceAvg = (colors: { x: number; y: number }[]) => {
diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
index 1dc7652b..e49c5e1b 100644
--- a/src/scatterplot/ColorScatterPlot.svelte
+++ b/src/scatterplot/ColorScatterPlot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Palette } from "../types";
+  import type { Palette, ColorWrap } from "../types";
   import { Color, colorPickerConfig } from "../lib/Color";
   import {
     makePosAndSizes,
@@ -10,6 +10,7 @@
     makeScales,
     dragEventToColorZ,
     dragEventToColorXY,
+    wrapInBlankSemantics,
   } from "../lib/utils";
   import configStore from "../stores/config-store";
   import { scaleLinear } from "d3-scale";
@@ -25,7 +26,7 @@
 
   export let width = 256;
   export let height = 256;
-  export let onColorsChange: (color: Color[]) => void;
+  export let onColorsChange: (color: ColorWrap<Color>[]) => void;
   export let onFocusedColorsChange: (color: number[]) => void;
   export let startDragging: () => void;
   export let stopDragging: () => void;
@@ -43,12 +44,14 @@
     z: $configStore.zZoom,
   };
   $: pickedColors = focusedColors
-    .map((x) => colors[x])
+    .map((x) => colors[x].color)
     .filter((x) => x)
     .map((el) => [x(el), y(el), z(el)]);
   $: config = colorPickerConfig[colorSpace];
   $: bg = Pal.background;
-  $: colors = Pal.colors.map((x) => Color.toColorSpace(x, colorSpace));
+  $: colors = Pal.colors.map((x) =>
+    wrapInBlankSemantics(Color.toColorSpace(x.color, colorSpace))
+  );
 
   $: domainXScale = scaleLinear().domain([0, 1]).range(config.xDomain);
   $: xScale = scaleLinear()
@@ -76,7 +79,7 @@
   // bound box for selected colors
   $: pos = makePosAndSizes(pickedColors);
 
-  let originalColors = [] as Color[];
+  let originalColors = [] as ColorWrap<Color>[];
   $: bgLum = bg.luminance();
   $: axisColor = bgLum > 0.4 ? "#00000022" : "#ffffff55";
   $: textColor = bgLum > 0.4 ? "#00000066" : "#ffffffaa";
@@ -291,7 +294,7 @@
 
   function puttingEnd() {
     if (!puttingPreview) return;
-    onColorsChange([...colors, puttingPreview as Color]);
+    onColorsChange([...colors, wrapInBlankSemantics(puttingPreview as Color)]);
     setTimeout(() => {
       configStore.setScatterplotMode("moving");
     }, 10);
@@ -357,7 +360,7 @@
             {#each colors as color, i}
               {#if scatterPlotMode === "moving"}
                 <circle
-                  {...CircleProps(color, i)}
+                  {...CircleProps(color.color, i)}
                   stroke={interactionMode === "drag" &&
                   focusedColors.length === 1
                     ? "white"
@@ -376,15 +379,15 @@
               {/if}
               {#if scatterPlotMode !== "moving"}
                 <circle
-                  {...CircleProps(color, i)}
+                  {...CircleProps(color.color, i)}
                   on:mouseenter|preventDefault={() => hoverPoint(i)}
                 />
               {/if}
-              {#if !color.inGamut() && $configStore.showGamutMarkers}
+              {#if !color.color.inGamut() && $configStore.showGamutMarkers}
                 <GamutMarker
-                  xPos={x(color)}
-                  yPos={y(color)}
-                  lum={color.luminance()}
+                  xPos={x(color.color)}
+                  yPos={y(color.color)}
+                  lum={color.color.luminance()}
                   selected={focusSet.has(i)}
                 />
               {/if}
@@ -394,8 +397,8 @@
                 stroke-dasharray="5,5"
                 x1={x(blindColor)}
                 y1={y(blindColor)}
-                x2={x(colors[i])}
-                y2={y(colors[i])}
+                x2={x(colors[i].color)}
+                y2={y(colors[i].color)}
                 stroke={blindColor.toDisplay()}
                 stroke-width="1"
               />
@@ -483,10 +486,15 @@
 
         {#if typeof hoveredPoint !== "boolean"}
           <g transform={`translate(0, ${height - margin.bottom})`}>
-            <circle fill={hoveredPoint.toDisplay()} cx={6} cy={-7.5} r="6" />
-            <text fill={textColor} x={15}>{hoveredPoint.toHex()}</text>
+            <circle
+              fill={hoveredPoint.color.toDisplay()}
+              cx={6}
+              cy={-7.5}
+              r="6"
+            />
+            <text fill={textColor} x={15}>{hoveredPoint.color.toHex()}</text>
             <text fill={textColor} y="15">
-              {hoveredPoint.toPrettyString()}
+              {hoveredPoint.color.toPrettyString()}
             </text>
           </g>
         {/if}
@@ -515,7 +523,7 @@
             {#each colors as color, i}
               {#if scatterPlotMode === "moving"}
                 <rect
-                  {...RectProps(color, i)}
+                  {...RectProps(color.color, i)}
                   on:mousedown|preventDefault={pointMouseDown}
                   on:mouseup|preventDefault={pointMouseUp(i)}
                   on:mouseleave|preventDefault={switchToDragPoint(i)}
@@ -529,7 +537,7 @@
                 />
               {:else}
                 <rect
-                  {...RectProps(color, i)}
+                  {...RectProps(color.color, i)}
                   on:mouseenter|preventDefault={() => hoverPoint(i)}
                 />
               {/if}
diff --git a/src/stores/color-store.ts b/src/stores/color-store.ts
index 9bbb839b..2367209b 100644
--- a/src/stores/color-store.ts
+++ b/src/stores/color-store.ts
@@ -1,6 +1,6 @@
 import { writable } from "svelte/store";
 import { Color } from "../lib/Color";
-import { deDup, newGenericPal } from "../lib/utils";
+import { deDup, newGenericPal, wrapInBlankStringSemantics } from "../lib/utils";
 
 import type {
   Palette,
@@ -9,6 +9,7 @@ import type {
   ColorSpace,
   Context,
   Affect,
+  ColorWrap,
 } from "../types";
 
 interface StoreData {
@@ -22,11 +23,21 @@ interface StorageData {
 }
 
 function stringPalToColorPal(pal: StringPalette): Palette {
-  return {
+  const result = {
     ...pal,
     background: Color.colorFromString(pal.background, pal.colorSpace),
-    colors: pal.colors.map((x) => Color.colorFromString(x, pal.colorSpace)),
+    colors: pal.colors.map((x) => {
+      let colorWrap = x;
+      const color = Color.colorFromString(x.color, pal.colorSpace);
+      // catch old versions
+      if (typeof x === "string") {
+        colorWrap = wrapInBlankStringSemantics(x);
+      }
+      return { ...x, color };
+    }),
   };
+
+  return result;
 }
 
 const InitialStore: StorageData = {
@@ -50,7 +61,10 @@ function convertStoreColorToHex(store: StoreData): StorageData {
     palettes: store.palettes.map((x) => ({
       ...x,
       background: x.background.toString(),
-      colors: x.colors.map((y) => y.toString()),
+      colors: x.colors.map((y) => ({
+        ...y,
+        color: y.color.toString(),
+      })),
     })),
     currentPal: store.currentPal,
   };
@@ -157,7 +171,8 @@ function createStore() {
     },
 
     setCurrentPal: (pal: Palette) => palUp(() => pal),
-    setCurrentPalColors: (colors: Color[]) => palUp((n) => ({ ...n, colors })),
+    setCurrentPalColors: (colors: ColorWrap<Color>[]) =>
+      palUp((n) => ({ ...n, colors })),
     startUsingPal: (indx: number) => {
       persistUpdate((n) => ({ ...n, currentPal: indx }));
     },
@@ -182,7 +197,8 @@ function createStore() {
         const newPal = { ...n[index], name: `${n[index].name} copy` };
         return [...n.slice(0, index), newPal, ...n.slice(index)];
       }),
-    setSort: (sort: Color[]) => palUp((n) => ({ ...n, colors: deDup(sort) })),
+    setSort: (sort: ColorWrap<Color>[]) =>
+      palUp((n) => ({ ...n, colors: deDup(sort) })),
     setCurrentPalName: (name: string) => palUp((n) => ({ ...n, name })),
     setCurrentPalType: (type: PalType) => palUp((n) => ({ ...n, type })),
     setCurrentAffects: (intendedAffects: Affect[]) =>
@@ -192,7 +208,7 @@ function createStore() {
 
     setCurrentPalEvalConfig: (evalConfig: Record<string, any>) =>
       palUp((n) => ({ ...n, evalConfig: hardCopy(evalConfig) })),
-    addColorToCurrentPal: (color: Color) =>
+    addColorToCurrentPal: (color: ColorWrap<Color>) =>
       palUp((n) => ({ ...n, colors: [...n.colors, color] })),
     setBackground: (color: Color) =>
       palUp((n) => ({ ...n, background: color })),
@@ -203,7 +219,10 @@ function createStore() {
         ...n,
         colorSpace,
         background: Color.toColorSpace(n.background, colorSpace),
-        colors: n.colors.map((x) => Color.toColorSpace(x, colorSpace)),
+        colors: n.colors.map((x) => ({
+          ...x,
+          color: Color.toColorSpace(x.color, colorSpace),
+        })),
       })),
     clearPalettes: () =>
       persistUpdate(() => ({
diff --git a/src/types.ts b/src/types.ts
index 4d77320b..7ff0565d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,7 +15,7 @@ export const contexts = ["scatterplot", "linechart", "barchart", "dashboard"];
 
 export type Context = (typeof contexts)[number];
 
-// Todo make this connect witht the color system
+// Todo make this connect with the color system
 export type ColorSpace =
   | "lab"
   | "hsl"
@@ -28,22 +28,28 @@ export type ColorSpace =
   | "srgb";
 
 // pretty nervous about the role stuff bc it will mean a lot of index manipulation to keep things straight when things get reordered
-type ColorSemantics = {
-  role?: "background" | "text" | "accent" | "de-emphasize" | "main";
-  size?: "small" | "medium" | "large";
-  // what does main mean?
-  use?: "main" | "accent" | "de-emphasize";
+export type ColorWrap<A> = {
+  markType:
+    | undefined
+    | "line"
+    | "point"
+    | "bar"
+    | "area"
+    | "text"
+    | "background";
+  size: undefined | "small" | "medium" | "large";
+  tags: string[];
+  color: A;
 };
 type Pal<A> = {
   background: A;
   colorSpace: ColorSpace;
-  colors: A[];
+  colors: ColorWrap<A>[];
   evalConfig: Record<string, any>;
-  name: string;
-  type: PalType;
   intendedAffects: Affect[];
   intendedContexts: Context[];
-  // todo: colorRole: Role[]
+  name: string;
+  type: PalType;
 };
 export type PalType = "sequential" | "diverging" | "categorical";
 export type Palette = Pal<Color>;