rikiki-deck 0.6.0 → 0.7.2

package/themes/siliceum.css

@@ -31,21 +31,24 @@
 
   --rik-palette-mango-700: #a87e00;
   --rik-palette-mango-500: #F7CB44;
+  /* The -100 step is the status FILL, and a fill has to be seen: measured
+     against the page it must clear a CIE76 delta E of 10, which lands every
+     hue at an alpha of 0.18. Enforced by scripts/theme-contrast.test.mjs. */
   --rik-palette-mango-200: rgba(247, 203, 68, 0.45);
   --rik-palette-mango-100: rgba(247, 203, 68, 0.18);
   --rik-palette-mango-50:  rgba(247, 203, 68, 0.05);
 
   --rik-palette-ember-500: #dc2626;
   --rik-palette-ember-200: rgba(220, 38, 38, 0.45);
-  --rik-palette-ember-100: rgba(220, 38, 38, 0.10);
+  --rik-palette-ember-100: rgba(220, 38, 38, 0.18);
 
   --rik-palette-helico-500: #16a34a;
   --rik-palette-helico-200: rgba(22, 163, 74, 0.45);
-  --rik-palette-helico-100: rgba(22, 163, 74, 0.08);
+  --rik-palette-helico-100: rgba(22, 163, 74, 0.18);
 
   --rik-palette-warm-500:  #ea580c;
   --rik-palette-warm-200:  rgba(234, 88, 12, 0.40);
-  --rik-palette-warm-100:  rgba(234, 88, 12, 0.08);
+  --rik-palette-warm-100:  rgba(234, 88, 12, 0.18);
 
   --rik-palette-orchid-500: #7c3aed;
   --rik-palette-lime-500:   #84cc16;
@@ -70,7 +73,8 @@
 
   --rik-text-default:                 var(--rik-palette-ink-900);
   --rik-text-default--muted:          var(--rik-palette-ink-700);
-  --rik-text-default--faint:          var(--rik-palette-ink-500);
+  /* Text-grade · ink-500 measured 4.35:1 on the page, under AA body text. */
+  --rik-text-default--faint:          #727272;
   --rik-text-inverse:                 #ffffff;
   --rik-text-inverse--muted:          rgba(255, 255, 255, 0.70);
   --rik-text-inverse--faint:          rgba(255, 255, 255, 0.55);
@@ -100,7 +104,7 @@
 
   --rik-status-info:                  var(--rik-palette-mango-500);
   --rik-status-info__text:            var(--rik-palette-mango-700);
-  --rik-status-info__bg:              var(--rik-palette-mango-50);
+  --rik-status-info__bg:              var(--rik-palette-mango-100);
   --rik-status-info__bg--mid:         var(--rik-palette-mango-100);
   --rik-status-info__bg--strong:      rgba(247, 203, 68, 0.18);
   --rik-status-info__border:          var(--rik-palette-mango-200);
@@ -116,7 +120,8 @@
   --rik-focus-ring--width:            2px;
   --rik-focus-ring--offset:           2px;
 
-  --rik-link:                         var(--rik-accent--strong);
+  /* accent--strong measured 3.56:1 on the page · under AA for body text. */
+  --rik-link:                         #916d00;
   --rik-link--hover:                  var(--rik-accent);
   --rik-link--visited:                var(--rik-palette-orchid-500);
 
@@ -127,6 +132,23 @@
   --rik-decor-lime:                   var(--rik-palette-lime-500);
   --rik-decor-canary:                 var(--rik-palette-canary-500);
 
