@dataimago/tokens 0.1.0-alpha.30 → 0.1.0-alpha.31

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 +20 -0
  2. package/dist/index.mjs +20 -0
  3. package/dist/tokens.css +30 -0
  4. package/dist/tokens.dtcg.json +32 -0
  5. package/dist/tokens.scss +30 -0
  6. package/dist/tokens.studio.json +32 -0
  7. package/dist/tokens.w3c.dtcg.json +40 -0
  8. package/package.json +1 -1
  9. package/src/effects.json +12 -0
  10. package/src/theme-colors-p3.json +52 -0
  11. package/src/theme-colors.json +20 -0
package/dist/index.cjs CHANGED
@@ -41,6 +41,16 @@ const tokens = {
41
41
  "light": "#f7f7f6",
42
42
  "dark": "#1c1917",
43
43
  "description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
44
+ },
45
+ "scrim": {
46
+ "light": "rgba(20, 20, 16, 0.85)",
47
+ "dark": "rgba(20, 20, 16, 0.85)",
48
+ "description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
49
+ },
50
+ "scrim-solid": {
51
+ "light": "rgba(20, 20, 16, 0.92)",
52
+ "dark": "rgba(20, 20, 16, 0.92)",
53
+ "description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
44
54
  }
45
55
  },
46
56
  "border": {
@@ -73,6 +83,11 @@ const tokens = {
73
83
  "light": "#d6d3d1",
74
84
  "dark": "#292524",
75
85
  "description": "Code block border"
86
+ },
87
+ "on-scrim-focus": {
88
+ "light": "#3498DB",
89
+ "dark": "#3498DB",
90
+ "description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
76
91
  }
77
92
  },
78
93
  "content": {
@@ -95,6 +110,11 @@ const tokens = {
95
110
  "light": "#fdf9f2",
96
111
  "dark": "#0c0a09",
97
112
  "description": "Inverse text — for contrasting backgrounds"
113
+ },
114
+ "on-scrim": {
115
+ "light": "#f7f7f6",
116
+ "dark": "#f7f7f6",
117
+ "description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
98
118
  }
99
119
  },
100
120
  "interactive": {
package/dist/index.mjs CHANGED
@@ -41,6 +41,16 @@ const tokens = {
41
41
  "light": "#f7f7f6",
42
42
  "dark": "#1c1917",
43
43
  "description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
44
+ },
45
+ "scrim": {
46
+ "light": "rgba(20, 20, 16, 0.85)",
47
+ "dark": "rgba(20, 20, 16, 0.85)",
48
+ "description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
49
+ },
50
+ "scrim-solid": {
51
+ "light": "rgba(20, 20, 16, 0.92)",
52
+ "dark": "rgba(20, 20, 16, 0.92)",
53
+ "description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
44
54
  }
45
55
  },
46
56
  "border": {
@@ -73,6 +83,11 @@ const tokens = {
73
83
  "light": "#d6d3d1",
74
84
  "dark": "#292524",
75
85
  "description": "Code block border"
86
+ },
87
+ "on-scrim-focus": {
88
+ "light": "#3498DB",
89
+ "dark": "#3498DB",
90
+ "description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
76
91
  }
77
92
  },
78
93
  "content": {
@@ -95,6 +110,11 @@ const tokens = {
95
110
  "light": "#fdf9f2",
96
111
  "dark": "#0c0a09",
97
112
  "description": "Inverse text — for contrasting backgrounds"
113
+ },
114
+ "on-scrim": {
115
+ "light": "#f7f7f6",
116
+ "dark": "#f7f7f6",
117
+ "description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
98
118
  }
99
119
  },
