@dataimago/css 0.1.0-alpha.16 → 0.1.0-alpha.19

package/README.md

@@ -9,6 +9,11 @@ Depends on [`@dataimago/tokens`](../tokens) for the canonical house identity.
 - `dist/tokens.css` — CSS custom properties (theme-aware).
 - `dist/dataimago.css` / `dist/dataimago.min.css` — full compiled design system.
 - `dist/tailwind-preset.js` — Tailwind preset generated from token JSON, including `ink`, `stone`, `forest`, `paper`, `presentation-blue`, `accent`, `copper`, functional colors, typography, spacing, radius, shadow, and transition tokens.
+- `dist/quarto/dataimago-{light,dark}.scss` + `components.scss` — the Quarto theme pair (self-contained; dark keyed to `body.quarto-dark`) and the `.di-*` components.
+- `dist/latex/dataimago-tokens.sty` + `dataimago.sty` — the generated `di-*` colour layer and the LaTeX macro layer.
+- `dist/dataviz/` — the Okabe-Ito data-viz palette as CSS, TeX (PSTricks/TikZ), JSON and R.
+- `dist/templates/` — the project templates (`KNOWLEDGE-*.md`, the Quarto website scaffold) as stamped copies, synced into a project with `dataimago-sync` like the other outputs (house only).
+- `dist/outputs.json` and the `dataimago-sync` bin — pinned sync for non-JS consumers (below).
 
 Use [`@dataimago/css-neutral`](../css-neutral) instead when an externally-owned Level-3 app or future third-party hub needs the neutral identity.
 
