@dataimago/css 0.1.0-alpha.1 → 0.1.0-alpha.11

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 (7) hide show
  1. package/README.md +4 -2
  2. package/dist/dataimago.css +219 -66
  3. package/dist/dataimago.min.css +1 -1
  4. package/dist/tailwind-preset.js +188 -52
  5. package/dist/tokens.css +182 -62
  6. package/dist/tokens.scss +182 -62
  7. package/package.json +2 -2
package/dist/tokens.scss CHANGED
@@ -9,12 +9,32 @@
9
9
  --color-palette-ink-700: #292524;
10
10
  --color-palette-ink-800: #1c1917;
11
11
  --color-palette-ink-900: #0c0a09;
12
- --color-palette-cream-50: #fefdfb;
13
- --color-palette-cream-100: #fdf9f2;
14
- --color-palette-cream-200: #faf2e3;
15
- --color-palette-cream-300: #f5e8cf;
16
- --color-palette-cream-400: #edd9b3;
17
- --color-palette-cream-500: #e0c088;
12
+ --color-palette-stone-50: #f7f7f6;
13
+ --color-palette-stone-100: #ededeb;
14
+ --color-palette-stone-200: #dcdcda;
15
+ --color-palette-stone-300: #c1c1bf;
16
+ --color-palette-stone-400: #a0a0a0;
17
+ --color-palette-stone-500: #7c7c7c;
18
+ --color-palette-stone-600: #5e5e5c;
19
+ --color-palette-stone-700: #424240;
20
+ --color-palette-stone-800: #292927;
21
+ --color-palette-stone-900: #14140f;
22
+ --color-palette-forest-50: #f0f1ed;
23
+ --color-palette-forest-100: #dde0d4;
24
+ --color-palette-forest-200: #bdc4ad;
25
+ --color-palette-forest-300: #98a384;
26
+ --color-palette-forest-400: #7e8a6b;
27
+ --color-palette-forest-500: #5e6749;
28
+ --color-palette-forest-600: #4d5640;
29
+ --color-palette-forest-700: #434739;
30
+ --color-palette-forest-800: #363a2e;
31
+ --color-palette-forest-900: #1f2218;
32
+ --color-palette-paper-50: #fefdfb;
33
+ --color-palette-paper-100: #fdf9f2;
34
+ --color-palette-paper-200: #faf2e3;
35
+ --color-palette-paper-300: #f5e8cf;
36
+ --color-palette-paper-400: #edd9b3;
37
+ --color-palette-paper-500: #e0c088;
18
38
  --color-palette-copper-50: #fdf4ee;
19
39
  --color-palette-copper-100: #fbe5d1;
20
40
  --color-palette-copper-200: #f6c79c;
@@ -25,10 +45,12 @@
25
45
  --color-palette-copper-700: #913d15;
26
46
  --color-palette-copper-800: #753318;
27
47
  --color-palette-copper-900: #612b16;
28
- --color-palette-accent-50: #fdf2f2;
29
- --color-palette-accent-500: #b54a27;
30
- --color-palette-accent-600: #9a3e20;
31
- --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;
32
54
  --color-palette-presentation-blue-50: #f0f8fc;
33
55
  --color-palette-presentation-blue-500: #3498DB;
34
56
  --color-palette-presentation-blue-600: #2980B9;
@@ -37,11 +59,17 @@
37
59
  --color-functional-warning: #F39C12;
38
60
  --color-functional-error: #E74C3C;
39
61
  --color-functional-info: #3498DB;
40
- --font-family-sans: Fira Sans, system-ui, sans-serif;
62
+ --transition-quick: 0.15s ease;
63
+ --transition-standard: 0.25s ease-in-out;
64
+ --transition-smooth: 0.35s ease;
65
+ --transition-logo: 0.3s;
66
+ --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
41
67
  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
42
- --font-family-display: Josefin Sans, system-ui, sans-serif;
68
+ --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;
43
71
  --font-family-brand: Futura, system-ui, sans-serif;
44
- --font-family-math: Fira Math, Fira Sans Math, system-ui, sans-serif;
72
+ --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
45
73
  --font-size-micro: 0.75rem;
46
74
  --font-size-small: 0.875rem;
47
75
  --font-size-base: 1rem;
@@ -57,7 +85,7 @@
57
85
  --font-weight-medium: 500;
58
86
  --font-weight-semibold: 600;
59
87
  --font-weight-bold: 700;
60
- --font-weight-heading-h1: var(--font-weight-bold);
88
+ --font-weight-heading-h1: var(--font-weight-medium);
61
89
  --font-weight-heading-h2: var(--font-weight-medium);
62
90
  --font-weight-heading-h3: var(--font-weight-normal);
63
91
  --font-weight-heading-h4: var(--font-weight-light);
@@ -70,6 +98,8 @@
70
98
  --font-lineHeight-tight: 1.25;
