@dataimago/tokens 0.1.0-alpha.4 → 0.1.0-alpha.48

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 +318 -37
  3. package/dist/index.mjs +318 -37
  4. package/dist/tokens.css +289 -41
  5. package/dist/tokens.dtcg.json +884 -0
  6. package/dist/tokens.scss +289 -41
  7. package/dist/tokens.studio.json +889 -0
  8. package/dist/tokens.w3c.dtcg.json +1084 -0
  9. package/package.json +5 -2
  10. package/src/README.md +40 -156
  11. package/src/colors.json +8 -8
  12. package/src/dataviz.json +136 -0
  13. package/src/effects.json +85 -7
  14. package/src/theme-colors-p3.json +555 -0
  15. package/src/theme-colors.json +124 -21
  16. package/src/typography.json +10 -10
package/dist/tokens.scss CHANGED
@@ -55,21 +55,31 @@
55
55
  --color-palette-presentation-blue-500: #3498DB;
56
56
  --color-palette-presentation-blue-600: #2980B9;
57
57
  --color-palette-presentation-blue-700: #1f618d;
58
- --color-functional-success: #27AE60;
59
- --color-functional-warning: #F39C12;
60
- --color-functional-error: #E74C3C;
58
+ --color-functional-success: #009E73;
59
+ --color-functional-warning: #E69F00;
60
+ --color-functional-error: #ef5350;
61
61
  --color-functional-info: #3498DB;
62
62
  --transition-quick: 0.15s ease;
63
63
  --transition-standard: 0.25s ease-in-out;
64
64
  --transition-smooth: 0.35s ease;
65
65
  --transition-logo: 0.3s;
66
- --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
67
- --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
66
+ --gradient-video-poster: linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c);
67
+ --motion-enter: 200ms;
68
+ --motion-exit: 120ms;
69
+ --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
70
+ --motion-ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
71
+ --motion-duration-120: 120ms;
72
+ --motion-duration-160: 160ms;
73
+ --motion-duration-200: 200ms;
74
+ --motion-duration-250: 250ms;
75
+ --motion-duration-300: 300ms;
76
+ --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
77
+ --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
68
78
  --font-family-display: var(--font-family-display-editorial);
69
- --font-family-display-editorial: Josefin Sans, system-ui, sans-serif;
70
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
79
+ --font-family-display-editorial: Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif;
80
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
71
81
  --font-family-brand: Futura, system-ui, sans-serif;
72
- --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
82
+ --font-family-math: Noto Sans Math, math;
73
83
  --font-size-micro: 0.75rem;
74
84
  --font-size-small: 0.875rem;
75
85
  --font-size-base: 1rem;
@@ -116,31 +126,113 @@
116
126
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
117
127
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
118
128
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
129
+ --color-dataviz-okabe-ito-orange: #E69F00;
130
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
131
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
132
+ --color-dataviz-okabe-ito-yellow: #F0E442;
133
+ --color-dataviz-okabe-ito-blue: #0072B2;
134
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
135
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
136
+ --color-dataviz-categorical-1: #E69F00;
137
+ --color-dataviz-categorical-2: #56B4E9;
138
+ --color-dataviz-categorical-3: #009E73;
139
+ --color-dataviz-categorical-4: #F0E442;
140
+ --color-dataviz-categorical-5: #0072B2;
141
+ --color-dataviz-categorical-6: #D55E00;
142
+ --color-dataviz-categorical-7: #CC79A7;
143
+ --color-dataviz-sgpc-bucket-very-low: #D55E00;
144
+ --color-dataviz-sgpc-bucket-low: #E69F00;
145
+ --color-dataviz-sgpc-bucket-typical: #56B4E9;
146
+ --color-dataviz-sgpc-bucket-high: #009E73;
147
+ --color-dataviz-sgpc-bucket-very-high: #0072B2;
148
+ --color-dataviz-sgpc-role-marginal: #0072B2;
149
+ --color-dataviz-sgpc-role-linkage: #D55E00;
150
+ --color-dataviz-sgpc-role-kernel: #CC79A7;
119
151
  }
120
152
 
