Add a 'mono' button. (#229)

This adds another color-modifying button, "Mono", which makes the fill and stroke colors a minor variation of the background. This makes the composition as a whole monochromatic, hence the name.

In practice, this is just tinting the background by black (stroke) and white (fill) a tiny bit.  The color transformation could be used, for instance, to turn a cluster (even a simple one that is essentially just a single symbol) into a background for another cluster. (Note that there's not currently an easy way to actually compose multiple compositions like this, though I'd like there to be!)

lib/svg-composition-context.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { mixColor } from "./color-util";
 import { ColorWidget } from "./color-widget";
 import { DEFAULT_BG_COLOR } from "./colors";
 import { createSvgSymbolContext, SvgSymbolContext } from "./svg-symbol";
@@ -38,6 +39,13 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
     const { background, stroke, fill } = DEFAULT_CONTEXT;
     onChange({ ...ctx, background, stroke, fill });
   };
+  const monochromatizeColors = () => {
+    onChange({
+      ...ctx,
+      stroke: mixColor(ctx.background, DEFAULT_CONTEXT.stroke, 0.1),
+      fill: mixColor(ctx.background, DEFAULT_CONTEXT.fill, 0.1),
+    });
+  };
   const extraButtons = (
     <>
       <button
@@ -46,6 +54,12 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
       >
         B&amp;W
       </button>{" "}
+      <button
+        onClick={monochromatizeColors}
+        title="Make stroke and fill a variation of the background"
+      >
+        Mono
+      </button>{" "}
     </>
   );
   return (