@dataimago/tokens-neutral 0.1.0-alpha.17 → 0.1.0-alpha.18

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/effects.json +12 -0
  2. package/dist/index.cjs +20 -0
  3. package/dist/index.mjs +20 -0
  4. package/dist/theme-colors.json +20 -0
  5. package/dist/tokens.css +18 -0
  6. package/dist/tokens.dtcg.json +32 -0
  7. package/dist/tokens.scss +18 -0
  8. package/dist/tokens.studio.json +32 -0
  9. package/dist/tokens.w3c.dtcg.json +40 -0
  10. package/package.json +1 -1
  11. package/src/theme-colors.json +22 -2
package/dist/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/dist/index.cjs CHANGED
@@ -36,6 +36,16 @@ const tokens = {
36
36
  "light": "#f7f7f6",
37
37
  "dark": "#1c1917",
38
38
  "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
39
+ },
40
+ "scrim": {
41
+ "light": "rgba(20, 20, 16, 0.85)",
42
+ "dark": "rgba(20, 20, 16, 0.85)",
43
+ "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)."
44
+ },
45
+ "scrim-solid": {
46
+ "light": "rgba(20, 20, 16, 0.92)",
47
+ "dark": "rgba(20, 20, 16, 0.92)",
48
+ "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."
39
49
  }
40
50
  },
41
51
  "border": {
@@ -63,6 +73,11 @@ const tokens = {
63
73
  "light": "#d6d3d1",
64
74
  "dark": "#292524",
65
75
  "description": "Code block border"
76
+ },
77
+ "on-scrim-focus": {
78
+ "light": "#f7f7f6",
79
+ "dark": "#f7f7f6",
80
+ "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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
66
81
  }
67
82
  },
68
83
  "content": {
@@ -85,6 +100,11 @@ const tokens = {
85
100
  "light": "#fdf9f2",
86
101
  "dark": "#0c0a09",
87
102
  "description": "Inverse text — for contrasting backgrounds"
103
+ },
104
+ "on-scrim": {
105
+ "light": "#f7f7f6",
106
+ "dark": "#f7f7f6",
107
+ "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."
88
108
  }
89
109
  },
90
110
  "interactive": {
package/dist/index.mjs CHANGED
@@ -36,6 +36,16 @@ const tokens = {
36
36
  "light": "#f7f7f6",
37
37
  "dark": "#1c1917",
38
38
  "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
39
+ },
40
+ "scrim": {
41
+ "light": "rgba(20, 20, 16, 0.85)",
42
+ "dark": "rgba(20, 20, 16, 0.85)",
43
+ "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)."
44
+ },
45
+ "scrim-solid": {
46
+ "light": "rgba(20, 20, 16, 0.92)",
47
+ "dark": "rgba(20, 20, 16, 0.92)",
48
+ "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."
39
49
  }
40
50
  },
41
51
  "border": {
@@ -63,6 +73,11 @@ const tokens = {
63
73
  "light": "#d6d3d1",
64
74
  "dark": "#292524",
65
75
  "description": "Code block border"
76
+ },
77
+ "on-scrim-focus": {
78
+ "light": "#f7f7f6",
79
+ "dark": "#f7f7f6",
80
+ "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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
66
81
  }
67
82
  },
68
83
  "content": {
@@ -85,6 +100,11 @@ const tokens = {
85
100
  "light": "#fdf9f2",
86
101
  "dark": "#0c0a09",
87
102
  "description": "Inverse text — for contrasting backgrounds"
103
+ },
104
+ "on-scrim": {
105
+ "light": "#f7f7f6",
106
+ "dark": "#f7f7f6",
107
+ "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."
88
108
  }
89
109
  },
90
110
  "interactive": {
package/dist/theme-colors.json CHANGED
@@ -35,6 +35,16 @@
35
35
  "light": "#f7f7f6",
36
36
  "dark": "#1c1917",
37
37
  "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
38
+ },
39
+ "scrim": {
40
+ "light": "rgba(20, 20, 16, 0.85)",
41
+ "dark": "rgba(20, 20, 16, 0.85)",
42
+ "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)."
43
+ },
44
+ "scrim-solid": {
45
+ "light": "rgba(20, 20, 16, 0.92)",
46
+ "dark": "rgba(20, 20, 16, 0.92)",
47
+ "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."
38
48
  }
39
49
  },
40
50
  "border": {
@@ -62,6 +72,11 @@
62
72
  "light": "#d6d3d1",
63
73
  "dark": "#292524",
64
74
  "description": "Code block border"
75
+ },
76
+ "on-scrim-focus": {
77
+ "light": "#f7f7f6",
78
+ "dark": "#f7f7f6",
79
+ "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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
65
80
  }
