@dataimago/tokens 0.1.0-alpha.30 → 0.1.0-alpha.32
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 +88 -0
- package/dist/index.mjs +88 -0
- package/dist/tokens.css +73 -0
- package/dist/tokens.dtcg.json +112 -0
- package/dist/tokens.scss +73 -0
- package/dist/tokens.studio.json +108 -0
- package/dist/tokens.w3c.dtcg.json +141 -0
- package/package.json +1 -1
- package/src/dataviz.json +7 -0
- package/src/effects.json +78 -0
- package/src/theme-colors-p3.json +91 -0
- package/src/theme-colors.json +35 -0
package/src/theme-colors-p3.json
CHANGED
|
@@ -104,6 +104,58 @@
|
|
|
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."
|
|
133
|
+
},
|
|
134
|
+
"print": {
|
|
135
|
+
"light": {
|
|
136
|
+
"srgb": "#f7f7f6",
|
|
137
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
138
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
139
|
+
},
|
|
140
|
+
"dark": {
|
|
141
|
+
"srgb": "#f7f7f6",
|
|
142
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
143
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
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."
|
|
146
|
+
},
|
|
147
|
+
"play-disc": {
|
|
148
|
+
"light": {
|
|
149
|
+
"srgb": "rgba(247, 247, 246, 0.92)",
|
|
150
|
+
"oklch": "oklch(97.59% 0.0013 106.42 / 0.92)",
|
|
151
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651 / 0.92)"
|
|
152
|
+
},
|
|
153
|
+
"dark": {
|
|
154
|
+
"srgb": "rgba(247, 247, 246, 0.92)",
|
|
155
|
+
"oklch": "oklch(97.59% 0.0013 106.42 / 0.92)",
|
|
156
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651 / 0.92)"
|
|
157
|
+
},
|
|
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."
|
|
107
159
|
}
|
|
108
160
|
},
|
|
109
161
|
"border": {
|
|
@@ -184,6 +236,19 @@
|
|
|
184
236
|
"p3": "color(display-p3 0.1581 0.1456 0.1418)"
|
|
185
237
|
},
|
|
186
238
|
"description": "Code block border"
|
|
239
|
+
},
|
|
240
|
+
"on-scrim-focus": {
|
|
241
|
+
"light": {
|
|
242
|
+
"srgb": "#3498db",
|
|
243
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
244
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
245
|
+
},
|
|
246
|
+
"dark": {
|
|
247
|
+
"srgb": "#3498db",
|
|
248
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
249
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
250
|
+
},
|
|
251
|
+
"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
252
|
}
|
|
188
253
|
},
|
|
189
254
|
"content": {
|
|
@@ -238,6 +303,32 @@
|
|
|
238
303
|
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
239
304
|
},
|
|
240
305
|
"description": "Inverse text — for contrasting backgrounds"
|
|
306
|
+
},
|
|
307
|
+
"on-scrim": {
|
|
308
|
+
"light": {
|
|
309
|
+
"srgb": "#f7f7f6",
|
|
310
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
311
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
312
|
+
},
|
|
313
|
+
"dark": {
|
|
314
|
+
"srgb": "#f7f7f6",
|
|
315
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
316
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
317
|
+
},
|
|
318
|
+
"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."
|
|
319
|
+
},
|
|
320
|
+
"on-print": {
|
|
321
|
+
"light": {
|
|
322
|
+
"srgb": "#14140f",
|
|
323
|
+
"oklch": "oklch(18.93% 0.0098 107.3)",
|
|
324
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0608)"
|
|
325
|
+
},
|
|
326
|
+
"dark": {
|
|
327
|
+
"srgb": "#14140f",
|
|
328
|
+
"oklch": "oklch(18.93% 0.0098 107.3)",
|
|
329
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0608)"
|
|
330
|
+
},
|
|
331
|
+
"description": "Ink on surface.print, and the glyph on surface.play-disc (the play triangle takes this token; it has no separate one). stone-900. It depicts printed ink, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 on surface.print, and 4.5:1 on the play disc composited over each mode's page, by tools/contrast-check.mjs."
|
|
241
332
|
}
|
|
242
333
|
},
|
|
243
334
|
"interactive": {
|
package/src/theme-colors.json
CHANGED
|
@@ -40,6 +40,26 @@
|
|
|
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."
|
|
53
|
+
},
|
|
54
|
+
"print": {
|
|
55
|
+
"light": "#f7f7f6",
|
|
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."
|
|
58
|
+
},
|
|
59
|
+
"play-disc": {
|
|
60
|
+
"light": "rgba(247, 247, 246, 0.92)",
|
|
61
|
+
"dark": "rgba(247, 247, 246, 0.92)",
|
|
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."
|
|
43
63
|
}
|
|
44
64
|
},
|
|
45
65
|
"border": {
|
|
@@ -72,6 +92,11 @@
|
|
|
72
92
|
"light": "#d6d3d1",
|
|
73
93
|
"dark": "#292524",
|
|
74
94
|
"description": "Code block border"
|
|
95
|
+
},
|
|
96
|
+
"on-scrim-focus": {
|
|
97
|
+
"light": "#3498DB",
|
|
98
|
+
"dark": "#3498DB",
|
|
99
|
+
"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
100
|
}
|
|
76
101
|
},
|
|
77
102
|
"content": {
|
|
@@ -94,6 +119,16 @@
|
|
|
94
119
|
"light": "#fdf9f2",
|
|
95
120
|
"dark": "#0c0a09",
|
|
96
121
|
"description": "Inverse text — for contrasting backgrounds"
|
|
122
|
+
},
|
|
123
|
+
"on-scrim": {
|
|
124
|
+
"light": "#f7f7f6",
|
|
125
|
+
"dark": "#f7f7f6",
|
|
126
|
+
"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."
|
|
127
|
+
},
|
|
128
|
+
"on-print": {
|
|
129
|
+
"light": "#14140f",
|
|
130
|
+
"dark": "#14140f",
|
|
131
|
+
"description": "Ink on surface.print, and the glyph on surface.play-disc (the play triangle takes this token; it has no separate one). stone-900. It depicts printed ink, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 on surface.print, and 4.5:1 on the play disc composited over each mode's page, by tools/contrast-check.mjs."
|
|
97
132
|
}
|
|
98
133
|
},
|
|
99
134
|
"interactive": {
|