121
153
  :root, [data-bs-theme="light"] {
122
154
  --color-surface-page: #ededeb;
155
+ --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
123
156
  --color-surface-page-scrolled: #ededeb;
157
+ --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
124
158
  --color-surface-elevated: #f7f7f6;
125
- --color-surface-sunken: #faf2e3;
159
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
160
+ --color-surface-figure-plate: #f7f7f6;
161
+ --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
162
+ --color-surface-sunken: #f7f7f6;
163
+ --color-surface-sunken: color(display-p3 0.9686 0.9686 0.9651);
126
164
  --color-surface-navbar: #ededeb;
165
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
127
166
  --color-surface-navbar-scrolled: #ededeb;
128
- --color-surface-code: #faf2e3;
129
- --color-border-subtle: rgba(12, 10, 9, 0.08);
130
- --color-border-moderate: rgba(12, 10, 9, 0.15);
131
- --color-border-strong: rgba(12, 10, 9, 0.25);
132
- --color-border-card: rgba(12, 10, 9, 0.15);
167
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
168
+ --color-surface-code: #f7f7f6;
169
+ --color-surface-code: color(display-p3 0.9686 0.9686 0.9651);
170
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
171
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
172
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
173
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
174
+ --color-surface-print: #f7f7f6;
175
+ --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
176
+ --color-surface-play-disc: rgba(247, 247, 246, 0.92);
177
+ --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
178
+ --color-surface-media: #000000;
179
+ --color-surface-media: color(display-p3 0 0 0);
180
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
181
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
182
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
183
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
184
+ --color-border-strong: rgba(12, 10, 9, 0.75);
185
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
186
+ --color-border-card: rgba(12, 10, 9, 0.60);
187
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
188
+ --color-border-figure-frame: #6a6a6a;
189
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
133
190
  --color-border-code: #d6d3d1;
191
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
192
+ --color-border-on-scrim-focus: #3498db;
193
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
194
+ --color-border-print: rgba(12, 10, 9, 0.45);
195
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
134
196
  --color-content-primary: #14140f;
135
- --color-content-secondary: #7c7c7c;
136
- --color-content-muted: #78716c;
197
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
198
+ --color-content-secondary: #6a6a6a;
199
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
200
+ --color-content-muted: #706964;
201
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
137
202
  --color-content-inverse: #fdf9f2;
203
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
204
+ --color-content-on-scrim: #f7f7f6;
205
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
206
+ --color-content-on-print: #14140f;
207
+ --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
138
208
  --color-interactive-primary: #434739;
209
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
139
210
  --color-interactive-hover: #363a2e;
211
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
140
212
  --color-interactive-accent: #1f618d;
213
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
141
214
  --color-interactive-focus: #434739;
142
- --color-presentation-accent: #3498DB;
143
- --color-presentation-accent-hover: #2980B9;
215
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
216
+ --color-state-success: #007a58;
217
+ --color-state-success: color(display-p3 0.2046 0.471 0.3541);
218
+ --color-state-warning: #906306;
219
+ --color-state-warning: color(display-p3 0.5386 0.3957 0.1307);
220
+ --color-state-error: #a4262c;
221
+ --color-state-error: color(display-p3 0.5915 0.1933 0.192);
222
+ --color-state-info: #1f618d;
223
+ --color-state-info: color(display-p3 0.198 0.375 0.5385);
224
+ --color-presentation-accent: #3498db;
225
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
226
+ --color-presentation-accent-hover: #2980b9;
227
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
228
+ --color-vertical-accent-dissertation: #b87333;
229
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
230
+ --color-vertical-accent-rpkg: #3b82f6;
231
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
232
+ --color-vertical-accent-SGPc: #5a6310;
233
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
234
+ --color-brand-mark-red: #cc0000;
235
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
144
236
  --contrast-high: rgb(20, 20, 16);
145
237
  --contrast-readable: rgb(20, 20, 16);
146
238
  --contrast-medium: #7c7c7c;
@@ -148,36 +240,108 @@
148
240
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
149
241
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
150
242
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
151
- --border-subtle: rgba(20, 20, 16, 0.1);
152
- --border-moderate: rgba(20, 20, 16, 0.15);
243
+ --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
244
+ --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
245
+ --shadow-lift: 0 -8px 24px rgb(20 20 16 / 0.07);
246
+ --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
247
+ --shadow-float: 0 1px 2px rgb(20 20 16 / 0.06), 0 4px 14px rgb(20 20 16 / 0.08);
248
+ --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
249
+ --border-subtle: rgba(20, 20, 16, 0.47);
250
+ --border-moderate: rgba(20, 20, 16, 0.63);
153
251
  --border-focus: #3498DB;
154
252
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
155
253
  --navigation-active-background: rgba(20, 20, 16, 0.1);
254
+ --color-dataviz-okabe-ito-black: #000000;
255
+ --color-dataviz-categorical-8: #000000;
256
+ --color-dataviz-uncertainty-outer: #D6D6D6;
257
+ --color-dataviz-uncertainty-union: #9E9E9E;
258
+ --color-dataviz-uncertainty-inner: #333333;
259
+ --color-dataviz-map-ocean: #808fa7;
156
260
  }
157
261
 