66
81
  },
67
82
  "content": {
@@ -84,6 +99,11 @@
84
99
  "light": "#fdf9f2",
85
100
  "dark": "#0c0a09",
86
101
  "description": "Inverse text — for contrasting backgrounds"
102
+ },
103
+ "on-scrim": {
104
+ "light": "#f7f7f6",
105
+ "dark": "#f7f7f6",
106
+ "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."
87
107
  }
88
108
  },
89
109
  "interactive": {
package/dist/tokens.css CHANGED
@@ -115,15 +115,19 @@
115
115
  --color-surface-navbar: #ededeb;
116
116
  --color-surface-navbar-scrolled: #ededeb;
117
117
  --color-surface-code: #f7f7f6;
118
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
119
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
118
120
  --color-border-subtle: rgba(12, 10, 9, 0.45);
119
121
  --color-border-moderate: rgba(12, 10, 9, 0.60);
120
122
  --color-border-strong: rgba(12, 10, 9, 0.75);
121
123
  --color-border-card: rgba(12, 10, 9, 0.60);
122
124
  --color-border-code: #d6d3d1;
125
+ --color-border-on-scrim-focus: #f7f7f6;
123
126
  --color-content-primary: #14140f;
124
127
  --color-content-secondary: #424240;
125
128
  --color-content-muted: #5e5e5c;
126
129
  --color-content-inverse: #fdf9f2;
130
+ --color-content-on-scrim: #f7f7f6;
127
131
  --color-interactive-primary: #292524;
128
132
  --color-interactive-hover: #1c1917;
129
133
  --color-interactive-accent: #292524;
@@ -139,6 +143,8 @@
139
143
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
140
144
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
141
145
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
146
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
147
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
142
148
  --border-subtle: rgba(20, 20, 16, 0.47);
143
149
  --border-moderate: rgba(20, 20, 16, 0.63);
144
150
  --border-focus: #3498DB;
@@ -159,15 +165,19 @@
159
165
  --color-surface-navbar: #141410;
160
166
  --color-surface-navbar-scrolled: #141410;
161
167
  --color-surface-code: #1c1917;
168
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
169
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
162
170
  --color-border-subtle: rgba(253, 249, 242, 0.45);
163
171
  --color-border-moderate: rgba(253, 249, 242, 0.60);
164
172
  --color-border-strong: rgba(253, 249, 242, 0.75);
165
173
  --color-border-card: rgba(253, 249, 242, 0.60);
166
174
  --color-border-code: #292524;
175
+ --color-border-on-scrim-focus: #f7f7f6;
167
176
  --color-content-primary: #fdf9f2;
168
177
  --color-content-secondary: #a8a29e;
169
178
  --color-content-muted: #89827d;
170
179
  --color-content-inverse: #0c0a09;
180
+ --color-content-on-scrim: #f7f7f6;
171
181
  --color-interactive-primary: #d6d3d1;
172
182
  --color-interactive-hover: #a8a29e;
173
183
  --color-interactive-accent: #d6d3d1;
@@ -183,6 +193,8 @@
183
193
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
194
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
195
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
196
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
197
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
186
198
  --border-subtle: rgba(237, 237, 235, 0.47);
187
199
  --border-moderate: rgba(237, 237, 235, 0.63);
188
200
  --border-focus: #4FC3F7;
@@ -204,15 +216,19 @@
204
216
  --color-surface-navbar: #141410;
205
217
  --color-surface-navbar-scrolled: #141410;
206
218
  --color-surface-code: #1c1917;
219
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
220
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
207
221
  --color-border-subtle: rgba(253, 249, 242, 0.45);
208
222
  --color-border-moderate: rgba(253, 249, 242, 0.60);
209
223
  --color-border-strong: rgba(253, 249, 242, 0.75);
210
224
  --color-border-card: rgba(253, 249, 242, 0.60);
211
225
  --color-border-code: #292524;
226
+ --color-border-on-scrim-focus: #f7f7f6;
212
227
  --color-content-primary: #fdf9f2;
213
228
  --color-content-secondary: #a8a29e;
214
229
  --color-content-muted: #89827d;
215
230
  --color-content-inverse: #0c0a09;
231
+ --color-content-on-scrim: #f7f7f6;
216
232
  --color-interactive-primary: #d6d3d1;
217
233
  --color-interactive-hover: #a8a29e;
218
234
  --color-interactive-accent: #d6d3d1;
@@ -228,6 +244,8 @@
228
244
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
229
245
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
230
246
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
247
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
248
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
231
249
  --border-subtle: rgba(237, 237, 235, 0.47);
232
250
  --border-moderate: rgba(237, 237, 235, 0.63);
233
251
  --border-focus: #4FC3F7;
package/dist/tokens.dtcg.json CHANGED
@@ -56,6 +56,22 @@
56
56
  },
