@dataimago/tokens-neutral 0.1.0-alpha.10 → 0.1.0-alpha.12

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 (13) hide show
  1. package/dist/colors.json +1 -1
  2. package/dist/dataviz.json +93 -0
  3. package/dist/index.cjs +94 -5
  4. package/dist/index.mjs +94 -5
  5. package/dist/theme-colors.json +5 -5
  6. package/dist/tokens.css +33 -4
  7. package/dist/tokens.dtcg.json +5 -5
  8. package/dist/tokens.scss +33 -4
  9. package/dist/tokens.studio.json +115 -3
  10. package/dist/tokens.w3c.dtcg.json +133 -5
  11. package/package.json +1 -1
  12. package/src/colors.json +1 -1
  13. package/src/theme-colors.json +2 -2
package/dist/colors.json CHANGED
@@ -66,7 +66,7 @@
66
66
  },
67
67
  "500": {
68
68
  "value": "#7c7c7c",
69
- "description": "Stone scale — secondary text"
69
+ "description": "Stone scale — icons and large decorative marks; 3.6:1 on stone-100, below the 4.5:1 text floor (secondary text is stone-700)"
70
70
  },
71
71
  "600": {
72
72
  "value": "#5e5e5c",
package/dist/dataviz.json ADDED
@@ -0,0 +1,93 @@
1
+ {
2
+ "color": {
3
+ "dataviz": {
4
+ "okabe-ito": {
5
+ "orange": {
6
+ "value": "#E69F00",
7
+ "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
8
+ },
9
+ "sky-blue": {
10
+ "value": "#56B4E9",
11
+ "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
12
+ },
13
+ "bluish-green": {
14
+ "value": "#009E73",
15
+ "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
16
+ },
17
+ "yellow": {
18
+ "value": "#F0E442",
19
+ "description": "Okabe-Ito yellow — 1.13:1 on the light page: never use it without a mark outline or a label (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
20
+ },
21
+ "blue": {
22
+ "value": "#0072B2",
23
+ "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
24
+ },
25
+ "vermillion": {
26
+ "value": "#D55E00",
27
+ "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
28
+ },
29
+ "reddish-purple": {
30
+ "value": "#CC79A7",
31
+ "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
32
+ },
33
+ "black": {
34
+ "light": "#000000",
35
+ "dark": "#FDF9F2",
36
+ "description": "Okabe-Ito black (Okabe & Ito 2008). In dark mode it becomes content.primary.dark: #000000 is 1.14:1 on the dark page. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
37
+ }
38
+ },
39
+ "categorical": {
40
+ "1": {
41
+ "value": "#E69F00",
42
+ "description": "= okabe-ito.orange (slot 1, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
43
+ },
44
+ "2": {
45
+ "value": "#56B4E9",
46
+ "description": "= okabe-ito.sky-blue (slot 2, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
47
+ },
48
+ "3": {
49
+ "value": "#009E73",
50
+ "description": "= okabe-ito.bluish-green (slot 3, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
51
+ },
52
+ "4": {
53
+ "value": "#F0E442",
54
+ "description": "= okabe-ito.yellow (slot 4, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
55
+ },
56
+ "5": {
57
+ "value": "#0072B2",
58
+ "description": "= okabe-ito.blue (slot 5, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
59
+ },
60
+ "6": {
61
+ "value": "#D55E00",
62
+ "description": "= okabe-ito.vermillion (slot 6, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
63
+ },
64
+ "7": {
65
+ "value": "#CC79A7",
66
+ "description": "= okabe-ito.reddish-purple (slot 7, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
67
+ },
68
+ "8": {
69
+ "light": "#000000",
70
+ "dark": "#FDF9F2",
71
+ "description": "= okabe-ito.black (slot 8, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
72
+ }
73
+ },
74
+ "uncertainty": {
75
+ "outer": {
76
+ "light": "#D6D6D6",
77
+ "dark": "#333333",
78
+ "description": "Outermost nested uncertainty band (gray 0.84 in the LIwLD PSTricks figures). The ramp is mirrored in dark mode so the innermost band stays the strongest. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
79
+ },
80
+ "union": {
81
+ "light": "#9E9E9E",
82
+ "dark": "#6B6B6B",
83
+ "description": "Union band (gray 0.62); mirrored in dark mode. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
84
+ },
85
+ "inner": {
86
+ "light": "#333333",
87
+ "dark": "#D6D6D6",
88
+ "description": "Innermost band (gray 0.20); mirrored in dark mode, where #333333 would be 1.46:1. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
89
+ }
90
+ }
91
+ }
92
+ }
93
+ }
package/dist/index.cjs CHANGED
@@ -72,14 +72,14 @@ const tokens = {
72
72
  "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface"
73
73
  },
74
74
  "secondary": {
75
- "light": "#7c7c7c",
75
+ "light": "#424240",
76
76
  "dark": "#a8a29e",
77
- "description": "Secondary text — stone-500 (light) / ink-300 (dark)"
77
+ "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)"
78
78
  },
79
79
  "muted": {
80
- "light": "#78716c",
81
- "dark": "#78716c",
82
- "description": "Muted text — captions, meta info"
80
+ "light": "#5e5e5c",
81
+ "dark": "#89827d",
82
+ "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"
83
83
  },
84
84
  "inverse": {
85
85
  "light": "#fdf9f2",
@@ -108,6 +108,95 @@ const tokens = {
108
108
  "dark": "#d6d3d1",
109
109
  "description": "Focus indicators — mirrors interactive.primary"
110
110
  }
111
+ },
112
+ "dataviz": {
113
+ "okabe-ito": {
114
+ "orange": {
115
+ "value": "#E69F00",
116
+ "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
117
+ },
118
+ "sky-blue": {
119
+ "value": "#56B4E9",
120
+ "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
121
+ },
122
+ "bluish-green": {
123
+ "value": "#009E73",
124
+ "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
125
+ },
126
+ "yellow": {
127
+ "value": "#F0E442",
128
+ "description": "Okabe-Ito yellow — 1.13:1 on the light page: never use it without a mark outline or a label (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
129
+ },
130
+ "blue": {
131
+ "value": "#0072B2",
132
+ "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
133
+ },
134
+ "vermillion": {
135
+ "value": "#D55E00",
136
+ "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
137
+ },
138
+ "reddish-purple": {
139
+ "value": "#CC79A7",
140
+ "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
141
+ },
142
+ "black": {
143
+ "light": "#000000",
144
+ "dark": "#FDF9F2",
145
+ "description": "Okabe-Ito black (Okabe & Ito 2008). In dark mode it becomes content.primary.dark: #000000 is 1.14:1 on the dark page. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
146
+ }
147
+ },
148
+ "categorical": {
149
+ "1": {
150
+ "value": "#E69F00",
151
+ "description": "= okabe-ito.orange (slot 1, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
152
+ },
153
+ "2": {
154
+ "value": "#56B4E9",
155
+ "description": "= okabe-ito.sky-blue (slot 2, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
156
+ },
157
+ "3": {
158
+ "value": "#009E73",
159
+ "description": "= okabe-ito.bluish-green (slot 3, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
160
+ },
161
+ "4": {
162
+ "value": "#F0E442",
163
+ "description": "= okabe-ito.yellow (slot 4, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
164
+ },
165
+ "5": {
166
+ "value": "#0072B2",
167
+ "description": "= okabe-ito.blue (slot 5, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
168
+ },
169
+ "6": {
170
+ "value": "#D55E00",
171
+ "description": "= okabe-ito.vermillion (slot 6, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
172
+ },
173
+ "7": {
174
+ "value": "#CC79A7",
175
+ "description": "= okabe-ito.reddish-purple (slot 7, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
176
+ },
177
+ "8": {
178
+ "light": "#000000",
179
+ "dark": "#FDF9F2",
180
+ "description": "= okabe-ito.black (slot 8, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
181
+ }
182
+ },
183
+ "uncertainty": {
184
+ "outer": {
185
+ "light": "#D6D6D6",
186
+ "dark": "#333333",
187
+ "description": "Outermost nested uncertainty band (gray 0.84 in the LIwLD PSTricks figures). The ramp is mirrored in dark mode so the innermost band stays the strongest. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
188
+ },
189
+ "union": {
190
+ "light": "#9E9E9E",
191
+ "dark": "#6B6B6B",
192
+ "description": "Union band (gray 0.62); mirrored in dark mode. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
193
+ },
194
+ "inner": {
195
+ "light": "#333333",
196
+ "dark": "#D6D6D6",
197
+ "description": "Innermost band (gray 0.20); mirrored in dark mode, where #333333 would be 1.46:1. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
198
+ }
199
+ }
111
200
  }
112
201
  },
