@dataimago/css 0.1.0-alpha.2 → 0.1.0-alpha.20

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 (29) hide show
  1. package/README.md +26 -2
  2. package/dist/bin/dataimago-sync.mjs +342 -0
  3. package/dist/dataimago.css +129 -37
  4. package/dist/dataimago.min.css +1 -1
  5. package/dist/dataviz/dataimago-dataviz.css +42 -0
  6. package/dist/dataviz/dataimago-dataviz.json +42 -0
  7. package/dist/dataviz/dataimago-dataviz.tex +21 -0
  8. package/dist/dataviz/dataimago_dataviz.R +61 -0
  9. package/dist/latex/dataimago-tokens.sty +122 -0
  10. package/dist/latex/dataimago.sty +618 -0
  11. package/dist/outputs.json +26 -0
  12. package/dist/quarto/components.scss +230 -0
  13. package/dist/quarto/dataimago-dark.scss +327 -0
  14. package/dist/quarto/dataimago-light.scss +327 -0
  15. package/dist/tailwind-preset.js +57 -10
  16. package/dist/templates/KNOWLEDGE-explorer.md +236 -0
  17. package/dist/templates/KNOWLEDGE-framework.md +233 -0
  18. package/dist/templates/KNOWLEDGE-research.md +201 -0
  19. package/dist/templates/quarto_website/README.md +48 -0
  20. package/dist/templates/quarto_website/_quarto.yml.template +141 -0
  21. package/dist/templates/quarto_website/about.qmd.template +36 -0
  22. package/dist/templates/quarto_website/assets/js/custom-anchors.js +6 -0
  23. package/dist/templates/quarto_website/assets/js/logo-switch.js +73 -0
  24. package/dist/templates/quarto_website/assets/js/scroll.js +67 -0
  25. package/dist/templates/quarto_website/ethics.qmd.template +49 -0
  26. package/dist/templates/quarto_website/index.qmd.template +71 -0
  27. package/dist/tokens.css +157 -36
  28. package/dist/tokens.scss +157 -36
  29. package/package.json +10 -2
package/dist/tokens.scss 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;
@@ -114,31 +116,75 @@
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;
117
133
  }
118
134
 
119
135
  :root, [data-bs-theme="light"] {
120
136
  --color-surface-page: #ededeb;
137
+ --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
121
138
  --color-surface-page-scrolled: #ededeb;
139
+ --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
122
140
  --color-surface-elevated: #f7f7f6;
141
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
123
142
  --color-surface-sunken: #faf2e3;
143
+ --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
124
144
  --color-surface-navbar: #ededeb;
145
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
125
146
  --color-surface-navbar-scrolled: #ededeb;
147
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
126
148
  --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);
149
+ --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
150
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
151
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
152
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
153
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
154
+ --color-border-strong: rgba(12, 10, 9, 0.75);
155
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
156
+ --color-border-card: rgba(12, 10, 9, 0.60);
157
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
131
158
  --color-border-code: #d6d3d1;
159
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
132
160
  --color-content-primary: #14140f;
133
- --color-content-secondary: #7c7c7c;
134
- --color-content-muted: #78716c;
161
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
162
+ --color-content-secondary: #6a6a6a;
163
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
164
+ --color-content-muted: #706964;
165
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
135
166
  --color-content-inverse: #fdf9f2;
167
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
136
168
  --color-interactive-primary: #434739;
169
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
137
170
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
171
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
172
+ --color-interactive-accent: #1f618d;
173
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
139
174
  --color-interactive-focus: #434739;
140
- --color-presentation-accent: #3498DB;
141
- --color-presentation-accent-hover: #2980B9;
175
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
176
+ --color-presentation-accent: #3498db;
177
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
178
+ --color-presentation-accent-hover: #2980b9;
179
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
180
+ --color-vertical-accent-dissertation: #b87333;
181
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
182
+ --color-vertical-accent-rpkg: #3b82f6;
183
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
184
+ --color-vertical-accent-SGPc: #5a6310;
185
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
186
+ --color-brand-mark-red: #cc0000;
187
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
142
188
  --contrast-high: rgb(20, 20, 16);