57
57
  "$type": "color",
58
58
  "$description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
59
+ },
60
+ "scrim": {
61
+ "$value": {
62
+ "light": "rgba(20, 20, 16, 0.85)",
63
+ "dark": "rgba(20, 20, 16, 0.85)"
64
+ },
65
+ "$type": "color",
66
+ "$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)."
67
+ },
68
+ "scrim-solid": {
69
+ "$value": {
70
+ "light": "rgba(20, 20, 16, 0.92)",
71
+ "dark": "rgba(20, 20, 16, 0.92)"
72
+ },
73
+ "$type": "color",
74
+ "$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."
59
75
  }
60
76
  },
61
77
  "border": {
@@ -98,6 +114,14 @@
98
114
  },
99
115
  "$type": "color",
100
116
  "$description": "Code block border"
117
+ },
118
+ "on-scrim-focus": {
119
+ "$value": {
120
+ "light": "#f7f7f6",
121
+ "dark": "#f7f7f6"
122
+ },
123
+ "$type": "color",
124
+ "$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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
101
125
  }
102
126
  },
103
127
  "content": {
@@ -132,6 +156,14 @@
132
156
  },
133
157
  "$type": "color",
134
158
  "$description": "Inverse text — for contrasting backgrounds"
159
+ },
160
+ "on-scrim": {
161
+ "$value": {
162
+ "light": "#f7f7f6",
163
+ "dark": "#f7f7f6"
164
+ },
165
+ "$type": "color",
166
+ "$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."
135
167
  }
136
168
  },
137
169
  "interactive": {
package/dist/tokens.scss CHANGED
@@ -115,15 +115,19 @@
115
115
  --color-surface-navbar: #ededeb;
116
116
  --color-surface-navbar-scrolled: #ededeb;
117
117
  --color-surface-code: #f7f7f6;
118
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
119
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
118
120
  --color-border-subtle: rgba(12, 10, 9, 0.45);
119
121
  --color-border-moderate: rgba(12, 10, 9, 0.60);
120
122
  --color-border-strong: rgba(12, 10, 9, 0.75);
121
123
  --color-border-card: rgba(12, 10, 9, 0.60);
122
124
  --color-border-code: #d6d3d1;
125
+ --color-border-on-scrim-focus: #f7f7f6;
123
126
  --color-content-primary: #14140f;
124
127
  --color-content-secondary: #424240;
125
128
  --color-content-muted: #5e5e5c;
126
129
  --color-content-inverse: #fdf9f2;
130
+ --color-content-on-scrim: #f7f7f6;
127
131
  --color-interactive-primary: #292524;
128
132
  --color-interactive-hover: #1c1917;
129
133
  --color-interactive-accent: #292524;
@@ -139,6 +143,8 @@
139
143
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
140
144
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
141
145
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
146
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
147
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
142
148
  --border-subtle: rgba(20, 20, 16, 0.47);
143
149
  --border-moderate: rgba(20, 20, 16, 0.63);
144
150
  --border-focus: #3498DB;
@@ -159,15 +165,19 @@
159
165
  --color-surface-navbar: #141410;
160
166
  --color-surface-navbar-scrolled: #141410;
161
167
  --color-surface-code: #1c1917;
168
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
169
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
162
170
  --color-border-subtle: rgba(253, 249, 242, 0.45);
163
171
  --color-border-moderate: rgba(253, 249, 242, 0.60);
164
172
  --color-border-strong: rgba(253, 249, 242, 0.75);
165
173
  --color-border-card: rgba(253, 249, 242, 0.60);
166
174
  --color-border-code: #292524;
175
+ --color-border-on-scrim-focus: #f7f7f6;
167
176
  --color-content-primary: #fdf9f2;
168
177
  --color-content-secondary: #a8a29e;
169
178
  --color-content-muted: #89827d;
170
179
  --color-content-inverse: #0c0a09;
180
+ --color-content-on-scrim: #f7f7f6;
171
181
  --color-interactive-primary: #d6d3d1;
172
182
  --color-interactive-hover: #a8a29e;
173
183
  --color-interactive-accent: #d6d3d1;
@@ -183,6 +193,8 @@
183
193
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
194
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
195
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
196
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
197
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
186
198
  --border-subtle: rgba(237, 237, 235, 0.47);
187
199
  --border-moderate: rgba(237, 237, 235, 0.63);
188
200
  --border-focus: #4FC3F7;
@@ -204,15 +216,19 @@
204
216
  --color-surface-navbar: #141410;
205
217
  --color-surface-navbar-scrolled: #141410;
206
218
  --color-surface-code: #1c1917;
219
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
220
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
207
221
  --color-border-subtle: rgba(253, 249, 242, 0.45);
208
222
  --color-border-moderate: rgba(253, 249, 242, 0.60);
209
223
  --color-border-strong: rgba(253, 249, 242, 0.75);
210
224
  --color-border-card: rgba(253, 249, 242, 0.60);
211
225
  --color-border-code: #292524;
226
+ --color-border-on-scrim-focus: #f7f7f6;
212
227
  --color-content-primary: #fdf9f2;
213
228
  --color-content-secondary: #a8a29e;
214
229
  --color-content-muted: #89827d;
215
230
  --color-content-inverse: #0c0a09;
231
+ --color-content-on-scrim: #f7f7f6;
216
232
  --color-interactive-primary: #d6d3d1;
217
233
  --color-interactive-hover: #a8a29e;
218
234
  --color-interactive-accent: #d6d3d1;
@@ -228,6 +244,8 @@
228
244
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
229
245
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
230
246
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
247
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
248
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
231
249
  --border-subtle: rgba(237, 237, 235, 0.47);
232
250
  --border-moderate: rgba(237, 237, 235, 0.63);
233
251
  --border-focus: #4FC3F7;
package/dist/tokens.studio.json CHANGED
@@ -29,6 +29,14 @@
29
29
  "code": {
30
30
  "value": "#f7f7f6",
31
31
  "type": "color"
32
+ },
33
+ "scrim": {
34
+ "value": "rgba(20, 20, 16, 0.85)",
35
+ "type": "color"
36
+ },
37
+ "scrim-solid": {
38
+ "value": "rgba(20, 20, 16, 0.92)",
39
+ "type": "color"
32
40
  }
33
41
  },