113
202
  "spacing": {
package/dist/index.mjs CHANGED
@@ -72,14 +72,14 @@ const tokens = {
72
72
  "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface"
73
73
  },
74
74
  "secondary": {
75
- "light": "#7c7c7c",
75
+ "light": "#424240",
76
76
  "dark": "#a8a29e",
77
- "description": "Secondary text — stone-500 (light) / ink-300 (dark)"
77
+ "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)"
78
78
  },
79
79
  "muted": {
80
- "light": "#78716c",
81
- "dark": "#78716c",
82
- "description": "Muted text — captions, meta info"
80
+ "light": "#5e5e5c",
81
+ "dark": "#89827d",
82
+ "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"
83
83
  },
84
84
  "inverse": {
85
85
  "light": "#fdf9f2",
@@ -108,6 +108,95 @@ const tokens = {
108
108
  "dark": "#d6d3d1",
109
109
  "description": "Focus indicators — mirrors interactive.primary"
110
110
  }
111
+ },
112
+ "dataviz": {
113
+ "okabe-ito": {
114
+ "orange": {
115
+ "value": "#E69F00",
116
+ "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
117
+ },
118
+ "sky-blue": {
119
+ "value": "#56B4E9",
120
+ "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
121
+ },
122
+ "bluish-green": {
123
+ "value": "#009E73",
124
+ "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
125
+ },
126
+ "yellow": {
127
+ "value": "#F0E442",
128
+ "description": "Okabe-Ito yellow — 1.13:1 on the light page: never use it without a mark outline or a label (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
129
+ },
130
+ "blue": {
131
+ "value": "#0072B2",
132
+ "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
133
+ },
134
+ "vermillion": {
135
+ "value": "#D55E00",
136
+ "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
137
+ },
138
+ "reddish-purple": {
139
+ "value": "#CC79A7",
140
+ "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
141
+ },
142
+ "black": {
143
+ "light": "#000000",
144
+ "dark": "#FDF9F2",
145
+ "description": "Okabe-Ito black (Okabe & Ito 2008). In dark mode it becomes content.primary.dark: #000000 is 1.14:1 on the dark page. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
146
+ }
147
+ },
148
+ "categorical": {
149
+ "1": {
150
+ "value": "#E69F00",
151
+ "description": "= okabe-ito.orange (slot 1, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
152
+ },
153
+ "2": {
154
+ "value": "#56B4E9",
155
+ "description": "= okabe-ito.sky-blue (slot 2, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
156
+ },
157
+ "3": {
158
+ "value": "#009E73",
159
+ "description": "= okabe-ito.bluish-green (slot 3, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
160
+ },
161
+ "4": {
162
+ "value": "#F0E442",
163
+ "description": "= okabe-ito.yellow (slot 4, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
164
+ },
165
+ "5": {
166
+ "value": "#0072B2",
167
+ "description": "= okabe-ito.blue (slot 5, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
168
+ },
169
+ "6": {
170
+ "value": "#D55E00",
171
+ "description": "= okabe-ito.vermillion (slot 6, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
172
+ },
173
+ "7": {
174
+ "value": "#CC79A7",
175
+ "description": "= okabe-ito.reddish-purple (slot 7, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
176
+ },
177
+ "8": {
178
+ "light": "#000000",
179
+ "dark": "#FDF9F2",
180
+ "description": "= okabe-ito.black (slot 8, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
181
+ }
182
+ },
183
+ "uncertainty": {
184
+ "outer": {
185
+ "light": "#D6D6D6",
186
+ "dark": "#333333",
187
+ "description": "Outermost nested uncertainty band (gray 0.84 in the LIwLD PSTricks figures). The ramp is mirrored in dark mode so the innermost band stays the strongest. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
188
+ },
189
+ "union": {
190
+ "light": "#9E9E9E",
191
+ "dark": "#6B6B6B",
192
+ "description": "Union band (gray 0.62); mirrored in dark mode. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
193
+ },
194
+ "inner": {
195
+ "light": "#333333",
196
+ "dark": "#D6D6D6",
197
+ "description": "Innermost band (gray 0.20); mirrored in dark mode, where #333333 would be 1.46:1. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
198
+ }
199
+ }
111
200
  }
112
201
  },
