@bitbaum/design-tokens 1.1.0 → 1.3.0

package/fonts/montserrat/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/space-grotesk/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/next-fonts.mjs

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+// Write an app's `next/font/local` module for faces this package ships.
+//
+//   design-tokens-next-fonts <out-file> "<export>=<face>[;key=value]..." ... [--check]
+//
+//   keys:  weight=500,700        weights to declare (default: the face's whole range)
+//          style=normal,italic   styles to declare (default: normal)
+//          variable=--font-x     the CSS variable the export sets
+//          subsets=latin,...     subsets to declare (default: every subset shipped)
+//          preload=latin,...     subsets to preload (default: latin; "none" for none)
+//          display=swap          font-display (default: swap)
+//
+//   --check   exit 1 if <out-file> is not what this command would write
+//
+// WHY A GENERATOR
+//
+// `next/font/google` downloads its faces at build time, so a build depends on
+// Google answering; these faces are committed in fonts/ instead. `next/font`
+// accepts only literal options in the calling module, so no helper can call
+// `localFont` for an app. And one call can carry only one `unicode-range`,
+// while Google splits a face into subsets (latin, latin-ext, cyrillic …) that
+// a page downloads only when its text needs them. Keeping that split means one
+// call per subset, all naming the same family — the same @font-face rules
+// `next/font/google` produced: the same files, weights, styles, ranges and
+// preloads. That is long and mechanical, so it is written by this command from
+// fonts/faces.json and checked with --check, not typed by hand.
+//
+// The family is the export's name, not "Inter": Turbopack names the family in
+// `.variable` after the const and ignores a `font-family` declaration there
+// (webpack honours it), so the export carries no declaration and every other
+// subset declares the export's name. Both bundlers then agree. The fallback
+// face is measured from the file (next/font/local) rather than taken from
+// Google's table, so it differs by about one percent; it shows only until the
+// face has loaded.
+//
+// The export named in the spec is the call for the first preloaded subset
+// (latin): it carries `.variable`, `.className` and `.style`. The other
+// subsets are exported as `<export><Subset>` because next/font requires every
+// call to be assigned to a module-level const; nothing needs to read them.
+import { existsSync, readFileSync, realpathSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const PKG = '@bitbaum/design-tokens';
+export const faces = JSON.parse(readFileSync(join(here, 'fonts', 'faces.json'), 'utf8'));
+
+/** "sans=inter;weight=500,700;variable=--font-inter" → a spec object. */
+export function parseSpec(text) {
+  const [head, ...pairs] = text.split(';').map((s) => s.trim());
+  const [name, face] = head.split('=');
+  if (!/^[A-Za-z_$][\w$]*$/.test(name ?? ''))
+    throw new Error(`"${text}": the export name must be an identifier`);
+  // The export's name becomes the font-family name, so it must not be a CSS generic family.
+  if (
+    /^(serif|sans-serif|monospace|cursive|fantasy|system-ui|math|emoji|fangsong|ui-\w+|inherit|initial|unset|default)$/i.test(
+      name,
+    )
+  )
+    throw new Error(
+      `"${text}": "${name}" is a CSS keyword; it names the font family, so pick another`,
+    );
+  if (!faces[face])
+    throw new Error(`"${text}": no face "${face}"; shipped: ${Object.keys(faces).join(', ')}`);
+  const spec = { name, face };
+  for (const pair of pairs) {
+    const [key, value] = pair.split('=');
+    if (!['weight', 'style', 'variable', 'subsets', 'preload', 'display'].includes(key))
+      throw new Error(`"${text}": unknown key "${key}"`);
+    spec[key] = value;
+  }
+  return spec;
+}
+
+const list = (v) =>
+  v
+    ? v
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+    : undefined;
+const camel = (s) => s.replace(/(^|-)(\w)/g, (_, __, c) => c.toUpperCase());
+
+/** The localFont calls for one spec, as plain data. */
+export function calls(spec) {
+  const face = faces[spec.face];
+  const styles = list(spec.style) ?? ['normal'];
+  const weights = list(spec.weight);
+  const preload = spec.preload === 'none' ? [] : (list(spec.preload) ?? ['latin']);
+  const shipped = [...new Set(face.files.map((f) => f.subset))];
+  const subsets = list(spec.subsets) ?? shipped;
+  for (const s of [...subsets, ...preload])
+    if (!shipped.includes(s))
+      throw new Error(`${spec.face} has no subset "${s}"; shipped: ${shipped.join(', ')}`);
+  // Google's order is kept, because it decides which file wins a character two
+  // subsets both list. The export itself is the first preloaded subset (else
+  // the first), measured for the fallback metrics as next/font/google measures
+  // its preloaded latin file.
+  const ordered = shipped.filter((s) => subsets.includes(s));
+  const primary = ordered.find((s) => preload.includes(s)) ?? ordered[0];
+  return ordered.map((subset) => {
+    const isPrimary = subset === primary;
+    const src = [];
+    for (const style of styles) {
+      const files = face.files.filter((f) => f.subset === subset && f.style === style);
+      if (!files.length) throw new Error(`${spec.face} has no ${style} ${subset} file`);
+      if (face.variable) {
+        for (const weight of weights ?? [files[0].weight])
+          src.push({ file: files[0].file, weight, style });
+      } else {
+        for (const weight of weights ?? files.map((f) => f.weight)) {
+          const file = files.find((f) => f.weight === weight);
+          if (!file)
+            throw new Error(
+              `${spec.face} has no ${style} ${weight} file; shipped: ${files.map((f) => f.weight)}`,
+            );
+          src.push({ file: file.file, weight, style });
+        }
+      }
+    }
+    return {
+      name: isPrimary ? spec.name : spec.name + camel(subset),
+      primary: isPrimary,
+      src,
+      variable: isPrimary ? spec.variable : undefined,
+      display: spec.display ?? 'swap',
+      preload: preload.includes(subset),
+      adjustFontFallback: isPrimary
+        ? face.category === 'serif'
+          ? 'Times New Roman'
+          : undefined
+        : false,
+      family: spec.name,
+      unicodeRange: face.files.find((f) => f.subset === subset).unicodeRange,
+    };
+  });
+}
+
+/** Where the package sits as seen from `dir`: node_modules/@bitbaum/design-tokens, not its realpath. */
+export function packageDir(dir) {
+  for (let d = resolve(dir); ; d = dirname(d)) {
+    const candidate = join(d, 'node_modules', ...PKG.split('/'));
+    if (existsSync(join(candidate, 'package.json'))) return candidate;
+    if (dirname(d) === d) throw new Error(`${PKG} is not installed above ${dir}`);
+  }
+}
+
+export function render(out, specs, argv) {
+  const base = relative(dirname(resolve(out)), packageDir(dirname(resolve(out))))
+    .split(sep)
+    .join('/');
+  const q = JSON.stringify;
+  const lines = [
+    '// Generated by @bitbaum/design-tokens. Do not edit; to change it, run:',
+    `//   pnpm exec design-tokens-next-fonts ${argv.map((a) => (/^[\w./@-]+$/.test(a) ? a : `'${a}'`)).join(' ')}`,
+    '// The faces ship in the package (fonts/faces.json): no build fetches fonts.',
+    'import localFont from "next/font/local";',
+  ];
+  for (const spec of specs) {
+    for (const c of calls(spec)) {
+      const opts = [
+        `src: [${c.src.map((s) => `{ path: ${q(`${base}/fonts/${s.file}`)}, weight: ${q(s.weight)}, style: ${q(s.style)} }`).join(', ')}]`,
+        c.variable ? `variable: ${q(c.variable)}` : null,
+        `display: ${q(c.display)}`,
+        c.preload ? null : 'preload: false',
+        c.adjustFontFallback === false
+          ? 'adjustFontFallback: false'
+          : c.adjustFontFallback
+            ? `adjustFontFallback: ${q(c.adjustFontFallback)}`
+            : null,
+        `declarations: [${c.primary ? '' : `{ prop: "font-family", value: ${q(`'${c.family}'`)} }, `}{ prop: "unicode-range", value: ${q(c.unicodeRange)} }]`,
+      ].filter(Boolean);
+      lines.push('', `export const ${c.name} = localFont({ ${opts.join(', ')} });`);
+    }
+  }
+  return lines.join('\n') + '\n';
+}
+
+/** Format with the app's own prettier and config, when it has one, so its format check passes. */
+async function format(out, code) {
+  try {
+    const require = createRequire(resolve(out));
+    const mod = await import(require.resolve('prettier'));
+    const prettier = mod.default ?? mod;
+    const config = (await prettier.resolveConfig(resolve(out))) ?? {};
+    return await prettier.format(code, { ...config, filepath: resolve(out) });
+  } catch {
+    return code;
+  }
+}
+
+async function main(argv) {
+  const check = argv.includes('--check');
+  const args = argv.filter((a) => a !== '--check');
+  const [out, ...specTexts] = args;
+  if (!out || !specTexts.length) {
+    console.error(
+      'usage: design-tokens-next-fonts <out-file> "<export>=<face>[;key=value]..." ... [--check]',
+    );
+    process.exit(2);
+  }
+  const code = await format(out, render(out, specTexts.map(parseSpec), args));
+  if (check) {
+    const current = existsSync(out) ? readFileSync(out, 'utf8') : '';
+    if (current !== code) {
+      console.error(
+        `${out} is not what design-tokens-next-fonts writes; re-run the command in its first lines.`,
+      );
+      process.exit(1);
+    }
+    return;
+  }
+  writeFileSync(out, code);
+}
+
+if (
+  process.argv[1] &&
+  realpathSync(process.argv[1]) === realpathSync(fileURLToPath(import.meta.url))
+)
+  await main(process.argv.slice(2));

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bitbaum/design-tokens",
-  "version": "1.1.0",
+  "version": "1.3.0",
+  "packageManager": "pnpm@11.25.0",
   "engines": {
     "node": ">=20"
   },
@@ -8,7 +9,7 @@
     "access": "public",
     "provenance": true
   },
