@dataimago/tokens 0.1.0-alpha.2 → 0.1.0-alpha.26

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 +170 -33
  3. package/dist/index.mjs +170 -33
  4. package/dist/tokens.css +165 -39
  5. package/dist/tokens.dtcg.json +706 -0
  6. package/dist/tokens.scss +165 -39
  7. package/dist/tokens.studio.json +699 -0
  8. package/dist/tokens.w3c.dtcg.json +844 -0
  9. package/package.json +5 -2
  10. package/src/README.md +40 -156
  11. package/src/colors.json +6 -4
  12. package/src/dataviz.json +115 -0
  13. package/src/effects.json +7 -7
  14. package/src/theme-colors-p3.json +358 -0
  15. package/src/theme-colors.json +46 -20
  16. package/src/typography.json +7 -7
package/dist/tokens.css CHANGED
@@ -45,10 +45,12 @@
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;
@@ -62,12 +64,12 @@
62
64
  --transition-smooth: 0.35s ease;
63
65
  --transition-logo: 0.3s;
64
66
  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
65
- --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
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;
69
+ --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
68
70
  --font-family-display-documentation: Noto Sans, 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,80 @@
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;
146
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
123
147
  --color-surface-sunken: #faf2e3;
148
+ --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
124
149
  --color-surface-navbar: #ededeb;
150
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
125
151
  --color-surface-navbar-scrolled: #ededeb;
152
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
126
153
  --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-code: color(display-p3 0.9749 0.9501 0.8963);
155
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
156
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
157
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
158
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
159
+ --color-border-strong: rgba(12, 10, 9, 0.75);
160
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
161
+ --color-border-card: rgba(12, 10, 9, 0.60);
162
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
131
163
  --color-border-code: #d6d3d1;
164
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
132
165
  --color-content-primary: #14140f;
133
- --color-content-secondary: #7c7c7c;
134
- --color-content-muted: #78716c;
166
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
167
+ --color-content-secondary: #6a6a6a;
168
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
169
+ --color-content-muted: #706964;
170
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
135
171
  --color-content-inverse: #fdf9f2;
172
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
136
173
  --color-interactive-primary: #434739;
174
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
137
175
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
176
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
177
+ --color-interactive-accent: #1f618d;
178
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
139
179
  --color-interactive-focus: #434739;
140
- --color-presentation-accent: #3498DB;
141
- --color-presentation-accent-hover: #2980B9;
180
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
181
+ --color-presentation-accent: #3498db;
182
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
183
+ --color-presentation-accent-hover: #2980b9;
184
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
185
+ --color-vertical-accent-dissertation: #b87333;
186
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
187
+ --color-vertical-accent-rpkg: #3b82f6;
188
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
189
+ --color-vertical-accent-SGPc: #5a6310;
190
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
191
+ --color-brand-mark-red: #cc0000;
192
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
142
193
  --contrast-high: rgb(20, 20, 16);
143
194
  --contrast-readable: rgb(20, 20, 16);
144
195
  --contrast-medium: #7c7c7c;
@@ -146,36 +197,71 @@
146
197
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
147
198
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
148
199
  --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);
200
+ --border-subtle: rgba(20, 20, 16, 0.47);
201
+ --border-moderate: rgba(20, 20, 16, 0.63);
151
202
  --border-focus: #3498DB;
152
203
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
153
204
  --navigation-active-background: rgba(20, 20, 16, 0.1);
205
+ --color-dataviz-okabe-ito-black: #000000;
206
+ --color-dataviz-categorical-8: #000000;
207
+ --color-dataviz-uncertainty-outer: #D6D6D6;
208
+ --color-dataviz-uncertainty-union: #9E9E9E;
209
+ --color-dataviz-uncertainty-inner: #333333;
154
210
  }
155
211
 
156
212
  [data-bs-theme="dark"] {
157
213
  --color-surface-page: #141410;
214
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
158
215
  --color-surface-page-scrolled: #141410;
216
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
159
217
  --color-surface-elevated: #1c1917;
218
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
160
219
  --color-surface-sunken: #0c0a09;
220
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
161
221
  --color-surface-navbar: #141410;
222
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
162
223
  --color-surface-navbar-scrolled: #141410;
224
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
163
225
  --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);
226
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
227
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
228
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
229
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
230
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
231
+ --color-border-strong: rgba(253, 249, 242, 0.75);
232
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
233
+ --color-border-card: rgba(253, 249, 242, 0.60);
234
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
168
235
  --color-border-code: #292524;
236
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
169
237
  --color-content-primary: #fdf9f2;
238
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
170
239
  --color-content-secondary: #a8a29e;
171
- --color-content-muted: #78716c;
240
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
241
+ --color-content-muted: #89827d;
242
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
172
243
  --color-content-inverse: #0c0a09;
