@dataimago/tokens 0.1.0-alpha.3 → 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.
Files changed (16) hide show
  1. package/README.md +15 -4
  2. package/dist/index.cjs +209 -40
  3. package/dist/index.mjs +209 -40
  4. package/dist/tokens.css +208 -46
  5. package/dist/tokens.dtcg.json +756 -0
  6. package/dist/tokens.scss +208 -46
  7. package/dist/tokens.studio.json +751 -0
  8. package/dist/tokens.w3c.dtcg.json +906 -0
  9. package/package.json +5 -2
  10. package/src/README.md +40 -156
  11. package/src/colors.json +14 -12
  12. package/src/dataviz.json +115 -0
  13. package/src/effects.json +7 -7
  14. package/src/theme-colors-p3.json +438 -0
  15. package/src/theme-colors.json +82 -24
  16. package/src/typography.json +10 -10
package/dist/tokens.scss CHANGED
@@ -45,29 +45,31 @@
45
45
  --color-palette-copper-700: #913d15;
46
46
  --color-palette-copper-800: #753318;
47
47
  --color-palette-copper-900: #612b16;
48
- --color-palette-accent-50: #fdf2f2;
49
- --color-palette-accent-500: #b54a27;
50
- --color-palette-accent-600: #9a3e20;
51
- --color-palette-accent-700: #7d321a;
48
+ --color-palette-accent-50: #f0f8fc;
49
+ --color-palette-accent-300: #3498DB;
50
+ --color-palette-accent-400: #2980B9;
51
+ --color-palette-accent-500: #1f618d;
52
+ --color-palette-accent-600: #154d6f;
53
+ --color-palette-accent-700: #0f3a52;
52
54
  --color-palette-presentation-blue-50: #f0f8fc;
53
55
  --color-palette-presentation-blue-500: #3498DB;
54
56
  --color-palette-presentation-blue-600: #2980B9;
55
57
  --color-palette-presentation-blue-700: #1f618d;
56
- --color-functional-success: #27AE60;
57
- --color-functional-warning: #F39C12;
58
- --color-functional-error: #E74C3C;
58
+ --color-functional-success: #009E73;
59
+ --color-functional-warning: #E69F00;
60
+ --color-functional-error: #ef5350;
59
61
  --color-functional-info: #3498DB;
60
62
  --transition-quick: 0.15s ease;
61
63
  --transition-standard: 0.25s ease-in-out;
62
64
  --transition-smooth: 0.35s ease;
63
65
  --transition-logo: 0.3s;
64
- --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
65
- --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
66
+ --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
67
+ --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
66
68
  --font-family-display: var(--font-family-display-editorial);
67
- --font-family-display-editorial: Josefin Sans, system-ui, sans-serif;
68
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
69
+ --font-family-display-editorial: Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif;
70
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
69
71
  --font-family-brand: Futura, system-ui, sans-serif;
70
- --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
72
+ --font-family-math: Noto Sans Math, math;
71
73
  --font-size-micro: 0.75rem;
72
74
  --font-size-small: 0.875rem;
73
75
  --font-size-base: 1rem;
@@ -114,31 +116,92 @@
114
116
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
115
117
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
116
118
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
119
+ --color-dataviz-okabe-ito-orange: #E69F00;
120
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
121
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
122
+ --color-dataviz-okabe-ito-yellow: #F0E442;
123
+ --color-dataviz-okabe-ito-blue: #0072B2;
124
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
125
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
126
+ --color-dataviz-categorical-1: #E69F00;
127
+ --color-dataviz-categorical-2: #56B4E9;
128
+ --color-dataviz-categorical-3: #009E73;
129
+ --color-dataviz-categorical-4: #F0E442;
130
+ --color-dataviz-categorical-5: #0072B2;
131
+ --color-dataviz-categorical-6: #D55E00;
132
+ --color-dataviz-categorical-7: #CC79A7;
133
+ --color-dataviz-sgpc-bucket-very-low: #D55E00;
134
+ --color-dataviz-sgpc-bucket-low: #E69F00;
135
+ --color-dataviz-sgpc-bucket-typical: #56B4E9;
136
+ --color-dataviz-sgpc-bucket-high: #009E73;
137
+ --color-dataviz-sgpc-bucket-very-high: #0072B2;
117
138
  }
118
139
 