-  "description": "Design SSOT for OrangeCat, FleetCrown and Solon — tokens, self-hosted faces, and the Tailwind preset that maps them.",
+  "description": "Design SSOT for OrangeCat, Loki and Solon — tokens, self-hosted faces, the Tailwind preset that maps them, and next/font/local calls for every face the fleet's apps use.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,31 +17,40 @@
   },
   "files": [
     "tokens.css",
+    "composition.css",
     "tailwind-preset.js",
+    "next-fonts.mjs",
     "fonts"
   ],
   "exports": {
     "./tokens.css": "./tokens.css",
+    "./composition.css": "./composition.css",
     "./tailwind-preset": "./tailwind-preset.js",
-    "./fonts/*": "./fonts/*"
+    "./fonts/*": "./fonts/*",
+    "./next-fonts": "./next-fonts.mjs",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "design-tokens-next-fonts": "./next-fonts.mjs"
   },
   "sideEffects": [
     "*.css"
   ],
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@types/node": "^26.4.0",
-    "eslint": "^10.9.1",
-    "globals": "^17.12.0",
-    "prettier": "3.9.6",
-    "typescript": "^6.0.3"
-  },
   "scripts": {
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "test": "node --test test/*.test.js",
     "verify": "pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm test",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "fonts:fetch": "node scripts/fetch-fonts.mjs"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.6.5",
+    "eslint": "^10.13.0",
+    "globals": "^17.13.0",
+    "prettier": "3.9.10",
+    "typescript": "^6.0.3"
   }