100
120
  "interactive": {
package/dist/tokens.css CHANGED
@@ -154,6 +154,10 @@
154
154
  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
155
155
  --color-surface-code: #f7f7f6;
156
156
  --color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
157
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
158
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
159
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
160
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
157
161
  --color-border-subtle: rgba(12, 10, 9, 0.45);
158
162
  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
159
163
  --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -166,6 +170,8 @@
166
170
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
167
171
  --color-border-code: #d6d3d1;
168
172
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
173
+ --color-border-on-scrim-focus: #3498db;
174
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
169
175
  --color-content-primary: #14140f;
170
176
  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
171
177
  --color-content-secondary: #6a6a6a;
@@ -174,6 +180,8 @@
174
180
  --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
175
181
  --color-content-inverse: #fdf9f2;
176
182
  --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
183
+ --color-content-on-scrim: #f7f7f6;
184
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
177
185
  --color-interactive-primary: #434739;
178
186
  --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
179
187
  --color-interactive-hover: #363a2e;
@@ -209,6 +217,8 @@
209
217
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
210
218
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
211
219
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
220
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
221
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
212
222
  --border-subtle: rgba(20, 20, 16, 0.47);
213
223
  --border-moderate: rgba(20, 20, 16, 0.63);
214
224
  --border-focus: #3498DB;
@@ -238,6 +248,10 @@
238
248
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
239
249
  --color-surface-code: #1c1917;
240
250
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
251
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
252
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
253
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
254
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
241
255
  --color-border-subtle: rgba(253, 249, 242, 0.45);
242
256
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
243
257
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -250,6 +264,8 @@
250
264
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
251
265
  --color-border-code: #292524;
252
266
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
267
+ --color-border-on-scrim-focus: #3498db;
268
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
253
269
  --color-content-primary: #fdf9f2;
254
270
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
255
271
  --color-content-secondary: #a8a29e;
@@ -258,6 +274,8 @@
258
274
  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
259
275
  --color-content-inverse: #0c0a09;
260
276
  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
277
+ --color-content-on-scrim: #f7f7f6;
278
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
261
279
  --color-interactive-primary: #98a384;
262
280
  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
263
281
  --color-interactive-hover: #7e8a6b;
@@ -293,6 +311,8 @@
293
311
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
294
312
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
295
313
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
314
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
315
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
296
316
  --border-subtle: rgba(237, 237, 235, 0.47);
297
317
  --border-moderate: rgba(237, 237, 235, 0.63);
298
318
  --border-focus: #4FC3F7;
@@ -323,6 +343,10 @@
323
343
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
324
344
  --color-surface-code: #1c1917;
325
345
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
346
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
347
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
348
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
349
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
326
350
  --color-border-subtle: rgba(253, 249, 242, 0.45);
327
351
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
328
352
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -335,6 +359,8 @@
335
359
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
336
360
  --color-border-code: #292524;
337
361
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
362
+ --color-border-on-scrim-focus: #3498db;
363
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
338
364
  --color-content-primary: #fdf9f2;
339
365
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
340
366
  --color-content-secondary: #a8a29e;
@@ -343,6 +369,8 @@
343
369
  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
344
370
  --color-content-inverse: #0c0a09;
345
371
  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
372
+ --color-content-on-scrim: #f7f7f6;
373
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
346
374
  --color-interactive-primary: #98a384;
347
375
  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
348
376
  --color-interactive-hover: #7e8a6b;
@@ -378,6 +406,8 @@
378
406
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
379
407
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
380
408
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
409
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
410
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
381
411
  --border-subtle: rgba(237, 237, 235, 0.47);
382
412
  --border-moderate: rgba(237, 237, 235, 0.63);
383
413
  --border-focus: #4FC3F7;
package/dist/tokens.dtcg.json CHANGED
@@ -64,6 +64,22 @@
64
64
  },
65
65
  "$type": "color",
66
66
  "$description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
67
+ },
68
+ "scrim": {
69
+ "$value": {
70
+ "light": "rgba(20, 20, 16, 0.85)",
71
+ "dark": "rgba(20, 20, 16, 0.85)"
72
+ },
73
+ "$type": "color",
74
+ "$description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
75
+ },
76
+ "scrim-solid": {
77
+ "$value": {
78
+ "light": "rgba(20, 20, 16, 0.92)",
79
+ "dark": "rgba(20, 20, 16, 0.92)"
80
+ },
81
+ "$type": "color",
82
+ "$description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
67
83
  }
68
84
  },
69
85
  "border": {
@@ -114,6 +130,14 @@
114
130
  },
115
131
  "$type": "color",
116
132
  "$description": "Code block border"
133
+ },
134
+ "on-scrim-focus": {
135
+ "$value": {
136
+ "light": "#3498DB",
137
+ "dark": "#3498DB"
138
+ },
139
+ "$type": "color",
140
+ "$description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
117
141
  }
118
142
  },
119
143
  "content": {
@@ -148,6 +172,14 @@
148
172
  },
149
173
  "$type": "color",
150
174
  "$description": "Inverse text — for contrasting backgrounds"
175
+ },
176
+ "on-scrim": {
177
+ "$value": {
178
+ "light": "#f7f7f6",
179
+ "dark": "#f7f7f6"
180
+ },
181
+ "$type": "color",
182
+ "$description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
151
183
  }
152
184
  },
