zdc-runtime 0.1.0

Embeds the ZDeceptron JavaScript runtime and evaluates it without an external toolchain.
Documentation
/* The base styling of the built-in view elements.
 *
 * These are the declarations `elements.js` used to apply as inline styles.
 * Spec §6 requires styles to compile to static CSS with generated scoped
 * class names and zero runtime cost, and §7.1 lists `styles.css` as a
 * pipeline output; this file is the base layer `zdc build` copies into it,
 * ahead of the scoped classes it generates per program.
 *
 * Moving them here removes one effect and one `style.setProperty` call per
 * declaration per element — seven of each from `counter.zd` alone — and
 * makes an element's base styling a byte-for-byte comparable class
 * attribute rather than a CSSOM serialisation.
 *
 * Every byte of this file ships to every reader of every program, so the
 * reasoning behind what is here lives in the compiler sources that name
 * it, not in this file: the tokens in `style.rs`'s `TOKENS`, the type
 * scale and the two element defaults in `elements.rs`'s `STYLE_ARGUMENTS`.
 * What is left below is a pointer per block.
 */

/* Theme tokens (#102): nine roles, light here and dark below, so that a
 * program names a role and the reader's system picks the colour.
 * `color-scheme` is what makes the browser's own furniture follow. */
:root {
  color-scheme: light dark;

  --zd-ink: #16181d;
  --zd-muted: #5c6370;
  --zd-surface: #ffffff;
  --zd-raised: #f5f6f8;
  --zd-line: #d8dce3;
  --zd-accent: #1f5fd0;
  --zd-onAccent: #ffffff;
  --zd-danger: #b3151c;
  --zd-onDanger: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zd-ink: #e8eaee;
    --zd-muted: #9aa3b2;
    --zd-surface: #14161a;
    --zd-raised: #1e2126;
    --zd-line: #333941;
    --zd-accent: #6ea3ff;
    --zd-onAccent: #0d1117;
    --zd-danger: #ff8b8b;
    --zd-onDanger: #2a0b0d;
  }
}

/* The page reads the tokens, or dark mode is custom properties nothing
 * uses. This rule is what a program that says nothing about colour gets. */
body {
  background-color: var(--zd-surface);
  color: var(--zd-ink);
}

/* The type scale (#89), named by `size is "…"`. In `rem`, so it moves with
 * the reader's own font size; custom properties, so an `assets/*.css` can
 * retune it without touching a use site. */
:root {
  --zd-text-tiny: 0.75rem;
  --zd-text-small: 0.875rem;
  --zd-text-normal: 1rem;
  --zd-text-large: 1.25rem;
  --zd-text-huge: 1.5rem;
  --zd-text-giant: 2rem;
}

.zd-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zd-row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

/* Preserved whitespace that is not code (#63). The browser's own `pre`
 * defaults are monospace and no wrapping, which are right for a listing
 * and wrong for a poem or an address block; `CodeBlock` keeps them and
 * this is the element that does not. */
.zd-pre {
  font-family: inherit;
  white-space: pre-wrap;
}

/* Keyboard focus is visible by default (#100), because without a ring
 * tabbing through a page is invisible and "remember to write one" is how
 * that becomes most pages. `:focus-visible`, so a mouse click does not
 * draw the ring designers strip focus styling to be rid of. */
:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

/* A button shows a pointer (#98). A bare element selector, and the only
 * one here: at 0,0,1 every generated class beats it, so `cursor is "wait"`
 * wins without an `!important`. */
button {
  cursor: pointer;
}

/* The error bar reads the tokens too: it named `#b3151c` twice, which is a
 * red that disappears against a dark surface. */
.zd-err {
  color: var(--zd-danger);
  border: 1px solid var(--zd-danger);
  padding: 0.5rem;
}