@dataimago/tokens 0.1.0-alpha.26 → 0.1.0-alpha.28

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.
Files changed (11) hide show
  1. package/dist/index.cjs +14 -4
  2. package/dist/index.mjs +14 -4
  3. package/dist/tokens.css +15 -3
  4. package/dist/tokens.dtcg.json +20 -4
  5. package/dist/tokens.scss +15 -3
  6. package/dist/tokens.studio.json +19 -3
  7. package/dist/tokens.w3c.dtcg.json +24 -4
  8. package/package.json +1 -1
  9. package/src/theme-colors-p3.json +26 -0
  10. package/src/theme-colors.json +10 -0
  11. package/src/typography.json +4 -4
package/dist/index.cjs CHANGED
@@ -17,6 +17,11 @@ const tokens = {
17
17
  "dark": "#1c1917",
18
18
  "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
19
19
  },
20
+ "figure-plate": {
21
+ "light": "#f7f7f6",
22
+ "dark": "#dcdcda",
23
+ "description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
24
+ },
20
25
  "sunken": {
21
26
  "light": "#faf2e3",
22
27
  "dark": "#0c0a09",
@@ -59,6 +64,11 @@ const tokens = {
59
64
  "dark": "rgba(253, 249, 242, 0.60)",
60
65
  "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
61
66
  },
67
+ "figure-frame": {
68
+ "light": "#6a6a6a",
69
+ "dark": "#6a6a6a",
70
+ "description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
71
+ },
62
72
  "code": {
63
73
  "light": "#d6d3d1",
64
74
  "dark": "#292524",
@@ -415,8 +425,8 @@ const tokens = {
415
425
  "font": {
416
426
  "family": {
417
427
  "sans": {
418
- "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
419
- "description": "Primary sans-serif font - body text"
428
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
429
+ "description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
420
430
  },
421
431
  "mono": {
422
432
  "value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
@@ -427,11 +437,11 @@ const tokens = {
427
437
  "description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
428
438
  },
429
439
  "display-editorial": {
430
- "value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
440
+ "value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
431
441
  "description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
432
442
  },
433
443
  "display-documentation": {
434
- "value": "Noto Sans, system-ui, sans-serif",
444
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
435
445
  "description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
436
446
  },
437
447
  "brand": {
package/dist/index.mjs CHANGED
@@ -17,6 +17,11 @@ const tokens = {
17
17
  "dark": "#1c1917",
18
18
  "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
19
19
  },
20
+ "figure-plate": {
21
+ "light": "#f7f7f6",
22
+ "dark": "#dcdcda",
23
+ "description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
24
+ },
20
25
  "sunken": {
21
26
  "light": "#faf2e3",
22
27
  "dark": "#0c0a09",
@@ -59,6 +64,11 @@ const tokens = {
59
64
  "dark": "rgba(253, 249, 242, 0.60)",
60
65
  "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
61
66
  },
67
+ "figure-frame": {
68
+ "light": "#6a6a6a",
69
+ "dark": "#6a6a6a",
70
+ "description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
71
+ },
62
72
  "code": {
63
73
  "light": "#d6d3d1",
64
74
  "dark": "#292524",
@@ -415,8 +425,8 @@ const tokens = {
415
425
  "font": {
416
426
  "family": {
417
427
  "sans": {
418
- "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
419
- "description": "Primary sans-serif font - body text"
428
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
429
+ "description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
420
430
  },
421
431
  "mono": {
422
432
  "value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
@@ -427,11 +437,11 @@ const tokens = {
427
437
  "description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
428
438
  },
429
439
  "display-editorial": {
430
- "value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
440
+ "value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
431
441
  "description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
432
442
  },
433
443
  "display-documentation": {
434
- "value": "Noto Sans, system-ui, sans-serif",
444
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
435
445
  "description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
436
446
  },
437
447
  "brand": {
package/dist/tokens.css CHANGED
@@ -63,11 +63,11 @@
63
63
  --transition-standard: 0.25s ease-in-out;
64
64
  --transition-smooth: 0.35s ease;
65
65
  --transition-logo: 0.3s;
66
- --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
66
+ --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
67
67
  --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
68
68
  --font-family-display: var(--font-family-display-editorial);
69
- --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
70
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
69
+ --font-family-display-editorial: Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif;
70
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
71
71
  --font-family-brand: Futura, system-ui, sans-serif;
72
72
  --font-family-math: Noto Sans Math, math;
73
73
  --font-size-micro: 0.75rem;
@@ -144,6 +144,8 @@
144
144
  --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
145
145
  --color-surface-elevated: #f7f7f6;
146
146
  --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
147
+ --color-surface-figure-plate: #f7f7f6;
148
+ --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
147
149
  --color-surface-sunken: #faf2e3;
148
150
  --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
149
151
  --color-surface-navbar: #ededeb;
@@ -160,6 +162,8 @@
160
162
  --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
161
163
  --color-border-card: rgba(12, 10, 9, 0.60);
162
164
  --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
165
+ --color-border-figure-frame: #6a6a6a;
166
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
163
167
  --color-border-code: #d6d3d1;
164
168
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
165
169
  --color-content-primary: #14140f;
@@ -216,6 +220,8 @@
216
220
  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
217
221
  --color-surface-elevated: #1c1917;
218
222
  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
223
+ --color-surface-figure-plate: #dcdcda;
224
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
219
225
  --color-surface-sunken: #0c0a09;
220
226
  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
221
227
  --color-surface-navbar: #141410;
@@ -232,6 +238,8 @@
232
238
  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
233
239
  --color-border-card: rgba(253, 249, 242, 0.60);
234
240
  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
241
+ --color-border-figure-frame: #6a6a6a;
242
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
235
243
  --color-border-code: #292524;
236
244
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
237
245
  --color-content-primary: #fdf9f2;
@@ -289,6 +297,8 @@
289
297
  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
290
298
  --color-surface-elevated: #1c1917;
291
299
  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
300
+ --color-surface-figure-plate: #dcdcda;
301
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
292
302
  --color-surface-sunken: #0c0a09;
293
303
  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
294
304
  --color-surface-navbar: #141410;
@@ -305,6 +315,8 @@
305
315
  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
306
316
  --color-border-card: rgba(253, 249, 242, 0.60);
307
317
  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
318
+ --color-border-figure-frame: #6a6a6a;
319
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
308
320
  --color-border-code: #292524;
309
321
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
310
322
  --color-content-primary: #fdf9f2;
package/dist/tokens.dtcg.json CHANGED
@@ -25,6 +25,14 @@
25
25
  "$type": "color",
26
26
  "$description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
27
27
  },
28
+ "figure-plate": {
29
+ "$value": {
30
+ "light": "#f7f7f6",
31
+ "dark": "#dcdcda"
32
+ },
33
+ "$type": "color",
34
+ "$description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
35
+ },
28
36
  "sunken": {
29
37
  "$value": {
30
38
  "light": "#faf2e3",
@@ -91,6 +99,14 @@
91
99
  "$type": "color",
92
100
  "$description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
93
101
  },
102
+ "figure-frame": {
103
+ "$value": {
104
+ "light": "#6a6a6a",
105
+ "dark": "#6a6a6a"
106
+ },
107
+ "$type": "color",
108
+ "$description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
109
+ },
94
110
  "code": {
95
111
  "$value": {
96
112
  "light": "#d6d3d1",
@@ -497,9 +513,9 @@
497
513
  "font": {
498
514
  "family": {
499
515
  "sans": {
500
- "$value": "Noto Sans, Fira Sans, system-ui, sans-serif",
516
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
501
517
  "$type": "other",
502
- "$description": "Primary sans-serif font - body text"
518
+ "$description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
503
519
  },
504
520
  "mono": {
505
521
  "$value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
@@ -512,12 +528,12 @@
512
528
  "$description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
513
529
  },
514
530
  "display-editorial": {
515
- "$value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
531
+ "$value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
516
532
  "$type": "other",
517
533
  "$description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
518
534
  },
519
535
  "display-documentation": {
520
- "$value": "Noto Sans, system-ui, sans-serif",
536
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
521
537
  "$type": "other",
522
538
  "$description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
523
539
  },
package/dist/tokens.scss CHANGED
@@ -63,11 +63,11 @@
63
63
  --transition-standard: 0.25s ease-in-out;
64
64
  --transition-smooth: 0.35s ease;
65
65
  --transition-logo: 0.3s;
66
- --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
66
+ --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
67
67
  --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
68
68
  --font-family-display: var(--font-family-display-editorial);
69
- --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
70
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
69
+ --font-family-display-editorial: Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif;
70
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
71
71
  --font-family-brand: Futura, system-ui, sans-serif;
72
72
  --font-family-math: Noto Sans Math, math;
73
73
  --font-size-micro: 0.75rem;
@@ -144,6 +144,8 @@
144
144
  --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
145
145
  --color-surface-elevated: #f7f7f6;
146
146
  --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
147
+ --color-surface-figure-plate: #f7f7f6;
148
+ --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
147
149
  --color-surface-sunken: #faf2e3;
148
150
  --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
149
151
  --color-surface-navbar: #ededeb;
@@ -160,6 +162,8 @@
160
162
  --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
161
163
  --color-border-card: rgba(12, 10, 9, 0.60);
162
164
  --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
165
+ --color-border-figure-frame: #6a6a6a;
166
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
163
167
  --color-border-code: #d6d3d1;
164
168
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
165
169
  --color-content-primary: #14140f;
@@ -216,6 +220,8 @@
216
220
  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
217
221
  --color-surface-elevated: #1c1917;
218
222
  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
223
+ --color-surface-figure-plate: #dcdcda;
224
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
219
225
  --color-surface-sunken: #0c0a09;
220
226
  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
221
227
  --color-surface-navbar: #141410;
@@ -232,6 +238,8 @@
232
238
  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
233
239
  --color-border-card: rgba(253, 249, 242, 0.60);
234
240
  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
241
+ --color-border-figure-frame: #6a6a6a;
242
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
235
243
  --color-border-code: #292524;
236
244
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
237
245
  --color-content-primary: #fdf9f2;
@@ -289,6 +297,8 @@
289
297
  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
290
298
  --color-surface-elevated: #1c1917;
291
299
  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
300
+ --color-surface-figure-plate: #dcdcda;
301
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
292
302
  --color-surface-sunken: #0c0a09;
293
303
  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
294
304
  --color-surface-navbar: #141410;
@@ -305,6 +315,8 @@
305
315
  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
306
316
  --color-border-card: rgba(253, 249, 242, 0.60);
307
317
  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
318
+ --color-border-figure-frame: #6a6a6a;
319
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
308
320
  --color-border-code: #292524;
309
321
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
310
322
  --color-content-primary: #fdf9f2;
package/dist/tokens.studio.json CHANGED
@@ -14,6 +14,10 @@
14
14
  "value": "#f7f7f6",
15
15
  "type": "color"
16
16
  },
17
+ "figure-plate": {
18
+ "value": "#f7f7f6",
19
+ "type": "color"
20
+ },
17
21
  "sunken": {
18
22
  "value": "#faf2e3",
19
23
  "type": "color"
@@ -48,6 +52,10 @@
48
52
  "value": "rgba(12, 10, 9, 0.60)",
49
53
  "type": "color"
50
54
  },
55
+ "figure-frame": {
56
+ "value": "#6a6a6a",
57
+ "type": "color"
58
+ },
51
59
  "code": {
52
60
  "value": "#d6d3d1",
53
61
  "type": "color"
@@ -287,7 +295,7 @@
287
295
  "font": {
288
296
  "family": {
289
297
  "sans": {
290
- "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
298
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
291
299
  "type": "other"
292
300
  },
293
301
  "mono": {
@@ -299,11 +307,11 @@
299
307
  "type": "other"
300
308
  },
301
309
  "display-editorial": {
302
- "value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
310
+ "value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
303
311
  "type": "other"
304
312
  },
305
313
  "display-documentation": {
306
- "value": "Noto Sans, system-ui, sans-serif",
314
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
307
315
  "type": "other"
308
316
  },
309
317
  "brand": {
@@ -524,6 +532,10 @@
524
532
  "value": "#1c1917",
525
533
  "type": "color"
526
534
  },
535
+ "figure-plate": {
536
+ "value": "#dcdcda",
537
+ "type": "color"
538
+ },
527
539
  "sunken": {
528
540
  "value": "#0c0a09",
529
541
  "type": "color"
@@ -558,6 +570,10 @@
558
570
  "value": "rgba(253, 249, 242, 0.60)",
559
571
  "type": "color"
560
572
  },
573
+ "figure-frame": {
574
+ "value": "#6a6a6a",
575
+ "type": "color"
576
+ },
561
577
  "code": {
562
578
  "value": "#292524",
563
579
  "type": "color"
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -31,6 +31,16 @@
31
31
  },
32
32
  "$description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
33
33
  },
34
+ "figure-plate": {
35
+ "$value": "#f7f7f6",
36
+ "$type": "color",
37
+ "$extensions": {
38
+ "com.dataimago.theme": {
39
+ "dark": "#dcdcda"
40
+ }
41
+ },
42
+ "$description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
43
+ },
34
44
  "sunken": {
35
45
  "$value": "#faf2e3",
36
46
  "$type": "color",
@@ -113,6 +123,16 @@
113
123
  },
114
124
  "$description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
115
125
  },
126
+ "figure-frame": {
127
+ "$value": "#6a6a6a",
128
+ "$type": "color",
129
+ "$extensions": {
130
+ "com.dataimago.theme": {
131
+ "dark": "#6a6a6a"
132
+ }
133
+ },
134
+ "$description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
135
+ },
116
136
  "code": {
117
137
  "$value": "#d6d3d1",
118
138
  "$type": "color",
@@ -507,8 +527,8 @@
507
527
  "font": {
508
528
  "family": {
509
529
  "sans": {
510
- "$value": "Noto Sans, Fira Sans, system-ui, sans-serif",
511
- "$description": "Primary sans-serif font - body text"
530
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
531
+ "$description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
512
532
  },
513
533
  "mono": {
514
534
  "$value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
@@ -519,11 +539,11 @@
519
539
  "$description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
520
540
  },
521
541
  "display-editorial": {
522
- "$value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
542
+ "$value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
523
543
  "$description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
524
544
  },
525
545
  "display-documentation": {
526
- "$value": "Noto Sans, system-ui, sans-serif",
546
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
527
547
  "$description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
528
548
  },
529
549
  "brand": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens",
3
- "version": "0.1.0-alpha.26",
3
+ "version": "0.1.0-alpha.28",
4
4
  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/theme-colors-p3.json CHANGED
@@ -40,6 +40,19 @@
40
40
  },
41
41
  "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
42
42
  },
43
+ "figure-plate": {
44
+ "light": {
45
+ "srgb": "#f7f7f6",
46
+ "oklch": "oklch(97.59% 0.0013 106.42)",
47
+ "p3": "color(display-p3 0.9686 0.9686 0.9651)"
48
+ },
49
+ "dark": {
50
+ "srgb": "#dcdcda",
51
+ "oklch": "oklch(89.39% 0.0027 106.45)",
52
+ "p3": "color(display-p3 0.8627 0.8627 0.8556)"
53
+ },
54
+ "description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
55
+ },
43
56
  "sunken": {
44
57
  "light": {
45
58
  "srgb": "#faf2e3",
@@ -146,6 +159,19 @@
146
159
  },
147
160
  "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
148
161
  },
162
+ "figure-frame": {
163
+ "light": {
164
+ "srgb": "#6a6a6a",
165
+ "oklch": "oklch(52.43% 0 0)",
166
+ "p3": "color(display-p3 0.4157 0.4157 0.4157)"
167
+ },
168
+ "dark": {
169
+ "srgb": "#6a6a6a",
170
+ "oklch": "oklch(52.43% 0 0)",
171
+ "p3": "color(display-p3 0.4157 0.4157 0.4157)"
172
+ },
173
+ "description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
174
+ },
149
175
  "code": {
150
176
  "light": {
151
177
  "srgb": "#d6d3d1",
package/src/theme-colors.json CHANGED
@@ -16,6 +16,11 @@
16
16
  "dark": "#1c1917",
17
17
  "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
18
18
  },
19
+ "figure-plate": {
20
+ "light": "#f7f7f6",
21
+ "dark": "#dcdcda",
22
+ "description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
23
+ },
19
24
  "sunken": {
20
25
  "light": "#faf2e3",
21
26
  "dark": "#0c0a09",
@@ -58,6 +63,11 @@
58
63
  "dark": "rgba(253, 249, 242, 0.60)",
59
64
  "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
60
65
  },
66
+ "figure-frame": {
67
+ "light": "#6a6a6a",
68
+ "dark": "#6a6a6a",
69
+ "description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
70
+ },
61
71
  "code": {
62
72
  "light": "#d6d3d1",
63
73
  "dark": "#292524",
package/src/typography.json CHANGED
@@ -2,8 +2,8 @@
2
2
  "font": {
3
3
  "family": {
4
4
  "sans": {
5
- "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
6
- "description": "Primary sans-serif font - body text"
5
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
6
+ "description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
7
7
  },
8
8
  "mono": {
9
9
  "value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
@@ -14,11 +14,11 @@
14
14
  "description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
15
15
  },
16
16
  "display-editorial": {
17
- "value": "Josefin Sans, Noto Sans, system-ui, sans-serif",
17
+ "value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
18
18
  "description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
19
19
  },
20
20
  "display-documentation": {
21
- "value": "Noto Sans, system-ui, sans-serif",
21
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
22
22
  "description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
23
23
  },
24
24
  "brand": {