@@ -41,6 +46,23 @@ module.exports = {
 
 Serve the compiled CSS from `node_modules/@dataimago/css/dist/` through your R package's asset pipeline.
 
+### Quarto, LaTeX, figures — `dataimago-sync`
+
+A consumer that does not install from npm pins a version and syncs files. Commit
+`.dataimago/design.json`:
+
+```json
+{ "package": "@dataimago/css", "version": "<exact version>",
+  "outputs": { "quarto/dataimago-light.scss": "styles/", "quarto/dataimago-dark.scss": "styles/",
+               "latex/dataimago-tokens.sty": "latex/", "dataviz/dataimago_dataviz.R": "R/palette.R" } }
+```
+
+then run `npx -p @dataimago/css@<version> dataimago-sync` and commit the files (each carries a
+provenance stamp; never edit them). Put `npx -p @dataimago/css@<version> dataimago-sync --check`
+in CI: it fails on any drift. The shipped outputs are listed in `dist/outputs.json`
+(e.g. `https://unpkg.com/@dataimago/css@<version>/dist/outputs.json`). See
+[`wiki/patterns/new-consumer-checklist.md`](../../wiki/patterns/new-consumer-checklist.md).
+
 ## Building
 
 ```bash

package/dist/bin/dataimago-sync.mjs

@@ -0,0 +1,342 @@
+#!/usr/bin/env node
+/**
+ * dataimago-sync — pinned design-system sync for non-JS consumers (spec §4).
+ *
+ *   npx -p @dataimago/css@<version> dataimago-sync            write the files
+ *   npx -p @dataimago/css@<version> dataimago-sync --check    exit 1 on any drift
+ *   dataimago-sync --from <dataimago-design checkout>         try an unreleased build
+ *   node tools/formats/dataimago-sync.mjs --self-test         (repo only)
+ *
+ * Reads the consumer's .dataimago/design.json (or --config <path>):
+ *   { "package": "@dataimago/css", "version": "<exact>",
+ *     "outputs": { "<dist path>": "<destination dir/ or file>" } }
+ *
+ * Copies bytes from THIS package's own dist/ — no download, no transformation;
+ * every format decision lives in the dataimago-design build. Exit codes:
+ * 0 ok, 1 check failed, 2 configuration error (nothing written).
+ *
+ * Node built-ins only: this file ships in @dataimago/css and
+ * @dataimago/css-neutral dist/bin/. The stamp grammar it reads is defined in
+ * tools/formats/stamp.mjs — change both together.
+ */
+
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const LOCAL = 'local-unreleased';
+
+class ConfigError extends Error {}
+
+function readJson(file, what) {
+  try {
+    return JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch (e) {
+    throw new ConfigError(`cannot read ${what} at ${file}: ${e.message}`);
+  }
+}
+
+const USAGE = `dataimago-sync — copy a pinned @dataimago release's design files into this repo
+
+  dataimago-sync                     write the files listed in .dataimago/design.json
+  dataimago-sync --check             exit 1 if any listed file differs from the release
+  dataimago-sync --from <checkout>   write a local, unreleased build (--check then fails)
+  dataimago-sync --config <file>     read design.json from <file>
+  dataimago-sync --help              this text
+
+Run it from the pinned release: npx -p @dataimago/css@<version> dataimago-sync`;
+
+const FLAGS = new Set(['--check', '--help', '--self-test']);
+const VALUE_FLAGS = new Set(['--from', '--config']);
+
+/** Refuse unknown flags before anything runs: a typo'd --check must not silently re-sync. */
+function checkArgs(args) {
+  for (let i = 0; i < args.length; i++) {
+    if (VALUE_FLAGS.has(args[i])) { i += 1; continue; }
+    if (!FLAGS.has(args[i])) throw new ConfigError(`unknown argument ${args[i]} (see --help)`);
+  }
+}
+
+function argValue(args, flag) {
+  const i = args.indexOf(flag);
+  if (i === -1) return null;
+  if (!args[i + 1] || args[i + 1].startsWith('--')) throw new ConfigError(`${flag} needs a path`);
+  return path.resolve(args[i + 1]);
+}
+
+/** The package this bin ships in: dist/bin/dataimago-sync.mjs → ../.. (symlinks resolved). */
+function ownPackageRoot() {
+  return path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..');
+}
+
+/** Rewrite only the stamp's version tokens to mark a copy as local and unreleased. */
+function localize(text, distPath, pkg, version, sha) {
+  const marker = `${LOCAL}(${sha})`;
+  if (distPath.endsWith('.json')) {
+    const parsed = JSON.parse(text);
+    parsed._meta.version = marker;
+    parsed._meta.restore = String(parsed._meta.restore).replace(`${pkg}@${version}`, `${pkg}@${marker}`);
+    return JSON.stringify(parsed, null, 2) + '\n';
+  }
+  const nl = text.indexOf('\n');
+  return text.slice(0, nl).split(`${pkg}@${version}`).join(`${pkg}@${marker}`) + text.slice(nl);
+}
+
+function gitShortSha(dir) {
+  const r = spawnSync('git', ['-C', dir, 'rev-parse', '--short', 'HEAD'], { encoding: 'utf8' });
+  return r.status === 0 ? r.stdout.trim() : 'unknown';
+}
+
+/** Validate everything, return the plan of {key, src, dest}; throws ConfigError before any write. */
+function plan(args) {
+  const configPath = argValue(args, '--config') ?? path.resolve('.dataimago', 'design.json');
+  // The consumer root holds .dataimago/; a --config file elsewhere is its own root.
+  const configDir = path.dirname(configPath);
+  const consumerRoot = path.basename(configDir) === '.dataimago' ? path.dirname(configDir) : configDir;
+  const design = readJson(configPath, 'design.json');
+  if (typeof design.package !== 'string' || typeof design.version !== 'string' || !design.outputs || typeof design.outputs !== 'object') {
+    throw new ConfigError('design.json needs "package", "version" and an "outputs" object');
+  }
+
+  const fromCheckout = argValue(args, '--from');
+  const own = readJson(path.join(ownPackageRoot(), 'package.json'), 'package.json of this bin');
+  if (design.package !== own.name) {
+    throw new ConfigError(`design.json asks for ${design.package}, but this is ${own.name}. Run: npx -p ${design.package}@${design.version} dataimago-sync`);
+  }
+  let pkgRoot = ownPackageRoot();
+  let local = null;
+  if (fromCheckout) {
+    pkgRoot = path.join(fromCheckout, 'packages', design.package.replace(/^@dataimago\//, ''));
+    const built = readJson(path.join(pkgRoot, 'package.json'), `${design.package} in the --from checkout`);
+    local = { version: built.version, sha: gitShortSha(fromCheckout) };
+  } else if (design.version !== own.version) {
+    throw new ConfigError(`design.json pins ${design.package}@${design.version}, but this is ${own.version}. Run: npx -p ${design.package}@${design.version} dataimago-sync`);
+  }
+
+  const manifest = readJson(path.join(pkgRoot, 'dist', 'outputs.json'), 'outputs.json (is the package built?)');
+  const available = Object.keys(manifest.files ?? {});
+  const steps = [];
+  const problems = [];
+  for (const [key, destSpec] of Object.entries(design.outputs)) {
+    if (!available.includes(key)) {
+      problems.push(`${design.package} does not ship "${key}". Available outputs:\n    ${available.join('\n    ')}`);
+      continue;
+    }
+    if (typeof destSpec !== 'string' || destSpec === '' || path.isAbsolute(destSpec)) {
+      problems.push(`destination for "${key}" must be a relative path inside the consumer, got ${JSON.stringify(destSpec)}`);
+      continue;
+    }
+    const dest = path.resolve(consumerRoot, destSpec.endsWith('/') ? path.join(destSpec, path.basename(key)) : destSpec);
+    const rel = path.relative(consumerRoot, dest);
+    if (rel.startsWith('..') || path.isAbsolute(rel)) {
+      problems.push(`destination for "${key}" escapes the consumer root: ${destSpec}`);
+      continue;
+    }
+    if (rel === '' || (fs.existsSync(dest) && fs.statSync(dest).isDirectory())) {
+      problems.push(`destination for "${key}" is a directory: write "${destSpec.replace(/\/?$/, '/')}" to put the file inside it`);
+      continue;
+    }
+    if (steps.some((s) => s.dest === dest)) {
+      problems.push(`two outputs are mapped to the same destination: ${rel}`);
+      continue;
+    }
+    steps.push({ key, src: path.join(pkgRoot, 'dist', key), dest, rel });
+  }
+  if (problems.length) throw new ConfigError(problems.join('\n  '));
+  return { steps, design, local };
+}
+
+function sync(args) {
+  const { steps, design, local } = plan(args);
+  for (const { key, src, dest, rel } of steps) {
+    let bytes = fs.readFileSync(src);
+    if (local) bytes = Buffer.from(localize(bytes.toString('utf8'), key, design.package, local.version, local.sha));
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.writeFileSync(dest, bytes);
+    console.log(`  ✓ ${rel}  ← ${design.package}@${local ? `${LOCAL}(${local.sha})` : design.version} dist/${key}`);
+  }
+  if (local) console.log(`\n⚠ local, unreleased design files: \`dataimago-sync --check\` fails until you re-sync from a release.`);
+  return 0;
+}
+
+function check(args) {
+  const { steps, design } = plan(args.filter((a) => a !== '--check'));
+  const failures = [];
+  for (const { src, dest, rel } of steps) {
+    if (!fs.existsSync(dest)) { failures.push(`${rel}: missing`); continue; }
+    const have = fs.readFileSync(dest);
+    // The marker lives in the stamp: line 1, or the leading _meta object of a JSON file.
+    if (have.subarray(0, 1024).includes(LOCAL)) { failures.push(`${rel}: written by --from (local, unreleased); re-sync from a release`); continue; }
+    if (!have.equals(fs.readFileSync(src))) failures.push(`${rel}: differs from ${design.package}@${design.version}`);
+  }
+  for (const f of failures) console.error(`  ✗ ${f}`);
+  if (failures.length) {
+    console.error(`\n✗ dataimago-sync --check: ${failures.length} file(s) out of sync. Run: npx -p ${design.package}@${design.version} dataimago-sync`);
+    return 1;
+  }
+  console.log(`✓ dataimago-sync --check: ${steps.length} file(s) match ${design.package}@${design.version}`);
+  return 0;
+}
+
+function main(args) {
+  try {
+    checkArgs(args);
+    if (args.includes('--help')) {
+      console.log(USAGE);
+      return 0;
+    }
+    if (args.includes('--check')) {
+      if (args.includes('--from')) throw new ConfigError('--check verifies a release; it cannot be combined with --from');
+      return check(args);
+    }
+    return sync(args);
+  } catch (e) {
+    if (e instanceof ConfigError) {
+      console.error(`✗ dataimago-sync: ${e.message}`);
+      return 2;
+    }
+    throw e;
+  }
+}
+
+// ─── Self-test ────────────────────────────────────────────────────────────────
+
+async function selfTest() {
+  const stampUrl = new URL('./stamp.mjs', import.meta.url);
+  if (!fs.existsSync(fileURLToPath(stampUrl))) {
+    console.error('dataimago-sync --self-test runs from the dataimago-design repo (tools/formats/).');
+    process.exit(2);
+  }
+  const { stamp, stampJson } = await import(stampUrl);
+  const assert = (await import('node:assert/strict')).default;
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'di-sync-'));
+
+  // A fake published package: <tmp>/pkg with dist/{quarto/a.scss, dataviz/p.json, outputs.json, bin/}.
+  function makePackage(root, name, version) {
+    const files = {
+      'quarto/a.scss': stamp({ kind: 'scss', pkg: name, version, distPath: 'quarto/a.scss', body: '$x: 1 !default;\n' }),
+      'dataviz/p.json': stampJson({ pkg: name, version, distPath: 'dataviz/p.json', data: { a: '#E69F00' } }),
+    };
+    fs.mkdirSync(path.join(root, 'dist', 'bin'), { recursive: true });
+    fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify({ name, version }));
+    for (const [p, text] of Object.entries(files)) {
+      fs.mkdirSync(path.dirname(path.join(root, 'dist', p)), { recursive: true });
+      fs.writeFileSync(path.join(root, 'dist', p), text);
+    }
+    fs.writeFileSync(path.join(root, 'dist', 'outputs.json'), JSON.stringify({ package: name, version, files: Object.fromEntries(Object.keys(files).sort().map((k) => [k, 'x'])) }, null, 2));
+    fs.copyFileSync(fileURLToPath(import.meta.url), path.join(root, 'dist', 'bin', 'dataimago-sync.mjs'));
+    return { files, bin: path.join(root, 'dist', 'bin', 'dataimago-sync.mjs') };
+  }
+  const pkg = makePackage(path.join(tmp, 'pkg'), '@dataimago/css', '9.9.9');
+  // A fake dataimago-design checkout for --from: packages/css/{package.json,dist/}.
+  makePackage(path.join(tmp, 'checkout', 'packages', 'css'), '@dataimago/css', '9.9.10');
+
+  const consumer = path.join(tmp, 'consumer');
+  const writeDesign = (design) => {
+    fs.mkdirSync(path.join(consumer, '.dataimago'), { recursive: true });
+    fs.writeFileSync(path.join(consumer, '.dataimago', 'design.json'), JSON.stringify(design));
+  };
+  const base = { package: '@dataimago/css', version: '9.9.9', outputs: { 'quarto/a.scss': 'styles/', 'dataviz/p.json': 'figs/palette.json' } };
+  const run = (...args) => spawnSync(process.execPath, [pkg.bin, ...args], { cwd: consumer, encoding: 'utf8' });
+  const exists = (rel) => fs.existsSync(path.join(consumer, rel));
+
+  // (a) sync writes exact bytes; --check passes.
+  writeDesign(base);
+  let r = run();
+  assert.equal(r.status, 0, r.stderr);
+  assert.equal(fs.readFileSync(path.join(consumer, 'styles/a.scss'), 'utf8'), pkg.files['quarto/a.scss']);
+  assert.equal(fs.readFileSync(path.join(consumer, 'figs/palette.json'), 'utf8'), pkg.files['dataviz/p.json']);
+  assert.equal(run('--check').status, 0);
+
+  // (b) one appended byte fails --check, naming the file.
+  fs.appendFileSync(path.join(consumer, 'styles/a.scss'), ' ');
+  r = run('--check');
+  assert.equal(r.status, 1);
+  assert.match(r.stdout + r.stderr, /styles\/a\.scss/);
+  run();
+
+  // (c) version mismatch: config error with the matching command.
+  writeDesign({ ...base, version: '9.9.8' });
+  r = run();
+  assert.equal(r.status, 2);
+  assert.match(r.stderr, /npx -p @dataimago\/css@9\.9\.8 dataimago-sync/);
+
+  // (d) an output the package does not ship: config error, lists outputs, writes nothing.
+  fs.rmSync(path.join(consumer, 'styles'), { recursive: true });
+  writeDesign({ ...base, outputs: { ...base.outputs, 'quarto/components.scss': 'styles/' } });
+  r = run();
+  assert.equal(r.status, 2);
+  assert.match(r.stderr, /quarto\/components\.scss/);
+  assert.match(r.stderr, /dataviz\/p\.json/);
+  assert.ok(!exists('styles/a.scss'), 'nothing written on a config error');
+
+  // (e) destinations escaping the consumer root are refused before writing.
+  for (const dest of ['../x/', '/abs/']) {
+    writeDesign({ ...base, outputs: { 'quarto/a.scss': 'styles/', 'dataviz/p.json': dest } });
+    r = run();
+    assert.equal(r.status, 2, `destination ${dest} must be refused`);
+    assert.ok(!exists('styles/a.scss'), `nothing written when ${dest} is refused`);
+  }
+  assert.ok(!fs.existsSync(path.join(tmp, 'x')));
+
+  // (f) --from writes local-unreleased stamps that --check always rejects.
+  writeDesign(base);
+  r = run('--from', path.join(tmp, 'checkout'));
+  assert.equal(r.status, 0, r.stderr);
+  assert.match(fs.readFileSync(path.join(consumer, 'styles/a.scss'), 'utf8').split('\n')[0], new RegExp(LOCAL));
+  assert.match(fs.readFileSync(path.join(consumer, 'figs/palette.json'), 'utf8'), new RegExp(LOCAL));
+  r = run('--check');
+  assert.equal(r.status, 1);
+  assert.match(r.stdout + r.stderr, /--from/);
+
+  // (g) a design.json for another package is a config error.
+  writeDesign({ ...base, package: '@dataimago/css-neutral' });
+  assert.equal(run().status, 2);
+
+  // (h) --config outside .dataimago/: the consumer root is the config's own directory.
+  fs.rmSync(path.join(consumer, 'styles'), { recursive: true, force: true });
+  fs.writeFileSync(path.join(consumer, 'design.json'), JSON.stringify(base));
+  r = run('--config', path.join(consumer, 'design.json'));
+  assert.equal(r.status, 0, r.stderr);
+  assert.ok(exists('styles/a.scss'), '--config ./design.json writes inside the consumer');
+  assert.ok(!fs.existsSync(path.join(tmp, 'styles')), 'nothing written above the consumer');
+  fs.rmSync(path.join(consumer, 'design.json'));
+
+  // (i) an unknown flag (a typo'd --check) is a config error and writes nothing; --help writes nothing.
+  writeDesign(base);
+  const before = fs.readFileSync(path.join(consumer, 'styles/a.scss'));
+  fs.appendFileSync(path.join(consumer, 'styles/a.scss'), 'x');
+  r = run('--chek');
+  assert.equal(r.status, 2);
+  assert.match(r.stderr, /--chek/);
+  r = run('--help');
+  assert.equal(r.status, 0);
+  assert.match(r.stdout, /--check/);
+  assert.notDeepEqual(fs.readFileSync(path.join(consumer, 'styles/a.scss')), before, 'neither run re-synced');
+  run();
+
+  // (j) a destination that is the root or an existing directory (no trailing /) is refused up front.
+  fs.rmSync(path.join(consumer, 'figs'), { recursive: true, force: true });
+  fs.mkdirSync(path.join(consumer, 'figs'));
+  for (const dest of ['.', 'figs']) {
+    fs.rmSync(path.join(consumer, 'styles'), { recursive: true, force: true });
+    writeDesign({ ...base, outputs: { 'quarto/a.scss': 'styles/', 'dataviz/p.json': dest } });
+    r = run();
+    assert.equal(r.status, 2, `destination ${dest} must be refused`);
+    assert.ok(!exists('styles/a.scss'), `nothing written when ${dest} is refused`);
+  }
+
+  // (k) two outputs on one destination is a config error.
+  writeDesign({ ...base, outputs: { 'quarto/a.scss': 'same.txt', 'dataviz/p.json': 'same.txt' } });
+  r = run();
+  assert.equal(r.status, 2);
+  assert.ok(!exists('same.txt'));
+
+  fs.rmSync(tmp, { recursive: true, force: true });
+  console.log('dataimago-sync self-test: all checks passed');
+}
+
+if (process.argv.includes('--self-test')) await selfTest();
+else process.exitCode = main(process.argv.slice(2));

