Skip to main content

max / balanced_breakfast

Adopt makeover-webview phase A Third generated stylesheet, matching GoingsOn. build.rs materialises css/layout.css from makeover-webview beside themes/ and geometry.css, index.html links it, and it is gitignored like the other two. The two bevel composition tokens are gone from styles.css. Both apps now read the identical generated file, so they can no longer drift on which edge is lit or what inverts on press: that is the description's, the way colour is makeover's and spacing is makeover-geometry's. The crate asserts its emitted text against what this app hand-wrote, so nothing changes on screen. Phase A is the stylesheet only. This app builds its DOM through createElement at 175 sites, so generated markup is a migration while a generated stylesheet is a deletion. The .raised and .well classes arrive unused; adopting them at call sites is phase B. Cargo.lock staged as a partial hunk so the unrelated synckit-client lines stay out, same as the makeover 2.2.0 bump.
Author: Max Johnson <me@maxj.phd> · 2026-07-28 21:48 UTC
Signed with PGP, not checked
Commit: 97a4113a57f36133167e645956e1cf6c4db5d6b3
Parent: 5797535
6 files changed, +49 insertions, -5 deletions
M .gitignore +1
@@ -44,3 +44,4 @@
44 44
45 45 # Generated by src-tauri/build.rs from makeover-geometry's scale
46 46 /src-tauri/frontend/css/geometry.css
47 + /src-tauri/frontend/css/layout.css
M Cargo.lock +12
@@ -446,6 +446,7 @@
446 446 "futures",
447 447 "makeover",
448 448 "makeover-geometry",
449 + "makeover-webview",
449 450 "open",
450 451 "parking_lot",
451 452 "rand 0.10.2",
@@ -3120,6 +3121,17 @@
3120 3121 source = "registry+https://github.com/rust-lang/crates.io-index"
3121 3122 checksum = "9d8b94e51333489b0a79bb63ad4100ca49726f2048e2477f6ee3d6dd822f9327"
3122 3123
3124 + [[package]]
3125 + name = "makeover-layout"
3126 + version = "0.1.0"
3127 +
3128 + [[package]]
3129 + name = "makeover-webview"
3130 + version = "0.1.0"
3131 + dependencies = [
3132 + "makeover-layout",
3133 + ]
3134 +
3123 3135 [[package]]
3124 3136 name = "maplit"
3125 3137 version = "1.0.2"
@@ -16,6 +16,9 @@
16 16 tauri-build = { version = "2.5.5", features = [] }
17 17 makeover.workspace = true
18 18 makeover-geometry.workspace = true
19 + # Phase A of the description layer: the component stylesheet, emitted at build
20 + # time beside geometry.css. Path dep while unpublished.
21 + makeover-webview = { path = "../../../Libraries/makeover-webview" }
19 22
20 23 [dependencies]
21 24 bb-interface.workspace = true
@@ -69,8 +69,33 @@
69 69 std::fs::write(path, css).expect("write geometry.css");
70 70 }
71 71
72 + /// Write the component layer `makeover-webview` emits into
73 + /// `frontend/css/layout.css`, which `index.html` links after `geometry.css`
74 + /// and before the stylesheet.
75 + ///
76 + /// Third generated file, same shape as the other two: a crate owns the rule,
77 + /// `build.rs` materialises it, this app links it and never edits it.
78 + ///
79 + /// Phase A is the stylesheet only. This app builds its DOM through
80 + /// `createElement` at 175 sites, so adopting generated markup is a migration
81 + /// while adopting a generated stylesheet is a deletion. The `--bevel-*`
82 + /// properties were hand-written in `styles.css` until now, and the crate
83 + /// asserts its emitted text against exactly what this app wrote, so nothing
84 + /// changes on screen.
85 + ///
86 + /// The file is generated, and gitignored.
87 + fn materialize_layout() {
88 + let css = makeover_webview::stylesheet(&makeover_webview::Emit::default());
89 + let path = Path::new(env!("CARGO_MANIFEST_DIR"))
90 + .join("frontend")
91 + .join("css")
92 + .join("layout.css");
93 + std::fs::write(path, css).expect("write layout.css");
94 + }
95 +
72 96 fn main() {
73 97 materialize_themes();
74 98 materialize_geometry();
99 + materialize_layout();
75 100 tauri_build::build();
76 101 }
@@ -7,6 +7,7 @@
7 7 <!-- Generated from makeover-geometry by src-tauri/build.rs. First, so the
8 8 stylesheet can read --gap-* and --step-* off :root. -->
9 9 <link rel="stylesheet" href="css/geometry.css">
10 + <link rel="stylesheet" href="css/layout.css">
10 11 <link rel="stylesheet" href="css/styles.min.css">
11 12 </head>
12 13 <body>
@@ -175,11 +175,13 @@
175 175 --shadow-color: color-mix(in oklch, var(--content-muted) 88%, black); /* composition */
176 176 --border-width: 1px; /* invariant */
177 177
178 - /* The two-tone bevel. Raised is lit from the top left; inset is the same
179 - bevel inverted, which is also the pressed state for anything raised.
180 - One token swap per component, which is what makes the idiom cheap. */
181 - --bevel-raised: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark); /* composition */
182 - --bevel-inset: inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light); /* composition */
178 + /* The two bevel composition tokens used to be written out here. They now
179 + come from css/layout.css, which build.rs generates from
180 + makeover-webview: the composition (which edge is lit, what inverts on
181 + press) is the description's, the same way colour is makeover's and
182 + spacing is makeover-geometry's. GoingsOn reads the identical file, so
183 + the two apps can no longer drift on it. The .raised and .well classes
184 + arrive there too. */
183 185
184 186 --radius-xs: 0; /* invariant: scrollbars, tiny elements */
185 187 --radius-sm: 4px; /* invariant: the one place a corner survives */