Skip to main content

max / makeover-webview

87.3 KB · 1976 lines History Blame Raw
1 //! The webview renderer for [`makeover_layout`].
2 //!
3 //! <!-- wiki: makeover-webview -->
4 //!
5 //! # The renderer that needs no palette
6 //!
7 //! `makeover-immediate` and `makeover-tui` both take a `Palette`, because egui
8 //! and a terminal need an actual colour before they can put anything on
9 //! screen. A webview does not: `var(--surface-raised)` *is* the late binding,
10 //! and the browser resolves it against whatever `themes.js` last wrote onto
11 //! `:root`.
12 //!
13 //! So this crate emits text naming intents, and never learns a colour. It is
14 //! the deferral rule with no adapter in the way, and it is why the webview was
15 //! always the wrong renderer to derive a vocabulary from: it can express
16 //! anything, so it never pushes back.
17 //!
18 //! # Phase A: the stylesheet
19 //!
20 //! This module emits component CSS and no markup, deliberately. GoingsOn has
21 //! 145 `innerHTML` sites and Balanced Breakfast 175 `createElement` sites, so
22 //! moving markup is a migration where adopting a generated stylesheet is not.
23 //! The apps keep every line of their markup and gain the classes.
24 //!
25 //! It is not a deletion either, which this header claimed until the measurement
26 //! came in. Adoption across goingson removed 49 declarations net and *added* 25
27 //! lines: a rule loses its depth declarations and gains a variant selector next
28 //! to it, so the file stays the same size. What phase A moves is where depth is
29 //! defined, not how much CSS exists. Numbers and method in the wiki note under
30 //! "The deletion test, run".
31 //!
32 //! The bevel properties are byte-identical to what both apps already
33 //! hand-write, which is asserted below.
34 //!
35 //! # Phase B: the markup, one description at a time
36 //!
37 //! [`form`] renders [`makeover_layout::Field`], which is the half of phase B
38 //! whose description is settled. It emits strings, because both apps
39 //! interpolate their fields into larger string-built forms and returning nodes
40 //! would rewrite those too. It owns its own escaping, on the reasoning in that
41 //! module: a Rust encoder can cover element text and attribute values with one
42 //! function, where the apps need four and have to choose correctly at every
43 //! call site.
44 //!
45 //! [`list`] is the other half: column tracks, the narrowing rules, and the cell
46 //! containers a row is made of. It stops at the cell boundary and does not
47 //! render what goes inside one, on the reasoning in that module. So phase B is
48 //! now the frame around content in both directions, and what an app still owns
49 //! is the content itself.
50 //!
51 //! # What phase A settled, and what it costs
52 //!
53 //! Decided 2026-07-29 against goingson's `styles.css` rather than against a
54 //! component list. The useful finding there was that `.btn` (line 644),
55 //! `.card` (768) and `.tag, .badge` (882) each hand-write the same
56 //! composition, so three quarters of phase A is one rule with several names.
57 //!
58 //! Two of the four decisions change how goingson looks, and adoption should
59 //! not be described as a pure deletion:
60 //!
61 //! - **Pressed carries its fill.** [`interactive_rules`] emits
62 //! [`Depth::pressed`] whole. goingson presses to `--surface-sunken` today and
63 //! will press to `--surface-well`, and hovers to `--surface-overlay` today
64 //! and will hover to `--hover-surface`. Since `surface-well` inverts by theme
65 //! where `surface-sunken` does not, a dark theme presses *lighter* than it
66 //! hovers. That falls out of `makeover`'s own derivation, which says outright
67 //! that `surface-sunken` cannot serve as a well, so if it reads wrong the
68 //! answer is there and not here.
69 //! - **Badges go flat.** See [`token_rules`].
70 //!
71 //! The other two: the progress trough is renderer-local and the scrollbar
72 //! track was dropped ([`component_rules`]), and no class prefix ships by
73 //! default, so adoption means deleting the app's hand-written rule in the same
74 //! commit that adds the generated one. `.card`, `.badge` and the tab classes
75 //! all already exist in goingson, and while both rules exist the cascade order
76 //! decides which wins. That is the one real risk in adopting this, and it is
77 //! why the migration lands per component rather than in one commit.
78 //!
79 //! # 0.10.0: the states this crate used to leave to its consumers
80 //!
81 //! [`interactive_rules`] emitted hover and pressed and stopped, because
82 //! `makeover-layout` modelled no interaction state. Focus and disabled were
83 //! therefore unsayable, and every app completed the primitive from outside the
84 //! only way that works: by out-specifying a rule it does not own. goingson
85 //! carries 19 such rules and the MNW server 21, and the three focus rings do
86 //! not match each other.
87 //!
88 //! That also blocked the cascade-layer work outright. An app that declares
89 //! `@layer` puts its own rules in a named layer, and unlayered declarations
90 //! outrank every named layer regardless of specificity, so all of those
91 //! overrides lose in the commit that adopts layers. They cannot simply be
92 //! deleted, because they are the only thing supplying the missing states.
93 //! Emitting the states here is what turns that adoption into a deletion.
94 //!
95 //! Four states now, in emission order, and the order is load-bearing: they are
96 //! all specificity (0,2,0), so disabled beats hover by coming last and by
97 //! nothing else. Nothing here reaches for `:not(:disabled)`, which would raise
98 //! a selector this crate will shortly be wrapping in its own layer.
99 //!
100 //! Hover additionally sits inside a capability query now. `makeover-touch`
101 //! answers whether a fingertip has hover and `makeover-geometry` spells the
102 //! condition; this crate asks and does not decide. goingson's section 60 exists
103 //! solely to take the hover state back on touch, which is a fight it should
104 //! never have been handed.
105 //!
106 //! # 0.11.0: the layer contract
107 //!
108 //! [`stylesheet`] emits into the `makeover` cascade layer ([`CSS_LAYER`], which
109 //! lives in `makeover-geometry` because that is the one crate every CSS emitter
110 //! in the family already depends on). `makeover-geometry` 0.6.0 does the same
111 //! for `geometry.css`.
112 //!
113 //! The cascade resolves origin and importance, then layer, then specificity,
114 //! then source order, and **unlayered normal declarations outrank every named
115 //! layer**. So before this, an app that declared `@layer base, components,
116 //! responsive` put every rule it owns into a named layer and lost all of them to
117 //! this unlayered file, regardless of specificity and regardless of loading
118 //! last. Nothing errors when that happens: the CSS is valid, the minifier is
119 //! happy, and buttons and badges look subtly wrong.
120 //!
121 //! That is why the layer belongs here rather than in each app. An app cannot fix
122 //! it from its own stylesheet, because the fix is to layer the file it does not
123 //! own.
124 //!
125 //! **What it flips**, and the reason each app wants a look when it bumps the
126 //! pin: a generated rule that currently beats an app rule by being more specific
127 //! stops beating it. The direction is always "the app wins", which is what the
128 //! apps already assume, but a hand-written rule an app thought was dead can come
129 //! back to life.
130 //!
131 //! An app should declare the order once, or the layer's position is decided by
132 //! whichever generated file the browser happens to see first:
133 //!
134 //! ```css
135 //! @layer makeover, base, components, responsive;
136 //! ```
137 //!
138 //! [`in_css_layer`] is re-exported for an app that assembles its own stylesheet
139 //! from this crate's pieces. goingson builds `tables.css` in its own `build.rs`
140 //! out of [`list::narrowing_css`] and [`list::grid_template_columns`], and those
141 //! rules are as generated as the ones here, so they belong in the same layer and
142 //! this crate cannot put them there on the app's behalf.
143 //!
144 //! # 0.12.0: the ring gets its own width
145 //!
146 //! [`focus_rule`] reused [`Emit::border_width`] and emitted a 1px ring. That was
147 //! an implementation convenience dressed as consistency with the invalid-field
148 //! ring: a bevel and a focus indicator answer different questions, and only one
149 //! of them has to be noticed from across a desk.
150 //!
151 //! Caught while adopting 0.11.0 into goingson, by the check the adoption tasks
152 //! ask for. Every consumer had already written its own ring and all three chose
153 //! at least 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px,
154 //! goingson 2px on three rules and 3px on the one covering twelve selectors. The
155 //! design system was the only thing in the tree saying 1px, so deleting the app
156 //! rules in favour of it would have thinned the focus indicator everywhere.
157 //!
158 //! [`Emit::focus_width`] now carries it, defaulting to `2px`, and the offset is
159 //! the same magnitude with its sign off the depth. Both values are the measured
160 //! consensus rather than a new opinion.
161 //!
162 //! # 0.25.0: a cell says what it holds
163 //!
164 //! 0.23.0 gave a table its layout and left every cell the same. One `.cell`
165 //! carried the whole thing, so a cell holding text and a cell holding a button
166 //! were one class and one content colour, and a control in a cell was painted
167 //! as text. That is the drift [`RowPart::intent`](makeover_layout::RowPart)
168 //! has prevented for list rows since 0.2.0 and prevented for nothing here.
169 //!
170 //! makeover-layout 0.14.0's [`CellPart`](makeover_layout::CellPart) names the
171 //! four things a cell holds, and [`table_rules`] turns them into
172 //! `.cell-value`, `.cell-tokens`, `.cell-actions` and `.cell-link`. Only the
173 //! first takes a colour: a token carries its own tone, an action is a control
174 //! rather than text, and a link takes the action colour from the anchor it is.
175 //!
176 //! The colour going on `.cell-value` rather than on `.cell` is the fix rather
177 //! than an implementation detail. On the container it cascades into the parts
178 //! that are not text, which is the bug said in one rule.
179 //!
180 //! [`list::Cell::part`] is `Option<CellPart>` here, where it was
181 //! `Option<RowPart>`. A table cell borrowing the list row's vocabulary was the
182 //! drift with a type on it: the two answer different questions, and only one of
183 //! them was ever about a cell.
184 //!
185 //! # 0.23.0: a table lays itself out, and a row shows its controls
186 //!
187 //! Three things a description could say and this renderer had no rule for,
188 //! found together by rendering the MNW server's SSH-keys settings tab through
189 //! `quasi` and preferring the hand-written Askama original.
190 //!
191 //! **A table had no layout at all.** [`list::narrowing_css`] emits the track
192 //! list, and it has to be called with the columns, so it works where the
193 //! columns are known at build time: goingson builds `tables.css` in its own
194 //! `build.rs` and is untouched. A table a description produced knows its
195 //! columns at render time, and the rules would have had to travel with the
196 //! markup: a `<style>` element per table, which needs `style-src
197 //! 'unsafe-inline'` that the MNW server is working to drop, or the head, which
198 //! an htmx fragment swap does not carry. [`table_rules`] lays a table out with
199 //! `display: table` instead, which aligns columns across rows knowing nothing
200 //! about how many there are. [`Priority`](makeover_layout::Priority) hiding
201 //! moves from a generated rule per dropped column to one rule per drop class,
202 //! and [`list::column_classes`] is what puts those classes on a cell. A header
203 //! row emitted by a renderer's own code should call it too, or the header and
204 //! the body disagree about which column just dropped.
205 //!
206 //! **A destructive button had nowhere for its tone to land.** `.button` carried
207 //! no tone, on the reading that a control's colour is its surface. Every
208 //! consumer had written the danger rule itself. It joins the badge in taking
209 //! the four tones as colour, off `data-tone`.
210 //!
211 //! **A list rendered as a bulleted list**, because nothing here reset the `ul`
212 //! a renderer emits for one.
213 //!
214 //! `RowPart::revealed_on_hover` also stops being honoured, which its own doc
215 //! sanctioned: a renderer decides. It was retired outright in makeover-layout
216 //! 0.13.0, once this had been its only consumer for a release. The rule hid a
217 //! row's actions until hover,
218 //! and every escape it grew was a report that hiding was wrong for somebody:
219 //! `focus-within` for the keyboard, the capability gate for a fingertip with no
220 //! way to unhide. What survived hid the controls from pointer users alone, who
221 //! are the ones scanning a list to learn what can be done to a row.
222 //!
223 //! # 0.17.0: the depth classes stop being controls
224 //!
225 //! [`depth_rules`] gave `.raised` the whole interactive set. A depth is a
226 //! statement about shape, so that left the vocabulary with no raised surface
227 //! that is merely an object, and an app wanting one had two moves: write its
228 //! own class from tokens, or take a control class and cancel the control half.
229 //! goingson took the second, in three variants over sixteen elements
230 //! (`.card--static` at 14 call sites, `.card--muted` at 2, `.card--shell` at 1),
231 //! each re-asserting the resting fill and bevel on `:hover` and `:active`.
232 //!
233 //! Measured before changing it: `.raised` is emitted into goingson, Balanced
234 //! Breakfast and the MNW server, and none of the three has a single call site.
235 //! The states were unasked-for everywhere at once, and dropping them costs no
236 //! migration anywhere.
237 //!
238 //! `.card` and `.button` are unchanged. They are the same depth *and* controls,
239 //! and they take their states from [`surface_rules`], which is where a state
240 //! belongs: on the thing that claims to answer a pointer.
241 //!
242 //! # Substitution, three ways
243 //!
244 //! `Fill::Well` has no colour on makeover before 2.3.0, and each renderer
245 //! answers that differently, which is the evidence that dropping
246 //! `Fill::fallback` from the description was right:
247 //!
248 //! - `makeover-immediate` substitutes the page in Rust.
249 //! - `makeover-tui` refuses to substitute and draws an edge instead, because a
250 //! terminal would quantise the two together.
251 //! - here, CSS already has the mechanism: `var(--surface-well,
252 //! var(--surface-page))` falls back in the browser, and nothing in Rust
253 //! decides anything.
254
255 #![forbid(unsafe_code)]
256
257 pub mod figure;
258 pub mod form;
259 pub mod list;
260 pub mod meter;
261 pub mod placeholder;
262
263 use crate::list::{cell_part_class, part_class};
264 use makeover_geometry::{Density, SizeClass};
265 // Re-exported rather than redefined. An app assembling its own stylesheet out
266 // of this crate's pieces needs the same layer name, and most such apps depend
267 // on this crate and not on `makeover-geometry` directly: goingson builds
268 // `tables.css` in its own build.rs from [`list::narrowing_css`], and those
269 // rules are as generated as the ones here.
270 pub use makeover_geometry::{CSS_LAYER, in_css_layer};
271 use makeover_layout::{
272 Bevel, CellPart, Depth, Fill, Intent, RowPart, Selector, State, Token, Tone,
273 };
274 use makeover_touch::Affordance;
275 use std::fmt::Write as _;
276
277 /// How the emitted CSS is shaped.
278 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
279 pub struct Emit {
280 /// Bevel thickness, as a CSS length.
281 ///
282 /// A value, so it arrives from the caller: border widths belong to
283 /// `makeover-geometry` and will come from there once it carries them.
284 pub border_width: &'static str,
285 /// Focus ring thickness, as a CSS length.
286 ///
287 /// Separate from [`border_width`](Self::border_width), which it reused
288 /// until 0.12.0. That reuse was an implementation convenience dressed as
289 /// consistency, and it emitted a 1px ring: a bevel and a focus indicator
290 /// are answering different questions, and only one of them has to be
291 /// noticed from across a desk.
292 ///
293 /// The default is the measured consensus rather than a new opinion. Every
294 /// consumer had already written its own ring and all three chose at least
295 /// 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px,
296 /// goingson 2px on three rules and 3px on the one covering twelve
297 /// selectors. The design system was the only thing in the tree saying 1px.
298 pub focus_width: &'static str,
299 /// Prefix for emitted class names, without the leading dot.
300 pub class_prefix: &'static str,
301 }
302
303 impl Default for Emit {
304 fn default() -> Self {
305 Self {
306 border_width: "1px",
307 focus_width: "2px",
308 class_prefix: "",
309 }
310 }
311 }
312
313 /// The CSS custom property holding a bevel's composition.
314 #[must_use]
315 pub fn bevel_var(bevel: Bevel) -> &'static str {
316 match bevel {
317 Bevel::Raised => "--bevel-raised",
318 Bevel::Inset => "--bevel-inset",
319 }
320 }
321
322 /// A `var()` reference to a fill intent, with the browser's own fallback where
323 /// the intent may be absent.
324 ///
325 /// The fallback is CSS syntax, not a decision made here. That is the whole
326 /// difference between this renderer and the other two.
327 #[must_use]
328 pub fn fill_var(fill: Fill) -> String {
329 match fill {
330 Fill::Well => format!("var(--{}, var(--{}))", fill.token(), Fill::Page.token()),
331 other => format!("var(--{})", other.token()),
332 }
333 }
334
335 /// The two-tone edge as a `box-shadow` value.
336 ///
337 /// Two inset shadows, one per corner pair: the light one offset down and
338 /// right so it lands on the top and left edges, the dark one the other way.
339 /// The same assignment `makeover-immediate` draws with polylines and
340 /// `makeover-tui` draws with box-drawing characters.
341 #[must_use]
342 pub fn bevel_shadow(bevel: Bevel, opts: &Emit) -> String {
343 let (top_left, bottom_right) = bevel.edges();
344 let w = opts.border_width;
345 format!(
346 "inset {w} {w} 0 var(--{}), inset -{w} -{w} 0 var(--{})",
347 top_left.token(),
348 bottom_right.token()
349 )
350 }
351
352 /// The custom properties both bevels resolve through.
353 ///
354 /// Emitted as properties rather than inlined into every rule because that is
355 /// what the apps already do, and because a consumer that wants the edge
356 /// without the fill reads the property directly.
357 #[must_use]
358 pub fn bevel_properties(opts: &Emit) -> String {
359 let mut css = String::new();
360 for bevel in [Bevel::Raised, Bevel::Inset] {
361 let _ = writeln!(
362 css,
363 " {}: {};",
364 bevel_var(bevel),
365 bevel_shadow(bevel, opts)
366 );
367 }
368 css.push_str(ELEVATION_PROPERTY);
369 css
370 }
371
372 /// The cast shadow of a surface that floats over the page.
373 ///
374 /// Composed here for the reason the bevel pair is: `makeover` derives the tone,
375 /// this crate owns the geometry, and neither has to know the other's numbers.
376 ///
377 /// **Only for a surface that overlays the page.** A menu, a toast, a popover, a
378 /// dropdown. A surface *in* the page takes `.raised` and its bevel, and a rule
379 /// that reaches for this on a card or a plate has renamed a literal rather than
380 /// replaced it.
381 ///
382 /// Two lengths rather than one, because a single blur reads as a smudge at
383 /// plate size and as a halo at menu size. The offset is small and downward: a
384 /// Platinum-era menu sits just off the page rather than hovering above it.
385 const ELEVATION_PROPERTY: &str =
386 " --elevation-overlay: 0 2px 4px var(--elevation), 0 8px 24px var(--elevation);\n";
387
388 /// The class name for a depth.
389 #[must_use]
390 pub fn depth_class(depth: Depth, opts: &Emit) -> Option<String> {
391 let name = match depth {
392 Depth::Flat => return None,
393 Depth::Raised => "raised",
394 Depth::Well => "well",
395 Depth::Sunken => "sunken",
396 // A depth added to the description since this renderer was last
397 // built. No class, on the same footing as Flat: emitting a name
398 // whose rule body we cannot write would put a class in the markup
399 // that the stylesheet never defines.
400 _ => return None,
401 };
402 Some(format!("{}{name}", opts.class_prefix))
403 }
404
405 /// A prefixed class name.
406 ///
407 /// Public since 0.27.0, for the renderers that emit markup this crate does not.
408 /// A screen renderer writing `class="row"` has to prefix it the way the
409 /// stylesheet half does or a prefixed app gets rules matching everything except
410 /// the elements that renderer wrote, and the failure is invisible: the CSS
411 /// stays valid and one element is unstyled. quasi-webview carried a byte
412 /// identical copy of this function until it could call this one.
413 #[must_use]
414 pub fn class(name: &str, opts: &Emit) -> String {
415 format!("{}{name}", opts.class_prefix)
416 }
417
418 /// The class an option of a selector carries, which is what the rules key off.
419 ///
420 /// Named for the option and not for the group: [`selector_rules`] styles the
421 /// thing that gets picked, so `Selector::Tabs` is `tab` and not `tabs`. The
422 /// distinction is not pedantry. quasi-webview spelled these `tabs`, `segmented`
423 /// and `option`, put `toggle` on the wrapping element rather than on the
424 /// buttons inside it, and every described selector in that renderer came out
425 /// with no depth, no focus ring and no chosen state, while the toggle group got
426 /// a bevel meant for its buttons.
427 ///
428 /// The chosen option additionally carries `chosen`, the same way a latched chip
429 /// carries `latched`. That name is this crate's too; there is no reason for a
430 /// caller to spell it, and [`selector_rules`] is where it is written down.
431 #[must_use]
432 pub fn option_class(selector: Selector) -> &'static str {
433 match selector {
434 Selector::Tabs => "tab",
435 Selector::Segmented => "segment",
436 Selector::Toggle => "toggle",
437 }
438 }
439
440 /// The fill and edge declarations for a depth, as a rule body.
441 ///
442 /// Empty for [`Depth::Flat`], which has neither and inherits what it sits on.
443 /// Callers lean on the emptiness to skip the rule rather than emit a class that
444 /// sets nothing: a class that sets no properties is a class that means "I
445 /// thought about this", which is what comments are for.
446 ///
447 /// The two halves are emitted independently because [`Depth::Sunken`] has a
448 /// fill and no bevel. Requiring both, which this did before makeover-layout
449 /// 0.3.0, silently dropped the fill for exactly that case. Independent does not
450 /// mean unpaired: both halves still come off one `Depth`, so they cannot
451 /// disagree about what the region is.
452 #[must_use]
453 pub fn depth_declarations(depth: Depth) -> String {
454 let mut css = String::new();
455 if let Some(fill) = depth.fill() {
456 let _ = writeln!(css, " background: {};", fill_var(fill));
457 }
458 if let Some(bevel) = depth.bevel() {
459 let _ = writeln!(css, " box-shadow: var({});", bevel_var(bevel));
460 }
461 css
462 }
463
464 /// One rule giving a selector a depth, or nothing when the depth declares
465 /// nothing.
466 #[must_use]
467 pub fn depth_rule(selector: &str, depth: Depth) -> String {
468 let body = depth_declarations(depth);
469 if body.is_empty() {
470 return String::new();
471 }
472 format!(".{selector} {{\n{body}}}\n")
473 }
474
475 /// The media condition a hover rule has to sit inside, or `None` if hover is
476 /// unconditional.
477 ///
478 /// Two crates answer this and neither answer is made here. `makeover-touch`
479 /// owns *whether* hover exists at a density, and `makeover-geometry` owns how
480 /// that capability is spelled as a media condition. Asking both is what stops
481 /// this renderer minting a third opinion, which is what all three apps did:
482 /// goingson sniffed the user agent, Balanced Breakfast used `(hover: none)`
483 /// alone, and the MNW server had no gate at all.
484 ///
485 /// [`SizeClass`] is required by [`Affordance::available`] and ignored by this
486 /// member, which reports as much through `reads_size`. Passing Compact is not
487 /// a claim about width; the test below pins that every class agrees.
488 fn hover_condition() -> Option<&'static str> {
489 if Affordance::Hover.available(Density::Touch, SizeClass::Compact) {
490 // A fingertip grew a hover state. Nothing to gate, and this renderer
491 // should not invent a reason to gate anyway.
492 None
493 } else {
494 Some(Density::Pointer.media_condition())
495 }
496 }
497
498 /// Put a rule inside a media query, or leave it alone.
499 fn gated(condition: Option<&str>, rule: &str) -> String {
500 let Some(condition) = condition else {
501 return rule.to_string();
502 };
503 let mut css = format!("@media {condition} {{\n");
504 for line in rule.lines() {
505 // Blank lines stay blank. Indenting one leaves trailing whitespace,
506 // which is the sort of thing a formatter later reverts and calls a diff.
507 if line.is_empty() {
508 css.push('\n');
509 } else {
510 let _ = writeln!(css, " {line}");
511 }
512 }
513 css.push_str("}\n");
514 css
515 }
516
517 /// The keyboard focus ring, placed by the depth it lands on.
518 ///
519 /// One ring for the whole system, because a focus ring's job is to be
520 /// recognised and three apps having three of them is the failure. What varies
521 /// is where it sits, and that comes off [`Depth`] rather than off a per-
522 /// component choice: a well takes the ring inside its own edge, and anything
523 /// standing proud of the page takes it outside.
524 ///
525 /// `outline` rather than the composed `box-shadow` the invalid-field ring at
526 /// [`field_rules`] uses, and deliberately the one place the two rings are built
527 /// differently. A `box-shadow` ring has to restate the bevel beside it, because
528 /// `box-shadow` is not additive and a lone ring silently drops the well out
529 /// from under the element. That restatement is a second copy of the depth,
530 /// living in a different function from the first, and it is exactly the
531 /// duplication `Depth` exists to prevent. `outline` occupies its own property,
532 /// so the bevel survives untouched and there is nothing to keep in agreement.
533 /// They render the same: both are a flush ring one border-width wide.
534 #[must_use]
535 pub fn focus_rule(selector: &str, depth: Depth, opts: &Emit) -> String {
536 let w = opts.focus_width;
537 // Same magnitude either way, and only the sign comes off the depth. Both
538 // values are what the consumers had already converged on independently:
539 // 2px out is what all three wrote, and 2px in is the MNW server's own
540 // answer for the one inset ring it had.
541 let offset = match depth.bevel() {
542 // Inside the well, clear of its edge rather than painted over it.
543 Some(Bevel::Inset) => format!("calc(-1 * {w})"),
544 // Raised, or no edge at all. Outside, standing off by its own width.
545 _ => w.to_string(),
546 };
547 format!(
548 ".{selector}:focus-visible {{\n outline: {w} solid var(--{});\n outline-offset: {offset};\n}}\n",
549 State::Focus.token()
550 )
551 }
552
553 /// Present, visible, and not answering.
554 ///
555 /// Matches the ARIA attribute as well as the pseudo-class, because `:disabled`
556 /// only matches form elements and half the things this crate emits are not
557 /// one: a `div` carrying `.chip` or `.tab` can never be `:disabled`. Keying on
558 /// the accessible state is the pattern [`field_rules`] already establishes for
559 /// `aria-invalid`, on the reasoning that one fact read by both the styling and
560 /// the accessibility tree cannot drift from itself.
561 ///
562 /// The rest depth is re-asserted rather than assumed, because this rule has to
563 /// beat the hover and pressed rules above it. It does that on source order at
564 /// equal specificity, not by out-specifying them: every rule this function's
565 /// caller emits is (0,2,0), and adding a `:not(:disabled)` anywhere would raise
566 /// one of them and have to be unpicked when this output moves inside its own
567 /// cascade layer.
568 #[must_use]
569 pub fn disabled_rule(selector: &str, depth: Depth) -> String {
570 format!(
571 ".{selector}:disabled,\n.{selector}[aria-disabled=\"true\"] {{\n{} color: var(--{});\n cursor: not-allowed;\n}}\n",
572 depth_declarations(depth),
573 State::Disabled.token()
574 )
575 }
576
577 /// Every state a selector that answers a click implies: hover, pressed, focus
578 /// and disabled, in that order.
579 ///
580 /// Order is the whole cascade mechanism here. All four selectors are
581 /// specificity (0,2,0), so disabled wins over hover and pressed by coming last
582 /// and by nothing else.
583 ///
584 /// Pressed emits [`Depth::pressed`] in full, fill and edge together. Emitting
585 /// only the edge is what left goingson hand-writing `background:
586 /// var(--surface-sunken)` on three separate rules, and a fill that does not
587 /// travel with its edge is precisely the disagreement `Depth` exists to make
588 /// unrepresentable. So the pressed fill comes from the description
589 /// (`--surface-well`) rather than from whatever each app reached for.
590 ///
591 /// Hover has no member in the description and is renderer policy: a terminal
592 /// and an immediate-mode painter have no hover to express. It resolves against
593 /// `--hover-surface`, which `makeover` already derives and which nothing
594 /// consumed until now. What it *is* gated on is capability, via
595 /// [`hover_condition`]. Before that gate existed the apps each wrote their own:
596 /// goingson's section 60 exists solely to take back the hover state this
597 /// function had just handed it, by out-specifying a rule it does not own.
598 ///
599 /// `depth` is the selector's **rest** depth, used to place the focus ring and
600 /// to restore the surface under a disabled control. The pressed rule keeps
601 /// inverting from [`Depth::Raised`] regardless, which is what every caller got
602 /// before this parameter existed: a tab's unchosen depth is
603 /// [`Depth::Sunken`], and `Sunken.pressed()` is `Sunken`, so deriving the press
604 /// from the rest depth would leave a tab with no press at all.
605 #[must_use]
606 pub fn interactive_rules(selector: &str, depth: Depth, opts: &Emit) -> String {
607 let mut css = gated(
608 hover_condition(),
609 &format!(".{selector}:hover {{\n background: var(--hover-surface);\n}}\n"),
610 );
611 css.push_str(&depth_rule(
612 &format!("{selector}:active"),
613 Depth::Raised.pressed(),
614 ));
615 css.push_str(&focus_rule(selector, depth, opts));
616 css.push_str(&disabled_rule(selector, depth));
617 css
618 }
619
620 /// One rule per depth: its fill and its edge, together.
621 ///
622 /// A depth and nothing else. `.raised` says a surface sits on what is behind
623 /// it, which is a statement about the shape and not about what happens when a
624 /// pointer arrives, so it emits no hover, press, focus or disabled rule. The
625 /// named surfaces are where interaction lives: `.card` and `.button` are the
626 /// same depth *and* controls, and they get their states from
627 /// [`surface_rules`].
628 ///
629 /// This class carried the interactive set until 0.17.0, which left the
630 /// vocabulary with no raised surface that is merely an object. Consumers that
631 /// needed one took a control class and cancelled half of it instead: sixteen
632 /// elements in goingson across three `.card--*` variants, each re-asserting the
633 /// resting fill and bevel on `:hover` and `:active`. Nothing anywhere used
634 /// `.raised` itself, so the states were unasked-for in every consumer at once.
635 #[must_use]
636 pub fn depth_rules(opts: &Emit) -> String {
637 let mut css = String::new();
638 for depth in [Depth::Raised, Depth::Well] {
639 let Some(class) = depth_class(depth, opts) else {
640 continue;
641 };
642 css.push_str(&depth_rule(&class, depth));
643 }
644 css
645 }
646
647 /// The three surfaces that are a depth with a name.
648 ///
649 /// `button` and `card` are both [`Depth::Raised`], and `field` is a
650 /// [`Depth::Well`] because that is the reading `Depth`'s own documentation
651 /// gives a text field. Their bodies come out identical by construction rather
652 /// than by hand: three hand-written copies in goingson's stylesheet is what
653 /// phase A deletes, and generating them from one call is what stops them
654 /// drifting apart again.
655 fn surface_rules(opts: &Emit) -> String {
656 let mut css = String::new();
657 for name in ["button", "card"] {
658 let c = class(name, opts);
659 css.push_str(&depth_rule(&c, Depth::Raised));
660 css.push_str(&interactive_rules(&c, Depth::Raised, opts));
661 }
662
663 let field = class("field", opts);
664 css.push_str(&depth_rule(&field, Depth::Well));
665
666 // A field takes focus and refuses input like everything else here, and got
667 // neither until now, which is why all three apps hand-write a focus ring
668 // for it and no two of them match. No hover or pressed: a text field does
669 // not light up under the pointer and does not invert when clicked, so the
670 // two states `interactive_rules` would add are the two it does not have.
671 css.push_str(&focus_rule(&field, Depth::Well, opts));
672 css.push_str(&disabled_rule(&field, Depth::Well));
673
674 // Keyed on the ARIA attribute rather than on a class, so the visual state
675 // and the accessible state cannot drift apart: there is one fact and both
676 // read it. goingson already drove its invalid styling this way and was
677 // right to; the `.invalid` class this emitted before 0.5.0 was a second
678 // place to forget.
679 //
680 // The ring composes *after* the bevel rather than replacing it. box-shadow
681 // is not additive, so a lone ring silently dropped the well out from under
682 // an invalid field. Flat and unlit: this edge is saying "wrong", and
683 // lighting one side would have it say "raised" at the same time.
684 let _ = writeln!(
685 css,
686 ".{field}[aria-invalid=\"true\"] {{\n box-shadow: var({}), 0 0 0 {} var(--danger);\n}}",
687 bevel_var(Bevel::Inset),
688 opts.border_width
689 );
690 css
691 }
692
693 /// Badges and chips.
694 ///
695 /// The one place phase A changes how goingson looks rather than only where its
696 /// rules live. [`Token::Badge`] is [`Depth::Flat`], so a badge emits no fill
697 /// and no edge at all, where goingson ships `.tag, .badge` as a single rule
698 /// carrying the raised bevel. Splitting that means reading every call site to
699 /// decide which of the two it always was.
700 ///
701 /// What a badge does carry is a [`Tone`], the intent family it shares with
702 /// notices and nothing else. Neutral is the bare class rather than a variant,
703 /// because it is the absence of a status and not a status called "none".
704 fn token_rules(opts: &Emit) -> String {
705 let mut css = String::new();
706
707 // No `depth_rule` call here, deliberately: `Token::Badge.depth(_)` is Flat,
708 // and a label with an edge says it can be pressed.
709 let badge = class("badge", opts);
710 let _ = writeln!(
711 css,
712 ".{badge} {{\n color: var(--{});\n}}",
713 Tone::Neutral.token()
714 );
715 for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
716 let _ = writeln!(
717 css,
718 ".{badge}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}",
719 tone.token()
720 );
721 }
722
723 // A button carries the four tones a badge does. It had none, on the reading
724 // that a control's colour is its surface rather than its text, and that
725 // reading has one hole big enough to matter: the button that destroys
726 // something. Every consumer had written that rule itself, and a description
727 // that says `Tone::Danger` on an act had nowhere for it to land.
728 //
729 // Colour and not a fill, matching the badge. A red surface is a decision
730 // about emphasis that belongs to an app's own layer, and two of them
731 // fighting is worse than neither.
732 let button = class("button", opts);
733 for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
734 let _ = writeln!(
735 css,
736 ".{button}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}",
737 tone.token()
738 );
739 }
740
741 // A chip holds itself down, which is `Depth::pressed` arrived at
742 // independently by two apps. `removable` is a remove affordance, so it is
743 // markup and waits for phase B.
744 let chip = class("chip", opts);
745 let unlatched = Token::Chip { removable: false };
746 css.push_str(&depth_rule(&chip, unlatched.depth(false)));
747 css.push_str(&interactive_rules(&chip, unlatched.depth(false), opts));
748 css.push_str(&depth_rule(
749 &format!("{chip}.latched"),
750 unlatched.depth(true),
751 ));
752 css
753 }
754
755 /// The three selectors, each named by what it picks.
756 ///
757 /// A tab comes *forward* to join the pane it opens, which is why
758 /// [`Selector::Tabs`] chooses [`Depth::Raised`] where a segment and a toggle
759 /// are held in. That is the folder semantic, and it is the whole reason the
760 /// three are not one member with a flag.
761 ///
762 /// [`Selector::abutting`] is not emitted: whether the options touch is
763 /// spacing, and spacing is `makeover-geometry`'s question to answer.
764 ///
765 /// Both states emit as of makeover-layout 0.3.0. Before it the description
766 /// named only the chosen option, so an unchosen one fell through to
767 /// [`Depth::Flat`] and nothing was drawn for it, which left goingson's tab
768 /// strip hand-writing the recess that makes its chosen tab read as forward.
769 fn selector_rules(opts: &Emit) -> String {
770 let mut css = String::new();
771 for selector in [Selector::Tabs, Selector::Segmented, Selector::Toggle] {
772 let c = class(option_class(selector), opts);
773 css.push_str(&depth_rule(&c, selector.unchosen()));
774 css.push_str(&interactive_rules(&c, selector.unchosen(), opts));
775 css.push_str(&depth_rule(&format!("{c}.chosen"), selector.chosen()));
776 }
777 css
778 }
779
780 /// The parts of a list row.
781 ///
782 /// The list is written out rather than derived because `RowPart` is
783 /// `#[non_exhaustive]` as of makeover-layout 0.9.0, so there is nothing to
784 /// iterate. A member added upstream emits no rule until it is named here, which
785 /// is the trade `non_exhaustive` makes: a silent gap instead of a build break.
786 /// [`part_class`] carries the same list and the same obligation.
787 fn row_rules(opts: &Emit) -> String {
788 let mut css = String::new();
789
790 // The container the rows sit in. Three zeroes and a keyword, all of them
791 // undoing a browser default the description never asked for: a described
792 // list of SSH keys is not a bulleted list, and it rendered as one because
793 // nothing here said otherwise. Not a size: there is no magnitude in it,
794 // which is the line this crate holds.
795 let _ = writeln!(
796 css,
797 ".{} {{\n list-style: none;\n margin: 0;\n padding: 0;\n}}",
798 class("list", opts)
799 );
800
801 for part in [
802 RowPart::Primary,
803 RowPart::Secondary,
804 RowPart::Meta,
805 RowPart::Actions,
806 RowPart::Tokens,
807 RowPart::Proportion,
808 ] {
809 let c = class(part_class(part), opts);
810
811 // Actions carry controls rather than text, and `RowPart::intent` says
812 // so by returning the same intent inheriting already gives. Pinning it
813 // would be louder than saying nothing. Tokens answer alike, for their
814 // own reason: each token carries its own tone, and a colour on the
815 // strip would fight the things sitting in it. A proportion is the same
816 // case again: the meter inside carries the tone.
817 if !matches!(
818 part,
819 RowPart::Actions | RowPart::Tokens | RowPart::Proportion
820 ) {
821 let _ = writeln!(css, ".{c} {{\n color: var(--{});\n}}", part.intent());
822 }
823
824 // A row's actions are shown at rest. `RowPart::revealed_on_hover` said
825 // otherwise and was not honoured here from 0.23.0; makeover-layout
826 // 0.13.0 retired the method, so there is no longer a description saying
827 // one thing and a renderer doing another.
828 //
829 // The rule was `opacity: 0` gated to pointer devices, revealed on
830 // `:hover` and on `:focus-within`. Each escape it needed was a report
831 // that hiding was wrong for somebody: `focus-within` because tabbing
832 // could never reach an action; the gate because a fingertip had no way
833 // to unhide, which both webview apps had already hand-written
834 // `opacity: 1` to undo. What was left was a control hidden from
835 // exactly one group: people using a pointer, who are also the group
836 // scanning a list to find out what can be done to a row.
837 //
838 // A settings screen is where that reads worst: the whole reason to be
839 // on it is to remove a key, and the button doing so was invisible
840 // until pointed at. A table cell's actions were never hidden, so the
841 // two arrangements now agree.
842 }
843 css
844 }
845
846 /// The progress trough these rules fill.
847 ///
848 /// This was renderer-local chrome with nothing behind it until makeover-layout
849 /// 0.10.0, which is the unusual order: the tones below were emitted for every
850 /// bar in the tree while the only way to describe one was to concatenate the
851 /// numbers into a heading. `Meter` is the word that arrived late, and
852 /// [`meter::meter_html`](crate::meter::meter_html) is what now fills these.
853 ///
854 /// The rules stay a superset of what a description can ask for. An app drawing
855 /// its own bar keeps these classes, which is what the four goingson grew
856 /// independently were adopted onto.
857 ///
858 /// The trough is a [`Depth::Well`], the same reading a text field gets:
859 /// something with its content down inside it.
860 fn progress_rules(opts: &Emit) -> String {
861 let progress = class("progress", opts);
862 // `progress-fill` rather than a bare `fill`: an unprefixed build claims
863 // these names in the app's own stylesheet, and `.fill` is grabby enough to
864 // catch things that have nothing to do with progress. goingson already
865 // calls it `.progress-fill`, so this is also the name that deletes.
866 let fill = class("progress-fill", opts);
867 let mut css = depth_rule(&progress, Depth::Well);
868
869 // The untoned bar is `--action`, not [`Tone::Neutral`]. That is the one
870 // place this differs from the badge rules, and deliberately: a badge with
871 // no status is a muted label, while a bar with no status is still
872 // reporting progress, and `content-muted` would read as disabled.
873 let _ = writeln!(
874 css,
875 ".{progress} > .{fill} {{\n background: var(--action);\n}}"
876 );
877
878 // A bar can be saying something, same as a badge: goingson colours subtask
879 // progress as success and an over-estimate as danger, which is real
880 // information rather than decoration. Emitting the tones is what lets that
881 // survive adoption instead of staying hand-written.
882 for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
883 let _ = writeln!(
884 css,
885 ".{progress} > .{fill}[data-tone=\"{0}\"] {{\n background: var(--{0});\n}}",
886 tone.token()
887 );
888 }
889 css
890 }
891
892 /// A strip of figures, and the two spans inside each one.
893 ///
894 /// Colour only, which is the deferral rule applied to a component that badly
895 /// wants to break it. A figure reads as a figure because the value is set large
896 /// over a small caption, and that is a size: `makeover-geometry` answers how
897 /// much space and this crate answers what the thing is. Emitting `font-size`
898 /// here would be this crate naming a value, which is the one thing it is defined
899 /// by not doing, and `progress_rules` is the precedent — it emits the tones and
900 /// never the width, because the width is not its to know.
901 ///
902 /// So the arrangement and the type scale are the app's, and what is generated is
903 /// the part an app cannot get right by itself: which of the two spans carries
904 /// the tone.
905 fn figure_rules(opts: &Emit) -> String {
906 let figure = class("figure", opts);
907 let value = class("figure-value", opts);
908 let caption = class("figure-caption", opts);
909 let change = class("figure-change", opts);
910 let mut css = String::new();
911
912 let _ = writeln!(
913 css,
914 ".{figure} > .{value} {{\n color: var(--{});\n}}",
915 Tone::Neutral.token()
916 );
917 let _ = writeln!(
918 css,
919 ".{figure} > .{caption} {{\n color: var(--content-muted);\n}}"
920 );
921 let _ = writeln!(
922 css,
923 ".{figure} > .{change} {{\n color: var(--content-muted);\n}}"
924 );
925
926 // A toned figure tones one part and never the caption. The caption is the
927 // noun and stays muted.
928 //
929 // Which part depends on whether there is a change, and that is the whole of
930 // what 0.13.0 changed here. A figure with a delta is an ordinary number that
931 // has moved in a direction worth reading, so the delta takes the colour and
932 // the number stays plain; a figure without one has nowhere else to put it.
933 // `:has` is what lets one attribute mean both, and the alternative was the
934 // emitter deciding by writing the attribute onto a different element, which
935 // leaves two elements able to disagree about a figure's one meaning.
936 for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
937 let _ = writeln!(
938 css,
939 ".{figure}[data-tone=\"{0}\"] > .{change} {{\n color: var(--{0});\n}}",
940 tone.token()
941 );
942 let _ = writeln!(
943 css,
944 ".{figure}[data-tone=\"{0}\"]:not(:has(> .{change})) > .{value} \
945 {{\n color: var(--{0});\n}}",
946 tone.token()
947 );
948 }
949 css
950 }
951
952 /// A region's stand-in, and the header of a table that can be reordered.
953 ///
954 /// Both are 0.12.0 members and both are colour and affordance only, which is
955 /// where `figure_rules` landed after trying to emit a type scale. How much room
956 /// a stand-in gets is a size — goingson has the same one at three, as
957 /// `--compact`, `--dashboard` and `--padded` — and a size is
958 /// `makeover-geometry`'s question.
959 ///
960 /// The caret is the one thing here that is neither colour nor affordance, and it
961 /// is a renderer's own expression rather than a value the description named:
962 /// `aria-sort` is what the table actually says, and this turns it into something
963 /// visible for everyone not using a screen reader. A terminal draws its own; an
964 /// immediate-mode painter draws its own.
965 fn state_rules(opts: &Emit) -> String {
966 let placeholder = class("placeholder", opts);
967 let text = class("placeholder-text", opts);
968 let heading = class("table-heading", opts);
969 let mut css = String::new();
970
971 let _ = writeln!(
972 css,
973 ".{placeholder} > .{text} {{\n color: var(--content-muted);\n}}"
974 );
975 // Only the failure is toned. An empty list is the normal state of a new
976 // install, and `Readiness::tone` is what says so.
977 let _ = writeln!(
978 css,
979 ".{placeholder}[data-tone=\"{0}\"] > .{text} {{\n color: var(--{0});\n}}",
980 Tone::Danger.token()
981 );
982
983 // A header that reorders the table is a control, and the pointer is the
984 // only part of saying so that is not the app's own type and spacing.
985 let _ = writeln!(
986 css,
987 ".{heading}[data-sortable] {{\n cursor: pointer;\n}}"
988 );
989 for (direction, caret) in [("ascending", "\\2191"), ("descending", "\\2193")] {
990 let _ = writeln!(
991 css,
992 ".{heading}[aria-sort=\"{direction}\"]::after {{\n content: \"{caret}\";\n}}"
993 );
994 }
995 css
996 }
997
998 /// The frame a table sits in.
999 ///
1000 /// # Why this is a CSS table and not the grid the rest of the module assumes
1001 ///
1002 /// A grid row needs `grid-template-columns`, which has to name every column in
1003 /// order, so it cannot be written without knowing the columns. That is what
1004 /// [`list::narrowing_css`] is for, and it works: goingson builds `tables.css` in
1005 /// its own `build.rs` out of it, and nothing here changes that.
1006 ///
1007 /// It does not work for a table a *description* produced. Those columns are
1008 /// known at render time rather than at build time, and the rules would have to
1009 /// travel with the markup: a `<style>` element per table, which needs
1010 /// `style-src 'unsafe-inline'` and so blocks the MNW server's standing plan to
1011 /// drop it. The head is not an escape: a table swapped in by htmx after a
1012 /// delete arrives as a fragment with no head at all.
1013 ///
1014 /// A CSS table aligns its columns across rows knowing nothing about how many
1015 /// there are, so there is no track list to emit and nothing per-table to carry.
1016 /// The cost is that a described table cannot take a per-column fixed length,
1017 /// which costs nothing today: [`Sizing`](list::Sizing) is looked up by column
1018 /// name and a description carries no lengths to put in it, so every track a
1019 /// described table could ask for is already content, fill or auto.
1020 ///
1021 /// [`Priority`] hiding is unchanged in kind. It moves from a generated
1022 /// `display: none` per dropped column to one rule per drop class, which is the
1023 /// same fact addressed by class rather than by cutoff, and still never by
1024 /// position.
1025 fn table_rules(opts: &Emit) -> String {
1026 let table = class("table", opts);
1027 let head = class("table-head", opts);
1028 let row = class("table-row", opts);
1029 let heading = class("table-heading", opts);
1030 let cell = class("cell", opts);
1031 let mut css = String::new();
1032
1033 let _ = writeln!(
1034 css,
1035 ".{table} {{\n display: table;\n width: 100%;\n}}"
1036 );
1037 let _ = writeln!(css, ".{head},\n.{row} {{\n display: table-row;\n}}");
1038 let _ = writeln!(css, ".{heading},\n.{cell} {{\n display: table-cell;\n}}");
1039
1040 // A content column shrinks to what is in it. `width: 1%` is how a CSS table
1041 // is told that: auto layout hands the slack to the columns that asked for
1042 // room, and a column asking for almost none gets what it needs and no more.
1043 // The `nowrap` is what stops it being given less by wrapping.
1044 let _ = writeln!(
1045 css,
1046 ".{} {{\n white-space: nowrap;\n width: 1%;\n}}",
1047 class("cell-content", opts)
1048 );
1049
1050 // A fixed column has no length to be fixed to. The description carries none
1051 // and `Sizing` is not reachable from here, so it behaves as content: the
1052 // honest answer to a width nobody supplied, and the same one `Sizing::track`
1053 // gives it.
1054 let _ = writeln!(
1055 css,
1056 ".{} {{\n white-space: nowrap;\n}}",
1057 class("cell-fixed", opts)
1058 );
1059
1060 // Optional columns go at the narrowest class, secondary ones go with them,
1061 // which is the cutoff walk `kept_at` describes said as two media queries.
1062 // Essential columns have no rule at all, because never dropping is what not
1063 // being mentioned already means.
1064 for (size, drops) in [
1065 (
1066 SizeClass::Compact,
1067 &["cell-drops-first", "cell-drops-next"][..],
1068 ),
1069 (SizeClass::Medium, &["cell-drops-first"][..]),
1070 ] {
1071 let selectors: Vec<String> = drops
1072 .iter()
1073 .map(|drop| format!(".{}", class(drop, opts)))
1074 .collect();
1075 css.push_str(&gated(
1076 Some(&size.media_condition()),
1077 &format!("{} {{\n display: none;\n}}\n", selectors.join(",\n")),
1078 ));
1079 }
1080
1081 // What is inside a cell, which the table side could not say until
1082 // makeover-layout 0.14.0. Every cell was one `.cell` and one content
1083 // colour, so a button in a cell was painted as text -- the drift
1084 // `RowPart::intent` has prevented for list rows since 0.2.0 and prevented
1085 // for nothing here.
1086 //
1087 // The colour goes on `.cell-value` rather than on `.cell`, and that
1088 // placement is the whole fix. On the container it would cascade into the
1089 // tokens and the controls sitting beside the text, which is the bug said
1090 // in one rule; on the part that is text, it reaches text and stops.
1091 for part in [
1092 CellPart::Value,
1093 CellPart::Tokens,
1094 CellPart::Actions,
1095 CellPart::Link,
1096 ] {
1097 // Three of the four inherit, each for its own reason: a token carries
1098 // its own tone, an action is a control rather than text, and a link
1099 // takes the action colour from the anchor it is. `CellPart::intent`
1100 // says so by answering with the intent inheriting already gives, and
1101 // pinning that would be louder than saying nothing.
1102 //
1103 // Written as a skip-list rather than as a match on Value, so a member
1104 // added upstream gets its intent emitted rather than being silently
1105 // dropped. That is the same trade `part_class`'s fallback makes: land
1106 // plainly, never land as nothing.
1107 if !matches!(part, CellPart::Tokens | CellPart::Actions | CellPart::Link) {
1108 let _ = writeln!(
1109 css,
1110 ".{} {{\n color: var(--{});\n}}",
1111 class(cell_part_class(part), opts),
1112 part.intent()
1113 );
1114 }
1115 }
1116
1117 css
1118 }
1119
1120 /// The component layer: every named thing phase A emits.
1121 ///
1122 /// No scrollbar track. It was on the phase A list and came off: eight lines of
1123 /// `::-webkit-scrollbar` with no shape a terminal or an immediate-mode painter
1124 /// would want handed to it, so it stays with the apps.
1125 #[must_use]
1126 pub fn component_rules(opts: &Emit) -> String {
1127 let mut css = String::new();
1128 css.push_str(&surface_rules(opts));
1129 css.push_str(&token_rules(opts));
1130 css.push_str(&selector_rules(opts));
1131 css.push_str(&row_rules(opts));
1132 css.push_str(&progress_rules(opts));
1133 css.push_str(&figure_rules(opts));
1134 css.push_str(&state_rules(opts));
1135 css.push_str(&table_rules(opts));
1136 css
1137 }
1138
1139 /// The whole phase-A stylesheet: properties, depth rules and components, in
1140 /// [`CSS_LAYER`], under a generated-file banner.
1141 ///
1142 /// The banner sits outside the layer, because a comment participates in no
1143 /// cascade and a reader opening the file should see what it is before seeing
1144 /// an at-rule.
1145 #[must_use]
1146 pub fn stylesheet(opts: &Emit) -> String {
1147 format!(
1148 "/* Generated by makeover-webview from makeover-layout. Do not edit.\n \
1149 Depth is a fill and an edge together; naming them apart is what let\n \
1150 them disagree. See the crate's README and wiki note makeover-layout.\n\n \
1151 Everything below is in the `{CSS_LAYER}` cascade layer. Declare the\n \
1152 order once in your own stylesheet, or this layer's position is decided\n \
1153 by whichever generated file the browser happens to see first:\n\n \
1154 @layer {CSS_LAYER}, base, components, responsive; */\n{}",
1155 in_css_layer(&format!(
1156 ":root {{\n{}}}\n\n{}\n{}",
1157 bevel_properties(opts),
1158 depth_rules(opts),
1159 component_rules(opts)
1160 ))
1161 )
1162 }
1163
1164 #[cfg(test)]
1165 mod tests {
1166 use super::*;
1167 use makeover_layout::Edge;
1168
1169 #[test]
1170 fn the_emitted_bevel_matches_what_the_apps_already_hand_write() {
1171 // Balanced Breakfast's styles.css, verbatim. Adoption has to be a
1172 // deletion, not a redesign, or nobody will take it.
1173 let opts = Emit::default();
1174 assert_eq!(
1175 bevel_shadow(Bevel::Raised, &opts),
1176 "inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark)"
1177 );
1178 assert_eq!(
1179 bevel_shadow(Bevel::Inset, &opts),
1180 "inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light)"
1181 );
1182 }
1183
1184 #[test]
1185 fn no_colour_ever_reaches_the_output() {
1186 let css = stylesheet(&Emit::default());
1187 assert!(!css.contains('#'), "a hex literal escaped into the CSS");
1188 assert!(
1189 !css.contains("rgb"),
1190 "a colour function escaped into the CSS"
1191 );
1192 // Every colour is named, never resolved.
1193 assert!(css.contains("var(--surface-raised)"));
1194 assert!(css.contains("var(--bevel-light)"));
1195 }
1196
1197 #[test]
1198 fn a_well_falls_back_through_css_rather_than_through_rust() {
1199 assert_eq!(
1200 fill_var(Fill::Well),
1201 "var(--surface-well, var(--surface-page))"
1202 );
1203 // Nothing else needs one.
1204 assert_eq!(fill_var(Fill::Raised), "var(--surface-raised)");
1205 assert_eq!(fill_var(Fill::Page), "var(--surface-page)");
1206 }
1207
1208 #[test]
1209 fn raised_and_well_do_not_collapse_onto_each_other() {
1210 let css = depth_rules(&Emit::default());
1211 assert!(css.contains(".raised {"));
1212 assert!(css.contains(".well {"));
1213 assert!(css.contains("var(--bevel-raised)"));
1214 assert!(css.contains("var(--bevel-inset)"));
1215 }
1216
1217 /// The cast shadow is composed here from the tone `makeover` derives, so
1218 /// neither crate has to hold the other's numbers.
1219 ///
1220 /// It is a `:root` property and deliberately not a depth class. There is no
1221 /// `Depth::Overlay` in the description layer, and adding one would be a
1222 /// claim about what a screen means rather than about how it is painted;
1223 /// until something asks for it, a consumer names the property on the rule
1224 /// for the menu or the toast it already has.
1225 #[test]
1226 fn the_cast_shadow_is_a_root_property_not_a_depth() {
1227 let css = bevel_properties(&Emit::default());
1228 assert!(css.contains("--elevation-overlay:"));
1229 assert!(css.contains("var(--elevation)"));
1230 assert!(
1231 !depth_rules(&Emit::default()).contains("elevation"),
1232 "elevation is not a depth class"
1233 );
1234 }
1235
1236 #[test]
1237 fn the_cascade_carries_the_pressed_state() {
1238 let css = surface_rules(&Emit::default());
1239 // The one thing this renderer gets free that the other two resolve by
1240 // hand, eighteen call sites deep in audiofiles' case. Asserted on a
1241 // named surface: pressing belongs to the control, not to the depth.
1242 assert!(css.contains(".card:active {"));
1243 assert!(css.contains(".button:active {"));
1244 }
1245
1246 #[test]
1247 fn the_depth_class_is_a_surface_and_not_a_control() {
1248 let css = depth_rules(&Emit::default());
1249 // The static surface the vocabulary was missing. Sixteen goingson
1250 // elements wore .card and cancelled its hover and press to get this,
1251 // because a raised object that is not pressable had no other spelling.
1252 for state in [":hover", ":active", ":focus-visible", ":disabled"] {
1253 assert!(
1254 !css.contains(&format!(".raised{state}")),
1255 "the depth class claimed {state}: {css}"
1256 );
1257 }
1258 assert!(css.contains("var(--bevel-raised)"), "still raised: {css}");
1259 }
1260
1261 #[test]
1262 fn pressing_moves_the_fill_and_not_only_the_edge() {
1263 // The decision-1 guard, and the regression that mattered: emitting the
1264 // bevel flip alone is what left goingson hand-writing `background:
1265 // var(--surface-sunken)` on .btn, .card and .tag/.badge alike, so none
1266 // of the three could be deleted.
1267 let pressed = interactive_rules("button", Depth::Raised, &Emit::default());
1268 assert!(pressed.contains(".button:active {"));
1269 assert!(
1270 pressed.contains("background: var(--surface-well, var(--surface-page))"),
1271 "pressed dropped its fill: {pressed}"
1272 );
1273 assert!(pressed.contains("box-shadow: var(--bevel-inset)"));
1274 }
1275
1276 #[test]
1277 fn pressed_takes_its_fill_from_the_description_not_from_the_app() {
1278 // goingson presses to --surface-sunken. The description says a pressed
1279 // raised region reads as a well, and makeover says outright that
1280 // surface-sunken cannot serve as one, so the app is the thing that
1281 // moves.
1282 //
1283 // Scoped to the pressed rules rather than to the whole sheet: since
1284 // makeover-layout 0.3.0 an unchosen tab is legitimately
1285 // --surface-sunken, so the token appearing somewhere in the output no
1286 // longer means the app's choice leaked in.
1287 let css = stylesheet(&Emit::default());
1288 let mut checked = 0;
1289 for rule in css.split("}\n") {
1290 if !rule.contains(":active") {
1291 continue;
1292 }
1293 checked += 1;
1294 assert!(
1295 !rule.contains("surface-sunken"),
1296 "a pressed rule took the app's fill: {rule}"
1297 );
1298 }
1299 assert!(checked > 0, "no pressed rules found to check");
1300 assert_eq!(
1301 Depth::Raised.pressed().fill(),
1302 Some(Fill::Well),
1303 "the description changed under us"
1304 );
1305 }
1306
1307 #[test]
1308 fn the_whole_stylesheet_is_emitted_in_the_family_layer() {
1309 // The point of 0.11.0. Unlayered normal declarations outrank every
1310 // named layer, so an app declaring `@layer base, components` loses
1311 // every rule it owns to this file until this file is layered too.
1312 let css = stylesheet(&Emit::default());
1313 assert!(css.contains(&format!("@layer {CSS_LAYER} {{")));
1314
1315 // Exactly one layer block, and nothing outside it but the banner.
1316 assert_eq!(css.matches("@layer").count(), 2, "banner names it once");
1317 let opened = css.find("@layer makeover {").expect("layer opens");
1318 for (i, line) in css.lines().enumerate() {
1319 let before_layer = css.lines().take(i).map(str::len).sum::<usize>() < opened;
1320 if before_layer || line.is_empty() {
1321 continue;
1322 }
1323 assert!(
1324 line.starts_with(" ") || line == "}" || line.starts_with(" "),
1325 "line outside the layer: {line:?}"
1326 );
1327 }
1328 }
1329
1330 #[test]
1331 fn the_generated_sheet_carries_no_trailing_whitespace() {
1332 // A checked-in generated file that a formatter wants to rewrite is a
1333 // diff every time somebody saves it.
1334 let css = stylesheet(&Emit::default());
1335 for (i, line) in css.lines().enumerate() {
1336 assert_eq!(line, line.trim_end(), "trailing whitespace on line {i}");
1337 }
1338 }
1339
1340 #[test]
1341 fn the_banner_tells_an_app_how_to_order_the_layer() {
1342 // Without a declared order the layer's position depends on which
1343 // generated file the browser sees first, which is not a contract.
1344 let css = stylesheet(&Emit::default());
1345 assert!(css.contains("@layer makeover, base, components, responsive;"));
1346 // And the banner is outside the layer, not a rule inside it.
1347 assert!(css.starts_with("/* Generated by makeover-webview"));
1348 }
1349
1350 #[test]
1351 fn a_primitive_owns_every_state_it_implies() {
1352 // The whole point of 0.10.0. Anything emitting a hover rule owes the
1353 // other three, or the consuming app supplies them by out-specifying a
1354 // rule it does not own: 19 such rules in goingson, 21 in the MNW
1355 // server, and three focus rings that do not match.
1356 let css = stylesheet(&Emit::default());
1357 for selector in ["button", "card", "chip", "tab", "segment", "toggle"] {
1358 assert!(css.contains(&format!(".{selector}:hover {{")), "{selector}");
1359 assert!(
1360 css.contains(&format!(".{selector}:active {{")),
1361 "{selector}"
1362 );
1363 assert!(
1364 css.contains(&format!(".{selector}:focus-visible {{")),
1365 "{selector} has no focus ring"
1366 );
1367 assert!(
1368 css.contains(&format!(".{selector}:disabled,")),
1369 "{selector} has no disabled state"
1370 );
1371 }
1372 }
1373
1374 #[test]
1375 fn a_field_takes_focus_and_refuses_input_without_taking_a_hover() {
1376 // A text field does not light up under the pointer, so it gets the two
1377 // states it has and not the two it does not.
1378 let css = stylesheet(&Emit::default());
1379 assert!(css.contains(".field:focus-visible {"));
1380 assert!(css.contains(".field:disabled,"));
1381 assert!(!css.contains(".field:hover {"));
1382 assert!(!css.contains(".field:active {"));
1383 }
1384
1385 #[test]
1386 fn disabled_is_emitted_after_hover_so_source_order_settles_it() {
1387 // Every one of these selectors is specificity (0,2,0), so nothing but
1388 // order decides which wins. A disabled button taking the hover fill is
1389 // the exact bug goingson's `.button:disabled:hover` was written to fix,
1390 // and the reason it had to reach (0,3,0) to do it.
1391 let css = interactive_rules("button", Depth::Raised, &Emit::default());
1392 let hover = css.find(":hover").expect("hover");
1393 let active = css.find(":active").expect("active");
1394 let focus = css.find(":focus-visible").expect("focus");
1395 let disabled = css.find(":disabled").expect("disabled");
1396 assert!(hover < active && active < focus && focus < disabled);
1397
1398 // And it restores the surface, or the hover fill survives underneath.
1399 let tail = &css[disabled..];
1400 assert!(tail.contains("background: var(--surface-raised)"));
1401 }
1402
1403 #[test]
1404 fn a_disabled_state_reaches_things_that_cannot_be_disabled() {
1405 // `:disabled` matches form elements only, and a chip is a div. Keying
1406 // on the ARIA attribute too is the pattern the invalid field already
1407 // set: one fact, read by the styling and the accessibility tree alike.
1408 let css = disabled_rule("chip", Depth::Raised);
1409 assert!(css.contains(".chip:disabled,"));
1410 assert!(css.contains(".chip[aria-disabled=\"true\"]"));
1411 assert!(css.contains("cursor: not-allowed"));
1412 }
1413
1414 #[test]
1415 fn the_focus_ring_does_not_disturb_the_bevel_it_lands_on() {
1416 // `outline` has its own property, so unlike the invalid ring there is
1417 // no bevel to restate beside it and nothing to keep in agreement.
1418 let opts = Emit::default();
1419 let css = focus_rule("button", Depth::Raised, &opts);
1420 assert!(css.contains("outline: 2px solid var(--focus-ring)"));
1421 assert!(!css.contains("box-shadow"), "the ring restated the bevel");
1422 }
1423
1424 #[test]
1425 fn a_well_takes_the_ring_inside_and_a_raised_surface_outside() {
1426 // One ring, placed by depth. The offset comes off `Depth::bevel` and
1427 // not off a per-component choice, which is what gave three apps three
1428 // different rings.
1429 let opts = Emit::default();
1430 assert!(focus_rule("field", Depth::Well, &opts).contains("outline-offset: calc(-1 * 2px)"));
1431 assert!(focus_rule("button", Depth::Raised, &opts).contains("outline-offset: 2px"));
1432 // Nothing to sit inside of, so it sits outside.
1433 assert!(focus_rule("badge", Depth::Sunken, &opts).contains("outline-offset: 2px"));
1434
1435 // And the ring is not the bevel. Reusing border_width emitted a 1px
1436 // ring that every consumer had already overridden.
1437 assert_ne!(opts.focus_width, opts.border_width);
1438 }
1439
1440 #[test]
1441 fn hover_is_gated_on_capability_and_the_keyboard_path_is_not() {
1442 // goingson's section 60 exists only to take back the hover state this
1443 // crate handed it. Gating at the source is what deletes that section
1444 // in all three apps rather than having each fight for it.
1445 let css = stylesheet(&Emit::default());
1446 let condition = format!("@media {}", Density::Pointer.media_condition());
1447 assert!(css.contains(&condition));
1448
1449 // What is gated is every hover state the surfaces carry. The row's
1450 // actions used to be the other half of this test and are not gated any
1451 // more, because they are not hidden any more: a rule that reveals
1452 // nothing needs no capability answer.
1453 let gated: Vec<&str> = css.lines().filter(|line| line.contains(":hover")).collect();
1454 assert!(!gated.is_empty(), "{css}");
1455 for line in gated {
1456 let indent = line.len() - line.trim_start().len();
1457 assert!(indent > 4, "an ungated hover rule: {line}");
1458 }
1459 assert!(!css.contains(".row:hover"), "{css}");
1460 }
1461
1462 #[test]
1463 fn the_capability_answer_is_asked_for_and_not_assumed() {
1464 // Both halves come from the crates that own them. If `makeover-touch`
1465 // ever says a fingertip has hover, this stops gating on its own.
1466 assert!(!Affordance::Hover.available(Density::Touch, SizeClass::Compact));
1467 assert!(Affordance::Hover.available(Density::Pointer, SizeClass::Compact));
1468 assert_eq!(hover_condition(), Some(Density::Pointer.media_condition()));
1469
1470 // And the size class passed to that call is not a claim about width.
1471 assert!(Affordance::Hover.reads_density());
1472 for size in [SizeClass::Compact, SizeClass::Medium, SizeClass::Expanded] {
1473 assert!(!Affordance::Hover.available(Density::Touch, size));
1474 }
1475 }
1476
1477 #[test]
1478 fn hover_resolves_against_the_token_makeover_already_derives() {
1479 let css = interactive_rules("card", Depth::Raised, &Emit::default());
1480 assert!(css.contains(".card:hover {"));
1481 assert!(css.contains("background: var(--hover-surface)"));
1482 // Not the app's choice, which was --surface-overlay.
1483 assert!(!css.contains("surface-overlay"));
1484 }
1485
1486 #[test]
1487 fn a_badge_gets_no_edge_and_no_fill() {
1488 // Decision 2, and the one visible redesign in phase A. Token::Badge is
1489 // Flat: an edge on a label says it can be pressed.
1490 let css = token_rules(&Emit::default());
1491 let badge = css
1492 .lines()
1493 .skip_while(|l| !l.starts_with(".badge {"))
1494 .take_while(|l| !l.starts_with('}'))
1495 .collect::<Vec<_>>()
1496 .join("\n");
1497 assert!(!badge.contains("box-shadow"), "badge kept an edge: {badge}");
1498 assert!(!badge.contains("background"), "badge kept a fill: {badge}");
1499 assert_eq!(Token::Badge.depth(false), Depth::Flat);
1500 assert_eq!(Token::Badge.depth(true), Depth::Flat);
1501 }
1502
1503 #[test]
1504 fn a_badge_carries_a_tone_and_neutral_is_the_bare_class() {
1505 let css = token_rules(&Emit::default());
1506 // Neutral is the absence of a status, not a status named "none".
1507 assert!(css.contains(".badge {\n color: var(--content-muted);"));
1508 assert!(!css.contains("data-tone=\"content-muted\""));
1509 for tone in ["info", "success", "warning", "danger"] {
1510 assert!(
1511 css.contains(&format!(".badge[data-tone=\"{tone}\"]")),
1512 "missing tone {tone}"
1513 );
1514 assert!(css.contains(&format!("color: var(--{tone})")));
1515 }
1516 }
1517
1518 #[test]
1519 fn a_chip_is_raised_and_latches_into_a_well() {
1520 let css = token_rules(&Emit::default());
1521 assert!(css.contains(".chip {"));
1522 assert!(css.contains(".chip.latched {"));
1523 assert!(css.contains(".chip:active {"));
1524 // The whole difference from a badge: it answers a click.
1525 assert!(Token::Chip { removable: false }.interactive());
1526 assert!(!Token::Badge.interactive());
1527 }
1528
1529 #[test]
1530 fn only_a_tab_comes_forward_when_chosen() {
1531 // The folder semantic. Collapsing the three selectors would lose it.
1532 let css = selector_rules(&Emit::default());
1533 assert!(css.contains(".tab.chosen {"));
1534 assert!(css.contains(".segment.chosen {"));
1535 assert!(css.contains(".toggle.chosen {"));
1536 assert_eq!(Selector::Tabs.chosen(), Depth::Raised);
1537 assert_eq!(Selector::Segmented.chosen(), Depth::Well);
1538 assert_eq!(Selector::Toggle.chosen(), Depth::Well);
1539
1540 let tab = css
1541 .lines()
1542 .skip_while(|l| !l.starts_with(".tab.chosen {"))
1543 .take_while(|l| !l.starts_with('}'))
1544 .collect::<Vec<_>>()
1545 .join("\n");
1546 assert!(
1547 tab.contains("var(--bevel-raised)"),
1548 "tab was held in: {tab}"
1549 );
1550 }
1551
1552 #[test]
1553 fn an_unchosen_tab_recedes_without_looking_picked() {
1554 let css = selector_rules(&Emit::default());
1555 // Recessed by colour and given no edge. An edge would make every option
1556 // look picked; flat would leave the chosen one nothing to come forward
1557 // from, which is the gap makeover-layout 0.3.0 closed.
1558 assert!(
1559 css.contains(".tab {\n background: var(--surface-sunken);\n}"),
1560 "unchosen tab is not recessed: {css}"
1561 );
1562 assert_eq!(Selector::Tabs.unchosen(), Depth::Sunken);
1563 assert!(css.contains(".tab:hover {"));
1564 }
1565
1566 #[test]
1567 fn a_segment_stands_up_so_the_chosen_one_can_be_held_in() {
1568 // The inverse of the tab, and why the three selectors are not one
1569 // member with a flag.
1570 let css = selector_rules(&Emit::default());
1571 assert!(css.contains(".segment {\n background: var(--surface-raised);"));
1572 assert_eq!(Selector::Segmented.unchosen(), Depth::Raised);
1573 assert_eq!(Selector::Segmented.chosen(), Depth::Well);
1574 }
1575
1576 #[test]
1577 fn a_rows_actions_are_shown_at_rest() {
1578 let css = row_rules(&Emit::default());
1579
1580 // The hover reveal is gone, and with it every escape it needed. What
1581 // it hid was hidden from pointer users alone, who are the ones
1582 // scanning a list to learn what can be done to a row.
1583 assert!(!css.contains("opacity"), "{css}");
1584 assert!(!css.contains("pointer-events"), "{css}");
1585 assert!(!css.contains(":hover"), "{css}");
1586 assert!(!css.contains(":focus-within"), "{css}");
1587
1588 // Nor is it hidden any other way. `display: none` would reflow the row
1589 // and `visibility: hidden` would take the actions out of the focus
1590 // order; the point is that neither is reached for.
1591 assert!(!css.contains("display: none"), "{css}");
1592 assert!(!css.contains("visibility:"), "{css}");
1593 }
1594
1595 #[test]
1596 fn a_figures_tone_lands_on_the_delta_when_there_is_one() {
1597 // 0.13.0. The delta is the part that reads as good or bad; the number
1598 // itself is an ordinary fact. A figure with no delta has nowhere else to
1599 // put the colour, so the value takes it, and `:has` is what lets one
1600 // attribute mean both without the emitter choosing an element.
1601 let css = stylesheet(&Emit::default());
1602
1603 assert!(
1604 css.contains(".figure[data-tone=\"success\"] > .figure-change"),
1605 "{css}"
1606 );
1607 assert!(
1608 css.contains(
1609 ".figure[data-tone=\"success\"]:not(:has(> .figure-change)) > .figure-value"
1610 ),
1611 "{css}"
1612 );
1613 // The caption is the noun and never takes the tone.
1614 assert!(
1615 !css.contains("[data-tone=\"success\"] > .figure-caption"),
1616 "{css}"
1617 );
1618 }
1619
1620 #[test]
1621 fn the_three_text_parts_take_their_intents_and_actions_inherits() {
1622 let css = row_rules(&Emit::default());
1623 assert!(css.contains(".row-primary {\n color: var(--content);"));
1624 assert!(css.contains(".row-secondary {\n color: var(--content-secondary);"));
1625 assert!(css.contains(".row-meta {\n color: var(--content-muted);"));
1626 // Actions carry controls, not text. Pinning the colour it would inherit
1627 // anyway is louder than saying nothing.
1628 assert!(!css.contains(".row-actions {\n color:"));
1629 }
1630
1631 #[test]
1632 fn the_token_strip_takes_no_colour_of_its_own() {
1633 // makeover-layout 0.9.0. A token carries its own tone, so a colour on
1634 // the strip would be a rule fighting the things sitting in it -- the
1635 // same reasoning as actions, reached for a different reason.
1636 let css = row_rules(&Emit::default());
1637 assert!(!css.contains(".row-tokens {\n color:"));
1638 }
1639
1640 #[test]
1641 fn an_unknown_row_part_renders_plainly_rather_than_failing_to_build() {
1642 // What `#[non_exhaustive]` bought and what it cost. `part_class` can no
1643 // longer be exhaustive, so a member added upstream lands as a bare
1644 // class with no rule instead of stopping the build. Asserting the
1645 // fallback exists is what keeps it from being written as `unreachable!`
1646 // by someone who reads the match as closed.
1647 assert_eq!(part_class(RowPart::Tokens), "row-tokens");
1648 assert_eq!(part_class(RowPart::Meta), "row-meta");
1649 }
1650
1651 #[test]
1652 fn the_progress_trough_is_a_well() {
1653 let css = progress_rules(&Emit::default());
1654 assert!(css.contains(".progress {"));
1655 assert!(css.contains("box-shadow: var(--bevel-inset)"));
1656 assert!(css.contains(".progress > .progress-fill {"));
1657 assert!(css.contains("background: var(--action)"));
1658 // A bare `.fill` would catch things that have nothing to do with
1659 // progress once the sheet lands unprefixed.
1660 assert!(!css.contains("> .fill "));
1661 }
1662
1663 #[test]
1664 fn a_progress_bar_can_carry_a_tone_and_defaults_to_action() {
1665 let css = progress_rules(&Emit::default());
1666 // Untoned is --action, not Tone::Neutral's content-muted: a bar with no
1667 // status is still reporting progress, and muted would read as disabled.
1668 assert!(css.contains(".progress > .progress-fill {\n background: var(--action);"));
1669 assert!(!css.contains("progress-fill {\n color: var(--content-muted)"));
1670 for tone in ["info", "success", "warning", "danger"] {
1671 assert!(
1672 css.contains(&format!(".progress > .progress-fill[data-tone=\"{tone}\"]")),
1673 "missing progress tone {tone}"
1674 );
1675 }
1676 // goingson's two live cases, which is why the tones are emitted at all.
1677 assert!(css.contains("[data-tone=\"success\"] {\n background: var(--success);"));
1678 assert!(css.contains("[data-tone=\"danger\"] {\n background: var(--danger);"));
1679 }
1680
1681 #[test]
1682 fn no_scrollbar_track_is_emitted() {
1683 // Decision 3's negative half. It was on the phase A list and came off;
1684 // this is what stops it drifting back in.
1685 let css = stylesheet(&Emit::default());
1686 assert!(!css.contains("scrollbar"));
1687 assert!(!css.contains("::-webkit"));
1688 }
1689
1690 #[test]
1691 fn an_invalid_field_is_ringed_without_being_lit() {
1692 let css = surface_rules(&Emit::default());
1693 assert!(css.contains(".field {"));
1694 // The ARIA attribute, not a class: one fact, read by both the visual
1695 // and the accessible state, so they cannot drift.
1696 assert!(css.contains(".field[aria-invalid=\"true\"] {"));
1697 assert!(!css.contains(".field.invalid"));
1698 // A flat ring: this edge says "wrong", and a two-tone bevel would have
1699 // it say "raised" at the same time.
1700 assert!(css.contains("0 0 0 1px var(--danger)"));
1701 }
1702
1703 #[test]
1704 fn an_invalid_field_keeps_the_well_underneath_it() {
1705 // box-shadow is not additive. A lone ring replaces the bevel and drops
1706 // the well out from under the field, which is what this emitted before
1707 // 0.5.0 and is the whole reason the rule composes.
1708 let css = surface_rules(&Emit::default());
1709 let invalid = css
1710 .lines()
1711 .skip_while(|l| !l.starts_with(".field[aria-invalid"))
1712 .take_while(|l| !l.starts_with('}'))
1713 .collect::<Vec<_>>()
1714 .join("\n");
1715 assert!(
1716 invalid.contains("var(--bevel-inset)"),
1717 "the well was dropped: {invalid}"
1718 );
1719 assert!(invalid.contains("var(--danger)"));
1720 }
1721
1722 #[test]
1723 fn button_and_card_come_out_identical_by_construction() {
1724 // The duplication phase A deletes. They are the same composition, so
1725 // the only honest way to emit both is from one call.
1726 let opts = Emit::default();
1727 let css = surface_rules(&opts);
1728 assert_eq!(
1729 depth_declarations(Depth::Raised),
1730 depth_declarations(Depth::Raised)
1731 );
1732 assert!(css.contains(".button {"));
1733 assert!(css.contains(".card {"));
1734 assert_eq!(
1735 interactive_rules("button", Depth::Raised, &Emit::default()).replace("button", "card"),
1736 interactive_rules("card", Depth::Raised, &Emit::default())
1737 );
1738 }
1739
1740 #[test]
1741 fn a_prefix_reaches_the_component_classes_too() {
1742 let opts = Emit {
1743 class_prefix: "mo-",
1744 ..Emit::default()
1745 };
1746 let css = stylesheet(&opts);
1747 for name in [
1748 "mo-button",
1749 "mo-card",
1750 "mo-field",
1751 "mo-badge",
1752 "mo-chip",
1753 "mo-tab",
1754 "mo-row-primary",
1755 "mo-progress",
1756 "mo-progress-fill",
1757 ] {
1758 assert!(css.contains(&format!(".{name}")), "unprefixed: {name}");
1759 }
1760 // The bare names must be gone entirely, or a prefixed build still
1761 // collides with the app's own stylesheet.
1762 assert!(!css.contains(".button {"));
1763 assert!(!css.contains(".card {"));
1764 assert!(!css.contains(".badge {"));
1765 }
1766
1767 #[test]
1768 fn the_class_a_renderer_puts_on_an_option_is_the_one_the_rules_key_off() {
1769 // `option_class` is the contract a screen renderer writes markup
1770 // against, and the rules below are the other half of it. They come off
1771 // one mapping now, so this asserts the mapping is the one that reaches
1772 // the stylesheet rather than that two lists still agree.
1773 let css = stylesheet(&Emit::default());
1774 for selector in [Selector::Tabs, Selector::Segmented, Selector::Toggle] {
1775 let name = option_class(selector);
1776 assert!(css.contains(&format!(".{name} {{")), "{name}: {css}");
1777 assert!(css.contains(&format!(".{name}.chosen {{")), "{name}: {css}");
1778 }
1779 assert_eq!(option_class(Selector::Tabs), "tab");
1780 }
1781
1782 #[test]
1783 fn a_destructive_button_has_somewhere_for_its_tone_to_land() {
1784 let css = component_rules(&Emit::default());
1785
1786 for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
1787 assert!(
1788 css.contains(&format!(".button[data-tone=\"{}\"]", tone.token())),
1789 "{css}"
1790 );
1791 }
1792 // Colour, not a fill. A red surface is an app's decision about emphasis.
1793 assert!(!css.contains(".button[data-tone=\"danger\"] {\n background"));
1794 }
1795
1796 #[test]
1797 fn a_described_list_is_not_a_bulleted_list() {
1798 let css = component_rules(&Emit::default());
1799 assert!(css.contains(".list {\n list-style: none;"), "{css}");
1800 }
1801
1802 #[test]
1803 fn a_table_lays_itself_out_without_being_told_its_columns() {
1804 // The whole point of the CSS table. A described table's columns are
1805 // known at render time, so anything the stylesheet has to be told about
1806 // them would have to travel with the markup.
1807 let css = component_rules(&Emit::default());
1808
1809 assert!(css.contains(".table {\n display: table;"), "{css}");
1810 assert!(css.contains("display: table-row;"), "{css}");
1811 assert!(css.contains("display: table-cell;"), "{css}");
1812 assert!(!css.contains("grid-template-columns"), "{css}");
1813 }
1814
1815 #[test]
1816 fn a_control_in_a_cell_is_not_painted_as_text() {
1817 // The point of makeover-layout 0.14.0's CellPart, and the table-side
1818 // twin of `the_three_text_parts_take_their_intents_and_actions_inherits`
1819 // above. One `.cell` and one content colour meant a button in a cell
1820 // inherited it.
1821 let css = table_rules(&Emit::default());
1822
1823 assert!(
1824 css.contains(".cell-value {\n color: var(--content);"),
1825 "{css}"
1826 );
1827 assert!(!css.contains(".cell-actions {\n color:"), "{css}");
1828 assert!(!css.contains(".cell-tokens {\n color:"), "{css}");
1829 assert!(!css.contains(".cell-link {\n color:"), "{css}");
1830
1831 // The colour is on the part that is text, never on the container. On
1832 // `.cell` it would cascade into the three parts that are not text,
1833 // which is the bug written as one rule.
1834 assert!(!css.contains(".cell {\n color:"), "{css}");
1835 }
1836
1837 #[test]
1838 fn an_unknown_cell_part_renders_plainly_rather_than_failing_to_build() {
1839 // `part_class`'s obligation, taken on for the table side too. CellPart
1840 // is `#[non_exhaustive]`, so a member added upstream must land as a
1841 // bare class rather than as a build that stops.
1842 assert_eq!(cell_part_class(CellPart::Value), "cell-value");
1843 assert_eq!(cell_part_class(CellPart::Actions), "cell-actions");
1844 }
1845
1846 #[test]
1847 fn a_column_drops_by_its_priority_and_never_by_its_position() {
1848 let css = component_rules(&Emit::default());
1849
1850 // Optional goes at the narrowest class and secondary goes with it,
1851 // which is `kept_at`'s cutoff walk said as two queries.
1852 let compact = css
1853 .find(&format!("@media {}", SizeClass::Compact.media_condition()))
1854 .expect("a compact query");
1855 let medium = css
1856 .find(&format!("@media {}", SizeClass::Medium.media_condition()))
1857 .expect("a medium query");
1858 assert!(css[compact..].contains(".cell-drops-next"), "{css}");
1859 assert!(!css[medium..].contains(".cell-drops-next"), "{css}");
1860
1861 // Essential columns are never mentioned, because not being mentioned is
1862 // already what never dropping means.
1863 assert!(!css.contains(".cell-keeps"), "{css}");
1864
1865 // And nothing counts. `nth-child` is the bug the priority vocabulary
1866 // exists to end.
1867 assert!(!css.contains("nth-child"), "{css}");
1868 }
1869
1870 #[test]
1871 fn the_whole_sheet_still_names_every_colour() {
1872 // The crate's founding property, asserted over the component layer and
1873 // not only the primitives.
1874 let css = stylesheet(&Emit::default());
1875 assert!(!css.contains('#'));
1876 assert!(!css.contains("rgb"));
1877 for line in css.lines() {
1878 // Declarations only: a selector or an at-rule can carry a colon of
1879 // its own (`:root`, `:hover`, `@media (hover: hover)`) and declares
1880 // nothing. Keyed on the trailing semicolon rather than on leading
1881 // indentation, which only ever worked as a proxy for nesting depth
1882 // and stopped when the sheet gained a cascade layer around it.
1883 let trimmed = line.trim();
1884 if !trimmed.ends_with(';') {
1885 continue;
1886 }
1887 let Some((_, value)) = trimmed.split_once(": ") else {
1888 continue;
1889 };
1890 if value.contains("var(--") {
1891 continue;
1892 }
1893 // Everything left has to be a keyword, a number or a
1894 // caller-supplied length, never a colour.
1895 //
1896 // The length arm is what the comment above always claimed and the
1897 // list never covered: `border_width` arrives from `Emit` and lands
1898 // bare in the focus ring's offset, where the bevel had only ever
1899 // used it inside an `inset` shadow.
1900 let opts = Emit::default();
1901 assert!(
1902 value.contains("inset")
1903 || value.contains(opts.border_width)
1904 || value.contains(opts.focus_width)
1905 // 0.12.0's two: a sortable header is a control and says so
1906 // with the pointer, and the caret is this renderer's own
1907 // expression of `aria-sort`. Neither is a colour, which is
1908 // what this test is actually about, and neither is a size,
1909 // which is the other thing this crate must not name.
1910 || value.starts_with("\"\\2")
1911 || matches!(
1912 value.trim_end_matches(';'),
1913 "0" | "1"
1914 | "none"
1915 | "auto"
1916 | "not-allowed"
1917 | "pointer"
1918 // The table frame. `display` is structure and not a
1919 // size; `nowrap` is what makes a content column
1920 // content. The two widths are the awkward pair and
1921 // they are still not sizes: `100%` is "all of
1922 // whatever you were given" and `1%` is the CSS
1923 // table idiom for "shrink to fit", which is a
1924 // behaviour spelled as a number because CSS has no
1925 // keyword for it. Neither names a magnitude, which
1926 // is the thing this crate leaves to
1927 // makeover-geometry.
1928 | "table"
1929 | "table-row"
1930 | "table-cell"
1931 | "nowrap"
1932 | "100%"
1933 | "1%"
1934 ),
1935 "unrecognised literal value: {line}"
1936 );
1937 }
1938 }
1939
1940 #[test]
1941 fn flat_emits_nothing_at_all() {
1942 assert_eq!(depth_class(Depth::Flat, &Emit::default()), None);
1943 assert!(!depth_rules(&Emit::default()).contains("flat"));
1944 }
1945
1946 #[test]
1947 fn a_prefix_namespaces_every_class() {
1948 let opts = Emit {
1949 class_prefix: "mo-",
1950 ..Emit::default()
1951 };
1952 let css = depth_rules(&opts);
1953 assert!(css.contains(".mo-raised {"));
1954 assert!(css.contains(".mo-well {"));
1955 assert!(!css.contains(".raised {"));
1956 }
1957
1958 #[test]
1959 fn the_border_width_is_the_callers() {
1960 let opts = Emit {
1961 border_width: "2px",
1962 ..Emit::default()
1963 };
1964 assert!(bevel_shadow(Bevel::Raised, &opts).contains("inset 2px 2px 0"));
1965 }
1966
1967 #[test]
1968 fn edges_agree_with_the_description() {
1969 // Not a tautology: it is the guard that a CSS-shaped convenience never
1970 // quietly reverses which side is lit.
1971 let (tl, br) = Bevel::Raised.edges();
1972 assert_eq!(tl.token(), Edge::Light.token());
1973 assert_eq!(br.token(), Edge::Dark.token());
1974 }
1975 }
1976