71
99
  --font-lineHeight-normal: 1.5;
72
100
  --font-lineHeight-relaxed: 1.625;
101
+ --font-feature-settings-display: "lnum";
102
+ --font-feature-settings-body: "normal";
73
103
  --spacing-xs: 0.25rem;
74
104
  --spacing-sm: 0.5rem;
75
105
  --spacing-md: 1rem;
@@ -89,28 +119,58 @@
89
119
  }
90
120
 
91
121
  :root, [data-bs-theme="light"] {
92
- --color-surface-page: #fdf9f2;
93
- --color-surface-page-scrolled: #fdf9f2;
94
- --color-surface-elevated: #fefdfb;
122
+ --color-surface-page: #ededeb;
123
+ --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
124
+ --color-surface-page-scrolled: #ededeb;
125
+ --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
126
+ --color-surface-elevated: #f7f7f6;
127
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
95
128
  --color-surface-sunken: #faf2e3;
96
- --color-surface-navbar: #fdf9f2;
97
- --color-surface-navbar-scrolled: #fdf9f2;
129
+ --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
130
+ --color-surface-navbar: #ededeb;
131
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
132
+ --color-surface-navbar-scrolled: #ededeb;
133
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
98
134
  --color-surface-code: #faf2e3;
99
- --color-border-subtle: rgba(12, 10, 9, 0.08);
100
- --color-border-moderate: rgba(12, 10, 9, 0.15);
101
- --color-border-strong: rgba(12, 10, 9, 0.25);
102
- --color-border-card: rgba(12, 10, 9, 0.15);
135
+ --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
136
+ --color-border-subtle: #0c0a09;
137
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
138
+ --color-border-moderate: #0c0a09;
139
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
140
+ --color-border-strong: #0c0a09;
141
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
142
+ --color-border-card: #0c0a09;
143
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358);
103
144
  --color-border-code: #d6d3d1;
104
- --color-content-primary: #0c0a09;
105
- --color-content-secondary: #57534e;
106
- --color-content-muted: #78716c;
145
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
146
+ --color-content-primary: #14140f;
147
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
148
+ --color-content-secondary: #6a6a6a;
149
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
150
+ --color-content-muted: #706964;
151
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
107
152
  --color-content-inverse: #fdf9f2;
108
- --color-interactive-primary: #d46820;
109
- --color-interactive-hover: #b55017;
110
- --color-interactive-accent: #b54a27;
111
- --color-interactive-focus: #d46820;
112
- --color-presentation-accent: #3498DB;
113
- --color-presentation-accent-hover: #2980B9;
153
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
154
+ --color-interactive-primary: #434739;
155
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
156
+ --color-interactive-hover: #363a2e;
157
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
158
+ --color-interactive-accent: #1f618d;
159
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
160
+ --color-interactive-focus: #434739;
161
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
162
+ --color-presentation-accent: #3498db;
163
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
164
+ --color-presentation-accent-hover: #2980b9;
165
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
166
+ --color-vertical-accent-dissertation: #b87333;
167
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
168
+ --color-vertical-accent-rpkg: #3b82f6;
169
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
170
+ --color-vertical-accent-SGPc: #5a6310;
171
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
172
+ --color-brand-mark-red: #cc0000;
173
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
114
174
  --contrast-high: rgb(20, 20, 16);
115
175
  --contrast-readable: rgb(20, 20, 16);
116
176
  --contrast-medium: #7c7c7c;
@@ -126,28 +186,58 @@
126
186
  }
127
187
 
128
188
  [data-bs-theme="dark"] {
129
- --color-surface-page: #0c0a09;
130
- --color-surface-page-scrolled: #0c0a09;
189
+ --color-surface-page: #141410;
190
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
191
+ --color-surface-page-scrolled: #141410;
192
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
131
193
  --color-surface-elevated: #1c1917;
194
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
132
195
  --color-surface-sunken: #0c0a09;
133
- --color-surface-navbar: #0c0a09;
134
- --color-surface-navbar-scrolled: #0c0a09;
196
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
197
+ --color-surface-navbar: #141410;
198
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
199
+ --color-surface-navbar-scrolled: #141410;
200
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
135
201
  --color-surface-code: #1c1917;
136
- --color-border-subtle: rgba(253, 249, 242, 0.08);
137
- --color-border-moderate: rgba(253, 249, 242, 0.15);
138
- --color-border-strong: rgba(253, 249, 242, 0.25);
139
- --color-border-card: rgba(253, 249, 242, 0.15);
202
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
203
+ --color-border-subtle: #fdf9f2;
204
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
205
+ --color-border-moderate: #fdf9f2;
206
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
207
+ --color-border-strong: #fdf9f2;
208
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
209
+ --color-border-card: #fdf9f2;
210
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518);
140
211
  --color-border-code: #292524;
212
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
141
213
  --color-content-primary: #fdf9f2;