+  /* Default vertical distribution of a slide body · a per-slide `spread`
+     attribute overrides it. Density is usually a per-slide judgement, which is
+     why this is a theme default and not a deck-level attribute. */
+
+  /* Text-grade tone companions · the plain tones are surface/decoration colors
+     and several of them sit under WCAG AA on the page. Anything that renders
+     TEXT in a tone (deck-punch, deck-stat) must route here instead.
+     Measured, not eyeballed · src/shared/contrast.test.ts fails if a value
+     drifts under the large-text threshold. */
+  --rik-status-success__text:       var(--rik-palette-helico-500);
+  --rik-status-warn__text:          var(--rik-palette-warm-500);
+  --rik-status-danger__text:        var(--rik-palette-ember-500);
+  --rik-accent__text:               #ab8d2f;
+  --rik-decor-orchid__text:         var(--rik-palette-orchid-500);
+  --rik-decor-lime__text:           #67a011;
+  --rik-decor-canary__text:         var(--rik-palette-canary-500);
+
   --rik-elevation-1:                  0 1px 2px rgba(0, 0, 0, 0.04);
   --rik-elevation-2:                  0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
   --rik-elevation-3:                  0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.06);
@@ -162,16 +184,22 @@
   --rik-text-3xl:                     3.815rem;
   --rik-text-4xl:                     4.768rem;
 
-  --rik-font-size-xs:                 var(--rik-text-2xs);
-  --rik-font-size-sm:                 var(--rik-text-xs);
+  /* Both of these used to sit under the legibility floor · the 8H rule puts
+     the smallest readable text at 1/50 of the screen height, which is 21.6px
+     on the 1080 canvas, and they resolved to 16.2px (1/66) and 20.3px (1/53).
+     A size nobody in the room can read is not a quiet tier, it is a tier that
+     is not there, and it was the size the micro-label tier lived at.
+     scripts/type-scale.test.mjs holds the floor now. */
+  --rik-font-size-xs:                 var(--rik-text-sm);
+  --rik-font-size-sm:                 var(--rik-text-sm);
   /* Slide body sized for projection (≈32px on the 1080 canvas) · the headings
      step up with it so the hierarchy (incl. markdown ## → h2) stays above body. */
   --rik-font-size-body:               var(--rik-text-base);
   --rik-font-size-lead:               var(--rik-text-md);
   --rik-font-size-h2:                 var(--rik-text-md);
-  --rik-font-size-h1:                 var(--rik-text-lg);
-  --rik-font-size-section:            var(--rik-text-lg);
-  --rik-font-size-display:            var(--rik-text-xl);
+  --rik-font-size-h1:                 var(--rik-text-2xl);
+  --rik-font-size-section:            var(--rik-text-3xl);
+  --rik-font-size-display:            var(--rik-text-2xl);
   --rik-font-size-mono:               0.88rem;
   --rik-font-size-mono-sm:            var(--rik-text-xs);
 
@@ -211,6 +239,16 @@
   --rik-slide-padding-x:              4rem;
   --rik-title-block:                  4.5rem;
 
+  /* Slide-title voice · the four values the two shipped themes disagreed on,
+     each of them written twice in a light-DOM rule the other theme copied and
+     edited. A theme carries VALUES; the rule that consumes them is written
+     once. scripts/theme-parity.test.mjs keeps the two files structurally
+     identical so the next divergence cannot be silent. */
+  --rik-title-weight:                 700;
+  --rik-title-tracking:               -0.018em;
+  --rik-title-leading:                1.15;
+  --rik-rule-weight:                  2px;
+
   --rik-code__bg:                     #0f0f10;
   --rik-code__border:                 #232325;
   --rik-code__text:                   #f4f4f5;
@@ -235,40 +273,53 @@
 }
 
 /* Minimal reset */
-*, *::before, *::after { box-sizing: border-box; }
-body, h1, h2, h3, h4, p, ul, ol, li, blockquote, pre, table, td, th,
-figure, dl, dd { margin: 0; padding: 0; }
+/* Scoped to the deck subtree · a host page that imports this theme to show an
+   embedded deck keeps its own box model and its own heading margins. */
+deck-root, deck-root *, deck-root *::before, deck-root *::after { box-sizing: border-box; }
+deck-root h1, deck-root h2, deck-root h3, deck-root h4, deck-root p,
+deck-root ul, deck-root ol, deck-root li, deck-root blockquote, deck-root pre,
+deck-root table, deck-root td, deck-root th, deck-root figure,
+deck-root dl, deck-root dd { margin: 0; padding: 0; }
 /* The rem baseline and the no-scroll reset are injected globally by deck-root
    (theme-independent · see _injectGlobals). The theme only owns the page surface
    and the type below. */
