You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
4.2 KiB
99 lines
4.2 KiB
/*
|
|
* The one reset the blocks section needs, for BOTH of its surfaces (the gallery
|
|
* shell and every block's standalone `preview` page) — which is why it is
|
|
* imported from `BootUix`, the bootstrap they share.
|
|
*
|
|
* WHY: the eidos foundation ships no box-model reset; recipes assume the APP
|
|
* provides one. Every other surface in this repo does — `web/routes/uix/uix.css`
|
|
* under `[data-uix-docs]`, `web/routes/active/styles.css` for the app — and the
|
|
* blocks gallery was the one harness built without it (F0).
|
|
*
|
|
* The cost of that omission is not cosmetic. A recipe like `[data-field-control]`
|
|
* declares `inline-size: 100%` + `padding-inline`, so under `content-box` the
|
|
* control renders 30px WIDER than its container: in the newsletter's
|
|
* `1fr auto` row the email control grew past its track and slid under the submit
|
|
* button. Measured, not guessed — field 480 / control 510 here versus 502 / 502
|
|
* on the component docs, which have the reset.
|
|
*
|
|
* The canon-side question (should the foundation own this rather than assume it?)
|
|
* is registered in `docs/process/PLAN-blocks-quality.md` §6.
|
|
*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
* The browser's default `body { margin: 8px }`, removed — and it is not a
|
|
* cosmetic call either.
|
|
*
|
|
* The tier's hard rule is that a block is shown A SANGRE: nothing between it
|
|
* and the edge, because a frame changes what the block DOES (a header pinned at
|
|
* `offset: 0` measured 21px off inside a Card). That rule was being broken by
|
|
* the document itself: measured 2026-08-19, every preview rendered at
|
|
* `x: 8, y: 8, w: 1264` inside a 1280 viewport — the composed landing page
|
|
* included, whose README quotes full-bleed numbers.
|
|
*
|
|
* It stayed invisible because every other block's page scrolls anyway, so 16px
|
|
* of extra document height reads as nothing. `app-shell` is where it stops
|
|
* being invisible: a shell that fills the viewport (`100dvh`) plus 16px of
|
|
* margin is a page with a scrollbar and no content to scroll.
|
|
*/
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
/*
|
|
* The document's typographic anchor — the theme's own `body` style, and the
|
|
* second thing the foundation leaves to the app (the box model was the first).
|
|
*
|
|
* The foundation declares the `@font-face`s and emits the semantic styles
|
|
* (`--style-body-*`, `--style-label-*`, `--style-h1-*` …) but applies none of
|
|
* them to any element: a `Text` or a `Heading` anchors its own family in its
|
|
* recipe, and everything else INHERITS from the document. So any text the canon
|
|
* renders as plain text — the label `<span>` inside a `Sidebar.MenuButton`, a
|
|
* `Sidebar.GroupLabel` — falls to the browser default when the document says
|
|
* nothing. Measured 2026-08-19 on the app-shell preview: `html`, `body`,
|
|
* `[data-sidebar]` and every rail item computed `"Times New Roman"`, next to
|
|
* `Text` nodes in Instrument Sans. The component docs shell anchors its root
|
|
* (`uix.css`, `[data-uix-docs]`); this harness did not, on any of its 19
|
|
* previews.
|
|
*
|
|
* The values are the theme's `body` style, by token — never a family or a
|
|
* size written here — so a theme that redefines its body redefines this too.
|
|
*/
|
|
body {
|
|
font-family: var(--style-body-font-family);
|
|
font-size: var(--style-body-font-size);
|
|
line-height: var(--style-body-line-height);
|
|
letter-spacing: var(--style-body-letter-spacing);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/*
|
|
* The description-list defaults, removed for the same reason as the body
|
|
* margin: the browser indents `dd` by 40px, which reads as an alignment choice
|
|
* nobody made. Measured on the app-shell preview's detail panel, where every
|
|
* value sat a step to the right of its term. Layout in the tier comes from the
|
|
* layout components' props, so a UA margin is noise, not a decision.
|
|
*/
|
|
dl,
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
/*
|
|
* The description-list defaults, removed for the same reason as the body
|
|
* margin: the browser indents `dd` by 40px, which reads as an alignment choice
|
|
* nobody made. Measured on the app-shell preview's detail panel, where every
|
|
* value sat a step to the right of its term. Layout in the tier comes from the
|
|
* layout components' props, so a UA margin is noise, not a decision.
|
|
*/
|
|
dl,
|
|
dd {
|
|
margin: 0;
|
|
}
|