Ugh (#6)

* Rework color storage

* clean up

* .

* aesthetic adjustments

* refactor color info

* abstract out the xyguides

* extract zoom

* rework visual apperance

* fix types

README.md

@@ -19,8 +19,8 @@ The basic UX for editing has the following components
 The 2D graph displays hue/chroma graph and the 1D graph displays lightness. You can map any of a number of colorspaces onto this pair of graphs. (in the code, the lightness graph is "Z"). I propose the following changes
 
 - [x] Reduce the visual impact of the axes and labels by making them transparent gray. Set the colors, made them adaptive, set the luminance flip to .3 (50% visually)
-- [ ] Flip the Y axis (zero at the bottom)
-- [ ] Make the labels integers for CIELAB
+- [x] Flip the Y axis (zero at the bottom)
+- [x] Make the labels integers for CIELAB
 - [x] Make the axis scale sliders less visualy prominent.
 - [ ] Consider removing the axis sliders, replace them with zoom controls in the same panel as the background color selection. Changing these values is rare, they don't need to take up so much UX space.
 - [ ] The 2D graph should always be a centered hue/chroma graph. CIELAB and CIELCH would therefore use the same graph. Leave the LAB vs LCH distinction for slider based editing.
@@ -57,18 +57,16 @@ To raise the sliders, you need to click on one of the examples that are displaye
 - [ ] Vega/Vega-Lite Specification
 - [ ] Bug: changing the color frame fucks everything up???? (particularly for HSV/HSL)
 - [ ] Eval response options
-- [ ] Coat of paint
-- [ ] add color analysis
 - [ ] higher card. vis examples
-- [ ] order as diverging
 - [ ] Distribute radially
-- [ ] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
-- [ ] "opposing color" to "Convert selection to opposing"
+- [?] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] NTH: Rest of basic geometry manipulations: flip (horizontal, vertical), scale
-- [ ] Meta: figure out all the other features in maureen's setup
 - [ ] Examples held as assets somewhere that are downloaded rather than components (for consistency)
 - [ ] Labels, tooltips, etc
+- [x] "opposing color" to "Convert selection to opposing"
+- [x] Meta: figure out all the other features in maureen's setup
+- [x] order as diverging
 - [x] Make it possible to ignore / dismiss lints
 - [x] Touch events polish
 - [x] drag box in z channel should work

src/App.svelte

@@ -5,7 +5,6 @@
   import LeftPanel from "./content-modules/LeftPanel.svelte";
   import ActionArea from "./content-modules/ActionArea.svelte";
   import Examples from "./content-modules/Examples.svelte";
-  import Swatches from "./content-modules/Swatches.svelte";
   import Eval from "./content-modules/Eval.svelte";
   import KeyboardHooks from "./components/KeyboardHooks.svelte";
   import ComparePal from "./content-modules/ComparePal.svelte";
@@ -32,7 +31,6 @@
           startDragging={() => colorStore.pausePersistance()}
           stopDragging={() => colorStore.resumePersistance()}
         />
-        <Swatches />
       </div>
       <div class="grow">
         <nav