@dataimago/tokens-neutral 0.1.0-alpha.10 → 0.1.0-alpha.11
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/dataviz.json +93 -0
- package/dist/index.cjs +89 -0
- package/dist/index.mjs +89 -0
- package/dist/tokens.css +29 -0
- package/dist/tokens.scss +29 -0
- package/dist/tokens.studio.json +112 -0
- package/dist/tokens.w3c.dtcg.json +128 -0
- package/package.json +1 -1
|
@@ -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
|
@@ -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
|
@@ -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/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"] {
|
|
@@ -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"] {
|
|
@@ -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) {
|
|
@@ -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.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"] {
|
|
@@ -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"] {
|
|
@@ -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) {
|
|
@@ -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
|
@@ -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": {
|
|
@@ -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": {
|
|
@@ -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.
|
|
3
|
+
"version": "0.1.0-alpha.11",
|
|
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": {
|