143
189
  --contrast-readable: rgb(20, 20, 16);
144
190
  --contrast-medium: #7c7c7c;
@@ -146,36 +192,71 @@
146
192
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
147
193
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
148
194
  --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);
195
+ --border-subtle: rgba(20, 20, 16, 0.47);
196
+ --border-moderate: rgba(20, 20, 16, 0.63);
151
197
  --border-focus: #3498DB;
152
198
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
153
199
  --navigation-active-background: rgba(20, 20, 16, 0.1);
200
+ --color-dataviz-okabe-ito-black: #000000;
201
+ --color-dataviz-categorical-8: #000000;
202
+ --color-dataviz-uncertainty-outer: #D6D6D6;
203
+ --color-dataviz-uncertainty-union: #9E9E9E;
204
+ --color-dataviz-uncertainty-inner: #333333;
154
205
  }
155
206
 
156
207
  [data-bs-theme="dark"] {
157
208
  --color-surface-page: #141410;
209
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
158
210
  --color-surface-page-scrolled: #141410;
211
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
159
212
  --color-surface-elevated: #1c1917;
213
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
160
214
  --color-surface-sunken: #0c0a09;
215
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
161
216
  --color-surface-navbar: #141410;
217
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
162
218
  --color-surface-navbar-scrolled: #141410;
219
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
163
220
  --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);
221
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
222
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
223
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
224
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
225
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
226
+ --color-border-strong: rgba(253, 249, 242, 0.75);
227
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
228
+ --color-border-card: rgba(253, 249, 242, 0.60);
229
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
168
230
  --color-border-code: #292524;
231
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
169
232
  --color-content-primary: #fdf9f2;
233
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
170
234
  --color-content-secondary: #a8a29e;
171
- --color-content-muted: #78716c;
235
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
236
+ --color-content-muted: #89827d;
237
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
172
238
  --color-content-inverse: #0c0a09;
239
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
173
240
  --color-interactive-primary: #98a384;
241
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
174
242
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
243
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
244
+ --color-interactive-accent: #3498db;
245
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
176
246
  --color-interactive-focus: #98a384;
177
- --color-presentation-accent: #3498DB;
178
- --color-presentation-accent-hover: #2980B9;
247
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
248
+ --color-presentation-accent: #3498db;
249
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
250
+ --color-presentation-accent-hover: #2980b9;
251
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
252
+ --color-vertical-accent-dissertation: #ce8e5c;
253
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
254
+ --color-vertical-accent-rpkg: #60a5fa;
255
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
256
+ --color-vertical-accent-SGPc: #b2bf22;
257
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
258
+ --color-brand-mark-red: #ff0000;
259
+ --color-brand-mark-red: color(display-p3 1 0 0);
179
260
  --contrast-high: rgb(237, 237, 235);
180
261
  --contrast-readable: rgb(237, 237, 235);
181
262
  --contrast-medium: #83838f;
@@ -183,37 +264,72 @@
183
264
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
184
265
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
185
266
  --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);
267
+ --border-subtle: rgba(237, 237, 235, 0.47);
268
+ --border-moderate: rgba(237, 237, 235, 0.63);
188
269
  --border-focus: #4FC3F7;
189
270
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
190
271
  --navigation-active-background: rgba(237, 237, 235, 0.1);
272
+ --color-dataviz-okabe-ito-black: #FDF9F2;
273
+ --color-dataviz-categorical-8: #FDF9F2;
274
+ --color-dataviz-uncertainty-outer: #333333;
275
+ --color-dataviz-uncertainty-union: #6B6B6B;
276
+ --color-dataviz-uncertainty-inner: #D6D6D6;
191
277
  }
192
278
 
