Factor out colors.ts.

lib/browser-main.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import { getBoundingBoxSize } from "./bounding-box";
+import { FILL_REPLACEMENT_COLOR, STROKE_REPLACEMENT_COLOR } from "./colors";
 
 import _SvgVocabulary from "./svg-vocabulary.json";
 import type { SvgSymbolData, SvgSymbolElement } from "./vocabulary";
@@ -11,9 +12,6 @@ const appEl = document.getElementById(APP_ID);
 
 const SvgVocabulary: SvgSymbolData[] = _SvgVocabulary as any;
 
-const STROKE_REPLACEMENT_COLOR = "#000000";
-const FILL_REPLACEMENT_COLOR = "#ffffff";
-
 if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }

lib/colors.ts

@@ -0,0 +1,19 @@
+export const STROKE_REPLACEMENT_COLOR = "#000000";
+export const FILL_REPLACEMENT_COLOR = "#ffffff";
+
+export const TAIL_ATTACHMENT_COLOR = "#ff0000";
+export const LEGS_ATTACHMENT_COLOR = "#ffff00";
+export const ARMS_ATTACHMENT_COLOR = "#00ff00";
+export const HORNS_ATTACHMENT_COLOR = "#00ffff";
+export const CROWN_ATTACHMENT_COLOR = "#0000ff";
+
+export const NESTING_BOUNDING_BOX_COLOR = "#ff00ff";
+
+export const NON_VISUAL_COLORS = new Set([
+  TAIL_ATTACHMENT_COLOR,
+  LEGS_ATTACHMENT_COLOR,
+  ARMS_ATTACHMENT_COLOR,
+  HORNS_ATTACHMENT_COLOR,
+  CROWN_ATTACHMENT_COLOR,
+  NESTING_BOUNDING_BOX_COLOR,
+]);