Refactor colors to use a ‘color token’ system

The purpose of this change is to make color theming easier, dark mode in particular. It's based on my experience working at a Big Tech Company that went through a couple of design system strategies. I do this for my personal projects and find it makes things easier even for a 1-person "team."

The basic idea is to split your color system into 3 layers:

- Palette, the set of all colors
- Color tokens, mapping colors to generic and reusable names with semantic meaning
- Component use, assigning a color token to a specific place in the UI

A hypothetical dark mode theme would remap only the color tokens layer.

silicon/static/css/colors-light.css

@@ -1,27 +1,67 @@
 :root {
-    --nav-background: rgb(221, 221, 221);
-    --nav-text: black;
-    --nav-title-background: rgb(52, 58, 64);
-    --nav-title-text: white;
-    --nav-page-links: rgb(51, 122, 183);
-    --nav-text: rgb(119, 119, 119);
-    --nav-button-background: var(--nav-page-links);
-    --nav-button-background-hover: rgba(51 ,122 ,183 ,0.75);
-    --nav-button-text: white;
-    --nav-alert-background: rgb(183, 52, 52);
-    --nav-alert-text: white;
-
-    --article-background: white;
-    --article-code-text: black;
-    --article-pre-background: rgb(236, 237, 239);
-    --article-pre-text: black;
-    --article-pre-border: rgb(214, 216, 219);
-    --article-table-border: var(--article-pre-border);
-    --article-table-stripe: var(--article-pre-background);
+    /* Color palette */
+    --c-gray10: white;
+    --c-gray9: rgb(236, 237, 239);
+    --c-gray8: rgb(221, 221, 221);
+    --c-gray7: rgb(214, 216, 219);
+    --c-gray5: rgb(128, 128, 128);
+    --c-gray4: rgb(119, 119, 119);
+    --c-gray2: rgb(52, 58, 64);
+    --c-gray0: black;
+
+    --c-blue-light: rgba(51, 122, 183);
+    --c-blue-light-translucent: rgba(51, 122, 183, 0.75);
+    --c-red: rgb(183, 52, 52);
+    --c-green: rgb(45, 169, 74);
+    --c-blue: rgb(0, 0, 238);
+    --c-purple: rgb(85, 26, 139);
+
+    /* Color tokens */
+
+    --color-bg-weak: var(--c-gray10);
+    --color-bg-weak2: var(--c-gray9);
+    --color-bg-strong: var(--c-gray8);
+    --color-invert-bg-strong: var(--c-gray2);
+    --color-fg-error: var(--c-red);
+
+    --color-fg-text: var(--c-gray0);
+    --color-invert-fg-text: var(--c-gray10);
+    --color-fg-text-weak: var(--c-gray4);
+
+    --color-fg-link-external: var(--c-blue);
+    --color-fg-link-internal: var(--c-green);
+    --color-fg-link-visited: var(--c-purple);
+    --color-bg-link: var(--c-blue-light);
+    --color-bg-link-hover: var(--c-blue-light-translucent);
+
+    --color-border-weak: var(--c-gray7);
+    --color-border-strong: var(--c-gray5);
+
+    /* Color values in components */
+
+    --nav-background: var(--color-bg-strong);
+    --nav-text: var(--color-fg-text);
+    --nav-title-background: var(--color-invert-bg-strong);
+    --nav-title-text: var(--color-bg-weak);
+    --nav-page-links: var(--color-bg-link);
+    --nav-text: var(--color-fg-text-weak);
+    --nav-button-background: var(--c-blue-light);
+    --nav-button-background-hover: var(--color-bg-link-hover);
+    --nav-button-text: var(--color-invert-fg-text);
+    --nav-alert-background: var(--color-bg-error);
+    --nav-alert-text: var(--color-bg-weak);
+
+    --article-background: var(--color-bg-weak);
+    --article-code-text: var(--color-fg-text);
+    --article-pre-background: var(--color-bg-weak2);
+    --article-pre-text: var(--color-fg-text);
+    --article-pre-border: var(--color-border-weak);
+    --article-table-border: var(--color-border-weak);
+    --article-table-stripe: var(--color-bg-weak2);
     --article-table-hover: var(--nav-background);
-    --article-header-underline: gray;
-    --article-internal-link: rgb(45, 169, 74);
-    --article-external-link: rgb(0, 0, 238);
-    --article-external-link-visited: rgb(85, 26, 139);
-    --article-warning-text: rgb(183, 52, 52);
+    --article-header-underline: var(--color-border-strong);
+    --article-internal-link: var(--color-fg-link-internal);
+    --article-external-link: var(--color-fg-link-external);
+    --article-external-link-visited: var(--color-fg-link-visited);
+    --article-warning-text: var(--color-fg-error);
 }