@dataimago/css 0.1.0-alpha.2 → 0.1.0-alpha.21

package/README.md

@@ -2,13 +2,20 @@
 
 Compiled CSS and Tailwind preset for the dataimago ethical AI design system.
 
-Depends on [`@dataimago/tokens`](../tokens) for the canonical palette.
+Depends on [`@dataimago/tokens`](../tokens) for the canonical house identity.
 
 ## What you get
 
 - `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 pre-wired with `ink / cream / copper / accent` scales and functional colors.
+- `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.
 
 ## Usage
 
@@ -39,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/dataimago.css

@@ -46,10 +46,12 @@
   --color-palette-copper-700: #913d15;
   --color-palette-copper-800: #753318;
   --color-palette-copper-900: #612b16;
-  --color-palette-accent-50: #fdf2f2;
-  --color-palette-accent-500: #b54a27;
-  --color-palette-accent-600: #9a3e20;
-  --color-palette-accent-700: #7d321a;
+  --color-palette-accent-50: #f0f8fc;
+  --color-palette-accent-300: #3498DB;
+  --color-palette-accent-400: #2980B9;
+  --color-palette-accent-500: #1f618d;
+  --color-palette-accent-600: #154d6f;
+  --color-palette-accent-700: #0f3a52;
   --color-palette-presentation-blue-50: #f0f8fc;
   --color-palette-presentation-blue-500: #3498DB;
   --color-palette-presentation-blue-600: #2980B9;