-}
+}

package/tailwind-preset.js

@@ -11,7 +11,7 @@
  *     content: [...],
  *   }
  *
- * Tailwind v4 apps (FleetCrown) consume tokens.css directly via @theme instead;
+ * Tailwind v4 apps (Loki) consume tokens.css directly via @theme instead;
  * the variable names are identical, so the two paths stay in sync.
  */
 

package/tokens.css

@@ -1,5 +1,5 @@
 /**
- * @bitbaum/design-tokens — the design SSOT for OrangeCat, FleetCrown and Solon.
+ * @bitbaum/design-tokens — the design SSOT for OrangeCat, Loki and Solon.
  *
  * ┌──────────────────────────────────────────────────────────────────────────┐
  * │  TO RETHEME THE ENTIRE STACK, EDIT THE "KNOBS" BLOCK BELOW AND NOTHING   │
@@ -131,7 +131,7 @@
    *
    * White on #ff5c00 is 3.10:1 — below the 4.5 AA floor — so every primary
    * CTA in the fleet was failing at once: Solon's "Open the Dashboard",
-   * OrangeCat's "Get Started", FleetCrown's "Launch agent". Measured, not
+   * OrangeCat's "Get Started", Loki's "Launch agent". Measured, not
    * guessed. Near-black on the same orange is 6.10:1.
    *
    * The orange is deliberately NOT darkened to rescue white text: it would
@@ -155,7 +155,7 @@
   /* ── LIGHT THEME ────────────────────────────────────────────────────────
      :root is light and `.dark` overrides it — the same mechanism OrangeCat
      uses, so an app can toggle themes without translating anything. An app
-     that is dark-only (Solon, FleetCrown's public surface) pins it by putting
+     that is dark-only (Solon, Loki's public surface) pins it by putting
      `class="dark"` on <html> and never removing it. */
 
   /* Surfaces — page < base < raised < overlay < modal < drawer */
