@dataimago/tokens 0.1.0-alpha.3 → 0.1.0-alpha.31

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 +229 -40
  3. package/dist/index.mjs +229 -40
  4. package/dist/tokens.css +238 -46
  5. package/dist/tokens.dtcg.json +788 -0
  6. package/dist/tokens.scss +238 -46
  7. package/dist/tokens.studio.json +783 -0
  8. package/dist/tokens.w3c.dtcg.json +946 -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 +19 -7
  14. package/src/theme-colors-p3.json +490 -0
  15. package/src/theme-colors.json +102 -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,100 @@
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-surface-scrim: rgba(20, 20, 16, 0.85);
158
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
159
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
160
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
161
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
162
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
163
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
164
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
165
+ --color-border-strong: rgba(12, 10, 9, 0.75);
166
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
167
+ --color-border-card: rgba(12, 10, 9, 0.60);
168
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
169
+ --color-border-figure-frame: #6a6a6a;
170
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
131
171
  --color-border-code: #d6d3d1;
172
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
173
+ --color-border-on-scrim-focus: #3498db;
174
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
132
175
  --color-content-primary: #14140f;
133
- --color-content-secondary: #7c7c7c;
134
- --color-content-muted: #78716c;
176
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
177
+ --color-content-secondary: #6a6a6a;
178
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
179
+ --color-content-muted: #706964;
180
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
135
181
  --color-content-inverse: #fdf9f2;
182
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
183
+ --color-content-on-scrim: #f7f7f6;
184
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
136
185
  --color-interactive-primary: #434739;
186
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
137
187
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
188
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
189
+ --color-interactive-accent: #1f618d;
190
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
139
191
  --color-interactive-focus: #434739;
140
- --color-presentation-accent: #3498DB;
141
- --color-presentation-accent-hover: #2980B9;
192
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
193
+ --color-state-success: #007a58;
194
+ --color-state-success: color(display-p3 0.2046 0.471 0.3541);
195
+ --color-state-warning: #906306;
196
+ --color-state-warning: color(display-p3 0.5386 0.3957 0.1307);
197
+ --color-state-error: #a4262c;
198
+ --color-state-error: color(display-p3 0.5915 0.1933 0.192);
199
+ --color-state-info: #1f618d;
200
+ --color-state-info: color(display-p3 0.198 0.375 0.5385);
201
+ --color-presentation-accent: #3498db;
202
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
203
+ --color-presentation-accent-hover: #2980b9;
204
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
205
+ --color-vertical-accent-dissertation: #b87333;
206
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
207
+ --color-vertical-accent-rpkg: #3b82f6;
208
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
209
+ --color-vertical-accent-SGPc: #5a6310;
210
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
211
+ --color-brand-mark-red: #cc0000;
212
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
142
213
  --contrast-high: rgb(20, 20, 16);
143
214
  --contrast-readable: rgb(20, 20, 16);
144
215
  --contrast-medium: #7c7c7c;
@@ -146,36 +217,93 @@
146
217
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
147
218
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
148
219
  --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);
220
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
221
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
222
+ --border-subtle: rgba(20, 20, 16, 0.47);
223
+ --border-moderate: rgba(20, 20, 16, 0.63);
151
224
  --border-focus: #3498DB;
152
225
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
153
226
  --navigation-active-background: rgba(20, 20, 16, 0.1);
227
+ --color-dataviz-okabe-ito-black: #000000;
228
+ --color-dataviz-categorical-8: #000000;
229
+ --color-dataviz-uncertainty-outer: #D6D6D6;
230
+ --color-dataviz-uncertainty-union: #9E9E9E;
231
+ --color-dataviz-uncertainty-inner: #333333;
154
232
  }
155
233
 
156
234
  [data-bs-theme="dark"] {
157
235
  --color-surface-page: #141410;
236
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
158
237
  --color-surface-page-scrolled: #141410;
238
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
159
239
  --color-surface-elevated: #1c1917;
240
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
241
+ --color-surface-figure-plate: #dcdcda;
242
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
160
243
  --color-surface-sunken: #0c0a09;
244
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
161
245
  --color-surface-navbar: #141410;
246
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
162
247
  --color-surface-navbar-scrolled: #141410;
248
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
163
249
  --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);
250
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
251
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
252
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
253
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
254
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
255
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
256
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
257
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
258
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
259
+ --color-border-strong: rgba(253, 249, 242, 0.75);
260
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
261
+ --color-border-card: rgba(253, 249, 242, 0.60);
262
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
263
+ --color-border-figure-frame: #6a6a6a;
264
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
168
265
  --color-border-code: #292524;
266
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
267
+ --color-border-on-scrim-focus: #3498db;
268
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
169
269
  --color-content-primary: #fdf9f2;
270
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
170
271
  --color-content-secondary: #a8a29e;
171
- --color-content-muted: #78716c;
272
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
273
+ --color-content-muted: #89827d;
274
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
172
275
  --color-content-inverse: #0c0a09;
276
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
277
+ --color-content-on-scrim: #f7f7f6;
278
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
173
279
  --color-interactive-primary: #98a384;
280
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
174
281
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
282
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
283
+ --color-interactive-accent: #3498db;
284
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
176
285
  --color-interactive-focus: #98a384;