@@ -119,27 +121,57 @@
 
 :root, [data-bs-theme=light] {
   --color-surface-page: #ededeb;
+  --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-page-scrolled: #ededeb;
+  --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-elevated: #f7f7f6;
+  --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
   --color-surface-sunken: #faf2e3;
+  --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
   --color-surface-navbar: #ededeb;
+  --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-navbar-scrolled: #ededeb;
+  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-code: #faf2e3;
-  --color-border-subtle: rgba(12, 10, 9, 0.08);
-  --color-border-moderate: rgba(12, 10, 9, 0.15);
-  --color-border-strong: rgba(12, 10, 9, 0.25);
-  --color-border-card: rgba(12, 10, 9, 0.15);
+  --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
+  --color-border-subtle: rgba(12, 10, 9, 0.45);
+  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
+  --color-border-moderate: rgba(12, 10, 9, 0.60);
+  --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-strong: rgba(12, 10, 9, 0.75);
+  --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
+  --color-border-card: rgba(12, 10, 9, 0.60);
+  --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
   --color-border-code: #d6d3d1;
+  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-content-primary: #14140f;
-  --color-content-secondary: #7c7c7c;
-  --color-content-muted: #78716c;
+  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
+  --color-content-secondary: #6a6a6a;
+  --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
+  --color-content-muted: #706964;
+  --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
   --color-content-inverse: #fdf9f2;
+  --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
   --color-interactive-primary: #434739;
+  --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
   --color-interactive-hover: #363a2e;
-  --color-interactive-accent: #b54a27;
+  --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
+  --color-interactive-accent: #1f618d;
+  --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
   --color-interactive-focus: #434739;
-  --color-presentation-accent: #3498DB;
-  --color-presentation-accent-hover: #2980B9;
+  --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
+  --color-presentation-accent: #3498db;
+  --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+  --color-presentation-accent-hover: #2980b9;
+  --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+  --color-vertical-accent-dissertation: #b87333;
+  --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
+  --color-vertical-accent-rpkg: #3b82f6;
+  --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
+  --color-vertical-accent-SGPc: #5a6310;
+  --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
+  --color-brand-mark-red: #cc0000;
+  --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
   --contrast-high: rgb(20, 20, 16);
   --contrast-readable: rgb(20, 20, 16);
   --contrast-medium: #7c7c7c;
@@ -147,8 +179,8 @@
   --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
   --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
-  --border-subtle: rgba(20, 20, 16, 0.1);
-  --border-moderate: rgba(20, 20, 16, 0.15);
+  --border-subtle: rgba(20, 20, 16, 0.47);
+  --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
   --navigation-hover-background: rgba(20, 20, 16, 0.05);
   --navigation-active-background: rgba(20, 20, 16, 0.1);
@@ -156,27 +188,57 @@
 
 [data-bs-theme=dark] {
   --color-surface-page: #141410;
+  --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-page-scrolled: #141410;
+  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-elevated: #1c1917;
+  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
   --color-surface-sunken: #0c0a09;
+  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
   --color-surface-navbar: #141410;
+  --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-navbar-scrolled: #141410;
+  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-code: #1c1917;
-  --color-border-subtle: rgba(253, 249, 242, 0.08);
-  --color-border-moderate: rgba(253, 249, 242, 0.15);
-  --color-border-strong: rgba(253, 249, 242, 0.25);
-  --color-border-card: rgba(253, 249, 242, 0.15);
+  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
+  --color-border-subtle: rgba(253, 249, 242, 0.45);
+  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
+  --color-border-moderate: rgba(253, 249, 242, 0.60);
+  --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+  --color-border-strong: rgba(253, 249, 242, 0.75);
+  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
+  --color-border-card: rgba(253, 249, 242, 0.60);
+  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
   --color-border-code: #292524;
+  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-content-primary: #fdf9f2;
+  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
   --color-content-secondary: #a8a29e;
-  --color-content-muted: #78716c;
+  --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
+  --color-content-muted: #89827d;
+  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
   --color-content-inverse: #0c0a09;
+  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
   --color-interactive-primary: #98a384;
+  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
   --color-interactive-hover: #7e8a6b;
-  --color-interactive-accent: #b54a27;
+  --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
+  --color-interactive-accent: #3498db;
+  --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
   --color-interactive-focus: #98a384;
-  --color-presentation-accent: #3498DB;
-  --color-presentation-accent-hover: #2980B9;
+  --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
+  --color-presentation-accent: #3498db;
+  --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+  --color-presentation-accent-hover: #2980b9;
+  --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+  --color-vertical-accent-dissertation: #ce8e5c;
+  --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
+  --color-vertical-accent-rpkg: #60a5fa;
+  --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
+  --color-vertical-accent-SGPc: #b2bf22;
+  --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
+  --color-brand-mark-red: #ff0000;
+  --color-brand-mark-red: color(display-p3 1 0 0);
   --contrast-high: rgb(237, 237, 235);
   --contrast-readable: rgb(237, 237, 235);
   --contrast-medium: #83838f;
@@ -184,37 +246,67 @@
   --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
   --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
-  --border-subtle: rgba(237, 237, 235, 0.1);
-  --border-moderate: rgba(237, 237, 235, 0.15);
+  --border-subtle: rgba(237, 237, 235, 0.47);
+  --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
   --navigation-hover-background: rgba(237, 237, 235, 0.05);
   --navigation-active-background: rgba(237, 237, 235, 0.1);
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:where(:not([data-bs-theme=light])) {
     --color-surface-page: #141410;
+    --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-page-scrolled: #141410;
+    --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-elevated: #1c1917;
+    --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
     --color-surface-sunken: #0c0a09;
+    --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
     --color-surface-navbar: #141410;
+    --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-navbar-scrolled: #141410;
+    --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-code: #1c1917;
-    --color-border-subtle: rgba(253, 249, 242, 0.08);
-    --color-border-moderate: rgba(253, 249, 242, 0.15);
-    --color-border-strong: rgba(253, 249, 242, 0.25);
-    --color-border-card: rgba(253, 249, 242, 0.15);
+    --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
+    --color-border-subtle: rgba(253, 249, 242, 0.45);
+    --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
+    --color-border-moderate: rgba(253, 249, 242, 0.60);
+    --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+    --color-border-strong: rgba(253, 249, 242, 0.75);
+    --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
+    --color-border-card: rgba(253, 249, 242, 0.60);
+    --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
     --color-border-code: #292524;
+    --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-content-primary: #fdf9f2;
+    --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
     --color-content-secondary: #a8a29e;
-    --color-content-muted: #78716c;
+    --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
+    --color-content-muted: #89827d;
+    --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
     --color-content-inverse: #0c0a09;
+    --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
     --color-interactive-primary: #98a384;
+    --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
     --color-interactive-hover: #7e8a6b;
-    --color-interactive-accent: #b54a27;
+    --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
+    --color-interactive-accent: #3498db;
+    --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
     --color-interactive-focus: #98a384;
-    --color-presentation-accent: #3498DB;
-    --color-presentation-accent-hover: #2980B9;
+    --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
+    --color-presentation-accent: #3498db;
+    --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+    --color-presentation-accent-hover: #2980b9;
+    --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+    --color-vertical-accent-dissertation: #ce8e5c;
+    --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
+    --color-vertical-accent-rpkg: #60a5fa;
+    --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
+    --color-vertical-accent-SGPc: #b2bf22;
+    --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
+    --color-brand-mark-red: #ff0000;
+    --color-brand-mark-red: color(display-p3 1 0 0);
     --contrast-high: rgb(237, 237, 235);
     --contrast-readable: rgb(237, 237, 235);
     --contrast-medium: #83838f;
@@ -222,8 +314,8 @@
     --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
     --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
-    --border-subtle: rgba(237, 237, 235, 0.1);
-    --border-moderate: rgba(237, 237, 235, 0.15);
+    --border-subtle: rgba(237, 237, 235, 0.47);
+    --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;
     --navigation-hover-background: rgba(237, 237, 235, 0.05);
     --navigation-active-background: rgba(237, 237, 235, 0.1);
@@ -1152,4 +1244,4 @@ a {
     --color-border-default: #000000;
     --color-border-focus: #FF0000;
   }
-}
+}