158
262
  [data-bs-theme="dark"] {
159
263
  --color-surface-page: #141410;
264
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
160
265
  --color-surface-page-scrolled: #141410;
266
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
161
267
  --color-surface-elevated: #1c1917;
268
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
269
+ --color-surface-figure-plate: #dcdcda;
270
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
162
271
  --color-surface-sunken: #0c0a09;
272
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
163
273
  --color-surface-navbar: #141410;
274
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
164
275
  --color-surface-navbar-scrolled: #141410;
276
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
165
277
  --color-surface-code: #1c1917;
166
- --color-border-subtle: rgba(253, 249, 242, 0.08);
167
- --color-border-moderate: rgba(253, 249, 242, 0.15);
168
- --color-border-strong: rgba(253, 249, 242, 0.25);
169
- --color-border-card: rgba(253, 249, 242, 0.15);
278
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
279
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
280
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
281
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
282
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
283
+ --color-surface-print: #f7f7f6;
284
+ --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
285
+ --color-surface-play-disc: rgba(247, 247, 246, 0.92);
286
+ --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
287
+ --color-surface-media: #000000;
288
+ --color-surface-media: color(display-p3 0 0 0);
289
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
290
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
291
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
292
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
293
+ --color-border-strong: rgba(253, 249, 242, 0.75);
294
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
295
+ --color-border-card: rgba(253, 249, 242, 0.60);
296
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
297
+ --color-border-figure-frame: #6a6a6a;
298
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
170
299
  --color-border-code: #292524;
300
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
301
+ --color-border-on-scrim-focus: #3498db;
302
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
303
+ --color-border-print: rgba(12, 10, 9, 0.45);
304
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
171
305
  --color-content-primary: #fdf9f2;
306
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
172
307
  --color-content-secondary: #a8a29e;
173
- --color-content-muted: #78716c;
308
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
309
+ --color-content-muted: #89827d;
310
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
174
311
  --color-content-inverse: #0c0a09;
312
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
313
+ --color-content-on-scrim: #f7f7f6;
314
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
315
+ --color-content-on-print: #14140f;
316
+ --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
175
317
  --color-interactive-primary: #98a384;
318
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
176
319
  --color-interactive-hover: #7e8a6b;
177
- --color-interactive-accent: #3498DB;
320
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
321
+ --color-interactive-accent: #3498db;
322
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
178
323
  --color-interactive-focus: #98a384;
179
- --color-presentation-accent: #3498DB;
180
- --color-presentation-accent-hover: #2980B9;
324
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
325
+ --color-state-success: #009e73;
326
+ --color-state-success: color(display-p3 0.2733 0.6102 0.4624);
327
+ --color-state-warning: #e69f00;
328
+ --color-state-warning: color(display-p3 0.861 0.6354 0.2169);
329
+ --color-state-error: #ef5350;
330
+ --color-state-error: color(display-p3 0.8678 0.3692 0.339);
331
+ --color-state-info: #3498db;
332
+ --color-state-info: color(display-p3 0.3208 0.588 0.8369);
333
+ --color-presentation-accent: #3498db;
334
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
335
+ --color-presentation-accent-hover: #2980b9;
336
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
337
+ --color-vertical-accent-dissertation: #ce8e5c;
338
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
339
+ --color-vertical-accent-rpkg: #60a5fa;
340
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
341
+ --color-vertical-accent-SGPc: #b2bf22;
342
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
343
+ --color-brand-mark-red: #ff0000;
344
+ --color-brand-mark-red: color(display-p3 1 0 0);
181
345
  --contrast-high: rgb(237, 237, 235);
182
346
  --contrast-readable: rgb(237, 237, 235);
183
347
  --contrast-medium: #83838f;
@@ -185,37 +349,109 @@
185
349
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
186
350
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
187
351
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
188
- --border-subtle: rgba(237, 237, 235, 0.1);
189
- --border-moderate: rgba(237, 237, 235, 0.15);
352
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
353
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
354
+ --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
355
+ --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
356
+ --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
357
+ --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
358
+ --border-subtle: rgba(237, 237, 235, 0.47);
359
+ --border-moderate: rgba(237, 237, 235, 0.63);
190
360
  --border-focus: #4FC3F7;
191
361
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
192
362
  --navigation-active-background: rgba(237, 237, 235, 0.1);
363
+ --color-dataviz-okabe-ito-black: #FDF9F2;
364
+ --color-dataviz-categorical-8: #FDF9F2;
365
+ --color-dataviz-uncertainty-outer: #333333;
366
+ --color-dataviz-uncertainty-union: #6B6B6B;
367
+ --color-dataviz-uncertainty-inner: #D6D6D6;
368
+ --color-dataviz-map-ocean: #042438;
193
369
  }
194
370
 