119
140
  :root, [data-bs-theme="light"] {
120
141
  --color-surface-page: #ededeb;
142
+ --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
121
143
  --color-surface-page-scrolled: #ededeb;
144
+ --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
122
145
  --color-surface-elevated: #f7f7f6;
123
- --color-surface-sunken: #faf2e3;
146
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
147
+ --color-surface-figure-plate: #f7f7f6;
148
+ --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
149
+ --color-surface-sunken: #f7f7f6;
150
+ --color-surface-sunken: color(display-p3 0.9686 0.9686 0.9651);
124
151
  --color-surface-navbar: #ededeb;
152
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
125
153
  --color-surface-navbar-scrolled: #ededeb;
126
- --color-surface-code: #faf2e3;
127
- --color-border-subtle: rgba(12, 10, 9, 0.08);
128
- --color-border-moderate: rgba(12, 10, 9, 0.15);
129
- --color-border-strong: rgba(12, 10, 9, 0.25);
130
- --color-border-card: rgba(12, 10, 9, 0.15);
154
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
155
+ --color-surface-code: #f7f7f6;
156
+ --color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
157
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
158
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
159
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
160
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
161
+ --color-border-strong: rgba(12, 10, 9, 0.75);
162
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
163
+ --color-border-card: rgba(12, 10, 9, 0.60);
164
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
165
+ --color-border-figure-frame: #6a6a6a;
166
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
131
167
  --color-border-code: #d6d3d1;
168
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
132
169
  --color-content-primary: #14140f;
133
- --color-content-secondary: #7c7c7c;
134
- --color-content-muted: #78716c;
170
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
171
+ --color-content-secondary: #6a6a6a;
172
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
173
+ --color-content-muted: #706964;
174
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
135
175
  --color-content-inverse: #fdf9f2;
176
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
136
177
  --color-interactive-primary: #434739;
178
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
137
179
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
180
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
181
+ --color-interactive-accent: #1f618d;
182
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
139
183
  --color-interactive-focus: #434739;
140
- --color-presentation-accent: #3498DB;
141
- --color-presentation-accent-hover: #2980B9;
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);
193
+ --color-presentation-accent: #3498db;
194
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
195
+ --color-presentation-accent-hover: #2980b9;
196
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
197
+ --color-vertical-accent-dissertation: #b87333;
198
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
199
+ --color-vertical-accent-rpkg: #3b82f6;
200
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
201
+ --color-vertical-accent-SGPc: #5a6310;
202
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
203
+ --color-brand-mark-red: #cc0000;
204
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
142
205
  --contrast-high: rgb(20, 20, 16);
143
206
  --contrast-readable: rgb(20, 20, 16);
144
207
  --contrast-medium: #7c7c7c;
@@ -146,36 +209,83 @@
146
209
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
147
210
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
148
211
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
149
- --border-subtle: rgba(20, 20, 16, 0.1);
150
- --border-moderate: rgba(20, 20, 16, 0.15);
212
+ --border-subtle: rgba(20, 20, 16, 0.47);
213
+ --border-moderate: rgba(20, 20, 16, 0.63);
151
214
  --border-focus: #3498DB;
152
215
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
153
216
  --navigation-active-background: rgba(20, 20, 16, 0.1);
217
+ --color-dataviz-okabe-ito-black: #000000;
218
+ --color-dataviz-categorical-8: #000000;
219
+ --color-dataviz-uncertainty-outer: #D6D6D6;
220
+ --color-dataviz-uncertainty-union: #9E9E9E;
221
+ --color-dataviz-uncertainty-inner: #333333;
154
222
  }
155
223
 
156
224
  [data-bs-theme="dark"] {
157
225
  --color-surface-page: #141410;
226
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
158
227
  --color-surface-page-scrolled: #141410;
228
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
159
229
  --color-surface-elevated: #1c1917;
230
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
231
+ --color-surface-figure-plate: #dcdcda;
232
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
160
233
  --color-surface-sunken: #0c0a09;
234
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
161
235
  --color-surface-navbar: #141410;
236
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
162
237
  --color-surface-navbar-scrolled: #141410;
238
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
163
239
  --color-surface-code: #1c1917;
164
- --color-border-subtle: rgba(253, 249, 242, 0.08);
165
- --color-border-moderate: rgba(253, 249, 242, 0.15);
166
- --color-border-strong: rgba(253, 249, 242, 0.25);
167
- --color-border-card: rgba(253, 249, 242, 0.15);
240
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
241
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
242
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
243
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
244
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
245
+ --color-border-strong: rgba(253, 249, 242, 0.75);
246
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
247
+ --color-border-card: rgba(253, 249, 242, 0.60);
248
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
249
+ --color-border-figure-frame: #6a6a6a;
250
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
168
251
  --color-border-code: #292524;
252
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
169
253
  --color-content-primary: #fdf9f2;
254
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
170
255
  --color-content-secondary: #a8a29e;
171
- --color-content-muted: #78716c;
256
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
257
+ --color-content-muted: #89827d;
258
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
172
259
  --color-content-inverse: #0c0a09;
260
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
173
261
  --color-interactive-primary: #98a384;
262
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
174
263
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
264
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
265
+ --color-interactive-accent: #3498db;
266
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
176
267
  --color-interactive-focus: #98a384;
177
- --color-presentation-accent: #3498DB;
178
- --color-presentation-accent-hover: #2980B9;
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);
277
+ --color-presentation-accent: #3498db;
278
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
279
+ --color-presentation-accent-hover: #2980b9;
280
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
281
+ --color-vertical-accent-dissertation: #ce8e5c;
282
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
283
+ --color-vertical-accent-rpkg: #60a5fa;
284
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
285
+ --color-vertical-accent-SGPc: #b2bf22;
286
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
287
+ --color-brand-mark-red: #ff0000;
288
+ --color-brand-mark-red: color(display-p3 1 0 0);
179
289
  --contrast-high: rgb(237, 237, 235);