113
202
  "spacing": {
package/dist/theme-colors.json CHANGED
@@ -71,14 +71,14 @@
71
71
  "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface"
72
72
  },
73
73
  "secondary": {
74
- "light": "#7c7c7c",
74
+ "light": "#424240",
75
75
  "dark": "#a8a29e",
76
- "description": "Secondary text — stone-500 (light) / ink-300 (dark)"
76
+ "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)"
77
77
  },
78
78
  "muted": {
79
- "light": "#78716c",
80
- "dark": "#78716c",
81
- "description": "Muted text — captions, meta info"
79
+ "light": "#5e5e5c",
80
+ "dark": "#89827d",
81
+ "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"
82
82
  },
83
83
  "inverse": {
84
84
  "light": "#fdf9f2",
package/dist/tokens.css CHANGED
@@ -86,6 +86,20 @@
86
86
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
87
87
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
88
88
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
89
+ --color-dataviz-okabe-ito-orange: #E69F00;
90
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
91
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
92
+ --color-dataviz-okabe-ito-yellow: #F0E442;
93
+ --color-dataviz-okabe-ito-blue: #0072B2;
94
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
95
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
96
+ --color-dataviz-categorical-1: #E69F00;
97
+ --color-dataviz-categorical-2: #56B4E9;
98
+ --color-dataviz-categorical-3: #009E73;
99
+ --color-dataviz-categorical-4: #F0E442;
100
+ --color-dataviz-categorical-5: #0072B2;
101
+ --color-dataviz-categorical-6: #D55E00;
102
+ --color-dataviz-categorical-7: #CC79A7;
89
103
  }
