Beautification (#54)

* remove affects/contexts install tags

* pretty enuf for a screen shot

* fix tests

public/lang-docs.md

@@ -86,6 +86,128 @@ Maps:
 # Examples
 
 
+### WCAG Contrast Graphical Objects
+
+Description: All colors in a palette should have a sufficient contrast ratio with the background color. This is because if they are not, then they will not be differentiable from each other in some contexts. Valid algorithms are "APCA", "WCAG21", "Michelson", "Weber", "Lstar", "DeltaPhi".
+
+Natural Language: ALL a IN colors SUCH THAT contrast(a, background, WCAG21) > 3
+
+Palettes that will fail this test:
+
+- #feed72, #f8f4d2, #eb717b with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #cf5f67, #468bbc, #848475 with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "all": {
+        "in": "colors", 
+        "varb": "a", 
+        "predicate": {
+            ">": {
+                "left": { "contrast": {"left": "a", "right": "background"}, "algorithm": "WCAG21" }, 
+                "right": 3
+            }
+        }
+    }
+}
+
+```
+
+
+
+
+
+### WCAG Text Contrast: AA
+
+Description: All colors in a palette should have a sufficient contrast ratio with the background color. This is because if they are not, then they will not be differentiable from each other in some contexts. Valid algorithms are "APCA", "WCAG21", "Michelson", "Weber", "Lstar", "DeltaPhi".
+
+Natural Language: ALL a IN colors WHERE isTag(a, text) SUCH THAT contrast(a, background, WCAG21) > 4.5
+
+Palettes that will fail this test:
+
+- #feed72, #f8f4d2, #eb717b (text) with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #feed72, #f8f4d2, #af3b4b (text) with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "all": {
+        "in": "colors", 
+        "varb": "a", 
+        "where": {"isTag": "a", "value": "text"}, 
+        "predicate": {
+            ">": {
+                "left": { "contrast": {"left": "a", "right": "background"}, "algorithm": "WCAG21" }, 
+                "right": 4.5
+            }
+        }
+    }
+}
+
+```
+
+
+
+
+
+### WCAG Text Contrast: AAA
+
+Description: All colors in a palette should have a sufficient contrast ratio with the background color. This is because if they are not, then they will not be differentiable from each other in some contexts. Valid algorithms are "APCA", "WCAG21", "Michelson", "Weber", "Lstar", "DeltaPhi".
+
+Natural Language: ALL a IN colors WHERE isTag(a, text) SUCH THAT contrast(a, background, WCAG21) > 7
+
+Palettes that will fail this test:
+
+- #feed72, #f8f4d2, #af3b4b (text) with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #feed72, #f8f4d2, #6c001a (text) with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "all": {
+        "in": "colors", 
+        "varb": "a", 
+        "where": {"isTag": "a", "value": "text"}, 
+        "predicate": {
+            ">": {
+                "left": { "contrast": {"left": "a", "right": "background"}, "algorithm": "WCAG21" }, 
+                "right": 7
+            }
+        }
+    }
+}
+
+```
+
+
+
+
+
 ### Saturated not appropriate for serious affect
 
 Description: Highly saturated light colors are not appropriate for palettes that seek to be serious.  See "Affective color in visualization" for more.
@@ -279,7 +401,7 @@ Program:
 
 
 
-### CVD: deuteranopia Friendly
+### CVD: Deuteranopia Friendly
 
 Description: All colors in a palette should be differentiable by people with deuteranopia (ie can't see green). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -323,7 +445,7 @@ Program:
 
 
 
-### CVD: protanopia Friendly
+### CVD: Protanopia Friendly
 
 Description: All colors in a palette should be differentiable by people with protanopia (ie can't see red). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -367,7 +489,7 @@ Program:
 
 
 
-### CVD: tritanopia Friendly
+### CVD: Tritanopia Friendly
 
 Description: All colors in a palette should be differentiable by people with tritanopia (ie can't see blue). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -1134,46 +1256,6 @@ Program:
 
 
 
-### Background Contrast
-
-Description: All colors in a palette should have a sufficient contrast ratio with the background color. This is because if they are not, then they will not be differentiable from each other in some contexts. Valid algorithms are "APCA", "WCAG21", "Michelson", "Weber", "Lstar", "DeltaPhi".
-
-Natural Language: ALL a IN colors SUCH THAT contrast(a, background, WCAG21) > 1.1
-
-Palettes that will fail this test:
-
-- #0ff, #00faff, #00e4ff, #fdfdfc, #0ff with a #fff background
-
-
-
-Palettes that will pass this test:
-
-- #cf5f67, #468bbc, #848475, #c55eab, #ff008c with a #fff background
-
-
-Program:
-
-```json
-{
-    "$schema": "http://localhost:3000/lint-schema.json", 
-    "all": {
-        "in": "colors", 
-        "varb": "a", 
-        "predicate": {
-            ">": {
-                "left": { "contrast": {"left": "a", "right": "background"}, "algorithm": "WCAG21" }, 
-                "right": 1.1
-            }
-        }
-    }
-}
-
-```
-
-
-
-
-
 ### Colors distinguishable in order
 
 Description: Opt for colors that are perceptually distinguishable in a logical sequence when designing visual elements like charts or graphs. This ensures that viewers can easily recognize the order or progression of data points. For categorical this means that when only a small number of colors are used, they should be as different as possible. For sequential and diverging, this means that the colors should be as different as possible in order.

src/App.svelte

@@ -92,15 +92,19 @@
       </div>
 
       <div class="grow">
-        <Nav
-          className="bg-stone-800 text-white h-12 items-center"
-          {tabs}
-          isTabSelected={(x) => $configStore.route === x}
-          selectTab={(x) => {
-            // @ts-ignore
-            configStore.setRoute(x);
-          }}
-        />
+        <div class="bg-stone-800">
+          <div class="flex">
+            <Nav
+              className="bg-stone-800 text-white h-12 items-center"
+              {tabs}
+              isTabSelected={(x) => $configStore.route === x}
+              selectTab={(x) => {
+                // @ts-ignore
+                configStore.setRoute(x);
+              }}
+            />
+          </div>
+        </div>
         {#if palPresent}
           {#if $configStore.route === "examples"}
             <Examples />

src/content-modules/ComparePal.svelte

@@ -43,6 +43,8 @@
       <div class="font-bold">
         <span class="italic">Compare: {ComparisonPal.name}</span>
       </div>
+      <!-- keep even with the tags line -->
+      <div>&nbsp;</div>
       <div class="flex">
         <SetColorSpace
           {colorSpace}
@@ -83,7 +85,7 @@
         onFocusedColorsChange={() => {}}
         startDragging={() => {}}
         stopDragging={() => {}}
-        blindColors={(showDiff
+        annotationColors={(showDiff
           ? currentPal.colors.map((x) => x.color.toColorSpace(colorSpace))
           : []
         ).slice(
@@ -100,7 +102,12 @@
   </div>
   <div class="flex">
     <Tooltip>
-      <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
+      <button
+        class={`${buttonStyle} pl-0`}
+        slot="target"
+        let:toggle
+        on:click={toggle}
+      >
         Change Compared Palette
       </button>
       <div class="flex flex-col w-80" slot="content">
@@ -136,12 +143,7 @@
     /> -->
     </div>
   {/if}
-  <Nav
-    tabs={["example"]}
-    selectTab={() => {}}
-    isTabSelected={() => true}
-    className="mt-4"
-  />
+
   {#if compareIdx !== undefined}
     <div class="example-holder flex justify-center-center flex-col">
       <ExampleAlaCart

src/content-modules/MainColumn.svelte

@@ -9,9 +9,9 @@
   import ColorScatterPlot from "../scatterplot/ColorScatterPlot.svelte";
   import ExampleAlaCart from "../example/ExampleAlaCarte.svelte";
   import PalTypeConfig from "../controls/PalTypeConfig.svelte";
+  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
 
   import ModifySelection from "../controls/ModifySelection.svelte";
-  import Nav from "../components/Nav.svelte";
   import PalPreview from "../components/PalPreview.svelte";
   import SetColorSpace from "../controls/SetColorSpace.svelte";
   import simulate_cvd from "../lib/cvd-sim";
@@ -21,20 +21,34 @@
   export let scatterSize = 450;
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: selectedBlindType = $configStore.colorSim;
+  $: selectedCVDType = $configStore.colorSim;
 </script>
 
 <div class="flex flex-col h-full px-4">
   <!-- naming stuff -->
-  <div class="flex font-bold">
-    <span class="italic">Current Pal:</span>
+  <div class="flex font-bold justify-between">
     <div class="flex">
-      <span>✎</span>
-      <ContentEditable
-        onChange={(x) => colorStore.setCurrentPalName(x)}
-        value={currentPal.name}
-      />
+      <span class="italic">Current Pal:</span>
+      <div class="flex">
+        <span>✎</span>
+        <ContentEditable
+          onChange={(x) => colorStore.setCurrentPalName(x)}
+          value={currentPal.name}
+        />
+      </div>
     </div>
+    <PalTypeConfig />
+  </div>
+  <!-- tags -->
+  <div class="flex text-sm italic">
+    {#if currentPal.tags.length}
+      Tags:
+      {#each currentPal.tags as tag}
+        <div class="ml-2">{tag}</div>
+      {/each}
+    {:else}
+      <div>&nbsp;</div>
+    {/if}
   </div>
   <div class="flex">
     <SetColorSpace
@@ -63,14 +77,14 @@
     onFocusedColorsChange={(x) => focusStore.setColors(x)}
     startDragging={() => colorStore.pausePersistance()}
     stopDragging={() => colorStore.resumePersistance()}
-    blindColors={selectedBlindType === "none"
+    annotationColors={selectedCVDType === "none"
       ? []
-      : currentPal.colors.map((x) => simulate_cvd(selectedBlindType, x.color))}
+      : currentPal.colors.map((x) => simulate_cvd(selectedCVDType, x.color))}
   />
 
   <div class="flex flex-wrap">
     <button
-      class={buttonStyle}
+      class={`${buttonStyle} pl-0`}
       on:click={() => configStore.setScatterplotMode("putting")}
     >
       Add color {#if $configStore.scatterplotMode === "putting"}(move mouse on
@@ -88,25 +102,18 @@
       pal={currentPal}
       showTags={true}
     />
-    <Nav
-      tabs={["palette-config", "example"]}
-      isTabSelected={(x) => x === $configStore.mainColumnRoute}
-      selectTab={(x) => {
-        //@ts-ignore
-        configStore.setMainColumnRoute(x);
-      }}
+    <GetColorsFromString
+      allowSort={true}
+      onChange={(colors) => colorStore.setCurrentPalColors(colors)}
+      colorSpace={currentPal.colorSpace}
+      colors={currentPal.colors}
+    />
+    <ExampleAlaCart
+      paletteIdx={$colorStore.currentPal}
+      exampleIdx={$configStore.mainColumnSelectedExample}
+      setExampleIdx={(idx) => configStore.setMainColumnSelectedExample(idx)}
+      allowModification={true}
+      bgColor={currentPal.background.toHex()}
     />
-    {#if $configStore.mainColumnRoute === "palette-config"}
-      <PalTypeConfig />
-    {/if}
-    {#if $configStore.mainColumnRoute === "example"}
-      <ExampleAlaCart
-        paletteIdx={$colorStore.currentPal}
-        exampleIdx={$configStore.mainColumnSelectedExample}
-        setExampleIdx={(idx) => configStore.setMainColumnSelectedExample(idx)}
-        allowModification={true}
-        bgColor={currentPal.background.toHex()}
-      />
-    {/if}
   </div>
 </div>

src/controls/ColorTagger.svelte

@@ -43,7 +43,7 @@
     <div slot="content" class="max-w-md">
       <div class="font-bold">Color Tags</div>
       <div class="italic text-sm">
-        These to mark properties like color, brand, and so on. {#if commonTags.length}
+        These mark properties like color, brand, and so on. {#if commonTags.length}
           Here are some common ones that are have specific effects in the app.{/if}
       </div>
       {#each commonTags as tag}