177
- --color-presentation-accent: #3498DB;
178
- --color-presentation-accent-hover: #2980B9;
286
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
287
+ --color-state-success: #009e73;
288
+ --color-state-success: color(display-p3 0.2733 0.6102 0.4624);
289
+ --color-state-warning: #e69f00;
290
+ --color-state-warning: color(display-p3 0.861 0.6354 0.2169);
291
+ --color-state-error: #ef5350;
292
+ --color-state-error: color(display-p3 0.8678 0.3692 0.339);
293
+ --color-state-info: #3498db;
294
+ --color-state-info: color(display-p3 0.3208 0.588 0.8369);
295
+ --color-presentation-accent: #3498db;
296
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
297
+ --color-presentation-accent-hover: #2980b9;
298
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
299
+ --color-vertical-accent-dissertation: #ce8e5c;
300
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
301
+ --color-vertical-accent-rpkg: #60a5fa;
302
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
303
+ --color-vertical-accent-SGPc: #b2bf22;
304
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
305
+ --color-brand-mark-red: #ff0000;
306
+ --color-brand-mark-red: color(display-p3 1 0 0);
179
307
  --contrast-high: rgb(237, 237, 235);
180
308
  --contrast-readable: rgb(237, 237, 235);
181
309
  --contrast-medium: #83838f;
@@ -183,37 +311,94 @@
183
311
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
312
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
313
  --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);
314
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
315
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
316
+ --border-subtle: rgba(237, 237, 235, 0.47);
317
+ --border-moderate: rgba(237, 237, 235, 0.63);
188
318
  --border-focus: #4FC3F7;
189
319
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
190
320
  --navigation-active-background: rgba(237, 237, 235, 0.1);
321
+ --color-dataviz-okabe-ito-black: #FDF9F2;
322
+ --color-dataviz-categorical-8: #FDF9F2;
323
+ --color-dataviz-uncertainty-outer: #333333;
324
+ --color-dataviz-uncertainty-union: #6B6B6B;
325
+ --color-dataviz-uncertainty-inner: #D6D6D6;
191
326
  }
192
327
 
193
328
  @media (prefers-color-scheme: dark) {
194
- :root {
329
+ :root:where(:not([data-bs-theme="light"])) {
195
330
  --color-surface-page: #141410;
331
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
196
332
  --color-surface-page-scrolled: #141410;
333
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
197
334
  --color-surface-elevated: #1c1917;
335
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
336
+ --color-surface-figure-plate: #dcdcda;
337
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
198
338
  --color-surface-sunken: #0c0a09;
339
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
199
340
  --color-surface-navbar: #141410;
341
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
200
342
  --color-surface-navbar-scrolled: #141410;
343
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
344
  --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);
345
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
346
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
347
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
348
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
349
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
350
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
351
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
352
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
353
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
354
+ --color-border-strong: rgba(253, 249, 242, 0.75);
355
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
356
+ --color-border-card: rgba(253, 249, 242, 0.60);
357
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
358
+ --color-border-figure-frame: #6a6a6a;
359
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
206
360
  --color-border-code: #292524;
361
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
362
+ --color-border-on-scrim-focus: #3498db;
363
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
207
364
  --color-content-primary: #fdf9f2;
365
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
208
366
  --color-content-secondary: #a8a29e;
209
- --color-content-muted: #78716c;
367
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
368
+ --color-content-muted: #89827d;
369
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
210
370
  --color-content-inverse: #0c0a09;
371
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
372
+ --color-content-on-scrim: #f7f7f6;
373
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
211
374
  --color-interactive-primary: #98a384;
375
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
212
376
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
377
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
378
+ --color-interactive-accent: #3498db;
379
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
214
380
  --color-interactive-focus: #98a384;
215
- --color-presentation-accent: #3498DB;
216
- --color-presentation-accent-hover: #2980B9;
381
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
382
+ --color-state-success: #009e73;
383
+ --color-state-success: color(display-p3 0.2733 0.6102 0.4624);
384
+ --color-state-warning: #e69f00;
385
+ --color-state-warning: color(display-p3 0.861 0.6354 0.2169);
386
+ --color-state-error: #ef5350;
387
+ --color-state-error: color(display-p3 0.8678 0.3692 0.339);
388
+ --color-state-info: #3498db;
389
+ --color-state-info: color(display-p3 0.3208 0.588 0.8369);
390
+ --color-presentation-accent: #3498db;
391
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
392
+ --color-presentation-accent-hover: #2980b9;
393
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
394
+ --color-vertical-accent-dissertation: #ce8e5c;
395
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
396
+ --color-vertical-accent-rpkg: #60a5fa;
397
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
398
+ --color-vertical-accent-SGPc: #b2bf22;
399
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
400
+ --color-brand-mark-red: #ff0000;
401
+ --color-brand-mark-red: color(display-p3 1 0 0);
217
402
  --contrast-high: rgb(237, 237, 235);
218
403
  --contrast-readable: rgb(237, 237, 235);
219
404
  --contrast-medium: #83838f;
@@ -221,10 +406,17 @@
221
406
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
222
407
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
223
408
  --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);
409
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
410
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
411
+ --border-subtle: rgba(237, 237, 235, 0.47);
412
+ --border-moderate: rgba(237, 237, 235, 0.63);
226
413
  --border-focus: #4FC3F7;
227
414
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
228
415
  --navigation-active-background: rgba(237, 237, 235, 0.1);
416
+ --color-dataviz-okabe-ito-black: #FDF9F2;
417
+ --color-dataviz-categorical-8: #FDF9F2;
418
+ --color-dataviz-uncertainty-outer: #333333;
419
+ --color-dataviz-uncertainty-union: #6B6B6B;
420
+ --color-dataviz-uncertainty-inner: #D6D6D6;
229
421
  }
230
422
  }