90
104
 
91
105
  :root, [data-bs-theme="light"] {
@@ -102,8 +116,8 @@
102
116
  --color-border-card: rgba(12, 10, 9, 0.60);
103
117
  --color-border-code: #d6d3d1;
104
118
  --color-content-primary: #14140f;
105
- --color-content-secondary: #7c7c7c;
106
- --color-content-muted: #78716c;
119
+ --color-content-secondary: #424240;
120
+ --color-content-muted: #5e5e5c;
107
121
  --color-content-inverse: #fdf9f2;
108
122
  --color-interactive-primary: #292524;
109
123
  --color-interactive-hover: #1c1917;
@@ -121,6 +135,11 @@
121
135
  --border-focus: #3498DB;
122
136
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
123
137
  --navigation-active-background: rgba(20, 20, 16, 0.1);
138
+ --color-dataviz-okabe-ito-black: #000000;
139
+ --color-dataviz-categorical-8: #000000;
140
+ --color-dataviz-uncertainty-outer: #D6D6D6;
141
+ --color-dataviz-uncertainty-union: #9E9E9E;
142
+ --color-dataviz-uncertainty-inner: #333333;
124
143
  }
125
144
 
126
145
  [data-bs-theme="dark"] {
@@ -138,7 +157,7 @@
138
157
  --color-border-code: #292524;
139
158
  --color-content-primary: #fdf9f2;
140
159
  --color-content-secondary: #a8a29e;
141
- --color-content-muted: #78716c;
160
+ --color-content-muted: #89827d;
142
161
  --color-content-inverse: #0c0a09;
143
162
  --color-interactive-primary: #d6d3d1;
144
163
  --color-interactive-hover: #a8a29e;
@@ -156,6 +175,11 @@
156
175
  --border-focus: #4FC3F7;
157
176
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
158
177
  --navigation-active-background: rgba(237, 237, 235, 0.1);
178
+ --color-dataviz-okabe-ito-black: #FDF9F2;
179
+ --color-dataviz-categorical-8: #FDF9F2;
180
+ --color-dataviz-uncertainty-outer: #333333;
181
+ --color-dataviz-uncertainty-union: #6B6B6B;
182
+ --color-dataviz-uncertainty-inner: #D6D6D6;
159
183
  }
160
184
 