193
279
  @media (prefers-color-scheme: dark) {
194
- :root {
280
+ :root:where(:not([data-bs-theme="light"])) {
195
281
  --color-surface-page: #141410;
282
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
196
283
  --color-surface-page-scrolled: #141410;
284
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
197
285
  --color-surface-elevated: #1c1917;
286
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
198
287
  --color-surface-sunken: #0c0a09;
288
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
199
289
  --color-surface-navbar: #141410;
290
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
200
291
  --color-surface-navbar-scrolled: #141410;
292
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
293
  --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);
294
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
295
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
296
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
297
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
298
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
299
+ --color-border-strong: rgba(253, 249, 242, 0.75);
300
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
301
+ --color-border-card: rgba(253, 249, 242, 0.60);
302
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
206
303
  --color-border-code: #292524;
304
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
207
305
  --color-content-primary: #fdf9f2;
306
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
208
307
  --color-content-secondary: #a8a29e;
209
- --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);
210
311
  --color-content-inverse: #0c0a09;
312
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
211
313
  --color-interactive-primary: #98a384;
314
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
212
315
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
316
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
317
+ --color-interactive-accent: #3498db;
318
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
214
319
  --color-interactive-focus: #98a384;
215
- --color-presentation-accent: #3498DB;
216
- --color-presentation-accent-hover: #2980B9;
320
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
321
+ --color-presentation-accent: #3498db;
322
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
323
+ --color-presentation-accent-hover: #2980b9;
324
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
325
+ --color-vertical-accent-dissertation: #ce8e5c;
326
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
327
+ --color-vertical-accent-rpkg: #60a5fa;
328
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
329
+ --color-vertical-accent-SGPc: #b2bf22;
330
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
331
+ --color-brand-mark-red: #ff0000;
332
+ --color-brand-mark-red: color(display-p3 1 0 0);
217
333
  --contrast-high: rgb(237, 237, 235);
218
334
  --contrast-readable: rgb(237, 237, 235);
219
335
  --contrast-medium: #83838f;
@@ -221,10 +337,15 @@
221
337
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
222
338
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
223
339
  --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);
340
+ --border-subtle: rgba(237, 237, 235, 0.47);
341
+ --border-moderate: rgba(237, 237, 235, 0.63);
226
342
  --border-focus: #4FC3F7;
227
343
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
228
344
  --navigation-active-background: rgba(237, 237, 235, 0.1);
345
+ --color-dataviz-okabe-ito-black: #FDF9F2;
346
+ --color-dataviz-categorical-8: #FDF9F2;
347
+ --color-dataviz-uncertainty-outer: #333333;
348
+ --color-dataviz-uncertainty-union: #6B6B6B;
349
+ --color-dataviz-uncertainty-inner: #D6D6D6;
229
350
  }
230
351
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/css",
3
- "version": "0.1.0-alpha.2",
3
+ "version": "0.1.0-alpha.20",
4
4
  "description": "Compiled CSS and Tailwind preset for the dataimago ethical AI design system",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -18,14 +18,22 @@
18
18
  "./dataimago.min.css": "./dist/dataimago.min.css",
19
19
  "./tokens.css": "./dist/tokens.css",
20
20
  "./tailwind-preset": "./dist/tailwind-preset.js",
21
+ "./quarto/*": "./dist/quarto/*",
22
+ "./latex/*": "./dist/latex/*",
23
+ "./dataviz/*": "./dist/dataviz/*",
24
+ "./templates/*": "./dist/templates/*",
25
+ "./outputs.json": "./dist/outputs.json",
21
26
  "./package.json": "./package.json"
22
27
  },
28
+ "bin": {
29
+ "dataimago-sync": "./dist/bin/dataimago-sync.mjs"
30
+ },
23
31
  "files": [
24
32
  "dist",
25
33
  "README.md"
26
34
  ],
27
35
  "dependencies": {
28
- "@dataimago/tokens": "^0.1.0-alpha.2"
36
+ "@dataimago/tokens": "^0.1.0-alpha.18"
29
37
  },
30
38
  "devDependencies": {
31
39
  "sass": "^1.69.0"