@dataimago/tokens 0.1.0-alpha.32 → 0.1.0-alpha.33

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 (10) hide show
  1. package/dist/index.cjs +12 -2
  2. package/dist/index.mjs +12 -2
  3. package/dist/tokens.css +12 -0
  4. package/dist/tokens.dtcg.json +18 -2
  5. package/dist/tokens.scss +12 -0
  6. package/dist/tokens.studio.json +16 -0
  7. package/dist/tokens.w3c.dtcg.json +22 -2
  8. package/package.json +1 -1
  9. package/src/theme-colors-p3.json +28 -2
  10. package/src/theme-colors.json +12 -2
package/dist/index.cjs CHANGED
@@ -45,7 +45,7 @@ const tokens = {
45
45
  "scrim": {
46
46
  "light": "rgba(20, 20, 16, 0.85)",
47
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
49
49
  },
50
50
  "scrim-solid": {
51
51
  "light": "rgba(20, 20, 16, 0.92)",
@@ -55,12 +55,17 @@ const tokens = {
55
55
  "print": {
56
56
  "light": "#f7f7f6",
57
57
  "dark": "#f7f7f6",
58
- "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
58
+ "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
59
59
  },
60
60
  "play-disc": {
61
61
  "light": "rgba(247, 247, 246, 0.92)",
62
62
  "dark": "rgba(247, 247, 246, 0.92)",
63
63
  "description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
64
+ },
65
+ "media": {
66
+ "light": "#000000",
67
+ "dark": "#000000",
68
+ "description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
64
69
  }
65
70
  },
66
71
  "border": {
@@ -98,6 +103,11 @@ const tokens = {
98
103
  "light": "#3498DB",
99
104
  "dark": "#3498DB",
100
105
  "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."
106
+ },
107
+ "print": {
108
+ "light": "rgba(12, 10, 9, 0.45)",
109
+ "dark": "rgba(12, 10, 9, 0.45)",
110
+ "description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
101
111
  }
102
112
  },
103
113
  "content": {
package/dist/index.mjs CHANGED
@@ -45,7 +45,7 @@ const tokens = {
45
45
  "scrim": {
46
46
  "light": "rgba(20, 20, 16, 0.85)",
47
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
49
49
  },
50
50
  "scrim-solid": {
51
51
  "light": "rgba(20, 20, 16, 0.92)",
@@ -55,12 +55,17 @@ const tokens = {
55
55
  "print": {
56
56
  "light": "#f7f7f6",
57
57
  "dark": "#f7f7f6",
58
- "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
58
+ "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
59
59
  },
60
60
  "play-disc": {
61
61
  "light": "rgba(247, 247, 246, 0.92)",
62
62
  "dark": "rgba(247, 247, 246, 0.92)",
63
63
  "description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
64
+ },
65
+ "media": {
66
+ "light": "#000000",
67
+ "dark": "#000000",
68
+ "description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
64
69
  }
65
70
  },
66
71
  "border": {
@@ -98,6 +103,11 @@ const tokens = {
98
103
  "light": "#3498DB",
99
104
  "dark": "#3498DB",
100
105
  "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."
106
+ },
107
+ "print": {
108
+ "light": "rgba(12, 10, 9, 0.45)",
109
+ "dark": "rgba(12, 10, 9, 0.45)",
110
+ "description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
101
111
  }
102
112
  },
103
113
  "content": {
package/dist/tokens.css CHANGED
@@ -172,6 +172,8 @@
172
172
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
173
173
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
174
174
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
175
+ --color-surface-media: #000000;
176
+ --color-surface-media: color(display-p3 0 0 0);
175
177
  --color-border-subtle: rgba(12, 10, 9, 0.45);
176
178
  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
177
179
  --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -186,6 +188,8 @@
186
188
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
187
189
  --color-border-on-scrim-focus: #3498db;
188
190
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
191
+ --color-border-print: rgba(12, 10, 9, 0.45);
192
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
189
193
  --color-content-primary: #14140f;
190
194
  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
191
195
  --color-content-secondary: #6a6a6a;
@@ -277,6 +281,8 @@
277
281
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
278
282
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
279
283
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
284
+ --color-surface-media: #000000;
285
+ --color-surface-media: color(display-p3 0 0 0);
280
286
  --color-border-subtle: rgba(253, 249, 242, 0.45);
281
287
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
282
288
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -291,6 +297,8 @@
291
297
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
292
298
  --color-border-on-scrim-focus: #3498db;
293
299
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
300
+ --color-border-print: rgba(12, 10, 9, 0.45);
301
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
294
302
  --color-content-primary: #fdf9f2;
295
303
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
296
304
  --color-content-secondary: #a8a29e;
@@ -383,6 +391,8 @@
383
391
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
384
392
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
385
393
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
394
+ --color-surface-media: #000000;
395
+ --color-surface-media: color(display-p3 0 0 0);
386
396
  --color-border-subtle: rgba(253, 249, 242, 0.45);
387
397
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
388
398
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -397,6 +407,8 @@
397
407
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
398
408
  --color-border-on-scrim-focus: #3498db;
399
409
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
410
+ --color-border-print: rgba(12, 10, 9, 0.45);
411
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
400
412
  --color-content-primary: #fdf9f2;
401
413
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
402
414
  --color-content-secondary: #a8a29e;
package/dist/tokens.dtcg.json CHANGED
@@ -71,7 +71,7 @@
71
71
  "dark": "rgba(20, 20, 16, 0.85)"
72
72
  },
73
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
75
75
  },
76
76
  "scrim-solid": {
77
77
  "$value": {
@@ -87,7 +87,7 @@
87
87
  "dark": "#f7f7f6"
88
88
  },
89
89
  "$type": "color",
90
- "$description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
90
+ "$description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
91
91
  },
92
92
  "play-disc": {
93
93
  "$value": {
@@ -96,6 +96,14 @@
96
96
  },
97
97
  "$type": "color",
98
98
  "$description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
99
+ },
100
+ "media": {
101
+ "$value": {
102
+ "light": "#000000",
103
+ "dark": "#000000"
104
+ },
105
+ "$type": "color",
106
+ "$description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
99
107
  }
100
108
  },
101
109
  "border": {
@@ -154,6 +162,14 @@
154
162
  },
155
163
  "$type": "color",
156
164
  "$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."
165
+ },
166
+ "print": {
167
+ "$value": {
168
+ "light": "rgba(12, 10, 9, 0.45)",
169
+ "dark": "rgba(12, 10, 9, 0.45)"
170
+ },
171
+ "$type": "color",
172
+ "$description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
157
173
  }
158
174
  },
159
175
  "content": {
package/dist/tokens.scss CHANGED
@@ -172,6 +172,8 @@
172
172
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
173
173
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
174
174
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
175
+ --color-surface-media: #000000;
176
+ --color-surface-media: color(display-p3 0 0 0);
175
177
  --color-border-subtle: rgba(12, 10, 9, 0.45);
176
178
  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
177
179
  --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -186,6 +188,8 @@
186
188
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
187
189
  --color-border-on-scrim-focus: #3498db;
188
190
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
191
+ --color-border-print: rgba(12, 10, 9, 0.45);
192
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
189
193
  --color-content-primary: #14140f;
190
194
  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
191
195
  --color-content-secondary: #6a6a6a;
@@ -277,6 +281,8 @@
277
281
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
278
282
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
279
283
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
284
+ --color-surface-media: #000000;
285
+ --color-surface-media: color(display-p3 0 0 0);
280
286
  --color-border-subtle: rgba(253, 249, 242, 0.45);
281
287
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
282
288
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -291,6 +297,8 @@
291
297
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
292
298
  --color-border-on-scrim-focus: #3498db;
293
299
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
300
+ --color-border-print: rgba(12, 10, 9, 0.45);
301
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
294
302
  --color-content-primary: #fdf9f2;
295
303
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
296
304
  --color-content-secondary: #a8a29e;
@@ -383,6 +391,8 @@
383
391
  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
384
392
  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
385
393
  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
394
+ --color-surface-media: #000000;
395
+ --color-surface-media: color(display-p3 0 0 0);
386
396
  --color-border-subtle: rgba(253, 249, 242, 0.45);
387
397
  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
388
398
  --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -397,6 +407,8 @@
397
407
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
398
408
  --color-border-on-scrim-focus: #3498db;
399
409
  --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
410
+ --color-border-print: rgba(12, 10, 9, 0.45);
411
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
400
412
  --color-content-primary: #fdf9f2;
401
413
  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
402
414
  --color-content-secondary: #a8a29e;
package/dist/tokens.studio.json CHANGED
@@ -49,6 +49,10 @@
49
49
  "play-disc": {
50
50
  "value": "rgba(247, 247, 246, 0.92)",
51
51
  "type": "color"
52
+ },
53
+ "media": {
54
+ "value": "#000000",
55
+ "type": "color"
52
56
  }
53
57
  },
54
58
  "border": {
@@ -79,6 +83,10 @@
79
83
  "on-scrim-focus": {
80
84
  "value": "#3498DB",
81
85
  "type": "color"
86
+ },
87
+ "print": {
88
+ "value": "rgba(12, 10, 9, 0.45)",
89
+ "type": "color"
82
90
  }
83
91
  },
84
92
  "content": {
@@ -659,6 +667,10 @@
659
667
  "play-disc": {
660
668
  "value": "rgba(247, 247, 246, 0.92)",
661
669
  "type": "color"
670
+ },
671
+ "media": {
672
+ "value": "#000000",
673
+ "type": "color"
662
674
  }
663
675
  },
664
676
  "border": {
@@ -689,6 +701,10 @@
689
701
  "on-scrim-focus": {
690
702
  "value": "#3498DB",
691
703
  "type": "color"
704
+ },
705
+ "print": {
706
+ "value": "rgba(12, 10, 9, 0.45)",
707
+ "type": "color"
692
708
  }
693
709
  },
694
710
  "content": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -89,7 +89,7 @@
89
89
  "dark": "rgba(20, 20, 16, 0.85)"
90
90
  }