package/dist/dataviz/dataimago-dataviz.css

@@ -0,0 +1,42 @@
+/* @dataimago/css@0.1.0-alpha.19 dist/dataviz/dataimago-dataviz.css · sha256:4fb36e2401c1cd21f57d50c017ac080377c3943362a5b6c5ce2cd658080e4499 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 dataimago-sync */
+/* dataimago data-viz palette (Okabe-Ito). Categorical colour is never the only channel. */
+:root, [data-bs-theme="light"], body.quarto-light {
+  --color-dataviz-okabe-ito-orange: #E69F00;
+  --color-dataviz-okabe-ito-sky-blue: #56B4E9;
+  --color-dataviz-okabe-ito-bluish-green: #009E73;
+  --color-dataviz-okabe-ito-yellow: #F0E442;
+  --color-dataviz-okabe-ito-blue: #0072B2;
+  --color-dataviz-okabe-ito-vermillion: #D55E00;
+  --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
+  --color-dataviz-okabe-ito-black: #000000;
+  --color-dataviz-categorical-1: #E69F00;
+  --color-dataviz-categorical-2: #56B4E9;
+  --color-dataviz-categorical-3: #009E73;
+  --color-dataviz-categorical-4: #F0E442;
+  --color-dataviz-categorical-5: #0072B2;
+  --color-dataviz-categorical-6: #D55E00;
+  --color-dataviz-categorical-7: #CC79A7;
+  --color-dataviz-categorical-8: #000000;
+  --color-dataviz-uncertainty-outer: #D6D6D6;
+  --color-dataviz-uncertainty-union: #9E9E9E;
+  --color-dataviz-uncertainty-inner: #333333;
+}
+
+[data-bs-theme="dark"],
+body.quarto-dark {
+  --color-dataviz-okabe-ito-black: #FDF9F2;
+  --color-dataviz-categorical-8: #FDF9F2;
+  --color-dataviz-uncertainty-outer: #333333;
+  --color-dataviz-uncertainty-union: #6B6B6B;
+  --color-dataviz-uncertainty-inner: #D6D6D6;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:where(:not([data-bs-theme="light"])) {
+    --color-dataviz-okabe-ito-black: #FDF9F2;
+    --color-dataviz-categorical-8: #FDF9F2;
+    --color-dataviz-uncertainty-outer: #333333;
+    --color-dataviz-uncertainty-union: #6B6B6B;
+    --color-dataviz-uncertainty-inner: #D6D6D6;
+  }
+}

