in progress

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>

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}

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 />

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"]}

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>

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,

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) => {

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: {},

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);
 });
 

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([]);

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,