91
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
93
93
  },
94
94
  "scrim-solid": {
95
95
  "$value": "rgba(20, 20, 16, 0.92)",
@@ -109,7 +109,7 @@
109
109
  "dark": "#f7f7f6"
110
110
  }
111
111
  },
112
- "$description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
112
+ "$description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
113
113
  },
114
114
  "play-disc": {
115
115
  "$value": "rgba(247, 247, 246, 0.92)",
@@ -120,6 +120,16 @@
120
120
  }
121
121
  },
122
122
  "$description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
123
+ },
124
+ "media": {
125
+ "$value": "#000000",
126
+ "$type": "color",
127
+ "$extensions": {
128
+ "com.dataimago.theme": {
129
+ "dark": "#000000"
130
+ }
131
+ },
132
+ "$description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
123
133
  }
124
134
  },
125
135
  "border": {
@@ -192,6 +202,16 @@
192
202
  }
193
203
  },
194
204
  "$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."
205
+ },
206
+ "print": {
207
+ "$value": "rgba(12, 10, 9, 0.45)",
208
+ "$type": "color",
209
+ "$extensions": {
210
+ "com.dataimago.theme": {
211
+ "dark": "rgba(12, 10, 9, 0.45)"
212
+ }
213
+ },
214
+ "$description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
195
215
  }