package/dist/dataviz/dataimago-dataviz.json

@@ -0,0 +1,42 @@
+{
+  "_meta": {
+    "package": "@dataimago/css",
+    "version": "0.1.0-alpha.19",
+    "path": "dist/dataviz/dataimago-dataviz.json",
+    "sha256": "28160e151fca196be3e36790d6b67db232d8df060e8d9556b29dfee50f4b278b",
+    "note": "generated from tokens; do not edit",
+    "restore": "npx -p @dataimago/css@0.1.0-alpha.19 dataimago-sync"
+  },
+  "okabe-ito": {
+    "orange": "#E69F00",
+    "sky-blue": "#56B4E9",
+    "bluish-green": "#009E73",
+    "yellow": "#F0E442",
+    "blue": "#0072B2",
+    "vermillion": "#D55E00",
+    "reddish-purple": "#CC79A7",
+    "black": "#000000"
+  },
+  "categorical": [
+    "#E69F00",
+    "#56B4E9",
+    "#009E73",
+    "#F0E442",
+    "#0072B2",
+    "#D55E00",
+    "#CC79A7",
+    "#000000"
+  ],
+  "uncertainty": {
+    "outer": "#D6D6D6",
+    "union": "#9E9E9E",
+    "inner": "#333333"
+  },
+  "dark": {
+    "okabe-ito.black": "#FDF9F2",
+    "categorical.8": "#FDF9F2",
+    "uncertainty.outer": "#333333",
+    "uncertainty.union": "#6B6B6B",
+    "uncertainty.inner": "#D6D6D6"
+  }
+}

