Skip to main content

max / makenotwork

Put every colour on a token, including nine that were silently rendering fallbacks
Author: Max Johnson <me@maxj.phd> · 2026-08-02 22:06 UTC
Signed with PGP, not checked
Commit: 0f8706ed3a098a0d0db204d011aa7211341fcc85
Parent: 910defd
3 files changed, +53 insertions, -39 deletions
M server/docs/design-system.md +2 -2
@@ -10,7 +10,7 @@
10 10
11 11 | Tier | Token group | Where defined |
12 12 |---|---|---|
13 - | Color | `--background`, `--detail`, `--highlight`, `--light-background`, surface family, `--text-muted`, `--border`, semantic (`--success/-bg`, `--warning/-bg/-border`, `--danger/-bg`, `--error/-bg`), `--stripe`, health (`--health-ok/-warn/-error/-unknown`), diff (`--diff-add/-bg`, `--diff-del/-bg`), `--focus-ring`, `--highlight-faint`, `--overlay` | `style.css:40-95` |
13 + | Color | Surfaces `--surface-page/-raised/-sunken/-overlay/-well` and the bevel pair; content `--content/-secondary/-muted/-on-action`; `--action/-hover`; semantic `--success`, `--warning`, `--danger`, `--info`; `--border/-strong`, `--focus-ring`, `--hover-surface`, `--overlay`; `--category-one`..`--category-six`; fixed anchors `--primary-dark/-light`, `--stripe`, diff (`--diff-add/-bg`, `--diff-del/-bg`) and the base16 Tomorrow `--syntax-*` set | `style.css` `:root` |
14 14 | Typeface | `--font-heading` (Young Serif), `--font-mono` (IBM Plex Mono), `--font-body` (Lato) | `style.css:42-44` |
15 15 | Type size | `--text-fine` / `--text-note` / `--text-body` / `--text-lead` / `--text-subhead` / `--text-head` / `--text-title` / `--text-display` / `--text-hero`, named for what the text is, not the size | `geometry.css` (generated by makeover-build) |
16 16 | Spacing | `--gap-bound` / `--gap-peer` / `--gap-group` / `--gap-section` / `--gap-pane` / `--gap-page`, named for the relationship they express, not the size | `geometry.css` (generated by makeover-build) |
@@ -18,7 +18,7 @@
18 18 | Stacking | `--z-raised` / `--z-nav` / `--z-header` / `--z-dropdown` / `--z-picker` / `--z-context` / `--z-overlay` / `--z-modal` / `--z-toast` / `--z-banner` / `--z-skip-link`, in that order, named for what floats over what | `style.css:213-228` |
19 19 | Shadow | Everyday depth: `--shadow-raised` (buttons, tabs), `--shadow-card` (cards, panels), `--shadow-inset` (inputs, recessed). All three alias the bevel pair `--bevel-raised` / `--bevel-inset` from `layout.css`, which makeover derives from each theme's own raised surface. Blurred (true elevation, floats over page): `--shadow-1` (subtle), `--shadow-2` (raised), `--shadow-3` (modal/overlay). | `style.css:224-243` |
20 20
21 - Pure `#000` and `#fff` are forbidden outside the token table. Bootstrap-derived yellows (`#fff3cd`, `#ffc107`) are forbidden. Use `--warning-bg` / `--warning-border`.
21 + Every colour outside `:root` is a `var()` or a `color-mix()` over one; there are no hex or `rgba()` literals in the stylesheets at all. Write the token, not a `var(--token, #fallback)`: nine of those named tokens that never existed and quietly rendered their hardcoded fallback on all 31 themes. Pure `#000` and `#fff` are forbidden outside the token table. Bootstrap-derived yellows (`#fff3cd`, `#ffc107`) are forbidden. Use `--warning-bg` / `--warning-border`.
22 22
23 23 ## Type
24 24
M server/static/style.css +48 -34
@@ -211,6 +211,20 @@
211 211 --radius-md: 0; /* containers: cards, panels, dropdowns */
212 212 --radius-round: 50%;
213 213
214 + /* Syntax highlighting for the git source browser: base16 Tomorrow, used
215 + whole rather than assembled colour by colour. It stays fixed across all
216 + 31 themes on purpose, the same argument as the diff add/del pair above:
217 + a reader recognises a highlighting palette, and re-tinting it per theme
218 + costs that recognition to gain nothing. Named so it is legible as one
219 + palette instead of seven hex literals scattered through the git rules. */
220 + --syntax-keyword: #8959a8;
221 + --syntax-string: #718c00;
222 + --syntax-comment: #8e908c;
223 + --syntax-constant: #f5871f;
224 + --syntax-entity: #4271ae;
225 + --syntax-variable: #c82829;
226 + --syntax-support: #3e999f;
227 +
214 228 /* Stacking order, named for what floats over what. Local rather than
215 229 generated: this is a claim about MNW's own furniture, not an invariant
216 230 like spacing. The numbers are spaced so a value can be slotted between
@@ -2171,7 +2185,7 @@
2171 2185 .article-page .article-body a {
2172 2186 color: var(--action);
2173 2187 text-decoration: underline;
2174 - text-decoration-color: rgba(108, 92, 231, 0.4);
2188 + text-decoration-color: color-mix(in oklch, var(--action) 40%, transparent);
2175 2189 text-underline-offset: 2px;
2176 2190 }
2177 2191
@@ -4121,7 +4135,7 @@
4121 4135 color: var(--content-muted);
4122 4136 }
4123 4137
4124 - .layer-health-card.layer-ok { border-left-color: var(--success, #527a3e); }
4138 + .layer-health-card.layer-ok { border-left-color: var(--success); }
4125 4139 .layer-health-card.layer-degraded { border-left-color: var(--warning); }
4126 4140 .layer-health-card.layer-down { border-left-color: var(--danger); }
4127 4141
@@ -4143,7 +4157,7 @@
4143 4157 line-height: 1.4;
4144 4158 }
4145 4159
4146 - .layer-chip-pass { background: #e6f0dc; border-color: #c4d8a8; color: #3a5a2a; }
4160 + .layer-chip-pass { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); border-color: var(--success); color: var(--success); }
4147 4161 .layer-chip-skip { background: var(--surface-page); border-color: var(--border); color: var(--content-muted); }
4148 4162 .layer-chip-fail { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); border-color: var(--danger); color: var(--danger); font-weight: 600; }
4149 4163 .layer-chip-error { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); border-color: var(--warning); color: var(--warning); font-weight: 600; }
@@ -4869,7 +4883,7 @@
4869 4883 padding: var(--gap-section);
4870 4884 font-family: var(--font-mono);
4871 4885 font-size: var(--text-note);
4872 - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4886 + box-shadow: var(--shadow-3);
4873 4887 animation: toast-in 0.3s ease-out;
4874 4888 max-width: 300px;
4875 4889 display: flex;
@@ -4922,7 +4936,7 @@
4922 4936 }
4923 4937
4924 4938 .toast-retry-btn:hover {
4925 - background: rgba(255, 255, 255, 0.15);
4939 + background: color-mix(in oklch, var(--primary-light) 15%, transparent);
4926 4940 }
4927 4941
4928 4942 .toast.fade-out {
@@ -6465,7 +6479,7 @@
6465 6479 .doc-body a {
6466 6480 color: var(--action);
6467 6481 text-decoration: underline;
6468 - text-decoration-color: rgba(108, 92, 231, 0.4);
6482 + text-decoration-color: color-mix(in oklch, var(--action) 40%, transparent);
6469 6483 text-underline-offset: 2px;
6470 6484 }
6471 6485
@@ -6648,7 +6662,7 @@
6648 6662 max-height: 300px;
6649 6663 overflow-y: auto;
6650 6664 z-index: var(--z-dropdown);
6651 - box-shadow: 0 4px 8px rgba(0,0,0,0.08);
6665 + box-shadow: var(--shadow-2);
6652 6666 }
6653 6667 .docs-search-result {
6654 6668 display: flex;
@@ -6930,15 +6944,15 @@
6930 6944 /* Syntax highlighting (syntect class-based) */
6931 6945 .git-file-content .source { color: var(--content); }
6932 6946 .git-file-content .keyword,
6933 - .git-file-content .storage { color: #8959a8; }
6934 - .git-file-content .string { color: #718c00; }
6935 - .git-file-content .comment { color: #8e908c; font-style: italic; }
6947 + .git-file-content .storage { color: var(--syntax-keyword); }
6948 + .git-file-content .string { color: var(--syntax-string); }
6949 + .git-file-content .comment { color: var(--syntax-comment); font-style: italic; }
6936 6950 .git-file-content .constant,
6937 - .git-file-content .constant.numeric { color: #f5871f; }
6938 - .git-file-content .entity.name { color: #4271ae; }
6939 - .git-file-content .variable { color: #c82829; }
6940 - .git-file-content .support { color: #3e999f; }
6941 - .git-file-content .meta.preprocessor { color: #8959a8; }
6951 + .git-file-content .constant.numeric { color: var(--syntax-constant); }
6952 + .git-file-content .entity.name { color: var(--syntax-entity); }
6953 + .git-file-content .variable { color: var(--syntax-variable); }
6954 + .git-file-content .support { color: var(--syntax-support); }
6955 + .git-file-content .meta.preprocessor { color: var(--syntax-keyword); }
6942 6956
6943 6957 /* Commit list */
6944 6958 .git-commit-list { list-style: none; }
@@ -7042,10 +7056,10 @@
7042 7056 border-radius: 2px;
7043 7057 line-height: 1.4;
7044 7058 }
7045 - .diff-status-added { background: #d4edda; color: #155724; }
7046 - .diff-status-deleted { background: #f8d7da; color: #721c24; }
7059 + .diff-status-added { background: color-mix(in oklch, var(--success) 14%, var(--surface-page)); color: var(--success); }
7060 + .diff-status-deleted { background: color-mix(in oklch, var(--danger) 14%, var(--surface-page)); color: var(--danger); }
7047 7061 .diff-status-modified { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
7048 - .diff-status-renamed { background: #d1ecf1; color: #0c5460; }
7062 + .diff-status-renamed { background: color-mix(in oklch, var(--info) 14%, var(--surface-page)); color: var(--info); }
7049 7063 .git-diff-table {
7050 7064 width: 100%;
7051 7065 border-collapse: collapse;
@@ -7825,7 +7839,7 @@
7825 7839 .collection-picker {
7826 7840 position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
7827 7841 background: var(--surface-page); border: 1px solid var(--border);
7828 - box-shadow: 0 2px 8px rgba(0,0,0,0.12); min-width: 220px;
7842 + box-shadow: var(--shadow-2); min-width: 220px;
7829 7843 }
7830 7844 .collection-picker-list { max-height: 200px; overflow-y: auto; padding: var(--gap-bound) 0; }
7831 7845 .collection-picker-item {
@@ -7849,7 +7863,7 @@
7849 7863 .grid-card-save {
7850 7864 position: absolute; top: 0.4rem; right: 0.4rem; z-index: var(--z-raised);
7851 7865 background: var(--surface-page); border-radius: 3px; padding: var(--gap-bound) var(--gap-peer);
7852 - box-shadow: 0 1px 3px rgba(0,0,0,0.15); opacity: 0;
7866 + box-shadow: var(--shadow-1); opacity: 0;
7853 7867 }
7854 7868 .grid-card:hover .grid-card-save { opacity: 0.7; }
7855 7869 .grid-card-save:hover { opacity: 1; }
@@ -7866,7 +7880,7 @@
7866 7880 .tag-suggest-list {
7867 7881 display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
7868 7882 background: var(--surface-page); border: 1px solid var(--border); border-top: none;
7869 - box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 280px; overflow-y: auto;
7883 + box-shadow: var(--shadow-3); max-height: 280px; overflow-y: auto;
7870 7884 }
7871 7885 .suggestion-item {
7872 7886 display: flex; justify-content: space-between; align-items: center;
@@ -11168,14 +11182,14 @@
11168 11182 inset: auto 0 0 0;
11169 11183 display: flex;
11170 11184 justify-content: space-between;
11171 - background: rgba(0, 0, 0, 0.55);
11185 + background: var(--overlay);
11172 11186 }
11173 11187
11174 11188 .gallery-tile-btn {
11175 11189 flex: 1;
11176 11190 border: none;
11177 11191 background: transparent;
11178 - color: #fff;
11192 + color: var(--primary-light);
11179 11193 cursor: pointer;
11180 11194 font-size: var(--text-note);
11181 11195 line-height: 1.4;
@@ -11330,26 +11344,26 @@
11330 11344 .cp-editor { max-width: 1200px; margin: 0 auto; padding: var(--gap-section); }
11331 11345 .cp-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-section); flex-wrap: wrap; }
11332 11346 .cp-editor-actions { display: flex; gap: var(--gap-section); }
11333 - .cp-intro { color: var(--muted, #666); margin: var(--gap-bound) 0 var(--gap-section); }
11347 + .cp-intro { color: var(--content-muted); margin: var(--gap-bound) 0 var(--gap-section); }
11334 11348 .cp-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-section); align-items: start; }
11335 11349 .cp-editor-form { display: flex; flex-direction: column; gap: var(--gap-peer); }
11336 11350 .cp-code { width: 100%; min-height: 220px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-note); line-height: 1.4; resize: vertical; }
11337 11351 .cp-editor-buttons { display: flex; align-items: center; gap: var(--gap-section); margin-top: var(--gap-peer); }
11338 - .cp-preview-pane { border: 1px solid var(--detail, #ccc); border-radius: 4px; overflow: hidden; }
11339 - .cp-preview-bar { font-size: var(--text-fine); padding: var(--gap-bound) var(--gap-group); background: var(--light-background, #f2f2f2); border-bottom: 1px solid var(--detail, #ccc); }
11340 - .cp-preview { width: 100%; height: 520px; border: 0; background: #fff; display: block; }
11352 + .cp-preview-pane { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
11353 + .cp-preview-bar { font-size: var(--text-fine); padding: var(--gap-bound) var(--gap-group); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
11354 + .cp-preview { width: 100%; height: 520px; border: 0; background: var(--primary-light); display: block; }
11341 11355 .cp-blocked { margin-top: var(--gap-section); }
11342 11356 .cp-blocked-title { font-weight: 600; margin-bottom: var(--gap-peer); }
11343 - .cp-blocked-empty { color: var(--muted, #666); }
11357 + .cp-blocked-empty { color: var(--content-muted); }
11344 11358 .cp-blocked-list { list-style: none; padding: 0; margin: 0; }
11345 - .cp-blocked-list li { padding: var(--gap-peer) 0; border-bottom: 1px solid var(--detail, #eee); font-size: var(--text-note); display: flex; gap: var(--gap-peer); flex-wrap: wrap; align-items: baseline; }
11359 + .cp-blocked-list li { padding: var(--gap-peer) 0; border-bottom: 1px solid var(--border); font-size: var(--text-note); display: flex; gap: var(--gap-peer); flex-wrap: wrap; align-items: baseline; }
11346 11360 .cp-blocked-kind { font-weight: 600; }
11347 - .cp-blocked-loc { color: var(--muted, #666); }
11348 - .cp-blocked-val { background: var(--light-background, #f2f2f2); padding: 0 var(--gap-bound); }
11349 - .cp-status.cp-ok { color: var(--success, #2a7); }
11350 - .cp-status.cp-err { color: var(--warning, #b00); }
11361 + .cp-blocked-loc { color: var(--content-muted); }
11362 + .cp-blocked-val { background: var(--surface-sunken); padding: 0 var(--gap-bound); }
11363 + .cp-status.cp-ok { color: var(--success); }
11364 + .cp-status.cp-err { color: var(--warning); }
11351 11365 .cp-reset { margin-top: var(--gap-pane); }
11352 - .cp-locked-banner { margin: var(--gap-peer) 0 var(--gap-section); padding: var(--gap-section); border: 1px solid var(--warning, #b00); border-radius: 4px; background: var(--light-background, #fbeaea); }
11366 + .cp-locked-banner { margin: var(--gap-peer) 0 var(--gap-section); padding: var(--gap-section); border: 1px solid var(--warning); border-radius: 4px; background: color-mix(in oklch, var(--warning) 12%, var(--surface-page)); }
11353 11367 @media (max-width: 800px) { .cp-editor-grid { grid-template-columns: 1fr; } }
11354 11368
11355 11369 /* Layout-shift fix (audit Run 17 Frontend): reserve space for a cover image
M server/static/wizard.css +3 -3
@@ -163,7 +163,7 @@
163 163 max-height: 200px;
164 164 overflow-y: auto;
165 165 z-index: var(--z-dropdown);
166 - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
166 + box-shadow: var(--shadow-2);
167 167 }
168 168
169 169 .suggestion-dropdown.open {
@@ -384,9 +384,9 @@
384 384
385 385 .upload-error-inline {
386 386 font-size: var(--text-note);
387 - color: var(--danger, #c0392b);
387 + color: var(--danger);
388 388 padding: var(--gap-peer) var(--gap-section);
389 - background: rgba(192, 57, 43, 0.08);
389 + background: color-mix(in oklch, var(--danger) 8%, transparent);
390 390 border-radius: 4px;
391 391 }
392 392