153
185
  "interactive": {
package/dist/tokens.scss CHANGED
@@ -154,6 +154,10 @@
154
154
  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
155
155
  --color-surface-code: #f7f7f6;
156
156
  --color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
157
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
158
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
159
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
160
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
157
161
  --color-border-subtle: rgba(12, 10, 9, 0.45);
158
162
  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
159
163
  --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -166,6 +170,8 @@
166
170
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
167
171
  --color-border-code: #d6d3d1;
168
172
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
173
+ --color-border-on-scrim-focus: #3498db;
174
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
169
175
  --color-content-primary: #14140f;
170
176
  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
171
177
  --color-content-secondary: #6a6a6a;
@@ -174,6 +180,8 @@
174
180
  --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
175
181
  --color-content-inverse: #fdf9f2;
176
182
  --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
183
+ --color-content-on-scrim: #f7f7f6;
184
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
177
185
  --color-interactive-primary: #434739;
178
186
  --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
179
187
  --color-interactive-hover: #363a2e;
@@ -209,6 +217,8 @@
209
217
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
210
218
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
211
219
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
220
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
221
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
212
222
  --border-subtle: rgba(20, 20, 16, 0.47);
213
223
  --border-moderate: rgba(20, 20, 16, 0.63);
214
224
  --border-focus: #3498DB;
@@ -238,6 +248,10 @@
238
248
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
239
249
  --color-surface-code: #1c1917;
240
250
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
251
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
252
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
253
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
254
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
241
255
  --color-border-subtle: rgba(253, 249, 242, 0.45);
242
256
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
243
257
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -250,6 +264,8 @@
250
264
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
251
265
  --color-border-code: #292524;
252
266
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
267
+ --color-border-on-scrim-focus: #3498db;
268
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
253
269
  --color-content-primary: #fdf9f2;
254
270
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
255
271
  --color-content-secondary: #a8a29e;
@@ -258,6 +274,8 @@
258
274
  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
259
275
  --color-content-inverse: #0c0a09;
260
276
  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
277
+ --color-content-on-scrim: #f7f7f6;
278
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
261
279
  --color-interactive-primary: #98a384;
262
280
  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
263
281
  --color-interactive-hover: #7e8a6b;
@@ -293,6 +311,8 @@
293
311
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
294
312
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
295
313
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
314
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
315
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
296
316
  --border-subtle: rgba(237, 237, 235, 0.47);
297
317
  --border-moderate: rgba(237, 237, 235, 0.63);
298
318
  --border-focus: #4FC3F7;
@@ -323,6 +343,10 @@
323
343
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
324
344
  --color-surface-code: #1c1917;
325
345
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
346
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
347
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
348
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
349
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
326
350
  --color-border-subtle: rgba(253, 249, 242, 0.45);
327
351
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
328
352
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -335,6 +359,8 @@
335
359
  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
336
360
  --color-border-code: #292524;
337
361
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
362
+ --color-border-on-scrim-focus: #3498db;
363
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
338
364
  --color-content-primary: #fdf9f2;
339
365
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
340
366
  --color-content-secondary: #a8a29e;
@@ -343,6 +369,8 @@
343
369
  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
344
370
  --color-content-inverse: #0c0a09;
345
371
  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
372
+ --color-content-on-scrim: #f7f7f6;
373
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
346
374
  --color-interactive-primary: #98a384;
347
375
  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
348
376
  --color-interactive-hover: #7e8a6b;
@@ -378,6 +406,8 @@
378
406
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
379
407
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
380
408
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
409
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
410
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
381
411
  --border-subtle: rgba(237, 237, 235, 0.47);
382
412
  --border-moderate: rgba(237, 237, 235, 0.63);
383
413
  --border-focus: #4FC3F7;
package/dist/tokens.studio.json CHANGED
@@ -33,6 +33,14 @@
33
33
  "code": {
34
34
  "value": "#f7f7f6",
35
35
  "type": "color"
36
+ },
37
+ "scrim": {
38
+ "value": "rgba(20, 20, 16, 0.85)",
39
+ "type": "color"
40
+ },
41
+ "scrim-solid": {
42
+ "value": "rgba(20, 20, 16, 0.92)",
43
+ "type": "color"
36
44
  }
37
45
  },
38
46
  "border": {
@@ -59,6 +67,10 @@
59
67
  "code": {
60
68
  "value": "#d6d3d1",
61
69
  "type": "color"
70
+ },
71
+ "on-scrim-focus": {
72
+ "value": "#3498DB",
73
+ "type": "color"
62
74
  }
63
75
  },
64
76
  "content": {
@@ -77,6 +89,10 @@
77
89
  "inverse": {
78
90
  "value": "#fdf9f2",
79
91
  "type": "color"
92
+ },
93
+ "on-scrim": {
94
+ "value": "#f7f7f6",
95
+ "type": "color"
80
96
  }
81
97
  },