34
42
  "border": {
@@ -51,6 +59,10 @@
51
59
  "code": {
52
60
  "value": "#d6d3d1",
53
61
  "type": "color"
62
+ },
63
+ "on-scrim-focus": {
64
+ "value": "#f7f7f6",
65
+ "type": "color"
54
66
  }
55
67
  },
56
68
  "content": {
@@ -69,6 +81,10 @@
69
81
  "inverse": {
70
82
  "value": "#fdf9f2",
71
83
  "type": "color"
84
+ },
85
+ "on-scrim": {
86
+ "value": "#f7f7f6",
87
+ "type": "color"
72
88
  }
73
89
  },
74
90
  "interactive": {
@@ -519,6 +535,14 @@
519
535
  "code": {
520
536
  "value": "#1c1917",
521
537
  "type": "color"
538
+ },
539
+ "scrim": {
540
+ "value": "rgba(20, 20, 16, 0.85)",
541
+ "type": "color"
542
+ },
543
+ "scrim-solid": {
544
+ "value": "rgba(20, 20, 16, 0.92)",
545
+ "type": "color"
522
546
  }
523
547
  },
524
548
  "border": {
@@ -541,6 +565,10 @@
541
565
  "code": {
542
566
  "value": "#292524",
543
567
  "type": "color"
568
+ },
569
+ "on-scrim-focus": {
570
+ "value": "#f7f7f6",
571
+ "type": "color"
544
572
  }
545
573
  },
546
574
  "content": {
@@ -559,6 +587,10 @@
559
587
  "inverse": {
560
588
  "value": "#0c0a09",
561
589
  "type": "color"
590
+ },
591
+ "on-scrim": {
592
+ "value": "#f7f7f6",
593
+ "type": "color"
562
594
  }
563
595
  },
564
596
  "interactive": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -70,6 +70,26 @@
70
70
  }
71
71
  },
72
72
  "$description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
73
+ },
74
+ "scrim": {
75
+ "$value": "rgba(20, 20, 16, 0.85)",
76
+ "$type": "color",
77
+ "$extensions": {
78
+ "com.dataimago.theme": {
79
+ "dark": "rgba(20, 20, 16, 0.85)"
80
+ }
81
+ },
82
+ "$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)."
83
+ },
84
+ "scrim-solid": {
85
+ "$value": "rgba(20, 20, 16, 0.92)",
86
+ "$type": "color",
87
+ "$extensions": {
88
+ "com.dataimago.theme": {
89
+ "dark": "rgba(20, 20, 16, 0.92)"
90
+ }
91
+ },
92
+ "$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."
73
93
  }
