rshow 0.0.0-stage → 0.0.2

package/themes/default/mode.js

@@ -0,0 +1,242 @@
+/*
+ * rshow theme "default": mode. Zero dependencies, no build step.
+ *
+ * One theme, two modes, system by default. This file owns the reader's choice:
+ *
+ *   localStorage["rshow-mode"] = "light" | "dark" | "system"  (absence = system)
+ *   <html data-mode="light">   force light
+ *   <html data-mode="dark">    force dark
+ *   <html>                     follow prefers-color-scheme
+ *
+ * It runs from <head>, synchronously, before the body paints, so a page never
+ * flashes white on the way to dark. Everything that touches storage sits in a
+ * try/catch: private windows and file:// refuse localStorage and the page still
+ * works, following the system.
+ *
+ * The toggle. A page may place its own <button data-rshow-mode-toggle>; if it
+ * does not, this file mounts a small fixed button in the bottom right corner of
+ * the viewport, 16px in from the edge and outside whatever a notch or a home
+ * indicator takes (env(safe-area-inset-*)), so it holds still on a long page.
+ * A report page has a note column down its right side, and at 1056px and wider
+ * the corner button would sit on top of it: there the button moves to the
+ * bottom of the contents column instead, which sticks and is never covered.
+ * Either way the button is a real <button> that says the current mode in words,
+ * has an aria-label, a 44px target, the Carbon ghost look and no place in
+ * print.
+ *
+ * API: window.rshowMode = { get, set, cycle }. A deck reads the same key, so a
+ * choice made on one rshow document holds on the next: see deck.js, key "t".
+ * A change also fires a "rshowmodechange" event on document, which is how the
+ * theme preview re-reads its token values.
+ */
+(function () {
+  'use strict';
+
+  var KEY = 'rshow-mode';
+  var MODES = ['system', 'light', 'dark'];
+  var WORDS = { system: 'System', light: 'Light', dark: 'Dark' };
+  var LABELS = {
+    system: 'Colour mode: System, following this device. Activate to choose light.',
+    light: 'Colour mode: Light. Activate to choose dark.',
+    dark: 'Colour mode: Dark. Activate to follow this device.'
+  };
+
+  function normalize(value) {
+    return MODES.indexOf(value) === -1 ? 'system' : value;
+  }
+
+  function get() {
+    try {
+      return normalize(window.localStorage.getItem(KEY));
+    } catch (err) {
+      return 'system';
+    }
+  }
+
+  function paint(mode) {
+    var root = document.documentElement;
+    if (mode === 'system') {
+      root.removeAttribute('data-mode');
+    } else {
+      root.setAttribute('data-mode', mode);
+    }
+  }
+
+  function announce(mode) {
+    try {
+      document.dispatchEvent(new window.CustomEvent('rshowmodechange', {
+        detail: { mode: mode }
+      }));
+    } catch (err) {
+      // A browser without CustomEvent keeps the attribute and loses the event.
+    }
+  }
+
+  function set(mode) {
+    var next = normalize(mode);
+    paint(next);
+    try {
+      if (next === 'system') {
+        window.localStorage.removeItem(KEY);
+      } else {
+        window.localStorage.setItem(KEY, next);
+      }
+    } catch (err) {
+      // No storage: the mode still holds for this document.
+    }
+    sync();
+    announce(next);
+    return next;
+  }
+
+  function cycle() {
+    return set(MODES[(MODES.indexOf(get()) + 1) % MODES.length]);
+  }
+
+  // ---------------------------------------------------------------- paint --
+
+  // Before anything else, so the first frame is the right ground.
+  paint(get());
+
+  var STYLE = [
+    '.rshow-mode-toggle{',
+    'min-width:44px;min-height:44px;padding:0 14px;',
+    'display:inline-flex;align-items:center;justify-content:center;',
+    'font-family:var(--font-sans,system-ui,sans-serif);font-size:14px;line-height:1;',
+    'letter-spacing:0;color:var(--muted,#525252);background:transparent;',
+    'border:1px solid var(--border-subtle,#e0e0e0);border-radius:var(--radius,0);',
+    'cursor:pointer;-webkit-appearance:none;appearance:none;',
+    'transition:background-color 110ms ease,color 110ms ease,border-color 110ms ease}',
+    '.rshow-mode-toggle:hover{background:var(--layer-01,#f4f4f4);',
+    'border-color:var(--border-strong,#8d8d8d);color:var(--fg,#161616)}',
+    '.rshow-mode-toggle:focus-visible{outline:2px solid var(--accent,#0f62fe);',
+    'outline-offset:-2px}',
+    '.rshow-mode-toggle--fixed{position:fixed;z-index:20;',
+    'right:16px;bottom:16px;',
+    'right:max(16px,env(safe-area-inset-right,16px));',
+    'bottom:max(16px,env(safe-area-inset-bottom,16px));',
+    'background:var(--bg,#ffffff)}',
+    '.rshow-mode-toggle--toc{margin:var(--space-06,24px) 0 0}',
+    '@media print{.rshow-mode-toggle,.rshow-mode-toggle--fixed,',
+    '.rshow-mode-toggle--toc{display:none}}'
+  ].join('');
+
+  var button = null;
+
+  function sync() {
+    if (!button) {
+      return;
+    }
+    var mode = get();
+    button.textContent = WORDS[mode];
+    button.setAttribute('aria-label', LABELS[mode]);
+    button.setAttribute('title', 'Colour mode: ' + WORDS[mode] + ' (t in a deck)');
+  }
+
+  function mount() {
+    var style = document.createElement('style');
+    style.appendChild(document.createTextNode(STYLE));
+    document.head.appendChild(style);
+
+    var host = document.querySelector('[data-rshow-mode-toggle]');
+    var fixed = false;
+    if (host) {
+      if (host.tagName === 'BUTTON') {
+        button = host;
+      } else {
+        button = document.createElement('button');
+        button.type = 'button';
+        host.appendChild(button);
+      }
+    } else {
+      button = document.createElement('button');
+      button.type = 'button';
+      fixed = true;
+      document.body.appendChild(button);
+    }
+
+    button.type = 'button';
+    button.classList.add('rshow-mode-toggle');
+    if (fixed) {
+      button.classList.add('rshow-mode-toggle--fixed');
+    }
+    button.addEventListener('click', function () {
+      cycle();
+    });
+    sync();
+    if (fixed) {
+      place();
+      window.addEventListener('resize', queuePlace);
+      document.addEventListener('rshowmodechange', place);
+    }
+  }
+
+  // ---------------------------------------------------------- placement --
+
+  // This file mounts the button, so it owns where it goes. The corner rule is
+  // position: fixed, 16px from the right and bottom edge of the viewport, and
+  // the only thing it can land on is the note column of a report. The test is
+  // geometry, not a media query alone: if the corner box and the note column
+  // share any width at a size where a note column exists, the button goes to
+  // the bottom of the contents instead. It is measured from the corner, never
+  // from where the button happens to be, so the two places cannot flip.
+
+  var CORNER = 16;
+  var queued = null;
+
+  function cornerOverNotes() {
+    var notes = document.querySelector('.report .notes');
+    if (!notes) {
+      return false;
+    }
+    if (window.matchMedia && !window.matchMedia('(min-width: 1056px)').matches) {
+      return false;
+    }
+    var column = notes.getBoundingClientRect();
+    if (column.width === 0 || column.height === 0) {
+      return false;
+    }
+    var width = button.getBoundingClientRect().width;
+    var right = window.innerWidth - CORNER;
+    var left = right - width - 4;
+    return left < column.right && column.left < right;
+  }
+
+  function place() {
+    if (!button) {
+      return;
+    }
+    var toc = document.querySelector('.report nav.toc');
+    if (toc && cornerOverNotes()) {
+      if (button.parentNode !== toc) {
+        toc.appendChild(button);
+      }
+      button.classList.add('rshow-mode-toggle--toc');
+      button.classList.remove('rshow-mode-toggle--fixed');
+      return;
+    }
+    if (button.parentNode !== document.body) {
+      document.body.appendChild(button);
+    }
+    button.classList.add('rshow-mode-toggle--fixed');
+    button.classList.remove('rshow-mode-toggle--toc');
+  }
+
+  function queuePlace() {
+    if (queued !== null) {
+      window.clearTimeout(queued);
+    }
+    queued = window.setTimeout(function () {
+      queued = null;
+      place();
+    }, 120);
+  }
+
+  if (document.body) {
+    mount();
+  } else {
+    document.addEventListener('DOMContentLoaded', mount);
+  }
+
+  window.rshowMode = { get: get, set: set, cycle: cycle };
+}());