196
216
  },
197
217
  "content": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens",
3
- "version": "0.1.0-alpha.32",
3
+ "version": "0.1.0-alpha.33",
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
@@ -116,7 +116,7 @@
116
116
  "oklch": "oklch(18.97% 0.0078 107.13 / 0.85)",
117
117
  "p3": "color(display-p3 0.0784 0.0784 0.0643 / 0.85)"
118
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
120
120
  },
121
121
  "scrim-solid": {
122
122
  "light": {
@@ -142,7 +142,7 @@
142
142
  "oklch": "oklch(97.59% 0.0013 106.42)",
143
143
  "p3": "color(display-p3 0.9686 0.9686 0.9651)"
144
144
  },
145
- "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
145
+ "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
146
146
  },
147
147
  "play-disc": {
148
148
  "light": {
@@ -156,6 +156,19 @@
156
156
  "p3": "color(display-p3 0.9686 0.9686 0.9651 / 0.92)"
157
157
  },
158
158
  "description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
159
+ },
160
+ "media": {
161
+ "light": {
162
+ "srgb": "#000000",
163
+ "oklch": "oklch(0% 0 0)",
164
+ "p3": "color(display-p3 0 0 0)"
165
+ },
166
+ "dark": {
167
+ "srgb": "#000000",
168
+ "oklch": "oklch(0% 0 0)",
169
+ "p3": "color(display-p3 0 0 0)"
170
+ },
171
+ "description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
159
172
  }
160
173
  },
161
174
  "border": {
@@ -249,6 +262,19 @@
249
262
  "p3": "color(display-p3 0.3208 0.588 0.8369)"
250
263
  },
251
264
  "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."
265
+ },
266
+ "print": {
267
+ "light": {
268
+ "srgb": "rgba(12, 10, 9, 0.45)",
269
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
270
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.45)"
271
+ },
272
+ "dark": {
273
+ "srgb": "rgba(12, 10, 9, 0.45)",
274
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
275
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.45)"
276
+ },
277
+ "description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
252
278
  }
253
279
  },
254
280
  "content": {
package/src/theme-colors.json CHANGED
@@ -44,7 +44,7 @@
44
44
  "scrim": {
45
45
  "light": "rgba(20, 20, 16, 0.85)",
46
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)."
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). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
48
48
  },
49
49
  "scrim-solid": {
50
50
  "light": "rgba(20, 20, 16, 0.92)",
@@ -54,12 +54,17 @@
54
54
  "print": {
55
55
  "light": "#f7f7f6",
56
56
  "dark": "#f7f7f6",
57
- "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs."
57
+ "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
58
58
  },
59
59
  "play-disc": {
60
60
  "light": "rgba(247, 247, 246, 0.92)",
61
61
  "dark": "rgba(247, 247, 246, 0.92)",
62
62
  "description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
63
+ },
64
+ "media": {
65
+ "light": "#000000",
66
+ "dark": "#000000",
67
+ "description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
63
68
  }
64
69
  },
65
70
  "border": {
@@ -97,6 +102,11 @@
97
102
  "light": "#3498DB",
98
103
  "dark": "#3498DB",
99
104
  "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."
105
+ },
106
+ "print": {
107
+ "light": "rgba(12, 10, 9, 0.45)",
108
+ "dark": "rgba(12, 10, 9, 0.45)",
109
+ "description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
100
110
  }
101
111
  },
102
112
  "content": {