@@ -242,6 +242,32 @@
   /* Bitcoin's own orange. Not a brand colour — it means "this is Bitcoin", so
      it is deliberately NOT --public-accent and must not be used for actions. */
   --bitcoin-orange: #f7931a;
+
+  /**
+   * — Data maps ——————————————————————————————————————————————————————————
+   * One sequential scale for every choropleth (Solon's Places map first):
+   * viridis, dark to light, so it survives every colour-vision deficiency and
+   * reads in greyscale — its luminance rises at every step (pinned in
+   * test/contrast.test.js). Colour is never the only carrier: each map has a
+   * list with the same numbers, and a legend.
+   *
+   * Hatching marks an area more than one authority claims. A map takes no
+   * side, so a contested area gets the pattern, never a colour of its own:
+   * lines of --map-hatch-width every --map-hatch-gap at --map-hatch-angle, in
+   * the text colour, over whatever the scale says.
+   */
+  --map-scale-1: #46327e;
+  --map-scale-2: #365c8d;
+  --map-scale-3: #277f8e;
+  --map-scale-4: #1fa187;
+  --map-scale-5: #4ac16d;
+  --map-scale-6: #a0da39;
+  --map-scale-7: #fde725;
+  --map-no-data: 0 0% 85%;
+  --map-boundary: 0 0% 45%;
+  --map-hatch-angle: 45deg;
+  --map-hatch-gap: 6px;
+  --map-hatch-width: 1.5px;
 }
 
 /* ══════════════════════════════════════════════════════════════════════════
@@ -273,6 +299,10 @@
   --border-subtle: 0 0% 13%;
   --border-default: 0 0% 20%;
   --border-strong: 0 0% 24%;
+
+  /* Data maps: no-data and boundaries sit between the page and the scale */
+  --map-no-data: 0 0% 20%;
+  --map-boundary: 0 0% 40%;
   --border-interactive: 0 0% 60%;
 
   /* Accent */