Skip to main content

max / makenotwork

Put every corner on the generated radius scale
Author: Max Johnson <me@maxj.phd> · 2026-08-02 22:11 UTC
Signed with PGP, not checked
Commit: 513f3f8f5e59380682ec38ef1a57623528503d1c
Parent: 0f8706e
5 files changed, +84 insertions, -86 deletions
M server/Cargo.lock +2 -2
@@ -5281,9 +5281,9 @@
5281 5281
5282 5282 [[package]]
5283 5283 name = "makeover-geometry"
5284 - version = "0.6.1"
5284 + version = "0.6.2"
5285 5285 source = "registry+https://github.com/rust-lang/crates.io-index"
5286 - checksum = "a77509284612547c48a23a1773cba70ac4b6510ff5c7618979d49cac7976878b"
5286 + checksum = "c4e0cbec6b86c225f5d4a793437fee457b9bf8e93786ee3af0212d668ad8f132"
5287 5287
5288 5288 [[package]]
5289 5289 name = "makeover-layout"
M server/docs/design-system.md +8 -7
@@ -14,7 +14,7 @@
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) |
17 - | Radius | `--radius-sm` (4px, controls: buttons, inputs, chips, badges), `--radius-md` (0, containers: cards, panels, dropdowns), `--radius-round` (50%) | `style.css:216-222` |
17 + | Radius | `--radius-square` (0, containers: cards, panels, dropdowns), `--radius-fine` (2px, inline code, small badges), `--radius-control` (4px, buttons, inputs, selects), `--radius-panel` (8px, media covers, callout boxes), `--radius-round` (50%), named for what the corner belongs to | `geometry.css` (generated by makeover-build) |
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
@@ -178,12 +178,13 @@
178 178 6. **Empty / error / loading states use the shared partial.** Never assemble these inline.
179 179 7. **Destructive actions** use `.danger` button class plus the `confirm_dialog` macro. No bare destructive buttons.
180 180 8. **Spacing values come from `--gap-*` tokens.** Pick the one that names what the rule separates: `bound` inside a thing, `peer` between siblings, `group` between related controls, `section` between parts of a pane, `pane` between panes, `page` at page level. Raw values and off-scale values are bugs. The tokens are generated from makeover-geometry and shift under a coarse pointer, so a hardcoded value silently opts that rule out of touch density.
181 - 9. **Font sizes come from `--text-*` tokens.** Pick the one that names what the text is: `fine` for timestamps and badges, `note` for metadata and table cells, `body` for running copy, `lead` for emphasised copy and card titles, `subhead` / `head` / `title` for the three heading levels, `display` and `hero` above the hierarchy. Raw values and off-scale values are bugs, including a value that differs from a tier by a fraction of a pixel. Nothing sits below `fine`: text that should recede does it with colour or weight.
182 - 10. **`z-index` values come from `--z-*` tokens.** Pick the one that names what the thing is, and read the block in `:root` to see what it will float over. A raw number is a bug: it is how the old range reached 10000, each new floating thing picking a value bigger than whatever it happened to need to beat. If nothing in the scale describes the new thing, add a step to the scale rather than a number to the rule.
183 - 11. **Page-scoped CSS is a last resort.** Default to composing layout + component primitives. Page-scoped sections exist for genuinely page-specific layout (grids, long-form typography, marketing heroes), not for shapes that are cards or list rows in disguise.
184 - 12. **No bare `<h1>` / `<h2>` in templates.** Pick a heading class: `.brand-h1` (wordmark), `.page-title` (page h1), `.subtitle-h2` (page subtitle on auth/wizards), `.subsection-title` (default h2 inside dashboards/tabs/partials), or `.section-header` (prose sub-section with bottom border). Two exceptions, both because the heading classes are the wrong tool rather than because the rule is optional. **Prose containers** style their own descendant headings — `.doc-body`, `.article-body`, `.markdown-preview` — so a heading inside one stays bare whether the prose was rendered from markdown or hand-written in the template (`pages/economics.html`). **Standalone creator pages** (`templates/custom/*.html`, `templates/embed/*.html`) do not load `style.css` at all, so no heading class exists to pick.
185 - 13. **Button class is `.btn-primary` / `.btn-secondary` / `.btn-danger`.** Works on both `<button>` and `<a>` (the `<a><button>` antipattern is banned. Use `<a class="btn-primary">…</a>`). The bare `button.primary` shorthand has been retired.
186 - 14. **Class names use kebab-case only.** No BEM `__` separator (retired 2026-05-20, was 112 sites across 20 prefixes, now flattened to single-dash). Modifier `--` (e.g. `.card--bordered`) is still allowed.
181 + 9. **Corner radius comes from `--radius-*` tokens.** Rounding says a thing is meant to be pressed, so the scale is four rungs and a circle. `--radius-square` is a rung rather than the absence of one: a container states that it is square, which a reader can tell apart from a rule nobody wrote. Raw px values are bugs.
182 + 10. **Font sizes come from `--text-*` tokens.** Pick the one that names what the text is: `fine` for timestamps and badges, `note` for metadata and table cells, `body` for running copy, `lead` for emphasised copy and card titles, `subhead` / `head` / `title` for the three heading levels, `display` and `hero` above the hierarchy. Raw values and off-scale values are bugs, including a value that differs from a tier by a fraction of a pixel. Nothing sits below `fine`: text that should recede does it with colour or weight.
183 + 11. **`z-index` values come from `--z-*` tokens.** Pick the one that names what the thing is, and read the block in `:root` to see what it will float over. A raw number is a bug: it is how the old range reached 10000, each new floating thing picking a value bigger than whatever it happened to need to beat. If nothing in the scale describes the new thing, add a step to the scale rather than a number to the rule.
184 + 12. **Page-scoped CSS is a last resort.** Default to composing layout + component primitives. Page-scoped sections exist for genuinely page-specific layout (grids, long-form typography, marketing heroes), not for shapes that are cards or list rows in disguise.
185 + 13. **No bare `<h1>` / `<h2>` in templates.** Pick a heading class: `.brand-h1` (wordmark), `.page-title` (page h1), `.subtitle-h2` (page subtitle on auth/wizards), `.subsection-title` (default h2 inside dashboards/tabs/partials), or `.section-header` (prose sub-section with bottom border). Two exceptions, both because the heading classes are the wrong tool rather than because the rule is optional. **Prose containers** style their own descendant headings — `.doc-body`, `.article-body`, `.markdown-preview` — so a heading inside one stays bare whether the prose was rendered from markdown or hand-written in the template (`pages/economics.html`). **Standalone creator pages** (`templates/custom/*.html`, `templates/embed/*.html`) do not load `style.css` at all, so no heading class exists to pick.
186 + 14. **Button class is `.btn-primary` / `.btn-secondary` / `.btn-danger`.** Works on both `<button>` and `<a>` (the `<a><button>` antipattern is banned. Use `<a class="btn-primary">…</a>`). The bare `button.primary` shorthand has been retired.
187 + 15. **Class names use kebab-case only.** No BEM `__` separator (retired 2026-05-20, was 112 sites across 20 prefixes, now flattened to single-dash). Modifier `--` (e.g. `.card--bordered`) is still allowed.
187 188
188 189 ## How to extend
189 190
M server/static/media-player.css +7 -7
@@ -19,7 +19,7 @@
19 19 width: 48px;
20 20 height: 48px;
21 21 background: var(--surface-muted);
22 - border-radius: 50%;
22 + border-radius: var(--radius-round);
23 23 display: flex;
24 24 align-items: center;
25 25 justify-content: center;
@@ -138,7 +138,7 @@
138 138 background: var(--primary-dark);
139 139 color: var(--primary-light);
140 140 border: none;
141 - border-radius: 50%;
141 + border-radius: var(--radius-round);
142 142 cursor: pointer;
143 143 display: flex;
144 144 align-items: center;
@@ -159,7 +159,7 @@
159 159 .progress-bar {
160 160 height: 6px;
161 161 background: var(--surface-muted);
162 - border-radius: 3px;
162 + border-radius: var(--radius-control);
163 163 overflow: hidden;
164 164 cursor: pointer;
165 165 margin-bottom: var(--gap-peer);
@@ -170,7 +170,7 @@
170 170 height: 100%;
171 171 background: var(--highlight);
172 172 width: 0%;
173 - border-radius: 3px;
173 + border-radius: var(--radius-control);
174 174 transition: width 0.1s linear;
175 175 }
176 176
@@ -231,7 +231,7 @@
231 231 width: 80px;
232 232 height: 4px;
233 233 background: var(--surface-muted);
234 - border-radius: 2px;
234 + border-radius: var(--radius-fine);
235 235 appearance: none;
236 236 cursor: pointer;
237 237 }
@@ -241,7 +241,7 @@
241 241 width: 12px;
242 242 height: 12px;
243 243 background: var(--detail);
244 - border-radius: 50%;
244 + border-radius: var(--radius-round);
245 245 cursor: pointer;
246 246 }
247 247
@@ -249,7 +249,7 @@
249 249 width: 12px;
250 250 height: 12px;
251 251 background: var(--detail);
252 - border-radius: 50%;
252 + border-radius: var(--radius-round);
253 253 cursor: pointer;
254 254 border: none;
255 255 }
M server/static/style.css +54 -57
@@ -203,13 +203,10 @@
203 203 --diff-del: #a83232;
204 204 --diff-del-bg: rgba(168, 50, 50, 0.08);
205 205
206 - /* Radius scale. Containers are square and controls keep a corner: the
207 - rounding survives only where a thing is meant to be pressed, so the
208 - corner reads as an affordance rather than as decoration. --radius-md is
209 - kept at 0 rather than deleted so the container call sites stay named. */
210 - --radius-sm: 4px; /* controls: buttons, inputs, chips, badges */
211 - --radius-md: 0; /* containers: cards, panels, dropdowns */
212 - --radius-round: 50%;
206 + /* Radius lives in geometry.css now, generated from makeover-geometry:
207 + --radius-square / -fine / -control / -panel / -round. Containers are
208 + square and controls keep a corner, so the rounding survives only where a
209 + thing is meant to be pressed. */
213 210
214 211 /* Syntax highlighting for the git source browser: base16 Tomorrow, used
215 212 whole rather than assembled colour by colour. It stays fixed across all
@@ -1371,7 +1368,7 @@
1371 1368 background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
1372 1369 padding: 12px;
1373 1370 border: 1px solid var(--danger);
1374 - border-radius: 2px;
1371 + border-radius: var(--radius-fine);
1375 1372 text-align: center;
1376 1373 font-size: var(--text-note);
1377 1374 display: none;
@@ -1431,7 +1428,7 @@
1431 1428
1432 1429 .buy-page .buy-card {
1433 1430 background: var(--surface-overlay);
1434 - border-radius: 12px;
1431 + border-radius: var(--radius-panel);
1435 1432 padding: var(--gap-page);
1436 1433 max-width: 420px;
1437 1434 width: 100%;
@@ -1443,7 +1440,7 @@
1443 1440 width: 100%;
1444 1441 aspect-ratio: 1;
1445 1442 max-height: 280px;
1446 - border-radius: 8px;
1443 + border-radius: var(--radius-panel);
1447 1444 margin-bottom: var(--gap-pane);
1448 1445 background: var(--surface-raised);
1449 1446 }
@@ -1499,7 +1496,7 @@
1499 1496 background: var(--action);
1500 1497 color: var(--primary-light);
1501 1498 border: none;
1502 - border-radius: 6px;
1499 + border-radius: var(--radius-panel);
1503 1500 font-size: var(--text-body);
1504 1501 font-weight: 600;
1505 1502 cursor: pointer;
@@ -1528,7 +1525,7 @@
1528 1525 width: 100px;
1529 1526 padding: 8px;
1530 1527 border: 1px solid var(--border);
1531 - border-radius: var(--radius-sm);
1528 + border-radius: var(--radius-control);
1532 1529 font-size: var(--text-body);
1533 1530 }
1534 1531
@@ -3600,7 +3597,7 @@
3600 3597 .confirm-delete-page .warning-box {
3601 3598 background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
3602 3599 border: 1px solid var(--danger);
3603 - border-radius: 8px;
3600 + border-radius: var(--radius-panel);
3604 3601 padding: var(--gap-pane);
3605 3602 margin-bottom: var(--gap-pane);
3606 3603 }
@@ -3615,7 +3612,7 @@
3615 3612 .project-paywall-page .paywall-cover img {
3616 3613 width: 120px;
3617 3614 height: 120px;
3618 - border-radius: 8px;
3615 + border-radius: var(--radius-panel);
3619 3616 object-fit: cover;
3620 3617 }
3621 3618
@@ -4059,7 +4056,7 @@
4059 4056 .admin-page .metric-card {
4060 4057 padding: var(--gap-section);
4061 4058 border: 1px solid var(--border);
4062 - border-radius: var(--radius-md);
4059 + border-radius: var(--radius-square);
4063 4060 }
4064 4061
4065 4062 .admin-page .metric-card .value {
@@ -4113,7 +4110,7 @@
4113 4110 .layer-health-card {
4114 4111 padding: var(--gap-section);
4115 4112 border: 1px solid var(--border);
4116 - border-radius: var(--radius-md);
4113 + border-radius: var(--radius-square);
4117 4114 border-left-width: 4px;
4118 4115 font-size: var(--text-note);
4119 4116 }
@@ -4151,7 +4148,7 @@
4151 4148 font-family: var(--font-mono);
4152 4149 font-size: var(--text-fine);
4153 4150 padding: 1px 6px;
4154 - border-radius: var(--radius-sm);
4151 + border-radius: var(--radius-control);
4155 4152 border: 1px solid transparent;
4156 4153 cursor: help;
4157 4154 line-height: 1.4;
@@ -4444,7 +4441,7 @@
4444 4441 width: 1.5rem;
4445 4442 height: 1.5rem;
4446 4443 border: 1px solid var(--border);
4447 - border-radius: 3px;
4444 + border-radius: var(--radius-control);
4448 4445 display: inline-flex;
4449 4446 align-items: center;
4450 4447 justify-content: center;
@@ -4555,7 +4552,7 @@
4555 4552 border: 1px solid var(--border);
4556 4553 background: var(--surface-page);
4557 4554 color: var(--content);
4558 - border-radius: 3px;
4555 + border-radius: var(--radius-control);
4559 4556 }
4560 4557
4561 4558 .header-search input:focus {
@@ -4983,7 +4980,7 @@
4983 4980 right: -8px;
4984 4981 width: 6px;
4985 4982 height: 6px;
4986 - border-radius: 50%;
4983 + border-radius: var(--radius-round);
4987 4984 background: var(--action);
4988 4985 box-shadow: 0 0 0 2px var(--surface-page);
4989 4986 }
@@ -5460,7 +5457,7 @@
5460 5457 overflow: hidden;
5461 5458 }
5462 5459 .progress-bar-container--slim { height: 6px; }
5463 - .progress-bar-container--rounded { border-radius: 3px; }
5460 + .progress-bar-container--rounded { border-radius: var(--radius-control); }
5464 5461
5465 5462 /* Fill proportion comes from the template as --fill, because it is
5466 5463 per-render data. The property that reads it lives here. */
@@ -5867,7 +5864,7 @@
5867 5864 color: var(--action);
5868 5865 padding: var(--gap-bound) var(--gap-peer);
5869 5866 border: 1px solid var(--action);
5870 - border-radius: 3px;
5867 + border-radius: var(--radius-control);
5871 5868 white-space: nowrap;
5872 5869 }
5873 5870
@@ -5999,7 +5996,7 @@
5999 5996 flex: 1;
6000 5997 padding: var(--gap-peer) var(--gap-section);
6001 5998 border: 1px solid var(--border);
6002 - border-radius: 4px;
5999 + border-radius: var(--radius-control);
6003 6000 font-family: var(--font-body);
6004 6001 font-size: var(--text-note);
6005 6002 background: var(--surface-page);
@@ -6788,7 +6785,7 @@
6788 6785 padding: var(--gap-peer) var(--gap-group);
6789 6786 background: var(--surface-overlay);
6790 6787 border: 1px solid var(--border);
6791 - border-radius: 3px;
6788 + border-radius: var(--radius-control);
6792 6789 display: inline-block;
6793 6790 user-select: all;
6794 6791 margin-bottom: var(--gap-section);
@@ -6810,7 +6807,7 @@
6810 6807 padding: var(--gap-bound) var(--gap-peer);
6811 6808 background: var(--surface-overlay);
6812 6809 border: 1px solid var(--border);
6813 - border-radius: 3px;
6810 + border-radius: var(--radius-control);
6814 6811 }
6815 6812 .git-nav-links { display: flex; gap: var(--gap-section); }
6816 6813 .git-nav-links a { text-decoration: none; color: var(--content); opacity: 0.6; }
@@ -6862,7 +6859,7 @@
6862 6859 .git-readme-body pre {
6863 6860 background: var(--surface-overlay);
6864 6861 padding: var(--gap-section);
6865 - border-radius: 3px;
6862 + border-radius: var(--radius-control);
6866 6863 overflow-x: auto;
6867 6864 font-family: var(--font-mono);
6868 6865 font-size: var(--text-fine);
@@ -6872,7 +6869,7 @@
6872 6869 font-size: var(--text-note);
6873 6870 background: var(--surface-overlay);
6874 6871 padding: var(--gap-bound);
6875 - border-radius: 2px;
6872 + border-radius: var(--radius-fine);
6876 6873 }
6877 6874 .git-readme-body pre code { background: none; padding: 0; }
6878 6875 .git-readme-body table { border-collapse: collapse; margin: var(--gap-section) 0; }
@@ -6888,7 +6885,7 @@
6888 6885 background: var(--surface-overlay);
6889 6886 border: 1px solid var(--border);
6890 6887 border-bottom: none;
6891 - border-radius: 3px 3px 0 0;
6888 + border-radius: var(--radius-control) var(--radius-control) 0 0;
6892 6889 font-size: var(--text-fine);
6893 6890 }
6894 6891 .git-file-meta {
@@ -6905,7 +6902,7 @@
6905 6902 .git-file-actions a:hover { opacity: 1; }
6906 6903 .git-file-content {
6907 6904 border: 1px solid var(--border);
6908 - border-radius: 0 0 3px 3px;
6905 + border-radius: 0 0 var(--radius-control) var(--radius-control);
6909 6906 overflow-x: auto;
6910 6907 }
6911 6908 .git-file-content table { border-collapse: collapse; width: 100%; }
@@ -6938,7 +6935,7 @@
6938 6935 font-family: var(--font-mono);
6939 6936 font-size: var(--text-note);
6940 6937 border: 1px solid var(--border);
6941 - border-radius: 0 0 3px 3px;
6938 + border-radius: 0 0 var(--radius-control) var(--radius-control);
6942 6939 }
6943 6940
6944 6941 /* Syntax highlighting (syntect class-based) */
@@ -7002,7 +6999,7 @@
7002 6999 padding: var(--gap-bound) var(--gap-peer);
7003 7000 background: var(--content);
7004 7001 color: var(--surface-page);
7005 - border-radius: 2px;
7002 + border-radius: var(--radius-fine);
7006 7003 }
7007 7004 .git-release-version .version-meta { opacity: 0.5; }
7008 7005
@@ -7053,7 +7050,7 @@
7053 7050 font-size: var(--text-fine);
7054 7051 font-weight: 700;
7055 7052 font-family: var(--font-mono);
7056 - border-radius: 2px;
7053 + border-radius: var(--radius-fine);
7057 7054 line-height: 1.4;
7058 7055 }
7059 7056 .diff-status-added { background: color-mix(in oklch, var(--success) 14%, var(--surface-page)); color: var(--success); }
@@ -7169,7 +7166,7 @@
7169 7166 font-size: var(--text-fine);
7170 7167 padding: var(--gap-bound) var(--gap-peer);
7171 7168 border: 1px solid var(--border);
7172 - border-radius: 2px;
7169 + border-radius: var(--radius-fine);
7173 7170 opacity: 0.5;
7174 7171 }
7175 7172 .git-repos-item-desc { font-size: var(--text-note); opacity: 0.6; margin: var(--gap-bound) 0 0; }.git-repos-instructions p { margin-bottom: var(--gap-peer); }
@@ -7602,7 +7599,7 @@
7602 7599 color: var(--primary-light);
7603 7600 font-size: var(--text-fine);
7604 7601 padding: var(--gap-bound) var(--gap-peer);
7605 - border-radius: var(--radius-sm);
7602 + border-radius: var(--radius-control);
7606 7603 margin-left: var(--gap-bound);
7607 7604 }
7608 7605
@@ -7667,7 +7664,7 @@
7667 7664 justify-content: center;
7668 7665 padding: var(--gap-section);
7669 7666 border: 2px solid var(--border);
7670 - border-radius: var(--radius-md);
7667 + border-radius: var(--radius-square);
7671 7668 background: var(--surface-page);
7672 7669 text-align: center;
7673 7670 transition: border-color 0.15s, background 0.15s;
@@ -7720,7 +7717,7 @@
7720 7717 background: var(--surface-page);
7721 7718 border: 1px solid var(--border);
7722 7719 border-top: none;
7723 - border-radius: 0 0 var(--radius-md) var(--radius-md);
7720 + border-radius: 0 0 var(--radius-square) var(--radius-square);
7724 7721 max-height: 200px;
7725 7722 overflow-y: auto;
7726 7723 z-index: var(--z-dropdown);
@@ -7862,7 +7859,7 @@
7862 7859 .row-save:hover, .grid-card-save:hover { opacity: 1; }
7863 7860 .grid-card-save {
7864 7861 position: absolute; top: 0.4rem; right: 0.4rem; z-index: var(--z-raised);
7865 - background: var(--surface-page); border-radius: 3px; padding: var(--gap-bound) var(--gap-peer);
7862 + background: var(--surface-page); border-radius: var(--radius-control); padding: var(--gap-bound) var(--gap-peer);
7866 7863 box-shadow: var(--shadow-1); opacity: 0;
7867 7864 }
7868 7865 .grid-card:hover .grid-card-save { opacity: 0.7; }
@@ -7896,7 +7893,7 @@
7896 7893 =========================================== */
7897 7894
7898 7895 .doc-ui {
7899 - margin: var(--gap-pane) 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
7896 + margin: var(--gap-pane) 0; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden;
7900 7897 }
7901 7898 .doc-ui-frame {
7902 7899 padding: var(--gap-section); background: var(--surface-overlay); pointer-events: none; user-select: none;
@@ -7913,7 +7910,7 @@
7913 7910 /* Library "New" badge for items with undownloaded versions */
7914 7911 .badge-new {
7915 7912 background: var(--action); color: var(--primary-light); font-size: var(--text-fine);
7916 - padding: var(--gap-bound) var(--gap-peer); border-radius: var(--radius-sm); margin-left: var(--gap-peer);
7913 + padding: var(--gap-bound) var(--gap-peer); border-radius: var(--radius-control); margin-left: var(--gap-peer);
7917 7914 vertical-align: middle; font-weight: bold;
7918 7915 }
7919 7916
@@ -8307,7 +8304,7 @@
8307 8304 margin-bottom: var(--gap-section);
8308 8305 background: var(--surface-raised);
8309 8306 border: 1px solid var(--border);
8310 - border-radius: var(--radius-md);
8307 + border-radius: var(--radius-square);
8311 8308 display: flex;
8312 8309 align-items: center;
8313 8310 gap: var(--gap-peer);
@@ -8324,7 +8321,7 @@
8324 8321 padding: var(--gap-section);
8325 8322 background: var(--surface-sunken);
8326 8323 border: 1px solid var(--border);
8327 - border-radius: var(--radius-md);
8324 + border-radius: var(--radius-square);
8328 8325 }
8329 8326 .bulk-form-row {
8330 8327 display: flex;
@@ -8912,7 +8909,7 @@
8912 8909 width: 1.1rem;
8913 8910 height: 1.1rem;
8914 8911 border: 2px solid var(--border);
8915 - border-radius: 50%;
8912 + border-radius: var(--radius-round);
8916 8913 flex-shrink: 0;
8917 8914 }
8918 8915 .proj-overview-setup-label {
@@ -9389,7 +9386,7 @@
9389 9386 .project-page .store-cover {
9390 9387 width: 120px;
9391 9388 height: 120px;
9392 - border-radius: 8px;
9389 + border-radius: var(--radius-panel);
9393 9390 object-fit: cover;
9394 9391 margin-bottom: var(--gap-pane);
9395 9392 }
@@ -9983,7 +9980,7 @@
9983 9980 margin-bottom: var(--gap-pane);
9984 9981 padding: var(--gap-section);
9985 9982 border: 1px solid var(--border);
9986 - border-radius: 6px;
9983 + border-radius: var(--radius-panel);
9987 9984 }
9988 9985 .embed-option h4 {
9989 9986 margin-bottom: var(--gap-bound);
@@ -10000,7 +9997,7 @@
10000 9997 }
10001 9998 .embed-iframe {
10002 9999 border: none;
10003 - border-radius: 4px;
10000 + border-radius: var(--radius-control);
10004 10001 }
10005 10002 .embed-layout-toggle {
10006 10003 font-size: var(--text-note);
@@ -10023,7 +10020,7 @@
10023 10020 flex: 1;
10024 10021 padding: var(--gap-peer) var(--gap-section);
10025 10022 background: var(--surface-overlay);
10026 - border-radius: 4px;
10023 + border-radius: var(--radius-control);
10027 10024 font-size: var(--text-fine);
10028 10025 overflow-x: auto;
10029 10026 white-space: nowrap;
@@ -10036,7 +10033,7 @@
10036 10033 background: var(--action);
10037 10034 color: var(--primary-light);
10038 10035 border: none;
10039 - border-radius: var(--radius-sm);
10036 + border-radius: var(--radius-control);
10040 10037 cursor: pointer;
10041 10038 white-space: nowrap;
10042 10039 }
@@ -10508,7 +10505,7 @@
10508 10505 font-size: var(--text-subhead);
10509 10506 line-height: 1;
10510 10507 color: var(--content-muted);
10511 - border-radius: 4px;
10508 + border-radius: var(--radius-control);
10512 10509 }
10513 10510 .context-menu-btn:hover {
10514 10511 background: var(--surface-sunken);
@@ -10548,7 +10545,7 @@
10548 10545 font-size: var(--text-fine);
10549 10546 padding: var(--gap-bound) var(--gap-peer);
10550 10547 background: var(--surface-sunken);
10551 - border-radius: 3px;
10548 + border-radius: var(--radius-control);
10552 10549 cursor: pointer;
10553 10550 user-select: all;
10554 10551 }
@@ -11078,7 +11075,7 @@
11078 11075 .synckit-billing {
11079 11076 background: var(--surface-raised);
11080 11077 border: 1px solid var(--border);
11081 - border-radius: 3px;
11078 + border-radius: var(--radius-control);
11082 11079 padding: var(--gap-peer) var(--gap-section);
11083 11080 min-width: 220px;
11084 11081 }
@@ -11093,7 +11090,7 @@
11093 11090 .synckit-billing-status {
11094 11091 display: inline-block;
11095 11092 padding: 2px var(--gap-peer);
11096 - border-radius: 2px;
11093 + border-radius: var(--radius-fine);
11097 11094 font-size: var(--text-fine);
11098 11095 font-weight: 600;
11099 11096 }
@@ -11166,7 +11163,7 @@
11166 11163 width: 96px;
11167 11164 height: 96px;
11168 11165 border: 1px solid var(--border);
11169 - border-radius: 4px;
11166 + border-radius: var(--radius-control);
11170 11167 overflow: hidden;
11171 11168 }
11172 11169
@@ -11247,7 +11244,7 @@
11247 11244 width: 100%;
11248 11245 height: auto;
11249 11246 border: 1px solid var(--border);
11250 - border-radius: 4px;
11247 + border-radius: var(--radius-control);
11251 11248 background: var(--surface-raised);
11252 11249 }
11253 11250
@@ -11277,7 +11274,7 @@
11277 11274 color: var(--content);
11278 11275 background: var(--surface-raised);
11279 11276 border: 1px solid var(--content);
11280 - border-radius: var(--radius-sm);
11277 + border-radius: var(--radius-control);
11281 11278 box-shadow: var(--shadow-raised);
11282 11279 cursor: pointer;
11283 11280 }
@@ -11318,7 +11315,7 @@
11318 11315 height: 0.7rem;
11319 11316 padding: 0;
11320 11317 border: 1px solid var(--content);
11321 - border-radius: 50%;
11318 + border-radius: var(--radius-round);
11322 11319 background: transparent;
11323 11320 cursor: pointer;
11324 11321 }
@@ -11349,7 +11346,7 @@
11349 11346 .cp-editor-form { display: flex; flex-direction: column; gap: var(--gap-peer); }
11350 11347 .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; }
11351 11348 .cp-editor-buttons { display: flex; align-items: center; gap: var(--gap-section); margin-top: var(--gap-peer); }
11352 - .cp-preview-pane { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
11349 + .cp-preview-pane { border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
11353 11350 .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 11351 .cp-preview { width: 100%; height: 520px; border: 0; background: var(--primary-light); display: block; }
11355 11352 .cp-blocked { margin-top: var(--gap-section); }
@@ -11363,7 +11360,7 @@
11363 11360 .cp-status.cp-ok { color: var(--success); }
11364 11361 .cp-status.cp-err { color: var(--warning); }
11365 11362 .cp-reset { margin-top: var(--gap-pane); }
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)); }
11363 + .cp-locked-banner { margin: var(--gap-peer) 0 var(--gap-section); padding: var(--gap-section); border: 1px solid var(--warning); border-radius: var(--radius-control); background: color-mix(in oklch, var(--warning) 12%, var(--surface-page)); }
11367 11364 @media (max-width: 800px) { .cp-editor-grid { grid-template-columns: 1fr; } }
11368 11365
11369 11366 /* Layout-shift fix (audit Run 17 Frontend): reserve space for a cover image
M server/static/wizard.css +13 -13
@@ -63,7 +63,7 @@
63 63 justify-content: center;
64 64 width: 24px;
65 65 height: 24px;
66 - border-radius: 50%;
66 + border-radius: var(--radius-round);
67 67 font-size: var(--text-fine);
68 68 font-weight: bold;
69 69 flex-shrink: 0;
@@ -97,7 +97,7 @@
97 97 .wizard-step {
98 98 background: var(--light-background);
99 99 padding: var(--gap-page);
100 - border-radius: 4px;
100 + border-radius: var(--radius-control);
101 101 }
102 102
103 103 .wizard-step h2 {
@@ -159,7 +159,7 @@
159 159 background: var(--background);
160 160 border: 1px solid var(--border);
161 161 border-top: none;
162 - border-radius: 0 0 4px 4px;
162 + border-radius: 0 0 var(--radius-control) var(--radius-control);
163 163 max-height: 200px;
164 164 overflow-y: auto;
165 165 z-index: var(--z-dropdown);
@@ -205,7 +205,7 @@
205 205 margin-top: var(--gap-peer);
206 206 padding: var(--gap-section);
207 207 background: var(--surface-alt);
208 - border-radius: 4px;
208 + border-radius: var(--radius-control);
209 209 }
210 210
211 211 /* Pricing Cards */
@@ -307,7 +307,7 @@
307 307
308 308 .upload-area {
309 309 border: 2px dashed var(--border);
310 - border-radius: 4px;
310 + border-radius: var(--radius-control);
311 311 padding: var(--gap-page);
312 312 text-align: center;
313 313 cursor: pointer;
@@ -324,7 +324,7 @@
324 324
325 325 .project-image-dropzone {
326 326 border: 2px dashed var(--border);
327 - border-radius: 4px;
327 + border-radius: var(--radius-control);
328 328 padding: var(--gap-page);
329 329 text-align: center;
330 330 cursor: pointer;
@@ -357,7 +357,7 @@
357 357 width: 200px;
358 358 height: 200px;
359 359 object-fit: cover;
360 - border-radius: 4px;
360 + border-radius: var(--radius-control);
361 361 }
362 362
363 363 .upload-progress-inline {
@@ -372,7 +372,7 @@
372 372 width: 100%;
373 373 height: 6px;
374 374 background: var(--border);
375 - border-radius: 3px;
375 + border-radius: var(--radius-control);
376 376 overflow: hidden;
377 377 }
378 378
@@ -387,7 +387,7 @@
387 387 color: var(--danger);
388 388 padding: var(--gap-peer) var(--gap-section);
389 389 background: color-mix(in oklch, var(--danger) 8%, transparent);
390 - border-radius: 4px;
390 + border-radius: var(--radius-control);
391 391 }
392 392
393 393 /* Project Card Preview */
@@ -399,14 +399,14 @@
399 399 padding: var(--gap-section);
400 400 background: var(--background);
401 401 border: 1px solid var(--border);
402 - border-radius: 4px;
402 + border-radius: var(--radius-control);
403 403 }
404 404
405 405 .preview-cover {
406 406 width: 80px;
407 407 height: 80px;
408 408 flex-shrink: 0;
409 - border-radius: 4px;
409 + border-radius: var(--radius-control);
410 410 overflow: hidden;
411 411 background: var(--surface-muted);
412 412 }
@@ -432,7 +432,7 @@
432 432 background: var(--background);
433 433 padding: var(--gap-section);
434 434 border: 1px solid var(--border);
435 - border-radius: 4px;
435 + border-radius: var(--radius-control);
436 436 }
437 437
438 438 .distribution-section h3 {
@@ -469,7 +469,7 @@
469 469 .info-box {
470 470 background: var(--surface-alt);
471 471 padding: var(--gap-section);
472 - border-radius: 4px;
472 + border-radius: var(--radius-control);
473 473 font-size: var(--text-note);
474 474 }
475 475