futzing with menus

apps/color-buddy/src/components/Background.svelte

@@ -15,8 +15,9 @@
   <div class="text-sm">Background</div>
   <Tooltip top={"20px"}>
     <div slot="content" class="flex flex-col">
+      <div class="text-sm">Current Color</div>
       <input
-        class="mb-2"
+        class="mb-2 {buttonStyle}"
         value={bgHex}
         on:change={(e) => {
           // @ts-ignore

apps/color-buddy/src/components/ColorChannelPicker.svelte

@@ -137,7 +137,7 @@
 
 <div class="flex flex-col">
   <div class="flex h-full items-center justify-between">
-    <div>Color Space</div>
+    <div class="text-sm">Color Space</div>
     <select
       class="h-full {buttonStyle}"
       value={colorMode}
@@ -161,7 +161,10 @@
                       {channel.name} ({channel.min}-{channel.max})
                     </span>
                     <input
-                      class="h-6 text-right w-16 border-2"
+                      class="h-6 text-right w-16 border-2 {buttonStyle
+                        .split(' ')
+                        .filter((x) => !x.startsWith('mr'))
+                        .join(' ')}"
                       type="number"
                       value={formatter(channel.value)}
                       min={channel.min}

apps/color-buddy/src/content-modules/MainColumn.svelte

@@ -30,7 +30,7 @@
 
 <div class="flex flex-col h-full px-4 mt-10">
   <div
-    class="flex text-sm mb-2 flex-wrap"
+    class="flex text-sm flex-wrap"
     style={`max-width: ${scatterSize + 110}px`}
   >
     <PalTypeConfig />
@@ -48,6 +48,8 @@
       bg={currentPal.background}
       colorSpace={$configStore.channelPickerSpaceBackground}
     />
+  </div>
+  <div class="flex mb-2">
     <PalTags />
     <SetSimulation />
   </div>
@@ -103,6 +105,10 @@
           <Rotate />
         {/if}
         <InterpolatePoints />
+        {#if $focusStore.focusedColors.length === 0}
+          <!-- blank -->
+          <div class="{buttonStyle} opacity-0">empty</div>
+        {/if}
       </div>
     </div>
 

apps/color-buddy/src/controls/PalTags.svelte

@@ -3,63 +3,72 @@
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle } from "../lib/styles";
   import DownChev from "virtual:icons/fa6-solid/angle-down";
+  import Times from "virtual:icons/fa6-solid/xmark";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: tags = currentPal?.tags || [];
 
   let tagInput = "";
   $: inUseTags = new Set(tags);
-  $: commonTags = ["serious", "trustworthy", "calm"].filter(
-    (x) => !inUseTags.has(x)
-  );
+  $: commonTags = [
+    "serious",
+    "trustworthy",
+    "calm",
+    "playful",
+    "negative",
+    "positive",
+  ].filter((x) => !inUseTags.has(x));
 </script>
 
 <div class="flex flex-col">
   <div class="text-sm whitespace-nowrap">Palette Tags</div>
   <Tooltip>
     <div slot="content" class="max-w-md">
       <div class="italic text-sm">
-        Tags describe palette level usages, like the intended affect and so on. {#if commonTags.length}
-          Here are some common ones that are have specific effects in the app
-          (such as engaging lints for specific affects).{/if}
+        Tags describe palette level usages, like the intended affect and so on.
+        They govern which checks are run on the palette.
       </div>
-      <div class="font-bold">Tags</div>
+      <div class="text-sm">Current Tags</div>
       <div class="flex flex-wrap">
         {#each tags as tag}
-          <div class={buttonStyle}>
+          <div class="bg-stone-200 flex items-center px-1 text-sm mr-2">
             {tag}
             <button
-              class="text-xs"
+              class="text-xs px-1"
               on:click={() =>
                 colorStore.setCurrentTags(
-                  tags.filter((x) => x.toLowerCase() !== tag)
+                  tags.filter((x) => x.toLowerCase() !== tag.toLowerCase())
                 )}
             >
-              x
+              <Times />
             </button>
           </div>
         {/each}
       </div>
-      <div>
-        {#each commonTags as tag}
-          <button
-            class={buttonStyle}
-            on:click={() => colorStore.setCurrentTags([...tags, tag])}
-          >
-            {tag}
-          </button>
-        {/each}
+      <div class="flex flex-col mt-4">
+        <span class="text-sm">Common tags</span>
         <div class="flex">
-          <form
-            placeholder="Add Tag"
-            on:submit|preventDefault|stopPropagation={() =>
-              colorStore.setCurrentTags([...tags, tagInput])}
-          >
-            <input class="w-24" bind:value={tagInput} />
-            <button class={buttonStyle}>Add Tag</button>
-          </form>
+          {#each commonTags as tag}
+            <button
+              class={buttonStyle}
+              on:click={() => colorStore.setCurrentTags([...tags, tag])}
+            >
+              {tag}
+            </button>
+          {/each}
         </div>
       </div>
+      <div class="flex flex-col mt-4">
+        <div class="text-sm">Custom Tag</div>
+        <form
+          placeholder="Add Tag"
+          on:submit|preventDefault|stopPropagation={() =>
+            colorStore.setCurrentTags([...tags, tagInput])}
+        >
+          <input class="w-24 {buttonStyle}" bind:value={tagInput} />
+          <button class={buttonStyle}>Add Tag</button>
+        </form>
+      </div>
     </div>
     <button
       class={`${buttonStyle} flex justify-center  items-center`}

apps/color-buddy/src/controls/PalTypeConfig.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import colorStore from "../stores/color-store";
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle, simpleTooltipRowStyle } from "../lib/styles";
@@ -7,25 +7,31 @@
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: palType = currentPal.type;
-  $: tags = currentPal?.tags || [];
 
-  $: inUseTags = new Set(tags);
+  const types = ["sequential", "diverging", "categorical"] as const;
+  const descriptions: Record<(typeof types)[number], string> = {
+    categorical:
+      "palettes are used to represent a set of discrete values. They are often used to represent qualitative data, such as different types of land cover or different political parties.",
+    diverging:
+      "palettes are used to represent a range of values around a central point. They are often used to represent quantitative data, such as temperature or elevation.",
+    sequential:
+      "palettes are used to represent a range of values. They are often used to represent quantitative data, such as temperature or elevation.",
+  };
 </script>
 
 <div class="flex flex-col">
   <div class="text-sm">Palette Type</div>
   <Tooltip>
-    <div slot="content" class="flex flex-col">
-      {#each ["sequential", "diverging", "categorical"] as type}
+    <div slot="content" class="flex flex-col max-w-md">
+      {#each types as type}
         <button
-          class={simpleTooltipRowStyle}
+          class={`${simpleTooltipRowStyle} text-sm py-1`}
           value={type}
-          on:click={() =>
-            // @ts-ignore
-            colorStore.setCurrentPalType(type)}
-          class:font-bold={type === palType}
+          class:border-l-4={type === palType}
+          on:click={() => colorStore.setCurrentPalType(type)}
         >
-          {type}
+          <span class:font-bold={type === palType}>{titleCase(type)}</span>
+          <span>{descriptions[type]}</span>
         </button>
       {/each}
     </div>

apps/color-buddy/src/controls/SetColorSpace.svelte

@@ -2,7 +2,7 @@
   import { colorPickerConfig } from "../lib/utils";
   import DownChev from "virtual:icons/fa6-solid/angle-down";
   import Tooltip from "../components/Tooltip.svelte";
-  import { buttonStyle } from "../lib/styles";
+  import { buttonStyle, simpleTooltipRowStyle } from "../lib/styles";
   export let colorSpace: string;
   export let onChange: (e: any) => void;
   const notAllowed = new Set(["rgb"]);
@@ -27,46 +27,42 @@
       <div class="text-sm">
         Select the color space to use for the color picker.
       </div>
-      <div class="grid grid-cols-4 mt-2">
-        {#each basicOptions as space}
-          <button
-            class={`${buttonStyle} justify-self-start`}
-            class:font-bold={space === colorSpace}
-            on:click={() => {
-              onChange(space);
-              onClick();
-            }}
-          >
+      {#each basicOptions as space}
+        <button
+          class={`${simpleTooltipRowStyle} py-1 text-sm`}
+          class:border-l-4={space === colorSpace}
+          on:click={() => {
+            onChange(space);
+            onClick();
+          }}
+        >
+          <span class:font-bold={space === colorSpace}>
             {space.toUpperCase()}
-          </button>
-          <span class="text-sm italic col-span-3">
-            {colorPickerConfig[space].description}
           </span>
-        {/each}
-      </div>
+          {colorPickerConfig[space].description.split(" ").slice(1).join(" ")}
+        </button>
+      {/each}
 
       <div class="font-bold">Advanced Color Spaces</div>
       <div class="text-sm">
         These color spaces provide more control over the color representation,
         but may be less intuitive or familiar
       </div>
-      <div class="grid grid-cols-4 mt-2">
-        {#each advancedSpaceOptions as space}
-          <button
-            class={`${buttonStyle} justify-self-start`}
-            class:font-bold={space === colorSpace}
-            on:click={() => {
-              onChange(space);
-              onClick();
-            }}
-          >
+      {#each advancedSpaceOptions as space}
+        <button
+          class={`${simpleTooltipRowStyle} py-1 text-sm`}
+          class:border-l-4={space === colorSpace}
+          on:click={() => {
+            onChange(space);
+            onClick();
+          }}
+        >
+          <span class:font-bold={space === colorSpace}>
             {space.toUpperCase()}
-          </button>
-          <span class="text-sm italic col-span-3">
-            {colorPickerConfig[space].description}
           </span>
-        {/each}
-      </div>
+          {colorPickerConfig[space].description.split(" ").slice(1).join(" ")}
+        </button>
+      {/each}
     </div>
     <button
       slot="target"

apps/color-buddy/src/controls/SetSimulation.svelte

@@ -26,7 +26,7 @@
           on:click={() => configStore.setColorSim(value)}
           class:font-bold={$configStore.colorSim === value}
         >
-          {value}
+          {titleCase(value)}
         </div>
       {/each}
     </div>