161
185
  @media (prefers-color-scheme: dark) {
@@ -174,7 +198,7 @@
174
198
  --color-border-code: #292524;
175
199
  --color-content-primary: #fdf9f2;
176
200
  --color-content-secondary: #a8a29e;
177
- --color-content-muted: #78716c;
201
+ --color-content-muted: #89827d;
178
202
  --color-content-inverse: #0c0a09;
179
203
  --color-interactive-primary: #d6d3d1;
180
204
  --color-interactive-hover: #a8a29e;
@@ -192,5 +216,10 @@
192
216
  --border-focus: #4FC3F7;
193
217
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
194
218
  --navigation-active-background: rgba(237, 237, 235, 0.1);
219
+ --color-dataviz-okabe-ito-black: #FDF9F2;
220
+ --color-dataviz-categorical-8: #FDF9F2;
221
+ --color-dataviz-uncertainty-outer: #333333;
222
+ --color-dataviz-uncertainty-union: #6B6B6B;
223
+ --color-dataviz-uncertainty-inner: #D6D6D6;
195
224
  }
196
225
  }
package/dist/tokens.dtcg.json CHANGED
@@ -111,19 +111,19 @@
111
111
  },
112
112
  "secondary": {
113
113
  "$value": {
114
- "light": "#7c7c7c",
114
+ "light": "#424240",
115
115
  "dark": "#a8a29e"
116
116
  },
117
117
  "$type": "color",
118
- "$description": "Secondary text — stone-500 (light) / ink-300 (dark)"
118
+ "$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)"
119
119
  },
120
120
  "muted": {
121
121
  "$value": {
122
- "light": "#78716c",
123
- "dark": "#78716c"
122
+ "light": "#5e5e5c",
123
+ "dark": "#89827d"
124
124
  },
125
125
  "$type": "color",
126
- "$description": "Muted text — captions, meta info"
126
+ "$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"
127
127
  },
128
128
  "inverse": {
129
129
  "$value": {
package/dist/tokens.scss CHANGED
@@ -86,6 +86,20 @@
86
86
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
87
87
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
88
88
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
89
+ --color-dataviz-okabe-ito-orange: #E69F00;
90
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
91
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
92
+ --color-dataviz-okabe-ito-yellow: #F0E442;
93
+ --color-dataviz-okabe-ito-blue: #0072B2;
94
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
95
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
96
+ --color-dataviz-categorical-1: #E69F00;
97
+ --color-dataviz-categorical-2: #56B4E9;
98
+ --color-dataviz-categorical-3: #009E73;
99
+ --color-dataviz-categorical-4: #F0E442;
100
+ --color-dataviz-categorical-5: #0072B2;
101
+ --color-dataviz-categorical-6: #D55E00;
102
+ --color-dataviz-categorical-7: #CC79A7;
89
103
  }
90
104
 
91
105
  :root, [data-bs-theme="light"] {
@@ -102,8 +116,8 @@
102
116
  --color-border-card: rgba(12, 10, 9, 0.60);
103
117
  --color-border-code: #d6d3d1;
104
118
  --color-content-primary: #14140f;
105
- --color-content-secondary: #7c7c7c;
106
- --color-content-muted: #78716c;
119
+ --color-content-secondary: #424240;
120
+ --color-content-muted: #5e5e5c;
107
121
  --color-content-inverse: #fdf9f2;
108
122
  --color-interactive-primary: #292524;
109
123
  --color-interactive-hover: #1c1917;
@@ -121,6 +135,11 @@
121
135
  --border-focus: #3498DB;
122
136
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
123
137
  --navigation-active-background: rgba(20, 20, 16, 0.1);
138
+ --color-dataviz-okabe-ito-black: #000000;
139
+ --color-dataviz-categorical-8: #000000;
140
+ --color-dataviz-uncertainty-outer: #D6D6D6;
141
+ --color-dataviz-uncertainty-union: #9E9E9E;
142
+ --color-dataviz-uncertainty-inner: #333333;
124
143
  }
125
144
 
126
145
  [data-bs-theme="dark"] {
@@ -138,7 +157,7 @@
138
157
  --color-border-code: #292524;
139
158
  --color-content-primary: #fdf9f2;
140
159
  --color-content-secondary: #a8a29e;
141
- --color-content-muted: #78716c;
160
+ --color-content-muted: #89827d;
142
161
  --color-content-inverse: #0c0a09;
143
162
  --color-interactive-primary: #d6d3d1;
144
163
  --color-interactive-hover: #a8a29e;
@@ -156,6 +175,11 @@
156
175
  --border-focus: #4FC3F7;
157
176
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
158
177
  --navigation-active-background: rgba(237, 237, 235, 0.1);
178
+ --color-dataviz-okabe-ito-black: #FDF9F2;
179
+ --color-dataviz-categorical-8: #FDF9F2;
180
+ --color-dataviz-uncertainty-outer: #333333;
181
+ --color-dataviz-uncertainty-union: #6B6B6B;
182
+ --color-dataviz-uncertainty-inner: #D6D6D6;
159
183
  }
160
184
 
161
185
  @media (prefers-color-scheme: dark) {
@@ -174,7 +198,7 @@
174
198
  --color-border-code: #292524;
175
199
  --color-content-primary: #fdf9f2;
176
200
  --color-content-secondary: #a8a29e;
177
- --color-content-muted: #78716c;
201
+ --color-content-muted: #89827d;
178
202
  --color-content-inverse: #0c0a09;
179
203
  --color-interactive-primary: #d6d3d1;
180
204
  --color-interactive-hover: #a8a29e;
@@ -192,5 +216,10 @@
192
216
  --border-focus: #4FC3F7;
193
217
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
194
218
  --navigation-active-background: rgba(237, 237, 235, 0.1);
219
+ --color-dataviz-okabe-ito-black: #FDF9F2;
220
+ --color-dataviz-categorical-8: #FDF9F2;
221
+ --color-dataviz-uncertainty-outer: #333333;
222
+ --color-dataviz-uncertainty-union: #6B6B6B;
223
+ --color-dataviz-uncertainty-inner: #D6D6D6;
195
224
  }
196
225
  }
