@telepath-computer/television 0.1.116 → 0.1.118

package/dist/canonical/v1/styles.css

@@ -2,14 +2,13 @@
  * Canonical artifact stylesheet — the curated subset of the design system
  * artifacts inherit at /canonical/v1/styles.css.
  *
- * Includes design-system primitives (reset, fonts, tokens, theme) plus
- * bare-tag styling (elements). Excludes app-chrome layers (materials and
- * components) since artifacts shouldn't render with panel/dropdown/modal
- * surfaces.
+ * Includes the design-system primitives artifacts should inherit by default:
+ * reset, fonts, tokens, theme defaults, and conservative document typography for plain
+ * semantic HTML. Artifact-specific structure and rhythm should still be
+ * authored explicitly in the artifact HTML so agents can see and control the
+ * result, but basic prose should not fall back to browser defaults.
  *
- * Source of truth for what's in v1. Edits here change what artifacts
- * inherit; gaps that surface during real authoring (lists, blockquote,
- * table, hr) get added to elements.css since they apply to bare tags.
+ * Source of truth for what's in v1. Edits here change what artifacts inherit.
  */
 *,
 *::before,
@@ -324,7 +323,7 @@ select {
 
 body {
   font-family: var(--font-sans);
-  font-size: var(--text-base);
+  font-size: calc(var(--text-base) + 0.5px);
   font-weight: var(--font-weight-body);
   line-height: var(--leading-base);
   letter-spacing: 0.015em;
@@ -347,9 +346,44 @@ h4,
 h5,
 h6 {
   font-weight: 600;
+  line-height: 1.25;
   color: inherit;
 }
 
+h1 {
+  font-size: 1.3em;
+}
+
+h2 {
+  font-size: 1.1em;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1em;
+}
+
+p,
+ul,
+ol,
+blockquote,
+pre,
+hr,
+table {
+  margin: var(--space-12) 0;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, pre, hr, table) {
+  margin-top: var(--space-8);
+}
+
+ul,
+ol {
+  padding-left: var(--space-24);
+}
+
 code {
   font-family: var(--font-mono);
   font-size: 0.9em;
@@ -360,8 +394,10 @@ code {
 
 pre {
   font-family: var(--font-mono);
+  font-size: var(--text-sm);
   background: var(--color-bg-muted);
   padding: var(--space-12);
+  border: 1px solid var(--color-border-muted);
   border-radius: var(--radius-8);
   overflow-x: auto;
 }
@@ -383,6 +419,7 @@ hr {
 }
 
 table {
+  width: 100%;
   border-collapse: collapse;
 }
 
@@ -398,519 +435,7 @@ th {
   font-weight: 600;
 }
 
-/* Recessed text input — same geometry as a button at rest, sunken via a
-   subtle tint and no drop shadow. Focus deepens the tint one step (more
-   recessed) and adds a primary-blue ring as the focus signal. Text
-   inherits its color from the surrounding context so the input reads on
-   either light or dark surfaces. */
-input,
-textarea {
-  border: 0.5px solid var(--tint-300);
-  border-radius: var(--radius-12);
-  background: var(--tint-100);
-  color: inherit;
-  font: inherit;
-  box-sizing: border-box;
-  transition:
-    background 120ms ease,
-    border-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-/* Single-line input snaps to the `lg` control height — taller than
-   buttons/segmented controls (`md`) so text-entry fields have visual
-   presence as the primary affordance in forms. Padding goes
-   horizontal-only since the explicit height handles vertical centering
-   via the line-box. */
-input {
-  height: var(--control-height-lg);
-  padding: 0 12px;
-}
-
-/* Multi-line textarea stays intrinsic — height grows with content (or
-   max-height on a host) rather than locking to a control unit. */
-textarea {
-  padding: 6px 10px;
-  resize: none;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: var(--tint-500);
-}
-
-input:focus,
-textarea:focus {
-  background: color-mix(in srgb, var(--white) var(--alpha-300), transparent);
-  border-color: var(--color-primary);
-  outline: none;
-  box-shadow: 0 0 0 1.5px var(--color-primary);
-}
-
-/* Stacked label + control. Label text is smaller and lighter than body
-   copy, sits flush with the control. Use as
-   <label class="field"><span>Name</span><input /></label>. */
-label.field {
-  display: grid;
-  gap: 4px;
-  font-size: 13px;
-}
-
-label.field > span {
-  font-size: 11.5px;
-  font-weight: 450;
-  color: var(--tint-800);
-}
-
-/* Universal squircle corners. `corner-shape: squircle` only affects
-   elements that already declare a non-zero `border-radius`, so applying
-   to `*` is effectively a no-op everywhere except where corners exist.
-   Token values in tokens.css bump ~25% inside the same @supports block
-   to compensate for the perceived tightness difference. */
-@supports (corner-shape: squircle) {
-  * {
-    corner-shape: squircle;
-  }
-}
-
-/* Button-only layout — placement of icon + label inside a single
-   button. Segmented-button doesn't share these (it's a flex row of
-   children, not a center-aligned label-and-icon stack).
-   `height: var(--control-height-md)` is explicit so a row of mixed
-   chrome (text button + icon-only button + segmented-control) lines up
-   without each variant having to tune its intrinsic content + padding
-   to match. Padding is purely horizontal — vertical centering is handled
-   by `align-items: center`. */
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-6);
-  box-sizing: border-box;
-  height: var(--control-height-md);
-  /* 2px extra bottom padding compensates for the visual offset from
-     font ascender/descender asymmetry — `align-items: center` centers
-     the line-box but the glyph mass sits below center because the
-     ascender claims more vertical space than the descender. The
-     icon-only override resets padding to 0 since icons are already
-     symmetric. */
-  padding: 0 14px 2px;
-  font: inherit;
-  cursor: default;
-}
-
-/* Default chrome — shared between <button> and <segmented-control> so
-   the two stay in visual lockstep. Variant overrides (ghost, primary,
-   danger) and tone-dark / tone-light / disabled cascades live below.
-   The shared-with-segmented bits are intentional: a segmented control
-   is a chrome surface that looks like a single button containing two
-   click targets, so its host adopts the same fill, hairline, radius,
-   and shadow. */
-button,
-segmented-control {
-  background: var(--color-surface);
-  border: 0.5px solid var(--tint-200);
-  border-radius: var(--radius-12);
-  box-shadow: var(--shadow-control);
-  color: inherit;
-}
-
-button:not([material]):hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-surface) 96%, black);
-}
-
-button:not([material]):active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-surface) 88%, black);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
-}
-
-button:focus-visible {
-  outline: 2px solid var(--color-focus-ring);
-  outline-offset: 2px;
-}
-
-button[variant="primary"] {
-  background: var(--color-primary);
-  border-color: rgb(0 0 0 / 0.18);
-  color: var(--white);
-}
-
-button[variant="primary"]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary) 92%, black);
-}
-
-button[variant="primary"]:active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary) 82%, black);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
-}
-
-button[variant="danger"] {
-  background: var(--color-danger);
-  border-color: rgb(0 0 0 / 0.18);
-  color: var(--white);
-}
-
-button[variant="danger"]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-danger) 92%, black);
-}
-
-button[variant="danger"]:active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-danger) 82%, black);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
-}
-
-button[variant="ghost"] {
-  background: transparent;
-  border-color: transparent;
-  color: inherit;
-  box-shadow: none;
-}
-
-/* Ghost is a chromeless overlay — at rest it's invisible and relies on
-   the surface behind it. The overlay tokens cascade through `tone="dark"`
-   (set on the button itself by the auto-tone watcher in
-   `utils/button-tone.ts`, or inherited from a tone-sampled ancestor), so
-   one rule covers light + dark backdrops.
-
-   Hover/active also bump the backdrop saturation — the same "comes alive"
-   gesture glass uses. Ghost has no blur or brightness to absorb the
-   filter, so a much gentler ladder (1.2 / 1.3 / 1.4) reads as the right
-   weight against ghost's ~8–16% tint overlay. Glass's higher numbers
-   would punch through too hard here. */
-/* Ghost uses currentColor tints directly (auto-flip via tone) rather than
-   the shared --color-overlay-hover / -active tokens. The shared tokens
-   read too quietly on ghost's bare surface — bumping ghost a step heavier
-   (alpha-150 hover, alpha-300 active) gives the hover real presence
-   without affecting other chrome that uses the overlay tokens. */
-button[variant="ghost"]:hover:not(:disabled) {
-  background: var(--tint-150);
-  backdrop-filter: saturate(1.2);
-  -webkit-backdrop-filter: saturate(1.2);
-}
-
-button[variant="ghost"]:active:not(:disabled) {
-  background: var(--tint-300);
-  backdrop-filter: saturate(1.4);
-  -webkit-backdrop-filter: saturate(1.4);
-  box-shadow: none;
-}
-
-/* Pinned-active state for ghost triggers — used while a dropdown
-   `[aria-expanded="true"]` is open against this button (set automatically
-   by `dropdown-menu`), while a consumer manually pins `[data-active]`
-   (e.g. anchored popover), or while the button is `[aria-pressed="true"]`
-   (toggle/tab in its on state). All three override hover so the button
-   stays visibly active even as the cursor moves over it. */
-button[variant="ghost"][data-active]:not(:disabled),
-button[variant="ghost"][data-active]:hover:not(:disabled),
-button[variant="ghost"][aria-pressed="true"]:not(:disabled),
-button[variant="ghost"][aria-pressed="true"]:hover:not(:disabled),
-button[variant="ghost"][aria-expanded="true"]:not(:disabled),
-button[variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background: var(--color-overlay-active);
-  backdrop-filter: saturate(1.3);
-  -webkit-backdrop-filter: saturate(1.3);
-  box-shadow: none;
-}
-
-/* Glass variant — translucent surface with backdrop blur. Shared between
-   <button variant="glass"> and <segmented-control variant="glass"> so a
-   chrome row of buttons + segmented controls reads as one surface
-   family. Self-contained per-variant chrome (bg + border + shadow + blur
-   + hover/active overlays) means no fighting with default-button rules
-   or tone-driven default fills.
-
-   No explicit `color` here — auto-tone (utils/button-tone.ts) writes
-   `tone="light"` or `tone="dark"` on the element after sampling its
-   actual backdrop. The materials.css `[tone="…"]` color rules then set
-   text color on the element directly (specificity 0,1,0), beating the
-   shared `button { color: inherit }` (0,0,1). An explicit `color:
-   inherit` here would be 0,1,1 and would defeat the tone-aware color. */
-button[variant="glass"],
-segmented-control[variant="glass"] {
-  background: transparent;
-  border: 0.5px solid color-mix(in srgb, var(--black) var(--alpha-100), transparent);
-  box-shadow: none;
-}
-
-/* Glass-variant standalone button: backdrop-filter on the host. The
-   segmented-control variant moves the filter onto each segment so per-
-   child hover/active saturation works without nested-filter compounding
-   issues — see segmented-control.css. */
-button[variant="glass"] {
-  backdrop-filter: blur(20px) brightness(0.95) saturate(1.5);
-  -webkit-backdrop-filter: blur(20px) brightness(0.95) saturate(1.5);
-}
-
-/* `background:` shorthand (not `background-image`) resets background-color
-   back to transparent — necessary because the default-button hover rule
-   `button:not([material]):hover` fires on glass too (glass has no
-   material) at equal specificity and would otherwise paint a 96% white
-   surface underneath this overlay.
-
-   Hover and active also crank the backdrop saturate filter (1.5 → 1.8 →
-   2.2). On a light backdrop, darkening overlays read as visual weight
-   rather than feedback; the saturation bump is direction-agnostic — the
-   surface "comes alive" the same way regardless of tone. The overlay
-   stays as a quieter backstop. */
-button[variant="glass"]:hover:not(:disabled) {
-  background: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
-  backdrop-filter: blur(20px) brightness(0.95) saturate(1.8);
-  -webkit-backdrop-filter: blur(20px) brightness(0.95) saturate(1.8);
-}
-
-button[variant="glass"]:active:not(:disabled) {
-  background: linear-gradient(var(--color-overlay-active), var(--color-overlay-active));
-  backdrop-filter: blur(20px) brightness(0.95) saturate(2.2);
-  -webkit-backdrop-filter: blur(20px) brightness(0.95) saturate(2.2);
-}
-
-/* Persistent active state — `aria-pressed="true"` (tab/toggle that is
-   "currently on") and `aria-expanded="true"` (popover/menu trigger whose
-   panel is open). Both stay lit through hover so the active overlay isn't
-   visually masked by the hover overlay when the cursor is over them.
-   `<ui-popover>` and `<dropdown-menu>` set `aria-expanded` automatically;
-   tab-style consumers set `aria-pressed`. */
-button[variant="glass"][aria-pressed="true"]:not(:disabled),
-button[variant="glass"][aria-pressed="true"]:hover:not(:disabled),
-button[variant="glass"][aria-expanded="true"]:not(:disabled),
-button[variant="glass"][aria-expanded="true"]:hover:not(:disabled) {
-  background: linear-gradient(var(--color-overlay-active), var(--color-overlay-active));
-  backdrop-filter: blur(20px) brightness(0.95) saturate(2);
-  -webkit-backdrop-filter: blur(20px) brightness(0.95) saturate(2);
-}
-
-[tone="dark"] button[variant="glass"],
-[tone="dark"] segmented-control[variant="glass"] {
-  border-color: var(--tint-400);
-}
-
-/* Material composition with controls (option B in the design notes —
-   contained override rather than refactoring materials.css globally).
-   Material is a passive-surface primitive: it locks color, draws a
-   fixed-alpha hairline, and a default-variant `:hover` would replace
-   its background entirely. These overrides let `<button material="...">`
-   and `<segmented-control material="...">` compose:
-
-   - `color: inherit` so the tone-aware text cascade still applies
-     (material sets a fixed `--color-text` which doesn't flip on dark).
-   - `box-shadow: none` because both materials want a flat surface; the
-     default control shadow fights glass especially.
-   - hover/active paint via `background-image` (a flat linear-gradient)
-     so the material's `background-color` is preserved underneath.
-   - dark-tone bumps the hairline to `--tint-400` so the rim reads on
-     dark backdrops (material's locked black-alpha border vanishes
-     against tone-dark patches). */
-button[material],
-segmented-control[material] {
-  color: inherit;
-  box-shadow: none;
-}
-
-button[material]:hover:not(:disabled) {
-  background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
-}
-
-button[material]:active:not(:disabled) {
-  background-image: linear-gradient(var(--color-overlay-active), var(--color-overlay-active));
-}
-
-[tone="dark"] button[material],
-[tone="dark"] segmented-control[material] {
-  border-color: var(--tint-400);
-}
-
-button:disabled {
-  background: var(--tint-300);
-  border-color: transparent;
-  color: var(--tint-700);
-  box-shadow: none;
-}
-
-/* Ghost buttons stay chromeless when disabled — they have no
-   resting chrome to "grey out", so the dimmed foreground (inherited
-   via `color: var(--tint-700)` above) is the entire signal. The
-   default disabled bg would otherwise paint a tint-300 surface
-   that fights ghost's transparent baseline. */
-button[variant="ghost"]:disabled {
-  background: transparent;
-}
-
-/* Default-variant button on a dark surface — drop the chromed light fill,
-   pick up a brighter white-tint than inputs (15% vs 8%) to read as raised
-   rather than recessed, and replace the ineffective black drop shadow
-   with a top-edge inset highlight (macOS NSButton-on-dark convention).
-   `:not([material])` opts the tone-driven default fill OUT when the
-   element has explicit `material` — material owns the surface in that
-   case, regardless of tone. */
-:where([tone="dark"]) button:not([variant]):not([material]):not(:disabled),
-:where([tone="dark"]) button[variant="default"]:not([material]):not(:disabled),
-:where([tone="dark"]) segmented-control:not([variant]):not([material]),
-:where([tone="dark"]) segmented-control[variant="default"]:not([material]) {
-  background: var(--tint-200);
-  border-color: var(--tint-300);
-  box-shadow: inset 0 0.5px 0 var(--tint-300);
-}
-
-:where([tone="dark"]) button:not([variant]):hover:not(:disabled),
-:where([tone="dark"]) button[variant="default"]:hover:not(:disabled) {
-  background: var(--tint-300);
-}
-
-:where([tone="dark"]) button:not([variant]):active:not(:disabled),
-:where([tone="dark"]) button[variant="default"]:active:not(:disabled) {
-  background: var(--tint-400);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.20);
-}
-
-/* Explicit light-tone button rules — restore the chromed white-card
-   styling when a `tone="light"` ancestor sits inside a `tone="dark"`
-   one (e.g. a paper popover anchored inside dark chrome). Same
-   specificity as the dark-tone rules above; source order makes the
-   closer light-tone scope win for slotted descendants. */
-:where([tone="light"]) button:not([variant]):not([material]):not(:disabled),
-:where([tone="light"]) button[variant="default"]:not([material]):not(:disabled),
-:where([tone="light"]) segmented-control:not([variant]):not([material]),
-:where([tone="light"]) segmented-control[variant="default"]:not([material]) {
-  background: var(--color-surface);
-  border-color: var(--tint-200);
-  box-shadow: var(--shadow-control);
-}
-
-:where([tone="light"]) button:not([variant]):hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-surface) 96%, black);
-}
-
-:where([tone="light"]) button:not([variant]):active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-surface) 88%, black);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
-}
-
-/* Size opt-in: `size="sm"` swaps to the smaller control-height token.
-   Same applies to `<segmented-control size="sm">` so the host stretches
-   children correctly, and to `<button size="sm" icon-only>` so the
-   square footprint stays at the smaller control unit. The default
-   (md, 28px) is set on the base `<button>` rule above; only sm needs
-   an explicit override. */
-button[size="sm"],
-segmented-control[size="sm"] {
-  height: var(--control-height-sm);
-}
-
-button[size="sm"][icon-only] {
-  width: var(--control-height-sm);
-}
-
-button[size="xs"] {
-  height: var(--control-height-xs);
-  padding: 0 var(--space-6) 1px;
-  border-radius: var(--radius-8);
-}
-
-button[size="xs"][icon-only] {
-  width: var(--control-height-xs);
-  padding: 0;
-}
-
-/* Square icon-only buttons. Width = control height so the footprint is
-   square at the same vertical size as a text-button sibling. Chrome is
-   determined by the variant (default = chromed pill, ghost = chromeless
-   overlay). */
-button[icon-only] {
-  width: var(--control-height-md);
-  padding: 0;
-}
-
-[data-ui-icon] {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* Attribute conventions — see docs/ui.md § Attribute conventions.
-   `[selectable]` opts a subtree back into text selection inside an
-   ancestor that disabled it (the app's main area sets
-   `user-select: none` to suppress accidental chrome selection).
-   `[unselectable]` is the inverse — opts a subtree back OUT of
-   selection inside a `[selectable]` ancestor, for chrome labels
-   (e.g. "Used 5 tools") that sit alongside copyable content. */
-[selectable],
-[selectable] * {
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-[unselectable],
-[unselectable] * {
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Prose — opt-in typography for document content */
-
-.prose {
-  line-height: var(--leading-base);
-}
-
-.prose h1 {
-  font-size: var(--text-xl);
-  margin-bottom: var(--space-8);
-}
-
-.prose h2 {
-  font-size: var(--text-lg);
-  margin-top: var(--space-24);
-  margin-bottom: var(--space-8);
-}
-
-.prose h3,
-.prose h4,
-.prose h5,
-.prose h6 {
-  font-size: var(--text-base);
-  margin-top: var(--space-24);
-  margin-bottom: var(--space-8);
-}
-
-.prose p {
-  margin: var(--space-12) 0;
-}
-
-.prose ul,
-.prose ol {
-  padding-left: var(--space-24);
-  margin: var(--space-12) 0;
-}
-
-.prose blockquote {
-  margin: var(--space-12) 0;
-}
-
-.prose pre {
-  margin: var(--space-12) 0;
-}
-
-.prose hr {
-  margin: var(--space-24) 0;
-}
-
-.prose table {
-  width: 100%;
-  margin: var(--space-12) 0;
-}
-
-.prose img {
+img {
   max-width: 100%;
   height: auto;
 }
-
-.prose > :first-child {
-  margin-top: 0;
-}
-
-.prose > :last-child {
-  margin-bottom: 0;
-}
-
-
-
-