remarque-tokens 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENT_RULES.md +1 -0
- package/CHANGELOG.md +50 -0
- package/REMARQUE.md +18 -0
- package/package.json +15 -2
- package/scripts/theme.mjs +440 -0
- package/tokens.json +1 -1
package/AGENT_RULES.md
CHANGED
|
@@ -41,6 +41,7 @@ These are not guidelines. Agents must follow them literally.
|
|
|
41
41
|
- NEVER change a value in `tokens-core.css` (or its tokens' values anywhere) — core tokens are Remarque's identity; changing them means the project has forked the system
|
|
42
42
|
- Site personalization happens ONLY by overriding `tokens-palette.css` tokens (font slots from the approved pairings, colors, accent, `--content-reading` per the measure table) in a stylesheet loaded after the tokens
|
|
43
43
|
- After ANY palette change, run the audit and fix every failure before shipping — `npm run audit` inside this repo; `npx remarque-audit --palette <file> --src <dir>` in a consumer project (the npm script only exists here)
|
|
44
|
+
- A generated palette override (from `npx remarque-theme <light> --dark <dark>`, see REMARQUE.md "Color Providers") is regenerated, never hand-edited — if it needs to change, change the source theme slugs and re-run `remarque-theme`, don't patch the emitted CSS directly
|
|
44
45
|
|
|
45
46
|
### Typography
|
|
46
47
|
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,56 @@ All notable changes to `remarque-tokens` are documented here. Token value
|
|
|
4
4
|
changes always state the design rationale — downstream sites pin against
|
|
5
5
|
these entries when syncing.
|
|
6
6
|
|
|
7
|
+
## 0.9.0 — 2026-07-22
|
|
8
|
+
|
|
9
|
+
Color-provider bridge release (consensus-ratified 7-0, higher_order panel;
|
|
10
|
+
closes #75 — Phase 1 of the color-provider integration; Phase 2/3 tracked
|
|
11
|
+
in #76).
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
- **`remarque-theme` bin** (#75): `npx remarque-theme <light-slug> --dark
|
|
15
|
+
<dark-slug> [-o out.css]` derives a full 15-slot palette-tier override
|
|
16
|
+
from an `@williamzujkowski/oklch-terminal-themes` light+dark pair.
|
|
17
|
+
Terminal themes carry only `background/foreground/cursor/selection` +
|
|
18
|
+
16 ANSI slots — most of Remarque's semantic slots don't map directly,
|
|
19
|
+
and most themes fail the AAA `fg-muted` 7:1 line as authored. The bridge
|
|
20
|
+
derives instead: hue + chroma come from the theme, lightness is solved
|
|
21
|
+
per slot by binary search against the exact Enforcement Checklist
|
|
22
|
+
targets (in-gamut chroma clamping inside the solver, round-then-verify
|
|
23
|
+
to avoid float rounding pushing a borderline value back out of gamut).
|
|
24
|
+
Output passes `remarque-audit` **by construction** — the script
|
|
25
|
+
self-verifies the same contrast + gamut checks in-process before it
|
|
26
|
+
will emit anything.
|
|
27
|
+
- **Security hardening** (#75, panel security review): both slugs are
|
|
28
|
+
validated against the package's own `index.json` *before* any path is
|
|
29
|
+
built from them (the actual guard against path traversal, not the slug
|
|
30
|
+
regex, which is defense-in-depth); every OKLCH triplet read from theme
|
|
31
|
+
JSON is validated as finite numbers before use; CSS is never built by
|
|
32
|
+
string-interpolating raw JSON — every emitted number has passed through
|
|
33
|
+
our own rounding + validation. Light/dark polarity (`isDark`) is
|
|
34
|
+
enforced against the requested slugs.
|
|
35
|
+
- **`scripts/test-theme.mjs`** (#75): a corpus property test enumerating
|
|
36
|
+
every light+dark pair in the installed `oklch-terminal-themes` package
|
|
37
|
+
by name-stem (47 pairs at the pinned 0.1.0 dataset) — every pair must
|
|
38
|
+
derive AND pass the real `audit.mjs`, not a sample. Also covers unknown
|
|
39
|
+
slugs, polarity mismatches, traversal-looking slugs, and that the
|
|
40
|
+
output declares only palette-tier custom properties. Wired into CI
|
|
41
|
+
alongside `test-audit.mjs`/`test-drift.mjs`.
|
|
42
|
+
- **`@williamzujkowski/oklch-terminal-themes`** pinned exact at `0.1.0` in
|
|
43
|
+
`devDependencies`, and listed as an optional `^0.1.0` peerDependency —
|
|
44
|
+
consumers who want `remarque-theme` install it themselves; it is never
|
|
45
|
+
required to use the rest of the package.
|
|
46
|
+
- REMARQUE.md: new "Color Providers" section positioning the palette tier
|
|
47
|
+
as theme-suppliable, with `oklch-terminal-themes` as the reference
|
|
48
|
+
provider and the pairing contract stated explicitly (`--dark` is
|
|
49
|
+
required; upstream pairing metadata tracked in
|
|
50
|
+
`oklch-terminal-themes#128`). AGENT_RULES.md: a rule against hand-editing
|
|
51
|
+
a generated palette — regenerate it instead.
|
|
52
|
+
|
|
53
|
+
No core-tier token values changed in this release. `tokens-palette.css`
|
|
54
|
+
(the shipped default palette) is also unchanged — `remarque-theme` is an
|
|
55
|
+
opt-in alternate source for the palette tier, not a replacement for it.
|
|
56
|
+
|
|
7
57
|
## 0.8.0 — 2026-07-21
|
|
8
58
|
|
|
9
59
|
Archetype-vocabulary and AI-agent-packaging release (design review; closes
|
package/REMARQUE.md
CHANGED
|
@@ -70,6 +70,24 @@ This makes compliance mechanical: a site that overrides only palette-tier tokens
|
|
|
70
70
|
|
|
71
71
|
---
|
|
72
72
|
|
|
73
|
+
## Color Providers
|
|
74
|
+
|
|
75
|
+
The palette tier (all `--color-*` tokens) can be *supplied* rather than hand-authored — Remarque focuses on typography, and a color-provider package can own the personalization surface it already sanctions.
|
|
76
|
+
|
|
77
|
+
[`@williamzujkowski/oklch-terminal-themes`](https://www.npmjs.com/package/@williamzujkowski/oklch-terminal-themes) is the reference provider: a dataset of terminal color schemes converted to OKLCH. Run it through the bundled bridge:
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
npx remarque-theme <light-slug> --dark <dark-slug> [-o palette-override.css]
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Terminal themes carry only `background/foreground/cursor/selection` + 16 ANSI slots — a few of Remarque's 15 semantic slots map directly, and most themes fail the AAA `fg-muted` 7:1 line as authored. So `remarque-theme` *derives* rather than maps: **hue and chroma carry the theme's personality; lightness is solved per slot** (binary search against the same contrast targets as the Enforcement Checklist below, with in-gamut chroma clamping) so the output passes `remarque-audit` by construction. The accent hue comes from the theme's cursor color if it's chromatic, otherwise the most saturated classic ANSI color, and is kept consistent between the light and dark half of a pair.
|
|
84
|
+
|
|
85
|
+
The audit remains the gate regardless of provenance — `remarque-theme` self-verifies its own output against the same checks before it will emit anything, but a site that hand-edits a generated palette (or points at a provider with pathological input colors) still runs through `remarque-audit` in CI like any other palette.
|
|
86
|
+
|
|
87
|
+
**Pairing contract:** the dataset does not yet carry light/dark pairing metadata (tracked upstream: [`oklch-terminal-themes#128`](https://github.com/williamzujkowski/oklch-terminal-themes/issues/128)), so `--dark <slug>` is explicitly required — there is no implicit or guessed dark counterpart. `remarque-theme` also rejects a light slug that isn't tagged `isDark: false` and a dark slug that isn't tagged `isDark: true`.
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
73
91
|
## Font Slots
|
|
74
92
|
|
|
75
93
|
Remarque uses a three-slot font system. Each slot has a strict role, and each slot accepts a small set of approved faces — swap the face, keep the role.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "remarque-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=18"
|
|
6
6
|
},
|
|
@@ -23,12 +23,24 @@
|
|
|
23
23
|
"main": "tokens.css",
|
|
24
24
|
"bin": {
|
|
25
25
|
"remarque-audit": "scripts/audit.mjs",
|
|
26
|
-
"remarque-drift": "scripts/drift-check.mjs"
|
|
26
|
+
"remarque-drift": "scripts/drift-check.mjs",
|
|
27
|
+
"remarque-theme": "scripts/theme.mjs"
|
|
27
28
|
},
|
|
28
29
|
"scripts": {
|
|
29
30
|
"audit": "node scripts/audit.mjs",
|
|
30
31
|
"drift": "node scripts/drift-check.mjs"
|
|
31
32
|
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@williamzujkowski/oklch-terminal-themes": "0.1.0"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"@williamzujkowski/oklch-terminal-themes": "^0.1.0"
|
|
38
|
+
},
|
|
39
|
+
"peerDependenciesMeta": {
|
|
40
|
+
"@williamzujkowski/oklch-terminal-themes": {
|
|
41
|
+
"optional": true
|
|
42
|
+
}
|
|
43
|
+
},
|
|
32
44
|
"exports": {
|
|
33
45
|
".": "./tokens.css",
|
|
34
46
|
"./tokens": "./tokens.css",
|
|
@@ -59,6 +71,7 @@
|
|
|
59
71
|
"fonts/",
|
|
60
72
|
"scripts/audit.mjs",
|
|
61
73
|
"scripts/drift-check.mjs",
|
|
74
|
+
"scripts/theme.mjs",
|
|
62
75
|
"tailwind.config.js",
|
|
63
76
|
"REMARQUE.md",
|
|
64
77
|
"AGENT_RULES.md",
|
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
/*
|
|
3
|
+
* remarque-theme — derive a Remarque palette-tier override from an
|
|
4
|
+
* @williamzujkowski/oklch-terminal-themes light+dark pair.
|
|
5
|
+
*
|
|
6
|
+
* node scripts/theme.mjs <light-slug> --dark <dark-slug> [-o out.css]
|
|
7
|
+
* npx remarque-theme <light-slug> --dark <dark-slug> [-o out.css]
|
|
8
|
+
*
|
|
9
|
+
* Terminal themes carry only background/foreground/cursor/selection + 16
|
|
10
|
+
* ANSI slots — most of Remarque's 15 semantic slots don't map directly,
|
|
11
|
+
* and most themes fail the AAA fg-muted 7:1 line as authored. So this
|
|
12
|
+
* DERIVES rather than maps: hue + chroma come from the theme (its
|
|
13
|
+
* personality), lightness is solved per slot to hit the exact ratio
|
|
14
|
+
* targets from REMARQUE.md's Enforcement Checklist (binary search over
|
|
15
|
+
* L, with in-gamut chroma clamping inside the solver). Output passes
|
|
16
|
+
* remarque-audit BY CONSTRUCTION — this script self-verifies the same
|
|
17
|
+
* pairings before it will emit anything.
|
|
18
|
+
*
|
|
19
|
+
* Security (non-negotiable, per the panel security review on #75):
|
|
20
|
+
* - Both slugs are checked against the package's own index.json BEFORE
|
|
21
|
+
* any path is built from them — an unknown slug never reaches a
|
|
22
|
+
* require.resolve() or fs call. This is the actual guard against
|
|
23
|
+
* path traversal; the slug regex below is defense-in-depth, not the
|
|
24
|
+
* primary control.
|
|
25
|
+
* - Every OKLCH triplet read from theme JSON is validated as finite
|
|
26
|
+
* numbers (l in [0,1], c >= 0, h in [0,360)) before it touches any
|
|
27
|
+
* math. Malformed/hostile theme JSON fails loudly, never silently.
|
|
28
|
+
* - CSS is never built by string-interpolating raw JSON. Every number
|
|
29
|
+
* emitted has passed through our own rounding + validation first.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
import { createRequire } from 'node:module';
|
|
33
|
+
import { pathToFileURL, fileURLToPath } from 'node:url';
|
|
34
|
+
import { dirname, join } from 'node:path';
|
|
35
|
+
import { readFileSync, writeFileSync } from 'node:fs';
|
|
36
|
+
|
|
37
|
+
const PKG_SPEC = '@williamzujkowski/oklch-terminal-themes';
|
|
38
|
+
const HERE = dirname(fileURLToPath(import.meta.url));
|
|
39
|
+
let OWN_VERSION = 'unknown';
|
|
40
|
+
try {
|
|
41
|
+
OWN_VERSION = JSON.parse(readFileSync(join(HERE, '..', 'package.json'), 'utf8')).version;
|
|
42
|
+
} catch { /* provenance is best-effort */ }
|
|
43
|
+
|
|
44
|
+
const USAGE = `usage: remarque-theme <light-slug> --dark <dark-slug> [-o out.css]
|
|
45
|
+
|
|
46
|
+
<light-slug> slug of a theme with isDark=false in ${PKG_SPEC}
|
|
47
|
+
--dark <slug> slug of a theme with isDark=true (required — the
|
|
48
|
+
dataset has no light/dark pairing metadata yet, see
|
|
49
|
+
oklch-terminal-themes#128)
|
|
50
|
+
-o, --output write the derived palette here instead of stdout`;
|
|
51
|
+
|
|
52
|
+
function die(msg) {
|
|
53
|
+
console.error(msg);
|
|
54
|
+
process.exit(1);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* ── CLI args ─────────────────────────────────────────────────────── */
|
|
58
|
+
|
|
59
|
+
const argv = process.argv.slice(2);
|
|
60
|
+
let darkSlug, outFile;
|
|
61
|
+
const positional = [];
|
|
62
|
+
for (let i = 0; i < argv.length; i++) {
|
|
63
|
+
const a = argv[i];
|
|
64
|
+
if (a === '--dark') darkSlug = argv[++i];
|
|
65
|
+
else if (a === '-o' || a === '--output') outFile = argv[++i];
|
|
66
|
+
else if (a === '-h' || a === '--help') { console.log(USAGE); process.exit(0); }
|
|
67
|
+
else positional.push(a);
|
|
68
|
+
}
|
|
69
|
+
const lightSlug = positional[0];
|
|
70
|
+
if (!lightSlug || !darkSlug) die(USAGE);
|
|
71
|
+
|
|
72
|
+
/* ── Resolve @williamzujkowski/oklch-terminal-themes ─────────────────
|
|
73
|
+
* Tried from the consumer's cwd first (a project that installs the
|
|
74
|
+
* themes package at its own top level), then from this script's own
|
|
75
|
+
* location (covers hoisting layouts where only remarque-tokens itself
|
|
76
|
+
* declares the peerDependency). First resolvable wins. */
|
|
77
|
+
|
|
78
|
+
function tryResolveFrom(base) {
|
|
79
|
+
try {
|
|
80
|
+
const req = createRequire(base);
|
|
81
|
+
const indexPath = req.resolve(`${PKG_SPEC}/index.json`);
|
|
82
|
+
return { req, indexPath };
|
|
83
|
+
} catch {
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const resolved =
|
|
89
|
+
tryResolveFrom(pathToFileURL(join(process.cwd(), 'package.json')).href) ||
|
|
90
|
+
tryResolveFrom(import.meta.url);
|
|
91
|
+
|
|
92
|
+
if (!resolved) {
|
|
93
|
+
die(
|
|
94
|
+
`${PKG_SPEC} is not installed (checked from the current project and from remarque-tokens itself).\n\n` +
|
|
95
|
+
`Install it and retry:\n npm install ${PKG_SPEC}@0.1.0\n`
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const index = JSON.parse(readFileSync(resolved.indexPath, 'utf8'));
|
|
100
|
+
const bySlug = new Map((index.themes || []).map((t) => [t.slug, t]));
|
|
101
|
+
|
|
102
|
+
// Package root sits two directories above data/index.json; read its
|
|
103
|
+
// package.json for the provenance header directly via fs (not through
|
|
104
|
+
// "exports" — the package does not publish that subpath).
|
|
105
|
+
const themesPkgRoot = dirname(dirname(resolved.indexPath));
|
|
106
|
+
let themesVersion = 'unknown';
|
|
107
|
+
try {
|
|
108
|
+
themesVersion = JSON.parse(readFileSync(join(themesPkgRoot, 'package.json'), 'utf8')).version;
|
|
109
|
+
} catch { /* provenance is best-effort */ }
|
|
110
|
+
|
|
111
|
+
/* ── Slug validation — the actual security boundary ──────────────────
|
|
112
|
+
* A slug is only ever used to build a require specifier AFTER it has
|
|
113
|
+
* been matched, byte-for-byte, against an entry in the package's own
|
|
114
|
+
* index. Nothing user-supplied reaches require.resolve()/fs otherwise. */
|
|
115
|
+
|
|
116
|
+
const SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
117
|
+
|
|
118
|
+
function requireSlug(slug, label) {
|
|
119
|
+
if (typeof slug !== 'string' || !SLUG_RE.test(slug) || !bySlug.has(slug)) {
|
|
120
|
+
die(`${label} slug "${slug}" is not a known theme in ${PKG_SPEC} (see its index.json for valid slugs)`);
|
|
121
|
+
}
|
|
122
|
+
return bySlug.get(slug);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const lightMeta = requireSlug(lightSlug, 'light');
|
|
126
|
+
const darkMeta = requireSlug(darkSlug, 'dark');
|
|
127
|
+
if (lightMeta.isDark !== false) die(`light slug "${lightSlug}" has isDark=${lightMeta.isDark}, expected false`);
|
|
128
|
+
if (darkMeta.isDark !== true) die(`dark slug "${darkSlug}" has isDark=${darkMeta.isDark}, expected true`);
|
|
129
|
+
|
|
130
|
+
function loadTheme(slug) {
|
|
131
|
+
// Safe: slug has already been matched against the package's index above.
|
|
132
|
+
const path = resolved.req.resolve(`${PKG_SPEC}/themes/${slug}.json`);
|
|
133
|
+
return JSON.parse(readFileSync(path, 'utf8'));
|
|
134
|
+
}
|
|
135
|
+
const themeLight = loadTheme(lightSlug);
|
|
136
|
+
const themeDark = loadTheme(darkSlug);
|
|
137
|
+
|
|
138
|
+
/* ── Numeric validation ───────────────────────────────────────────── */
|
|
139
|
+
|
|
140
|
+
const isNum = (x) => typeof x === 'number' && Number.isFinite(x);
|
|
141
|
+
|
|
142
|
+
function validateOklch(o, where) {
|
|
143
|
+
if (!o || !isNum(o.l) || o.l < 0 || o.l > 1) die(`${where}: invalid or missing OKLCH l (${o && o.l})`);
|
|
144
|
+
if (!isNum(o.c) || o.c < 0) die(`${where}: invalid or missing OKLCH c (${o && o.c})`);
|
|
145
|
+
if (!isNum(o.h) || o.h < 0 || o.h >= 360) die(`${where}: invalid or missing OKLCH h (${o && o.h})`);
|
|
146
|
+
return [o.l, o.c, o.h];
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function slotLch(theme, slot, label) {
|
|
150
|
+
const entry = theme.colors && theme.colors[slot];
|
|
151
|
+
if (!entry || !entry.oklch) die(`${label}: missing colors.${slot}.oklch`);
|
|
152
|
+
return validateOklch(entry.oklch, `${label} colors.${slot}`);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* ── OKLCH → sRGB → WCAG luminance (same Ottosson matrices as audit.mjs) */
|
|
156
|
+
|
|
157
|
+
function oklchToLinearSrgb(L, C, H) {
|
|
158
|
+
const h = (H * Math.PI) / 180;
|
|
159
|
+
const a = C * Math.cos(h), b = C * Math.sin(h);
|
|
160
|
+
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
|
|
161
|
+
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
|
|
162
|
+
const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
|
|
163
|
+
const l = l_ ** 3, m = m_ ** 3, s = s_ ** 3;
|
|
164
|
+
return [
|
|
165
|
+
+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
|
|
166
|
+
-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
|
|
167
|
+
-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
|
|
168
|
+
];
|
|
169
|
+
}
|
|
170
|
+
const inGamut = (rgb) => rgb.every((x) => x >= -0.0005 && x <= 1.0005);
|
|
171
|
+
const clip = (x) => Math.min(1, Math.max(0, x));
|
|
172
|
+
const luminance = (rgb) => {
|
|
173
|
+
const [r, g, b] = rgb.map(clip);
|
|
174
|
+
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
175
|
+
};
|
|
176
|
+
function ratio(c1, c2) {
|
|
177
|
+
const l1 = luminance(oklchToLinearSrgb(...c1));
|
|
178
|
+
const l2 = luminance(oklchToLinearSrgb(...c2));
|
|
179
|
+
const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
|
|
180
|
+
return (hi + 0.05) / (lo + 0.05);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const r3 = (x) => +x.toFixed(3);
|
|
184
|
+
const r1 = (x) => +x.toFixed(1);
|
|
185
|
+
|
|
186
|
+
/* Largest chroma <= C that stays in sRGB gamut at (L, H).
|
|
187
|
+
* Round-then-verify (fixes the spike's bug, see #75): stepping in
|
|
188
|
+
* unrounded space and only rounding the final answer can round a
|
|
189
|
+
* borderline-in-gamut value back OUT of gamut (float rounding is not
|
|
190
|
+
* gamut-aware). So after the coarse search we round, then keep backing
|
|
191
|
+
* off in already-rounded steps until the ROUNDED value itself verifies. */
|
|
192
|
+
function fitChroma(L, C, H) {
|
|
193
|
+
let c = Math.max(0, C);
|
|
194
|
+
while (c > 0 && !inGamut(oklchToLinearSrgb(L, c, H))) c -= 0.001;
|
|
195
|
+
c = Math.max(0, c);
|
|
196
|
+
let rounded = r3(c);
|
|
197
|
+
while (rounded > 0 && !inGamut(oklchToLinearSrgb(L, rounded, H))) rounded = r3(rounded - 0.001);
|
|
198
|
+
return Math.max(0, rounded);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* Solve lightness so [L, C', H] hits >= target ratio against bg.
|
|
202
|
+
* dir 'darker': text on a light bg — find the MAX L that still passes
|
|
203
|
+
* (stays closest to the theme's own feel). dir 'lighter': text on a
|
|
204
|
+
* dark bg — find the MIN L. Chroma is clamped in-gamut INSIDE the
|
|
205
|
+
* solver at every candidate L, and the final [L, C, H] is rounded, then
|
|
206
|
+
* re-verified against the real (non-margin) target — nudging L further
|
|
207
|
+
* in the safe direction if rounding cost just enough ratio to fail. */
|
|
208
|
+
function solveLOnce(C, H, bg, target, dir) {
|
|
209
|
+
const searchTarget = target * 1.03; // margin over the audit threshold
|
|
210
|
+
let lo = 0, hi = 1;
|
|
211
|
+
for (let i = 0; i < 40; i++) {
|
|
212
|
+
const mid = (lo + hi) / 2;
|
|
213
|
+
const c = fitChroma(mid, C, H);
|
|
214
|
+
const passes = ratio([mid, c, H], bg) >= searchTarget;
|
|
215
|
+
if (dir === 'darker') { if (passes) lo = mid; else hi = mid; }
|
|
216
|
+
else { if (passes) hi = mid; else lo = mid; }
|
|
217
|
+
}
|
|
218
|
+
let L = r3(dir === 'darker' ? lo : hi);
|
|
219
|
+
let c = fitChroma(L, C, H);
|
|
220
|
+
let guard = 0;
|
|
221
|
+
while (ratio([L, c, H], bg) < target && guard < 100) {
|
|
222
|
+
const next = dir === 'darker' ? r3(L - 0.001) : r3(L + 0.001);
|
|
223
|
+
if (next < 0 || next > 1 || next === L) break;
|
|
224
|
+
L = next;
|
|
225
|
+
c = fitChroma(L, C, H);
|
|
226
|
+
guard++;
|
|
227
|
+
}
|
|
228
|
+
const ok = ratio([L, c, H], bg) >= target;
|
|
229
|
+
return { L, C: c, H: r1(H), ok };
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
function solveL(C, H, bg, target, dir) {
|
|
233
|
+
let r = solveLOnce(C, H, bg, target, dir);
|
|
234
|
+
if (r.ok) return [r.L, r.C, r.H];
|
|
235
|
+
// Chroma-collapse fallback: retry as a neutral if the chromatic
|
|
236
|
+
// solve can't reach the target ratio at any lightness.
|
|
237
|
+
r = solveLOnce(0, H, bg, target, dir);
|
|
238
|
+
if (r.ok) return [r.L, r.C, r.H];
|
|
239
|
+
die(
|
|
240
|
+
`internal error: cannot solve lightness for a ${target}:1 target ` +
|
|
241
|
+
`(hue ${H.toFixed(1)}, direction ${dir}) even with chroma collapsed to 0 — pathological theme colors`
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Accent hue: cursor if it's chromatic, else the most-chromatic classic ANSI. */
|
|
246
|
+
function accentHue(theme, label) {
|
|
247
|
+
const cursor = theme.colors && theme.colors.cursor && theme.colors.cursor.oklch;
|
|
248
|
+
if (cursor) {
|
|
249
|
+
const [, c, h] = validateOklch(cursor, `${label} colors.cursor`);
|
|
250
|
+
if (c >= 0.05) return { h, c, from: 'cursor' };
|
|
251
|
+
}
|
|
252
|
+
const names = ['blue', 'purple', 'red', 'green', 'cyan', 'yellow'];
|
|
253
|
+
const cands = [];
|
|
254
|
+
for (const name of names) {
|
|
255
|
+
const o = theme.colors && theme.colors[name] && theme.colors[name].oklch;
|
|
256
|
+
if (!o) continue;
|
|
257
|
+
const [, c, h] = validateOklch(o, `${label} colors.${name}`);
|
|
258
|
+
cands.push({ name, c, h });
|
|
259
|
+
}
|
|
260
|
+
if (!cands.length) die(`${label}: no classic ANSI colors available to derive an accent hue`);
|
|
261
|
+
cands.sort((a, b) => b.c - a.c);
|
|
262
|
+
return { h: cands[0].h, c: cands[0].c, from: cands[0].name };
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
function fmt(triple) {
|
|
266
|
+
const [L, C, H] = triple;
|
|
267
|
+
if (!isNum(L) || !isNum(C) || !isNum(H)) die('internal error: attempted to emit a non-finite color component');
|
|
268
|
+
return `oklch(${L} ${C} ${H})`;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* ── LIGHT derivation ─────────────────────────────────────────────── */
|
|
272
|
+
|
|
273
|
+
function deriveLight(t) {
|
|
274
|
+
const [bgL0, bgC0, bgH0] = slotLch(t, 'background', 'light');
|
|
275
|
+
const bgH = r1(bgH0);
|
|
276
|
+
const bgL = r3(Math.max(bgL0, 0.93));
|
|
277
|
+
const bgC = fitChroma(bgL, Math.min(bgC0, 0.02), bgH);
|
|
278
|
+
const bg = [bgL, bgC, bgH];
|
|
279
|
+
const surface = [r3(bgL - 0.01), bgC, bgH];
|
|
280
|
+
const [, fgC0, fgH] = slotLch(t, 'foreground', 'light');
|
|
281
|
+
const fgC = Math.min(fgC0, 0.03);
|
|
282
|
+
const fg = solveL(fgC, fgH, surface, 10, 'darker');
|
|
283
|
+
const fgMuted = solveL(fgC, fgH, bg, 7.0, 'darker');
|
|
284
|
+
const muted = solveL(Math.min(fgC0, 0.02), fgH, surface, 4.5, 'darker');
|
|
285
|
+
const borderBold = solveL(0.01, bgH, bg, 3.0, 'darker');
|
|
286
|
+
const ac = accentHue(t, 'light');
|
|
287
|
+
const acC = Math.min(ac.c, 0.14);
|
|
288
|
+
const accent = solveL(acC, ac.h, bg, 4.5, 'darker');
|
|
289
|
+
const accentHover = [r3(accent[0] - 0.08), fitChroma(r3(accent[0] - 0.08), acC * 0.8, ac.h), r1(ac.h)];
|
|
290
|
+
const raw = {
|
|
291
|
+
'color-bg': bg,
|
|
292
|
+
'color-bg-subtle': [r3(bg[0] - 0.02), bg[1], bg[2]],
|
|
293
|
+
'color-fg': fg,
|
|
294
|
+
'color-fg-muted': fgMuted,
|
|
295
|
+
'color-muted': muted,
|
|
296
|
+
'color-border': [r3(bg[0] - 0.095), bg[1], bg[2]],
|
|
297
|
+
'color-border-bold': borderBold,
|
|
298
|
+
'color-surface': surface,
|
|
299
|
+
'color-accent': accent,
|
|
300
|
+
'color-accent-hover': accentHover,
|
|
301
|
+
'color-accent-subtle': [0.95, fitChroma(0.95, 0.02, ac.h), r1(ac.h)],
|
|
302
|
+
'color-selection-bg': [0.92, fitChroma(0.92, 0.04, ac.h), r1(ac.h)],
|
|
303
|
+
'color-selection-fg': { ref: 'color-fg' },
|
|
304
|
+
'color-code-bg': [r3(bg[0] - 0.03), bg[1], bg[2]],
|
|
305
|
+
'color-code-fg': { ref: 'color-fg' },
|
|
306
|
+
};
|
|
307
|
+
const tokens = {};
|
|
308
|
+
for (const [name, v] of Object.entries(raw)) tokens[name] = v.ref ? `var(--${v.ref})` : fmt(v);
|
|
309
|
+
return { accentFrom: ac.from, accentH: ac.h, raw, tokens };
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* ── DARK derivation ──────────────────────────────────────────────── */
|
|
313
|
+
|
|
314
|
+
function deriveDark(t, accentHueLight) {
|
|
315
|
+
const [bgL0, bgC0, bgH0] = slotLch(t, 'background', 'dark');
|
|
316
|
+
const bgH = r1(bgH0);
|
|
317
|
+
const bgL = r3(Math.min(Math.max(bgL0, 0.14), 0.22));
|
|
318
|
+
const bgC = fitChroma(bgL, Math.min(bgC0, 0.03), bgH);
|
|
319
|
+
const bg = [bgL, bgC, bgH];
|
|
320
|
+
const surface = [r3(bg[0] + 0.03), bgC, bgH];
|
|
321
|
+
const [, fgC0, fgH] = slotLch(t, 'foreground', 'dark');
|
|
322
|
+
const fgC = Math.min(fgC0, 0.02);
|
|
323
|
+
const fg = solveL(fgC, fgH, surface, 10, 'lighter');
|
|
324
|
+
const fgMuted = solveL(fgC, fgH, bg, 7.0, 'lighter');
|
|
325
|
+
const muted = solveL(fgC, fgH, surface, 4.5, 'lighter');
|
|
326
|
+
const borderBold = solveL(0.01, bgH, bg, 3.0, 'lighter');
|
|
327
|
+
const ac = accentHue(t, 'dark');
|
|
328
|
+
const h = accentHueLight ?? ac.h; // keep hue consistent across the pair
|
|
329
|
+
const acC = Math.min(ac.c, 0.12);
|
|
330
|
+
const accent = solveL(acC, h, bg, 4.5, 'lighter');
|
|
331
|
+
const accentHover = [r3(accent[0] + 0.07), fitChroma(r3(accent[0] + 0.07), acC, h), r1(h)];
|
|
332
|
+
const selBg = [r3(bg[0] + 0.14), fitChroma(r3(bg[0] + 0.14), 0.06, h), r1(h)];
|
|
333
|
+
const selFg = solveL(0.005, fgH, selBg, 4.5, 'lighter');
|
|
334
|
+
const codeBg = [r3(bg[0] + 0.04), bgC, bgH];
|
|
335
|
+
const codeFg = solveL(0.005, fgH, codeBg, 7, 'lighter');
|
|
336
|
+
const raw = {
|
|
337
|
+
'color-bg': bg,
|
|
338
|
+
'color-bg-subtle': surface,
|
|
339
|
+
'color-fg': fg,
|
|
340
|
+
'color-fg-muted': fgMuted,
|
|
341
|
+
'color-muted': muted,
|
|
342
|
+
'color-border': [r3(bg[0] + 0.09), bg[1], bg[2]],
|
|
343
|
+
'color-border-bold': borderBold,
|
|
344
|
+
'color-surface': surface,
|
|
345
|
+
'color-accent': accent,
|
|
346
|
+
'color-accent-hover': accentHover,
|
|
347
|
+
'color-accent-subtle': [r3(bg[0] + 0.06), fitChroma(r3(bg[0] + 0.06), 0.04, h), r1(h)],
|
|
348
|
+
'color-selection-bg': selBg,
|
|
349
|
+
'color-selection-fg': selFg,
|
|
350
|
+
'color-code-bg': codeBg,
|
|
351
|
+
'color-code-fg': codeFg,
|
|
352
|
+
};
|
|
353
|
+
const tokens = {};
|
|
354
|
+
for (const [name, v] of Object.entries(raw)) tokens[name] = fmt(v);
|
|
355
|
+
tokens['weight-display'] = '500';
|
|
356
|
+
return { raw, tokens };
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
const light = deriveLight(themeLight);
|
|
360
|
+
const dark = deriveDark(themeDark, light.accentH);
|
|
361
|
+
|
|
362
|
+
/* ── Self-verify — the same pairings + gamut rule as scripts/audit.mjs,
|
|
363
|
+
* run in-process against the raw [L,C,H] triples (mirrored here rather
|
|
364
|
+
* than reparsing the CSS we're about to emit). This should be
|
|
365
|
+
* impossible to fail; a failure means a bug in the derivation above,
|
|
366
|
+
* not a bad input theme, so it errors as an internal error. */
|
|
367
|
+
|
|
368
|
+
const CHECKS = [
|
|
369
|
+
['color-fg', 'color-bg', 4.5, 'primary text'],
|
|
370
|
+
['color-fg', 'color-surface', 4.5, 'primary text on surface'],
|
|
371
|
+
['color-fg-muted', 'color-bg', 7.0, 'secondary text (spec AAA line)'],
|
|
372
|
+
['color-muted', 'color-bg', 4.5, 'tertiary text'],
|
|
373
|
+
['color-muted', 'color-surface', 4.5, 'tertiary text on surface'],
|
|
374
|
+
['color-accent', 'color-bg', 4.5, 'links'],
|
|
375
|
+
['color-accent-hover', 'color-bg', 4.5, 'link hover'],
|
|
376
|
+
['color-code-fg', 'color-code-bg', 4.5, 'code text'],
|
|
377
|
+
['color-border-bold', 'color-bg', 3.0, 'functional borders (WCAG 1.4.11)'],
|
|
378
|
+
['color-selection-fg', 'color-selection-bg', 4.5, 'selected text'],
|
|
379
|
+
];
|
|
380
|
+
|
|
381
|
+
function resolveRaw(raw, name, seen = new Set()) {
|
|
382
|
+
if (seen.has(name)) die(`internal error: circular var() chain at --${name}`);
|
|
383
|
+
seen.add(name);
|
|
384
|
+
const v = raw[name];
|
|
385
|
+
if (v === undefined) die(`internal error: --${name} was never derived`);
|
|
386
|
+
return v.ref ? resolveRaw(raw, v.ref, seen) : v;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
function selfVerify(themeName, raw) {
|
|
390
|
+
for (const [name, v] of Object.entries(raw)) {
|
|
391
|
+
const triple = v.ref ? resolveRaw(raw, name) : v;
|
|
392
|
+
if (!inGamut(oklchToLinearSrgb(...triple))) {
|
|
393
|
+
die(`internal error: derived --${name} (${themeName}) oklch(${triple.join(' ')}) is outside sRGB gamut`);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
for (const [fgName, bgName, min, label] of CHECKS) {
|
|
397
|
+
const fg = resolveRaw(raw, fgName);
|
|
398
|
+
const bg = resolveRaw(raw, bgName);
|
|
399
|
+
const r = ratio(fg, bg);
|
|
400
|
+
if (r < min) {
|
|
401
|
+
die(`internal error: derived --${fgName}/--${bgName} (${themeName}) = ${r.toFixed(2)}:1 < ${min}:1 (${label}) — this should be impossible; the derivation has a bug`);
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
selfVerify('light', light.raw);
|
|
406
|
+
selfVerify('dark', dark.raw);
|
|
407
|
+
|
|
408
|
+
/* ── Emit ─────────────────────────────────────────────────────────── */
|
|
409
|
+
|
|
410
|
+
const decls = (tokens, indent = ' ') => Object.entries(tokens).map(([k, v]) => `${indent}--${k}: ${v};`).join('\n');
|
|
411
|
+
|
|
412
|
+
const css = `/*
|
|
413
|
+
* Generated by remarque-theme (remarque-tokens ${OWN_VERSION}) — DO NOT HAND-EDIT.
|
|
414
|
+
* Regenerate instead: npx remarque-theme ${lightSlug} --dark ${darkSlug}
|
|
415
|
+
*
|
|
416
|
+
* Source themes (${PKG_SPEC}@${themesVersion}):
|
|
417
|
+
* light = "${lightSlug}" dark = "${darkSlug}"
|
|
418
|
+
* accent hue derived from: ${light.accentFrom} (H=${light.accentH.toFixed(1)})
|
|
419
|
+
*
|
|
420
|
+
* Palette tier only (--color-*, --weight-display) — see REMARQUE.md
|
|
421
|
+
* "Token Tiers" / "Color Providers". Self-verified against the same
|
|
422
|
+
* contrast + gamut checks as remarque-audit before being emitted.
|
|
423
|
+
*/
|
|
424
|
+
|
|
425
|
+
:root {
|
|
426
|
+
${decls(light.tokens)}
|
|
427
|
+
--weight-display: 400;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
[data-theme="dark"] {
|
|
431
|
+
${decls(dark.tokens)}
|
|
432
|
+
}
|
|
433
|
+
`;
|
|
434
|
+
|
|
435
|
+
if (outFile) {
|
|
436
|
+
writeFileSync(outFile, css);
|
|
437
|
+
console.error(`remarque-theme: wrote ${outFile}`);
|
|
438
|
+
} else {
|
|
439
|
+
process.stdout.write(css);
|
|
440
|
+
}
|
package/tokens.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$description": "Remarque design tokens — GENERATED from tokens-core.css + tokens-palette.css by scripts/tokens-json.mjs. Do not edit; the CSS is the source of truth.",
|
|
3
3
|
"$extensions": {
|
|
4
4
|
"remarque": {
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.9.0",
|
|
6
6
|
"tiers": {
|
|
7
7
|
"core": "immutable identity — overriding forks the system",
|
|
8
8
|
"palette": "sanctioned personalization surface — override freely, then run remarque-audit"
|