-html, body { background: var(--rik-surface-page); }
-body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
+/* Page surface · only when the deck IS the page. An embedded deck must not
+   repaint the document around it. */
+html:has(> body > deck-root), html:has(> body > deck-root) body {
+  background: var(--rik-surface-page);
+}
+html:has(> body > deck-root) body {
+  margin: 0;
+  font-family: var(--rik-font-sans);
+  color: var(--rik-text-default);
+}
 
 ::selection { background: var(--rik-selection__bg); color: var(--rik-selection__text); }
 
 /* Light-DOM helpers */
-.accent          { color: var(--rik-accent); }      /* bright yellow · for slides on dark; on paper, use --rik-link */
-.accent-danger   { color: var(--rik-status-danger); }
-.accent-warn     { color: var(--rik-status-warn); }
-.accent-success  { color: var(--rik-status-success); }
-.accent-orchid   { color: var(--rik-decor-orchid); }
-.accent-lime     { color: var(--rik-decor-lime); }
-
-.sub {
+deck-root .accent { color: var(--rik-accent); }      /* bright yellow · for slides on dark; on paper, use --rik-link */
+deck-root .accent-danger { color: var(--rik-status-danger); }
+deck-root .accent-warn { color: var(--rik-status-warn); }
+deck-root .accent-success { color: var(--rik-status-success); }
+deck-root .accent-orchid { color: var(--rik-decor-orchid); }
+deck-root .accent-lime { color: var(--rik-decor-lime); }
+
+deck-root .sub {
   font-size: var(--rik-font-size-h2);
-  color: var(--rik-text-inverse--faint);
+  color: var(--rik-text-inverse--muted);
   line-height: 1.45;
   max-width: 60ch;
 }
-.display {
+deck-root .display {
+  font-family: var(--rik-font-display);
   font-size: clamp(3rem, 7cqw, 5.5rem);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -0.03em;
 }
-.display.danger      { color: var(--rik-status-danger); }
-.caption.on-dark     { color: var(--rik-text-inverse--faint); font-size: var(--rik-font-size-lead); }
-.lead {
+deck-root .display.danger { color: var(--rik-status-danger); }
+deck-root .caption.on-dark { color: var(--rik-text-inverse--muted); font-size: var(--rik-font-size-lead); }
+deck-root .lead {
   font-size: var(--rik-font-size-lead);
   color: var(--rik-text-default--faint);
   line-height: 1.5;
@@ -277,20 +328,21 @@ body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
 
 deck-feature > h1,
 deck-split > h1,
-deck-feature-cards > h1 {
+deck-root deck-feature-cards > h1 {
   font-family: var(--rik-font-display);
   font-size: var(--rik-font-size-h1);
-  font-weight: 700;
+  font-weight: var(--rik-title-weight);
   color: var(--rik-text-default);
-  letter-spacing: -0.018em;
-  line-height: 1.15;
+  letter-spacing: var(--rik-title-tracking);
+  line-height: var(--rik-title-leading);
   margin-bottom: var(--rik-space-4);
   padding-bottom: var(--rik-space-2);
-  border-bottom: 2px solid var(--rik-accent);
+  border-bottom: var(--rik-rule-weight) solid var(--rik-accent);
   display: inline-block;
   align-self: flex-start;
 }
-deck-cover > h1 {
+deck-root deck-cover > h1 {
+  font-family: var(--rik-font-display);
   font-size: clamp(3.6rem, 9cqw, 8.5rem);
   font-weight: 900;
   color: var(--rik-text-inverse);
@@ -298,7 +350,8 @@ deck-cover > h1 {
   letter-spacing: -0.035em;
   margin-bottom: var(--rik-space-4);
 }
-deck-section > h1 {
+deck-root deck-section > h1 {
+  font-family: var(--rik-font-display);
   font-size: var(--rik-font-size-section);
   font-weight: 900;
   color: var(--rik-accent);
@@ -307,16 +360,16 @@ deck-section > h1 {
   max-width: 18ch;
   text-align: center;
 }
-deck-section > h1 em {
-  color: var(--rik-text-inverse--faint);
+deck-root deck-section > h1 em {
+  color: var(--rik-text-inverse--muted);
   font-style: normal;
   font-weight: 700;
 }
 
-deck-cover > .sub, deck-cover > p.sub {
+deck-root deck-cover > .sub, deck-root deck-cover > p.sub {
   display: block;
   font-size: var(--rik-font-size-h2);
-  color: var(--rik-text-inverse--faint);
+  color: var(--rik-text-inverse--muted);
   margin-bottom: var(--rik-space-6);
   max-width: 60ch;
   line-height: 1.45;
@@ -324,7 +377,7 @@ deck-cover > .sub, deck-cover > p.sub {
 
 deck-feature > .lead,
 deck-split > .lead,
-deck-feature-cards > .lead {
+deck-root deck-feature-cards > .lead {
   display: block;
   font-size: var(--rik-font-size-lead);
   color: var(--rik-text-default--faint);
@@ -333,7 +386,7 @@ deck-feature-cards > .lead {
   max-width: 75ch;
 }
 
-deck-feature code, deck-split code, deck-feature-cards code, deck-md code {
+deck-root deck-feature code, deck-root deck-split code, deck-root deck-feature-cards code, deck-root deck-md code {
   font-family: var(--rik-font-mono);
   font-size: var(--rik-font-size-mono-sm);
   background: var(--rik-surface-tint);
@@ -341,16 +394,16 @@ deck-feature code, deck-split code, deck-feature-cards code, deck-md code {
   border-radius: var(--rik-radius-sm);
   color: var(--rik-text-default);
 }
-deck-code code { all: unset; }
+deck-root deck-code code { all: unset; }
 
-.card-text {
+deck-root .card-text {
   font-size: var(--rik-font-size-body);
   color: var(--rik-text-default--muted);
   line-height: 1.55;
   margin: 0;
 }
 
-table.dense {
+deck-root table.dense {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -361,7 +414,7 @@ table.dense {
   background: var(--rik-surface-raised--strong);
   box-shadow: var(--rik-elevation-2);
 }
-table.dense th {
+deck-root table.dense th {
   text-align: left;
   padding: 10px var(--rik-space-3);
   color: var(--rik-text-default--faint);
@@ -372,13 +425,80 @@ table.dense th {
   border-bottom: 1px solid var(--rik-border-default);
   background: var(--rik-surface-sunken);
 }
-table.dense td {
+deck-root table.dense td {
   padding: 10px var(--rik-space-3);
   border-bottom: 1px solid var(--rik-border-default);
   color: var(--rik-text-default--muted);
   line-height: 1.4;
 }
-table.dense tr:last-child td { border-bottom: none; }
-table.dense td.ok  { color: var(--rik-status-success);  font-weight: 700; }
-table.dense td.no  { color: var(--rik-status-danger); }
-table.dense td.meh { color: var(--rik-status-warn); }
+deck-root table.dense tr:last-child td { border-bottom: none; }
+deck-root table.dense td.ok { color: var(--rik-status-success);  font-weight: 700; }
+deck-root table.dense td.no { color: var(--rik-status-danger); }
+deck-root table.dense td.meh { color: var(--rik-status-warn); }
+
+/* deck-table · the table stays in the author's light DOM, so its rules live
+   here rather than in a shadow root. Scoped to the deck subtree like every
+   other helper.
+
+   The look is the extras direction applied to data (docs/design/adr-002): the
+   header is told apart by weight and one rule, rows by hairlines, and nothing
+   is filled except the single row that matters. A pale tint reads as nothing at projection distance
+   (the raised surface sits at 1.10 contrast against the page), so emphasis is
+   the inverse surface · a dark band across the row. */
+deck-root table[data-rik-table] {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+deck-root table[data-rik-table] thead th {
+  text-align: left;
+  font-weight: 700;
+  color: var(--rik-text-default--muted);
+  padding: 0 var(--rik-space-4) var(--rik-space-2);
+  border-bottom: 2px solid var(--rik-accent);
+}
+deck-root table[data-rik-table] tbody td {
+  padding: var(--rik-space-3) var(--rik-space-4);
+  border-bottom: 1px solid var(--rik-border-default);
+  color: var(--rik-text-default);
+  line-height: 1.35;
+}
+deck-root table[data-rik-table] tbody tr:last-child td { border-bottom: none; }
+
+/* The emphasised row · one dark band, the only filled thing on the slide. */
+deck-root table[data-rik-table] tr[data-mark] > td {
+  background: var(--deck-table-mark-bg, var(--rik-surface-inverse));
+  color: var(--deck-table-mark-color, var(--rik-text-inverse));
+  border-bottom-color: var(--deck-table-mark-bg, var(--rik-surface-inverse));
+  font-weight: 700;
+}
+deck-root table[data-rik-table] tr[data-mark] > td:first-child {
+  border-radius: var(--rik-radius-sm) 0 0 var(--rik-radius-sm);
+}
+deck-root table[data-rik-table] tr[data-mark] > td:last-child {
+  border-radius: 0 var(--rik-radius-sm) var(--rik-radius-sm) 0;
+}
+
+/* The emphasised column · colour and weight, never a second fill · two
+   overlapping tints is how a table stops having a hierarchy at all. */
+deck-root table[data-rik-table] td[data-mark],
+deck-root table[data-rik-table] th[data-mark] {
+  color: var(--deck-table-col-color, var(--rik-accent__text));
+  font-weight: 700;
+}
+deck-root table[data-rik-table] tr[data-mark] > td[data-mark] {
+  color: var(--deck-table-col-on-mark, var(--rik-accent));
+}
+
+deck-root table[data-rik-table] tr[data-pending] {
+  /* Hidden but still occupying its row · a table that grows makes the slide
+     jump under the audience. */
+  visibility: hidden;
+}
+@media print {
+  deck-root table[data-rik-table] tr[data-pending] { visibility: visible; }
+  deck-root table[data-rik-table] tr[data-mark] > td {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/dist/layouts/deck-feature.d.ts

@@ -1,11 +0,0 @@
-import { LitElement } from 'lit';
-export declare class DeckFeature extends LitElement {
-    static styles: import("lit").CSSResult[];
-    eyebrow?: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'deck-feature': DeckFeature;
-    }
-}

package/dist/layouts/deck-split.d.ts

@@ -1,18 +0,0 @@
-import { LitElement } from 'lit';
-export type DeckSplitCols = '1-1' | '1-2' | '2-1' | '3';
-export declare class DeckSplit extends LitElement {
-    static styles: import("lit").CSSResult[];
-    eyebrow?: string;
-    cols?: DeckSplitCols;
-    gap?: string;
-    colGap?: string;
-    /** Map '1'..'6' to var(--sp-N); fall through to raw values otherwise. */
-    private _resolveSp;
-    updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'deck-split': DeckSplit;
-    }
-}

package/dist/layouts/deck-takeaway.d.ts

@@ -1,11 +0,0 @@
-import { LitElement } from 'lit';
-export declare class DeckTakeaway extends LitElement {
-    static styles: import("lit").CSSResult[];
-    kicker?: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'deck-takeaway': DeckTakeaway;
-    }
-}

package/dist/plugins/shiki.d.ts

@@ -1,8 +0,0 @@
-interface InstallOpts {
-    /** Shiki theme name (https://shiki.style/themes) · default 'one-dark-pro'. */
-    theme?: string;
-    /** Languages to preload · default ['ts', 'js', 'html', 'css', 'json']. */
-    langs?: string[];
-}
-export declare function installShiki(opts?: InstallOpts): Promise<void>;
-export {};