@calliopelabs/ui 0.13.0 → 0.16.0

package/dist/tokens/README.jupyterlab.md

@@ -0,0 +1,125 @@
+# JupyterLab: `jupyterlab.css`
+
+Maps the library tokens onto JupyterLab's theme variables, for JupyterLab 4 and Notebook 7 (JunoHub's lab).
+
+## Use
+
+In a theme extension, import it after the stock variables in the theme's `style/variables.css`:
+
+```css
+@import "@jupyterlab/theme-dark-extension/style/variables.css";
+@import "@calliopelabs/ui/tokens/jupyterlab.css";
+```
+
+Or, without an extension, serve the file and add it to the lab page after JupyterLab's styles (a `custom.css`, or the page template).
+
+With no `data-ground`, the ground follows JupyterLab's own theme switch: Black under a dark theme, Paper under a light one (JupyterLab sets `data-jp-theme-light` on `<body>`). To choose, set `data-ground` and `data-accent` on `<html>`; pick a ground whose mode matches the JupyterLab theme you load:
+
+```js
+document.documentElement.dataset.ground = "charcoal";
+document.documentElement.dataset.accent = "copper";
+```
+
+Grounds: `black` (dark), `charcoal` (dark), `graphite` (dark), `emerald` (dark), `navy` (dark), `paper` (light), `mist` (light). Accents: `green`, `copper`, `ice`, `periwinkle`, `amber`. The ground carries the mode, so there is no `data-mode`; `:root` paints `black` with `green`. The CSS layer's `appearance.js` stamps the same `data-ground` and `data-accent` attributes from the person's stored choice.
+
+Left as JupyterLab ships them: syntax colours (`--jp-mirror-editor-*`), the search highlight, collaborator and completer colours, scrollbars, font sizes, and the red "warn" dialog button set, whose white label the family's dark danger red cannot carry.
+
+## Mapping
+
+Layout colours run from the page (0) outwards; font colours from strongest (0) to faintest (3); state colours from text (0) and marks (1) to the tinted hairline (2) and the fill (3).
+
+| Variable | Library token | Black, green | Paper, green | Note |
+| --- | --- | --- | --- | --- |
+| `--jp-layout-color0` | `--background` | `#000000` | `#faf6ee` | Main area and notebook |
+| `--jp-layout-color1` | `--card` | `#0a0a0a` | `#fffdf9` | Panels, active tab, toolbars |
+| `--jp-layout-color2` | `--secondary` | `#161616` | `#f3eee4` | Tab bar, side panel headers |
+| `--jp-layout-color3` | `--accent` | `#1b1b1b` | `#f0e6da` | The hover and selected surface |
+| `--jp-layout-color4` | `--muted-foreground` | `#848b88` | `#5c5b58` | Strongest layout tone |
+| `--jp-inverse-layout-color0` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-inverse-layout-color1` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-inverse-layout-color2` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-inverse-layout-color3` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-inverse-layout-color4` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-border-color0` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` | Inputs and cell borders |
+| `--jp-border-color1` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-border-color2` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-border-color3` | `--sidebar-border` | `rgba(255, 255, 255, 0.08)` | `#dedad2` | The faintest hairline |
+| `--jp-inverse-border-color` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-ui-font-color0` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-ui-font-color1` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-ui-font-color2` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-ui-font-color3` | `--muted-foreground` | `#848b88` | `#5c5b58` | No separate disabled ink |
+| `--jp-ui-inverse-font-color0` | `--primary-foreground` | `#04241b` | `#f3fbf7` | Ink on brand fills |
+| `--jp-ui-inverse-font-color1` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--jp-ui-inverse-font-color2` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--jp-ui-inverse-font-color3` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--jp-content-font-color0` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-content-font-color1` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-content-font-color2` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-content-font-color3` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--jp-content-link-color` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-brand-color0` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-brand-color1` | `--primary` | `#2f9e52` | `#26803f` | Active cell, focus, selection marks |
+| `--jp-brand-color2` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-brand-color3` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` | The accent tint |
+| `--jp-brand-color4` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` |  |
+| `--jp-accent-color0` | `--chart-2` | `#8fd82a` | `#5c9c1a` | The family's second series |
+| `--jp-accent-color1` | `--chart-2` | `#8fd82a` | `#5c9c1a` |  |
+| `--jp-accent-color2` | `--chart-2` | `#8fd82a` | `#5c9c1a` |  |
+| `--jp-accent-color3` | `--chart-2` | `#8fd82a` | `#5c9c1a` |  |
+| `--jp-warn-color0` | `--warning-fg` | `#f0c34e` | `#824c12` | Text |
+| `--jp-warn-color1` | `--warning` | `#f0c34e` | `#cb7a00` | Marks |
+| `--jp-warn-color2` | `--warning-border` | `rgba(240, 195, 78, 0.35)` | `#e8c184` |  |
+| `--jp-warn-color3` | `--warning-bg` | `rgba(240, 195, 78, 0.1)` | `#fef0d4` | Fills |
+| `--jp-error-color0` | `--danger-fg` | `#ff8a8a` | `#bb0916` | Text |
+| `--jp-error-color1` | `--danger` | `#ff6b6b` | `#df2225` | Marks |
+| `--jp-error-color2` | `--danger-border` | `rgba(255, 107, 107, 0.35)` | `#ffb1aa` |  |
+| `--jp-error-color3` | `--danger-bg` | `rgba(255, 107, 107, 0.1)` | `#ffeae9` | Fills |
+| `--jp-success-color0` | `--success-fg` | `#a6e34d` | `#305a12` | Text |
+| `--jp-success-color1` | `--success` | `#8fd82a` | `#508d23` | Marks |
+| `--jp-success-color2` | `--success-border` | `rgba(143, 216, 42, 0.35)` | `#b4d7a2` |  |
+| `--jp-success-color3` | `--success-bg` | `rgba(143, 216, 42, 0.1)` | `#e3f5da` | Fills |
+| `--jp-info-color0` | `--info-fg` | `#5cbb79` | `#1b622d` | Text |
+| `--jp-info-color1` | `--info` | `#2f9e52` | `#2f8543` | Marks |
+| `--jp-info-color2` | `--info-border` | `rgba(47, 158, 82, 0.4)` | `#acd8b1` |  |
+| `--jp-info-color3` | `--info-bg` | `rgba(47, 158, 82, 0.14)` | `#e2f4e3` | Fills |
+| `--jp-cell-editor-background` | `--muted` | `#111111` | `#f3eee4` |  |
+| `--jp-cell-editor-border-color` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-cell-editor-active-background` | `--card` | `#0a0a0a` | `#fffdf9` |  |
+| `--jp-cell-editor-active-border-color` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--jp-cell-inprompt-font-color` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-cell-outprompt-font-color` | `--chart-4` | `#e0b34a` | `#b8860b` |  |
+| `--jp-notebook-select-background` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-notebook-multiselected-color` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` |  |
+| `--jp-rendermime-error-background` | `--danger-bg` | `rgba(255, 107, 107, 0.1)` | `#ffeae9` |  |
+| `--jp-rendermime-table-row-background` | `--muted` | `#111111` | `#f3eee4` |  |
+| `--jp-rendermime-table-row-hover-background` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-toolbar-background` | `--card` | `#0a0a0a` | `#fffdf9` |  |
+| `--jp-toolbar-border-color` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-toolbar-active-background` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-input-background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--jp-input-active-background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--jp-input-hover-background` | `--secondary` | `#161616` | `#f3eee4` |  |
+| `--jp-input-border-color` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-input-active-border-color` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--jp-input-active-box-shadow-color` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` |  |
+| `--jp-editor-selected-background` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-editor-selected-focused-background` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` |  |
+| `--jp-editor-cursor-color` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-focus-outline-color` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--jp-accept-color-normal` | `--primary` | `#2f9e52` | `#26803f` | Primary dialog button |
+| `--jp-accept-color-hover` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-accept-color-active` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--jp-accept-color-foreground` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--jp-accept-outline-color` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--jp-reject-color-normal` | `--secondary` | `#161616` | `#f3eee4` | Secondary dialog button |
+| `--jp-reject-color-hover` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-reject-color-active` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--jp-reject-color-foreground` | `--secondary-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--jp-reject-outline-color` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--jp-border-radius` | `--radius` | `2px` | same | Every ground |
+| `--jp-ui-font-family` | `--font-sans` | `var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif` | same | Every ground |
+| `--jp-content-font-family` | `--font-sans` | `var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif` | same | Every ground |
+| `--jp-code-font-family` | `--font-mono` | `var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace` | same | Every ground |
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.

package/dist/tokens/README.md

@@ -0,0 +1,15 @@
+# @calliopelabs/ui tokens
+
+The family's tokens for stacks that cannot use the Tailwind preset or the CSS layer, generated from the same token table. Each value is what the preset paints on that ground with that accent and no product brand.
+
+| File | For | Guide |
+| --- | --- | --- |
+| `jupyterlab.css` | JupyterLab and Jupyter Notebook 7 (`--jp-*`) | [README.jupyterlab.md](README.jupyterlab.md) |
+| `vscode.css` | VS Code webviews outside VS Code (`--vscode-*` fallbacks) | [README.vscode.md](README.vscode.md) |
+| `tokens.py` | Python (the installer): RGB triplets and accessors | [README.python.md](README.python.md) |
+| `tokens.native.js`, `tokens.native.d.ts` | React Native | [README.native.md](README.native.md) |
+| `plain.css` | Sites and apps that read plain variables (Cykick) | [README.plain.md](README.plain.md) |
+
+Server-rendered apps that want the components as well take the CSS layer (`@calliopelabs/ui/css/*`) instead.
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.

package/dist/tokens/README.native.md

@@ -0,0 +1,29 @@
+# React Native: `tokens.native.js`
+
+Every colour token of every ground and accent as objects React Native's `StyleSheet` takes as they are (`#rrggbb` or `rgba()`), keyed in camelCase, with types.
+
+## Use
+
+```ts
+import { palette, charcoal, radius, fonts, GROUNDS } from "@calliopelabs/ui/tokens/native";
+
+const c = palette("paper", "copper");
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: c.background },
+  title: { color: c.foreground, fontFamily: fonts.head },
+  button: { backgroundColor: c.primary, borderRadius: radius },
+  buttonLabel: { color: c.primaryForeground },
+  hint: { color: c.mutedForeground },
+});
+
+// charcoal is palette("charcoal") with the default accent.
+const statusBar = GROUNDS.charcoal.mode === "dark" ? "light-content" : "dark-content";
+```
+
+Each ground is exported by name (`black`, `charcoal`, `graphite`, `emerald`, `navy`, `paper`, `mist`) with the default accent; `palette(ground, accent)` gives any combination and throws on an unknown one. Keys follow the CSS names in camelCase: `background`, `card`, `primary`, `primaryForeground`, `mutedForeground`, `border`, `ring`, `chart1`, `sidebarAccent`, `success`, `successFg`, `dangerBg` and so on. `radius` is in points, `motion` in milliseconds, and `fonts` holds family names; the app loads the fonts (IBM Plex Sans, IBM Plex Mono, DM Sans).
+
+The package is ESM; Metro resolves the `@calliopelabs/ui/tokens/native` subpath through `exports` (on by default since React Native 0.79). Or copy the two files into the app.
+
+Grounds: `black` (dark), `charcoal` (dark), `graphite` (dark), `emerald` (dark), `navy` (dark), `paper` (light), `mist` (light). Accents: `green`, `copper`, `ice`, `periwinkle`, `amber`.
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.

package/dist/tokens/README.plain.md

@@ -0,0 +1,84 @@
+# Plain CSS: `plain.css`
+
+Every colour token under its own name (`--background`, `--primary`, `--success-fg`, ...) as a concrete value, plus `--radius`, `--motion-*` and `--font-sans`, `--font-mono`, `--font-head`. No `var()` chains, no `color-mix`, no product or brand machinery, and `color-scheme` set per ground: for static sites and apps that only read variables (Cykick, the marketing sites).
+
+## Use
+
+```html
+<html data-ground="charcoal" data-accent="ice">
+  <link rel="stylesheet" href="/static/calliope/plain.css" />
+```
+
+```css
+body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
+.button { background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius); }
+```
+
+Any element can carry the attributes, so a section can sit on another ground. Grounds: `black` (dark), `charcoal` (dark), `graphite` (dark), `emerald` (dark), `navy` (dark), `paper` (light), `mist` (light). Accents: `green`, `copper`, `ice`, `periwinkle`, `amber`. The ground carries the mode, so there is no `data-mode`; `:root` paints `black` with `green`. The CSS layer's `appearance.js` stamps the same `data-ground` and `data-accent` attributes from the person's stored choice.
+
+When to take the CSS layer (`@calliopelabs/ui/css/tokens.css`) instead: when the page needs product brands (the branded sidebar, a product's own accent), a custom accent colour, density or corners settings, or the class-based components. `plain.css` carries the family accents only.
+
+## Variables
+
+| Variable | Library token | Black, green | Paper, green | Note |
+| --- | --- | --- | --- | --- |
+| `--background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--card` | `--card` | `#0a0a0a` | `#fffdf9` |  |
+| `--card-foreground` | `--card-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--popover` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--popover-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--primary` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--primary-foreground` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--secondary` | `--secondary` | `#161616` | `#f3eee4` |  |
+| `--secondary-foreground` | `--secondary-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--muted` | `--muted` | `#111111` | `#f3eee4` |  |
+| `--muted-foreground` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--accent` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--accent-foreground` | `--accent-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--destructive` | `--destructive` | `#ff6b6b` | `#d40c1a` |  |
+| `--border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--input` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--ring` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--chart-1` | `--chart-1` | `#2f9e52` | `#26803f` |  |
+| `--chart-2` | `--chart-2` | `#8fd82a` | `#5c9c1a` |  |
+| `--chart-3` | `--chart-3` | `#cbf39d` | `#8a7a5c` |  |
+| `--chart-4` | `--chart-4` | `#e0b34a` | `#b8860b` |  |
+| `--chart-5` | `--chart-5` | `#0b6644` | `#26803f` |  |
+| `--sidebar` | `--sidebar` | `#0a0a0a` | `#f5f0e4` |  |
+| `--sidebar-foreground` | `--sidebar-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--sidebar-primary` | `--sidebar-primary` | `#2f9e52` | `#26803f` |  |
+| `--sidebar-primary-foreground` | `--sidebar-primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--sidebar-accent` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` |  |
+| `--sidebar-accent-foreground` | `--sidebar-accent-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--sidebar-border` | `--sidebar-border` | `rgba(255, 255, 255, 0.08)` | `#dedad2` |  |
+| `--sidebar-ring` | `--sidebar-ring` | `#2f9e52` | `#26803f` |  |
+| `--sidebar-muted-foreground` | `--sidebar-muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--surface-0` | `--surface-0` | `#000000` | `#faf6ee` |  |
+| `--surface-1` | `--surface-1` | `#0a0a0a` | `#fffdf9` |  |
+| `--surface-2` | `--surface-2` | `#141414` | `#fffdf9` |  |
+| `--success` | `--success` | `#8fd82a` | `#508d23` |  |
+| `--success-fg` | `--success-fg` | `#a6e34d` | `#305a12` |  |
+| `--success-bg` | `--success-bg` | `rgba(143, 216, 42, 0.1)` | `#e3f5da` |  |
+| `--success-border` | `--success-border` | `rgba(143, 216, 42, 0.35)` | `#b4d7a2` |  |
+| `--warning` | `--warning` | `#f0c34e` | `#cb7a00` |  |
+| `--warning-fg` | `--warning-fg` | `#f0c34e` | `#824c12` |  |
+| `--warning-bg` | `--warning-bg` | `rgba(240, 195, 78, 0.1)` | `#fef0d4` |  |
+| `--warning-border` | `--warning-border` | `rgba(240, 195, 78, 0.35)` | `#e8c184` |  |
+| `--info` | `--info` | `#2f9e52` | `#2f8543` |  |
+| `--info-fg` | `--info-fg` | `#5cbb79` | `#1b622d` |  |
+| `--info-bg` | `--info-bg` | `rgba(47, 158, 82, 0.14)` | `#e2f4e3` |  |
+| `--info-border` | `--info-border` | `rgba(47, 158, 82, 0.4)` | `#acd8b1` |  |
+| `--danger` | `--danger` | `#ff6b6b` | `#df2225` |  |
+| `--danger-fg` | `--danger-fg` | `#ff8a8a` | `#bb0916` |  |
+| `--danger-bg` | `--danger-bg` | `rgba(255, 107, 107, 0.1)` | `#ffeae9` |  |
+| `--danger-border` | `--danger-border` | `rgba(255, 107, 107, 0.35)` | `#ffb1aa` |  |
+| `--radius` | `--radius` | `2px` | same | Every ground |
+| `--motion-fast` | `--motion-fast` | `120ms` | same | Every ground |
+| `--motion-base` | `--motion-base` | `200ms` | same | Every ground |
+| `--motion-slow` | `--motion-slow` | `320ms` | same | Every ground |
+| `--font-sans` | `--font-sans` | `var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif` | same | Every ground |
+| `--font-mono` | `--font-mono` | `var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace` | same | Every ground |
+| `--font-head` | `--font-head` | `var(--font-dm-sans, "DM Sans"), system-ui, sans-serif` | same | Every ground |
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.

package/dist/tokens/README.python.md

@@ -0,0 +1,33 @@
+# Python: `tokens.py`
+
+Every colour token of every ground and accent as RGB triplets, with a few accessors. Standard library only, Python 3.9 and up.
+
+## Use
+
+Copy (vendor) the file into the package under a module name of your choice, for example `calliope_tokens.py`:
+
+```sh
+cp node_modules/@calliopelabs/ui/dist/tokens/tokens.py installer/wizard/calliope_tokens.py
+```
+
+```python
+from calliope_tokens import GROUNDS, palette, rgb, rgba, triplet, hex
+
+rgb("background", "charcoal")          # (14, 15, 16)
+triplet("primary", "paper", "copper")  # "156 87 48"
+rgba("border", "black")                # (255, 255, 255, 0.1)
+hex("border", "black")                 # "#1a1a1a", laid on the background
+palette("emerald", "ice")              # {"background": (5, 11, 8), ...}
+```
+
+`triplet` is the `R G B` channel form CSS reads in `rgb(var(--x-rgb) / 0.18)`, so a stylesheet built in Python can take any alpha of any token:
+
+```python
+css = "\n".join(f"  --{name}-rgb: {' '.join(map(str, value))};" for name, value in palette(ground).items())
+```
+
+Tokens are named as in CSS, without the dashes: `background`, `card`, `primary`, `primary-foreground`, `muted-foreground`, `border`, `ring`, `success`, `success-fg`, `danger-bg` and so on (`TOKENS` lists them all). Translucent tokens (hairlines, tints) come two ways: `rgb`, `triplet`, `hex` and `palette` lay them on their surface (`sidebar-*` on the sidebar, the rest on the background), for targets with no alpha; `rgba` keeps the alpha. `RADIUS_PX`, `MOTION_MS` and `FONTS` carry the rest.
+
+Grounds: `black` (dark), `charcoal` (dark), `graphite` (dark), `emerald` (dark), `navy` (dark), `paper` (light), `mist` (light). Accents: `green`, `copper`, `ice`, `periwinkle`, `amber`. The ground carries the mode, so there is no `data-mode`; `:root` paints `black` with `green`.
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.

package/dist/tokens/README.vscode.md

@@ -0,0 +1,114 @@
+# VS Code webviews: `vscode.css`
+
+Calliope AI values for the `--vscode-*` variables a webview reads ([theme colour ids](https://code.visualstudio.com/api/references/theme-color), dots as dashes).
+
+## Use
+
+Link it in the webview's HTML before the webview's own styles:
+
+```html
+<link rel="stylesheet" href="${webview.asWebviewUri(vscodeCss)}" />
+```
+
+Inside VS Code the host sets every `--vscode-*` variable inline on `<html>`, so the editor's theme always wins and these never show. Outside VS Code (a browser preview of the webview, Storybook, a test in jsdom) they stand in, so a webview written against `--vscode-*` renders in the family's colours.
+
+To go the other way, and paint the library's own tokens from the editor's theme with these as the fallback, read them through:
+
+```css
+:root {
+  --background: var(--vscode-editor-background);
+  --foreground: var(--vscode-foreground);
+  --primary: var(--vscode-button-background);
+}
+```
+
+Grounds: `black` (dark), `charcoal` (dark), `graphite` (dark), `emerald` (dark), `navy` (dark), `paper` (light), `mist` (light). Accents: `green`, `copper`, `ice`, `periwinkle`, `amber`. The ground carries the mode, so there is no `data-mode`; `:root` paints `black` with `green`. The CSS layer's `appearance.js` stamps the same `data-ground` and `data-accent` attributes from the person's stored choice.
+
+VS Code's `--vscode-font-size` and `--vscode-editor-font-size` are left to the host. Left alone: colours the family has no hue for (`charts.blue`, `charts.purple`, `charts.orange`; info is green) and scrollbars.
+
+## Mapping
+
+| Variable | Library token | Black, green | Paper, green | Note |
+| --- | --- | --- | --- | --- |
+| `--vscode-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-descriptionForeground` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--vscode-disabledForeground` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--vscode-errorForeground` | `--danger-fg` | `#ff8a8a` | `#bb0916` |  |
+| `--vscode-focusBorder` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--vscode-widget-border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-selection-background` | `--sidebar-accent` | `rgba(47, 158, 82, 0.16)` | `#f0e6da` | The accent tint |
+| `--vscode-icon-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-textLink-foreground` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--vscode-textLink-activeForeground` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--vscode-textPreformat-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-textBlockQuote-background` | `--muted` | `#111111` | `#f3eee4` |  |
+| `--vscode-textCodeBlock-background` | `--muted` | `#111111` | `#f3eee4` |  |
+| `--vscode-textSeparator-foreground` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-editor-background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--vscode-editor-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-editorWidget-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-editorWidget-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-editorWidget-border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-editorHoverWidget-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-editorHoverWidget-border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-editorError-foreground` | `--danger` | `#ff6b6b` | `#df2225` |  |
+| `--vscode-editorWarning-foreground` | `--warning` | `#f0c34e` | `#cb7a00` |  |
+| `--vscode-editorInfo-foreground` | `--info` | `#2f9e52` | `#2f8543` |  |
+| `--vscode-button-background` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--vscode-button-foreground` | `--primary-foreground` | `#04241b` | `#f3fbf7` |  |
+| `--vscode-button-hoverBackground` | `--primary` | `#2f9e52` | `#26803f` | No separate hover fill |
+| `--vscode-button-secondaryBackground` | `--secondary` | `#161616` | `#f3eee4` |  |
+| `--vscode-button-secondaryForeground` | `--secondary-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-button-secondaryHoverBackground` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--vscode-input-background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--vscode-input-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-input-border` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-input-placeholderForeground` | `--muted-foreground` | `#848b88` | `#5c5b58` |  |
+| `--vscode-inputOption-activeBorder` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--vscode-inputValidation-errorBackground` | `--danger-bg` | `rgba(255, 107, 107, 0.1)` | `#ffeae9` |  |
+| `--vscode-inputValidation-errorBorder` | `--danger-border` | `rgba(255, 107, 107, 0.35)` | `#ffb1aa` |  |
+| `--vscode-notificationsErrorIcon-foreground` | `--danger` | `#ff6b6b` | `#df2225` |  |
+| `--vscode-inputValidation-warningBackground` | `--warning-bg` | `rgba(240, 195, 78, 0.1)` | `#fef0d4` |  |
+| `--vscode-inputValidation-warningBorder` | `--warning-border` | `rgba(240, 195, 78, 0.35)` | `#e8c184` |  |
+| `--vscode-notificationsWarningIcon-foreground` | `--warning` | `#f0c34e` | `#cb7a00` |  |
+| `--vscode-inputValidation-infoBackground` | `--info-bg` | `rgba(47, 158, 82, 0.14)` | `#e2f4e3` |  |
+| `--vscode-inputValidation-infoBorder` | `--info-border` | `rgba(47, 158, 82, 0.4)` | `#acd8b1` |  |
+| `--vscode-notificationsInfoIcon-foreground` | `--info` | `#2f9e52` | `#2f8543` |  |
+| `--vscode-dropdown-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-dropdown-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-dropdown-border` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-checkbox-background` | `--background` | `#000000` | `#faf6ee` |  |
+| `--vscode-checkbox-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-checkbox-border` | `--input` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-badge-background` | `--secondary` | `#161616` | `#f3eee4` | Neutral, like StatusBadge |
+| `--vscode-badge-foreground` | `--secondary-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-progressBar-background` | `--primary` | `#2f9e52` | `#26803f` |  |
+| `--vscode-list-activeSelectionBackground` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--vscode-list-activeSelectionForeground` | `--accent-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-list-inactiveSelectionBackground` | `--secondary` | `#161616` | `#f3eee4` |  |
+| `--vscode-list-hoverBackground` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--vscode-list-focusOutline` | `--ring` | `#2f9e52` | `#26803f` |  |
+| `--vscode-menu-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-menu-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-menu-selectionBackground` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--vscode-quickInput-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-quickInput-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-notifications-background` | `--popover` | `#141414` | `#fffdf9` |  |
+| `--vscode-notifications-foreground` | `--popover-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-notifications-border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-sideBar-background` | `--sidebar` | `#0a0a0a` | `#f5f0e4` |  |
+| `--vscode-sideBar-foreground` | `--sidebar-foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-sideBar-border` | `--sidebar-border` | `rgba(255, 255, 255, 0.08)` | `#dedad2` |  |
+| `--vscode-panel-background` | `--card` | `#0a0a0a` | `#fffdf9` |  |
+| `--vscode-panel-border` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-toolbar-hoverBackground` | `--accent` | `#1b1b1b` | `#f0e6da` |  |
+| `--vscode-testing-iconPassed` | `--success` | `#8fd82a` | `#508d23` |  |
+| `--vscode-charts-foreground` | `--foreground` | `#f0f2f1` | `#1e1d1b` |  |
+| `--vscode-charts-lines` | `--border` | `rgba(255, 255, 255, 0.1)` | `#dedad2` |  |
+| `--vscode-charts-red` | `--danger` | `#ff6b6b` | `#df2225` |  |
+| `--vscode-charts-yellow` | `--warning` | `#f0c34e` | `#cb7a00` |  |
+| `--vscode-charts-green` | `--success` | `#8fd82a` | `#508d23` |  |
+| `--vscode-font-family` | `--font-sans` | `var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif` | same | Every ground |
+| `--vscode-editor-font-family` | `--font-mono` | `var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace` | same | Every ground |
+
+Generated by `npm run theme` from the design tokens (`tokens/*.json`), like the preset; a test holds every value to the preset's on every ground and accent.