Add a black & white button. (#228)

This adds a "B&W" button to the colors area in the cluster and mandala pages. Clicking it will reset the background, stroke and fill colors to their monochromatic defaults.

I'm calling the button "B&W" for now to minimize the amount of space the button takes up, since I'd like to add at least one more to that area.  At some point we might want to use a UI that scales a bit better, like a dropdown button.

lib/svg-composition-context.tsx

@@ -34,8 +34,26 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
   onChange,
   children,
 }: CompositionContextWidgetProps<T>): JSX.Element {
+  const resetColors = () => {
+    const { background, stroke, fill } = DEFAULT_CONTEXT;
+    onChange({ ...ctx, background, stroke, fill });
+  };
+  const extraButtons = (
+    <>
+      <button
+        onClick={resetColors}
+        title="Reset colors to their black &amp; white defaults"
+      >
+        B&amp;W
+      </button>{" "}
+    </>
+  );
   return (
-    <SymbolContextWidget ctx={ctx} onChange={onChange}>
+    <SymbolContextWidget
+      ctx={ctx}
+      onChange={onChange}
+      extraButtons={extraButtons}
+    >
       {children}
       <ColorWidget
         label="Background"