@kitlangton/knobs 0.4.0-next.3 → 0.4.0-next.5

package/dist/panel.js

@@ -1746,6 +1746,22 @@ var init_schema = __esm(() => {
       source: css("var(--k-warn)"),
       doc: "Modified lines."
     },
+    {
+      name: "before",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg-3)"),
+      doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+    },
+    {
+      name: "after",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg)"),
+      doc: "After in a comparison, and only After."
+    },
     {
       name: "series-1",
       tier: "semantic",
@@ -1836,6 +1852,150 @@ var init_schema = __esm(() => {
       source: value("288px"),
       doc: "Panel width."
     },
+    {
+      name: "space-inside",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("var(--k-unit)"),
+      doc: "Parts of one thing: an icon and its label, a meta line and its title."
+    },
+    {
+      name: "space-sibling",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 2)"),
+      doc: "Siblings in a group: buttons in a row, a list item's lines."
+    },
+    {
+      name: "space-title",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "A heading and what it heads."
+    },
+    {
+      name: "space-group",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 12)"),
+      doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle)."
+    },
+    {
+      name: "space-section",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 24)"),
+      doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle."
+    },
+    {
+      name: "space-column",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "Columns: a contents rail and the page, media side by side."
+    },
+    {
+      name: "pad-page",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "A page's edge; 16px under 640px wide."
+    },
+    {
+      name: "pad-card",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "Inside a card or popover."
+    },
+    {
+      name: "type-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "A page's title, weight 500."
+    },
+    {
+      name: "leading-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("28px"),
+      doc: "Line height for type-heading."
+    },
+    {
+      name: "type-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Section titles (under their kicker), weight 500."
+    },
+    {
+      name: "leading-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("24px"),
+      doc: "Line height for type-title."
+    },
+    {
+      name: "type-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("13px"),
+      doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis."
+    },
+    {
+      name: "leading-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "Line height for type-body."
+    },
+    {
+      name: "type-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("12px"),
+      doc: "Mono inside body text: code and paths."
+    },
+    {
+      name: "leading-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-label."
+    },
+    {
+      name: "type-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("11px"),
+      doc: "Meta, controls, keys, timestamps; mono inside labels."
+    },
+    {
+      name: "leading-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-small."
+    },
     {
       name: "font-size",
       tier: "semantic",
@@ -2800,16 +2960,18 @@ function injectTokens(doc) {
   style.textContent = rootCss;
   doc.head.append(style);
 }
-var ROOT_CLASS = "knobs-root", extras, spring, rootCss;
+var ROOT_CLASS = "knobs-root", extras, narrow, spring, rootCss;
 var init_root = __esm(() => {
   init_knobs();
   init_css();
   init_glide();
   init_motion();
   extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`;
+  narrow = `@media(max-width:639.98px){:where(.${ROOT_CLASS}){--_k-pad-page:var(--k-pad-page,calc(var(--_k-unit) * 4))}}`;
   spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`;
   rootCss = `${tokensCss(knobs)}
 ${extras}
+${narrow}
 ${spring}
 ${DRIVERS}
 ${motionCss}`;
@@ -20934,6 +21096,8 @@ var compareCss = `
 .knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}
 .knobs-compare[data-frame="flat"] .knobs-cmp-stage{border-radius:0}
 .knobs-compare[data-mode="wipe"] .knobs-cmp-stage{cursor:ew-resize}
+/* Videos: a click on the stage plays and pauses. */
+.knobs-compare[data-video]:not([data-mode="wipe"],[data-zoomed]) .knobs-cmp-stage{cursor:pointer}
 /* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */
 .knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}
 .knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}
@@ -20943,14 +21107,28 @@ var compareCss = `
 .knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 .knobs-cmp-media{position:absolute;left:0;top:0;display:block;max-width:none;margin:0;padding:0;border:0;object-fit:fill;transform-origin:0 0;pointer-events:none;will-change:transform}
 .knobs-compare[data-renderer="gpu"] .knobs-cmp-media{opacity:0}
+/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */
+.knobs-cmp-canvas,.knobs-compare[data-renderer="dom"] .knobs-cmp-media{transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}
 /* Glass: what's behind shows through, blurred, on the knobs tokens. */
 .knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
   box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim),0 2px 10px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
-.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color calc(var(--_k-hover-out) * 1ms)}
-/* The wipe: a hairline down the line with a raised grip at the pointer's height; a wider strip
-   takes the hand and the keys (a slider). It fades with the mode; wiping, line and grip brighten. */
-.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform;transition:opacity .18s cubic-bezier(.4,0,1,1)}
-.knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
+/* ✗ Before · ✓ After: Before quieter (fg-3), After in full text. Neutral: no colour of its own. */
+.knobs-cmp-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;font-weight:var(--_k-weight-label);
+  white-space:nowrap;pointer-events:none;will-change:transform}
+.knobs-cmp-label[data-side="before"]{color:var(--_k-fg-3)}
+.knobs-cmp-label[data-side="after"]{color:var(--_k-fg)}
+/* Fusing, the mark folds away and the label is its name. */
+.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}
+.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}
+/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */
+.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
+/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height
+   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the
+   fuse; wiping, line and grip brighten. */
+.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform,opacity}
+.knobs-cmp-handle[data-on]{pointer-events:auto}
 .knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:color-mix(in srgb,var(--_ku-cmp-line) 72%,transparent);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
 .knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}
 .knobs-cmp-grip{position:absolute;top:0;left:4px;width:16px;height:28px;border-radius:min(8px,calc(var(--_k-radius) * 999));background:var(--_k-bg-overlay);
@@ -20982,6 +21160,27 @@ var compareCss = `
 @media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}
 `;
 
+// src/ui/player-css.ts
+var playerCss = `
+:where(.knobs-player,.knobs-player *){box-sizing:border-box}
+.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline:none;
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-player,.knobs-ui.knobs-player[data-nested]{--_kp-stage:var(--k-compare-stage,transparent)}
+.knobs-player-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage);cursor:pointer}
+.knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
+.knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
+  opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+.knobs-player-glyph{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:var(--_k-fg);pointer-events:none;
+  opacity:0;filter:blur(4px);scale:.96;
+  background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
+  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim);
+  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),filter calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-player-glyph svg{width:16px;height:16px}
+.knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}
+.knobs-player-line{flex:none;min-height:0}
+`;
+
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
@@ -21316,6 +21515,12 @@ var css3 = `
    --_ku-pane-bg and --_ku-pane-ring so this reaches them. */
 :where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui:not(.knobs-surface),.knobs-ui[data-nested]{--_ku-gap:var(--k-ui-gap,0px);--_ku-pane-bg:transparent;--_ku-pane-ring:none;
   --_ku-divider:var(--_k-split-gutter);--_kd-bg:transparent}
+/* What draws its box without those: a picker's card keeps its fill as the highlight but drops its
+   ring; a timeline's track drops its well for a hairline under the lane; an inline panel sheds its
+   card (--k-chrome 0). A full-window step is the one raised exception (it is the surface). */
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-picker-card,.knobs-ui[data-nested] .knobs-picker-card{box-shadow:none}
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-tl-track,.knobs-ui[data-nested] .knobs-tl-track{background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--_k-border-subtle)}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-panel.knobs-inline:not(.knobs-page){--k-chrome:0}
 /* Only the pieces' own elements take their type and resets: what you put in a pane is yours. */
 .knobs-ui{box-sizing:border-box}
 :where(.knobs-split>*,.knobs-pane-clip,.knobs-pane-inner,.knobs-pane-body,.knobs-pane-head,.knobs-pane-head *,.knobs-pane-rail,.knobs-pane-rail *,.knobs-tree,.knobs-tree *,.knobs-tree-ghost){box-sizing:border-box}
@@ -21541,8 +21746,6 @@ var css3 = `
 .knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
 .knobs-tl-track:hover .knobs-tl-hover{opacity:1}
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
-@media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
-@media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
 .knobs-tl-tag{position:absolute;left:0;bottom:2px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none;opacity:0}
 .knobs-tl-tag[data-on]{opacity:1}
 /* The lane (variant: "lane"): one slim track of ticks under a compare or a video; markers are
@@ -21558,7 +21761,26 @@ var css3 = `
 .knobs-timeline[data-variant="lane"] .knobs-tl-head::before{top:0}
 .knobs-timeline[data-variant="lane"] .knobs-tl-head::after{content:none}
 .knobs-timeline[data-variant="lane"] .knobs-tl-tag{top:2px;bottom:auto}
-`, uiCss = () => aliased(css3 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + selectionPillCss) + rolling_css_default, lookDefaults, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS2;
+/* The line (variant: "line"): a player's progress under its media. One 2px line, fg-3 with fg
+   filling it, a segment per chapter; it thickens under the pointer and while scrubbing. The
+   chapter and time under the pointer float over it; nothing else shows. */
+.knobs-ui.knobs-timeline[data-variant="line"]{height:auto;min-height:0;padding:0;gap:0}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:none}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{height:16px;overflow:visible;border-radius:var(--_k-radius);background:transparent;box-shadow:none;cursor:pointer}
+.knobs-timeline[data-variant="line"] :is(.knobs-tl-ruler,.knobs-tl-lane,.knobs-tl-hover,.knobs-tl-head,.knobs-tl-rlabel){display:none}
+.knobs-tl-segs{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;transition:scale calc(var(--_k-hover-out) * 1ms) var(--_ku-ease)}
+.knobs-tl-seg{position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:1px;background:var(--_k-fg-3);will-change:transform}
+.knobs-tl-seg-fill{position:absolute;inset:0;background:var(--_k-fg);transform-origin:0 0;will-change:transform}
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs,.knobs-timeline[data-variant="line"][data-scrubbing] .knobs-tl-segs{scale:1 2}
+.knobs-timeline[data-variant="line"] .knobs-tl-range{top:3px;bottom:3px;border-radius:3px}
+.knobs-timeline[data-variant="line"]:focus-visible .knobs-tl-track,.knobs-timeline[data-variant="line"][data-keyboard]:focus .knobs-tl-track{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 60%,transparent)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag{top:auto;bottom:calc(100% + 2px);display:flex;gap:6px;padding:0 6px;border-radius:calc(var(--_k-radius) * 999);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);
+  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 .5px var(--_k-border)}
+.knobs-tl-tag-label{color:var(--_k-fg-2)}
+.knobs-tl-tag-label:empty{display:none}
+@media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
+@media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
+`, uiCss = () => aliased(css3 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + playerCss + selectionPillCss) + rolling_css_default, lookDefaults, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS2;
 var init_look = __esm(() => {
   init_appearance();
   init_activity_css();

package/dist/themes.js

@@ -447,6 +447,22 @@ var TOKENS = [
     source: css("var(--k-warn)"),
     doc: "Modified lines."
   },
+  {
+    name: "before",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-fg-3)"),
+    doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+  },
+  {
+    name: "after",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-fg)"),
+    doc: "After in a comparison, and only After."
+  },
   {
     name: "series-1",
     tier: "semantic",
@@ -537,6 +553,150 @@ var TOKENS = [
     source: value("288px"),
     doc: "Panel width."
   },
+  {
+    name: "space-inside",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("var(--k-unit)"),
+    doc: "Parts of one thing: an icon and its label, a meta line and its title."
+  },
+  {
+    name: "space-sibling",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 2)"),
+    doc: "Siblings in a group: buttons in a row, a list item's lines."
+  },
+  {
+    name: "space-title",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 3)"),
+    doc: "A heading and what it heads."
+  },
+  {
+    name: "space-group",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 12)"),
+    doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle)."
+  },
+  {
+    name: "space-section",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 24)"),
+    doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle."
+  },
+  {
+    name: "space-column",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 6)"),
+    doc: "Columns: a contents rail and the page, media side by side."
+  },
+  {
+    name: "pad-page",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 6)"),
+    doc: "A page's edge; 16px under 640px wide."
+  },
+  {
+    name: "pad-card",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 3)"),
+    doc: "Inside a card or popover."
+  },
+  {
+    name: "type-heading",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("20px"),
+    doc: "A page's title, weight 500."
+  },
+  {
+    name: "leading-heading",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("28px"),
+    doc: "Line height for type-heading."
+  },
+  {
+    name: "type-title",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Section titles (under their kicker), weight 500."
+  },
+  {
+    name: "leading-title",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("24px"),
+    doc: "Line height for type-title."
+  },
+  {
+    name: "type-body",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("13px"),
+    doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis."
+  },
+  {
+    name: "leading-body",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("20px"),
+    doc: "Line height for type-body."
+  },
+  {
+    name: "type-label",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("12px"),
+    doc: "Mono inside body text: code and paths."
+  },
+  {
+    name: "leading-label",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Line height for type-label."
+  },
+  {
+    name: "type-small",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("11px"),
+    doc: "Meta, controls, keys, timestamps; mono inside labels."
+  },
+  {
+    name: "leading-small",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Line height for type-small."
+  },
   {
     name: "font-size",
     tier: "semantic",

package/dist/types/tokens/schema.d.ts

@@ -409,6 +409,24 @@ export declare const TOKENS: readonly [{
         readonly css: "var(--k-warn)";
     };
     readonly doc: "Modified lines.";
+}, {
+    readonly name: "before";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-fg-3)";
+    };
+    readonly doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour.";
+}, {
+    readonly name: "after";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-fg)";
+    };
+    readonly doc: "After in a comparison, and only After.";
 }, {
     readonly name: "series-1";
     readonly tier: "semantic";
@@ -510,6 +528,168 @@ export declare const TOKENS: readonly [{
         readonly value: "288px";
     };
     readonly doc: "Panel width.";
+}, {
+    readonly name: "space-inside";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "var(--k-unit)";
+    };
+    readonly doc: "Parts of one thing: an icon and its label, a meta line and its title.";
+}, {
+    readonly name: "space-sibling";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 2)";
+    };
+    readonly doc: "Siblings in a group: buttons in a row, a list item's lines.";
+}, {
+    readonly name: "space-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 3)";
+    };
+    readonly doc: "A heading and what it heads.";
+}, {
+    readonly name: "space-group";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 12)";
+    };
+    readonly doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle).";
+}, {
+    readonly name: "space-section";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 24)";
+    };
+    readonly doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle.";
+}, {
+    readonly name: "space-column";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 6)";
+    };
+    readonly doc: "Columns: a contents rail and the page, media side by side.";
+}, {
+    readonly name: "pad-page";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 6)";
+    };
+    readonly doc: "A page's edge; 16px under 640px wide.";
+}, {
+    readonly name: "pad-card";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 3)";
+    };
+    readonly doc: "Inside a card or popover.";
+}, {
+    readonly name: "type-heading";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "20px";
+    };
+    readonly doc: "A page's title, weight 500.";
+}, {
+    readonly name: "leading-heading";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "28px";
+    };
+    readonly doc: "Line height for type-heading.";
+}, {
+    readonly name: "type-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Section titles (under their kicker), weight 500.";
+}, {
+    readonly name: "leading-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "24px";
+    };
+    readonly doc: "Line height for type-title.";
+}, {
+    readonly name: "type-body";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "13px";
+    };
+    readonly doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis.";
+}, {
+    readonly name: "leading-body";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "20px";
+    };
+    readonly doc: "Line height for type-body.";
+}, {
+    readonly name: "type-label";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "12px";
+    };
+    readonly doc: "Mono inside body text: code and paths.";
+}, {
+    readonly name: "leading-label";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Line height for type-label.";
+}, {
+    readonly name: "type-small";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "11px";
+    };
+    readonly doc: "Meta, controls, keys, timestamps; mono inside labels.";
+}, {
+    readonly name: "leading-small";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Line height for type-small.";
 }, {
     readonly name: "font-size";
     readonly tier: "semantic";