244
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
173
245
  --color-interactive-primary: #98a384;
246
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
174
247
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
248
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
249
+ --color-interactive-accent: #3498db;
250
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
176
251
  --color-interactive-focus: #98a384;
177
- --color-presentation-accent: #3498DB;
178
- --color-presentation-accent-hover: #2980B9;
252
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
253
+ --color-presentation-accent: #3498db;
254
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
255
+ --color-presentation-accent-hover: #2980b9;
256
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
257
+ --color-vertical-accent-dissertation: #ce8e5c;
258
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
259
+ --color-vertical-accent-rpkg: #60a5fa;
260
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
261
+ --color-vertical-accent-SGPc: #b2bf22;
262
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
263
+ --color-brand-mark-red: #ff0000;
264
+ --color-brand-mark-red: color(display-p3 1 0 0);
179
265
  --contrast-high: rgb(237, 237, 235);
180
266
  --contrast-readable: rgb(237, 237, 235);
181
267
  --contrast-medium: #83838f;
@@ -183,37 +269,72 @@
183
269
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
270
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
271
  --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);
272
+ --border-subtle: rgba(237, 237, 235, 0.47);
273
+ --border-moderate: rgba(237, 237, 235, 0.63);
188
274
  --border-focus: #4FC3F7;
189
275
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
190
276
  --navigation-active-background: rgba(237, 237, 235, 0.1);
277
+ --color-dataviz-okabe-ito-black: #FDF9F2;
278
+ --color-dataviz-categorical-8: #FDF9F2;
279
+ --color-dataviz-uncertainty-outer: #333333;
280
+ --color-dataviz-uncertainty-union: #6B6B6B;
281
+ --color-dataviz-uncertainty-inner: #D6D6D6;
191
282
  }
192
283
 
193
284
  @media (prefers-color-scheme: dark) {
194
- :root {
285
+ :root:where(:not([data-bs-theme="light"])) {
195
286
  --color-surface-page: #141410;
287
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
196
288
  --color-surface-page-scrolled: #141410;
289
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
197
290
  --color-surface-elevated: #1c1917;
291
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
198
292
  --color-surface-sunken: #0c0a09;
293
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
199
294
  --color-surface-navbar: #141410;
295
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
200
296
  --color-surface-navbar-scrolled: #141410;
297
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
298
  --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);
299
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
300
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
301
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
302
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
303
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
304
+ --color-border-strong: rgba(253, 249, 242, 0.75);
305
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
306
+ --color-border-card: rgba(253, 249, 242, 0.60);
307
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
206
308
  --color-border-code: #292524;
309
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
207
310
  --color-content-primary: #fdf9f2;
311
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
208
312
  --color-content-secondary: #a8a29e;
209
- --color-content-muted: #78716c;
313
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
314
+ --color-content-muted: #89827d;
315
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
210
316
  --color-content-inverse: #0c0a09;
317
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
211
318
  --color-interactive-primary: #98a384;
319
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
212
320
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
321
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
322
+ --color-interactive-accent: #3498db;
323
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
214
324
  --color-interactive-focus: #98a384;
215
- --color-presentation-accent: #3498DB;
216
- --color-presentation-accent-hover: #2980B9;
325
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
326
+ --color-presentation-accent: #3498db;
327
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
328
+ --color-presentation-accent-hover: #2980b9;
329
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
330
+ --color-vertical-accent-dissertation: #ce8e5c;
331
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
332
+ --color-vertical-accent-rpkg: #60a5fa;
333
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
334
+ --color-vertical-accent-SGPc: #b2bf22;
335
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
336
+ --color-brand-mark-red: #ff0000;
337
+ --color-brand-mark-red: color(display-p3 1 0 0);
217
338
  --contrast-high: rgb(237, 237, 235);
218
339
  --contrast-readable: rgb(237, 237, 235);
219
340
  --contrast-medium: #83838f;
@@ -221,10 +342,15 @@
221
342
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
222
343
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
223
344
  --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);
345
+ --border-subtle: rgba(237, 237, 235, 0.47);
346
+ --border-moderate: rgba(237, 237, 235, 0.63);
226
347
  --border-focus: #4FC3F7;
227
348
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
228
349
  --navigation-active-background: rgba(237, 237, 235, 0.1);
350
+ --color-dataviz-okabe-ito-black: #FDF9F2;
351
+ --color-dataviz-categorical-8: #FDF9F2;
352
+ --color-dataviz-uncertainty-outer: #333333;
353
+ --color-dataviz-uncertainty-union: #6B6B6B;
354
+ --color-dataviz-uncertainty-inner: #D6D6D6;
229
355
  }
230
356
  }