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 | //! Some of what phase A emits is not a look but the withdrawal of one. A |
| 36 | //! renderer that picks its element from the description inherits that element's |
| 37 | //! user-agent chrome, and [`reset`] is where a primitive says which parts of it |
| 38 | //! were never asked for. |
| 39 | //! |
| 40 | //! # Phase B: the markup, one description at a time |
| 41 | //! |
| 42 | //! [`form`] renders [`makeover_layout::Field`], which is the half of phase B |
| 43 | //! whose description is settled. It emits strings, because both apps |
| 44 | //! interpolate their fields into larger string-built forms and returning nodes |
| 45 | //! would rewrite those too. It owns its own escaping, on the reasoning in that |
| 46 | //! module: a Rust encoder can cover element text and attribute values with one |
| 47 | //! function, where the apps need four and have to choose correctly at every |
| 48 | //! call site. |
| 49 | //! |
| 50 | //! [`facet`] renders `makeover_layout::Facet`: a dimension a set is narrowed by, |
| 51 | //! and the one phase-B emitter whose markup an app is not keeping, because the |
| 52 | //! markup it replaces was two mechanisms rather than one. A tag's selection and |
| 53 | //! a tag's browse position were separate state on MNW's discover page, which is |
| 54 | //! why every filter row there carries a tick box *and* a chevron; one gesture |
| 55 | //! doing both is what lets the second one go. |
| 56 | //! |
| 57 | //! [`list`] is the other half: column tracks, the narrowing rules, and the cell |
| 58 | //! containers a row is made of. It stops at the cell boundary and does not |
| 59 | //! render what goes inside one, on the reasoning in that module. So phase B is |
| 60 | //! now the frame around content in both directions, and what an app still owns |
| 61 | //! is the content itself. |
| 62 | //! |
| 63 | //! # What phase A settled, and what it costs |
| 64 | //! |
| 65 | //! Measured against goingson's `styles.css` rather than against a component |
| 66 | //! list: `.btn`, `.card` and `.tag, .badge` each hand-write the same |
| 67 | //! composition, so three quarters of phase A is one rule with several names. |
| 68 | //! |
| 69 | //! Two of the four decisions change how goingson looks, and adoption should |
| 70 | //! not be described as a pure deletion: |
| 71 | //! |
| 72 | //! - **Pressed carries its fill.** [`interactive_rules`] emits |
| 73 | //! [`Depth::pressed`] whole. goingson presses to `--surface-sunken` today and |
| 74 | //! will press to `--surface-well`, and hovers to `--surface-overlay` today |
| 75 | //! and will hover to `--hover-surface`. Since `surface-well` inverts by theme |
| 76 | //! where `surface-sunken` does not, a dark theme presses *lighter* than it |
| 77 | //! hovers. That falls out of `makeover`'s own derivation, which says outright |
| 78 | //! that `surface-sunken` cannot serve as a well, so if it reads wrong the |
| 79 | //! answer is there and not here. |
| 80 | //! - **Badges go flat.** See [`token_rules`]. |
| 81 | //! |
| 82 | //! The other two: the progress trough is renderer-local and the scrollbar |
| 83 | //! track was dropped ([`component_rules`]), and no class prefix ships by |
| 84 | //! default, so adoption means deleting the app's hand-written rule in the same |
| 85 | //! commit that adds the generated one. `.card`, `.badge` and the tab classes |
| 86 | //! all already exist in goingson, and while both rules exist the cascade order |
| 87 | //! decides which wins. That is the one real risk in adopting this, and it is |
| 88 | //! why the migration lands per component rather than in one commit. |
| 89 | //! |
| 90 | //! # Interaction states |
| 91 | //! |
| 92 | //! [`interactive_rules`] emits four states, in emission order, and the order is |
| 93 | //! load-bearing: they are all specificity (0,2,0), so disabled beats hover by |
| 94 | //! coming last and by nothing else. Nothing here reaches for `:not(:disabled)`, |
| 95 | //! which would raise a selector this crate wraps in its own layer. |
| 96 | //! |
| 97 | //! Emitting the states here is what keeps an app from completing the primitive |
| 98 | //! from outside, by out-specifying a rule it does not own. Those overrides are |
| 99 | //! also what breaks under cascade layers: an app that declares `@layer` puts |
| 100 | //! its own rules in a named layer, and unlayered declarations outrank every |
| 101 | //! named layer regardless of specificity. |
| 102 | //! |
| 103 | //! Hover sits inside a capability query. `makeover-touch` answers whether a |
| 104 | //! fingertip has hover and `makeover-geometry` spells the condition; this crate |
| 105 | //! asks and does not decide, so no app has to take the hover state back on |
| 106 | //! touch. |
| 107 | //! |
| 108 | //! # The layer contract |
| 109 | //! |
| 110 | //! [`stylesheet`] emits into the `makeover` cascade layer ([`CSS_LAYER`], which |
| 111 | //! lives in `makeover-geometry` because that is the one crate every CSS emitter |
| 112 | //! in the family already depends on). `makeover-geometry` does the same for |
| 113 | //! `geometry.css`. |
| 114 | //! |
| 115 | //! The cascade resolves origin and importance, then layer, then specificity, |
| 116 | //! then source order, and **unlayered normal declarations outrank every named |
| 117 | //! layer**. An unlayered generated file therefore beats every rule an app owns, |
| 118 | //! regardless of specificity and regardless of loading last. Nothing errors when |
| 119 | //! that happens: the CSS is valid, the minifier is happy, and buttons and badges |
| 120 | //! look subtly wrong. The layer belongs here rather than in each app, because an |
| 121 | //! app cannot fix it from its own stylesheet: the fix is to layer the file it |
| 122 | //! does not own. |
| 123 | //! |
| 124 | //! An app should declare the order once, or the layer's position is decided by |
| 125 | //! whichever generated file the browser happens to see first: |
| 126 | //! |
| 127 | //! ```css |
| 128 | //! @layer makeover, base, components, responsive; |
| 129 | //! ``` |
| 130 | //! |
| 131 | //! [`in_css_layer`] is re-exported for an app that assembles its own stylesheet |
| 132 | //! from this crate's pieces. Rules an app generates from |
| 133 | //! [`list::narrowing_css`] and [`list::grid_template_columns`] are as generated |
| 134 | //! as the ones here, so they belong in the same layer and this crate cannot put |
| 135 | //! them there on the app's behalf. |
| 136 | //! |
| 137 | //! # Suggestions |
| 138 | //! |
| 139 | //! `Outcome::Suggestions` carries `Candidate` rather than `Choice`, and a |
| 140 | //! candidate has no `unavailable`: a suggestion that cannot be picked is a row |
| 141 | //! a route should not have offered. What it has instead is a `detail`, the line |
| 142 | //! that tells it from a row reading the same, and it is drawn in |
| 143 | //! `--content-muted` rather than in the disabled token. A detail orients rather |
| 144 | //! than refuses, and every other secondary line in this crate reads the same |
| 145 | //! way. The class is `.form-suggestion-detail`. |
| 146 | //! |
| 147 | //! # An interval is one question with two ends |
| 148 | //! |
| 149 | //! [`makeover_layout::FieldKind::Interval`] emits a `role="group"` named by the |
| 150 | //! field's label, holding one `<input type="number">` per end. |
| 151 | //! |
| 152 | //! - **The group carries the error and the descriptions**, on the split |
| 153 | //! [`makeover_layout::FieldKind::Radio`] already uses here: what is wrong is |
| 154 | //! the answer, and a crossed interval is not the fault of either end. |
| 155 | //! - **Both boxes take the whole extent.** `min`, `max` and `step` describe the |
| 156 | //! axis, so they are written twice. The crossing rule is not emitted, because |
| 157 | //! HTML has no attribute for it and the description does not carry it: it |
| 158 | //! comes back as an error on the group, like every other refusal. |
| 159 | //! - **Which end is which is `aria-label` and nothing more.** The description |
| 160 | //! states direction structurally, by which member holds which name, and never |
| 161 | //! in words. Visible Min and Max captions are a page's own and reach the |
| 162 | //! group through [`form::Filling::trailing`]. |
| 163 | //! |
| 164 | //! [`form::Value::Between`] is the second value. A separator inside one string |
| 165 | //! would make this crate the owner of a delimiter that either end could contain. |
| 166 | //! |
| 167 | //! # A number's unit is adjacent text |
| 168 | //! |
| 169 | //! HTML has no unit attribute and inventing one would be markup nothing reads, |
| 170 | //! so `Field::unit` is a `<span>` after the control. It is named in |
| 171 | //! `aria-describedby` rather than left as decoration, because a number and what |
| 172 | //! it is measured in are one fact and reading the first without the second is |
| 173 | //! reading it wrong. What that buys is a unit a consumer can read back rather |
| 174 | //! than a suffix on a label it would have to parse. |
| 175 | //! |
| 176 | //! # A curve this renderer can carry, and one it declines |
| 177 | //! |
| 178 | //! A range takes its granularity from the curve (`Field::curve.step()`), every |
| 179 | //! other kind keeps `Field::step`, and `Curve::Linear` emits a plain range. |
| 180 | //! |
| 181 | //! **A constant-ratio curve emits a linear track, and that is the answer, not a |
| 182 | //! debt.** HTML has no logarithmic range input, so a described screen asking |
| 183 | //! for one is asking the browser for something it does not have, the same class |
| 184 | //! of request as [`makeover_layout::FieldKind::Date`] on a host with no |
| 185 | //! calendar. The renderer answers with the nearest control the host really |
| 186 | //! offers and keeps every fact that survives the translation: the extent, the |
| 187 | //! granularity, and the value's own units. What does not survive is resolution |
| 188 | //! at the small end. The value submitted is still a value in the field's own |
| 189 | //! units, which is what every handler on this path reads. |
| 190 | //! |
| 191 | //! The alternatives are worse in the specific way this stack exists to avoid. |
| 192 | //! Shipping JS that maps thumb position to value puts app code back in the |
| 193 | //! renderer. Changing what the control submits from a value to a fraction moves |
| 194 | //! the mapping to whoever reads the form, and a server reading these forms with |
| 195 | //! its own handlers would take a fraction where a value is expected, silently. |
| 196 | //! |
| 197 | //! When this reopens: the day a described screen on the webview path asks for a |
| 198 | //! non-linear range. The answer then is mapping in `quasi-router`, where one |
| 199 | //! implementation serves every host, not JS here. |
| 200 | //! |
| 201 | //! # A markdown field gets a preview |
| 202 | //! |
| 203 | //! A [`makeover_layout::FieldKind::Rich`] field is marked |
| 204 | //! `data-format="markdown"`, and [`form::editor_rules`] is what spends that |
| 205 | //! mark. The Write/Preview pair is a segmented control, so it takes the depth, |
| 206 | //! the focus ring and the chosen state from rules that already exist; the |
| 207 | //! preview pane is a well, because it stands where the control stood. Both are |
| 208 | //! gated on the attribute rather than on a class, which is what the attribute is |
| 209 | //! for. A permission taken and not spent turns every conversion into a |
| 210 | //! regression. |
| 211 | //! |
| 212 | //! **This crate renders no markdown.** The pane arrives empty and is filled by |
| 213 | //! whatever binds the editor, which is where the host's sanitiser already is. A |
| 214 | //! converter here would move that guarantee into a crate with no view of the |
| 215 | //! host's content-security posture. |
| 216 | //! |
| 217 | //! # Ranges, ghost text, and an option that cannot be picked |
| 218 | //! |
| 219 | //! - `FieldKind::Range` emits `<input type="range">`, and `Field::step` emits |
| 220 | //! `step`. The step is emitted only when the description carries one: the |
| 221 | //! browser's own default is `step="1"`, which is what a description means by |
| 222 | //! saying nothing, and is also what turns a 0-to-1 threshold into a |
| 223 | //! two-position control. |
| 224 | //! - A select with nothing chosen emits a disabled, selected, valueless first |
| 225 | //! option carrying `Field::placeholder`. HTML has no placeholder attribute on |
| 226 | //! `<select>`; this is the idiom, and `required` keeps working through it |
| 227 | //! because the option's value is empty. |
| 228 | //! - `Choice::unavailable` emits `disabled` plus the reason. Where it goes |
| 229 | //! differs by control and the difference is forced: a radio group gets a |
| 230 | //! `.form-option-reason` span beside the label, and a `<select>` option has |
| 231 | //! room for no element at all, so the reason runs into its text. |
| 232 | //! - `Choice::detail` takes the same split for the same reason: a |
| 233 | //! `.form-option-detail` span in a radio group, run into the text of a |
| 234 | //! `<select>`'s option. An option carrying both reads what it is before why it |
| 235 | //! cannot be picked. |
| 236 | //! |
| 237 | //! # A cell says what it holds |
| 238 | //! |
| 239 | //! [`CellPart`](makeover_layout::CellPart) names the four things a cell holds, |
| 240 | //! and [`table_rules`] turns them into `.cell-value`, `.cell-tokens`, |
| 241 | //! `.cell-actions` and `.cell-link`. Only the first takes a colour: a token |
| 242 | //! carries its own tone, an action is a control rather than text, and a link |
| 243 | //! takes the action colour from the anchor it is. |
| 244 | //! |
| 245 | //! The colour goes on `.cell-value` rather than on `.cell`. On the container it |
| 246 | //! cascades into the parts that are not text, and a control in a cell is painted |
| 247 | //! as text, which is the drift |
| 248 | //! [`RowPart::intent`](makeover_layout::RowPart) prevents for list rows. |
| 249 | //! |
| 250 | //! [`list::Cell::part`] is `Option<CellPart>` and never `Option<RowPart>`: the |
| 251 | //! two answer different questions, and only one of them is about a cell. |
| 252 | //! |
| 253 | //! # A table lays itself out |
| 254 | //! |
| 255 | //! [`list::narrowing_css`] emits the track list and has to be called with the |
| 256 | //! columns, so it works where the columns are known at build time. A table a |
| 257 | //! description produced knows its columns at render time, and the rules would |
| 258 | //! have to travel with the markup: a `<style>` element per table, which needs |
| 259 | //! `style-src 'unsafe-inline'`, or the head, which an htmx fragment swap does |
| 260 | //! not carry. [`table_rules`] lays a table out with `display: table` instead, |
| 261 | //! which aligns columns across rows knowing nothing about how many there are. |
| 262 | //! [`Priority`](makeover_layout::Priority) hiding is one rule per drop class, |
| 263 | //! and [`list::column_classes`] is what puts those classes on a cell. **A header |
| 264 | //! row emitted by a renderer's own code has to call it too**, or the header and |
| 265 | //! the body disagree about which column just dropped. |
| 266 | //! |
| 267 | //! `.button` takes the four tones as colour, off `data-tone`, the way the badge |
| 268 | //! does, so a destructive button has somewhere for its tone to land. A list is |
| 269 | //! reset rather than left as a bulleted list. |
| 270 | //! |
| 271 | //! `RowPart::revealed_on_hover` is not honoured. Hiding a row's actions until |
| 272 | //! hover hides them from pointer users alone, who are the ones scanning a list |
| 273 | //! to learn what can be done to a row, and every escape the rule grows |
| 274 | //! (`focus-within` for the keyboard, a capability gate for a fingertip) is a |
| 275 | //! report that hiding was wrong for somebody. |
| 276 | //! |
| 277 | //! # The depth classes are not controls |
| 278 | //! |
| 279 | //! `.raised` is a statement about shape and carries no interactive set, so the |
| 280 | //! vocabulary has a raised surface that is merely an object. An app that wants |
| 281 | //! one does not have to take a control class and cancel the control half. |
| 282 | //! |
| 283 | //! `.card` and `.button` are the same depth *and* controls, and they take their |
| 284 | //! states from [`surface_rules`], which is where a state belongs: on the thing |
| 285 | //! that claims to answer a pointer. |
| 286 | //! |
| 287 | //! # Substitution, three ways |
| 288 | //! |
| 289 | //! A theme with no `surface-well` is answered differently by each renderer, |
| 290 | //! which is why substitution belongs to a renderer and not to the description: |
| 291 | //! |
| 292 | //! - `makeover-immediate` substitutes the page in Rust. |
| 293 | //! - `makeover-tui` refuses to substitute and draws an edge instead, because a |
| 294 | //! terminal would quantise the two together. |
| 295 | //! - here, CSS already has the mechanism: `var(--surface-well, |
| 296 | //! var(--surface-page))` falls back in the browser, and nothing in Rust |
| 297 | //! decides anything. |
| 298 | |
| 299 | |
| 300 | |
| 301 | |
| 302 | |
| 303 | |
| 304 | |
| 305 | |
| 306 | |
| 307 | |
| 308 | |
| 309 | |
| 310 | /// A render of every emitter, scraped for the classes it wrote. |
| 311 | /// |
| 312 | /// Test-only, and the guard behind [`vocabulary::names`]. See the module's own |
| 313 | /// header for why the check renders rather than reads the source. |
| 314 | |
| 315 | |
| 316 | |
| 317 | use crate; |
| 318 | use crate; |
| 319 | use ; |
| 320 | // Re-exported rather than redefined. An app assembling its own stylesheet out |
| 321 | // of this crate's pieces needs the same layer name, and most such apps depend |
| 322 | // on this crate and not on `makeover-geometry` directly: goingson builds |
| 323 | // `tables.css` in its own build.rs from [`list::narrowing_css`], and those |
| 324 | // rules are as generated as the ones here. |
| 325 | pub use ; |
| 326 | |
| 327 | /// This crate's version, as the generated stylesheet reports it. |
| 328 | /// |
| 329 | /// A consumer whose lockfile still pins an old `makeover-webview` gets a |
| 330 | /// well-formed sheet with components missing and no error anywhere, so the |
| 331 | /// emitter has to name itself in what it writes. Read by |
| 332 | /// `makeover_build::layout_css` through [`stylesheet`]. |
| 333 | pub const VERSION: &str = env!; |
| 334 | use |
| 335 | Bevel, CellPart, Depth, Fallback, Fill, Flow, Intent, RowPart, Selector, Sort, State, Token, |
| 336 | Tone, |
| 337 | ; |
| 338 | use Affordance; |
| 339 | use Write as _; |
| 340 | |
| 341 | /// How the emitted CSS is shaped. |
| 342 | |
| 343 | |
| 344 | /// Bevel thickness, as a CSS length. |
| 345 | /// |
| 346 | /// A value, so it arrives from the caller: border widths belong to |
| 347 | /// `makeover-geometry` and will come from there once it carries them. |
| 348 | pub border_width: &'static str, |
| 349 | /// Focus ring thickness, as a CSS length. |
| 350 | /// |
| 351 | /// Separate from [`border_width`](Self::border_width), and never derived |
| 352 | /// from it: a bevel and a focus indicator answer different questions, and |
| 353 | /// only one of them has to be noticed from across a desk. |
| 354 | /// |
| 355 | /// The default is the measured consensus rather than a new opinion. Every |
| 356 | /// consumer had already written its own ring and all three chose at least |
| 357 | /// 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px, |
| 358 | /// goingson 2px on three rules and 3px on the one covering twelve |
| 359 | /// selectors. The design system was the only thing in the tree saying 1px. |
| 360 | pub focus_width: &'static str, |
| 361 | /// Prefix for emitted class names, without the leading dot. |
| 362 | pub class_prefix: &'static str, |
| 363 | |
| 364 | |
| 365 | |
| 366 | |
| 367 | Self |
| 368 | border_width: "1px", |
| 369 | focus_width: "2px", |
| 370 | class_prefix: "", |
| 371 | |
| 372 | |
| 373 | |
| 374 | |
| 375 | /// A string as CSS escapes, for a `content` value. |
| 376 | /// |
| 377 | /// `\u{25B2}` becomes `\25B2`. Emitted escaped rather than literally so the |
| 378 | /// stylesheet is ASCII whatever the description spells: a `content` string is |
| 379 | /// read by whatever encoding the consumer serves the file as, and a caret that |
| 380 | /// depends on that is a caret that works on one machine. |
| 381 | /// |
| 382 | /// Terminated by the closing quote at every site here. A CSS hex escape takes |
| 383 | /// up to six digits and ends at the first character that cannot be one, so an |
| 384 | /// escape followed by more text would need a space that these do not. |
| 385 | |
| 386 | text.chars.fold |
| 387 | let _ = write!; |
| 388 | out |
| 389 | |
| 390 | |
| 391 | |
| 392 | /// The CSS custom property holding a bevel's composition. |
| 393 | |
| 394 | |
| 395 | match bevel |
| 396 | Raised => "--bevel-raised", |
| 397 | Inset => "--bevel-inset", |
| 398 | |
| 399 | |
| 400 | |
| 401 | /// A `var()` reference to a fill intent, with the browser's own fallback where |
| 402 | /// the intent may be absent. |
| 403 | /// |
| 404 | /// The fallback is CSS syntax, not a decision made here. That is the whole |
| 405 | /// difference between this renderer and the other two. |
| 406 | |
| 407 | |
| 408 | match fill |
| 409 | Well => format!, |
| 410 | other => format!, |
| 411 | |
| 412 | |
| 413 | |
| 414 | /// The two-tone edge as a `box-shadow` value. |
| 415 | /// |
| 416 | /// Two inset shadows, one per corner pair: the light one offset down and |
| 417 | /// right so it lands on the top and left edges, the dark one the other way. |
| 418 | /// The same assignment `makeover-immediate` draws with polylines and |
| 419 | /// `makeover-tui` draws with box-drawing characters. |
| 420 | |
| 421 | |
| 422 | let = bevel.edges; |
| 423 | let w = opts.border_width; |
| 424 | format! |
| 425 | "inset {w} {w} 0 var(--{}), inset -{w} -{w} 0 var(--{})" |
| 426 | top_left.token, |
| 427 | bottom_right.token |
| 428 | ) |
| 429 | |
| 430 | |
| 431 | /// The custom properties both bevels resolve through. |
| 432 | /// |
| 433 | /// Emitted as properties rather than inlined into every rule because that is |
| 434 | /// what the apps already do, and because a consumer that wants the edge |
| 435 | /// without the fill reads the property directly. |
| 436 | |
| 437 | |
| 438 | let mut css = Stringnew; |
| 439 | for bevel in |
| 440 | let _ = writeln! |
| 441 | css, |
| 442 | " {}: {};" |
| 443 | bevel_var, |
| 444 | bevel_shadow |
| 445 | ); |
| 446 | |
| 447 | css.push_str; |
| 448 | css |
| 449 | |
| 450 | |
| 451 | /// The cast shadow of a surface that floats over the page. |
| 452 | /// |
| 453 | /// Composed here for the reason the bevel pair is: `makeover` derives the tone, |
| 454 | /// this crate owns the geometry, and neither has to know the other's numbers. |
| 455 | /// |
| 456 | /// **Only for a surface that overlays the page.** A menu, a toast, a popover, a |
| 457 | /// dropdown. A surface *in* the page takes `.raised` and its bevel, and a rule |
| 458 | /// that reaches for this on a card or a plate has renamed a literal rather than |
| 459 | /// replaced it. |
| 460 | /// |
| 461 | /// Two lengths rather than one, because a single blur reads as a smudge at |
| 462 | /// plate size and as a halo at menu size. The offset is small and downward: a |
| 463 | /// Platinum-era menu sits just off the page rather than hovering above it. |
| 464 | const ELEVATION_PROPERTY: &str = |
| 465 | " --elevation-overlay: 0 2px 4px var(--elevation), 0 8px 24px var(--elevation);\n"; |
| 466 | |
| 467 | /// The class name for a depth. |
| 468 | |
| 469 | |
| 470 | let name = match depth |
| 471 | Flat => return None, |
| 472 | Raised => "raised", |
| 473 | Well => "well", |
| 474 | Sunken => "sunken", |
| 475 | // A depth added to the description since this renderer was last |
| 476 | // built. No class, on the same footing as Flat: emitting a name |
| 477 | // whose rule body we cannot write would put a class in the markup |
| 478 | // that the stylesheet never defines. |
| 479 | _ => return None, |
| 480 | ; |
| 481 | Some |
| 482 | |
| 483 | |
| 484 | /// A prefixed class name. |
| 485 | /// |
| 486 | /// Public, for the renderers that emit markup this crate does not. A screen |
| 487 | /// renderer writing `class="row"` has to prefix it the way the stylesheet half |
| 488 | /// does, or a prefixed app gets rules matching everything except the elements |
| 489 | /// that renderer wrote, and the failure is invisible: the CSS stays valid and |
| 490 | /// one element is unstyled. Call this rather than copying it. |
| 491 | |
| 492 | |
| 493 | let mut out = Stringwith_capacity; |
| 494 | push_class; |
| 495 | out |
| 496 | |
| 497 | |
| 498 | /// A prefixed class name, written into a buffer the caller already has. |
| 499 | /// |
| 500 | /// The form the emitters use, and the reason it exists is [`escape_into`]'s: |
| 501 | /// putting every class on every element through a `format!` allocates even in |
| 502 | /// the default case, where the prefix is empty and the answer is the argument. |
| 503 | /// A described table row carries roughly eighty transient allocations that way, |
| 504 | /// and this and the escaper are most of them. |
| 505 | /// |
| 506 | /// [`class`] stays for callers holding a name rather than a buffer. |
| 507 | /// |
| 508 | /// [`escape_into`]: crate::form::escape_into |
| 509 | |
| 510 | out.push_str; |
| 511 | out.push_str; |
| 512 | |
| 513 | |
| 514 | /// The class an option of a selector carries, which is what the rules key off. |
| 515 | /// |
| 516 | /// Named for the option and not for the group: [`selector_rules`] styles the |
| 517 | /// thing that gets picked, so `Selector::Tabs` is `tab` and not `tabs`. The |
| 518 | /// distinction is not pedantry. quasi-webview spelled these `tabs`, `segmented` |
| 519 | /// and `option`, put `toggle` on the wrapping element rather than on the |
| 520 | /// buttons inside it, and every described selector in that renderer came out |
| 521 | /// with no depth, no focus ring and no chosen state, while the toggle group got |
| 522 | /// a bevel meant for its buttons. |
| 523 | /// |
| 524 | /// The chosen option additionally carries `chosen`, the same way a latched chip |
| 525 | /// carries `latched`. That name is this crate's too; there is no reason for a |
| 526 | /// caller to spell it, and [`selector_rules`] is where it is written down. |
| 527 | |
| 528 | |
| 529 | match selector |
| 530 | Tabs => "tab", |
| 531 | Segmented => "segment", |
| 532 | Toggle => "toggle", |
| 533 | |
| 534 | |
| 535 | |
| 536 | /// The fill and edge declarations for a depth, as a rule body. |
| 537 | /// |
| 538 | /// Empty for [`Depth::Flat`], which has neither and inherits what it sits on. |
| 539 | /// Callers lean on the emptiness to skip the rule rather than emit a class that |
| 540 | /// sets nothing: a class that sets no properties is a class that means "I |
| 541 | /// thought about this", which is what comments are for. |
| 542 | /// |
| 543 | /// The two halves are emitted independently because [`Depth::Sunken`] has a |
| 544 | /// fill and no bevel. Requiring both would silently drop the fill for exactly |
| 545 | /// that case. Independent does not |
| 546 | /// mean unpaired: both halves still come off one `Depth`, so they cannot |
| 547 | /// disagree about what the region is. |
| 548 | |
| 549 | |
| 550 | let mut css = Stringnew; |
| 551 | if let Some = depth.fill |
| 552 | let _ = writeln!; |
| 553 | |
| 554 | if let Some = depth.bevel |
| 555 | let _ = writeln!; |
| 556 | |
| 557 | css |
| 558 | |
| 559 | |
| 560 | /// One rule giving a selector a depth, or nothing when the depth declares |
| 561 | /// nothing. |
| 562 | |
| 563 | |
| 564 | let body = depth_declarations; |
| 565 | if body.is_empty |
| 566 | return Stringnew; |
| 567 | |
| 568 | format! |
| 569 | |
| 570 | |
| 571 | /// The media condition a hover rule has to sit inside, or `None` if hover is |
| 572 | /// unconditional. |
| 573 | /// |
| 574 | /// Two crates answer this and neither answer is made here. `makeover-touch` |
| 575 | /// owns *whether* hover exists at a density, and `makeover-geometry` owns how |
| 576 | /// that capability is spelled as a media condition. Asking both is what stops |
| 577 | /// this renderer minting a third opinion, which is what all three apps did: |
| 578 | /// goingson sniffed the user agent, Balanced Breakfast used `(hover: none)` |
| 579 | /// alone, and the MNW server had no gate at all. |
| 580 | /// |
| 581 | /// [`SizeClass`] is required by [`Affordance::available`] and ignored by this |
| 582 | /// member, which reports as much through `reads_size`. Passing Compact is not |
| 583 | /// a claim about width; the test below pins that every class agrees. |
| 584 | |
| 585 | if Hover.available |
| 586 | // A fingertip grew a hover state. Nothing to gate, and this renderer |
| 587 | // should not invent a reason to gate anyway. |
| 588 | None |
| 589 | else |
| 590 | Some |
| 591 | |
| 592 | |
| 593 | |
| 594 | /// Put a rule inside a media query, or leave it alone. |
| 595 | |
| 596 | let Some = condition else |
| 597 | return rule.to_string; |
| 598 | ; |
| 599 | let mut css = format!; |
| 600 | for line in rule.lines |
| 601 | // Blank lines stay blank. Indenting one leaves trailing whitespace, |
| 602 | // which is the sort of thing a formatter later reverts and calls a diff. |
| 603 | if line.is_empty |
| 604 | css.push; |
| 605 | else |
| 606 | let _ = writeln!; |
| 607 | |
| 608 | |
| 609 | css.push_str; |
| 610 | css |
| 611 | |
| 612 | |
| 613 | /// The keyboard focus ring, placed by the depth it lands on. |
| 614 | /// |
| 615 | /// This is the webview's **focus ring** and nothing more. **Reach** and |
| 616 | /// **focus** are both the browser's — the document decides what is reachable |
| 617 | /// and `:focus-visible` decides which reached thing wears the ring — and no |
| 618 | /// description states either. The three terms are defined once in |
| 619 | /// `makeover_layout`'s crate header, "Reach, focus and the focus ring". |
| 620 | /// |
| 621 | /// One ring for the whole system, because a focus ring's job is to be |
| 622 | /// recognised and three apps having three of them is the failure. What varies |
| 623 | /// is where it sits, and that comes off [`Depth`] rather than off a per- |
| 624 | /// component choice: a well takes the ring inside its own edge, and anything |
| 625 | /// standing proud of the page takes it outside. |
| 626 | /// |
| 627 | /// `outline` rather than the composed `box-shadow` the invalid-field ring at |
| 628 | /// [`field_rules`] uses, and deliberately the one place the two rings are built |
| 629 | /// differently. A `box-shadow` ring has to restate the bevel beside it, because |
| 630 | /// `box-shadow` is not additive and a lone ring silently drops the well out |
| 631 | /// from under the element. That restatement is a second copy of the depth, |
| 632 | /// living in a different function from the first, and it is exactly the |
| 633 | /// duplication `Depth` exists to prevent. `outline` occupies its own property, |
| 634 | /// so the bevel survives untouched and there is nothing to keep in agreement. |
| 635 | /// They render the same: both are a flush ring one border-width wide. |
| 636 | |
| 637 | |
| 638 | let w = opts.focus_width; |
| 639 | // Same magnitude either way, and only the sign comes off the depth. Both |
| 640 | // values are what the consumers had already converged on independently: |
| 641 | // 2px out is what all three wrote, and 2px in is the MNW server's own |
| 642 | // answer for the one inset ring it had. |
| 643 | let offset = match depth.bevel |
| 644 | // Inside the well, clear of its edge rather than painted over it. |
| 645 | Some => format!, |
| 646 | // Raised, or no edge at all. Outside, standing off by its own width. |
| 647 | _ => w.to_string, |
| 648 | ; |
| 649 | // The token by name. It is `makeover`'s, derived from the action colour, |
| 650 | // and reaching it through a description member was a second path to the |
| 651 | // same variable for as long as one existed. |
| 652 | format! |
| 653 | ".{selector}:focus-visible {{\n outline: {w} solid var(--focus-ring);\n outline-offset: {offset};\n}}\n" |
| 654 | |
| 655 | |
| 656 | |
| 657 | /// A rest depth said out loud on both axes, for a rule that has to beat the |
| 658 | /// states above it. |
| 659 | /// |
| 660 | /// [`depth_declarations`] states an axis only when the depth has something to |
| 661 | /// say about it, which is right for a rest rule: a [`Depth::Flat`] region |
| 662 | /// inherits what it sits on, and asserting `background: none` there would be |
| 663 | /// the difference between level-with and painted-transparent. It is wrong for |
| 664 | /// a rule whose whole job is to take a state back. An axis left unstated is an |
| 665 | /// axis the state above keeps, so `Flat` re-asserted nothing at all and a |
| 666 | /// disabled control kept whatever hover had given it. |
| 667 | /// |
| 668 | /// So the axes the depth is silent on are withdrawn rather than skipped, and |
| 669 | /// the withdrawal is spelled by [`reset`] rather than here, so a disabled |
| 670 | /// control and a flat one say the same words. Reaches further than the fill: |
| 671 | /// [`Depth::Sunken`] and [`Depth::Overlay`] have no bevel either, and the |
| 672 | /// pressed rule above hands out an inset one. |
| 673 | |
| 674 | let mut css = Stringnew; |
| 675 | match depth.fill |
| 676 | Some => |
| 677 | let _ = writeln!; |
| 678 | |
| 679 | None => css.push_str, |
| 680 | |
| 681 | match depth.bevel |
| 682 | Some => |
| 683 | let _ = writeln!; |
| 684 | |
| 685 | None => css.push_str, |
| 686 | |
| 687 | css |
| 688 | |
| 689 | |
| 690 | /// Present, visible, and not answering. |
| 691 | /// |
| 692 | /// Matches the ARIA attribute as well as the pseudo-class, because `:disabled` |
| 693 | /// only matches form elements and half the things this crate emits are not |
| 694 | /// one: a `div` carrying `.chip` or `.tab` can never be `:disabled`. Keying on |
| 695 | /// the accessible state is the pattern [`field_rules`] already establishes for |
| 696 | /// `aria-invalid`, on the reasoning that one fact read by both the styling and |
| 697 | /// the accessibility tree cannot drift from itself. |
| 698 | /// |
| 699 | /// The rest depth is re-asserted rather than assumed, because this rule has to |
| 700 | /// beat the hover and pressed rules above it. It does that on source order at |
| 701 | /// equal specificity, not by out-specifying them: every rule this function's |
| 702 | /// caller emits is (0,2,0), and adding a `:not(:disabled)` anywhere would raise |
| 703 | /// one of them and have to be unpicked when this output moves inside its own |
| 704 | /// cascade layer. |
| 705 | /// |
| 706 | /// Re-asserted on **both** axes, through [`rest_declarations`]. |
| 707 | /// `depth_declarations` alone is empty for [`Depth::Flat`], so a flat control |
| 708 | /// would win the contest with nothing to say and keep the hover surface |
| 709 | /// underneath a control that had stopped answering. |
| 710 | |
| 711 | |
| 712 | format! |
| 713 | ".{selector}:disabled,\n.{selector}[aria-disabled=\"true\"] {{\n{} color: var(--{});\n cursor: not-allowed;\n}}\n" |
| 714 | rest_declarations, |
| 715 | Disabled.token |
| 716 | ) |
| 717 | |
| 718 | |
| 719 | /// Every state a selector that answers a click implies: hover, pressed, focus |
| 720 | /// and disabled, in that order. |
| 721 | /// |
| 722 | /// Order is the whole cascade mechanism here. All four selectors are |
| 723 | /// specificity (0,2,0), so disabled wins over hover and pressed by coming last |
| 724 | /// and by nothing else. |
| 725 | /// |
| 726 | /// Pressed emits [`Depth::pressed`] in full, fill and edge together. Emitting |
| 727 | /// only the edge is what left goingson hand-writing `background: |
| 728 | /// var(--surface-sunken)` on three separate rules, and a fill that does not |
| 729 | /// travel with its edge is precisely the disagreement `Depth` exists to make |
| 730 | /// unrepresentable. So the pressed fill comes from the description |
| 731 | /// (`--surface-well`) rather than from whatever each app reached for. |
| 732 | /// |
| 733 | /// Hover has no member in the description and is renderer policy: a terminal |
| 734 | /// and an immediate-mode painter have no hover to express. It resolves against |
| 735 | /// `--hover-surface`, which `makeover` already derives and which nothing |
| 736 | /// consumed until now. What it *is* gated on is capability, via |
| 737 | /// [`hover_condition`]. Before that gate existed the apps each wrote their own: |
| 738 | /// goingson's section 60 exists solely to take back the hover state this |
| 739 | /// function had just handed it, by out-specifying a rule it does not own. |
| 740 | /// |
| 741 | /// `depth` is the selector's **rest** depth, used to place the focus ring and |
| 742 | /// to restore the surface under a disabled control. The pressed rule keeps |
| 743 | /// inverting from [`Depth::Raised`] regardless: a tab's unchosen depth is |
| 744 | /// [`Depth::Sunken`], and `Sunken.pressed()` is `Sunken`, so deriving the press |
| 745 | /// from the rest depth would leave a tab with no press at all. |
| 746 | |
| 747 | |
| 748 | let mut css = gated |
| 749 | hover_condition, |
| 750 | &format!, |
| 751 | ; |
| 752 | css.push_str |
| 753 | &format!, |
| 754 | Raised.pressed, |
| 755 | ; |
| 756 | css.push_str; |
| 757 | css.push_str; |
| 758 | css |
| 759 | |
| 760 | |
| 761 | /// One rule per depth: its fill and its edge, together. |
| 762 | /// |
| 763 | /// A depth and nothing else. `.raised` says a surface sits on what is behind |
| 764 | /// it, which is a statement about the shape and not about what happens when a |
| 765 | /// pointer arrives, so it emits no hover, press, focus or disabled rule. The |
| 766 | /// named surfaces are where interaction lives: `.card` and `.button` are the |
| 767 | /// same depth *and* controls, and they get their states from |
| 768 | /// [`surface_rules`]. |
| 769 | /// |
| 770 | /// Giving this class the interactive set leaves the vocabulary with no raised |
| 771 | /// surface that is merely an object, so a consumer that needs one has to take a |
| 772 | /// control class and cancel half of it. |
| 773 | |
| 774 | |
| 775 | let mut css = Stringnew; |
| 776 | for depth in |
| 777 | let Some = depth_class else |
| 778 | continue; |
| 779 | ; |
| 780 | css.push_str; |
| 781 | |
| 782 | css |
| 783 | |
| 784 | |
| 785 | /// The three surfaces that are a depth with a name. |
| 786 | /// |
| 787 | /// `button` and `card` are both [`Depth::Raised`], and `field` is a |
| 788 | /// [`Depth::Well`] because that is the reading `Depth`'s own documentation |
| 789 | /// gives a text field. Their bodies come out identical by construction rather |
| 790 | /// than by hand: three hand-written copies in goingson's stylesheet is what |
| 791 | /// phase A deletes, and generating them from one call is what stops them |
| 792 | /// drifting apart again. |
| 793 | |
| 794 | let mut css = Stringnew; |
| 795 | for name in |
| 796 | let c = class; |
| 797 | css.push_str; |
| 798 | css.push_str; |
| 799 | |
| 800 | |
| 801 | let field = class; |
| 802 | css.push_str; |
| 803 | |
| 804 | // A field takes focus and refuses input like everything else here, and got |
| 805 | // neither until now, which is why all three apps hand-write a focus ring |
| 806 | // for it and no two of them match. No hover or pressed: a text field does |
| 807 | // not light up under the pointer and does not invert when clicked, so the |
| 808 | // two states `interactive_rules` would add are the two it does not have. |
| 809 | css.push_str; |
| 810 | css.push_str; |
| 811 | |
| 812 | // Keyed on the ARIA attribute rather than on a class, so the visual state |
| 813 | // and the accessible state cannot drift apart: there is one fact and both |
| 814 | // read it. goingson already drove its invalid styling this way and was |
| 815 | // right to; the `.invalid` class this emitted before 0.5.0 was a second |
| 816 | // place to forget. |
| 817 | // |
| 818 | // The ring composes *after* the bevel rather than replacing it. box-shadow |
| 819 | // is not additive, so a lone ring silently dropped the well out from under |
| 820 | // an invalid field. Flat and unlit: this edge is saying "wrong", and |
| 821 | // lighting one side would have it say "raised" at the same time. |
| 822 | let _ = writeln! |
| 823 | css, |
| 824 | ".{field}[aria-invalid=\"true\"] {{\n box-shadow: var({}), 0 0 0 {} var(--danger);\n}}" |
| 825 | bevel_var, |
| 826 | opts.border_width |
| 827 | ); |
| 828 | css |
| 829 | |
| 830 | |
| 831 | /// Badges and chips. |
| 832 | /// |
| 833 | /// The one place phase A changes how goingson looks rather than only where its |
| 834 | /// rules live. [`Token::Badge`] is [`Depth::Flat`], so a badge emits no fill |
| 835 | /// and no edge at all, where goingson ships `.tag, .badge` as a single rule |
| 836 | /// carrying the raised bevel. Splitting that means reading every call site to |
| 837 | /// decide which of the two it always was. |
| 838 | /// |
| 839 | /// What a badge does carry is a [`Tone`], the intent family it shares with |
| 840 | /// notices and nothing else. Neutral is the bare class rather than a variant, |
| 841 | /// because it is the absence of a status and not a status called "none". |
| 842 | /// Text that goes somewhere. |
| 843 | /// |
| 844 | /// The one inline control. A table cell carries `cell-link`, deliberately |
| 845 | /// unruled because the cell's own rule covers it; this is the same thing |
| 846 | /// outside a table, which is what a described run holds when a sentence |
| 847 | /// contains a link. |
| 848 | /// |
| 849 | /// Colour and underline only. Whether a link is inline in a sentence or sitting |
| 850 | /// on its own line is the app's layout, and how much room it takes is |
| 851 | /// `makeover-geometry`'s. What is here is the pair of signals that say "this |
| 852 | /// goes somewhere" and nothing that says where it sits. |
| 853 | /// |
| 854 | /// The visited arm is deliberately absent. A link inside an app points at the |
| 855 | /// app's own screens, which the user is expected to have been to, so painting |
| 856 | /// them differently marks almost everything and distinguishes nothing. |
| 857 | |
| 858 | let mut css = Stringnew; |
| 859 | let link = class; |
| 860 | |
| 861 | let _ = writeln! |
| 862 | css, |
| 863 | ".{link} {{\n color: var(--action);\n \ |
| 864 | text-decoration: underline;\n}}" |
| 865 | ; |
| 866 | // The hover step is the same one every other control takes, and it is a |
| 867 | // colour rather than a surface: a link has no box to raise. |
| 868 | let _ = writeln! |
| 869 | css, |
| 870 | "@media (hover: hover) and (pointer: fine) {{\n .{link}:hover \ |
| 871 | {{\n color: var(--action-hover);\n }}\n}}" |
| 872 | ; |
| 873 | let _ = writeln! |
| 874 | css, |
| 875 | ".{link}:focus-visible {{\n outline: {} solid var(--focus-ring);\n \ |
| 876 | outline-offset: 2px;\n}}" |
| 877 | opts.focus_width |
| 878 | ); |
| 879 | // A link is often a `<button>` rather than an `<a>`: a renderer picks the |
| 880 | // element from the method, so a link that writes is a button that has to |
| 881 | // stop looking like one. What that costs is named in [`reset`]. |
| 882 | css.push_str; |
| 883 | css |
| 884 | |
| 885 | |
| 886 | |
| 887 | let mut css = Stringnew; |
| 888 | |
| 889 | // No `depth_rule` call here, deliberately: `Token::Badge.depth(_)` is Flat, |
| 890 | // and a label with an edge says it can be pressed. |
| 891 | let badge = class; |
| 892 | // `content-muted` literally, not `Tone::Neutral.token()`. What makes a |
| 893 | // badge quiet is `Token::Badge` answering no click, which this crate holds |
| 894 | // and `Tone` genuinely does not know. Routing it through Neutral put the |
| 895 | // claim where the evidence was not, and the bill arrived on the figure |
| 896 | // value: it took the same muting from the same call and read as its own |
| 897 | // caption. Neutral answers `content` from makeover-layout 0.36.0. |
| 898 | let _ = writeln!; |
| 899 | for tone in |
| 900 | let _ = writeln! |
| 901 | css, |
| 902 | ".{badge}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 903 | tone.token |
| 904 | ); |
| 905 | |
| 906 | |
| 907 | // A button carries the four tones a badge does. It had none, on the reading |
| 908 | // that a control's colour is its surface rather than its text, and that |
| 909 | // reading has one hole big enough to matter: the button that destroys |
| 910 | // something. Every consumer had written that rule itself, and a description |
| 911 | // that says `Tone::Danger` on an act had nowhere for it to land. |
| 912 | // |
| 913 | // Colour and not a fill, matching the badge. A red surface is a decision |
| 914 | // about emphasis that belongs to an app's own layer, and two of them |
| 915 | // fighting is worse than neither. |
| 916 | let button = class; |
| 917 | for tone in |
| 918 | let _ = writeln! |
| 919 | css, |
| 920 | ".{button}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 921 | tone.token |
| 922 | ); |
| 923 | |
| 924 | |
| 925 | // A chip holds itself down, which is `Depth::pressed` arrived at |
| 926 | // independently by two apps. `removable` is a remove affordance, so it is |
| 927 | // markup and waits for phase B. |
| 928 | let chip = class; |
| 929 | let unlatched = Chip ; |
| 930 | css.push_str; |
| 931 | css.push_str; |
| 932 | css.push_str |
| 933 | &format!, |
| 934 | unlatched.depth, |
| 935 | ; |
| 936 | css |
| 937 | |
| 938 | |
| 939 | /// The three selectors, each named by what it picks. |
| 940 | /// |
| 941 | /// A tab comes *forward* to join the pane it opens, which is why |
| 942 | /// [`Selector::Tabs`] chooses [`Depth::Raised`] where a segment and a toggle |
| 943 | /// are held in. That is the folder semantic, and it is the whole reason the |
| 944 | /// three are not one member with a flag. |
| 945 | /// |
| 946 | /// [`Selector::abutting`] is not emitted: whether the options touch is |
| 947 | /// spacing, and spacing is `makeover-geometry`'s question to answer. |
| 948 | /// |
| 949 | /// Both states emit. Naming only the chosen option leaves an unchosen one |
| 950 | /// falling through to [`Depth::Flat`] with nothing drawn for it, so an app has |
| 951 | /// to hand-write the recess that makes its chosen tab read as forward. |
| 952 | |
| 953 | let mut css = Stringnew; |
| 954 | for selector in |
| 955 | let c = class; |
| 956 | css.push_str; |
| 957 | css.push_str; |
| 958 | css.push_str; |
| 959 | |
| 960 | css |
| 961 | |
| 962 | |
| 963 | /// The parts of a list row. |
| 964 | /// |
| 965 | /// The list is written out rather than derived because `RowPart` is |
| 966 | /// `#[non_exhaustive]`, so there is nothing to iterate. A member added upstream emits no rule until it is named here, which |
| 967 | /// is the trade `non_exhaustive` makes: a silent gap instead of a build break. |
| 968 | /// [`part_class`] carries the same list and the same obligation. |
| 969 | |
| 970 | let mut css = Stringnew; |
| 971 | |
| 972 | // The container the rows sit in, giving back what a `<ul>` brought. Not a |
| 973 | // size: there is no magnitude in it, which is the line this crate holds. |
| 974 | css.push_str; |
| 975 | |
| 976 | for part in |
| 977 | Primary, |
| 978 | Secondary, |
| 979 | Meta, |
| 980 | Actions, |
| 981 | Tokens, |
| 982 | Proportion, |
| 983 | ] |
| 984 | let c = class; |
| 985 | |
| 986 | // Actions carry controls rather than text, and `RowPart::intent` says |
| 987 | // so by returning the same intent inheriting already gives. Pinning it |
| 988 | // would be louder than saying nothing. Tokens answer alike, for their |
| 989 | // own reason: each token carries its own tone, and a colour on the |
| 990 | // strip would fight the things sitting in it. A proportion is the same |
| 991 | // case again: the meter inside carries the tone. |
| 992 | if !matches! |
| 993 | part, |
| 994 | Actions | Tokens | Proportion |
| 995 | |
| 996 | let _ = writeln!; |
| 997 | |
| 998 | |
| 999 | // A row's actions are shown at rest. `RowPart::revealed_on_hover` said |
| 1000 | // otherwise and was not honoured here from 0.23.0; makeover-layout |
| 1001 | // 0.13.0 retired the method, so there is no longer a description saying |
| 1002 | // one thing and a renderer doing another. |
| 1003 | // |
| 1004 | // The rule was `opacity: 0` gated to pointer devices, revealed on |
| 1005 | // `:hover` and on `:focus-within`. Each escape it needed was a report |
| 1006 | // that hiding was wrong for somebody: `focus-within` because tabbing |
| 1007 | // could never reach an action; the gate because a fingertip had no way |
| 1008 | // to unhide, which both webview apps had already hand-written |
| 1009 | // `opacity: 1` to undo. What was left was a control hidden from |
| 1010 | // exactly one group: people using a pointer, who are also the group |
| 1011 | // scanning a list to find out what can be done to a row. |
| 1012 | // |
| 1013 | // A settings screen is where that reads worst: the whole reason to be |
| 1014 | // on it is to remove a key, and the button doing so was invisible |
| 1015 | // until pointed at. A table cell's actions were never hidden, so the |
| 1016 | // two arrangements now agree. |
| 1017 | |
| 1018 | |
| 1019 | // A part that may take two lines. `Flow::Tight` gets no rule: one line is |
| 1020 | // what a run already does, and restating it here would put a declaration on |
| 1021 | // every part in every row to say nothing. |
| 1022 | // |
| 1023 | // This is the shape both webview apps had already written by hand and |
| 1024 | // commented -- Balanced Breakfast on a feed row's title, goingson on a |
| 1025 | // problem's body -- which is the whole argument for the description |
| 1026 | // carrying it. `-webkit-` prefixed and unprefixed together: the prefixed |
| 1027 | // trio is what every engine actually implements, and `line-clamp` is the |
| 1028 | // standard property landing behind it. |
| 1029 | let _ = writeln! |
| 1030 | css, |
| 1031 | ".{} {{\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: {lines};\n line-clamp: {lines};\n overflow: hidden;\n}}" |
| 1032 | class, |
| 1033 | lines = Relaxed.lines |
| 1034 | ); |
| 1035 | |
| 1036 | // A row inside a hierarchy: a tree, an outline, a threaded list. |
| 1037 | // `edf33114`, decided 2026-08-30 (Max). makeover-layout names the concept |
| 1038 | // as `Nesting` -- deliberately not `Depth`, which is surface bevel in that |
| 1039 | // crate -- and this is the rule. |
| 1040 | // |
| 1041 | // Measured 2026-08-30: quasi-webview has been emitting `row-nested` with |
| 1042 | // `style="--row-depth:N"` on every described hierarchy, and **no stylesheet |
| 1043 | // anywhere in the tree read any of it**. So a described outline in a |
| 1044 | // browser was a flat list with chevrons in it -- the folding worked and the |
| 1045 | // indent did not exist. |
| 1046 | // |
| 1047 | // The magnitude is a custom property with a fallback, which is this crate's |
| 1048 | // own shape: `--awaiting-gap` above is the precedent, and an app overriding |
| 1049 | // `--row-indent` is how a level becomes worth more or less. What a level IS |
| 1050 | // stays the description's; what it is WORTH is a renderer's, and a terminal |
| 1051 | // spending columns for the same fact is not disagreeing. |
| 1052 | // |
| 1053 | // Here rather than in each app, and that was a live option rather than an |
| 1054 | // oversight. `row-select`, `row-current` and `row-chosen` are app-styled by |
| 1055 | // design; the indent is not decoration, it is what the description MEANS, |
| 1056 | // and three apps agreeing about it by accident is not agreement. |
| 1057 | // |
| 1058 | // `padding` and not `margin`: a row is a box that can be selected and |
| 1059 | // hovered, and indenting with margin would take the indent out of the |
| 1060 | // highlight, so the shading under a nested row would start where its text |
| 1061 | // does rather than where its row does. |
| 1062 | let _ = writeln! |
| 1063 | css, |
| 1064 | ".{} {{\n padding-inline-start: calc(var(--row-depth, 0) * var(--row-indent, 1.5ch));\n}}" |
| 1065 | class |
| 1066 | ); |
| 1067 | |
| 1068 | // The two halves of a branch, emitted by quasi-webview and unstyled until |
| 1069 | // now for the same reason. |
| 1070 | // |
| 1071 | // A branch row is the one a reader can fold, and the chevron is its hit |
| 1072 | // target. The chevron is drawn by the app or the description -- this says |
| 1073 | // where it sits and how big the target is, which is the accessibility fact |
| 1074 | // rather than the decorative one: a control smaller than this is one a |
| 1075 | // finger misses. |
| 1076 | let _ = writeln! |
| 1077 | css, |
| 1078 | ".{} {{\n display: flex;\n align-items: baseline;\n gap: var(--row-disclose-gap, 0.5ch);\n}}" |
| 1079 | class |
| 1080 | ); |
| 1081 | let _ = writeln! |
| 1082 | css, |
| 1083 | ".{} {{\n flex: none;\n min-inline-size: var(--tap-target, 2rem);\n min-block-size: var(--tap-target, 2rem);\n background: none;\n border: 0;\n color: inherit;\n cursor: pointer;\n}}" |
| 1084 | class |
| 1085 | ); |
| 1086 | |
| 1087 | css |
| 1088 | |
| 1089 | |
| 1090 | /// A row of things that share their space, and what each fallback gets here. |
| 1091 | /// |
| 1092 | /// Ruling: wiki `layout-room-and-fallback`, Max. Rule 1 is that every described |
| 1093 | /// member is in flow, and these rules are how that is kept rather than asked |
| 1094 | /// for. A member taken out of flow with `position: absolute` contributes zero |
| 1095 | /// width to the row it shares, so nothing can collide with it and nothing |
| 1096 | /// prevents the collision. |
| 1097 | /// |
| 1098 | /// # The floor, which is most of the fix |
| 1099 | /// |
| 1100 | /// `.run > *` gets `min-width: min-content`. That is the derived minimum the |
| 1101 | /// ruling asks for, in this renderer's own unit and stated by the browser |
| 1102 | /// rather than by anybody: a member cannot be squeezed narrower than what is |
| 1103 | /// in it, so members in one flow push each other instead of overlapping. It |
| 1104 | /// costs no query and no number, and it is what fixes all four measured widths |
| 1105 | /// whichever fallback the group declared. |
| 1106 | /// |
| 1107 | /// # A member that asks to fill |
| 1108 | /// |
| 1109 | /// `.run > [data-width="fill"]` gets `flex: 1 1 0`, which is the second half of |
| 1110 | /// what a column has always been able to say, reaching a row of regions. |
| 1111 | /// `flex-basis: 0` and not `auto` is what makes several fills divide the room |
| 1112 | /// equally rather than dividing the leftovers in proportion to their contents; |
| 1113 | /// equal division is [`makeover_layout::Width::Fill`]'s own stated rule. The |
| 1114 | /// floor above still applies, so a fill cannot shrink under what is in it. |
| 1115 | /// |
| 1116 | /// A member that says nothing gets nothing, because a flex item with the floor |
| 1117 | /// and no grow is already content-sized. That is why the omitted value here is |
| 1118 | /// `Content` while a control omits `Fill`: each position leaves out what it |
| 1119 | /// already did. |
| 1120 | /// |
| 1121 | /// # What each fallback gets, exactly |
| 1122 | /// |
| 1123 | /// [`Fallback::Wrap`] is `flex-wrap: wrap`, which is exact. The browser wraps |
| 1124 | /// the run when the members no longer fit, deciding that from their own |
| 1125 | /// intrinsic widths, which is the derived minimum doing the whole job. |
| 1126 | /// |
| 1127 | /// [`Fallback::Stack`] is wrap plus `flex: 1 1 max-content` on the members, so |
| 1128 | /// a member that cannot sit beside its sibling takes a line of its own and |
| 1129 | /// fills it. For the two-member run this was ruled on -- a tab strip and a |
| 1130 | /// band -- that is precisely "a row becomes a column". |
| 1131 | /// |
| 1132 | /// [`Fallback::Shed`] and [`Fallback::Menu`] get wrap, and this renderer is |
| 1133 | /// honouring less than the description says. **CSS cannot express either one |
| 1134 | /// without breaking the ruling's own first constraint.** Both need to know that |
| 1135 | /// the run is out of room in order to take a member out of it, a container |
| 1136 | /// query is the only construct that can ask, and `@container` compares against |
| 1137 | /// a `<length>` -- there is no `@container (inline-size < min-content)`. So |
| 1138 | /// every honest spelling of Shed here needs an authored breakpoint, which is |
| 1139 | /// the thing the ruling exists to forbid, and the dishonest ones are worse: a |
| 1140 | /// clamped height clips by document order rather than by [`Priority`], and |
| 1141 | /// `display: none` under a viewport `@media` is the `nth-child(n+5)` bug the |
| 1142 | /// vocabulary replaced. |
| 1143 | /// |
| 1144 | /// Wrapping is the right thing to do instead. It keeps every member reachable, |
| 1145 | /// which is the property that was actually broken -- goingson's new-contact |
| 1146 | /// button left the viewport entirely at 560 -- and it keeps rule 1. A renderer |
| 1147 | /// answering with less than was described is precedented and deliberate here: |
| 1148 | /// [`makeover_layout::Region::Columns`] says a terminal stacking a board's |
| 1149 | /// columns is honouring the description rather than degrading it. |
| 1150 | /// |
| 1151 | /// The real mechanism needs the shed members to have somewhere to go, which is |
| 1152 | /// markup and belongs to quasi-webview: an overflow control is a member of the |
| 1153 | /// run, and the description does not yet say that a member *is* one. |
| 1154 | /// |
| 1155 | /// # Menu, once a script is measuring |
| 1156 | /// |
| 1157 | /// That is now built, in `quasi-webview`'s `menu.js`, and this crate's half of |
| 1158 | /// it is two classes and one override. A script that has taken a menu run over |
| 1159 | /// marks it `data-menu`, and a marked run goes back to `nowrap`: wrapping is |
| 1160 | /// what hides the overflow condition the script is trying to measure. The |
| 1161 | /// unmarked rule above is untouched, so a page that ships no script still |
| 1162 | /// wraps, which is rule 1 — every member reachable — rather than a strip with |
| 1163 | /// tabs squeezed off the end. |
| 1164 | /// |
| 1165 | /// `.run-overflow` is the control the shed members move into and |
| 1166 | /// `.run-overflow-items` is where they land. The geometry is this crate's the |
| 1167 | /// way every other surface's is; what is *in* it is the script's, because which |
| 1168 | /// members no longer fit is a measurement and not a description. |
| 1169 | |
| 1170 | let run = class; |
| 1171 | let mut css = Stringnew; |
| 1172 | |
| 1173 | // `flex-wrap: nowrap` is stated rather than left to the default, because |
| 1174 | // the fallbacks below are read as overrides of this line and a reader |
| 1175 | // should not have to know which way flexbox leans to see that. |
| 1176 | // |
| 1177 | // No gap. Spacing between members is the app's, the same way this crate |
| 1178 | // states no margins anywhere else; a gap here would be a size, and the one |
| 1179 | // hardcoded size in the mechanism is makeover-geometry's contact patch. |
| 1180 | let _ = writeln! |
| 1181 | css, |
| 1182 | ".{run} {{\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}}" |
| 1183 | ; |
| 1184 | |
| 1185 | // The derived minimum, and the whole reason a member can no longer be |
| 1186 | // overlapped. `min-width: auto` is flexbox's default for a flex item and is |
| 1187 | // *not* the same thing: auto lets an item be compressed below its content |
| 1188 | // in a nowrap run, which is how a toolbar ends up drawn over a tab strip |
| 1189 | // even without anything leaving the flow. |
| 1190 | let _ = writeln!; |
| 1191 | |
| 1192 | // A member that absorbs what is left. `flex-basis: 0` rather than `auto` is |
| 1193 | // what makes several fills divide the room equally instead of dividing the |
| 1194 | // leftovers in proportion to what is already in them, which is |
| 1195 | // `Width::Fill`'s own rule and the one thing that type states about more |
| 1196 | // than one of them. |
| 1197 | // |
| 1198 | // The `min-width: min-content` floor above is deliberately not overridden. |
| 1199 | // A fill that could shrink below its contents would overlap its neighbour, |
| 1200 | // which is rule 1, and equal division under a floor is still equal division |
| 1201 | // everywhere the floor is not reached. |
| 1202 | // |
| 1203 | // Attribute rather than class, because the width is a fact the description |
| 1204 | // carried rather than a hook this crate invented: the same division |
| 1205 | // `data-tone` and `data-selector` are on the right side of. It beats the |
| 1206 | // `Stack` rule below on specificity whichever order they are written in, |
| 1207 | // which is what a member asking to fill should do to a blanket. |
| 1208 | let _ = writeln! |
| 1209 | css, |
| 1210 | ".{run} > [data-width=\"fill\"] {{\n flex: 1 1 0;\n}}" |
| 1211 | ; |
| 1212 | |
| 1213 | for fallback in |
| 1214 | Wrap, |
| 1215 | Stack, |
| 1216 | Shed, |
| 1217 | Menu, |
| 1218 | ] |
| 1219 | let name = fallback_class; |
| 1220 | let c = class; |
| 1221 | let _ = writeln!; |
| 1222 | if matches! |
| 1223 | let _ = writeln!; |
| 1224 | |
| 1225 | |
| 1226 | |
| 1227 | // A menu run a script has taken over. The mark is the script's and this is |
| 1228 | // the only rule that reads it: wrapping is what a run does when nothing is |
| 1229 | // measuring, and it is also what makes the overflow unmeasurable, since a |
| 1230 | // wrapped run always fits. The two cannot both be on. |
| 1231 | let menu = class; |
| 1232 | let _ = writeln!; |
| 1233 | |
| 1234 | // The overflow control, and it is a member of the run like any other: in |
| 1235 | // flow, at the end, taking the width of what is in it. `relative` is what |
| 1236 | // the items hang off. |
| 1237 | let overflow = class; |
| 1238 | let items = class; |
| 1239 | let _ = writeln!; |
| 1240 | |
| 1241 | // Overlaid rather than in flow, for the reason every menu is: a control |
| 1242 | // that pushed the page down when it opened would change the layout it was |
| 1243 | // opened to escape. `inset-inline-end: 0` rather than a left, so the panel |
| 1244 | // stays on the page in both writing directions. |
| 1245 | // |
| 1246 | // No width, no padding and no border. All three are sizes and sizes are |
| 1247 | // makeover-geometry's; what is stated here is placement, the surface and |
| 1248 | // the shadow that separates it from the page, which is the same division |
| 1249 | // `figure_rules` and the timeline entry make. The elevation shadow is what |
| 1250 | // an overlaid surface takes instead of an edge -- see `ELEVATION_PROPERTY`. |
| 1251 | let _ = writeln! |
| 1252 | css, |
| 1253 | ".{items} {{\n \ |
| 1254 | position: absolute;\n \ |
| 1255 | inset-block-start: 100%;\n \ |
| 1256 | inset-inline-end: 0;\n \ |
| 1257 | z-index: 1;\n \ |
| 1258 | display: flex;\n \ |
| 1259 | flex-direction: column;\n \ |
| 1260 | align-items: stretch;\n \ |
| 1261 | background: var(--surface-raised);\n \ |
| 1262 | box-shadow: var(--elevation-overlay);\n\ |
| 1263 | }}" |
| 1264 | ; |
| 1265 | |
| 1266 | // `hidden` is how the script closes it, and a flex display would otherwise |
| 1267 | // beat the attribute's own `display: none`. |
| 1268 | let _ = writeln!; |
| 1269 | |
| 1270 | css |
| 1271 | |
| 1272 | |
| 1273 | /// Every class [`fallback_class`] can return, plus the run itself. |
| 1274 | /// |
| 1275 | /// [`ROW_PART_CLASSES`](crate::list::ROW_PART_CLASSES)'s reasoning and the same |
| 1276 | /// obligation: a `match` over a `#[non_exhaustive]` enum cannot be enumerated |
| 1277 | /// from outside, so the list sits beside it and a test holds the two together. |
| 1278 | /// `run` is in it because it is emitted in its own right rather than only as a |
| 1279 | /// fallback's fallback. |
| 1280 | pub const RUN_CLASSES: & = & |
| 1281 | "run", |
| 1282 | "run-wrap", |
| 1283 | "run-stack", |
| 1284 | "run-shed", |
| 1285 | "run-menu", |
| 1286 | // Not returned by `fallback_class`: these two are the overflow control a |
| 1287 | // measuring renderer builds, and they are in the list because the list is |
| 1288 | // what a host seals its vocabulary against. A class emitted by a script and |
| 1289 | // missing from here is a control with no surface and no edge. |
| 1290 | "run-overflow", |
| 1291 | "run-overflow-items", |
| 1292 | ]; |
| 1293 | |
| 1294 | /// The class a run carries for what it does when it is tight. |
| 1295 | /// |
| 1296 | /// A run always carries `.run` as well, so an unrecognised fallback -- the enum |
| 1297 | /// is `#[non_exhaustive]` -- lands as a plain nowrap row with the min-content |
| 1298 | /// floor still under it. That is the safe failure: every member in flow and |
| 1299 | /// none overlapped, which is the property, with only the rearrangement missing. |
| 1300 | |
| 1301 | |
| 1302 | match fallback |
| 1303 | Wrap => "run-wrap", |
| 1304 | Stack => "run-stack", |
| 1305 | Shed => "run-shed", |
| 1306 | Menu => "run-menu", |
| 1307 | _ => "run", |
| 1308 | |
| 1309 | |
| 1310 | |
| 1311 | /// The progress trough these rules fill. |
| 1312 | /// |
| 1313 | /// [`meter::meter_html`](crate::meter::meter_html) is what fills these. |
| 1314 | /// |
| 1315 | /// The rules stay a superset of what a description can ask for. An app drawing |
| 1316 | /// its own bar keeps these classes, which is what the four goingson grew |
| 1317 | /// independently were adopted onto. |
| 1318 | /// |
| 1319 | /// The trough is a [`Depth::Well`], the same reading a text field gets: |
| 1320 | /// something with its content down inside it. |
| 1321 | |
| 1322 | let progress = class; |
| 1323 | // `progress-fill` rather than a bare `fill`: an unprefixed build claims |
| 1324 | // these names in the app's own stylesheet, and `.fill` is grabby enough to |
| 1325 | // catch things that have nothing to do with progress. goingson already |
| 1326 | // calls it `.progress-fill`, so this is also the name that deletes. |
| 1327 | let fill = class; |
| 1328 | let mut css = depth_rule; |
| 1329 | |
| 1330 | // The untoned bar is `--action`, not [`Tone::Neutral`]. That is the one |
| 1331 | // place this differs from the badge rules, and deliberately: a badge with |
| 1332 | // no status is a muted label, while a bar with no status is still |
| 1333 | // reporting progress, and `content-muted` would read as disabled. |
| 1334 | let _ = writeln! |
| 1335 | css, |
| 1336 | ".{progress} > .{fill} {{\n background: var(--action);\n}}" |
| 1337 | ; |
| 1338 | |
| 1339 | // A bar can be saying something, same as a badge: goingson colours subtask |
| 1340 | // progress as success and an over-estimate as danger, which is real |
| 1341 | // information rather than decoration. Emitting the tones is what lets that |
| 1342 | // survive adoption instead of staying hand-written. |
| 1343 | for tone in |
| 1344 | let _ = writeln! |
| 1345 | css, |
| 1346 | ".{progress} > .{fill}[data-tone=\"{0}\"] {{\n background: var(--{0});\n}}" |
| 1347 | tone.token |
| 1348 | ); |
| 1349 | |
| 1350 | css |
| 1351 | |
| 1352 | |
| 1353 | /// What a wait looks like, for the attribute that has been describing one to |
| 1354 | /// nobody. |
| 1355 | /// |
| 1356 | /// Wiki `loading-and-progress-standard`, phase 2. `data-awaiting` is emitted |
| 1357 | /// as `data-awaiting="determinate"` with a `data-awaiting-amount` beside it, or |
| 1358 | /// `data-awaiting="indeterminate"` alone. This is the half that styles them, |
| 1359 | /// without which the two render identically. |
| 1360 | /// |
| 1361 | /// # Why it is keyed on `aria-busy` and not on the attribute alone |
| 1362 | /// |
| 1363 | /// `data-awaiting` is a fact about the control: pressing this waits. It is true |
| 1364 | /// when the page is painted and it stays true. Whether a wait is *running* is |
| 1365 | /// true only between two events, so it is the binder's to set, and `aria-busy` |
| 1366 | /// is the standard spelling of it — announced as well as drawn, which a class |
| 1367 | /// of our own would not be. |
| 1368 | /// |
| 1369 | /// That also keeps this crate out of any one client library's vocabulary. |
| 1370 | /// `quasi-webview` sets `aria-busy` from htmx's request events; a host driving |
| 1371 | /// the same markup another way sets it the same way and gets the same drawing. |
| 1372 | /// |
| 1373 | /// # The two drawings |
| 1374 | /// |
| 1375 | /// One pseudo-element either way, so no renderer has to emit an extra node. |
| 1376 | /// |
| 1377 | /// Indeterminate is the activity mark of rule 2: a small square that blinks. |
| 1378 | /// Determinate is a trough with a fill, drawn as a single gradient whose stop is |
| 1379 | /// `--awaiting-share`, a plain number from 0 to 1 that the binder sets from |
| 1380 | /// bytes it has actually watched land. A determinate control with nothing |
| 1381 | /// setting the share draws an empty trough rather than a full one, which is the |
| 1382 | /// honest reading: the size is known and the delivery is not. |
| 1383 | /// |
| 1384 | /// **What the bar may not do**, from rule 1 and from `Awaiting`'s own docs: |
| 1385 | /// what is done over what there is, and never a remaining time, an arrival time |
| 1386 | /// or a rate extrapolated forward. Nothing here can express one, which is |
| 1387 | /// deliberate — the only input is a share of a measured payload. |
| 1388 | /// |
| 1389 | /// # Sizes, and the deferral rule |
| 1390 | /// |
| 1391 | /// `progress_rules` emits the tones and never the width, because the width is |
| 1392 | /// not this crate's to know. A pseudo-element has no intrinsic size at all, so |
| 1393 | /// the same treatment would render nothing anywhere. Both sizes are therefore |
| 1394 | /// custom properties with defaults: an app that wants a different mark sets |
| 1395 | /// `--awaiting-mark` and `--awaiting-bar` once, and one that says nothing gets a |
| 1396 | /// mark that is visible. |
| 1397 | /// |
| 1398 | /// # The cadence, and what happens without it |
| 1399 | /// |
| 1400 | /// `--cadence-activity` comes from `makeover-timing` through `makeover-build`, |
| 1401 | /// and is a half-period, so a full cycle is twice it. It is used bare rather |
| 1402 | /// than with a fallback: a number written here would be a second heartbeat for |
| 1403 | /// a mark three renderers draw. |
| 1404 | /// |
| 1405 | /// A sheet assembled without the time axis leaves `animation-duration` invalid, |
| 1406 | /// which resolves to `0s`, which runs no animation and leaves the base style — |
| 1407 | /// a lit, still mark. That is also exactly what the reduced-motion block does, |
| 1408 | /// since it sets the cadence to `0ms`. Both fall out of one rule because the |
| 1409 | /// base style is lit and the keyframes do the dimming, which is the ordering |
| 1410 | /// `makeover_timing::reduced_motion_css` asks its consumers for by name. |
| 1411 | |
| 1412 | let mut css = Stringnew; |
| 1413 | |
| 1414 | // Dimming rather than lighting, so a zero-length animation leaves a lit |
| 1415 | // mark rather than a blank one. See `makeover_timing::reduced_motion_css`. |
| 1416 | css.push_str |
| 1417 | "@keyframes makeover-activity {\n \ |
| 1418 | 0%, 49.99% {\n background: var(--action);\n }\n \ |
| 1419 | 50%, 100% {\n background: var(--surface-sunken);\n }\n\ |
| 1420 | }\n", |
| 1421 | ; |
| 1422 | |
| 1423 | // Nothing is drawn until something is waiting. `content` on the base rule |
| 1424 | // rather than on the busy one keeps the box the same box across the |
| 1425 | // transition, so a mark appearing does not reflow the line it is in. |
| 1426 | let _ = writeln! |
| 1427 | css, |
| 1428 | "[data-awaiting]::after {{\n \ |
| 1429 | content: \"\";\n \ |
| 1430 | display: none;\n \ |
| 1431 | margin-inline-start: var(--awaiting-gap, 0.5ch);\n \ |
| 1432 | vertical-align: baseline;\n\ |
| 1433 | }}" |
| 1434 | ; |
| 1435 | |
| 1436 | let _ = writeln! |
| 1437 | css, |
| 1438 | "[data-awaiting][aria-busy=\"true\"]::after {{\n \ |
| 1439 | display: inline-block;\n \ |
| 1440 | inline-size: var(--awaiting-mark, 0.5em);\n \ |
| 1441 | block-size: var(--awaiting-mark, 0.5em);\n \ |
| 1442 | background: var(--action);\n \ |
| 1443 | opacity: 1;\n \ |
| 1444 | animation: makeover-activity calc(var(--cadence-activity) * 2) \ |
| 1445 | step-end infinite;\n\ |
| 1446 | }}" |
| 1447 | ; |
| 1448 | |
| 1449 | // The measured half. A wider box, no blink, and a gradient whose stop is |
| 1450 | // the share: the fill and the trough in one paint, so the markup stays one |
| 1451 | // pseudo-element on both branches. |
| 1452 | // |
| 1453 | // `--awaiting-share` unset is an empty trough, not a full one. A bar that |
| 1454 | // read full because nobody was counting would be the confidently-wrong |
| 1455 | // drawing rule 1 exists to forbid. |
| 1456 | // |
| 1457 | // The trough takes an edge for the reason a well does: a bar at zero share |
| 1458 | // is otherwise a rectangle of the surface it sits on, which is nothing at |
| 1459 | // all. `border_width` rather than a literal, the way `depth_rule` and |
| 1460 | // `track_rules` write theirs. |
| 1461 | let _ = writeln! |
| 1462 | css, |
| 1463 | "[data-awaiting=\"determinate\"][aria-busy=\"true\"]::after {{\n \ |
| 1464 | inline-size: var(--awaiting-bar, 6em);\n \ |
| 1465 | animation: none;\n \ |
| 1466 | outline: {} solid var(--border);\n \ |
| 1467 | outline-offset: -{};\n \ |
| 1468 | background: linear-gradient(\n \ |
| 1469 | to inline-end,\n \ |
| 1470 | var(--action) 0 calc(var(--awaiting-share, 0) * 100%),\n \ |
| 1471 | var(--surface-sunken) 0\n \ |
| 1472 | );\n\ |
| 1473 | }}" |
| 1474 | opts.border_width, opts.border_width |
| 1475 | ); |
| 1476 | |
| 1477 | css |
| 1478 | |
| 1479 | |
| 1480 | /// A strip of figures, and the two spans inside each one. |
| 1481 | /// |
| 1482 | /// Colour only, which is the deferral rule applied to a component that badly |
| 1483 | /// wants to break it. A figure reads as a figure because the value is set large |
| 1484 | /// over a small caption, and that is a size: `makeover-geometry` answers how |
| 1485 | /// much space and this crate answers what the thing is. Emitting `font-size` |
| 1486 | /// here would be this crate naming a value, which is the one thing it is defined |
| 1487 | /// by not doing, and `progress_rules` is the precedent — it emits the tones and |
| 1488 | /// never the width, because the width is not its to know. |
| 1489 | /// |
| 1490 | /// So the arrangement and the type scale are the app's, and what is generated is |
| 1491 | /// the part an app cannot get right by itself: which of the two spans carries |
| 1492 | /// the tone. |
| 1493 | |
| 1494 | let figure = class; |
| 1495 | let value = class; |
| 1496 | let caption = class; |
| 1497 | let change = class; |
| 1498 | let mut css = Stringnew; |
| 1499 | |
| 1500 | // `content` literally. A figure's value is the thing itself, at full |
| 1501 | // weight -- wiki `three-tone-convention` classes it "active, emphasised", |
| 1502 | // and both other renderers already draw it that way (makeover-tui |
| 1503 | // `piece.rs:391` bold, makeover-immediate `widget.rs:244`). It reached |
| 1504 | // here through `Tone::Neutral.token()` and came out `content-muted`, so |
| 1505 | // the headline number sat at the colour of its own caption. |
| 1506 | let _ = writeln! |
| 1507 | css, |
| 1508 | ".{figure} > .{value} {{\n color: var(--content);\n}}" |
| 1509 | ; |
| 1510 | let _ = writeln! |
| 1511 | css, |
| 1512 | ".{figure} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1513 | ; |
| 1514 | let _ = writeln! |
| 1515 | css, |
| 1516 | ".{figure} > .{change} {{\n color: var(--content-muted);\n}}" |
| 1517 | ; |
| 1518 | |
| 1519 | // A toned figure tones one part and never the caption. The caption is the |
| 1520 | // noun and stays muted. |
| 1521 | // |
| 1522 | // Which part depends on whether there is a change, and that is the whole of |
| 1523 | // what 0.13.0 changed here. A figure with a delta is an ordinary number that |
| 1524 | // has moved in a direction worth reading, so the delta takes the colour and |
| 1525 | // the number stays plain; a figure without one has nowhere else to put it. |
| 1526 | // `:has` is what lets one attribute mean both, and the alternative was the |
| 1527 | // emitter deciding by writing the attribute onto a different element, which |
| 1528 | // leaves two elements able to disagree about a figure's one meaning. |
| 1529 | for tone in |
| 1530 | let _ = writeln! |
| 1531 | css, |
| 1532 | ".{figure}[data-tone=\"{0}\"] > .{change} {{\n color: var(--{0});\n}}" |
| 1533 | tone.token |
| 1534 | ); |
| 1535 | let _ = writeln! |
| 1536 | css, |
| 1537 | ".{figure}[data-tone=\"{0}\"]:not(:has(> .{change})) > .{value} \ |
| 1538 | {{\n color: var(--{0});\n}}" |
| 1539 | tone.token |
| 1540 | ); |
| 1541 | |
| 1542 | css |
| 1543 | |
| 1544 | |
| 1545 | /// A picture, its frame and its caption. |
| 1546 | /// |
| 1547 | /// # The frame is a border, and this is the one place a bevel is wrong |
| 1548 | /// |
| 1549 | /// Emitting [`Depth::Raised`] here through [`depth_rule`], the same call |
| 1550 | /// `button` and `card` make, is wrong, and MNW's landing page is where it |
| 1551 | /// showed: **the frames had no visible edge at all.** |
| 1552 | /// |
| 1553 | /// `Depth::Raised`'s edge is `--bevel-raised`, which is an *inset* shadow — a |
| 1554 | /// 1px light run at the top-left and a dark one at the bottom-right, drawn |
| 1555 | /// **inside** the element's box. On a button or a card that box is a surface |
| 1556 | /// this crate owns, so an inset edge reads as the surface catching the light. |
| 1557 | /// On a picture it is drawn on top of the picture, over whatever pixels the |
| 1558 | /// image happens to have at its border. MNW's screenshots are light-on-light |
| 1559 | /// parchment, so the light half landed on a light image and the frame |
| 1560 | /// disappeared. |
| 1561 | /// |
| 1562 | /// **You cannot bevel a surface you do not own.** A picture's content is the |
| 1563 | /// app's, arrives at request time, and can be any colour, so its edge has to |
| 1564 | /// sit *outside* the content rather than on it. That is a border. |
| 1565 | /// |
| 1566 | /// The fill stays, and it is not decoration: it is what shows through a |
| 1567 | /// transparent PNG and what stands in the frame's place while the image is |
| 1568 | /// still loading. |
| 1569 | /// |
| 1570 | /// This is a real limit on [`Depth`] rather than a special case. Every other |
| 1571 | /// consumer of a depth draws its own surface; a picture is the first member |
| 1572 | /// whose surface belongs to someone else. |
| 1573 | /// |
| 1574 | /// # No size |
| 1575 | /// |
| 1576 | /// `width: 100%` and nothing else. How large a picture is depends on the box it |
| 1577 | /// was put in, which is the app's arrangement and `makeover-geometry`'s scales, |
| 1578 | /// and a renderer that picked one would be answering for every consumer at |
| 1579 | /// once. This is where `figure_rules` landed for the same reason. |
| 1580 | |
| 1581 | let picture = class; |
| 1582 | let img = class; |
| 1583 | let caption = class; |
| 1584 | let mut css = Stringnew; |
| 1585 | |
| 1586 | // Block, or an inline image sits on the text baseline and carries a |
| 1587 | // descender's worth of space under it that no app ever wants and every app |
| 1588 | // deletes by hand. The border is the frame; see the type docs for why it is |
| 1589 | // not the bevel every other surface here gets. |
| 1590 | let _ = writeln! |
| 1591 | css, |
| 1592 | ".{img} {{\n display: block;\n width: 100%;\n height: auto;\n \ |
| 1593 | background: var(--{});\n border: {} solid var(--border);\n}}" |
| 1594 | Raised.token, |
| 1595 | opts.border_width |
| 1596 | ); |
| 1597 | |
| 1598 | // The two fits that need a rule. `Fit::Natural` emits no attribute at all, |
| 1599 | // so it is the bare rule above and needs nothing here. |
| 1600 | let _ = writeln! |
| 1601 | css, |
| 1602 | ".{img}[data-fit=\"cover\"] {{\n height: 100%;\n object-fit: cover;\n}}" |
| 1603 | ; |
| 1604 | let _ = writeln! |
| 1605 | css, |
| 1606 | ".{img}[data-fit=\"contain\"] {{\n height: 100%;\n object-fit: contain;\n}}" |
| 1607 | ; |
| 1608 | |
| 1609 | // A caption reads back one step, which is `figure-caption`'s answer and the |
| 1610 | // same claim: it says what the thing above it is, and it is not the thing. |
| 1611 | let _ = writeln! |
| 1612 | css, |
| 1613 | ".{picture} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1614 | ; |
| 1615 | |
| 1616 | css |
| 1617 | |
| 1618 | |
| 1619 | /// A region showing one child at a time, and the chrome that moves between them. |
| 1620 | /// |
| 1621 | /// [`makeover_layout::Showing`] lets a description say that a region holds |
| 1622 | /// several children and shows some of them. A renderer derives its own chrome |
| 1623 | /// from that, which is what stops every renderer growing a `match` on a widget |
| 1624 | /// name; these are the rules the derived chrome needs. |
| 1625 | /// |
| 1626 | /// # Why the default is every child, and the enhancement takes them away |
| 1627 | /// |
| 1628 | /// The controls are a lie until something binds them. A prev button rendered |
| 1629 | /// into a document with no script is a control that looks live and answers |
| 1630 | /// nothing, and the reader it lies to is exactly the one who cannot see the |
| 1631 | /// other children either — the collapsing and the moving are the same half. |
| 1632 | /// |
| 1633 | /// So the rules run in the direction the enhancement does. Nothing here hides a |
| 1634 | /// child and nothing here shows a control. Whatever binds the region sets |
| 1635 | /// `data-ready` on it, and that is what collapses the stack to one and reveals |
| 1636 | /// the row that moves it. A reader with no script gets every child in order and |
| 1637 | /// no controls, which is more content rather than less, and a reader with |
| 1638 | /// script gets a settled page rather than a stack that jumps to one frame after |
| 1639 | /// load. |
| 1640 | /// |
| 1641 | /// MNW proved this shape by hand — a `<noscript>` stylesheet opening its |
| 1642 | /// carousel back out — and it is here rather than there because the property is |
| 1643 | /// the description's, not one app's. |
| 1644 | /// |
| 1645 | /// # Not spacing |
| 1646 | /// |
| 1647 | /// The row's gaps are `makeover-geometry`'s question and are absent for |
| 1648 | /// [`row_rules`]'s reason. What is here is `display`, which carries no |
| 1649 | /// magnitude, and the muted readout, which is the same claim `picture-caption` |
| 1650 | /// makes: it says where you are among the children and it is not one of them. |
| 1651 | |
| 1652 | let controls = class; |
| 1653 | let position = class; |
| 1654 | let frame = class; |
| 1655 | let mut css = Stringnew; |
| 1656 | |
| 1657 | // Hidden until something binds it, which is the whole argument above. |
| 1658 | let _ = writeln!; |
| 1659 | // Block, and nothing about how the three sit in it. A button and a span are |
| 1660 | // inline already, so they make a row without this crate saying so, and |
| 1661 | // saying so is where `align-items` and a gap would follow -- both spacing, |
| 1662 | // both `makeover-geometry`'s, and `row_rules` refuses them for the same |
| 1663 | // reason. |
| 1664 | let _ = writeln! |
| 1665 | css, |
| 1666 | "[data-ready] > .{controls} {{\n display: block;\n}}" |
| 1667 | ; |
| 1668 | |
| 1669 | // A child is in flow until the region is bound, and then only the current |
| 1670 | // one is. `.current` is a modifier for the reason `.chosen` and `.latched` |
| 1671 | // are: one name for the state, set by whoever knows it. |
| 1672 | let _ = writeln! |
| 1673 | css, |
| 1674 | "[data-ready] > .{frame}:not(.current) {{\n display: none;\n}}" |
| 1675 | ; |
| 1676 | |
| 1677 | // Reads back one step. `picture-caption`'s rule and its reason. |
| 1678 | let _ = writeln!; |
| 1679 | |
| 1680 | css |
| 1681 | |
| 1682 | |
| 1683 | /// A time axis: the container, its gridlines and ruler, and the placed things. |
| 1684 | /// |
| 1685 | /// [`Track`](makeover_layout::Track), the one member here whose whole point is |
| 1686 | /// *position*. That makes the magnitude line this crate keeps worth restating |
| 1687 | /// rather than assuming. |
| 1688 | /// |
| 1689 | /// # Where the numbers come from |
| 1690 | /// |
| 1691 | /// Every value that varies per item is a custom property the caller sets |
| 1692 | /// inline, and every rule here reads one. `--track-at` and `--track-for` are |
| 1693 | /// percentages of the span, which |
| 1694 | /// [`Track::fraction`](makeover_layout::Track::fraction) computes once so three |
| 1695 | /// renderers cannot disagree about it. Nothing here knows a pixel. |
| 1696 | /// |
| 1697 | /// That is what lets the stylesheet stay static while the items move: an entry |
| 1698 | /// carries `style="--track-at: 37.5%; --track-for: 4.166%"` and the rule below |
| 1699 | /// turns it into a box. The alternative was emitting a rule per item, which is |
| 1700 | /// a stylesheet that grows with the data. |
| 1701 | /// |
| 1702 | /// **The height of the track is the app's**, not this crate's. 96 quarter-hour |
| 1703 | /// slots at some slot height is a size, and a size is `makeover-geometry`'s |
| 1704 | /// question -- the same refusal `figure_rules` and `placeholder_rules` make. |
| 1705 | /// Percentages need a resolved height above them, so `.track` gets |
| 1706 | /// `position: relative` and nothing else; the app says how tall a day is. |
| 1707 | /// |
| 1708 | /// # Overlap |
| 1709 | /// |
| 1710 | /// Two things at the same time is intrinsic to an axis and has no analogue in a |
| 1711 | /// list. The description does not declare it -- `Placement::overlaps` derives it |
| 1712 | /// from the times -- so what arrives here is a lane index and a lane count, and |
| 1713 | /// the rule divides the width. A renderer that would rather stack them ignores |
| 1714 | /// both properties and the defaults give it one full-width lane. |
| 1715 | |
| 1716 | let track = class; |
| 1717 | let slot = class; |
| 1718 | let tick = class; |
| 1719 | let entry = class; |
| 1720 | let mut css = Stringnew; |
| 1721 | |
| 1722 | // The positioning context every entry resolves against, and the whole of |
| 1723 | // what this crate says about the container. No height: see the doc above. |
| 1724 | let _ = writeln!; |
| 1725 | |
| 1726 | // Gridlines and the ruler are the axis reading itself back, which is |
| 1727 | // `picture-caption` and `showing-position`'s claim: about the thing rather |
| 1728 | // than one of the things. |
| 1729 | // |
| 1730 | // `border_width` rather than a literal, the way `depth_rule` writes its |
| 1731 | // edge. A gridline is the one place a timeline would most naturally reach |
| 1732 | // for a hardcoded 1px, and a hardcoded 1px is this crate naming a size. |
| 1733 | let _ = writeln! |
| 1734 | css, |
| 1735 | ".{slot} {{\n border-top: {} solid var(--border);\n}}" |
| 1736 | opts.border_width |
| 1737 | ); |
| 1738 | let _ = writeln!; |
| 1739 | |
| 1740 | // The one rule that does real work. Top and height are the placement; |
| 1741 | // left and width are the lane. Both lane properties default so an entry |
| 1742 | // that names neither is full width, which is the common case and the one a |
| 1743 | // renderer gets for free. |
| 1744 | let _ = writeln! |
| 1745 | css, |
| 1746 | ".{entry} {{\n \ |
| 1747 | position: absolute;\n \ |
| 1748 | top: var(--track-at, 0%);\n \ |
| 1749 | height: var(--track-for, 100%);\n \ |
| 1750 | left: calc(var(--track-lane, 0) / var(--track-lanes, 1) * 100%);\n \ |
| 1751 | width: calc(100% / var(--track-lanes, 1));\n\ |
| 1752 | }}" |
| 1753 | ; |
| 1754 | |
| 1755 | css |
| 1756 | |
| 1757 | |
| 1758 | /// A region's stand-in, and the header of a table that can be reordered. |
| 1759 | /// |
| 1760 | /// Both are colour and affordance only, the same place `figure_rules` lands: |
| 1761 | /// emitting a type scale is not this crate's. How much room |
| 1762 | /// a stand-in gets is a size — goingson has the same one at three, as |
| 1763 | /// `--compact`, `--dashboard` and `--padded` — and a size is |
| 1764 | /// `makeover-geometry`'s question. |
| 1765 | /// |
| 1766 | /// The caret is the one thing here that is neither colour nor affordance, and it |
| 1767 | /// is a renderer's own expression rather than a value the description named: |
| 1768 | /// `aria-sort` is what the table actually says, and this turns it into something |
| 1769 | /// visible for everyone not using a screen reader. A terminal draws its own; an |
| 1770 | /// immediate-mode painter draws its own. |
| 1771 | |
| 1772 | let placeholder = class; |
| 1773 | let text = class; |
| 1774 | let heading = class; |
| 1775 | let mut css = Stringnew; |
| 1776 | |
| 1777 | let _ = writeln! |
| 1778 | css, |
| 1779 | ".{placeholder} > .{text} {{\n color: var(--content-muted);\n}}" |
| 1780 | ; |
| 1781 | // Only the failure is toned. An empty list is the normal state of a new |
| 1782 | // install, and `Readiness::tone` is what says so. |
| 1783 | let _ = writeln! |
| 1784 | css, |
| 1785 | ".{placeholder}[data-tone=\"{0}\"] > .{text} {{\n color: var(--{0});\n}}" |
| 1786 | Danger.token |
| 1787 | ); |
| 1788 | |
| 1789 | // A header that reorders the table is a control, and the pointer is the |
| 1790 | // only part of saying so that is not the app's own type and spacing. |
| 1791 | let _ = writeln! |
| 1792 | css, |
| 1793 | ".{heading}[data-sortable] {{\n cursor: pointer;\n}}" |
| 1794 | ; |
| 1795 | // The caret carries its own leading space, the way `makeover-tui` and |
| 1796 | // `makeover-immediate` both write `" \u{25B2}"`. It used to be emitted bare, |
| 1797 | // and both apps that adopted the vocabulary had to put the gap back in their |
| 1798 | // own stylesheets on the same afternoon -- each having to work out first that |
| 1799 | // app CSS outranks this crate's cascade layer, so adding the space the |
| 1800 | // obvious way, as `content`, silently wins over the glyph and leaves the |
| 1801 | // heading with no caret at all. A consumer should not have to know that, and |
| 1802 | // with the space emitted here there is nothing left for one to add. |
| 1803 | // |
| 1804 | // Three states, three tones, on the convention in wiki |
| 1805 | // `three-tone-convention`. A column in force is `content`; a column offering |
| 1806 | // to reorder and not doing it now is `content-secondary`, because it still |
| 1807 | // answers a press; a column that is not sortable emits no caret at all and |
| 1808 | // takes nothing. The idle arm used to hide its glyph and reserve the box, |
| 1809 | // which cost a reflow-free press and said nothing. It draws now, and the |
| 1810 | // reservation stops being a thing to get right. |
| 1811 | // |
| 1812 | // The glyph is `Sort::glyph`, escaped rather than written: a CSS `content` |
| 1813 | // string cannot carry the character literally through this file's own |
| 1814 | // escaping, and spelling it here as well would put the third copy back that |
| 1815 | // `makeover-layout` 0.27.5 exists to remove. |
| 1816 | let _ = writeln! |
| 1817 | css, |
| 1818 | ".{heading}[data-sortable]::after \ |
| 1819 | {{\n content: \" {}\";\n color: var(--content-secondary);\n}}" |
| 1820 | css_escape |
| 1821 | ); |
| 1822 | for direction in |
| 1823 | let _ = writeln! |
| 1824 | css, |
| 1825 | ".{heading}[aria-sort=\"{}\"]::after \ |
| 1826 | {{\n content: \" {}\";\n color: var(--content);\n}}" |
| 1827 | direction.as_str, |
| 1828 | css_escape |
| 1829 | ); |
| 1830 | |
| 1831 | css |
| 1832 | |
| 1833 | |
| 1834 | /// The frame a table sits in. |
| 1835 | /// |
| 1836 | /// # Why this is a CSS table and not the grid the rest of the module assumes |
| 1837 | /// |
| 1838 | /// A grid row needs `grid-template-columns`, which has to name every column in |
| 1839 | /// order, so it cannot be written without knowing the columns. That is what |
| 1840 | /// [`list::narrowing_css`] is for, and it works: goingson builds `tables.css` in |
| 1841 | /// its own `build.rs` out of it, and nothing here changes that. |
| 1842 | /// |
| 1843 | /// It does not work for a table a *description* produced. Those columns are |
| 1844 | /// known at render time rather than at build time, and the rules would have to |
| 1845 | /// travel with the markup: a `<style>` element per table, which needs |
| 1846 | /// `style-src 'unsafe-inline'` and so blocks the MNW server's standing plan to |
| 1847 | /// drop it. The head is not an escape: a table swapped in by htmx after a |
| 1848 | /// delete arrives as a fragment with no head at all. |
| 1849 | /// |
| 1850 | /// A CSS table aligns its columns across rows knowing nothing about how many |
| 1851 | /// there are, so there is no track list to emit and nothing per-table to carry. |
| 1852 | /// The cost is that a described table cannot take a per-column fixed length, |
| 1853 | /// which costs nothing today: [`Sizing`](list::Sizing) is looked up by column |
| 1854 | /// name and a description carries no lengths to put in it, so every track a |
| 1855 | /// described table could ask for is already content, fill or auto. |
| 1856 | /// |
| 1857 | /// [`Priority`] hiding is unchanged in kind. It moves from a generated |
| 1858 | /// `display: none` per dropped column to one rule per drop class, which is the |
| 1859 | /// same fact addressed by class rather than by cutoff, and still never by |
| 1860 | /// position. |
| 1861 | |
| 1862 | let table = class; |
| 1863 | let head = class; |
| 1864 | let row = class; |
| 1865 | let heading = class; |
| 1866 | let cell = class; |
| 1867 | let mut css = Stringnew; |
| 1868 | |
| 1869 | let _ = writeln! |
| 1870 | css, |
| 1871 | ".{table} {{\n display: table;\n width: 100%;\n}}" |
| 1872 | ; |
| 1873 | let _ = writeln!; |
| 1874 | // Scoped under `.{table}` rather than keyed on the classes alone. The |
| 1875 | // table model is what a cell takes *by being in a table*, and only there: |
| 1876 | // goingson's task headings are `.table-heading` inside a CSS grid, so the |
| 1877 | // unscoped rule reached them, and the sort caret and the sortable cursor |
| 1878 | // -- which `state_rules` keys on `.table-heading` and rightly still does |
| 1879 | // -- came with a `display` the grid had to blockify away. |
| 1880 | // |
| 1881 | // It costs no markup anywhere: quasi-webview always nests the heading |
| 1882 | // inside the table (`quasi-webview/src/node.rs:1591`, `:1605`, `:1615`). |
| 1883 | let _ = writeln! |
| 1884 | css, |
| 1885 | ".{table} .{heading},\n.{table} .{cell} {{\n display: table-cell;\n}}" |
| 1886 | ; |
| 1887 | |
| 1888 | // A content column shrinks to what is in it. `width: 1%` is how a CSS table |
| 1889 | // is told that: auto layout hands the slack to the columns that asked for |
| 1890 | // room, and a column asking for almost none gets what it needs and no more. |
| 1891 | // The `nowrap` is what stops it being given less by wrapping. |
| 1892 | let _ = writeln! |
| 1893 | css, |
| 1894 | ".{} {{\n white-space: nowrap;\n width: 1%;\n}}" |
| 1895 | class |
| 1896 | ); |
| 1897 | |
| 1898 | // A fixed column has no length to be fixed to. The description carries none |
| 1899 | // and `Sizing` is not reachable from here, so it behaves as content: the |
| 1900 | // honest answer to a width nobody supplied, and the same one `Sizing::track` |
| 1901 | // gives it. |
| 1902 | let _ = writeln! |
| 1903 | css, |
| 1904 | ".{} {{\n white-space: nowrap;\n}}" |
| 1905 | class |
| 1906 | ); |
| 1907 | |
| 1908 | // Optional columns go at the narrowest class, secondary ones go with them, |
| 1909 | // which is the cutoff walk `kept_at` describes said as two media queries. |
| 1910 | // Essential columns have no rule at all, because never dropping is what not |
| 1911 | // being mentioned already means. |
| 1912 | for in |
| 1913 | |
| 1914 | Compact, |
| 1915 | &, |
| 1916 | , |
| 1917 | , |
| 1918 | ] |
| 1919 | let selectors: = drops |
| 1920 | .iter |
| 1921 | .map |
| 1922 | .collect; |
| 1923 | css.push_str |
| 1924 | Some, |
| 1925 | &format!, |
| 1926 | ; |
| 1927 | |
| 1928 | |
| 1929 | // What is inside a cell, which the table side could not say until |
| 1930 | // makeover-layout 0.14.0. Every cell was one `.cell` and one content |
| 1931 | // colour, so a button in a cell was painted as text -- the drift |
| 1932 | // `RowPart::intent` has prevented for list rows since 0.2.0 and prevented |
| 1933 | // for nothing here. |
| 1934 | // |
| 1935 | // The colour goes on `.cell-value` rather than on `.cell`, and that |
| 1936 | // placement is the whole fix. On the container it would cascade into the |
| 1937 | // tokens and the controls sitting beside the text, which is the bug said |
| 1938 | // in one rule; on the part that is text, it reaches text and stops. |
| 1939 | for part in |
| 1940 | Value, |
| 1941 | Tokens, |
| 1942 | Actions, |
| 1943 | Link, |
| 1944 | ] |
| 1945 | // Three of the four inherit, each for its own reason: a token carries |
| 1946 | // its own tone, an action is a control rather than text, and a link |
| 1947 | // takes the action colour from the anchor it is. `CellPart::intent` |
| 1948 | // says so by answering with the intent inheriting already gives, and |
| 1949 | // pinning that would be louder than saying nothing. |
| 1950 | // |
| 1951 | // Written as a skip-list rather than as a match on Value, so a member |
| 1952 | // added upstream gets its intent emitted rather than being silently |
| 1953 | // dropped. That is the same trade `part_class`'s fallback makes: land |
| 1954 | // plainly, never land as nothing. |
| 1955 | if !matches! |
| 1956 | let _ = writeln! |
| 1957 | css, |
| 1958 | ".{} {{\n color: var(--{});\n}}" |
| 1959 | class, |
| 1960 | part.intent |
| 1961 | ); |
| 1962 | |
| 1963 | |
| 1964 | |
| 1965 | css |
| 1966 | |
| 1967 | |
| 1968 | /// The component layer: every named thing phase A emits. |
| 1969 | /// |
| 1970 | /// No scrollbar track. It was on the phase A list and came off: eight lines of |
| 1971 | /// `::-webkit-scrollbar` with no shape a terminal or an immediate-mode painter |
| 1972 | /// would want handed to it, so it stays with the apps. |
| 1973 | |
| 1974 | |
| 1975 | let mut css = Stringnew; |
| 1976 | css.push_str; |
| 1977 | css.push_str; |
| 1978 | css.push_str; |
| 1979 | css.push_str; |
| 1980 | css.push_str; |
| 1981 | css.push_str; |
| 1982 | css.push_str; |
| 1983 | css.push_str; |
| 1984 | css.push_str; |
| 1985 | css.push_str; |
| 1986 | css.push_str; |
| 1987 | css.push_str; |
| 1988 | css.push_str; |
| 1989 | css.push_str; |
| 1990 | css.push_str; |
| 1991 | css.push_str; |
| 1992 | css.push_str; |
| 1993 | css.push_str; |
| 1994 | css.push_str; |
| 1995 | css.push_str; |
| 1996 | css.push_str; |
| 1997 | css |
| 1998 | |
| 1999 | |
| 2000 | /// How a transient notice goes away. |
| 2001 | /// |
| 2002 | /// `makeover-timing` says that `Intent::Dismiss` is how long a notice lives |
| 2003 | /// *before it starts to leave*, and that the leaving itself is `Motion::Fade`. |
| 2004 | /// `makeover-build` writes `--motion-fade` into every consumer's `timing.css`, |
| 2005 | /// and this is the rule that reads it. Removing the node the moment the dismiss |
| 2006 | /// is up skips the leaving entirely. |
| 2007 | /// |
| 2008 | /// # Why an attribute and not a class |
| 2009 | /// |
| 2010 | /// [`Emit`]'s prefix moves every class this crate writes, so a class here would |
| 2011 | /// have to be resolved through `class()` by whoever sets it -- and the party |
| 2012 | /// setting it is a script, which has no prefix to hand. `data-leaving` is |
| 2013 | /// outside that namespace, so a renderer can set it from JavaScript with no |
| 2014 | /// coordination. |
| 2015 | /// |
| 2016 | /// The transition sits on the notice and the opacity on the leaving state, so |
| 2017 | /// the element is transitionable before the attribute arrives; a transition |
| 2018 | /// declared in the same rule as the value it changes has nothing to animate |
| 2019 | /// from. |
| 2020 | /// |
| 2021 | /// # Reduced motion is handled by the token, not by a second rule here |
| 2022 | /// |
| 2023 | /// `timing.css` already zeroes `--motion-fade` under `prefers-reduced-motion`. |
| 2024 | /// The reader who asked for less motion gets an instant change rather than a |
| 2025 | /// fade, and the renderer that sets the attribute must still remove the node on |
| 2026 | /// a timer rather than on `transitionend` -- a zero-length transition may fire |
| 2027 | /// no event at all, and a node waiting on one that never comes stays forever. |
| 2028 | /// |
| 2029 | /// The fallback is `0ms` and not a guessed duration: a page with no timing |
| 2030 | /// sheet has not opted into this vocabulary, and the honest answer there is the |
| 2031 | /// behaviour it had before, which is the notice going away at once. |
| 2032 | |
| 2033 | let mut css = Stringnew; |
| 2034 | let _ = writeln! |
| 2035 | css, |
| 2036 | "[data-notice] {{\n transition: opacity var(--motion-fade, 0ms) \ |
| 2037 | ease-out;\n}}" |
| 2038 | ; |
| 2039 | let _ = writeln!; |
| 2040 | css |
| 2041 | |
| 2042 | |
| 2043 | /// The whole phase-A stylesheet: properties, depth rules and components, in |
| 2044 | /// [`CSS_LAYER`], under a generated-file banner. |
| 2045 | /// |
| 2046 | /// The banner sits outside the layer, because a comment participates in no |
| 2047 | /// cascade and a reader opening the file should see what it is before seeing |
| 2048 | /// an at-rule. |
| 2049 | |
| 2050 | |
| 2051 | let body = in_css_layer |
| 2052 | ":root {{\n{}}}\n\n{}\n{}" |
| 2053 | bevel_properties, |
| 2054 | depth_rules, |
| 2055 | component_rules |
| 2056 | ); |
| 2057 | // Counted from the body rather than through `vocabulary::names`, which |
| 2058 | // calls back into here. |
| 2059 | let classes = classes_in_css.len; |
| 2060 | let version = VERSION; |
| 2061 | format! |
| 2062 | "/* Generated by makeover-webview {version} from makeover-layout, \ |
| 2063 | {classes} classes.\n \ |
| 2064 | Do not edit. The version and the count are here because a stale\n \ |
| 2065 | lockfile fails silently: an older emitter writes a well-formed sheet\n \ |
| 2066 | with components missing, and nothing else in the file says so. If\n \ |
| 2067 | this version trails what the manifest asks for, re-resolve.\n\n \ |
| 2068 | Depth is a fill and an edge together; naming them apart is what let\n \ |
| 2069 | them disagree. See the crate's README and wiki note makeover-layout.\n\n \ |
| 2070 | Everything below is in the `{CSS_LAYER}` cascade layer. Declare the\n \ |
| 2071 | order once in your own stylesheet, or this layer's position is decided\n \ |
| 2072 | by whichever generated file the browser happens to see first:\n\n \ |
| 2073 | @layer {CSS_LAYER}, base, components, responsive; */\n{body}" |
| 2074 | |
| 2075 | |
| 2076 | |
| 2077 | |
| 2078 | |
| 2079 |