74
94
  },
75
95
  "border": {
@@ -122,6 +142,16 @@
122
142
  }
123
143
  },
124
144
  "$description": "Code block border"
145
+ },
146
+ "on-scrim-focus": {
147
+ "$value": "#f7f7f6",
148
+ "$type": "color",
149
+ "$extensions": {
150
+ "com.dataimago.theme": {
151
+ "dark": "#f7f7f6"
152
+ }
153
+ },
154
+ "$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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
125
155
  }
126
156
  },
127
157
  "content": {
@@ -164,6 +194,16 @@
164
194
  }
165
195
  },
166
196
  "$description": "Inverse text — for contrasting backgrounds"
197
+ },
198
+ "on-scrim": {
199
+ "$value": "#f7f7f6",
200
+ "$type": "color",
201
+ "$extensions": {
202
+ "com.dataimago.theme": {
203
+ "dark": "#f7f7f6"
204
+ }
205
+ },
206
+ "$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."
167
207
  }
168
208
  },
169
209
  "interactive": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens-neutral",
3
- "version": "0.1.0-alpha.17",
3
+ "version": "0.1.0-alpha.18",
4
4
  "description": "dataimago neutral-identity design tokens — Noto Sans throughout, neutral palette; sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 verticals). Non-identity tokens (spacing, radius, motion, effects, components) are read from @dataimago/tokens at build time so the two packages stay in lockstep.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/theme-colors.json CHANGED
@@ -35,6 +35,16 @@
35
35
  "light": "#f7f7f6",
36
36
  "dark": "#1c1917",
37
37
  "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
38
+ },
39
+ "scrim": {
40
+ "light": "rgba(20, 20, 16, 0.85)",
41
+ "dark": "rgba(20, 20, 16, 0.85)",
42
+ "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)."
43
+ },
44
+ "scrim-solid": {
45
+ "light": "rgba(20, 20, 16, 0.92)",
46
+ "dark": "rgba(20, 20, 16, 0.92)",
47
+ "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."
38
48
  }
39
49
  },
40
50
  "border": {
@@ -42,13 +52,23 @@
42
52
  "moderate": { "light": "rgba(12, 10, 9, 0.60)", "dark": "rgba(253, 249, 242, 0.60)", "description": "Moderate borders — defined boundaries" },
43
53
  "strong": { "light": "rgba(12, 10, 9, 0.75)", "dark": "rgba(253, 249, 242, 0.75)", "description": "Strong borders — prominent separation" },
44
54
  "card": { "light": "rgba(12, 10, 9, 0.60)", "dark": "rgba(253, 249, 242, 0.60)", "description": "Card border color with transparency for subtle definition" },
45
- "code": { "light": "#d6d3d1", "dark": "#292524", "description": "Code block border" }
55
+ "code": { "light": "#d6d3d1", "dark": "#292524", "description": "Code block border" },
56
+ "on-scrim-focus": {
57
+ "light": "#f7f7f6",
58
+ "dark": "#f7f7f6",
59
+ "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 neutral identity uses ink, not slate, for accents (the state-colours ADR), so the ring is on-scrim stone-50. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
60
+ }
46
61
  },
47
62
  "content": {
48
63
  "primary": { "light": "#14140f", "dark": "#fdf9f2", "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface" },
49
64
  "secondary": { "light": "#424240", "dark": "#a8a29e", "description": "Secondary text — stone-700 (light; 8.6:1 on stone-100, 10.1:1 on white, AAA) / ink-300 (dark; 7.3:1 on the dark page)" },
50
65
  "muted": { "light": "#5e5e5c", "dark": "#89827d", "description": "Muted text — captions, meta info; stone-600 (light; 5.5:1 on stone-100) / #89827d (dark; 4.9:1 on the dark page), AA" },
51
- "inverse": { "light": "#fdf9f2", "dark": "#0c0a09", "description": "Inverse text — for contrasting backgrounds" }
66
+ "inverse": { "light": "#fdf9f2", "dark": "#0c0a09", "description": "Inverse text — for contrasting backgrounds" },
67
+ "on-scrim": {
68
+ "light": "#f7f7f6",
69
+ "dark": "#f7f7f6",
70
+ "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."
71
+ }
52
72
  },
53
73
  "interactive": {
54
74
  "primary": {