package/dist/tokens.studio.json CHANGED
@@ -59,11 +59,11 @@
59
59
  "type": "color"
60
60
  },
61
61
  "secondary": {
62
- "value": "#7c7c7c",
62
+ "value": "#424240",
63
63
  "type": "color"
64
64
  },
65
65
  "muted": {
66
- "value": "#78716c",
66
+ "value": "#5e5e5c",
67
67
  "type": "color"
68
68
  },
69
69
  "inverse": {
@@ -88,6 +88,90 @@
88
88
  "value": "#292524",
89
89
  "type": "color"
90
90
  }
91
+ },
92
+ "dataviz": {
93
+ "okabe-ito": {
94
+ "orange": {
95
+ "value": "#E69F00",
96
+ "type": "color"
97
+ },
98
+ "sky-blue": {
99
+ "value": "#56B4E9",
100
+ "type": "color"
101
+ },
102
+ "bluish-green": {
103
+ "value": "#009E73",
104
+ "type": "color"
105
+ },
106
+ "yellow": {
107
+ "value": "#F0E442",
108
+ "type": "color"
109
+ },
110
+ "blue": {
111
+ "value": "#0072B2",
112
+ "type": "color"
113
+ },
114
+ "vermillion": {
115
+ "value": "#D55E00",
116
+ "type": "color"
117
+ },
118
+ "reddish-purple": {
119
+ "value": "#CC79A7",
120
+ "type": "color"
121
+ },
122
+ "black": {
123
+ "value": "#000000",
124
+ "type": "color"
125
+ }
126
+ },
127
+ "categorical": {
128
+ "1": {
129
+ "value": "#E69F00",
130
+ "type": "color"
131
+ },
132
+ "2": {
133
+ "value": "#56B4E9",
134
+ "type": "color"
135
+ },
136
+ "3": {
137
+ "value": "#009E73",
138
+ "type": "color"
139
+ },
140
+ "4": {
141
+ "value": "#F0E442",
142
+ "type": "color"
143
+ },
144
+ "5": {
145
+ "value": "#0072B2",
146
+ "type": "color"
147
+ },
148
+ "6": {
149
+ "value": "#D55E00",
150
+ "type": "color"
151
+ },
152
+ "7": {
153
+ "value": "#CC79A7",
154
+ "type": "color"
155
+ },
156
+ "8": {
157
+ "value": "#000000",
158
+ "type": "color"
159
+ }
160
+ },
161
+ "uncertainty": {
162
+ "outer": {
163
+ "value": "#D6D6D6",
164
+ "type": "color"
165
+ },
166
+ "union": {
167
+ "value": "#9E9E9E",
168
+ "type": "color"
169
+ },
170
+ "inner": {
171
+ "value": "#333333",
172
+ "type": "color"
173
+ }
174
+ }
91
175
  }