package/dist/dataviz/dataimago-dataviz.tex

@@ -0,0 +1,21 @@
+% @dataimago/css@0.1.0-alpha.19 dist/dataviz/dataimago-dataviz.tex · sha256:d7be36cb429ce8a1f19c95a7da8f57a7fcfda85fd2b0113e086913d37e9fa645 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 dataimago-sync
+% dataimago data-viz palette (Okabe-Ito), light mode, for PSTricks and TikZ. Requires xcolor.
+\definecolor{di-dataviz-okabe-ito-orange}{HTML}{E69F00}
+\definecolor{di-dataviz-okabe-ito-sky-blue}{HTML}{56B4E9}
+\definecolor{di-dataviz-okabe-ito-bluish-green}{HTML}{009E73}
+\definecolor{di-dataviz-okabe-ito-yellow}{HTML}{F0E442}
+\definecolor{di-dataviz-okabe-ito-blue}{HTML}{0072B2}
+\definecolor{di-dataviz-okabe-ito-vermillion}{HTML}{D55E00}
+\definecolor{di-dataviz-okabe-ito-reddish-purple}{HTML}{CC79A7}
+\definecolor{di-dataviz-okabe-ito-black}{HTML}{000000}
+\colorlet{di-dataviz-categorical-1}{di-dataviz-okabe-ito-orange}
+\colorlet{di-dataviz-categorical-2}{di-dataviz-okabe-ito-sky-blue}
+\colorlet{di-dataviz-categorical-3}{di-dataviz-okabe-ito-bluish-green}
+\colorlet{di-dataviz-categorical-4}{di-dataviz-okabe-ito-yellow}
+\colorlet{di-dataviz-categorical-5}{di-dataviz-okabe-ito-blue}
+\colorlet{di-dataviz-categorical-6}{di-dataviz-okabe-ito-vermillion}
+\colorlet{di-dataviz-categorical-7}{di-dataviz-okabe-ito-reddish-purple}
+\colorlet{di-dataviz-categorical-8}{di-dataviz-okabe-ito-black}
+\definecolor{di-dataviz-uncertainty-outer}{HTML}{D6D6D6}
+\definecolor{di-dataviz-uncertainty-union}{HTML}{9E9E9E}
+\definecolor{di-dataviz-uncertainty-inner}{HTML}{333333}

