@dataimago/tokens 0.1.0-alpha.28 → 0.1.0-alpha.30
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 +26 -4
- package/dist/index.mjs +26 -4
- package/dist/tokens.css +31 -7
- package/dist/tokens.dtcg.json +38 -4
- package/dist/tokens.scss +31 -7
- package/dist/tokens.studio.json +38 -2
- package/dist/tokens.w3c.dtcg.json +46 -4
- package/package.json +1 -1
- package/src/colors.json +8 -8
- package/src/theme-colors-p3.json +62 -8
- package/src/theme-colors.json +26 -4
package/dist/index.cjs
CHANGED
|
@@ -23,9 +23,9 @@ const tokens = {
|
|
|
23
23
|
"description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
24
24
|
},
|
|
25
25
|
"sunken": {
|
|
26
|
-
"light": "#
|
|
26
|
+
"light": "#f7f7f6",
|
|
27
27
|
"dark": "#0c0a09",
|
|
28
|
-
"description": "Input fields,
|
|
28
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
29
29
|
},
|
|
30
30
|
"navbar": {
|
|
31
31
|
"light": "#ededeb",
|
|
@@ -38,9 +38,9 @@ const tokens = {
|
|
|
38
38
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
39
39
|
},
|
|
40
40
|
"code": {
|
|
41
|
-
"light": "#
|
|
41
|
+
"light": "#f7f7f6",
|
|
42
42
|
"dark": "#1c1917",
|
|
43
|
-
"description": "Code block and inline code background"
|
|
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
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"border": {
|
|
@@ -119,6 +119,28 @@ const tokens = {
|
|
|
119
119
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
|
+
"state": {
|
|
123
|
+
"success": {
|
|
124
|
+
"light": "#007a58",
|
|
125
|
+
"dark": "#009E73",
|
|
126
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
127
|
+
},
|
|
128
|
+
"warning": {
|
|
129
|
+
"light": "#906306",
|
|
130
|
+
"dark": "#E69F00",
|
|
131
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
132
|
+
},
|
|
133
|
+
"error": {
|
|
134
|
+
"light": "#a4262c",
|
|
135
|
+
"dark": "#ef5350",
|
|
136
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
137
|
+
},
|
|
138
|
+
"info": {
|
|
139
|
+
"light": "#1f618d",
|
|
140
|
+
"dark": "#3498DB",
|
|
141
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
142
|
+
}
|
|
143
|
+
},
|
|
122
144
|
"presentation": {
|
|
123
145
|
"accent": {
|
|
124
146
|
"light": "#3498DB",
|
package/dist/index.mjs
CHANGED
|
@@ -23,9 +23,9 @@ const tokens = {
|
|
|
23
23
|
"description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
24
24
|
},
|
|
25
25
|
"sunken": {
|
|
26
|
-
"light": "#
|
|
26
|
+
"light": "#f7f7f6",
|
|
27
27
|
"dark": "#0c0a09",
|
|
28
|
-
"description": "Input fields,
|
|
28
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
29
29
|
},
|
|
30
30
|
"navbar": {
|
|
31
31
|
"light": "#ededeb",
|
|
@@ -38,9 +38,9 @@ const tokens = {
|
|
|
38
38
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
39
39
|
},
|
|
40
40
|
"code": {
|
|
41
|
-
"light": "#
|
|
41
|
+
"light": "#f7f7f6",
|
|
42
42
|
"dark": "#1c1917",
|
|
43
|
-
"description": "Code block and inline code background"
|
|
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
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"border": {
|
|
@@ -119,6 +119,28 @@ const tokens = {
|
|
|
119
119
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
|
+
"state": {
|
|
123
|
+
"success": {
|
|
124
|
+
"light": "#007a58",
|
|
125
|
+
"dark": "#009E73",
|
|
126
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
127
|
+
},
|
|
128
|
+
"warning": {
|
|
129
|
+
"light": "#906306",
|
|
130
|
+
"dark": "#E69F00",
|
|
131
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
132
|
+
},
|
|
133
|
+
"error": {
|
|
134
|
+
"light": "#a4262c",
|
|
135
|
+
"dark": "#ef5350",
|
|
136
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
137
|
+
},
|
|
138
|
+
"info": {
|
|
139
|
+
"light": "#1f618d",
|
|
140
|
+
"dark": "#3498DB",
|
|
141
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
142
|
+
}
|
|
143
|
+
},
|
|
122
144
|
"presentation": {
|
|
123
145
|
"accent": {
|
|
124
146
|
"light": "#3498DB",
|
package/dist/tokens.css
CHANGED
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
--color-palette-presentation-blue-500: #3498DB;
|
|
56
56
|
--color-palette-presentation-blue-600: #2980B9;
|
|
57
57
|
--color-palette-presentation-blue-700: #1f618d;
|
|
58
|
-
--color-functional-success: #
|
|
59
|
-
--color-functional-warning: #
|
|
60
|
-
--color-functional-error: #
|
|
58
|
+
--color-functional-success: #009E73;
|
|
59
|
+
--color-functional-warning: #E69F00;
|
|
60
|
+
--color-functional-error: #ef5350;
|
|
61
61
|
--color-functional-info: #3498DB;
|
|
62
62
|
--transition-quick: 0.15s ease;
|
|
63
63
|
--transition-standard: 0.25s ease-in-out;
|
|
@@ -146,14 +146,14 @@
|
|
|
146
146
|
--color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
|
|
147
147
|
--color-surface-figure-plate: #f7f7f6;
|
|
148
148
|
--color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
|
|
149
|
-
--color-surface-sunken: #
|
|
150
|
-
--color-surface-sunken: color(display-p3 0.
|
|
149
|
+
--color-surface-sunken: #f7f7f6;
|
|
150
|
+
--color-surface-sunken: color(display-p3 0.9686 0.9686 0.9651);
|
|
151
151
|
--color-surface-navbar: #ededeb;
|
|
152
152
|
--color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
|
|
153
153
|
--color-surface-navbar-scrolled: #ededeb;
|
|
154
154
|
--color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
155
|
-
--color-surface-code: #
|
|
156
|
-
--color-surface-code: color(display-p3 0.
|
|
155
|
+
--color-surface-code: #f7f7f6;
|
|
156
|
+
--color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
|
|
157
157
|
--color-border-subtle: rgba(12, 10, 9, 0.45);
|
|
158
158
|
--color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
|
|
159
159
|
--color-border-moderate: rgba(12, 10, 9, 0.60);
|
|
@@ -182,6 +182,14 @@
|
|
|
182
182
|
--color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
|
|
183
183
|
--color-interactive-focus: #434739;
|
|
184
184
|
--color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
|
|
185
|
+
--color-state-success: #007a58;
|
|
186
|
+
--color-state-success: color(display-p3 0.2046 0.471 0.3541);
|
|
187
|
+
--color-state-warning: #906306;
|
|
188
|
+
--color-state-warning: color(display-p3 0.5386 0.3957 0.1307);
|
|
189
|
+
--color-state-error: #a4262c;
|
|
190
|
+
--color-state-error: color(display-p3 0.5915 0.1933 0.192);
|
|
191
|
+
--color-state-info: #1f618d;
|
|
192
|
+
--color-state-info: color(display-p3 0.198 0.375 0.5385);
|
|
185
193
|
--color-presentation-accent: #3498db;
|
|
186
194
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
187
195
|
--color-presentation-accent-hover: #2980b9;
|
|
@@ -258,6 +266,14 @@
|
|
|
258
266
|
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
259
267
|
--color-interactive-focus: #98a384;
|
|
260
268
|
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
269
|
+
--color-state-success: #009e73;
|
|
270
|
+
--color-state-success: color(display-p3 0.2733 0.6102 0.4624);
|
|
271
|
+
--color-state-warning: #e69f00;
|
|
272
|
+
--color-state-warning: color(display-p3 0.861 0.6354 0.2169);
|
|
273
|
+
--color-state-error: #ef5350;
|
|
274
|
+
--color-state-error: color(display-p3 0.8678 0.3692 0.339);
|
|
275
|
+
--color-state-info: #3498db;
|
|
276
|
+
--color-state-info: color(display-p3 0.3208 0.588 0.8369);
|
|
261
277
|
--color-presentation-accent: #3498db;
|
|
262
278
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
263
279
|
--color-presentation-accent-hover: #2980b9;
|
|
@@ -335,6 +351,14 @@
|
|
|
335
351
|
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
336
352
|
--color-interactive-focus: #98a384;
|
|
337
353
|
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
354
|
+
--color-state-success: #009e73;
|
|
355
|
+
--color-state-success: color(display-p3 0.2733 0.6102 0.4624);
|
|
356
|
+
--color-state-warning: #e69f00;
|
|
357
|
+
--color-state-warning: color(display-p3 0.861 0.6354 0.2169);
|
|
358
|
+
--color-state-error: #ef5350;
|
|
359
|
+
--color-state-error: color(display-p3 0.8678 0.3692 0.339);
|
|
360
|
+
--color-state-info: #3498db;
|
|
361
|
+
--color-state-info: color(display-p3 0.3208 0.588 0.8369);
|
|
338
362
|
--color-presentation-accent: #3498db;
|
|
339
363
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
340
364
|
--color-presentation-accent-hover: #2980b9;
|
package/dist/tokens.dtcg.json
CHANGED
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
},
|
|
36
36
|
"sunken": {
|
|
37
37
|
"$value": {
|
|
38
|
-
"light": "#
|
|
38
|
+
"light": "#f7f7f6",
|
|
39
39
|
"dark": "#0c0a09"
|
|
40
40
|
},
|
|
41
41
|
"$type": "color",
|
|
42
|
-
"$description": "Input fields,
|
|
42
|
+
"$description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
43
43
|
},
|
|
44
44
|
"navbar": {
|
|
45
45
|
"$value": {
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
},
|
|
60
60
|
"code": {
|
|
61
61
|
"$value": {
|
|
62
|
-
"light": "#
|
|
62
|
+
"light": "#f7f7f6",
|
|
63
63
|
"dark": "#1c1917"
|
|
64
64
|
},
|
|
65
65
|
"$type": "color",
|
|
66
|
-
"$description": "Code block and inline code background"
|
|
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
67
|
}
|
|
68
68
|
},
|
|
69
69
|
"border": {
|
|
@@ -184,6 +184,40 @@
|
|
|
184
184
|
"$description": "Focus indicators — mirrors interactive.primary"
|
|
185
185
|
}
|
|
186
186
|
},
|
|
187
|
+
"state": {
|
|
188
|
+
"success": {
|
|
189
|
+
"$value": {
|
|
190
|
+
"light": "#007a58",
|
|
191
|
+
"dark": "#009E73"
|
|
192
|
+
},
|
|
193
|
+
"$type": "color",
|
|
194
|
+
"$description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
195
|
+
},
|
|
196
|
+
"warning": {
|
|
197
|
+
"$value": {
|
|
198
|
+
"light": "#906306",
|
|
199
|
+
"dark": "#E69F00"
|
|
200
|
+
},
|
|
201
|
+
"$type": "color",
|
|
202
|
+
"$description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
203
|
+
},
|
|
204
|
+
"error": {
|
|
205
|
+
"$value": {
|
|
206
|
+
"light": "#a4262c",
|
|
207
|
+
"dark": "#ef5350"
|
|
208
|
+
},
|
|
209
|
+
"$type": "color",
|
|
210
|
+
"$description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
211
|
+
},
|
|
212
|
+
"info": {
|
|
213
|
+
"$value": {
|
|
214
|
+
"light": "#1f618d",
|
|
215
|
+
"dark": "#3498DB"
|
|
216
|
+
},
|
|
217
|
+
"$type": "color",
|
|
218
|
+
"$description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
219
|
+
}
|
|
220
|
+
},
|
|
187
221
|
"presentation": {
|
|
188
222
|
"accent": {
|
|
189
223
|
"$value": {
|
package/dist/tokens.scss
CHANGED
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
--color-palette-presentation-blue-500: #3498DB;
|
|
56
56
|
--color-palette-presentation-blue-600: #2980B9;
|
|
57
57
|
--color-palette-presentation-blue-700: #1f618d;
|
|
58
|
-
--color-functional-success: #
|
|
59
|
-
--color-functional-warning: #
|
|
60
|
-
--color-functional-error: #
|
|
58
|
+
--color-functional-success: #009E73;
|
|
59
|
+
--color-functional-warning: #E69F00;
|
|
60
|
+
--color-functional-error: #ef5350;
|
|
61
61
|
--color-functional-info: #3498DB;
|
|
62
62
|
--transition-quick: 0.15s ease;
|
|
63
63
|
--transition-standard: 0.25s ease-in-out;
|
|
@@ -146,14 +146,14 @@
|
|
|
146
146
|
--color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
|
|
147
147
|
--color-surface-figure-plate: #f7f7f6;
|
|
148
148
|
--color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
|
|
149
|
-
--color-surface-sunken: #
|
|
150
|
-
--color-surface-sunken: color(display-p3 0.
|
|
149
|
+
--color-surface-sunken: #f7f7f6;
|
|
150
|
+
--color-surface-sunken: color(display-p3 0.9686 0.9686 0.9651);
|
|
151
151
|
--color-surface-navbar: #ededeb;
|
|
152
152
|
--color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
|
|
153
153
|
--color-surface-navbar-scrolled: #ededeb;
|
|
154
154
|
--color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
155
|
-
--color-surface-code: #
|
|
156
|
-
--color-surface-code: color(display-p3 0.
|
|
155
|
+
--color-surface-code: #f7f7f6;
|
|
156
|
+
--color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
|
|
157
157
|
--color-border-subtle: rgba(12, 10, 9, 0.45);
|
|
158
158
|
--color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
|
|
159
159
|
--color-border-moderate: rgba(12, 10, 9, 0.60);
|
|
@@ -182,6 +182,14 @@
|
|
|
182
182
|
--color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
|
|
183
183
|
--color-interactive-focus: #434739;
|
|
184
184
|
--color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
|
|
185
|
+
--color-state-success: #007a58;
|
|
186
|
+
--color-state-success: color(display-p3 0.2046 0.471 0.3541);
|
|
187
|
+
--color-state-warning: #906306;
|
|
188
|
+
--color-state-warning: color(display-p3 0.5386 0.3957 0.1307);
|
|
189
|
+
--color-state-error: #a4262c;
|
|
190
|
+
--color-state-error: color(display-p3 0.5915 0.1933 0.192);
|
|
191
|
+
--color-state-info: #1f618d;
|
|
192
|
+
--color-state-info: color(display-p3 0.198 0.375 0.5385);
|
|
185
193
|
--color-presentation-accent: #3498db;
|
|
186
194
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
187
195
|
--color-presentation-accent-hover: #2980b9;
|
|
@@ -258,6 +266,14 @@
|
|
|
258
266
|
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
259
267
|
--color-interactive-focus: #98a384;
|
|
260
268
|
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
269
|
+
--color-state-success: #009e73;
|
|
270
|
+
--color-state-success: color(display-p3 0.2733 0.6102 0.4624);
|
|
271
|
+
--color-state-warning: #e69f00;
|
|
272
|
+
--color-state-warning: color(display-p3 0.861 0.6354 0.2169);
|
|
273
|
+
--color-state-error: #ef5350;
|
|
274
|
+
--color-state-error: color(display-p3 0.8678 0.3692 0.339);
|
|
275
|
+
--color-state-info: #3498db;
|
|
276
|
+
--color-state-info: color(display-p3 0.3208 0.588 0.8369);
|
|
261
277
|
--color-presentation-accent: #3498db;
|
|
262
278
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
263
279
|
--color-presentation-accent-hover: #2980b9;
|
|
@@ -335,6 +351,14 @@
|
|
|
335
351
|
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
336
352
|
--color-interactive-focus: #98a384;
|
|
337
353
|
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
354
|
+
--color-state-success: #009e73;
|
|
355
|
+
--color-state-success: color(display-p3 0.2733 0.6102 0.4624);
|
|
356
|
+
--color-state-warning: #e69f00;
|
|
357
|
+
--color-state-warning: color(display-p3 0.861 0.6354 0.2169);
|
|
358
|
+
--color-state-error: #ef5350;
|
|
359
|
+
--color-state-error: color(display-p3 0.8678 0.3692 0.339);
|
|
360
|
+
--color-state-info: #3498db;
|
|
361
|
+
--color-state-info: color(display-p3 0.3208 0.588 0.8369);
|
|
338
362
|
--color-presentation-accent: #3498db;
|
|
339
363
|
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
340
364
|
--color-presentation-accent-hover: #2980b9;
|
package/dist/tokens.studio.json
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"type": "color"
|
|
20
20
|
},
|
|
21
21
|
"sunken": {
|
|
22
|
-
"value": "#
|
|
22
|
+
"value": "#f7f7f6",
|
|
23
23
|
"type": "color"
|
|
24
24
|
},
|
|
25
25
|
"navbar": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"type": "color"
|
|
32
32
|
},
|
|
33
33
|
"code": {
|
|
34
|
-
"value": "#
|
|
34
|
+
"value": "#f7f7f6",
|
|
35
35
|
"type": "color"
|
|
36
36
|
}
|
|
37
37
|
},
|
|
@@ -97,6 +97,24 @@
|
|
|
97
97
|
"type": "color"
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
+
"state": {
|
|
101
|
+
"success": {
|
|
102
|
+
"value": "#007a58",
|
|
103
|
+
"type": "color"
|
|
104
|
+
},
|
|
105
|
+
"warning": {
|
|
106
|
+
"value": "#906306",
|
|
107
|
+
"type": "color"
|
|
108
|
+
},
|
|
109
|
+
"error": {
|
|
110
|
+
"value": "#a4262c",
|
|
111
|
+
"type": "color"
|
|
112
|
+
},
|
|
113
|
+
"info": {
|
|
114
|
+
"value": "#1f618d",
|
|
115
|
+
"type": "color"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
100
118
|
"presentation": {
|
|
101
119
|
"accent": {
|
|
102
120
|
"value": "#3498DB",
|
|
@@ -615,6 +633,24 @@
|
|
|
615
633
|
"type": "color"
|
|
616
634
|
}
|
|
617
635
|
},
|
|
636
|
+
"state": {
|
|
637
|
+
"success": {
|
|
638
|
+
"value": "#009E73",
|
|
639
|
+
"type": "color"
|
|
640
|
+
},
|
|
641
|
+
"warning": {
|
|
642
|
+
"value": "#E69F00",
|
|
643
|
+
"type": "color"
|
|
644
|
+
},
|
|
645
|
+
"error": {
|
|
646
|
+
"value": "#ef5350",
|
|
647
|
+
"type": "color"
|
|
648
|
+
},
|
|
649
|
+
"info": {
|
|
650
|
+
"value": "#3498DB",
|
|
651
|
+
"type": "color"
|
|
652
|
+
}
|
|
653
|
+
},
|
|
618
654
|
"presentation": {
|
|
619
655
|
"accent": {
|
|
620
656
|
"value": "#3498DB",
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"$description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
43
43
|
},
|
|
44
44
|
"sunken": {
|
|
45
|
-
"$value": "#
|
|
45
|
+
"$value": "#f7f7f6",
|
|
46
46
|
"$type": "color",
|
|
47
47
|
"$extensions": {
|
|
48
48
|
"com.dataimago.theme": {
|
|
49
49
|
"dark": "#0c0a09"
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
|
-
"$description": "Input fields,
|
|
52
|
+
"$description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
53
53
|
},
|
|
54
54
|
"navbar": {
|
|
55
55
|
"$value": "#ededeb",
|
|
@@ -72,14 +72,14 @@
|
|
|
72
72
|
"$description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
73
73
|
},
|
|
74
74
|
"code": {
|
|
75
|
-
"$value": "#
|
|
75
|
+
"$value": "#f7f7f6",
|
|
76
76
|
"$type": "color",
|
|
77
77
|
"$extensions": {
|
|
78
78
|
"com.dataimago.theme": {
|
|
79
79
|
"dark": "#1c1917"
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
|
-
"$description": "Code block and inline code background"
|
|
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
83
|
}
|
|
84
84
|
},
|
|
85
85
|
"border": {
|
|
@@ -228,6 +228,48 @@
|
|
|
228
228
|
"$description": "Focus indicators — mirrors interactive.primary"
|
|
229
229
|
}
|
|
230
230
|
},
|
|
231
|
+
"state": {
|
|
232
|
+
"success": {
|
|
233
|
+
"$value": "#007a58",
|
|
234
|
+
"$type": "color",
|
|
235
|
+
"$extensions": {
|
|
236
|
+
"com.dataimago.theme": {
|
|
237
|
+
"dark": "#009E73"
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
"$description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
241
|
+
},
|
|
242
|
+
"warning": {
|
|
243
|
+
"$value": "#906306",
|
|
244
|
+
"$type": "color",
|
|
245
|
+
"$extensions": {
|
|
246
|
+
"com.dataimago.theme": {
|
|
247
|
+
"dark": "#E69F00"
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
"$description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
251
|
+
},
|
|
252
|
+
"error": {
|
|
253
|
+
"$value": "#a4262c",
|
|
254
|
+
"$type": "color",
|
|
255
|
+
"$extensions": {
|
|
256
|
+
"com.dataimago.theme": {
|
|
257
|
+
"dark": "#ef5350"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
"$description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
261
|
+
},
|
|
262
|
+
"info": {
|
|
263
|
+
"$value": "#1f618d",
|
|
264
|
+
"$type": "color",
|
|
265
|
+
"$extensions": {
|
|
266
|
+
"com.dataimago.theme": {
|
|
267
|
+
"dark": "#3498DB"
|
|
268
|
+
}
|
|
269
|
+
},
|
|
270
|
+
"$description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
231
273
|
"presentation": {
|
|
232
274
|
"accent": {
|
|
233
275
|
"$value": "#3498DB",
|
package/package.json
CHANGED
package/src/colors.json
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"paper": {
|
|
41
41
|
"50": { "value": "#fefdfb", "description": "Paper scale — lightest warm surface; renamed from cream — reserved for elevated cards/modals when warm tint is desired" },
|
|
42
42
|
"100": { "value": "#fdf9f2", "description": "Paper scale — warm page-background option (legacy cream-100); not the primary surface in this iteration" },
|
|
43
|
-
"200": { "value": "#faf2e3", "description": "Paper scale —
|
|
43
|
+
"200": { "value": "#faf2e3", "description": "Paper scale — pull-quote background; warm tint reads as 'paper' (code blocks and sunken surfaces moved to the card colour, 2026-11-02)" },
|
|
44
44
|
"300": { "value": "#f5e8cf", "description": "Paper scale — call-out / emphasised panel background" },
|
|
45
45
|
"400": { "value": "#edd9b3", "description": "Paper scale — muted warm accent" },
|
|
46
46
|
"500": { "value": "#e0c088", "description": "Paper scale — strong warm accent; wheat" }
|
|
@@ -74,20 +74,20 @@
|
|
|
74
74
|
},
|
|
75
75
|
"functional": {
|
|
76
76
|
"success": {
|
|
77
|
-
"value": "#
|
|
78
|
-
"description": "Success
|
|
77
|
+
"value": "#009E73",
|
|
78
|
+
"description": "Success hue (Okabe-Ito bluish-green, 2026-11-02; was Flat-UI #27AE60). For text use the mode-aware color.state.success"
|
|
79
79
|
},
|
|
80
80
|
"warning": {
|
|
81
|
-
"value": "#
|
|
82
|
-
"description": "Warning
|
|
81
|
+
"value": "#E69F00",
|
|
82
|
+
"description": "Warning hue (Okabe-Ito orange, 2026-11-02; was Flat-UI #F39C12). For text use the mode-aware color.state.warning"
|
|
83
83
|
},
|
|
84
84
|
"error": {
|
|
85
|
-
"value": "#
|
|
86
|
-
"description": "Error
|
|
85
|
+
"value": "#ef5350",
|
|
86
|
+
"description": "Error hue (red, 2026-11-02; was Flat-UI #E74C3C). For text use the mode-aware color.state.error"
|
|
87
87
|
},
|
|
88
88
|
"info": {
|
|
89
89
|
"value": "#3498DB",
|
|
90
|
-
"description": "
|
|
90
|
+
"description": "Info hue (the slate accent). For text use the mode-aware color.state.info"
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
package/src/theme-colors-p3.json
CHANGED
|
@@ -55,16 +55,16 @@
|
|
|
55
55
|
},
|
|
56
56
|
"sunken": {
|
|
57
57
|
"light": {
|
|
58
|
-
"srgb": "#
|
|
59
|
-
"oklch": "oklch(
|
|
60
|
-
"p3": "color(display-p3 0.
|
|
58
|
+
"srgb": "#f7f7f6",
|
|
59
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
60
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
61
61
|
},
|
|
62
62
|
"dark": {
|
|
63
63
|
"srgb": "#0c0a09",
|
|
64
64
|
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
65
65
|
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
66
66
|
},
|
|
67
|
-
"description": "Input fields,
|
|
67
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
68
68
|
},
|
|
69
69
|
"navbar": {
|
|
70
70
|
"light": {
|
|
@@ -94,16 +94,16 @@
|
|
|
94
94
|
},
|
|
95
95
|
"code": {
|
|
96
96
|
"light": {
|
|
97
|
-
"srgb": "#
|
|
98
|
-
"oklch": "oklch(
|
|
99
|
-
"p3": "color(display-p3 0.
|
|
97
|
+
"srgb": "#f7f7f6",
|
|
98
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
99
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
100
100
|
},
|
|
101
101
|
"dark": {
|
|
102
102
|
"srgb": "#1c1917",
|
|
103
103
|
"oklch": "oklch(21.61% 0.0061 56.04)",
|
|
104
104
|
"p3": "color(display-p3 0.1078 0.0985 0.0911)"
|
|
105
105
|
},
|
|
106
|
-
"description": "Code block and inline code background"
|
|
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
107
|
}
|
|
108
108
|
},
|
|
109
109
|
"border": {
|
|
@@ -294,6 +294,60 @@
|
|
|
294
294
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
295
295
|
}
|
|
296
296
|
},
|
|
297
|
+
"state": {
|
|
298
|
+
"success": {
|
|
299
|
+
"light": {
|
|
300
|
+
"srgb": "#007a58",
|
|
301
|
+
"oklch": "oklch(51.36% 0.1073 165.46)",
|
|
302
|
+
"p3": "color(display-p3 0.2046 0.471 0.3541)"
|
|
303
|
+
},
|
|
304
|
+
"dark": {
|
|
305
|
+
"srgb": "#009e73",
|
|
306
|
+
"oklch": "oklch(61.98% 0.1295 165.46)",
|
|
307
|
+
"p3": "color(display-p3 0.2733 0.6102 0.4624)"
|
|
308
|
+
},
|
|
309
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
310
|
+
},
|
|
311
|
+
"warning": {
|
|
312
|
+
"light": {
|
|
313
|
+
"srgb": "#906306",
|
|
314
|
+
"oklch": "oklch(53.38% 0.1098 77.05)",
|
|
315
|
+
"p3": "color(display-p3 0.5386 0.3957 0.1307)"
|
|
316
|
+
},
|
|
317
|
+
"dark": {
|
|
318
|
+
"srgb": "#e69f00",
|
|
319
|
+
"oklch": "oklch(75.27% 0.1576 76.77)",
|
|
320
|
+
"p3": "color(display-p3 0.861 0.6354 0.2169)"
|
|
321
|
+
},
|
|
322
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
323
|
+
},
|
|
324
|
+
"error": {
|
|
325
|
+
"light": {
|
|
326
|
+
"srgb": "#a4262c",
|
|
327
|
+
"oklch": "oklch(47.54% 0.1619 23.66)",
|
|
328
|
+
"p3": "color(display-p3 0.5915 0.1933 0.192)"
|
|
329
|
+
},
|
|
330
|
+
"dark": {
|
|
331
|
+
"srgb": "#ef5350",
|
|
332
|
+
"oklch": "oklch(65.39% 0.1926 25.14)",
|
|
333
|
+
"p3": "color(display-p3 0.8678 0.3692 0.339)"
|
|
334
|
+
},
|
|
335
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
336
|
+
},
|
|
337
|
+
"info": {
|
|
338
|
+
"light": {
|
|
339
|
+
"srgb": "#1f618d",
|
|
340
|
+
"oklch": "oklch(47.31% 0.0963 242.42)",
|
|
341
|
+
"p3": "color(display-p3 0.198 0.375 0.5385)"
|
|
342
|
+
},
|
|
343
|
+
"dark": {
|
|
344
|
+
"srgb": "#3498db",
|
|
345
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
346
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
347
|
+
},
|
|
348
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
349
|
+
}
|
|
350
|
+
},
|
|
297
351
|
"presentation": {
|
|
298
352
|
"accent": {
|
|
299
353
|
"light": {
|
package/src/theme-colors.json
CHANGED
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
23
23
|
},
|
|
24
24
|
"sunken": {
|
|
25
|
-
"light": "#
|
|
25
|
+
"light": "#f7f7f6",
|
|
26
26
|
"dark": "#0c0a09",
|
|
27
|
-
"description": "Input fields,
|
|
27
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
28
28
|
},
|
|
29
29
|
"navbar": {
|
|
30
30
|
"light": "#ededeb",
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
38
38
|
},
|
|
39
39
|
"code": {
|
|
40
|
-
"light": "#
|
|
40
|
+
"light": "#f7f7f6",
|
|
41
41
|
"dark": "#1c1917",
|
|
42
|
-
"description": "Code block and inline code background"
|
|
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
43
|
}
|
|
44
44
|
},
|
|
45
45
|
"border": {
|
|
@@ -118,6 +118,28 @@
|
|
|
118
118
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
|
+
"state": {
|
|
122
|
+
"success": {
|
|
123
|
+
"light": "#007a58",
|
|
124
|
+
"dark": "#009E73",
|
|
125
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
126
|
+
},
|
|
127
|
+
"warning": {
|
|
128
|
+
"light": "#906306",
|
|
129
|
+
"dark": "#E69F00",
|
|
130
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
131
|
+
},
|
|
132
|
+
"error": {
|
|
133
|
+
"light": "#a4262c",
|
|
134
|
+
"dark": "#ef5350",
|
|
135
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
136
|
+
},
|
|
137
|
+
"info": {
|
|
138
|
+
"light": "#1f618d",
|
|
139
|
+
"dark": "#3498DB",
|
|
140
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
121
143
|
"presentation": {
|
|
122
144
|
"accent": {
|
|
123
145
|
"light": "#3498DB",
|