pub const BASE_CSS: &str = "/* The base styling of the built-in view elements.\n *\n * These are the declarations `elements.js` used to apply as inline styles.\n * Spec \u{a7}6 requires styles to compile to static CSS with generated scoped\n * class names and zero runtime cost, and \u{a7}7.1 lists `styles.css` as a\n * pipeline output; this file is the base layer `zdc build` copies into it,\n * ahead of the scoped classes it generates per program.\n *\n * Moving them here removes one effect and one `style.setProperty` call per\n * declaration per element \u{2014} seven of each from `counter.zd` alone \u{2014} and\n * makes an element\'s base styling a byte-for-byte comparable class\n * attribute rather than a CSSOM serialisation.\n *\n * Every byte of this file ships to every reader of every program, so the\n * reasoning behind what is here lives in the compiler sources that name\n * it, not in this file: the tokens in `style.rs`\'s `TOKENS`, the type\n * scale and the two element defaults in `elements.rs`\'s `STYLE_ARGUMENTS`.\n * What is left below is a pointer per block.\n */\n\n/* Theme tokens (#102): nine roles, light here and dark below, so that a\n * program names a role and the reader\'s system picks the colour.\n * `color-scheme` is what makes the browser\'s own furniture follow. */\n:root {\n color-scheme: light dark;\n\n --zd-ink: #16181d;\n --zd-muted: #5c6370;\n --zd-surface: #ffffff;\n --zd-raised: #f5f6f8;\n --zd-line: #d8dce3;\n --zd-accent: #1f5fd0;\n --zd-onAccent: #ffffff;\n --zd-danger: #b3151c;\n --zd-onDanger: #ffffff;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --zd-ink: #e8eaee;\n --zd-muted: #9aa3b2;\n --zd-surface: #14161a;\n --zd-raised: #1e2126;\n --zd-line: #333941;\n --zd-accent: #6ea3ff;\n --zd-onAccent: #0d1117;\n --zd-danger: #ff8b8b;\n --zd-onDanger: #2a0b0d;\n }\n}\n\n/* The page reads the tokens, or dark mode is custom properties nothing\n * uses. This rule is what a program that says nothing about colour gets. */\nbody {\n background-color: var(--zd-surface);\n color: var(--zd-ink);\n}\n\n/* The type scale (#89), named by `size is \"\u{2026}\"`. In `rem`, so it moves with\n * the reader\'s own font size; custom properties, so an `assets/*.css` can\n * retune it without touching a use site. */\n:root {\n --zd-text-tiny: 0.75rem;\n --zd-text-small: 0.875rem;\n --zd-text-normal: 1rem;\n --zd-text-large: 1.25rem;\n --zd-text-huge: 1.5rem;\n --zd-text-giant: 2rem;\n}\n\n.zd-col {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.zd-row {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n}\n\n/* Preserved whitespace that is not code (#63). The browser\'s own `pre`\n * defaults are monospace and no wrapping, which are right for a listing\n * and wrong for a poem or an address block; `CodeBlock` keeps them and\n * this is the element that does not. */\n.zd-pre {\n font-family: inherit;\n white-space: pre-wrap;\n}\n\n/* Keyboard focus is visible by default (#100), because without a ring\n * tabbing through a page is invisible and \"remember to write one\" is how\n * that becomes most pages. `:focus-visible`, so a mouse click does not\n * draw the ring designers strip focus styling to be rid of. */\n:focus-visible {\n outline: 2px solid;\n outline-offset: 2px;\n}\n\n/* A button shows a pointer (#98). A bare element selector, and the only\n * one here: at 0,0,1 every generated class beats it, so `cursor is \"wait\"`\n * wins without an `!important`. */\nbutton {\n cursor: pointer;\n}\n\n/* The error bar reads the tokens too: it named `#b3151c` twice, which is a\n * red that disappears against a dark surface. */\n.zd-err {\n color: var(--zd-danger);\n border: 1px solid var(--zd-danger);\n padding: 0.5rem;\n}\n";Expand description
The base styling of the built-in elements, as classes.
Spec ยง16.2 R6: Column and Row carry zd-col/zd-row rather than an
inline style object, so the declarations have to ship somewhere. This is
the base layer of the styles.css a build emits.