package/dist/dataviz/dataimago_dataviz.R

@@ -0,0 +1,61 @@
+# @dataimago/css@0.1.0-alpha.19 dist/dataviz/dataimago_dataviz.R · sha256:6443982f105b0f5e4a9d90ac2d1f6ce9fce2db4e8e8148b47f71bfc438940055 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 dataimago-sync
+# dataimago data-viz palette (Okabe-Ito). Categorical colour is never the only channel:
+# pair it with marker shape, line type or a label.
+
+dataimago_okabe_ito <- c(
+  orange = "#E69F00",
+  sky_blue = "#56B4E9",
+  bluish_green = "#009E73",
+  yellow = "#F0E442",
+  blue = "#0072B2",
+  vermillion = "#D55E00",
+  reddish_purple = "#CC79A7",
+  black = "#000000"
+)
+
+dataimago_categorical <- c(
+  "#E69F00",
+  "#56B4E9",
+  "#009E73",
+  "#F0E442",
+  "#0072B2",
+  "#D55E00",
+  "#CC79A7",
+  "#000000"
+)
+
+dataimago_uncertainty_bands <- c(
+  outer = "#D6D6D6",
+  union = "#9E9E9E",
+  inner = "#333333"
+)
+
+# Dark-mode variants (approved overrides; identical elsewhere).
+
+dataimago_okabe_ito_dark <- c(
+  orange = "#E69F00",
+  sky_blue = "#56B4E9",
+  bluish_green = "#009E73",
+  yellow = "#F0E442",
+  blue = "#0072B2",
+  vermillion = "#D55E00",
+  reddish_purple = "#CC79A7",
+  black = "#FDF9F2"
+)
+
+dataimago_categorical_dark <- c(
+  "#E69F00",
+  "#56B4E9",
+  "#009E73",
+  "#F0E442",
+  "#0072B2",
+  "#D55E00",
+  "#CC79A7",
+  "#FDF9F2"
+)
+
+dataimago_uncertainty_bands_dark <- c(
+  outer = "#333333",
+  union = "#6B6B6B",
+  inner = "#D6D6D6"
+)