package/themes/default/page.css

@@ -0,0 +1,320 @@
+/*
+ * rshow theme "default": page layout
+ *
+ * For artifacts that are not a deck: reports, notes, explainers, reference
+ * pages. Link order: fonts.css, tokens.css, page.css.
+ *
+ * The page is Carbon white, the same system as the deck. It follows the system
+ * appearance into Carbon g100 and lets a reader override that choice; the
+ * colours come from tokens.css, which holds both modes. Prose stops at about 72
+ * characters, and a table, a figure and a code block are set the same way here
+ * as on a slide.
+ *
+ * No eyebrow label, no card grid, no numbered tiles, no accent rule down the
+ * side of a quote. A heading says what the section holds and the type does the
+ * rest.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: var(--color-scheme);
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  padding: var(--space-11) var(--space-06) var(--space-13);
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+main {
+  /* A ch is the width of a zero, which is wider than an average letter, so
+     56ch of Plex Sans at 18px is about 72 characters: the measure a reader can
+     hold on one line. */
+  max-width: 56ch;
+  margin: 0 auto;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------------ prose */
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 400;
+  line-height: var(--lh-heading);
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+h1 {
+  margin: 0 0 var(--space-05);
+  font-size: var(--text-2xl);
+  letter-spacing: -0.01em;
+}
+
+h2 {
+  margin: var(--space-09) 0 var(--space-04);
+  font-size: var(--text-lg);
+  font-weight: 600;
+}
+
+h3 {
+  margin: var(--space-07) 0 var(--space-03);
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+/* A fourth level is still a sentence in the body font, not a label above a
+   heading. There is no eyebrow in this system. */
+h4 {
+  margin: var(--space-06) 0 var(--space-03);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--muted);
+}
+
+p {
+  margin: 0 0 var(--space-05);
+}
+
+.lede {
+  margin: 0 0 var(--space-07);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  color: var(--muted);
+  max-width: 52ch;
+}
+
+ul,
+ol {
+  margin: 0 0 var(--space-05);
+  padding-left: var(--space-06);
+}
+
+li {
+  margin: 0 0 var(--space-02);
+}
+
+li::marker {
+  color: var(--muted);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+strong {
+  font-weight: 600;
+}
+
+hr {
+  height: 0;
+  margin: var(--space-08) 0;
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+}
+
+blockquote {
+  margin: var(--space-06) 0;
+  font-size: var(--text-base);
+  line-height: 1.5;
+  max-width: 44ch;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+blockquote cite {
+  display: block;
+  margin-top: var(--space-03);
+  font-style: normal;
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+
+.small {
+  font-size: var(--text-2xs);
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+.muted {
+  color: var(--muted);
+}
+
+/* Mono is for code and for data, never for a label. */
+.mono,
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+/* ------------------------------------------------------------------ code */
+
+code {
+  padding: 0.1em 0.32em;
+  background: var(--layer-01);
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  margin: 0 0 var(--space-06);
+  padding: var(--space-05) var(--space-06);
+  overflow: auto;
+  background: var(--layer-01);
+  border: 0;
+  border-radius: var(--radius);
+  line-height: var(--lh-code);
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  font-size: inherit;
+}
+
+kbd {
+  padding: 0.1em 0.36em;
+  border: 1px solid var(--border-strong);
+  background: var(--layer-01);
+  color: var(--fg);
+}
+
+/* ---------------------------------------------------------------- tables */
+
+/* Overflow belongs to the wrapper so a phone scrolls the table, not the page. */
+.table {
+  margin: 0 0 var(--space-07);
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-xs);
+  line-height: 1.45;
+}
+
+caption {
+  padding: 0 0 var(--space-04);
+  text-align: left;
+  font-size: var(--text-2xs);
+  color: var(--muted);
+}
+
+th,
+td {
+  padding: var(--space-03) var(--space-05);
+  text-align: left;
+  vertical-align: baseline;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+thead th {
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+tbody tr:last-child th,
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+td.num-cell,
+th.num-cell {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* --------------------------------------------------------------- figures */
+
+figure {
+  margin: var(--space-07) 0;
+}
+
+figure img,
+figure svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+figcaption {
+  margin-top: var(--space-04);
+  font-size: var(--text-2xs);
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+/* ---------------------------------------------------------------- footer */
+
+footer {
+  margin-top: var(--space-11);
+  padding-top: var(--space-05);
+  border-top: 1px solid var(--border-subtle);
+  font-size: var(--text-2xs);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+footer a {
+  color: var(--muted);
+}
+
+/* --------------------------------------------------------- small screens */
+
+@media (max-width: 640px) {
+  body {
+    padding: var(--space-08) var(--space-05) var(--space-11);
+    font-size: var(--text-xs);
+  }
+
+  h1 {
+    font-size: var(--text-xl);
+  }
+
+  h2 {
+    font-size: var(--text-md);
+  }
+
+  blockquote {
+    font-size: var(--text-sm);
+  }
+
+  pre {
+    font-size: var(--text-2xs);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}