82
98
  "interactive": {
@@ -569,6 +585,14 @@
569
585
  "code": {
570
586
  "value": "#1c1917",
571
587
  "type": "color"
588
+ },
589
+ "scrim": {
590
+ "value": "rgba(20, 20, 16, 0.85)",
591
+ "type": "color"
592
+ },
593
+ "scrim-solid": {
594
+ "value": "rgba(20, 20, 16, 0.92)",
595
+ "type": "color"
572
596
  }
573
597
  },
574
598
  "border": {
@@ -595,6 +619,10 @@
595
619
  "code": {
596
620
  "value": "#292524",
597
621
  "type": "color"
622
+ },
623
+ "on-scrim-focus": {
624
+ "value": "#3498DB",
625
+ "type": "color"
598
626
  }
599
627
  },
600
628
  "content": {
@@ -613,6 +641,10 @@
613
641
  "inverse": {
614
642
  "value": "#0c0a09",
615
643
  "type": "color"
644
+ },
645
+ "on-scrim": {
646
+ "value": "#f7f7f6",
647
+ "type": "color"
616
648
  }
617
649
  },
618
650
  "interactive": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -80,6 +80,26 @@
80
80
  }
81
81
  },
82
82
  "$description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
83
+ },
84
+ "scrim": {
85
+ "$value": "rgba(20, 20, 16, 0.85)",
86
+ "$type": "color",
87
+ "$extensions": {
88
+ "com.dataimago.theme": {
89
+ "dark": "rgba(20, 20, 16, 0.85)"
90
+ }
91
+ },
92
+ "$description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
93
+ },
94
+ "scrim-solid": {
95
+ "$value": "rgba(20, 20, 16, 0.92)",
96
+ "$type": "color",
97
+ "$extensions": {
98
+ "com.dataimago.theme": {
99
+ "dark": "rgba(20, 20, 16, 0.92)"
100
+ }
101
+ },
102
+ "$description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
83
103
  }
84
104
  },
85
105
  "border": {
@@ -142,6 +162,16 @@
142
162
  }
143
163
  },
144
164
  "$description": "Code block border"
165
+ },
166
+ "on-scrim-focus": {
167
+ "$value": "#3498DB",
168
+ "$type": "color",
169
+ "$extensions": {
170
+ "com.dataimago.theme": {
171
+ "dark": "#3498DB"
172
+ }
173
+ },
174
+ "$description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
145
175
  }
146
176
  },
147
177
  "content": {
@@ -184,6 +214,16 @@
184
214
  }
185
215
  },
186
216
  "$description": "Inverse text — for contrasting backgrounds"
217
+ },
218
+ "on-scrim": {
219
+ "$value": "#f7f7f6",
220
+ "$type": "color",
221
+ "$extensions": {
222
+ "com.dataimago.theme": {
223
+ "dark": "#f7f7f6"
224
+ }
225
+ },
226
+ "$description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
187
227
  }
188
228
  },
189
229
  "interactive": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens",
3
- "version": "0.1.0-alpha.30",
3
+ "version": "0.1.0-alpha.31",
4
4
  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/effects.json CHANGED
@@ -14,6 +14,18 @@
14
14
  "light": "0 10px 15px -3px rgb(20 20 16 / 0.1)",
15
15
  "dark": "0 10px 15px -3px rgb(237 237 235 / 0.4)",
16
16
  "description": "Strong elevation - modals, floating elements"
17
+ },
18
+ "figure-plate": {
19
+ "hover": {
20
+ "light": "0 10px 15px -3px rgb(20 20 16 / 0.1)",
21
+ "dark": "0 4px 12px rgb(0 0 0 / 0.5)",
22
+ "description": "Figure plate on hover. Light mode is the prominent shadow. Dark mode needs its own value: the plate stays light in dark mode, and prominent's light-ink glow (rgb(237 237 235 / 0.4)) would haze the dark page round a light plate, so a plain black shadow is used. Not mode-invariant."
23
+ },
24
+ "active": {
25
+ "light": "0 4px 6px -1px rgb(20 20 16 / 0.1)",
26
+ "dark": "0 2px 8px rgb(0 0 0 / 0.35)",
27
+ "description": "Figure plate while pressed. Light mode is the moderate shadow; dark mode is a plain black shadow for the same reason as figure-plate.hover. Not mode-invariant."
28
+ }
17
29
  }
18
30
  },
19
31
  "border": {
package/src/theme-colors-p3.json CHANGED
@@ -104,6 +104,32 @@
104
104
  "p3": "color(display-p3 0.1078 0.0985 0.0911)"
105
105
  },
