max / makeover-webview
| 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 | //! [`facet`] renders `makeover_layout::Facet`: a dimension a set is narrowed by, |
| 46 | //! and the one phase-B emitter whose markup an app is not keeping, because the |
| 47 | //! markup it replaces was two mechanisms rather than one. A tag's selection and |
| 48 | //! a tag's browse position were separate state on MNW's discover page, which is |
| 49 | //! why every filter row there carries a tick box *and* a chevron; one gesture |
| 50 | //! doing both is what lets the second one go. |
| 51 | //! |
| 52 | //! [`list`] is the other half: column tracks, the narrowing rules, and the cell |
| 53 | //! containers a row is made of. It stops at the cell boundary and does not |
| 54 | //! render what goes inside one, on the reasoning in that module. So phase B is |
| 55 | //! now the frame around content in both directions, and what an app still owns |
| 56 | //! is the content itself. |
| 57 | //! |
| 58 | //! # What phase A settled, and what it costs |
| 59 | //! |
| 60 | //! Decided 2026-07-29 against goingson's `styles.css` rather than against a |
| 61 | //! component list. The useful finding there was that `.btn` (line 644), |
| 62 | //! `.card` (768) and `.tag, .badge` (882) each hand-write the same |
| 63 | //! composition, so three quarters of phase A is one rule with several names. |
| 64 | //! |
| 65 | //! Two of the four decisions change how goingson looks, and adoption should |
| 66 | //! not be described as a pure deletion: |
| 67 | //! |
| 68 | //! - **Pressed carries its fill.** [`interactive_rules`] emits |
| 69 | //! [`Depth::pressed`] whole. goingson presses to `--surface-sunken` today and |
| 70 | //! will press to `--surface-well`, and hovers to `--surface-overlay` today |
| 71 | //! and will hover to `--hover-surface`. Since `surface-well` inverts by theme |
| 72 | //! where `surface-sunken` does not, a dark theme presses *lighter* than it |
| 73 | //! hovers. That falls out of `makeover`'s own derivation, which says outright |
| 74 | //! that `surface-sunken` cannot serve as a well, so if it reads wrong the |
| 75 | //! answer is there and not here. |
| 76 | //! - **Badges go flat.** See [`token_rules`]. |
| 77 | //! |
| 78 | //! The other two: the progress trough is renderer-local and the scrollbar |
| 79 | //! track was dropped ([`component_rules`]), and no class prefix ships by |
| 80 | //! default, so adoption means deleting the app's hand-written rule in the same |
| 81 | //! commit that adds the generated one. `.card`, `.badge` and the tab classes |
| 82 | //! all already exist in goingson, and while both rules exist the cascade order |
| 83 | //! decides which wins. That is the one real risk in adopting this, and it is |
| 84 | //! why the migration lands per component rather than in one commit. |
| 85 | //! |
| 86 | //! # 0.10.0: the states this crate used to leave to its consumers |
| 87 | //! |
| 88 | //! [`interactive_rules`] emitted hover and pressed and stopped, because |
| 89 | //! `makeover-layout` modelled no interaction state. Focus and disabled were |
| 90 | //! therefore unsayable, and every app completed the primitive from outside the |
| 91 | //! only way that works: by out-specifying a rule it does not own. goingson |
| 92 | //! carries 19 such rules and the MNW server 21, and the three focus rings do |
| 93 | //! not match each other. |
| 94 | //! |
| 95 | //! That also blocked the cascade-layer work outright. An app that declares |
| 96 | //! `@layer` puts its own rules in a named layer, and unlayered declarations |
| 97 | //! outrank every named layer regardless of specificity, so all of those |
| 98 | //! overrides lose in the commit that adopts layers. They cannot simply be |
| 99 | //! deleted, because they are the only thing supplying the missing states. |
| 100 | //! Emitting the states here is what turns that adoption into a deletion. |
| 101 | //! |
| 102 | //! Four states now, in emission order, and the order is load-bearing: they are |
| 103 | //! all specificity (0,2,0), so disabled beats hover by coming last and by |
| 104 | //! nothing else. Nothing here reaches for `:not(:disabled)`, which would raise |
| 105 | //! a selector this crate will shortly be wrapping in its own layer. |
| 106 | //! |
| 107 | //! Hover additionally sits inside a capability query now. `makeover-touch` |
| 108 | //! answers whether a fingertip has hover and `makeover-geometry` spells the |
| 109 | //! condition; this crate asks and does not decide. goingson's section 60 exists |
| 110 | //! solely to take the hover state back on touch, which is a fight it should |
| 111 | //! never have been handed. |
| 112 | //! |
| 113 | //! # 0.11.0: the layer contract |
| 114 | //! |
| 115 | //! [`stylesheet`] emits into the `makeover` cascade layer ([`CSS_LAYER`], which |
| 116 | //! lives in `makeover-geometry` because that is the one crate every CSS emitter |
| 117 | //! in the family already depends on). `makeover-geometry` 0.6.0 does the same |
| 118 | //! for `geometry.css`. |
| 119 | //! |
| 120 | //! The cascade resolves origin and importance, then layer, then specificity, |
| 121 | //! then source order, and **unlayered normal declarations outrank every named |
| 122 | //! layer**. So before this, an app that declared `@layer base, components, |
| 123 | //! responsive` put every rule it owns into a named layer and lost all of them to |
| 124 | //! this unlayered file, regardless of specificity and regardless of loading |
| 125 | //! last. Nothing errors when that happens: the CSS is valid, the minifier is |
| 126 | //! happy, and buttons and badges look subtly wrong. |
| 127 | //! |
| 128 | //! That is why the layer belongs here rather than in each app. An app cannot fix |
| 129 | //! it from its own stylesheet, because the fix is to layer the file it does not |
| 130 | //! own. |
| 131 | //! |
| 132 | //! **What it flips**, and the reason each app wants a look when it bumps the |
| 133 | //! pin: a generated rule that currently beats an app rule by being more specific |
| 134 | //! stops beating it. The direction is always "the app wins", which is what the |
| 135 | //! apps already assume, but a hand-written rule an app thought was dead can come |
| 136 | //! back to life. |
| 137 | //! |
| 138 | //! An app should declare the order once, or the layer's position is decided by |
| 139 | //! whichever generated file the browser happens to see first: |
| 140 | //! |
| 141 | //! ```css |
| 142 | //! @layer makeover, base, components, responsive; |
| 143 | //! ``` |
| 144 | //! |
| 145 | //! [`in_css_layer`] is re-exported for an app that assembles its own stylesheet |
| 146 | //! from this crate's pieces. goingson builds `tables.css` in its own `build.rs` |
| 147 | //! out of [`list::narrowing_css`] and [`list::grid_template_columns`], and those |
| 148 | //! rules are as generated as the ones here, so they belong in the same layer and |
| 149 | //! this crate cannot put them there on the app's behalf. |
| 150 | //! |
| 151 | //! # 0.12.0: the ring gets its own width |
| 152 | //! |
| 153 | //! [`focus_rule`] reused [`Emit::border_width`] and emitted a 1px ring. That was |
| 154 | //! an implementation convenience dressed as consistency with the invalid-field |
| 155 | //! ring: a bevel and a focus indicator answer different questions, and only one |
| 156 | //! of them has to be noticed from across a desk. |
| 157 | //! |
| 158 | //! Caught while adopting 0.11.0 into goingson, by the check the adoption tasks |
| 159 | //! ask for. Every consumer had already written its own ring and all three chose |
| 160 | //! at least 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px, |
| 161 | //! goingson 2px on three rules and 3px on the one covering twelve selectors. The |
| 162 | //! design system was the only thing in the tree saying 1px, so deleting the app |
| 163 | //! rules in favour of it would have thinned the focus indicator everywhere. |
| 164 | //! |
| 165 | //! [`Emit::focus_width`] now carries it, defaulting to `2px`, and the offset is |
| 166 | //! the same magnitude with its sign off the depth. Both values are the measured |
| 167 | //! consensus rather than a new opinion. |
| 168 | //! |
| 169 | //! # 0.54.0: a curve this renderer can carry, and one it cannot |
| 170 | //! |
| 171 | //! `makeover-layout` 0.32.0's `Curve`. A range takes its granularity from the |
| 172 | //! curve now (`Field::curve.step()`), every other kind keeps `Field::step`, and |
| 173 | //! `Curve::Linear` emits exactly what it emitted before. |
| 174 | //! |
| 175 | //! **A constant-ratio curve still emits a linear track, and that is a |
| 176 | //! shortfall rather than a decision.** HTML has no logarithmic range input, so |
| 177 | //! honouring one here means either shipping JS that maps the thumb position to |
| 178 | //! a value -- renderer-side app code, which is the thing this stack exists to |
| 179 | //! delete -- or changing what the control submits from a value to a fraction, |
| 180 | //! and then something has to map it on the way back in. That something is not |
| 181 | //! this crate: the MNW server reads these forms with its own handlers, so a |
| 182 | //! fraction arriving where a value is expected would be silent. Filed rather |
| 183 | //! than guessed at. |
| 184 | //! |
| 185 | //! What is not lost: the extent, the granularity, and the value's own units. |
| 186 | //! What is lost is resolution at the small end, which is exactly the reason an |
| 187 | //! app asked for a ratio in the first place. No consumer is affected today -- |
| 188 | //! every described range on this path is linear. |
| 189 | //! |
| 190 | //! # 0.52.0: a markdown field gets the preview it was permitted |
| 191 | //! |
| 192 | //! 0.50.0 marked a [`makeover_layout::FieldKind::Rich`] field with |
| 193 | //! `data-format="markdown"` and stopped there, and nothing read the mark: no |
| 194 | //! rule, no markup, no selector anywhere in the tree. So a described editor was |
| 195 | //! a plain textarea carrying an attribute, and MNW converting its four |
| 196 | //! hand-written section editors onto the member would have *lost* the |
| 197 | //! Write/Preview pair one of them already has. A permission taken and not spent |
| 198 | //! turns every conversion into a regression. |
| 199 | //! |
| 200 | //! [`form::editor_rules`] and the chrome beside it are the spending. The pair is |
| 201 | //! a segmented control, so it takes the depth, the focus ring and the chosen |
| 202 | //! state from rules that already existed; the preview pane is a well, because it |
| 203 | //! stands where the control stood. Both are gated on the attribute rather than |
| 204 | //! on a class, which is what the attribute was for. |
| 205 | //! |
| 206 | //! **This crate still renders no markdown.** The pane arrives empty and is |
| 207 | //! filled by whatever binds the editor, which is where the host's sanitiser |
| 208 | //! already is. A converter here would have moved that guarantee into a crate |
| 209 | //! with no view of the host's content-security posture. |
| 210 | //! |
| 211 | //! # 0.47.0: a range, a chooser's ghost text, and an option that cannot be |
| 212 | //! picked yet |
| 213 | //! |
| 214 | //! `makeover-layout` 0.28.0's three form findings, all of them cheap here and |
| 215 | //! none of them cheap in the app that found them. |
| 216 | //! |
| 217 | //! - `FieldKind::Range` emits `<input type="range">`, and `Field::step` emits |
| 218 | //! `step`. The step is emitted only when the description carries one: the |
| 219 | //! browser's own default is `step="1"`, which is what a description means by |
| 220 | //! saying nothing, and is also what turns a 0-to-1 threshold into a |
| 221 | //! two-position control. |
| 222 | //! - A select with nothing chosen emits a disabled, selected, valueless first |
| 223 | //! option carrying `Field::placeholder`. HTML has no placeholder attribute on |
| 224 | //! `<select>`; this is the idiom, and `required` keeps working through it |
| 225 | //! because the option's value is empty. |
| 226 | //! - `Choice::unavailable` emits `disabled` plus the reason. Where it goes |
| 227 | //! differs by control and the difference is forced: a radio group gets a |
| 228 | //! `.form-option-reason` span beside the label, and a `<select>` option has |
| 229 | //! room for no element at all, so the reason runs into its text. |
| 230 | //! |
| 231 | //! # 0.25.0: a cell says what it holds |
| 232 | //! |
| 233 | //! 0.23.0 gave a table its layout and left every cell the same. One `.cell` |
| 234 | //! carried the whole thing, so a cell holding text and a cell holding a button |
| 235 | //! were one class and one content colour, and a control in a cell was painted |
| 236 | //! as text. That is the drift [`RowPart::intent`](makeover_layout::RowPart) |
| 237 | //! has prevented for list rows since 0.2.0 and prevented for nothing here. |
| 238 | //! |
| 239 | //! makeover-layout 0.14.0's [`CellPart`](makeover_layout::CellPart) names the |
| 240 | //! four things a cell holds, and [`table_rules`] turns them into |
| 241 | //! `.cell-value`, `.cell-tokens`, `.cell-actions` and `.cell-link`. Only the |
| 242 | //! first takes a colour: a token carries its own tone, an action is a control |
| 243 | //! rather than text, and a link takes the action colour from the anchor it is. |
| 244 | //! |
| 245 | //! The colour going on `.cell-value` rather than on `.cell` is the fix rather |
| 246 | //! than an implementation detail. On the container it cascades into the parts |
| 247 | //! that are not text, which is the bug said in one rule. |
| 248 | //! |
| 249 | //! [`list::Cell::part`] is `Option<CellPart>` here, where it was |
| 250 | //! `Option<RowPart>`. A table cell borrowing the list row's vocabulary was the |
| 251 | //! drift with a type on it: the two answer different questions, and only one of |
| 252 | //! them was ever about a cell. |
| 253 | //! |
| 254 | //! # 0.23.0: a table lays itself out, and a row shows its controls |
| 255 | //! |
| 256 | //! Three things a description could say and this renderer had no rule for, |
| 257 | //! found together by rendering the MNW server's SSH-keys settings tab through |
| 258 | //! `quasi` and preferring the hand-written Askama original. |
| 259 | //! |
| 260 | //! **A table had no layout at all.** [`list::narrowing_css`] emits the track |
| 261 | //! list, and it has to be called with the columns, so it works where the |
| 262 | //! columns are known at build time: goingson builds `tables.css` in its own |
| 263 | //! `build.rs` and is untouched. A table a description produced knows its |
| 264 | //! columns at render time, and the rules would have had to travel with the |
| 265 | //! markup: a `<style>` element per table, which needs `style-src |
| 266 | //! 'unsafe-inline'` that the MNW server is working to drop, or the head, which |
| 267 | //! an htmx fragment swap does not carry. [`table_rules`] lays a table out with |
| 268 | //! `display: table` instead, which aligns columns across rows knowing nothing |
| 269 | //! about how many there are. [`Priority`](makeover_layout::Priority) hiding |
| 270 | //! moves from a generated rule per dropped column to one rule per drop class, |
| 271 | //! and [`list::column_classes`] is what puts those classes on a cell. A header |
| 272 | //! row emitted by a renderer's own code should call it too, or the header and |
| 273 | //! the body disagree about which column just dropped. |
| 274 | //! |
| 275 | //! **A destructive button had nowhere for its tone to land.** `.button` carried |
| 276 | //! no tone, on the reading that a control's colour is its surface. Every |
| 277 | //! consumer had written the danger rule itself. It joins the badge in taking |
| 278 | //! the four tones as colour, off `data-tone`. |
| 279 | //! |
| 280 | //! **A list rendered as a bulleted list**, because nothing here reset the `ul` |
| 281 | //! a renderer emits for one. |
| 282 | //! |
| 283 | //! `RowPart::revealed_on_hover` also stops being honoured, which its own doc |
| 284 | //! sanctioned: a renderer decides. It was retired outright in makeover-layout |
| 285 | //! 0.13.0, once this had been its only consumer for a release. The rule hid a |
| 286 | //! row's actions until hover, |
| 287 | //! and every escape it grew was a report that hiding was wrong for somebody: |
| 288 | //! `focus-within` for the keyboard, the capability gate for a fingertip with no |
| 289 | //! way to unhide. What survived hid the controls from pointer users alone, who |
| 290 | //! are the ones scanning a list to learn what can be done to a row. |
| 291 | //! |
| 292 | //! # 0.17.0: the depth classes stop being controls |
| 293 | //! |
| 294 | //! [`depth_rules`] gave `.raised` the whole interactive set. A depth is a |
| 295 | //! statement about shape, so that left the vocabulary with no raised surface |
| 296 | //! that is merely an object, and an app wanting one had two moves: write its |
| 297 | //! own class from tokens, or take a control class and cancel the control half. |
| 298 | //! goingson took the second, in three variants over sixteen elements |
| 299 | //! (`.card--static` at 14 call sites, `.card--muted` at 2, `.card--shell` at 1), |
| 300 | //! each re-asserting the resting fill and bevel on `:hover` and `:active`. |
| 301 | //! |
| 302 | //! Measured before changing it: `.raised` is emitted into goingson, Balanced |
| 303 | //! Breakfast and the MNW server, and none of the three has a single call site. |
| 304 | //! The states were unasked-for everywhere at once, and dropping them costs no |
| 305 | //! migration anywhere. |
| 306 | //! |
| 307 | //! `.card` and `.button` are unchanged. They are the same depth *and* controls, |
| 308 | //! and they take their states from [`surface_rules`], which is where a state |
| 309 | //! belongs: on the thing that claims to answer a pointer. |
| 310 | //! |
| 311 | //! # Substitution, three ways |
| 312 | //! |
| 313 | //! `Fill::Well` has no colour on makeover before 2.3.0, and each renderer |
| 314 | //! answers that differently, which is the evidence that dropping |
| 315 | //! `Fill::fallback` from the description was right: |
| 316 | //! |
| 317 | //! - `makeover-immediate` substitutes the page in Rust. |
| 318 | //! - `makeover-tui` refuses to substitute and draws an edge instead, because a |
| 319 | //! terminal would quantise the two together. |
| 320 | //! - here, CSS already has the mechanism: `var(--surface-well, |
| 321 | //! var(--surface-page))` falls back in the browser, and nothing in Rust |
| 322 | //! decides anything. |
| 323 | |
| 324 | |
| 325 | |
| 326 | |
| 327 | |
| 328 | |
| 329 | |
| 330 | |
| 331 | |
| 332 | |
| 333 | |
| 334 | use crate; |
| 335 | use ; |
| 336 | // Re-exported rather than redefined. An app assembling its own stylesheet out |
| 337 | // of this crate's pieces needs the same layer name, and most such apps depend |
| 338 | // on this crate and not on `makeover-geometry` directly: goingson builds |
| 339 | // `tables.css` in its own build.rs from [`list::narrowing_css`], and those |
| 340 | // rules are as generated as the ones here. |
| 341 | pub use ; |
| 342 | use |
| 343 | Bevel, CellPart, Depth, Fallback, Fill, Flow, Intent, RowPart, Selector, Sort, State, Token, |
| 344 | Tone, |
| 345 | ; |
| 346 | use Affordance; |
| 347 | use Write as _; |
| 348 | |
| 349 | /// How the emitted CSS is shaped. |
| 350 | |
| 351 | |
| 352 | /// Bevel thickness, as a CSS length. |
| 353 | /// |
| 354 | /// A value, so it arrives from the caller: border widths belong to |
| 355 | /// `makeover-geometry` and will come from there once it carries them. |
| 356 | pub border_width: &'static str, |
| 357 | /// Focus ring thickness, as a CSS length. |
| 358 | /// |
| 359 | /// Separate from [`border_width`](Self::border_width), which it reused |
| 360 | /// until 0.12.0. That reuse was an implementation convenience dressed as |
| 361 | /// consistency, and it emitted a 1px ring: a bevel and a focus indicator |
| 362 | /// are answering different questions, and only one of them has to be |
| 363 | /// noticed from across a desk. |
| 364 | /// |
| 365 | /// The default is the measured consensus rather than a new opinion. Every |
| 366 | /// consumer had already written its own ring and all three chose at least |
| 367 | /// 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px, |
| 368 | /// goingson 2px on three rules and 3px on the one covering twelve |
| 369 | /// selectors. The design system was the only thing in the tree saying 1px. |
| 370 | pub focus_width: &'static str, |
| 371 | /// Prefix for emitted class names, without the leading dot. |
| 372 | pub class_prefix: &'static str, |
| 373 | |
| 374 | |
| 375 | |
| 376 | |
| 377 | Self |
| 378 | border_width: "1px", |
| 379 | focus_width: "2px", |
| 380 | class_prefix: "", |
| 381 | |
| 382 | |
| 383 | |
| 384 | |
| 385 | /// A string as CSS escapes, for a `content` value. |
| 386 | /// |
| 387 | /// `\u{25B2}` becomes `\25B2`. Emitted escaped rather than literally so the |
| 388 | /// stylesheet is ASCII whatever the description spells: a `content` string is |
| 389 | /// read by whatever encoding the consumer serves the file as, and a caret that |
| 390 | /// depends on that is a caret that works on one machine. |
| 391 | /// |
| 392 | /// Terminated by the closing quote at every site here. A CSS hex escape takes |
| 393 | /// up to six digits and ends at the first character that cannot be one, so an |
| 394 | /// escape followed by more text would need a space that these do not. |
| 395 | |
| 396 | text.chars.fold |
| 397 | let _ = write!; |
| 398 | out |
| 399 | |
| 400 | |
| 401 | |
| 402 | /// The CSS custom property holding a bevel's composition. |
| 403 | |
| 404 | |
| 405 | match bevel |
| 406 | Raised => "--bevel-raised", |
| 407 | Inset => "--bevel-inset", |
| 408 | |
| 409 | |
| 410 | |
| 411 | /// A `var()` reference to a fill intent, with the browser's own fallback where |
| 412 | /// the intent may be absent. |
| 413 | /// |
| 414 | /// The fallback is CSS syntax, not a decision made here. That is the whole |
| 415 | /// difference between this renderer and the other two. |
| 416 | |
| 417 | |
| 418 | match fill |
| 419 | Well => format!, |
| 420 | other => format!, |
| 421 | |
| 422 | |
| 423 | |
| 424 | /// The two-tone edge as a `box-shadow` value. |
| 425 | /// |
| 426 | /// Two inset shadows, one per corner pair: the light one offset down and |
| 427 | /// right so it lands on the top and left edges, the dark one the other way. |
| 428 | /// The same assignment `makeover-immediate` draws with polylines and |
| 429 | /// `makeover-tui` draws with box-drawing characters. |
| 430 | |
| 431 | |
| 432 | let = bevel.edges; |
| 433 | let w = opts.border_width; |
| 434 | format! |
| 435 | "inset {w} {w} 0 var(--{}), inset -{w} -{w} 0 var(--{})" |
| 436 | top_left.token, |
| 437 | bottom_right.token |
| 438 | ) |
| 439 | |
| 440 | |
| 441 | /// The custom properties both bevels resolve through. |
| 442 | /// |
| 443 | /// Emitted as properties rather than inlined into every rule because that is |
| 444 | /// what the apps already do, and because a consumer that wants the edge |
| 445 | /// without the fill reads the property directly. |
| 446 | |
| 447 | |
| 448 | let mut css = Stringnew; |
| 449 | for bevel in |
| 450 | let _ = writeln! |
| 451 | css, |
| 452 | " {}: {};" |
| 453 | bevel_var, |
| 454 | bevel_shadow |
| 455 | ); |
| 456 | |
| 457 | css.push_str; |
| 458 | css |
| 459 | |
| 460 | |
| 461 | /// The cast shadow of a surface that floats over the page. |
| 462 | /// |
| 463 | /// Composed here for the reason the bevel pair is: `makeover` derives the tone, |
| 464 | /// this crate owns the geometry, and neither has to know the other's numbers. |
| 465 | /// |
| 466 | /// **Only for a surface that overlays the page.** A menu, a toast, a popover, a |
| 467 | /// dropdown. A surface *in* the page takes `.raised` and its bevel, and a rule |
| 468 | /// that reaches for this on a card or a plate has renamed a literal rather than |
| 469 | /// replaced it. |
| 470 | /// |
| 471 | /// Two lengths rather than one, because a single blur reads as a smudge at |
| 472 | /// plate size and as a halo at menu size. The offset is small and downward: a |
| 473 | /// Platinum-era menu sits just off the page rather than hovering above it. |
| 474 | const ELEVATION_PROPERTY: &str = |
| 475 | " --elevation-overlay: 0 2px 4px var(--elevation), 0 8px 24px var(--elevation);\n"; |
| 476 | |
| 477 | /// The class name for a depth. |
| 478 | |
| 479 | |
| 480 | let name = match depth |
| 481 | Flat => return None, |
| 482 | Raised => "raised", |
| 483 | Well => "well", |
| 484 | Sunken => "sunken", |
| 485 | // A depth added to the description since this renderer was last |
| 486 | // built. No class, on the same footing as Flat: emitting a name |
| 487 | // whose rule body we cannot write would put a class in the markup |
| 488 | // that the stylesheet never defines. |
| 489 | _ => return None, |
| 490 | ; |
| 491 | Some |
| 492 | |
| 493 | |
| 494 | /// A prefixed class name. |
| 495 | /// |
| 496 | /// Public since 0.27.0, for the renderers that emit markup this crate does not. |
| 497 | /// A screen renderer writing `class="row"` has to prefix it the way the |
| 498 | /// stylesheet half does or a prefixed app gets rules matching everything except |
| 499 | /// the elements that renderer wrote, and the failure is invisible: the CSS |
| 500 | /// stays valid and one element is unstyled. quasi-webview carried a byte |
| 501 | /// identical copy of this function until it could call this one. |
| 502 | |
| 503 | |
| 504 | let mut out = Stringwith_capacity; |
| 505 | push_class; |
| 506 | out |
| 507 | |
| 508 | |
| 509 | /// A prefixed class name, written into a buffer the caller already has. |
| 510 | /// |
| 511 | /// The form the emitters use, and the reason it exists is [`escape_into`]'s: |
| 512 | /// every class on every element went through a `format!` before 0.40.0, |
| 513 | /// including the default case where the prefix is empty and the answer is the |
| 514 | /// argument. A described table row carried roughly eighty transient |
| 515 | /// allocations, and this and the escaper were most of them. |
| 516 | /// |
| 517 | /// [`class`] stays for callers holding a name rather than a buffer. |
| 518 | /// |
| 519 | /// [`escape_into`]: crate::form::escape_into |
| 520 | |
| 521 | out.push_str; |
| 522 | out.push_str; |
| 523 | |
| 524 | |
| 525 | /// The class an option of a selector carries, which is what the rules key off. |
| 526 | /// |
| 527 | /// Named for the option and not for the group: [`selector_rules`] styles the |
| 528 | /// thing that gets picked, so `Selector::Tabs` is `tab` and not `tabs`. The |
| 529 | /// distinction is not pedantry. quasi-webview spelled these `tabs`, `segmented` |
| 530 | /// and `option`, put `toggle` on the wrapping element rather than on the |
| 531 | /// buttons inside it, and every described selector in that renderer came out |
| 532 | /// with no depth, no focus ring and no chosen state, while the toggle group got |
| 533 | /// a bevel meant for its buttons. |
| 534 | /// |
| 535 | /// The chosen option additionally carries `chosen`, the same way a latched chip |
| 536 | /// carries `latched`. That name is this crate's too; there is no reason for a |
| 537 | /// caller to spell it, and [`selector_rules`] is where it is written down. |
| 538 | |
| 539 | |
| 540 | match selector |
| 541 | Tabs => "tab", |
| 542 | Segmented => "segment", |
| 543 | Toggle => "toggle", |
| 544 | |
| 545 | |
| 546 | |
| 547 | /// The fill and edge declarations for a depth, as a rule body. |
| 548 | /// |
| 549 | /// Empty for [`Depth::Flat`], which has neither and inherits what it sits on. |
| 550 | /// Callers lean on the emptiness to skip the rule rather than emit a class that |
| 551 | /// sets nothing: a class that sets no properties is a class that means "I |
| 552 | /// thought about this", which is what comments are for. |
| 553 | /// |
| 554 | /// The two halves are emitted independently because [`Depth::Sunken`] has a |
| 555 | /// fill and no bevel. Requiring both, which this did before makeover-layout |
| 556 | /// 0.3.0, silently dropped the fill for exactly that case. Independent does not |
| 557 | /// mean unpaired: both halves still come off one `Depth`, so they cannot |
| 558 | /// disagree about what the region is. |
| 559 | |
| 560 | |
| 561 | let mut css = Stringnew; |
| 562 | if let Some = depth.fill |
| 563 | let _ = writeln!; |
| 564 | |
| 565 | if let Some = depth.bevel |
| 566 | let _ = writeln!; |
| 567 | |
| 568 | css |
| 569 | |
| 570 | |
| 571 | /// One rule giving a selector a depth, or nothing when the depth declares |
| 572 | /// nothing. |
| 573 | |
| 574 | |
| 575 | let body = depth_declarations; |
| 576 | if body.is_empty |
| 577 | return Stringnew; |
| 578 | |
| 579 | format! |
| 580 | |
| 581 | |
| 582 | /// The media condition a hover rule has to sit inside, or `None` if hover is |
| 583 | /// unconditional. |
| 584 | /// |
| 585 | /// Two crates answer this and neither answer is made here. `makeover-touch` |
| 586 | /// owns *whether* hover exists at a density, and `makeover-geometry` owns how |
| 587 | /// that capability is spelled as a media condition. Asking both is what stops |
| 588 | /// this renderer minting a third opinion, which is what all three apps did: |
| 589 | /// goingson sniffed the user agent, Balanced Breakfast used `(hover: none)` |
| 590 | /// alone, and the MNW server had no gate at all. |
| 591 | /// |
| 592 | /// [`SizeClass`] is required by [`Affordance::available`] and ignored by this |
| 593 | /// member, which reports as much through `reads_size`. Passing Compact is not |
| 594 | /// a claim about width; the test below pins that every class agrees. |
| 595 | |
| 596 | if Hover.available |
| 597 | // A fingertip grew a hover state. Nothing to gate, and this renderer |
| 598 | // should not invent a reason to gate anyway. |
| 599 | None |
| 600 | else |
| 601 | Some |
| 602 | |
| 603 | |
| 604 | |
| 605 | /// Put a rule inside a media query, or leave it alone. |
| 606 | |
| 607 | let Some = condition else |
| 608 | return rule.to_string; |
| 609 | ; |
| 610 | let mut css = format!; |
| 611 | for line in rule.lines |
| 612 | // Blank lines stay blank. Indenting one leaves trailing whitespace, |
| 613 | // which is the sort of thing a formatter later reverts and calls a diff. |
| 614 | if line.is_empty |
| 615 | css.push; |
| 616 | else |
| 617 | let _ = writeln!; |
| 618 | |
| 619 | |
| 620 | css.push_str; |
| 621 | css |
| 622 | |
| 623 | |
| 624 | /// The keyboard focus ring, placed by the depth it lands on. |
| 625 | /// |
| 626 | /// This is the webview's **focus ring** and nothing more. **Reach** and |
| 627 | /// **focus** are both the browser's — the document decides what is reachable |
| 628 | /// and `:focus-visible` decides which reached thing wears the ring — and no |
| 629 | /// description states either. The three terms are defined once in |
| 630 | /// `makeover_layout`'s crate header, "Reach, focus and the focus ring". |
| 631 | /// |
| 632 | /// One ring for the whole system, because a focus ring's job is to be |
| 633 | /// recognised and three apps having three of them is the failure. What varies |
| 634 | /// is where it sits, and that comes off [`Depth`] rather than off a per- |
| 635 | /// component choice: a well takes the ring inside its own edge, and anything |
| 636 | /// standing proud of the page takes it outside. |
| 637 | /// |
| 638 | /// `outline` rather than the composed `box-shadow` the invalid-field ring at |
| 639 | /// [`field_rules`] uses, and deliberately the one place the two rings are built |
| 640 | /// differently. A `box-shadow` ring has to restate the bevel beside it, because |
| 641 | /// `box-shadow` is not additive and a lone ring silently drops the well out |
| 642 | /// from under the element. That restatement is a second copy of the depth, |
| 643 | /// living in a different function from the first, and it is exactly the |
| 644 | /// duplication `Depth` exists to prevent. `outline` occupies its own property, |
| 645 | /// so the bevel survives untouched and there is nothing to keep in agreement. |
| 646 | /// They render the same: both are a flush ring one border-width wide. |
| 647 | |
| 648 | |
| 649 | let w = opts.focus_width; |
| 650 | // Same magnitude either way, and only the sign comes off the depth. Both |
| 651 | // values are what the consumers had already converged on independently: |
| 652 | // 2px out is what all three wrote, and 2px in is the MNW server's own |
| 653 | // answer for the one inset ring it had. |
| 654 | let offset = match depth.bevel |
| 655 | // Inside the well, clear of its edge rather than painted over it. |
| 656 | Some => format!, |
| 657 | // Raised, or no edge at all. Outside, standing off by its own width. |
| 658 | _ => w.to_string, |
| 659 | ; |
| 660 | // The token by name. It is `makeover`'s, derived from the action colour, |
| 661 | // and reaching it through a description member was a second path to the |
| 662 | // same variable for as long as one existed. |
| 663 | format! |
| 664 | ".{selector}:focus-visible {{\n outline: {w} solid var(--focus-ring);\n outline-offset: {offset};\n}}\n" |
| 665 | |
| 666 | |
| 667 | |
| 668 | /// Present, visible, and not answering. |
| 669 | /// |
| 670 | /// Matches the ARIA attribute as well as the pseudo-class, because `:disabled` |
| 671 | /// only matches form elements and half the things this crate emits are not |
| 672 | /// one: a `div` carrying `.chip` or `.tab` can never be `:disabled`. Keying on |
| 673 | /// the accessible state is the pattern [`field_rules`] already establishes for |
| 674 | /// `aria-invalid`, on the reasoning that one fact read by both the styling and |
| 675 | /// the accessibility tree cannot drift from itself. |
| 676 | /// |
| 677 | /// The rest depth is re-asserted rather than assumed, because this rule has to |
| 678 | /// beat the hover and pressed rules above it. It does that on source order at |
| 679 | /// equal specificity, not by out-specifying them: every rule this function's |
| 680 | /// caller emits is (0,2,0), and adding a `:not(:disabled)` anywhere would raise |
| 681 | /// one of them and have to be unpicked when this output moves inside its own |
| 682 | /// cascade layer. |
| 683 | |
| 684 | |
| 685 | format! |
| 686 | ".{selector}:disabled,\n.{selector}[aria-disabled=\"true\"] {{\n{} color: var(--{});\n cursor: not-allowed;\n}}\n" |
| 687 | depth_declarations, |
| 688 | Disabled.token |
| 689 | ) |
| 690 | |
| 691 | |
| 692 | /// Every state a selector that answers a click implies: hover, pressed, focus |
| 693 | /// and disabled, in that order. |
| 694 | /// |
| 695 | /// Order is the whole cascade mechanism here. All four selectors are |
| 696 | /// specificity (0,2,0), so disabled wins over hover and pressed by coming last |
| 697 | /// and by nothing else. |
| 698 | /// |
| 699 | /// Pressed emits [`Depth::pressed`] in full, fill and edge together. Emitting |
| 700 | /// only the edge is what left goingson hand-writing `background: |
| 701 | /// var(--surface-sunken)` on three separate rules, and a fill that does not |
| 702 | /// travel with its edge is precisely the disagreement `Depth` exists to make |
| 703 | /// unrepresentable. So the pressed fill comes from the description |
| 704 | /// (`--surface-well`) rather than from whatever each app reached for. |
| 705 | /// |
| 706 | /// Hover has no member in the description and is renderer policy: a terminal |
| 707 | /// and an immediate-mode painter have no hover to express. It resolves against |
| 708 | /// `--hover-surface`, which `makeover` already derives and which nothing |
| 709 | /// consumed until now. What it *is* gated on is capability, via |
| 710 | /// [`hover_condition`]. Before that gate existed the apps each wrote their own: |
| 711 | /// goingson's section 60 exists solely to take back the hover state this |
| 712 | /// function had just handed it, by out-specifying a rule it does not own. |
| 713 | /// |
| 714 | /// `depth` is the selector's **rest** depth, used to place the focus ring and |
| 715 | /// to restore the surface under a disabled control. The pressed rule keeps |
| 716 | /// inverting from [`Depth::Raised`] regardless, which is what every caller got |
| 717 | /// before this parameter existed: a tab's unchosen depth is |
| 718 | /// [`Depth::Sunken`], and `Sunken.pressed()` is `Sunken`, so deriving the press |
| 719 | /// from the rest depth would leave a tab with no press at all. |
| 720 | |
| 721 | |
| 722 | let mut css = gated |
| 723 | hover_condition, |
| 724 | &format!, |
| 725 | ; |
| 726 | css.push_str |
| 727 | &format!, |
| 728 | Raised.pressed, |
| 729 | ; |
| 730 | css.push_str; |
| 731 | css.push_str; |
| 732 | css |
| 733 | |
| 734 | |
| 735 | /// One rule per depth: its fill and its edge, together. |
| 736 | /// |
| 737 | /// A depth and nothing else. `.raised` says a surface sits on what is behind |
| 738 | /// it, which is a statement about the shape and not about what happens when a |
| 739 | /// pointer arrives, so it emits no hover, press, focus or disabled rule. The |
| 740 | /// named surfaces are where interaction lives: `.card` and `.button` are the |
| 741 | /// same depth *and* controls, and they get their states from |
| 742 | /// [`surface_rules`]. |
| 743 | /// |
| 744 | /// This class carried the interactive set until 0.17.0, which left the |
| 745 | /// vocabulary with no raised surface that is merely an object. Consumers that |
| 746 | /// needed one took a control class and cancelled half of it instead: sixteen |
| 747 | /// elements in goingson across three `.card--*` variants, each re-asserting the |
| 748 | /// resting fill and bevel on `:hover` and `:active`. Nothing anywhere used |
| 749 | /// `.raised` itself, so the states were unasked-for in every consumer at once. |
| 750 | |
| 751 | |
| 752 | let mut css = Stringnew; |
| 753 | for depth in |
| 754 | let Some = depth_class else |
| 755 | continue; |
| 756 | ; |
| 757 | css.push_str; |
| 758 | |
| 759 | css |
| 760 | |
| 761 | |
| 762 | /// The three surfaces that are a depth with a name. |
| 763 | /// |
| 764 | /// `button` and `card` are both [`Depth::Raised`], and `field` is a |
| 765 | /// [`Depth::Well`] because that is the reading `Depth`'s own documentation |
| 766 | /// gives a text field. Their bodies come out identical by construction rather |
| 767 | /// than by hand: three hand-written copies in goingson's stylesheet is what |
| 768 | /// phase A deletes, and generating them from one call is what stops them |
| 769 | /// drifting apart again. |
| 770 | |
| 771 | let mut css = Stringnew; |
| 772 | for name in |
| 773 | let c = class; |
| 774 | css.push_str; |
| 775 | css.push_str; |
| 776 | |
| 777 | |
| 778 | let field = class; |
| 779 | css.push_str; |
| 780 | |
| 781 | // A field takes focus and refuses input like everything else here, and got |
| 782 | // neither until now, which is why all three apps hand-write a focus ring |
| 783 | // for it and no two of them match. No hover or pressed: a text field does |
| 784 | // not light up under the pointer and does not invert when clicked, so the |
| 785 | // two states `interactive_rules` would add are the two it does not have. |
| 786 | css.push_str; |
| 787 | css.push_str; |
| 788 | |
| 789 | // Keyed on the ARIA attribute rather than on a class, so the visual state |
| 790 | // and the accessible state cannot drift apart: there is one fact and both |
| 791 | // read it. goingson already drove its invalid styling this way and was |
| 792 | // right to; the `.invalid` class this emitted before 0.5.0 was a second |
| 793 | // place to forget. |
| 794 | // |
| 795 | // The ring composes *after* the bevel rather than replacing it. box-shadow |
| 796 | // is not additive, so a lone ring silently dropped the well out from under |
| 797 | // an invalid field. Flat and unlit: this edge is saying "wrong", and |
| 798 | // lighting one side would have it say "raised" at the same time. |
| 799 | let _ = writeln! |
| 800 | css, |
| 801 | ".{field}[aria-invalid=\"true\"] {{\n box-shadow: var({}), 0 0 0 {} var(--danger);\n}}" |
| 802 | bevel_var, |
| 803 | opts.border_width |
| 804 | ); |
| 805 | css |
| 806 | |
| 807 | |
| 808 | /// Badges and chips. |
| 809 | /// |
| 810 | /// The one place phase A changes how goingson looks rather than only where its |
| 811 | /// rules live. [`Token::Badge`] is [`Depth::Flat`], so a badge emits no fill |
| 812 | /// and no edge at all, where goingson ships `.tag, .badge` as a single rule |
| 813 | /// carrying the raised bevel. Splitting that means reading every call site to |
| 814 | /// decide which of the two it always was. |
| 815 | /// |
| 816 | /// What a badge does carry is a [`Tone`], the intent family it shares with |
| 817 | /// notices and nothing else. Neutral is the bare class rather than a variant, |
| 818 | /// because it is the absence of a status and not a status called "none". |
| 819 | /// Text that goes somewhere. |
| 820 | /// |
| 821 | /// The one inline control, and the vocabulary had no word for it until a |
| 822 | /// description layer needed one. A table cell has carried `cell-link` since |
| 823 | /// 0.14.0's part list, deliberately unruled because the cell's own rule covers |
| 824 | /// it; what was missing is the same thing outside a table, which is what a |
| 825 | /// described run holds when a sentence contains a link. |
| 826 | /// |
| 827 | /// Colour and underline only. Whether a link is inline in a sentence or sitting |
| 828 | /// on its own line is the app's layout, and how much room it takes is |
| 829 | /// `makeover-geometry`'s. What is here is the pair of signals that say "this |
| 830 | /// goes somewhere" and nothing that says where it sits. |
| 831 | /// |
| 832 | /// The visited arm is deliberately absent. A link inside an app points at the |
| 833 | /// app's own screens, which the user is expected to have been to, so painting |
| 834 | /// them differently marks almost everything and distinguishes nothing. |
| 835 | |
| 836 | let mut css = Stringnew; |
| 837 | let link = class; |
| 838 | |
| 839 | let _ = writeln! |
| 840 | css, |
| 841 | ".{link} {{\n color: var(--action);\n \ |
| 842 | text-decoration: underline;\n}}" |
| 843 | ; |
| 844 | // The hover step is the same one every other control takes, and it is a |
| 845 | // colour rather than a surface: a link has no box to raise. |
| 846 | let _ = writeln! |
| 847 | css, |
| 848 | "@media (hover: hover) and (pointer: fine) {{\n .{link}:hover \ |
| 849 | {{\n color: var(--action-hover);\n }}\n}}" |
| 850 | ; |
| 851 | let _ = writeln! |
| 852 | css, |
| 853 | ".{link}:focus-visible {{\n outline: {} solid var(--focus-ring);\n \ |
| 854 | outline-offset: 2px;\n}}" |
| 855 | opts.focus_width |
| 856 | ); |
| 857 | // A link is often a `<button>` rather than an `<a>`: a renderer picks the |
| 858 | // element from the method, so a link that writes is a button that has to |
| 859 | // stop looking like one. |
| 860 | let _ = writeln! |
| 861 | css, |
| 862 | "button.{link} {{\n background: none;\n border: none;\n \ |
| 863 | padding: 0;\n font: inherit;\n cursor: pointer;\n}}" |
| 864 | ; |
| 865 | css |
| 866 | |
| 867 | |
| 868 | |
| 869 | let mut css = Stringnew; |
| 870 | |
| 871 | // No `depth_rule` call here, deliberately: `Token::Badge.depth(_)` is Flat, |
| 872 | // and a label with an edge says it can be pressed. |
| 873 | let badge = class; |
| 874 | let _ = writeln! |
| 875 | css, |
| 876 | ".{badge} {{\n color: var(--{});\n}}" |
| 877 | Neutral.token |
| 878 | ); |
| 879 | for tone in |
| 880 | let _ = writeln! |
| 881 | css, |
| 882 | ".{badge}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 883 | tone.token |
| 884 | ); |
| 885 | |
| 886 | |
| 887 | // A button carries the four tones a badge does. It had none, on the reading |
| 888 | // that a control's colour is its surface rather than its text, and that |
| 889 | // reading has one hole big enough to matter: the button that destroys |
| 890 | // something. Every consumer had written that rule itself, and a description |
| 891 | // that says `Tone::Danger` on an act had nowhere for it to land. |
| 892 | // |
| 893 | // Colour and not a fill, matching the badge. A red surface is a decision |
| 894 | // about emphasis that belongs to an app's own layer, and two of them |
| 895 | // fighting is worse than neither. |
| 896 | let button = class; |
| 897 | for tone in |
| 898 | let _ = writeln! |
| 899 | css, |
| 900 | ".{button}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 901 | tone.token |
| 902 | ); |
| 903 | |
| 904 | |
| 905 | // A chip holds itself down, which is `Depth::pressed` arrived at |
| 906 | // independently by two apps. `removable` is a remove affordance, so it is |
| 907 | // markup and waits for phase B. |
| 908 | let chip = class; |
| 909 | let unlatched = Chip ; |
| 910 | css.push_str; |
| 911 | css.push_str; |
| 912 | css.push_str |
| 913 | &format!, |
| 914 | unlatched.depth, |
| 915 | ; |
| 916 | css |
| 917 | |
| 918 | |
| 919 | /// The three selectors, each named by what it picks. |
| 920 | /// |
| 921 | /// A tab comes *forward* to join the pane it opens, which is why |
| 922 | /// [`Selector::Tabs`] chooses [`Depth::Raised`] where a segment and a toggle |
| 923 | /// are held in. That is the folder semantic, and it is the whole reason the |
| 924 | /// three are not one member with a flag. |
| 925 | /// |
| 926 | /// [`Selector::abutting`] is not emitted: whether the options touch is |
| 927 | /// spacing, and spacing is `makeover-geometry`'s question to answer. |
| 928 | /// |
| 929 | /// Both states emit as of makeover-layout 0.3.0. Before it the description |
| 930 | /// named only the chosen option, so an unchosen one fell through to |
| 931 | /// [`Depth::Flat`] and nothing was drawn for it, which left goingson's tab |
| 932 | /// strip hand-writing the recess that makes its chosen tab read as forward. |
| 933 | |
| 934 | let mut css = Stringnew; |
| 935 | for selector in |
| 936 | let c = class; |
| 937 | css.push_str; |
| 938 | css.push_str; |
| 939 | css.push_str; |
| 940 | |
| 941 | css |
| 942 | |
| 943 | |
| 944 | /// The parts of a list row. |
| 945 | /// |
| 946 | /// The list is written out rather than derived because `RowPart` is |
| 947 | /// `#[non_exhaustive]` as of makeover-layout 0.9.0, so there is nothing to |
| 948 | /// iterate. A member added upstream emits no rule until it is named here, which |
| 949 | /// is the trade `non_exhaustive` makes: a silent gap instead of a build break. |
| 950 | /// [`part_class`] carries the same list and the same obligation. |
| 951 | |
| 952 | let mut css = Stringnew; |
| 953 | |
| 954 | // The container the rows sit in. Three zeroes and a keyword, all of them |
| 955 | // undoing a browser default the description never asked for: a described |
| 956 | // list of SSH keys is not a bulleted list, and it rendered as one because |
| 957 | // nothing here said otherwise. Not a size: there is no magnitude in it, |
| 958 | // which is the line this crate holds. |
| 959 | let _ = writeln! |
| 960 | css, |
| 961 | ".{} {{\n list-style: none;\n margin: 0;\n padding: 0;\n}}" |
| 962 | class |
| 963 | ); |
| 964 | |
| 965 | for part in |
| 966 | Primary, |
| 967 | Secondary, |
| 968 | Meta, |
| 969 | Actions, |
| 970 | Tokens, |
| 971 | Proportion, |
| 972 | ] |
| 973 | let c = class; |
| 974 | |
| 975 | // Actions carry controls rather than text, and `RowPart::intent` says |
| 976 | // so by returning the same intent inheriting already gives. Pinning it |
| 977 | // would be louder than saying nothing. Tokens answer alike, for their |
| 978 | // own reason: each token carries its own tone, and a colour on the |
| 979 | // strip would fight the things sitting in it. A proportion is the same |
| 980 | // case again: the meter inside carries the tone. |
| 981 | if !matches! |
| 982 | part, |
| 983 | Actions | Tokens | Proportion |
| 984 | |
| 985 | let _ = writeln!; |
| 986 | |
| 987 | |
| 988 | // A row's actions are shown at rest. `RowPart::revealed_on_hover` said |
| 989 | // otherwise and was not honoured here from 0.23.0; makeover-layout |
| 990 | // 0.13.0 retired the method, so there is no longer a description saying |
| 991 | // one thing and a renderer doing another. |
| 992 | // |
| 993 | // The rule was `opacity: 0` gated to pointer devices, revealed on |
| 994 | // `:hover` and on `:focus-within`. Each escape it needed was a report |
| 995 | // that hiding was wrong for somebody: `focus-within` because tabbing |
| 996 | // could never reach an action; the gate because a fingertip had no way |
| 997 | // to unhide, which both webview apps had already hand-written |
| 998 | // `opacity: 1` to undo. What was left was a control hidden from |
| 999 | // exactly one group: people using a pointer, who are also the group |
| 1000 | // scanning a list to find out what can be done to a row. |
| 1001 | // |
| 1002 | // A settings screen is where that reads worst: the whole reason to be |
| 1003 | // on it is to remove a key, and the button doing so was invisible |
| 1004 | // until pointed at. A table cell's actions were never hidden, so the |
| 1005 | // two arrangements now agree. |
| 1006 | |
| 1007 | |
| 1008 | // A part that may take two lines. `Flow::Tight` gets no rule: one line is |
| 1009 | // what a run already does, and restating it here would put a declaration on |
| 1010 | // every part in every row to say nothing. |
| 1011 | // |
| 1012 | // This is the shape both webview apps had already written by hand and |
| 1013 | // commented -- Balanced Breakfast on a feed row's title, goingson on a |
| 1014 | // problem's body -- which is the whole argument for the description |
| 1015 | // carrying it. `-webkit-` prefixed and unprefixed together: the prefixed |
| 1016 | // trio is what every engine actually implements, and `line-clamp` is the |
| 1017 | // standard property landing behind it. |
| 1018 | let _ = writeln! |
| 1019 | css, |
| 1020 | ".{} {{\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: {lines};\n line-clamp: {lines};\n overflow: hidden;\n}}" |
| 1021 | class, |
| 1022 | lines = Relaxed.lines |
| 1023 | ); |
| 1024 | |
| 1025 | css |
| 1026 | |
| 1027 | |
| 1028 | /// A row of things that share their space, and what each fallback gets here. |
| 1029 | /// |
| 1030 | /// Ruling: wiki `layout-room-and-fallback`, Max 2026-08-18. The bug it answers |
| 1031 | /// is goingson's `styles.css:702`, which pinned every `.page-header` over the |
| 1032 | /// pill strip with `position: absolute` and so took the toolbar out of flow: |
| 1033 | /// zero width contributed to the row it shared, nothing able to collide with |
| 1034 | /// it, and therefore nothing preventing the collision. Rule 1 of the ruling is |
| 1035 | /// that every described member is in flow, and these rules are how that is kept |
| 1036 | /// rather than asked for. |
| 1037 | /// |
| 1038 | /// # The floor, which is most of the fix |
| 1039 | /// |
| 1040 | /// `.run > *` gets `min-width: min-content`. That is the derived minimum the |
| 1041 | /// ruling asks for, in this renderer's own unit and stated by the browser |
| 1042 | /// rather than by anybody: a member cannot be squeezed narrower than what is |
| 1043 | /// in it, so members in one flow push each other instead of overlapping. It |
| 1044 | /// costs no query and no number, and it is what fixes all four measured widths |
| 1045 | /// whichever fallback the group declared. |
| 1046 | /// |
| 1047 | /// # What each fallback gets, exactly |
| 1048 | /// |
| 1049 | /// [`Fallback::Wrap`] is `flex-wrap: wrap`, which is exact. The browser wraps |
| 1050 | /// the run when the members no longer fit, deciding that from their own |
| 1051 | /// intrinsic widths, which is the derived minimum doing the whole job. |
| 1052 | /// |
| 1053 | /// [`Fallback::Stack`] is wrap plus `flex: 1 1 max-content` on the members, so |
| 1054 | /// a member that cannot sit beside its sibling takes a line of its own and |
| 1055 | /// fills it. For the two-member run this was ruled on -- a tab strip and a |
| 1056 | /// band -- that is precisely "a row becomes a column". |
| 1057 | /// |
| 1058 | /// [`Fallback::Shed`] and [`Fallback::Menu`] get wrap, and this renderer is |
| 1059 | /// honouring less than the description says. **CSS cannot express either one |
| 1060 | /// without breaking the ruling's own first constraint.** Both need to know that |
| 1061 | /// the run is out of room in order to take a member out of it, a container |
| 1062 | /// query is the only construct that can ask, and `@container` compares against |
| 1063 | /// a `<length>` -- there is no `@container (inline-size < min-content)`. So |
| 1064 | /// every honest spelling of Shed here needs an authored breakpoint, which is |
| 1065 | /// the thing the ruling exists to forbid, and the dishonest ones are worse: a |
| 1066 | /// clamped height clips by document order rather than by [`Priority`], and |
| 1067 | /// `display: none` under a viewport `@media` is the `nth-child(n+5)` bug the |
| 1068 | /// vocabulary replaced. |
| 1069 | /// |
| 1070 | /// Wrapping is the right thing to do instead. It keeps every member reachable, |
| 1071 | /// which is the property that was actually broken -- goingson's new-contact |
| 1072 | /// button left the viewport entirely at 560 -- and it keeps rule 1. A renderer |
| 1073 | /// answering with less than was described is precedented and deliberate here: |
| 1074 | /// [`makeover_layout::Region::Columns`] says a terminal stacking a board's |
| 1075 | /// columns is honouring the description rather than degrading it. |
| 1076 | /// |
| 1077 | /// The real mechanism needs the shed members to have somewhere to go, which is |
| 1078 | /// markup and belongs to quasi-webview: an overflow control is a member of the |
| 1079 | /// run, and the description does not yet say that a member *is* one. Filed |
| 1080 | /// rather than guessed at. |
| 1081 | |
| 1082 | let run = class; |
| 1083 | let mut css = Stringnew; |
| 1084 | |
| 1085 | // `flex-wrap: nowrap` is stated rather than left to the default, because |
| 1086 | // the fallbacks below are read as overrides of this line and a reader |
| 1087 | // should not have to know which way flexbox leans to see that. |
| 1088 | // |
| 1089 | // No gap. Spacing between members is the app's, the same way this crate |
| 1090 | // states no margins anywhere else; a gap here would be a size, and the one |
| 1091 | // hardcoded size in the mechanism is makeover-geometry's contact patch. |
| 1092 | let _ = writeln! |
| 1093 | css, |
| 1094 | ".{run} {{\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}}" |
| 1095 | ; |
| 1096 | |
| 1097 | // The derived minimum, and the whole reason a member can no longer be |
| 1098 | // overlapped. `min-width: auto` is flexbox's default for a flex item and is |
| 1099 | // *not* the same thing: auto lets an item be compressed below its content |
| 1100 | // in a nowrap run, which is how a toolbar ends up drawn over a tab strip |
| 1101 | // even without anything leaving the flow. |
| 1102 | let _ = writeln!; |
| 1103 | |
| 1104 | for fallback in |
| 1105 | Wrap, |
| 1106 | Stack, |
| 1107 | Shed, |
| 1108 | Menu, |
| 1109 | ] |
| 1110 | let name = fallback_class; |
| 1111 | let c = class; |
| 1112 | let _ = writeln!; |
| 1113 | if matches! |
| 1114 | let _ = writeln!; |
| 1115 | |
| 1116 | |
| 1117 | |
| 1118 | css |
| 1119 | |
| 1120 | |
| 1121 | /// Every class [`fallback_class`] can return, plus the run itself. |
| 1122 | /// |
| 1123 | /// [`ROW_PART_CLASSES`](crate::list::ROW_PART_CLASSES)'s reasoning and the same |
| 1124 | /// obligation: a `match` over a `#[non_exhaustive]` enum cannot be enumerated |
| 1125 | /// from outside, so the list sits beside it and a test holds the two together. |
| 1126 | /// `run` is in it because it is emitted in its own right rather than only as a |
| 1127 | /// fallback's fallback. |
| 1128 | pub const RUN_CLASSES: & = &; |
| 1129 | |
| 1130 | /// The class a run carries for what it does when it is tight. |
| 1131 | /// |
| 1132 | /// A run always carries `.run` as well, so an unrecognised fallback -- the enum |
| 1133 | /// is `#[non_exhaustive]` -- lands as a plain nowrap row with the min-content |
| 1134 | /// floor still under it. That is the safe failure: every member in flow and |
| 1135 | /// none overlapped, which is the property, with only the rearrangement missing. |
| 1136 | |
| 1137 | |
| 1138 | match fallback |
| 1139 | Wrap => "run-wrap", |
| 1140 | Stack => "run-stack", |
| 1141 | Shed => "run-shed", |
| 1142 | Menu => "run-menu", |
| 1143 | _ => "run", |
| 1144 | |
| 1145 | |
| 1146 | |
| 1147 | /// The progress trough these rules fill. |
| 1148 | /// |
| 1149 | /// This was renderer-local chrome with nothing behind it until makeover-layout |
| 1150 | /// 0.10.0, which is the unusual order: the tones below were emitted for every |
| 1151 | /// bar in the tree while the only way to describe one was to concatenate the |
| 1152 | /// numbers into a heading. `Meter` is the word that arrived late, and |
| 1153 | /// [`meter::meter_html`](crate::meter::meter_html) is what now fills these. |
| 1154 | /// |
| 1155 | /// The rules stay a superset of what a description can ask for. An app drawing |
| 1156 | /// its own bar keeps these classes, which is what the four goingson grew |
| 1157 | /// independently were adopted onto. |
| 1158 | /// |
| 1159 | /// The trough is a [`Depth::Well`], the same reading a text field gets: |
| 1160 | /// something with its content down inside it. |
| 1161 | |
| 1162 | let progress = class; |
| 1163 | // `progress-fill` rather than a bare `fill`: an unprefixed build claims |
| 1164 | // these names in the app's own stylesheet, and `.fill` is grabby enough to |
| 1165 | // catch things that have nothing to do with progress. goingson already |
| 1166 | // calls it `.progress-fill`, so this is also the name that deletes. |
| 1167 | let fill = class; |
| 1168 | let mut css = depth_rule; |
| 1169 | |
| 1170 | // The untoned bar is `--action`, not [`Tone::Neutral`]. That is the one |
| 1171 | // place this differs from the badge rules, and deliberately: a badge with |
| 1172 | // no status is a muted label, while a bar with no status is still |
| 1173 | // reporting progress, and `content-muted` would read as disabled. |
| 1174 | let _ = writeln! |
| 1175 | css, |
| 1176 | ".{progress} > .{fill} {{\n background: var(--action);\n}}" |
| 1177 | ; |
| 1178 | |
| 1179 | // A bar can be saying something, same as a badge: goingson colours subtask |
| 1180 | // progress as success and an over-estimate as danger, which is real |
| 1181 | // information rather than decoration. Emitting the tones is what lets that |
| 1182 | // survive adoption instead of staying hand-written. |
| 1183 | for tone in |
| 1184 | let _ = writeln! |
| 1185 | css, |
| 1186 | ".{progress} > .{fill}[data-tone=\"{0}\"] {{\n background: var(--{0});\n}}" |
| 1187 | tone.token |
| 1188 | ); |
| 1189 | |
| 1190 | css |
| 1191 | |
| 1192 | |
| 1193 | /// A strip of figures, and the two spans inside each one. |
| 1194 | /// |
| 1195 | /// Colour only, which is the deferral rule applied to a component that badly |
| 1196 | /// wants to break it. A figure reads as a figure because the value is set large |
| 1197 | /// over a small caption, and that is a size: `makeover-geometry` answers how |
| 1198 | /// much space and this crate answers what the thing is. Emitting `font-size` |
| 1199 | /// here would be this crate naming a value, which is the one thing it is defined |
| 1200 | /// by not doing, and `progress_rules` is the precedent — it emits the tones and |
| 1201 | /// never the width, because the width is not its to know. |
| 1202 | /// |
| 1203 | /// So the arrangement and the type scale are the app's, and what is generated is |
| 1204 | /// the part an app cannot get right by itself: which of the two spans carries |
| 1205 | /// the tone. |
| 1206 | |
| 1207 | let figure = class; |
| 1208 | let value = class; |
| 1209 | let caption = class; |
| 1210 | let change = class; |
| 1211 | let mut css = Stringnew; |
| 1212 | |
| 1213 | let _ = writeln! |
| 1214 | css, |
| 1215 | ".{figure} > .{value} {{\n color: var(--{});\n}}" |
| 1216 | Neutral.token |
| 1217 | ); |
| 1218 | let _ = writeln! |
| 1219 | css, |
| 1220 | ".{figure} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1221 | ; |
| 1222 | let _ = writeln! |
| 1223 | css, |
| 1224 | ".{figure} > .{change} {{\n color: var(--content-muted);\n}}" |
| 1225 | ; |
| 1226 | |
| 1227 | // A toned figure tones one part and never the caption. The caption is the |
| 1228 | // noun and stays muted. |
| 1229 | // |
| 1230 | // Which part depends on whether there is a change, and that is the whole of |
| 1231 | // what 0.13.0 changed here. A figure with a delta is an ordinary number that |
| 1232 | // has moved in a direction worth reading, so the delta takes the colour and |
| 1233 | // the number stays plain; a figure without one has nowhere else to put it. |
| 1234 | // `:has` is what lets one attribute mean both, and the alternative was the |
| 1235 | // emitter deciding by writing the attribute onto a different element, which |
| 1236 | // leaves two elements able to disagree about a figure's one meaning. |
| 1237 | for tone in |
| 1238 | let _ = writeln! |
| 1239 | css, |
| 1240 | ".{figure}[data-tone=\"{0}\"] > .{change} {{\n color: var(--{0});\n}}" |
| 1241 | tone.token |
| 1242 | ); |
| 1243 | let _ = writeln! |
| 1244 | css, |
| 1245 | ".{figure}[data-tone=\"{0}\"]:not(:has(> .{change})) > .{value} \ |
| 1246 | {{\n color: var(--{0});\n}}" |
| 1247 | tone.token |
| 1248 | ); |
| 1249 | |
| 1250 | css |
| 1251 | |
| 1252 | |
| 1253 | /// A picture, its frame and its caption. |
| 1254 | /// |
| 1255 | /// `makeover_layout::Image` arrived at 0.21.0, found by trying to describe MNW's |
| 1256 | /// carousel and discovering nothing named a picture. |
| 1257 | /// |
| 1258 | /// # The frame is a border, and this is the one place a bevel is wrong |
| 1259 | /// |
| 1260 | /// 0.36.0 emitted [`Depth::Raised`] here through [`depth_rule`], the same call |
| 1261 | /// `button` and `card` make. It was wrong, and MNW's landing page is where it |
| 1262 | /// showed: **the frames had no visible edge at all.** |
| 1263 | /// |
| 1264 | /// `Depth::Raised`'s edge is `--bevel-raised`, which is an *inset* shadow — a |
| 1265 | /// 1px light run at the top-left and a dark one at the bottom-right, drawn |
| 1266 | /// **inside** the element's box. On a button or a card that box is a surface |
| 1267 | /// this crate owns, so an inset edge reads as the surface catching the light. |
| 1268 | /// On a picture it is drawn on top of the picture, over whatever pixels the |
| 1269 | /// image happens to have at its border. MNW's screenshots are light-on-light |
| 1270 | /// parchment, so the light half landed on a light image and the frame |
| 1271 | /// disappeared. |
| 1272 | /// |
| 1273 | /// **You cannot bevel a surface you do not own.** A picture's content is the |
| 1274 | /// app's, arrives at request time, and can be any colour, so its edge has to |
| 1275 | /// sit *outside* the content rather than on it. That is a border. |
| 1276 | /// |
| 1277 | /// The fill stays, and it is not decoration: it is what shows through a |
| 1278 | /// transparent PNG and what stands in the frame's place while the image is |
| 1279 | /// still loading. |
| 1280 | /// |
| 1281 | /// This is a real limit on [`Depth`] rather than a special case. Every other |
| 1282 | /// consumer of a depth draws its own surface; a picture is the first member |
| 1283 | /// whose surface belongs to someone else. |
| 1284 | /// |
| 1285 | /// # No size |
| 1286 | /// |
| 1287 | /// `width: 100%` and nothing else. How large a picture is depends on the box it |
| 1288 | /// was put in, which is the app's arrangement and `makeover-geometry`'s scales, |
| 1289 | /// and a renderer that picked one would be answering for every consumer at |
| 1290 | /// once. This is where `figure_rules` landed for the same reason. |
| 1291 | |
| 1292 | let picture = class; |
| 1293 | let img = class; |
| 1294 | let caption = class; |
| 1295 | let mut css = Stringnew; |
| 1296 | |
| 1297 | // Block, or an inline image sits on the text baseline and carries a |
| 1298 | // descender's worth of space under it that no app ever wants and every app |
| 1299 | // deletes by hand. The border is the frame; see the type docs for why it is |
| 1300 | // not the bevel every other surface here gets. |
| 1301 | let _ = writeln! |
| 1302 | css, |
| 1303 | ".{img} {{\n display: block;\n width: 100%;\n height: auto;\n \ |
| 1304 | background: var(--{});\n border: {} solid var(--border);\n}}" |
| 1305 | Raised.token, |
| 1306 | opts.border_width |
| 1307 | ); |
| 1308 | |
| 1309 | // The two fits that need a rule. `Fit::Natural` emits no attribute at all, |
| 1310 | // so it is the bare rule above and needs nothing here. |
| 1311 | let _ = writeln! |
| 1312 | css, |
| 1313 | ".{img}[data-fit=\"cover\"] {{\n height: 100%;\n object-fit: cover;\n}}" |
| 1314 | ; |
| 1315 | let _ = writeln! |
| 1316 | css, |
| 1317 | ".{img}[data-fit=\"contain\"] {{\n height: 100%;\n object-fit: contain;\n}}" |
| 1318 | ; |
| 1319 | |
| 1320 | // A caption reads back one step, which is `figure-caption`'s answer and the |
| 1321 | // same claim: it says what the thing above it is, and it is not the thing. |
| 1322 | let _ = writeln! |
| 1323 | css, |
| 1324 | ".{picture} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1325 | ; |
| 1326 | |
| 1327 | css |
| 1328 | |
| 1329 | |
| 1330 | /// A region showing one child at a time, and the chrome that moves between them. |
| 1331 | /// |
| 1332 | /// [`makeover_layout::Showing`] lets a description say that a region holds |
| 1333 | /// several children and shows some of them. A renderer derives its own chrome |
| 1334 | /// from that, which is what stops every renderer growing a `match` on a widget |
| 1335 | /// name; these are the rules the derived chrome needs. |
| 1336 | /// |
| 1337 | /// # Why the default is every child, and the enhancement takes them away |
| 1338 | /// |
| 1339 | /// The controls are a lie until something binds them. A prev button rendered |
| 1340 | /// into a document with no script is a control that looks live and answers |
| 1341 | /// nothing, and the reader it lies to is exactly the one who cannot see the |
| 1342 | /// other children either — the collapsing and the moving are the same half. |
| 1343 | /// |
| 1344 | /// So the rules run in the direction the enhancement does. Nothing here hides a |
| 1345 | /// child and nothing here shows a control. Whatever binds the region sets |
| 1346 | /// `data-ready` on it, and that is what collapses the stack to one and reveals |
| 1347 | /// the row that moves it. A reader with no script gets every child in order and |
| 1348 | /// no controls, which is more content rather than less, and a reader with |
| 1349 | /// script gets a settled page rather than a stack that jumps to one frame after |
| 1350 | /// load. |
| 1351 | /// |
| 1352 | /// MNW proved this shape by hand — a `<noscript>` stylesheet opening its |
| 1353 | /// carousel back out — and it is here rather than there because the property is |
| 1354 | /// the description's, not one app's. |
| 1355 | /// |
| 1356 | /// # Not spacing |
| 1357 | /// |
| 1358 | /// The row's gaps are `makeover-geometry`'s question and are absent for |
| 1359 | /// [`row_rules`]'s reason. What is here is `display`, which carries no |
| 1360 | /// magnitude, and the muted readout, which is the same claim `picture-caption` |
| 1361 | /// makes: it says where you are among the children and it is not one of them. |
| 1362 | |
| 1363 | let controls = class; |
| 1364 | let position = class; |
| 1365 | let frame = class; |
| 1366 | let mut css = Stringnew; |
| 1367 | |
| 1368 | // Hidden until something binds it, which is the whole argument above. |
| 1369 | let _ = writeln!; |
| 1370 | // Block, and nothing about how the three sit in it. A button and a span are |
| 1371 | // inline already, so they make a row without this crate saying so, and |
| 1372 | // saying so is where `align-items` and a gap would follow -- both spacing, |
| 1373 | // both `makeover-geometry`'s, and `row_rules` refuses them for the same |
| 1374 | // reason. |
| 1375 | let _ = writeln! |
| 1376 | css, |
| 1377 | "[data-ready] > .{controls} {{\n display: block;\n}}" |
| 1378 | ; |
| 1379 | |
| 1380 | // A child is in flow until the region is bound, and then only the current |
| 1381 | // one is. `.current` is a modifier for the reason `.chosen` and `.latched` |
| 1382 | // are: one name for the state, set by whoever knows it. |
| 1383 | let _ = writeln! |
| 1384 | css, |
| 1385 | "[data-ready] > .{frame}:not(.current) {{\n display: none;\n}}" |
| 1386 | ; |
| 1387 | |
| 1388 | // Reads back one step. `picture-caption`'s rule and its reason. |
| 1389 | let _ = writeln!; |
| 1390 | |
| 1391 | css |
| 1392 | |
| 1393 | |
| 1394 | /// A time axis: the container, its gridlines and ruler, and the placed things. |
| 1395 | /// |
| 1396 | /// `makeover-layout` 0.24.0's [`Track`](makeover_layout::Track), and the first |
| 1397 | /// member here whose whole point is *position*. That makes the magnitude line |
| 1398 | /// this crate keeps worth restating rather than assuming. |
| 1399 | /// |
| 1400 | /// # Where the numbers come from |
| 1401 | /// |
| 1402 | /// Every value that varies per item is a custom property the caller sets |
| 1403 | /// inline, and every rule here reads one. `--track-at` and `--track-for` are |
| 1404 | /// percentages of the span, which |
| 1405 | /// [`Track::fraction`](makeover_layout::Track::fraction) computes once so three |
| 1406 | /// renderers cannot disagree about it. Nothing here knows a pixel. |
| 1407 | /// |
| 1408 | /// That is what lets the stylesheet stay static while the items move: an entry |
| 1409 | /// carries `style="--track-at: 37.5%; --track-for: 4.166%"` and the rule below |
| 1410 | /// turns it into a box. The alternative was emitting a rule per item, which is |
| 1411 | /// a stylesheet that grows with the data. |
| 1412 | /// |
| 1413 | /// **The height of the track is the app's**, not this crate's. 96 quarter-hour |
| 1414 | /// slots at some slot height is a size, and a size is `makeover-geometry`'s |
| 1415 | /// question -- the same refusal `figure_rules` and `placeholder_rules` make. |
| 1416 | /// Percentages need a resolved height above them, so `.track` gets |
| 1417 | /// `position: relative` and nothing else; the app says how tall a day is. |
| 1418 | /// |
| 1419 | /// # Overlap |
| 1420 | /// |
| 1421 | /// Two things at the same time is intrinsic to an axis and has no analogue in a |
| 1422 | /// list. The description does not declare it -- `Placement::overlaps` derives it |
| 1423 | /// from the times -- so what arrives here is a lane index and a lane count, and |
| 1424 | /// the rule divides the width. A renderer that would rather stack them ignores |
| 1425 | /// both properties and the defaults give it one full-width lane. |
| 1426 | |
| 1427 | let track = class; |
| 1428 | let slot = class; |
| 1429 | let tick = class; |
| 1430 | let entry = class; |
| 1431 | let mut css = Stringnew; |
| 1432 | |
| 1433 | // The positioning context every entry resolves against, and the whole of |
| 1434 | // what this crate says about the container. No height: see the doc above. |
| 1435 | let _ = writeln!; |
| 1436 | |
| 1437 | // Gridlines and the ruler are the axis reading itself back, which is |
| 1438 | // `picture-caption` and `showing-position`'s claim: about the thing rather |
| 1439 | // than one of the things. |
| 1440 | // |
| 1441 | // `border_width` rather than a literal, the way `depth_rule` writes its |
| 1442 | // edge. A gridline is the one place a timeline would most naturally reach |
| 1443 | // for a hardcoded 1px, and a hardcoded 1px is this crate naming a size. |
| 1444 | let _ = writeln! |
| 1445 | css, |
| 1446 | ".{slot} {{\n border-top: {} solid var(--border);\n}}" |
| 1447 | opts.border_width |
| 1448 | ); |
| 1449 | let _ = writeln!; |
| 1450 | |
| 1451 | // The one rule that does real work. Top and height are the placement; |
| 1452 | // left and width are the lane. Both lane properties default so an entry |
| 1453 | // that names neither is full width, which is the common case and the one a |
| 1454 | // renderer gets for free. |
| 1455 | let _ = writeln! |
| 1456 | css, |
| 1457 | ".{entry} {{\n \ |
| 1458 | position: absolute;\n \ |
| 1459 | top: var(--track-at, 0%);\n \ |
| 1460 | height: var(--track-for, 100%);\n \ |
| 1461 | left: calc(var(--track-lane, 0) / var(--track-lanes, 1) * 100%);\n \ |
| 1462 | width: calc(100% / var(--track-lanes, 1));\n\ |
| 1463 | }}" |
| 1464 | ; |
| 1465 | |
| 1466 | css |
| 1467 | |
| 1468 | |
| 1469 | /// A region's stand-in, and the header of a table that can be reordered. |
| 1470 | /// |
| 1471 | /// Both are 0.12.0 members and both are colour and affordance only, which is |
| 1472 | /// where `figure_rules` landed after trying to emit a type scale. How much room |
| 1473 | /// a stand-in gets is a size — goingson has the same one at three, as |
| 1474 | /// `--compact`, `--dashboard` and `--padded` — and a size is |
| 1475 | /// `makeover-geometry`'s question. |
| 1476 | /// |
| 1477 | /// The caret is the one thing here that is neither colour nor affordance, and it |
| 1478 | /// is a renderer's own expression rather than a value the description named: |
| 1479 | /// `aria-sort` is what the table actually says, and this turns it into something |
| 1480 | /// visible for everyone not using a screen reader. A terminal draws its own; an |
| 1481 | /// immediate-mode painter draws its own. |
| 1482 | |
| 1483 | let placeholder = class; |
| 1484 | let text = class; |
| 1485 | let heading = class; |
| 1486 | let mut css = Stringnew; |
| 1487 | |
| 1488 | let _ = writeln! |
| 1489 | css, |
| 1490 | ".{placeholder} > .{text} {{\n color: var(--content-muted);\n}}" |
| 1491 | ; |
| 1492 | // Only the failure is toned. An empty list is the normal state of a new |
| 1493 | // install, and `Readiness::tone` is what says so. |
| 1494 | let _ = writeln! |
| 1495 | css, |
| 1496 | ".{placeholder}[data-tone=\"{0}\"] > .{text} {{\n color: var(--{0});\n}}" |
| 1497 | Danger.token |
| 1498 | ); |
| 1499 | |
| 1500 | // A header that reorders the table is a control, and the pointer is the |
| 1501 | // only part of saying so that is not the app's own type and spacing. |
| 1502 | let _ = writeln! |
| 1503 | css, |
| 1504 | ".{heading}[data-sortable] {{\n cursor: pointer;\n}}" |
| 1505 | ; |
| 1506 | // The caret carries its own leading space, the way `makeover-tui` and |
| 1507 | // `makeover-immediate` both write `" \u{25B2}"`. It used to be emitted bare, |
| 1508 | // and both apps that adopted the vocabulary had to put the gap back in their |
| 1509 | // own stylesheets on the same afternoon -- each having to work out first that |
| 1510 | // app CSS outranks this crate's cascade layer, so adding the space the |
| 1511 | // obvious way, as `content`, silently wins over the glyph and leaves the |
| 1512 | // heading with no caret at all. A consumer should not have to know that, and |
| 1513 | // with the space emitted here there is nothing left for one to add. |
| 1514 | // |
| 1515 | // Three states, three tones, on the convention in wiki |
| 1516 | // `three-tone-convention`. A column in force is `content`; a column offering |
| 1517 | // to reorder and not doing it now is `content-secondary`, because it still |
| 1518 | // answers a press; a column that is not sortable emits no caret at all and |
| 1519 | // takes nothing. The idle arm used to hide its glyph and reserve the box, |
| 1520 | // which cost a reflow-free press and said nothing. It draws now, and the |
| 1521 | // reservation stops being a thing to get right. |
| 1522 | // |
| 1523 | // The glyph is `Sort::glyph`, escaped rather than written: a CSS `content` |
| 1524 | // string cannot carry the character literally through this file's own |
| 1525 | // escaping, and spelling it here as well would put the third copy back that |
| 1526 | // `makeover-layout` 0.27.5 exists to remove. |
| 1527 | let _ = writeln! |
| 1528 | css, |
| 1529 | ".{heading}[data-sortable]::after \ |
| 1530 | {{\n content: \" {}\";\n color: var(--content-secondary);\n}}" |
| 1531 | css_escape |
| 1532 | ); |
| 1533 | for direction in |
| 1534 | let _ = writeln! |
| 1535 | css, |
| 1536 | ".{heading}[aria-sort=\"{}\"]::after \ |
| 1537 | {{\n content: \" {}\";\n color: var(--content);\n}}" |
| 1538 | direction.as_str, |
| 1539 | css_escape |
| 1540 | ); |
| 1541 | |
| 1542 | css |
| 1543 | |
| 1544 | |
| 1545 | /// The frame a table sits in. |
| 1546 | /// |
| 1547 | /// # Why this is a CSS table and not the grid the rest of the module assumes |
| 1548 | /// |
| 1549 | /// A grid row needs `grid-template-columns`, which has to name every column in |
| 1550 | /// order, so it cannot be written without knowing the columns. That is what |
| 1551 | /// [`list::narrowing_css`] is for, and it works: goingson builds `tables.css` in |
| 1552 | /// its own `build.rs` out of it, and nothing here changes that. |
| 1553 | /// |
| 1554 | /// It does not work for a table a *description* produced. Those columns are |
| 1555 | /// known at render time rather than at build time, and the rules would have to |
| 1556 | /// travel with the markup: a `<style>` element per table, which needs |
| 1557 | /// `style-src 'unsafe-inline'` and so blocks the MNW server's standing plan to |
| 1558 | /// drop it. The head is not an escape: a table swapped in by htmx after a |
| 1559 | /// delete arrives as a fragment with no head at all. |
| 1560 | /// |
| 1561 | /// A CSS table aligns its columns across rows knowing nothing about how many |
| 1562 | /// there are, so there is no track list to emit and nothing per-table to carry. |
| 1563 | /// The cost is that a described table cannot take a per-column fixed length, |
| 1564 | /// which costs nothing today: [`Sizing`](list::Sizing) is looked up by column |
| 1565 | /// name and a description carries no lengths to put in it, so every track a |
| 1566 | /// described table could ask for is already content, fill or auto. |
| 1567 | /// |
| 1568 | /// [`Priority`] hiding is unchanged in kind. It moves from a generated |
| 1569 | /// `display: none` per dropped column to one rule per drop class, which is the |
| 1570 | /// same fact addressed by class rather than by cutoff, and still never by |
| 1571 | /// position. |
| 1572 | |
| 1573 | let table = class; |
| 1574 | let head = class; |
| 1575 | let row = class; |
| 1576 | let heading = class; |
| 1577 | let cell = class; |
| 1578 | let mut css = Stringnew; |
| 1579 | |
| 1580 | let _ = writeln! |
| 1581 | css, |
| 1582 | ".{table} {{\n display: table;\n width: 100%;\n}}" |
| 1583 | ; |
| 1584 | let _ = writeln!; |
| 1585 | let _ = writeln!; |
| 1586 | |
| 1587 | // A content column shrinks to what is in it. `width: 1%` is how a CSS table |
| 1588 | // is told that: auto layout hands the slack to the columns that asked for |
| 1589 | // room, and a column asking for almost none gets what it needs and no more. |
| 1590 | // The `nowrap` is what stops it being given less by wrapping. |
| 1591 | let _ = writeln! |
| 1592 | css, |
| 1593 | ".{} {{\n white-space: nowrap;\n width: 1%;\n}}" |
| 1594 | class |
| 1595 | ); |
| 1596 | |
| 1597 | // A fixed column has no length to be fixed to. The description carries none |
| 1598 | // and `Sizing` is not reachable from here, so it behaves as content: the |
| 1599 | // honest answer to a width nobody supplied, and the same one `Sizing::track` |
| 1600 | // gives it. |
| 1601 | let _ = writeln! |
| 1602 | css, |
| 1603 | ".{} {{\n white-space: nowrap;\n}}" |
| 1604 | class |
| 1605 | ); |
| 1606 | |
| 1607 | // Optional columns go at the narrowest class, secondary ones go with them, |
| 1608 | // which is the cutoff walk `kept_at` describes said as two media queries. |
| 1609 | // Essential columns have no rule at all, because never dropping is what not |
| 1610 | // being mentioned already means. |
| 1611 | for in |
| 1612 | |
| 1613 | Compact, |
| 1614 | &, |
| 1615 | , |
| 1616 | , |
| 1617 | ] |
| 1618 | let selectors: = drops |
| 1619 | .iter |
| 1620 | .map |
| 1621 | .collect; |
| 1622 | css.push_str |
| 1623 | Some, |
| 1624 | &format!, |
| 1625 | ; |
| 1626 | |
| 1627 | |
| 1628 | // What is inside a cell, which the table side could not say until |
| 1629 | // makeover-layout 0.14.0. Every cell was one `.cell` and one content |
| 1630 | // colour, so a button in a cell was painted as text -- the drift |
| 1631 | // `RowPart::intent` has prevented for list rows since 0.2.0 and prevented |
| 1632 | // for nothing here. |
| 1633 | // |
| 1634 | // The colour goes on `.cell-value` rather than on `.cell`, and that |
| 1635 | // placement is the whole fix. On the container it would cascade into the |
| 1636 | // tokens and the controls sitting beside the text, which is the bug said |
| 1637 | // in one rule; on the part that is text, it reaches text and stops. |
| 1638 | for part in |
| 1639 | Value, |
| 1640 | Tokens, |
| 1641 | Actions, |
| 1642 | Link, |
| 1643 | ] |
| 1644 | // Three of the four inherit, each for its own reason: a token carries |
| 1645 | // its own tone, an action is a control rather than text, and a link |
| 1646 | // takes the action colour from the anchor it is. `CellPart::intent` |
| 1647 | // says so by answering with the intent inheriting already gives, and |
| 1648 | // pinning that would be louder than saying nothing. |
| 1649 | // |
| 1650 | // Written as a skip-list rather than as a match on Value, so a member |
| 1651 | // added upstream gets its intent emitted rather than being silently |
| 1652 | // dropped. That is the same trade `part_class`'s fallback makes: land |
| 1653 | // plainly, never land as nothing. |
| 1654 | if !matches! |
| 1655 | let _ = writeln! |
| 1656 | css, |
| 1657 | ".{} {{\n color: var(--{});\n}}" |
| 1658 | class, |
| 1659 | part.intent |
| 1660 | ); |
| 1661 | |
| 1662 | |
| 1663 | |
| 1664 | css |
| 1665 | |
| 1666 | |
| 1667 | /// The component layer: every named thing phase A emits. |
| 1668 | /// |
| 1669 | /// No scrollbar track. It was on the phase A list and came off: eight lines of |
| 1670 | /// `::-webkit-scrollbar` with no shape a terminal or an immediate-mode painter |
| 1671 | /// would want handed to it, so it stays with the apps. |
| 1672 | |
| 1673 | |
| 1674 | let mut css = Stringnew; |
| 1675 | css.push_str; |
| 1676 | css.push_str; |
| 1677 | css.push_str; |
| 1678 | css.push_str; |
| 1679 | css.push_str; |
| 1680 | css.push_str; |
| 1681 | css.push_str; |
| 1682 | css.push_str; |
| 1683 | css.push_str; |
| 1684 | css.push_str; |
| 1685 | css.push_str; |
| 1686 | css.push_str; |
| 1687 | css.push_str; |
| 1688 | css.push_str; |
| 1689 | css.push_str; |
| 1690 | css.push_str; |
| 1691 | css |
| 1692 | |
| 1693 | |
| 1694 | /// The whole phase-A stylesheet: properties, depth rules and components, in |
| 1695 | /// [`CSS_LAYER`], under a generated-file banner. |
| 1696 | /// |
| 1697 | /// The banner sits outside the layer, because a comment participates in no |
| 1698 | /// cascade and a reader opening the file should see what it is before seeing |
| 1699 | /// an at-rule. |
| 1700 | |
| 1701 | |
| 1702 | format! |
| 1703 | "/* Generated by makeover-webview from makeover-layout. Do not edit.\n \ |
| 1704 | Depth is a fill and an edge together; naming them apart is what let\n \ |
| 1705 | them disagree. See the crate's README and wiki note makeover-layout.\n\n \ |
| 1706 | Everything below is in the `{CSS_LAYER}` cascade layer. Declare the\n \ |
| 1707 | order once in your own stylesheet, or this layer's position is decided\n \ |
| 1708 | by whichever generated file the browser happens to see first:\n\n \ |
| 1709 | @layer {CSS_LAYER}, base, components, responsive; */\n{}" |
| 1710 | in_css_layer |
| 1711 | ":root {{\n{}}}\n\n{}\n{}" |
| 1712 | bevel_properties, |
| 1713 | depth_rules, |
| 1714 | component_rules |
| 1715 | ) |
| 1716 | ) |
| 1717 | |
| 1718 | |
| 1719 | |
| 1720 | |
| 1721 | use *; |
| 1722 | use Edge; |
| 1723 | |
| 1724 | |
| 1725 | |
| 1726 | // The obligation ROW_PART_CLASSES carries, for the same reason: a class |
| 1727 | // this crate can write and the vocabulary list does not carry is |
| 1728 | // invisible to the dead-vocabulary seal and to the overlap check both. |
| 1729 | for fallback in |
| 1730 | Wrap, |
| 1731 | Stack, |
| 1732 | Shed, |
| 1733 | Menu, |
| 1734 | ] |
| 1735 | assert! |
| 1736 | RUN_CLASSES.contains, |
| 1737 | "{fallback:?} is missing from RUN_CLASSES" |
| 1738 | ; |
| 1739 | |
| 1740 | let names = cratenames; |
| 1741 | for name in RUN_CLASSES |
| 1742 | assert!; |
| 1743 | |
| 1744 | |
| 1745 | |
| 1746 | |
| 1747 | |
| 1748 | // The whole of what stops the overlap, and it is not a fallback: it |
| 1749 | // applies to every run whatever the group declared. flexbox's default |
| 1750 | // min-width is auto, which lets an item be compressed below its own |
| 1751 | // content in a nowrap row, and that is how a toolbar is drawn over a |
| 1752 | // tab strip even with nothing out of flow. |
| 1753 | let css = run_rules; |
| 1754 | assert!; |
| 1755 | // No number anywhere in it. The minimum is derived by the browser from |
| 1756 | // what the members contain, which is the ruling's own requirement. |
| 1757 | assert!; |
| 1758 | assert!; |
| 1759 | assert!; |
| 1760 | |
| 1761 | |
| 1762 | |
| 1763 | |
| 1764 | // The 913 case: a window in SizeClass::Expanded holding a group out of |
| 1765 | // room. A viewport query answers about the window and would be wrong |
| 1766 | // about the group, which is why the table's @media walk is not the |
| 1767 | // precedent this follows. |
| 1768 | let css = run_rules; |
| 1769 | for size in |
| 1770 | assert!; |
| 1771 | |
| 1772 | |
| 1773 | |
| 1774 | |
| 1775 | |
| 1776 | let css = run_rules; |
| 1777 | for fallback in |
| 1778 | Wrap, |
| 1779 | Stack, |
| 1780 | Shed, |
| 1781 | Menu, |
| 1782 | ] |
| 1783 | let class = fallback_class; |
| 1784 | assert!; |
| 1785 | |
| 1786 | // Stack is the one that also says what a member does with the line it |
| 1787 | // took, which is what separates it from wrapping. |
| 1788 | assert!; |
| 1789 | |
| 1790 | |
| 1791 | |
| 1792 | |
| 1793 | // Balanced Breakfast's styles.css, verbatim. Adoption has to be a |
| 1794 | // deletion, not a redesign, or nobody will take it. |
| 1795 | let opts = default; |
| 1796 | assert_eq! |
| 1797 | bevel_shadow, |
| 1798 | "inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark)" |
| 1799 | ; |
| 1800 | assert_eq! |
| 1801 | bevel_shadow, |
| 1802 | "inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light)" |
| 1803 | ; |
| 1804 | |
| 1805 | |
| 1806 | |
| 1807 | |
| 1808 | let css = stylesheet; |
| 1809 | assert!; |
| 1810 | assert! |
| 1811 | !css.contains, |
| 1812 | "a colour function escaped into the CSS" |
| 1813 | ; |
| 1814 | // Every colour is named, never resolved. |
| 1815 | assert!; |
| 1816 | assert!; |
| 1817 | |
| 1818 | |
| 1819 | |
| 1820 | |
| 1821 | assert_eq! |
| 1822 | fill_var, |
| 1823 | "var(--surface-well, var(--surface-page))" |
| 1824 | ; |
| 1825 | // Nothing else needs one. |
| 1826 | assert_eq!; |
| 1827 | assert_eq!; |
| 1828 | |
| 1829 | |
| 1830 | |
| 1831 | |
| 1832 | let css = depth_rules; |
| 1833 | assert!; |
| 1834 | assert!; |
| 1835 | assert!; |
| 1836 | assert!; |
| 1837 | |
| 1838 | |
| 1839 | /// The cast shadow is composed here from the tone `makeover` derives, so |
| 1840 | /// neither crate has to hold the other's numbers. |
| 1841 | /// |
| 1842 | /// It is a `:root` property and deliberately not a depth class. There is no |
| 1843 | /// `Depth::Overlay` in the description layer, and adding one would be a |
| 1844 | /// claim about what a screen means rather than about how it is painted; |
| 1845 | /// until something asks for it, a consumer names the property on the rule |
| 1846 | /// for the menu or the toast it already has. |
| 1847 | |
| 1848 | |
| 1849 | let css = bevel_properties; |
| 1850 | assert!; |
| 1851 | assert!; |
| 1852 | assert! |
| 1853 | !depth_rules.contains, |
| 1854 | "elevation is not a depth class" |
| 1855 | ; |
| 1856 | |
| 1857 | |
| 1858 | |
| 1859 | |
| 1860 | let css = surface_rules; |
| 1861 | // The one thing this renderer gets free that the other two resolve by |
| 1862 | // hand, eighteen call sites deep in audiofiles' case. Asserted on a |
| 1863 | // named surface: pressing belongs to the control, not to the depth. |
| 1864 | assert!; |
| 1865 | assert!; |
| 1866 | |
| 1867 | |
| 1868 | |
| 1869 | |
| 1870 | let css = depth_rules; |
| 1871 | // The static surface the vocabulary was missing. Sixteen goingson |
| 1872 | // elements wore .card and cancelled its hover and press to get this, |
| 1873 | // because a raised object that is not pressable had no other spelling. |
| 1874 | for state in |
| 1875 | assert! |
| 1876 | !css.contains, |
| 1877 | "the depth class claimed {state}: {css}" |
| 1878 | ; |
| 1879 | |
| 1880 | assert!; |
| 1881 | |
| 1882 | |
| 1883 | |
| 1884 | |
| 1885 | // The decision-1 guard, and the regression that mattered: emitting the |
| 1886 | // bevel flip alone is what left goingson hand-writing `background: |
| 1887 | // var(--surface-sunken)` on .btn, .card and .tag/.badge alike, so none |
| 1888 | // of the three could be deleted. |
| 1889 | let pressed = interactive_rules; |
| 1890 | assert!; |
| 1891 | assert! |
| 1892 | pressed.contains, |
| 1893 | "pressed dropped its fill: {pressed}" |
| 1894 | ; |
| 1895 | assert!; |
| 1896 | |
| 1897 | |
| 1898 | |
| 1899 | |
| 1900 | // goingson presses to --surface-sunken. The description says a pressed |
| 1901 | // raised region reads as a well, and makeover says outright that |
| 1902 | // surface-sunken cannot serve as one, so the app is the thing that |
| 1903 | // moves. |
| 1904 | // |
| 1905 | // Scoped to the pressed rules rather than to the whole sheet: since |
| 1906 | // makeover-layout 0.3.0 an unchosen tab is legitimately |
| 1907 | // --surface-sunken, so the token appearing somewhere in the output no |
| 1908 | // longer means the app's choice leaked in. |
| 1909 | let css = stylesheet; |
| 1910 | let mut checked = 0; |
| 1911 | for rule in css.split |
| 1912 | if !rule.contains |
| 1913 | continue; |
| 1914 | |
| 1915 | checked += 1; |
| 1916 | assert! |
| 1917 | !rule.contains, |
| 1918 | "a pressed rule took the app's fill: {rule}" |
| 1919 | ; |
| 1920 | |
| 1921 | assert!; |
| 1922 | assert_eq! |
| 1923 | Raised.pressed.fill, |
| 1924 | Some, |
| 1925 | "the description changed under us" |
| 1926 | ; |
| 1927 | |
| 1928 | |
| 1929 | |
| 1930 | |
| 1931 | // The point of 0.11.0. Unlayered normal declarations outrank every |
| 1932 | // named layer, so an app declaring `@layer base, components` loses |
| 1933 | // every rule it owns to this file until this file is layered too. |
| 1934 | let css = stylesheet; |
| 1935 | assert!; |
| 1936 | |
| 1937 | // Exactly one layer block, and nothing outside it but the banner. |
| 1938 | assert_eq!; |
| 1939 | let opened = css.find.expect; |
| 1940 | for in css.lines.enumerate |
| 1941 | let before_layer = css.lines.take.map. < opened; |
| 1942 | if before_layer || line.is_empty |
| 1943 | continue; |
| 1944 | |
| 1945 | assert! |
| 1946 | line.starts_with || line == "}" || line.starts_with, |
| 1947 | "line outside the layer: {line:?}" |
| 1948 | ; |
| 1949 | |
| 1950 | |
| 1951 | |
| 1952 | |
| 1953 | |
| 1954 | // A checked-in generated file that a formatter wants to rewrite is a |
| 1955 | // diff every time somebody saves it. |
| 1956 | let css = stylesheet; |
| 1957 | for in css.lines.enumerate |
| 1958 | assert_eq!; |
| 1959 | |
| 1960 | |
| 1961 | |
| 1962 | |
| 1963 | |
| 1964 | // Without a declared order the layer's position depends on which |
| 1965 | // generated file the browser sees first, which is not a contract. |
| 1966 | let css = stylesheet; |
| 1967 | assert!; |
| 1968 | // And the banner is outside the layer, not a rule inside it. |
| 1969 | assert!; |
| 1970 | |
| 1971 | |
| 1972 | |
| 1973 | |
| 1974 | // The whole point of 0.10.0. Anything emitting a hover rule owes the |
| 1975 | // other three, or the consuming app supplies them by out-specifying a |
| 1976 | // rule it does not own: 19 such rules in goingson, 21 in the MNW |
| 1977 | // server, and three focus rings that do not match. |
| 1978 | let css = stylesheet; |
| 1979 | for selector in |
| 1980 | assert!; |
| 1981 | assert! |
| 1982 | css.contains, |
| 1983 | "{selector}" |
| 1984 | ; |
| 1985 | assert! |
| 1986 | css.contains, |
| 1987 | "{selector} has no focus ring" |
| 1988 | ; |
| 1989 | assert! |
| 1990 | css.contains, |
| 1991 | "{selector} has no disabled state" |
| 1992 | ; |
| 1993 | |
| 1994 | |
| 1995 | |
| 1996 | |
| 1997 | |
| 1998 | // A text field does not light up under the pointer, so it gets the two |
| 1999 | // states it has and not the two it does not. |
| 2000 | let css = stylesheet; |
| 2001 | assert!; |
| 2002 | assert!; |
| 2003 | assert!; |
| 2004 | assert!; |
| 2005 | |
| 2006 | |
| 2007 | |
| 2008 | |
| 2009 | // Every one of these selectors is specificity (0,2,0), so nothing but |
| 2010 | // order decides which wins. A disabled button taking the hover fill is |
| 2011 | // the exact bug goingson's `.button:disabled:hover` was written to fix, |
| 2012 | // and the reason it had to reach (0,3,0) to do it. |
| 2013 | let css = interactive_rules; |
| 2014 | let hover = css.find.expect; |
| 2015 | let active = css.find.expect; |
| 2016 | let focus = css.find.expect; |
| 2017 | let disabled = css.find.expect; |
| 2018 | assert!; |
| 2019 | |
| 2020 | // And it restores the surface, or the hover fill survives underneath. |
| 2021 | let tail = &css; |
| 2022 | assert!; |
| 2023 | |
| 2024 | |
| 2025 | |
| 2026 | |
| 2027 | // `:disabled` matches form elements only, and a chip is a div. Keying |
| 2028 | // on the ARIA attribute too is the pattern the invalid field already |
| 2029 | // set: one fact, read by the styling and the accessibility tree alike. |
| 2030 | let css = disabled_rule; |
| 2031 | assert!; |
| 2032 | assert!; |
| 2033 | assert!; |
| 2034 | |
| 2035 | |
| 2036 | |
| 2037 | |
| 2038 | // `outline` has its own property, so unlike the invalid ring there is |
| 2039 | // no bevel to restate beside it and nothing to keep in agreement. |
| 2040 | let opts = default; |
| 2041 | let css = focus_rule; |
| 2042 | assert!; |
| 2043 | assert!; |
| 2044 | |
| 2045 | |
| 2046 | |
| 2047 | |
| 2048 | // One ring, placed by depth. The offset comes off `Depth::bevel` and |
| 2049 | // not off a per-component choice, which is what gave three apps three |
| 2050 | // different rings. |
| 2051 | let opts = default; |
| 2052 | assert!; |
| 2053 | assert!; |
| 2054 | // Nothing to sit inside of, so it sits outside. |
| 2055 | assert!; |
| 2056 | |
| 2057 | // And the ring is not the bevel. Reusing border_width emitted a 1px |
| 2058 | // ring that every consumer had already overridden. |
| 2059 | assert_ne!; |
| 2060 | |
| 2061 | |
| 2062 | |
| 2063 | |
| 2064 | // goingson's section 60 exists only to take back the hover state this |
| 2065 | // crate handed it. Gating at the source is what deletes that section |
| 2066 | // in all three apps rather than having each fight for it. |
| 2067 | let css = stylesheet; |
| 2068 | let condition = format!; |
| 2069 | assert!; |
| 2070 | |
| 2071 | // What is gated is every hover state the surfaces carry. The row's |
| 2072 | // actions used to be the other half of this test and are not gated any |
| 2073 | // more, because they are not hidden any more: a rule that reveals |
| 2074 | // nothing needs no capability answer. |
| 2075 | let gated: = css.lines.filter.collect; |
| 2076 | assert!; |
| 2077 | for line in gated |
| 2078 | let indent = line.len - line.trim_start.len; |
| 2079 | assert!; |
| 2080 | |
| 2081 | assert!; |
| 2082 | |
| 2083 | |
| 2084 | |
| 2085 | |
| 2086 | // Both halves come from the crates that own them. If `makeover-touch` |
| 2087 | // ever says a fingertip has hover, this stops gating on its own. |
| 2088 | assert!; |
| 2089 | assert!; |
| 2090 | assert_eq!; |
| 2091 | |
| 2092 | // And the size class passed to that call is not a claim about width. |
| 2093 | assert!; |
| 2094 | for size in |
| 2095 | assert!; |
| 2096 | |
| 2097 | |
| 2098 | |
| 2099 | |
| 2100 | |
| 2101 | let css = interactive_rules; |
| 2102 | assert!; |
| 2103 | assert!; |
| 2104 | // Not the app's choice, which was --surface-overlay. |
| 2105 | assert!; |
| 2106 | |
| 2107 | |
| 2108 | |
| 2109 | |
| 2110 | // Decision 2, and the one visible redesign in phase A. Token::Badge is |
| 2111 | // Flat: an edge on a label says it can be pressed. |
| 2112 | let css = token_rules; |
| 2113 | let badge = css |
| 2114 | .lines |
| 2115 | .skip_while |
| 2116 | .take_while |
| 2117 | . |
| 2118 | .join; |
| 2119 | assert!; |
| 2120 | assert!; |
| 2121 | assert_eq!; |
| 2122 | assert_eq!; |
| 2123 | |
| 2124 | |
| 2125 | |
| 2126 | |
| 2127 | let css = token_rules; |
| 2128 | // Neutral is the absence of a status, not a status named "none". |
| 2129 | assert!; |
| 2130 | assert!; |
| 2131 | for tone in |
| 2132 | assert! |
| 2133 | css.contains, |
| 2134 | "missing tone {tone}" |
| 2135 | ; |
| 2136 | assert!; |
| 2137 | |
| 2138 | |
| 2139 | |
| 2140 | |
| 2141 | |
| 2142 | let css = token_rules; |
| 2143 | assert!; |
| 2144 | assert!; |
| 2145 | assert!; |
| 2146 | // The whole difference from a badge: it answers a click. |
| 2147 | assert!; |
| 2148 | assert!; |
| 2149 | |
| 2150 | |
| 2151 | |
| 2152 | |
| 2153 | // The folder semantic. Collapsing the three selectors would lose it. |
| 2154 | let css = selector_rules; |
| 2155 | assert!; |
| 2156 | assert!; |
| 2157 | assert!; |
| 2158 | assert_eq!; |
| 2159 | assert_eq!; |
| 2160 | assert_eq!; |
| 2161 | |
| 2162 | let tab = css |
| 2163 | .lines |
| 2164 | .skip_while |
| 2165 | .take_while |
| 2166 | . |
| 2167 | .join; |
| 2168 | assert! |
| 2169 | tab.contains, |
| 2170 | "tab was held in: {tab}" |
| 2171 | ; |
| 2172 | |
| 2173 | |
| 2174 | |
| 2175 | |
| 2176 | let css = selector_rules; |
| 2177 | // Recessed by colour and given no edge. An edge would make every option |
| 2178 | // look picked; flat would leave the chosen one nothing to come forward |
| 2179 | // from, which is the gap makeover-layout 0.3.0 closed. |
| 2180 | assert! |
| 2181 | css.contains, |
| 2182 | "unchosen tab is not recessed: {css}" |
| 2183 | ; |
| 2184 | assert_eq!; |
| 2185 | assert!; |
| 2186 | |
| 2187 | |
| 2188 | |
| 2189 | |
| 2190 | // The inverse of the tab, and why the three selectors are not one |
| 2191 | // member with a flag. |
| 2192 | let css = selector_rules; |
| 2193 | assert!; |
| 2194 | assert_eq!; |
| 2195 | assert_eq!; |
| 2196 | |
| 2197 | |
| 2198 | |
| 2199 | |
| 2200 | let css = row_rules; |
| 2201 | |
| 2202 | // The hover reveal is gone, and with it every escape it needed. What |
| 2203 | // it hid was hidden from pointer users alone, who are the ones |
| 2204 | // scanning a list to learn what can be done to a row. |
| 2205 | assert!; |
| 2206 | assert!; |
| 2207 | assert!; |
| 2208 | assert!; |
| 2209 | |
| 2210 | // Nor is it hidden any other way. `display: none` would reflow the row |
| 2211 | // and `visibility: hidden` would take the actions out of the focus |
| 2212 | // order; the point is that neither is reached for. |
| 2213 | assert!; |
| 2214 | assert!; |
| 2215 | |
| 2216 | |
| 2217 | |
| 2218 | |
| 2219 | // 0.13.0. The delta is the part that reads as good or bad; the number |
| 2220 | // itself is an ordinary fact. A figure with no delta has nowhere else to |
| 2221 | // put the colour, so the value takes it, and `:has` is what lets one |
| 2222 | // attribute mean both without the emitter choosing an element. |
| 2223 | let css = stylesheet; |
| 2224 | |
| 2225 | assert! |
| 2226 | css.contains, |
| 2227 | "{css}" |
| 2228 | ; |
| 2229 | assert! |
| 2230 | css.contains |
| 2231 | ".figure[data-tone=\"success\"]:not(:has(> .figure-change)) > .figure-value" |
| 2232 | , |
| 2233 | "{css}" |
| 2234 | ; |
| 2235 | // The caption is the noun and never takes the tone. |
| 2236 | assert! |
| 2237 | !css.contains, |
| 2238 | "{css}" |
| 2239 | ; |
| 2240 | |
| 2241 | |
| 2242 | |
| 2243 | |
| 2244 | let css = row_rules; |
| 2245 | assert!; |
| 2246 | assert!; |
| 2247 | assert!; |
| 2248 | // Actions carry controls, not text. Pinning the colour it would inherit |
| 2249 | // anyway is louder than saying nothing. |
| 2250 | assert!; |
| 2251 | |
| 2252 | |
| 2253 | |
| 2254 | |
| 2255 | // makeover-layout 0.9.0. A token carries its own tone, so a colour on |
| 2256 | // the strip would be a rule fighting the things sitting in it -- the |
| 2257 | // same reasoning as actions, reached for a different reason. |
| 2258 | let css = row_rules; |
| 2259 | assert!; |
| 2260 | |
| 2261 | |
| 2262 | |
| 2263 | |
| 2264 | // What `#[non_exhaustive]` bought and what it cost. `part_class` can no |
| 2265 | // longer be exhaustive, so a member added upstream lands as a bare |
| 2266 | // class with no rule instead of stopping the build. Asserting the |
| 2267 | // fallback exists is what keeps it from being written as `unreachable!` |
| 2268 | // by someone who reads the match as closed. |
| 2269 | assert_eq!; |
| 2270 | assert_eq!; |
| 2271 | |
| 2272 | |
| 2273 | |
| 2274 | |
| 2275 | // `--action-primary` shipped here for months and no theme has ever |
| 2276 | // defined it, so every `.link` dropped its colour declaration outright |
| 2277 | // and fell back to inherited text. Nothing caught it because the sheet |
| 2278 | // is valid CSS either way; MNW's no-undefined-token lint is what found |
| 2279 | // it, 2026-08-14. The hover arm two lines below was always `--action-hover`, |
| 2280 | // which is what makes the typo legible in hindsight. |
| 2281 | let css = link_rules; |
| 2282 | assert!; |
| 2283 | assert!; |
| 2284 | assert!; |
| 2285 | |
| 2286 | |
| 2287 | |
| 2288 | |
| 2289 | let css = progress_rules; |
| 2290 | assert!; |
| 2291 | assert!; |
| 2292 | assert!; |
| 2293 | assert!; |
| 2294 | // A bare `.fill` would catch things that have nothing to do with |
| 2295 | // progress once the sheet lands unprefixed. |
| 2296 | assert!; |
| 2297 | |
| 2298 | |
| 2299 | |
| 2300 | |
| 2301 | let css = progress_rules; |
| 2302 | // Untoned is --action, not Tone::Neutral's content-muted: a bar with no |
| 2303 | // status is still reporting progress, and muted would read as disabled. |
| 2304 | assert!; |
| 2305 | assert!; |
| 2306 | for tone in |
| 2307 | assert! |
| 2308 | css.contains, |
| 2309 | "missing progress tone {tone}" |
| 2310 | ; |
| 2311 | |
| 2312 | // goingson's two live cases, which is why the tones are emitted at all. |
| 2313 | assert!; |
| 2314 | assert!; |
| 2315 | |
| 2316 | |
| 2317 | |
| 2318 | |
| 2319 | // Decision 3's negative half. It was on the phase A list and came off; |
| 2320 | // this is what stops it drifting back in. |
| 2321 | let css = stylesheet; |
| 2322 | assert!; |
| 2323 | assert!; |
| 2324 | |
| 2325 | |
| 2326 | |
| 2327 | |
| 2328 | let css = surface_rules; |
| 2329 | assert!; |
| 2330 | // The ARIA attribute, not a class: one fact, read by both the visual |
| 2331 | // and the accessible state, so they cannot drift. |
| 2332 | assert!; |
| 2333 | assert!; |
| 2334 | // A flat ring: this edge says "wrong", and a two-tone bevel would have |
| 2335 | // it say "raised" at the same time. |
| 2336 | assert!; |
| 2337 | |
| 2338 | |
| 2339 | |
| 2340 | |
| 2341 | // box-shadow is not additive. A lone ring replaces the bevel and drops |
| 2342 | // the well out from under the field, which is what this emitted before |
| 2343 | // 0.5.0 and is the whole reason the rule composes. |
| 2344 | let css = surface_rules; |
| 2345 | let invalid = css |
| 2346 | .lines |
| 2347 | .skip_while |
| 2348 | .take_while |
| 2349 | . |
| 2350 | .join; |
| 2351 | assert! |
| 2352 | invalid.contains, |
| 2353 | "the well was dropped: {invalid}" |
| 2354 | ; |
| 2355 | assert!; |
| 2356 | |
| 2357 | |
| 2358 | |
| 2359 | |
| 2360 | // The duplication phase A deletes. They are the same composition, so |
| 2361 | // the only honest way to emit both is from one call. |
| 2362 | let opts = default; |
| 2363 | let css = surface_rules; |
| 2364 | assert_eq! |
| 2365 | depth_declarations, |
| 2366 | depth_declarations |
| 2367 | ; |
| 2368 | assert!; |
| 2369 | assert!; |
| 2370 | assert_eq! |
| 2371 | interactive_rules.replace, |
| 2372 | interactive_rules |
| 2373 | ; |
| 2374 | |
| 2375 | |
| 2376 | |
| 2377 | |
| 2378 | let opts = Emit |
| 2379 | class_prefix: "mo-", |
| 2380 | ..default |
| 2381 | ; |
| 2382 | let css = stylesheet; |
| 2383 | for name in |
| 2384 | "mo-button", |
| 2385 | "mo-card", |
| 2386 | "mo-field", |
| 2387 | "mo-badge", |
| 2388 | "mo-chip", |
| 2389 | "mo-tab", |
| 2390 | "mo-row-primary", |
| 2391 | "mo-progress", |
| 2392 | "mo-progress-fill", |
| 2393 | ] |
| 2394 | assert!; |
| 2395 | |
| 2396 | // The bare names must be gone entirely, or a prefixed build still |
| 2397 | // collides with the app's own stylesheet. |
| 2398 | assert!; |
| 2399 | assert!; |
| 2400 | assert!; |
| 2401 | |
| 2402 | |
| 2403 | |
| 2404 | |
| 2405 | // `option_class` is the contract a screen renderer writes markup |
| 2406 | // against, and the rules below are the other half of it. They come off |
| 2407 | // one mapping now, so this asserts the mapping is the one that reaches |
| 2408 | // the stylesheet rather than that two lists still agree. |
| 2409 | let css = stylesheet; |
| 2410 | for selector in |
| 2411 | let name = option_class; |
| 2412 | assert!; |
| 2413 | assert!; |
| 2414 | |
| 2415 | assert_eq!; |
| 2416 | |
| 2417 | |
| 2418 | |
| 2419 | |
| 2420 | let css = stylesheet; |
| 2421 | |
| 2422 | // The space is inside the glyph, which is what the other two renderers |
| 2423 | // write. Emitted bare, every consumer has to add it back, and the |
| 2424 | // obvious way to add it -- `content` in an app stylesheet, which is |
| 2425 | // unlayered and so outranks this sheet -- deletes the caret instead. |
| 2426 | assert!; |
| 2427 | assert!; |
| 2428 | assert!; |
| 2429 | |
| 2430 | // The arrows this renderer used to draw alone are gone. Composition |
| 2431 | // rather than agreement: the glyph comes from `Sort::glyph`, so a |
| 2432 | // fourth spelling cannot appear here without appearing everywhere. |
| 2433 | assert!; |
| 2434 | assert!; |
| 2435 | |
| 2436 | // Three states, three tones. An idle sortable heading draws its caret |
| 2437 | // now rather than reserving a hidden box for it, so there is no |
| 2438 | // visibility to order and no reflow left to guard against; what |
| 2439 | // separates the states is the colour, and the sorted arms come after |
| 2440 | // the idle one because the specificity is the same. |
| 2441 | let idle = css |
| 2442 | .find |
| 2443 | .expect; |
| 2444 | let sorted = css |
| 2445 | .find |
| 2446 | .expect; |
| 2447 | assert!; |
| 2448 | assert! |
| 2449 | css.contains, |
| 2450 | "{css}" |
| 2451 | ; |
| 2452 | assert!; |
| 2453 | assert!; |
| 2454 | |
| 2455 | |
| 2456 | |
| 2457 | |
| 2458 | let css = component_rules; |
| 2459 | |
| 2460 | for tone in |
| 2461 | assert! |
| 2462 | css.contains, |
| 2463 | "{css}" |
| 2464 | ; |
| 2465 | |
| 2466 | // Colour, not a fill. A red surface is an app's decision about emphasis. |
| 2467 | assert!; |
| 2468 | |
| 2469 | |
| 2470 | |
| 2471 | |
| 2472 | let css = component_rules; |
| 2473 | assert!; |
| 2474 | |
| 2475 | |
| 2476 | |
| 2477 | |
| 2478 | // The whole point of the CSS table. A described table's columns are |
| 2479 | // known at render time, so anything the stylesheet has to be told about |
| 2480 | // them would have to travel with the markup. |
| 2481 | let css = component_rules; |
| 2482 | |
| 2483 | assert!; |
| 2484 | assert!; |
| 2485 | assert!; |
| 2486 | assert!; |
| 2487 | |
| 2488 | |
| 2489 | |
| 2490 | |
| 2491 | // The point of makeover-layout 0.14.0's CellPart, and the table-side |
| 2492 | // twin of `the_three_text_parts_take_their_intents_and_actions_inherits` |
| 2493 | // above. One `.cell` and one content colour meant a button in a cell |
| 2494 | // inherited it. |
| 2495 | let css = table_rules; |
| 2496 | |
| 2497 | assert! |
| 2498 | css.contains, |
| 2499 | "{css}" |
| 2500 | ; |
| 2501 | assert!; |
| 2502 | assert!; |
| 2503 | assert!; |
| 2504 | |
| 2505 | // The colour is on the part that is text, never on the container. On |
| 2506 | // `.cell` it would cascade into the three parts that are not text, |
| 2507 | // which is the bug written as one rule. |
| 2508 | assert!; |
| 2509 | |
| 2510 | |
| 2511 | |
| 2512 | |
| 2513 | // `part_class`'s obligation, taken on for the table side too. CellPart |
| 2514 | // is `#[non_exhaustive]`, so a member added upstream must land as a |
| 2515 | // bare class rather than as a build that stops. |
| 2516 | assert_eq!; |
| 2517 | assert_eq!; |
| 2518 | |
| 2519 | |
| 2520 | |
| 2521 | |
| 2522 | let css = component_rules; |
| 2523 | |
| 2524 | // Optional goes at the narrowest class and secondary goes with it, |
| 2525 | // which is `kept_at`'s cutoff walk said as two queries. |
| 2526 | let compact = css |
| 2527 | .find |
| 2528 | .expect; |
| 2529 | let medium = css |
| 2530 | .find |
| 2531 | .expect; |
| 2532 | assert!; |
| 2533 | assert!; |
| 2534 | |
| 2535 | // Essential columns are never mentioned, because not being mentioned is |
| 2536 | // already what never dropping means. |
| 2537 | assert!; |
| 2538 | |
| 2539 | // And nothing counts. `nth-child` is the bug the priority vocabulary |
| 2540 | // exists to end. |
| 2541 | assert!; |
| 2542 | |
| 2543 | |
| 2544 | |
| 2545 | |
| 2546 | let css = track_rules; |
| 2547 | |
| 2548 | // Placement arrives from the caller, computed once by Track::fraction. |
| 2549 | // If either of these becomes a literal, three renderers have started |
| 2550 | // disagreeing about where 09:30 is. |
| 2551 | assert!; |
| 2552 | assert!; |
| 2553 | |
| 2554 | // Overlap lanes default so an entry naming neither is full width. |
| 2555 | assert!; |
| 2556 | assert!; |
| 2557 | |
| 2558 | // The refusal that matters. A slot height here would be this crate |
| 2559 | // deciding how tall a quarter of an hour is, which is the thing |
| 2560 | // makeover-geometry owns and the reason `.track` gets no height at all. |
| 2561 | assert!; |
| 2562 | for size in |
| 2563 | let bare = css |
| 2564 | .lines |
| 2565 | .filter |
| 2566 | .any; |
| 2567 | assert!; |
| 2568 | |
| 2569 | |
| 2570 | |
| 2571 | |
| 2572 | |
| 2573 | let css = stylesheet; |
| 2574 | assert!; |
| 2575 | assert!; |
| 2576 | // The count is `Flow`'s, not this crate's. If the tier ever means three |
| 2577 | // lines, this fails here rather than in an app. |
| 2578 | assert!; |
| 2579 | // Tight gets no rule at all: one line is what a run already does, and a |
| 2580 | // class per part saying so is a declaration that changes nothing. |
| 2581 | assert!; |
| 2582 | assert_eq!; |
| 2583 | assert_eq!; |
| 2584 | // Emitted, therefore checkable: an app's dead-vocabulary seal and the |
| 2585 | // overlap check both read `vocabulary::names`, so a class the renderer |
| 2586 | // can write and that list does not carry is invisible to both. |
| 2587 | assert!; |
| 2588 | |
| 2589 | |
| 2590 | |
| 2591 | |
| 2592 | // The crate's founding property, asserted over the component layer and |
| 2593 | // not only the primitives. |
| 2594 | let css = stylesheet; |
| 2595 | assert!; |
| 2596 | assert!; |
| 2597 | for line in css.lines |
| 2598 | // Declarations only: a selector or an at-rule can carry a colon of |
| 2599 | // its own (`:root`, `:hover`, `@media (hover: hover)`) and declares |
| 2600 | // nothing. Keyed on the trailing semicolon rather than on leading |
| 2601 | // indentation, which only ever worked as a proxy for nesting depth |
| 2602 | // and stopped when the sheet gained a cascade layer around it. |
| 2603 | let trimmed = line.trim; |
| 2604 | if !trimmed.ends_with |
| 2605 | continue; |
| 2606 | |
| 2607 | let Some = trimmed.split_once else |
| 2608 | continue; |
| 2609 | ; |
| 2610 | if value.contains |
| 2611 | continue; |
| 2612 | |
| 2613 | // Everything left has to be a keyword, a number or a |
| 2614 | // caller-supplied length, never a colour. |
| 2615 | // |
| 2616 | // The length arm is what the comment above always claimed and the |
| 2617 | // list never covered: `border_width` arrives from `Emit` and lands |
| 2618 | // bare in the focus ring's offset, where the bevel had only ever |
| 2619 | // used it inside an `inset` shadow. |
| 2620 | let opts = default; |
| 2621 | assert! |
| 2622 | value.contains |
| 2623 | || value.contains |
| 2624 | || value.contains |
| 2625 | // 0.12.0's two: a sortable header is a control and says so |
| 2626 | // with the pointer, and the caret is this renderer's own |
| 2627 | // expression of `aria-sort`. Neither is a colour, which is |
| 2628 | // what this test is actually about, and neither is a size, |
| 2629 | // which is the other thing this crate must not name. The |
| 2630 | // leading space inside the glyph is the same thing the other |
| 2631 | // two renderers write into theirs, so it is part of the |
| 2632 | // caret rather than spacing this crate decided on. |
| 2633 | || value |
| 2634 | .trim_start_matches |
| 2635 | .trim_start |
| 2636 | .starts_with |
| 2637 | || matches! |
| 2638 | value.trim_end_matches, |
| 2639 | "0" | "1" |
| 2640 | | "none" |
| 2641 | | "auto" |
| 2642 | | "not-allowed" |
| 2643 | | "pointer" |
| 2644 | // The caret's reserved box. Visibility is presence, |
| 2645 | // not magnitude and not colour. |
| 2646 | | "hidden" |
| 2647 | | "visible" |
| 2648 | // The link's two signals. `underline` is a line and |
| 2649 | // `inherit` defers to whatever the app set, so |
| 2650 | // neither names a colour or a magnitude. |
| 2651 | | "underline" |
| 2652 | | "inherit" |
| 2653 | // The table frame. `display` is structure and not a |
| 2654 | // size; `nowrap` is what makes a content column |
| 2655 | // content. The two widths are the awkward pair and |
| 2656 | // they are still not sizes: `100%` is "all of |
| 2657 | // whatever you were given" and `1%` is the CSS |
| 2658 | // table idiom for "shrink to fit", which is a |
| 2659 | // behaviour spelled as a number because CSS has no |
| 2660 | // keyword for it. Neither names a magnitude, which |
| 2661 | // is the thing this crate leaves to |
| 2662 | // makeover-geometry. |
| 2663 | | "table" |
| 2664 | | "table-row" |
| 2665 | | "table-cell" |
| 2666 | | "nowrap" |
| 2667 | | "100%" |
| 2668 | | "1%" |
| 2669 | // The time axis, 0.42.0. `position` is the one |
| 2670 | // property whose whole job is where a thing sits, |
| 2671 | // which is exactly what this crate spent its life |
| 2672 | // refusing to say -- so it is worth being exact |
| 2673 | // about why these two are not that refusal |
| 2674 | // breaking. |
| 2675 | // |
| 2676 | // Neither names a magnitude. `relative` says the |
| 2677 | // track is what its entries resolve against, and |
| 2678 | // `absolute` says an entry is placed rather than |
| 2679 | // flowed. *Where* each entry lands is |
| 2680 | // `--track-at` and `--track-for`, custom |
| 2681 | // properties the caller sets from |
| 2682 | // `Track::fraction`, and they are skipped by the |
| 2683 | // `var(--` arm above like every other value this |
| 2684 | // crate refuses to decide. |
| 2685 | // |
| 2686 | // The rule that would break the refusal is a slot |
| 2687 | // height, and there is none: the track's height is |
| 2688 | // the app's, so the percentages have something to |
| 2689 | // resolve against and this crate still never says |
| 2690 | // how tall a day is. |
| 2691 | | "relative" |
| 2692 | | "absolute" |
| 2693 | // A run's five, 0.49.0. `flex`, `wrap` and |
| 2694 | // `center` are structure and alignment, the same |
| 2695 | // reading `table` gets: which way members are laid |
| 2696 | // out and how they line up, never how much of |
| 2697 | // anything. |
| 2698 | // |
| 2699 | // The two intrinsic keywords are the interesting |
| 2700 | // pair and they are the opposite of a size. A |
| 2701 | // magnitude is a number somebody chose; |
| 2702 | // `min-content` and `max-content` are the browser |
| 2703 | // being asked what the members themselves come to, |
| 2704 | // which is the derived minimum the room ruling |
| 2705 | // requires and the reason no breakpoint appears |
| 2706 | // anywhere in these rules. `1 1 max-content` is |
| 2707 | // grow, shrink and that basis, so its two digits |
| 2708 | // are ratios rather than lengths. |
| 2709 | | "flex" |
| 2710 | | "wrap" |
| 2711 | | "center" |
| 2712 | | "min-content" |
| 2713 | | "1 1 max-content" |
| 2714 | // A picture's three, 0.36.0. `block` is structure |
| 2715 | // for the reason `table` is: an inline image sits |
| 2716 | // on the baseline and carries a descender's worth |
| 2717 | // of space under it, which is a fact about |
| 2718 | // replaced elements rather than a size this crate |
| 2719 | // chose. `cover` and `contain` are `Fit`'s two |
| 2720 | // named members reaching CSS unchanged, which is |
| 2721 | // an intent arriving rather than a value being |
| 2722 | // picked. |
| 2723 | | "block" |
| 2724 | | "cover" |
| 2725 | | "contain" |
| 2726 | // A relaxed part's three, and the third is the |
| 2727 | // awkward one. `-webkit-box` and `vertical` are |
| 2728 | // structure: they say the part is a box of lines |
| 2729 | // stacked downward, which is the only way CSS lets |
| 2730 | // anyone ask for a clamp at all. |
| 2731 | // |
| 2732 | // `2` is a count of lines, not a length. The |
| 2733 | // distinction this crate holds is between naming a |
| 2734 | // magnitude -- a padding, a height, a font size, |
| 2735 | // all of which belong to makeover-geometry -- and |
| 2736 | // naming how many of something there are. A line's |
| 2737 | // height is still the app's, so two lines is |
| 2738 | // whatever two of the app's lines come to, and |
| 2739 | // nothing here decides how tall that is. It is also |
| 2740 | // not a value picked here: it is `Flow::Relaxed`'s |
| 2741 | // own answer arriving unchanged, the same way |
| 2742 | // `cover` and `contain` are `Fit`'s. |
| 2743 | | "-webkit-box" |
| 2744 | | "vertical" |
| 2745 | | "2" |
| 2746 | , |
| 2747 | "unrecognised literal value: {line}" |
| 2748 | ; |
| 2749 | |
| 2750 | |
| 2751 | |
| 2752 | |
| 2753 | |
| 2754 | assert_eq!; |
| 2755 | assert!; |
| 2756 | |
| 2757 | |
| 2758 | |
| 2759 | |
| 2760 | let opts = Emit |
| 2761 | class_prefix: "mo-", |
| 2762 | ..default |
| 2763 | ; |
| 2764 | let css = depth_rules; |
| 2765 | assert!; |
| 2766 | assert!; |
| 2767 | assert!; |
| 2768 | |
| 2769 | |
| 2770 | |
| 2771 | |
| 2772 | let opts = Emit |
| 2773 | border_width: "2px", |
| 2774 | ..default |
| 2775 | ; |
| 2776 | assert!; |
| 2777 | |
| 2778 | |
| 2779 | |
| 2780 | |
| 2781 | // Not a tautology: it is the guard that a CSS-shaped convenience never |
| 2782 | // quietly reverses which side is lit. |
| 2783 | let = Raised.edges; |
| 2784 | assert_eq!; |
| 2785 | assert_eq!; |
| 2786 | |
| 2787 | |
| 2788 |