92
176
  },
93
177
  "shadow": {
@@ -429,7 +513,7 @@
429
513
  "type": "color"
430
514
  },
431
515
  "muted": {
432
- "value": "#78716c",
516
+ "value": "#89827d",
433
517
  "type": "color"
434
518
  },
435
519
  "inverse": {
@@ -454,6 +538,34 @@
454
538
  "value": "#d6d3d1",
455
539
  "type": "color"
456
540
  }
541
+ },
542
+ "dataviz": {
543
+ "okabe-ito": {
544
+ "black": {
545
+ "value": "#FDF9F2",
546
+ "type": "color"
547
+ }
548
+ },
549
+ "categorical": {
550
+ "8": {
551
+ "value": "#FDF9F2",
552
+ "type": "color"
553
+ }
554
+ },
555
+ "uncertainty": {
556
+ "outer": {
557
+ "value": "#333333",
558
+ "type": "color"
559
+ },
560
+ "union": {
561
+ "value": "#6B6B6B",
562
+ "type": "color"
563
+ },
564
+ "inner": {
565
+ "value": "#D6D6D6",
566
+ "type": "color"
567
+ }
568
+ }
457
569
  }
458
570
  },
459
571
  "border": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -136,24 +136,24 @@
136
136
  "$description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface"
137
137
  },
138
138
  "secondary": {
139
- "$value": "#7c7c7c",
139
+ "$value": "#424240",
140
140
  "$type": "color",
141
141
  "$extensions": {
142
142
  "com.dataimago.theme": {
143
143
  "dark": "#a8a29e"
144
144
  }
145
145
  },
146
- "$description": "Secondary text — stone-500 (light) / ink-300 (dark)"
146
+ "$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)"
147
147
  },
148
148
  "muted": {
149
- "$value": "#78716c",
149
+ "$value": "#5e5e5c",
150
150
  "$type": "color",
151
151
  "$extensions": {
152
152
  "com.dataimago.theme": {
153
- "dark": "#78716c"
153
+ "dark": "#89827d"
154
154
  }
155
155
  },
156
- "$description": "Muted text — captions, meta info"
156
+ "$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"
157
157
  },
158
158
  "inverse": {
159
159
  "$value": "#fdf9f2",
@@ -207,6 +207,134 @@
207
207
  },
208
208
  "$description": "Focus indicators — mirrors interactive.primary"
209
209
  }