106
106
  "description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
107
+ },
108
+ "scrim": {
109
+ "light": {
110
+ "srgb": "rgba(20, 20, 16, 0.85)",
111
+ "oklch": "oklch(18.97% 0.0078 107.13 / 0.85)",
112
+ "p3": "color(display-p3 0.0784 0.0784 0.0643 / 0.85)"
113
+ },
114
+ "dark": {
115
+ "srgb": "rgba(20, 20, 16, 0.85)",
116
+ "oklch": "oklch(18.97% 0.0078 107.13 / 0.85)",
117
+ "p3": "color(display-p3 0.0784 0.0784 0.0643 / 0.85)"
118
+ },
119
+ "description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
120
+ },
121
+ "scrim-solid": {
122
+ "light": {
123
+ "srgb": "rgba(20, 20, 16, 0.92)",
124
+ "oklch": "oklch(18.97% 0.0078 107.13 / 0.92)",
125
+ "p3": "color(display-p3 0.0784 0.0784 0.0643 / 0.92)"
126
+ },
127
+ "dark": {
128
+ "srgb": "rgba(20, 20, 16, 0.92)",
129
+ "oklch": "oklch(18.97% 0.0078 107.13 / 0.92)",
130
+ "p3": "color(display-p3 0.0784 0.0784 0.0643 / 0.92)"
131
+ },
132
+ "description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
107
133
  }
108
134
  },
109
135
  "border": {
@@ -184,6 +210,19 @@
184
210
  "p3": "color(display-p3 0.1581 0.1456 0.1418)"
185
211
  },
186
212
  "description": "Code block border"
213
+ },
214
+ "on-scrim-focus": {
215
+ "light": {
216
+ "srgb": "#3498db",
217
+ "oklch": "oklch(65.31% 0.1347 242.69)",
218
+ "p3": "color(display-p3 0.3208 0.588 0.8369)"
219
+ },
220
+ "dark": {
221
+ "srgb": "#3498db",
222
+ "oklch": "oklch(65.31% 0.1347 242.69)",
223
+ "p3": "color(display-p3 0.3208 0.588 0.8369)"
224
+ },
225
+ "description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
187
226
  }
188
227
  },
189
228
  "content": {
@@ -238,6 +277,19 @@
238
277
  "p3": "color(display-p3 0.0457 0.0395 0.0358)"
239
278
  },
240
279
  "description": "Inverse text — for contrasting backgrounds"
280
+ },
281
+ "on-scrim": {
282
+ "light": {
283
+ "srgb": "#f7f7f6",
284
+ "oklch": "oklch(97.59% 0.0013 106.42)",
285
+ "p3": "color(display-p3 0.9686 0.9686 0.9651)"
286
+ },
287
+ "dark": {
288
+ "srgb": "#f7f7f6",
289
+ "oklch": "oklch(97.59% 0.0013 106.42)",
290
+ "p3": "color(display-p3 0.9686 0.9686 0.9651)"
291
+ },
292
+ "description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
241
293
  }
242
294
  },
243
295
  "interactive": {
package/src/theme-colors.json CHANGED
@@ -40,6 +40,16 @@
40
40
  "light": "#f7f7f6",
41
41
  "dark": "#1c1917",
42
42
  "description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
43
+ },
44
+ "scrim": {
45
+ "light": "rgba(20, 20, 16, 0.85)",
46
+ "dark": "rgba(20, 20, 16, 0.85)",
47
+ "description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03)."
48
+ },
49
+ "scrim-solid": {
50
+ "light": "rgba(20, 20, 16, 0.92)",
51
+ "dark": "rgba(20, 20, 16, 0.92)",
52
+ "description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
43
53
  }
44
54
  },
45
55
  "border": {
@@ -72,6 +82,11 @@
72
82
  "light": "#d6d3d1",
73
83
  "dark": "#292524",
74
84
  "description": "Code block border"
85
+ },
86
+ "on-scrim-focus": {
87
+ "light": "#3498DB",
88
+ "dark": "#3498DB",
89
+ "description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
75
90
  }
76
91
  },
77
92
  "content": {
@@ -94,6 +109,11 @@
94
109
  "light": "#fdf9f2",
95
110
  "dark": "#0c0a09",
96
111
  "description": "Inverse text — for contrasting backgrounds"
112
+ },
113
+ "on-scrim": {
114
+ "light": "#f7f7f6",
115
+ "dark": "#f7f7f6",
116
+ "description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
97
117
  }
98
118
  },
99
119
  "interactive": {