@dataimago/tokens 0.1.0-alpha.26 → 0.1.0-alpha.27
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/dist/index.cjs +12 -2
- package/dist/index.mjs +12 -2
- package/dist/tokens.css +13 -1
- package/dist/tokens.dtcg.json +18 -2
- package/dist/tokens.scss +13 -1
- package/dist/tokens.studio.json +17 -1
- package/dist/tokens.w3c.dtcg.json +22 -2
- package/package.json +1 -1
- package/src/theme-colors-p3.json +26 -0
- package/src/theme-colors.json +10 -0
- package/src/typography.json +2 -2
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,
|
|
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",
|
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,
|
|
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",
|
package/dist/tokens.css
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
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,
|
|
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
69
|
--font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
|
|
@@ -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,
|
|
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",
|
package/dist/tokens.scss
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
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,
|
|
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
69
|
--font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
|
|
@@ -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,
|
|
298
|
+
"value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
|
|
291
299
|
"type": "other"
|
|
292
300
|
},
|
|
293
301
|
"mono": {
|
|
@@ -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"
|
|
@@ -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,
|
|
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",
|
package/package.json
CHANGED
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,
|
|
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",
|