180
290
  --contrast-readable: rgb(237, 237, 235);
181
291
  --contrast-medium: #83838f;
@@ -183,37 +293,84 @@
183
293
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
294
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
295
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
186
- --border-subtle: rgba(237, 237, 235, 0.1);
187
- --border-moderate: rgba(237, 237, 235, 0.15);
296
+ --border-subtle: rgba(237, 237, 235, 0.47);
297
+ --border-moderate: rgba(237, 237, 235, 0.63);
188
298
  --border-focus: #4FC3F7;
189
299
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
190
300
  --navigation-active-background: rgba(237, 237, 235, 0.1);
301
+ --color-dataviz-okabe-ito-black: #FDF9F2;
302
+ --color-dataviz-categorical-8: #FDF9F2;
303
+ --color-dataviz-uncertainty-outer: #333333;
304
+ --color-dataviz-uncertainty-union: #6B6B6B;
305
+ --color-dataviz-uncertainty-inner: #D6D6D6;
191
306
  }
192
307
 
193
308
  @media (prefers-color-scheme: dark) {
194
- :root {
309
+ :root:where(:not([data-bs-theme="light"])) {
195
310
  --color-surface-page: #141410;
311
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
196
312
  --color-surface-page-scrolled: #141410;
313
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
197
314
  --color-surface-elevated: #1c1917;
315
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
316
+ --color-surface-figure-plate: #dcdcda;
317
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
198
318
  --color-surface-sunken: #0c0a09;
319
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
199
320
  --color-surface-navbar: #141410;
321
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
200
322
  --color-surface-navbar-scrolled: #141410;
323
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
324
  --color-surface-code: #1c1917;
202
- --color-border-subtle: rgba(253, 249, 242, 0.08);
203
- --color-border-moderate: rgba(253, 249, 242, 0.15);
204
- --color-border-strong: rgba(253, 249, 242, 0.25);
205
- --color-border-card: rgba(253, 249, 242, 0.15);
325
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
326
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
327
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
328
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
329
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
330
+ --color-border-strong: rgba(253, 249, 242, 0.75);
331
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
332
+ --color-border-card: rgba(253, 249, 242, 0.60);
333
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
334
+ --color-border-figure-frame: #6a6a6a;
335
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
206
336
  --color-border-code: #292524;
337
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
207
338
  --color-content-primary: #fdf9f2;
339
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
208
340
  --color-content-secondary: #a8a29e;
209
- --color-content-muted: #78716c;
341
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
342
+ --color-content-muted: #89827d;
343
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
210
344
  --color-content-inverse: #0c0a09;
345
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
211
346
  --color-interactive-primary: #98a384;
347
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
212
348
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
349
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
350
+ --color-interactive-accent: #3498db;
351
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
214
352
  --color-interactive-focus: #98a384;
215
- --color-presentation-accent: #3498DB;
216
- --color-presentation-accent-hover: #2980B9;
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);
362
+ --color-presentation-accent: #3498db;
363
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
364
+ --color-presentation-accent-hover: #2980b9;
365
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
366
+ --color-vertical-accent-dissertation: #ce8e5c;
367
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
368
+ --color-vertical-accent-rpkg: #60a5fa;
369
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
370
+ --color-vertical-accent-SGPc: #b2bf22;
371
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
372
+ --color-brand-mark-red: #ff0000;
373
+ --color-brand-mark-red: color(display-p3 1 0 0);
217
374
  --contrast-high: rgb(237, 237, 235);
218
375
  --contrast-readable: rgb(237, 237, 235);
219
376
  --contrast-medium: #83838f;
@@ -221,10 +378,15 @@
221
378
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
222
379
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
223
380
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
224
- --border-subtle: rgba(237, 237, 235, 0.1);
225
- --border-moderate: rgba(237, 237, 235, 0.15);
381
+ --border-subtle: rgba(237, 237, 235, 0.47);
382
+ --border-moderate: rgba(237, 237, 235, 0.63);
226
383
  --border-focus: #4FC3F7;
227
384
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
228
385
  --navigation-active-background: rgba(237, 237, 235, 0.1);
386
+ --color-dataviz-okabe-ito-black: #FDF9F2;
387
+ --color-dataviz-categorical-8: #FDF9F2;
388
+ --color-dataviz-uncertainty-outer: #333333;
389
+ --color-dataviz-uncertainty-union: #6B6B6B;
390
+ --color-dataviz-uncertainty-inner: #D6D6D6;
229
391
  }
230
392
  }