package/dist/latex/dataimago-tokens.sty

@@ -0,0 +1,122 @@
+% @dataimago/css@0.1.0-alpha.19 dist/latex/dataimago-tokens.sty · sha256:97596b5136434afc7d03b17916219cdccffd6c1cdc748b861f012e06fbbfc5df · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 dataimago-sync
+\NeedsTeXFormat{LaTeX2e}
+\ProvidesPackage{dataimago-tokens}[dataimago design tokens, light mode]
+\RequirePackage{xcolor}
+
+% Colours: every color.* token, light mode, as opaque sRGB.
+\definecolor{di-palette-ink-50}{HTML}{F5F5F4}
+\definecolor{di-palette-ink-100}{HTML}{E7E5E4}
+\definecolor{di-palette-ink-200}{HTML}{D6D3D1}
+\definecolor{di-palette-ink-300}{HTML}{A8A29E}
+\definecolor{di-palette-ink-400}{HTML}{78716C}
+\definecolor{di-palette-ink-500}{HTML}{57534E}
+\definecolor{di-palette-ink-600}{HTML}{44403C}
+\definecolor{di-palette-ink-700}{HTML}{292524}
+\definecolor{di-palette-ink-800}{HTML}{1C1917}
+\definecolor{di-palette-ink-900}{HTML}{0C0A09}
+\definecolor{di-palette-stone-50}{HTML}{F7F7F6}
+\definecolor{di-palette-stone-100}{HTML}{EDEDEB}
+\definecolor{di-palette-stone-200}{HTML}{DCDCDA}
+\definecolor{di-palette-stone-300}{HTML}{C1C1BF}
+\definecolor{di-palette-stone-400}{HTML}{A0A0A0}
+\definecolor{di-palette-stone-500}{HTML}{7C7C7C}
+\definecolor{di-palette-stone-600}{HTML}{5E5E5C}
+\definecolor{di-palette-stone-700}{HTML}{424240}
+\definecolor{di-palette-stone-800}{HTML}{292927}
+\definecolor{di-palette-stone-900}{HTML}{14140F}
+\definecolor{di-palette-forest-50}{HTML}{F0F1ED}
+\definecolor{di-palette-forest-100}{HTML}{DDE0D4}
+\definecolor{di-palette-forest-200}{HTML}{BDC4AD}
+\definecolor{di-palette-forest-300}{HTML}{98A384}
+\definecolor{di-palette-forest-400}{HTML}{7E8A6B}
+\definecolor{di-palette-forest-500}{HTML}{5E6749}
+\definecolor{di-palette-forest-600}{HTML}{4D5640}
+\definecolor{di-palette-forest-700}{HTML}{434739}
+\definecolor{di-palette-forest-800}{HTML}{363A2E}
+\definecolor{di-palette-forest-900}{HTML}{1F2218}
+\definecolor{di-palette-paper-50}{HTML}{FEFDFB}
+\definecolor{di-palette-paper-100}{HTML}{FDF9F2}
+\definecolor{di-palette-paper-200}{HTML}{FAF2E3}
+\definecolor{di-palette-paper-300}{HTML}{F5E8CF}
+\definecolor{di-palette-paper-400}{HTML}{EDD9B3}
+\definecolor{di-palette-paper-500}{HTML}{E0C088}
+\definecolor{di-palette-copper-50}{HTML}{FDF4EE}
+\definecolor{di-palette-copper-100}{HTML}{FBE5D1}
+\definecolor{di-palette-copper-200}{HTML}{F6C79C}
+\definecolor{di-palette-copper-300}{HTML}{F0A467}
+\definecolor{di-palette-copper-400}{HTML}{EA8441}
+\definecolor{di-palette-copper-500}{HTML}{D46820}
+\definecolor{di-palette-copper-600}{HTML}{B55017}
+\definecolor{di-palette-copper-700}{HTML}{913D15}
+\definecolor{di-palette-copper-800}{HTML}{753318}
+\definecolor{di-palette-copper-900}{HTML}{612B16}
+\definecolor{di-palette-accent-50}{HTML}{F0F8FC}
+\definecolor{di-palette-accent-300}{HTML}{3498DB}
+\definecolor{di-palette-accent-400}{HTML}{2980B9}
+\definecolor{di-palette-accent-500}{HTML}{1F618D}
+\definecolor{di-palette-accent-600}{HTML}{154D6F}
+\definecolor{di-palette-accent-700}{HTML}{0F3A52}
+\definecolor{di-palette-presentation-blue-50}{HTML}{F0F8FC}
+\definecolor{di-palette-presentation-blue-500}{HTML}{3498DB}
+\definecolor{di-palette-presentation-blue-600}{HTML}{2980B9}
+\definecolor{di-palette-presentation-blue-700}{HTML}{1F618D}
+\definecolor{di-functional-success}{HTML}{27AE60}
+\definecolor{di-functional-warning}{HTML}{F39C12}
+\definecolor{di-functional-error}{HTML}{E74C3C}
+\definecolor{di-functional-info}{HTML}{3498DB}
+\definecolor{di-surface-page}{HTML}{EDEDEB}
+\definecolor{di-surface-page-scrolled}{HTML}{EDEDEB}
+\definecolor{di-surface-elevated}{HTML}{F7F7F6}
+\definecolor{di-surface-sunken}{HTML}{FAF2E3}
+\definecolor{di-surface-navbar}{HTML}{EDEDEB}
+\definecolor{di-surface-navbar-scrolled}{HTML}{EDEDEB}
+\definecolor{di-surface-code}{HTML}{FAF2E3}
+\definecolor{di-border-subtle}{HTML}{888785}
+\definecolor{di-border-moderate}{HTML}{666563}
+\definecolor{di-border-strong}{HTML}{444342}
+\definecolor{di-border-card}{HTML}{666563}
+\definecolor{di-border-code}{HTML}{D6D3D1}
+\definecolor{di-content-primary}{HTML}{14140F}
+\definecolor{di-content-secondary}{HTML}{6A6A6A}
+\definecolor{di-content-muted}{HTML}{706964}
+\definecolor{di-content-inverse}{HTML}{FDF9F2}
+\definecolor{di-interactive-primary}{HTML}{434739}
+\definecolor{di-interactive-hover}{HTML}{363A2E}
+\definecolor{di-interactive-accent}{HTML}{1F618D}
+\definecolor{di-interactive-focus}{HTML}{434739}
+\definecolor{di-presentation-accent}{HTML}{3498DB}
+\definecolor{di-presentation-accent-hover}{HTML}{2980B9}
+\definecolor{di-vertical-accent-dissertation}{HTML}{B87333}
+\definecolor{di-vertical-accent-rpkg}{HTML}{3B82F6}
+\definecolor{di-vertical-accent-SGPc}{HTML}{5A6310}
+\definecolor{di-brand-mark-red}{HTML}{CC0000}
+\definecolor{di-dataviz-okabe-ito-orange}{HTML}{E69F00}
+\definecolor{di-dataviz-okabe-ito-sky-blue}{HTML}{56B4E9}
+\definecolor{di-dataviz-okabe-ito-bluish-green}{HTML}{009E73}
+\definecolor{di-dataviz-okabe-ito-yellow}{HTML}{F0E442}
+\definecolor{di-dataviz-okabe-ito-blue}{HTML}{0072B2}
+\definecolor{di-dataviz-okabe-ito-vermillion}{HTML}{D55E00}
+\definecolor{di-dataviz-okabe-ito-reddish-purple}{HTML}{CC79A7}
+\definecolor{di-dataviz-okabe-ito-black}{HTML}{000000}
+\definecolor{di-dataviz-categorical-1}{HTML}{E69F00}
+\definecolor{di-dataviz-categorical-2}{HTML}{56B4E9}
+\definecolor{di-dataviz-categorical-3}{HTML}{009E73}
+\definecolor{di-dataviz-categorical-4}{HTML}{F0E442}
+\definecolor{di-dataviz-categorical-5}{HTML}{0072B2}
+\definecolor{di-dataviz-categorical-6}{HTML}{D55E00}
+\definecolor{di-dataviz-categorical-7}{HTML}{CC79A7}
+\definecolor{di-dataviz-categorical-8}{HTML}{000000}
+\definecolor{di-dataviz-uncertainty-outer}{HTML}{D6D6D6}
+\definecolor{di-dataviz-uncertainty-union}{HTML}{9E9E9E}
+\definecolor{di-dataviz-uncertainty-inner}{HTML}{333333}
+
+% Font families: the first family of each token stack.
+\newcommand{\diFontFamilySans}{Noto Sans}
+\newcommand{\diFontFamilyMono}{JetBrains Mono}
+\newcommand{\diFontFamilyDisplay}{Josefin Sans}
+\newcommand{\diFontFamilyDisplayEditorial}{Josefin Sans}
+\newcommand{\diFontFamilyDisplayDocumentation}{Noto Sans}
+\newcommand{\diFontFamilyBrand}{Futura}
+\newcommand{\diFontFamilyMath}{Noto Sans Math}
+
+\endinput