195
371
  @media (prefers-color-scheme: dark) {
196
- :root {
372
+ :root:where(:not([data-bs-theme="light"])) {
197
373
  --color-surface-page: #141410;
374
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
198
375
  --color-surface-page-scrolled: #141410;
376
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
199
377
  --color-surface-elevated: #1c1917;
378
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
379
+ --color-surface-figure-plate: #dcdcda;
380
+ --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
200
381
  --color-surface-sunken: #0c0a09;
382
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
201
383
  --color-surface-navbar: #141410;
384
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
202
385
  --color-surface-navbar-scrolled: #141410;
386
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
203
387
  --color-surface-code: #1c1917;
204
- --color-border-subtle: rgba(253, 249, 242, 0.08);
205
- --color-border-moderate: rgba(253, 249, 242, 0.15);
206
- --color-border-strong: rgba(253, 249, 242, 0.25);
207
- --color-border-card: rgba(253, 249, 242, 0.15);
388
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
389
+ --color-surface-scrim: rgba(20, 20, 16, 0.85);
390
+ --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
391
+ --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
392
+ --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
393
+ --color-surface-print: #f7f7f6;
394
+ --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
395
+ --color-surface-play-disc: rgba(247, 247, 246, 0.92);
396
+ --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
397
+ --color-surface-media: #000000;
398
+ --color-surface-media: color(display-p3 0 0 0);
399
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
400
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
401
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
402
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
403
+ --color-border-strong: rgba(253, 249, 242, 0.75);
404
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
405
+ --color-border-card: rgba(253, 249, 242, 0.60);
406
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
407
+ --color-border-figure-frame: #6a6a6a;
408
+ --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
208
409
  --color-border-code: #292524;
410
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
411
+ --color-border-on-scrim-focus: #3498db;
412
+ --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
413
+ --color-border-print: rgba(12, 10, 9, 0.45);
414
+ --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
209
415
  --color-content-primary: #fdf9f2;
416
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
210
417
  --color-content-secondary: #a8a29e;
211
- --color-content-muted: #78716c;
418
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
419
+ --color-content-muted: #89827d;
420
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
212
421
  --color-content-inverse: #0c0a09;
422
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
423
+ --color-content-on-scrim: #f7f7f6;
424
+ --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
425
+ --color-content-on-print: #14140f;
426
+ --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
213
427
  --color-interactive-primary: #98a384;
428
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
214
429
  --color-interactive-hover: #7e8a6b;
215
- --color-interactive-accent: #3498DB;
430
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
431
+ --color-interactive-accent: #3498db;
432
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
216
433
  --color-interactive-focus: #98a384;
217
- --color-presentation-accent: #3498DB;
218
- --color-presentation-accent-hover: #2980B9;
434
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
435
+ --color-state-success: #009e73;
436
+ --color-state-success: color(display-p3 0.2733 0.6102 0.4624);
437
+ --color-state-warning: #e69f00;
438
+ --color-state-warning: color(display-p3 0.861 0.6354 0.2169);
439
+ --color-state-error: #ef5350;
440
+ --color-state-error: color(display-p3 0.8678 0.3692 0.339);
441
+ --color-state-info: #3498db;
442
+ --color-state-info: color(display-p3 0.3208 0.588 0.8369);
443
+ --color-presentation-accent: #3498db;
444
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
445
+ --color-presentation-accent-hover: #2980b9;
446
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
447
+ --color-vertical-accent-dissertation: #ce8e5c;
448
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
449
+ --color-vertical-accent-rpkg: #60a5fa;
450
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
451
+ --color-vertical-accent-SGPc: #b2bf22;
452
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
453
+ --color-brand-mark-red: #ff0000;
454
+ --color-brand-mark-red: color(display-p3 1 0 0);
219
455
  --contrast-high: rgb(237, 237, 235);
220
456
  --contrast-readable: rgb(237, 237, 235);
221
457
  --contrast-medium: #83838f;
@@ -223,10 +459,22 @@
223
459
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
224
460
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
225
461
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
226
- --border-subtle: rgba(237, 237, 235, 0.1);
227
- --border-moderate: rgba(237, 237, 235, 0.15);
462
+ --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
463
+ --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
464
+ --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
465
+ --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
466
+ --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
467
+ --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
468
+ --border-subtle: rgba(237, 237, 235, 0.47);
469
+ --border-moderate: rgba(237, 237, 235, 0.63);
228
470
  --border-focus: #4FC3F7;
229
471
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
230
472
  --navigation-active-background: rgba(237, 237, 235, 0.1);
473
+ --color-dataviz-okabe-ito-black: #FDF9F2;
474
+ --color-dataviz-categorical-8: #FDF9F2;
475
+ --color-dataviz-uncertainty-outer: #333333;
476
+ --color-dataviz-uncertainty-union: #6B6B6B;
477
+ --color-dataviz-uncertainty-inner: #D6D6D6;
478
+ --color-dataviz-map-ocean: #042438;
231
479
  }
232
480
  }