214
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
142
215
  --color-content-secondary: #a8a29e;
143
- --color-content-muted: #78716c;
216
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
217
+ --color-content-muted: #89827d;
218
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
144
219
  --color-content-inverse: #0c0a09;
145
- --color-interactive-primary: #f0a467;
146
- --color-interactive-hover: #ea8441;
147
- --color-interactive-accent: #b54a27;
148
- --color-interactive-focus: #f0a467;
149
- --color-presentation-accent: #3498DB;
150
- --color-presentation-accent-hover: #2980B9;
220
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
221
+ --color-interactive-primary: #98a384;
222
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
223
+ --color-interactive-hover: #7e8a6b;
224
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
225
+ --color-interactive-accent: #3498db;
226
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
227
+ --color-interactive-focus: #98a384;
228
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
229
+ --color-presentation-accent: #3498db;
230
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
231
+ --color-presentation-accent-hover: #2980b9;
232
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
233
+ --color-vertical-accent-dissertation: #ce8e5c;
234
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
235
+ --color-vertical-accent-rpkg: #60a5fa;
236
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
237
+ --color-vertical-accent-SGPc: #b2bf22;
238
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
239
+ --color-brand-mark-red: #ff0000;
240
+ --color-brand-mark-red: color(display-p3 1 0 0);
151
241
  --contrast-high: rgb(237, 237, 235);
152
242
  --contrast-readable: rgb(237, 237, 235);
153
243
  --contrast-medium: #83838f;
@@ -164,28 +254,58 @@
164
254
 
165
255
  @media (prefers-color-scheme: dark) {
166
256
  :root {
167
- --color-surface-page: #0c0a09;
168
- --color-surface-page-scrolled: #0c0a09;
257
+ --color-surface-page: #141410;
258
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
259
+ --color-surface-page-scrolled: #141410;
260
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
169
261
  --color-surface-elevated: #1c1917;
262
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
170
263
  --color-surface-sunken: #0c0a09;
171
- --color-surface-navbar: #0c0a09;
172
- --color-surface-navbar-scrolled: #0c0a09;
264
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
265
+ --color-surface-navbar: #141410;
266
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
267
+ --color-surface-navbar-scrolled: #141410;
268
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
173
269
  --color-surface-code: #1c1917;
174
- --color-border-subtle: rgba(253, 249, 242, 0.08);
175
- --color-border-moderate: rgba(253, 249, 242, 0.15);
176
- --color-border-strong: rgba(253, 249, 242, 0.25);
177
- --color-border-card: rgba(253, 249, 242, 0.15);
270
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
271
+ --color-border-subtle: #fdf9f2;
272
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
273
+ --color-border-moderate: #fdf9f2;
274
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
275
+ --color-border-strong: #fdf9f2;
276
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
277
+ --color-border-card: #fdf9f2;
278
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518);
178
279
  --color-border-code: #292524;
280
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
179
281
  --color-content-primary: #fdf9f2;
282
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
180
283
  --color-content-secondary: #a8a29e;
181
- --color-content-muted: #78716c;
284
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
285
+ --color-content-muted: #89827d;
286
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
182
287
  --color-content-inverse: #0c0a09;
183
- --color-interactive-primary: #f0a467;
184
- --color-interactive-hover: #ea8441;
185
- --color-interactive-accent: #b54a27;
186
- --color-interactive-focus: #f0a467;
187
- --color-presentation-accent: #3498DB;
188
- --color-presentation-accent-hover: #2980B9;
288
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
289
+ --color-interactive-primary: #98a384;
290
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
291
+ --color-interactive-hover: #7e8a6b;
292
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
293
+ --color-interactive-accent: #3498db;
294
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
295
+ --color-interactive-focus: #98a384;
296
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
297
+ --color-presentation-accent: #3498db;
298
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
299
+ --color-presentation-accent-hover: #2980b9;
300
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
301
+ --color-vertical-accent-dissertation: #ce8e5c;
302
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
303
+ --color-vertical-accent-rpkg: #60a5fa;
304
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
305
+ --color-vertical-accent-SGPc: #b2bf22;
306
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
307
+ --color-brand-mark-red: #ff0000;
308
+ --color-brand-mark-red: color(display-p3 1 0 0);
189
309
  --contrast-high: rgb(237, 237, 235);
190
310
  --contrast-readable: rgb(237, 237, 235);
191
311
  --contrast-medium: #83838f;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/css",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.11",
4
4
  "description": "Compiled CSS and Tailwind preset for the dataimago ethical AI design system",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -25,7 +25,7 @@
25
25
  "README.md"
26
26
  ],
27
27
  "dependencies": {
28
- "@dataimago/tokens": "^0.1.0-alpha.1"
28
+ "@dataimago/tokens": "^0.1.0-alpha.11"
29
29
  },
30
30
  "devDependencies": {
31
31
  "sass": "^1.69.0"