210
+ },
211
+ "dataviz": {
212
+ "okabe-ito": {
213
+ "orange": {
214
+ "$value": "#E69F00",
215
+ "$type": "color",
216
+ "$description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
217
+ },
218
+ "sky-blue": {
219
+ "$value": "#56B4E9",
220
+ "$type": "color",
221
+ "$description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
222
+ },
223
+ "bluish-green": {
224
+ "$value": "#009E73",
225
+ "$type": "color",
226
+ "$description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
227
+ },
228
+ "yellow": {
229
+ "$value": "#F0E442",
230
+ "$type": "color",
231
+ "$description": "Okabe-Ito yellow — 1.13:1 on the light page: never use it without a mark outline or a label (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
232
+ },
233
+ "blue": {
234
+ "$value": "#0072B2",
235
+ "$type": "color",
236
+ "$description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
237
+ },
238
+ "vermillion": {
239
+ "$value": "#D55E00",
240
+ "$type": "color",
241
+ "$description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
242
+ },
243
+ "reddish-purple": {
244
+ "$value": "#CC79A7",
245
+ "$type": "color",
246
+ "$description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
247
+ },
248
+ "black": {
249
+ "$value": "#000000",
250
+ "$type": "color",
251
+ "$extensions": {
252
+ "com.dataimago.theme": {
253
+ "dark": "#FDF9F2"
254
+ }
255
+ },
256
+ "$description": "Okabe-Ito black (Okabe & Ito 2008). In dark mode it becomes content.primary.dark: #000000 is 1.14:1 on the dark page. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
257
+ }
258
+ },
259
+ "categorical": {
260
+ "1": {
261
+ "$value": "#E69F00",
262
+ "$type": "color",
263
+ "$description": "= okabe-ito.orange (slot 1, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
264
+ },
265
+ "2": {
266
+ "$value": "#56B4E9",
267
+ "$type": "color",
268
+ "$description": "= okabe-ito.sky-blue (slot 2, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
269
+ },
270
+ "3": {
271
+ "$value": "#009E73",
272
+ "$type": "color",
273
+ "$description": "= okabe-ito.bluish-green (slot 3, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
274
+ },
275
+ "4": {
276
+ "$value": "#F0E442",
277
+ "$type": "color",
278
+ "$description": "= okabe-ito.yellow (slot 4, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
279
+ },
280
+ "5": {
281
+ "$value": "#0072B2",
282
+ "$type": "color",
283
+ "$description": "= okabe-ito.blue (slot 5, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
284
+ },
285
+ "6": {
286
+ "$value": "#D55E00",
287
+ "$type": "color",
288
+ "$description": "= okabe-ito.vermillion (slot 6, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
289
+ },
290
+ "7": {
291
+ "$value": "#CC79A7",
292
+ "$type": "color",
293
+ "$description": "= okabe-ito.reddish-purple (slot 7, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
294
+ },
295
+ "8": {
296
+ "$value": "#000000",
297
+ "$type": "color",
298
+ "$extensions": {
299
+ "com.dataimago.theme": {
300
+ "dark": "#FDF9F2"
301
+ }
302
+ },
303
+ "$description": "= okabe-ito.black (slot 8, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
304
+ }
305
+ },
306
+ "uncertainty": {
307
+ "outer": {
308
+ "$value": "#D6D6D6",
309
+ "$type": "color",
310
+ "$extensions": {
311
+ "com.dataimago.theme": {
312
+ "dark": "#333333"
313
+ }
314
+ },
315
+ "$description": "Outermost nested uncertainty band (gray 0.84 in the LIwLD PSTricks figures). The ramp is mirrored in dark mode so the innermost band stays the strongest. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
316
+ },
317
+ "union": {
318
+ "$value": "#9E9E9E",
319
+ "$type": "color",
320
+ "$extensions": {
321
+ "com.dataimago.theme": {
322
+ "dark": "#6B6B6B"
323
+ }
324
+ },
325
+ "$description": "Union band (gray 0.62); mirrored in dark mode. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
326
+ },
327
+ "inner": {
328
+ "$value": "#333333",
329
+ "$type": "color",
330
+ "$extensions": {
331
+ "com.dataimago.theme": {
332
+ "dark": "#D6D6D6"
333
+ }
334
+ },
335
+ "$description": "Innermost band (gray 0.20); mirrored in dark mode, where #333333 would be 1.46:1. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
336
+ }
337
+ }
210
338
  }
211
339
  },
212
340
  "shadow": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens-neutral",
3
- "version": "0.1.0-alpha.10",
3
+ "version": "0.1.0-alpha.12",
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/colors.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "200": { "value": "#dcdcda", "description": "Stone scale — borders, dividers" },
20
20
  "300": { "value": "#c1c1bf", "description": "Stone scale — pressed border / disabled chrome" },
21
21
  "400": { "value": "#a0a0a0", "description": "Stone scale — disabled text, muted icons" },
22
- "500": { "value": "#7c7c7c", "description": "Stone scale — secondary text" },
22
+ "500": { "value": "#7c7c7c", "description": "Stone scale — icons and large decorative marks; 3.6:1 on stone-100, below the 4.5:1 text floor (secondary text is stone-700)" },
23
23
  "600": { "value": "#5e5e5c", "description": "Stone scale — caption / metadata text on light surfaces" },
24
24
  "700": { "value": "#424240", "description": "Stone scale — primary text on light surfaces" },
25
25
  "800": { "value": "#292927", "description": "Stone scale — high-contrast headings on light surfaces" },
package/src/theme-colors.json CHANGED
@@ -46,8 +46,8 @@
46
46
  },
47
47
  "content": {
48
48
  "primary": { "light": "#14140f", "dark": "#fdf9f2", "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface" },
49
- "secondary": { "light": "#7c7c7c", "dark": "#a8a29e", "description": "Secondary text — stone-500 (light) / ink-300 (dark)" },
50
- "muted": { "light": "#78716c", "dark": "#78716c", "description": "Muted text — captions, meta info" },
49
+ "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
+ "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
51
  "inverse": { "light": "#fdf9f2", "dark": "#0c0a09", "description": "Inverse text — for contrasting backgrounds" }
52
52
  },
53
53
  "interactive": {