@atelier-ui/react 0.2.21 โ†’ 0.2.22

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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +1 -1
  3. package/src/lib/avatar/atl-avatar.css +2 -2
  4. package/src/lib/code-block/atl-code-block.css +2 -2
  5. package/styles/tokens.css +134 -59
package/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ## 0.2.22 (2026-08-27)
2
+
3
+ ### ๐Ÿš€ Features
4
+
5
+ - **tokens:** ramps for the four status families, and one type step below the scale ([f0a6beb](https://github.com/DominikPieper/atelier-ui/commit/f0a6beb))
6
+
7
+ ### โค๏ธ Thank You
8
+
9
+ - Claude Opus 5
10
+ - Dominik Pieper @DominikPieper
11
+
1
12
  ## 0.2.21 (2026-08-27)
2
13
 
3
14
  This was a version bump only for react to align it with other projects, there were no code changes.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/react",
3
- "version": "0.2.21",
3
+ "version": "0.2.22",
4
4
  "description": "Atelier component library for React โ€” LLM-optimised, accessible, design-token-driven",
5
5
  "keywords": [
6
6
  "react",
package/src/lib/avatar/atl-avatar.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
  /* Sizes */
39
- .atl-avatar.size-xs { width: 24px; height: 24px; font-size: 0.625rem; }
39
+ .atl-avatar.size-xs { width: 24px; height: 24px; font-size: var(--ui-font-size-2xs); }
40
40
  .atl-avatar.size-sm { width: 32px; height: 32px; font-size: var(--ui-font-size-xs); }
41
41
  .atl-avatar.size-md { width: 40px; height: 40px; font-size: var(--ui-font-size-sm); }
42
42
  .atl-avatar.size-lg { width: 48px; height: 48px; font-size: var(--ui-font-size-md); }
@@ -124,7 +124,7 @@
124
124
  margin-inline-start: -8px;
125
125
  }
126
126
 
127
- .overflow-badge.size-xs { width: 24px; height: 24px; font-size: 0.5625rem; }
127
+ .overflow-badge.size-xs { width: 24px; height: 24px; font-size: var(--ui-font-size-2xs); }
128
128
  .overflow-badge.size-sm { width: 32px; height: 32px; font-size: var(--ui-font-size-xs); }
129
129
  .overflow-badge.size-md { width: 40px; height: 40px; font-size: var(--ui-font-size-sm); }
130
130
  .overflow-badge.size-lg { width: 48px; height: 48px; font-size: var(--ui-font-size-sm); }
package/src/lib/code-block/atl-code-block.css CHANGED
@@ -49,7 +49,7 @@
49
49
 
50
50
  .code-block-label {
51
51
  font-family: var(--ui-font-mono);
52
- font-size: 0.72rem;
52
+ font-size: var(--ui-font-size-xs);
53
53
  font-weight: 600;
54
54
  letter-spacing: 0.03em;
55
55
  color: var(--ui-color-text-muted);
@@ -71,7 +71,7 @@
71
71
  background: transparent;
72
72
  color: var(--ui-color-text-muted);
73
73
  font-family: inherit;
74
- font-size: 0.72rem;
74
+ font-size: var(--ui-font-size-xs);
75
75
  font-weight: 500;
76
76
  cursor: pointer;
77
77
  transition: color var(--ui-transition-fast), background var(--ui-transition-fast), border-color var(--ui-transition-fast);
package/styles/tokens.css CHANGED
@@ -27,6 +27,11 @@
27
27
  --ui-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
28
28
  --ui-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
29
29
  'Courier New', monospace;
30
+ /* Below the smallest readable size, for text inside a box too small to hold it:
31
+ the initials in a 24px avatar and the count in its overflow badge. Named rather
32
+ than left as the two literals it replaces (0.625rem and 0.5625rem), which is the
33
+ whole off-scale type population the library had. */
34
+ --ui-font-size-2xs: 0.625rem;
30
35
  --ui-font-size-xs: 0.75rem;
31
36
  --ui-font-size-sm: 0.875rem;
32
37
  --ui-font-size-md: 1rem;
@@ -143,6 +148,76 @@
143
148
  --ui-color-teal-800: #004e58; /* T on surface(light) 9.41 */
144
149
  --ui-color-teal-900: #003a42; /* T on surface(light) 12.47 */
145
150
 
151
+ /* Status ramps โ€” the same construction as the teal ramp above, for the four
152
+ * status families. Every step the components ship was already sitting where a
153
+ * 100โ€“950 ramp would put it: ordering the shipping values by OKLab lightness
154
+ * reproduces the step numbers in all four families, measured. So the shipping
155
+ * values are unchanged and only the gaps are generated.
156
+ *
157
+ * No 50 step. Extrapolating past each family's lightest shipping tint lands on
158
+ * #ffffff in three of the four โ€” measured โ€” so a 50 would be a name for the
159
+ * surface, which --ui-color-surface already is. The teal ramp has one because
160
+ * its light end is a vivid cyan the dark theme reads text against.
161
+ *
162
+ * The 950 is the dark theme's tinted background. It continues the ramp's
163
+ * direction (darker and less chromatic) with a visible chroma step down from
164
+ * the 900, which is correct for a surface tint rather than a text colour.
165
+ *
166
+ * Steps missing a shipping value in one family but present in another are
167
+ * placed at the fraction the family that HAS both puts them at, rather than at
168
+ * the midpoint: red ships an 800, a 900 and a 950, and its 900 sits 24.8% of the
169
+ * way from 800 to 950, not 50%. Interpolating to the midpoint would have made
170
+ * green's and amber's 900 too dark by a visible step.
171
+ */
172
+
173
+ /* red โ€” the danger family */
174
+ --ui-color-red-100: #fee2e2; /* T on surface(dark) 15.56 */
175
+ --ui-color-red-200: #fecaca; /* T on surface(dark) 13.14 */
176
+ --ui-color-red-300: #fca5a5; /* T on surface(dark) 10.02 */
177
+ --ui-color-red-400: #f87171; /* T on surface(dark) 6.87 */
178
+ --ui-color-red-500: #e35856; /* T on surface(dark) 5.25 */
179
+ --ui-color-red-600: #ce3d3b; /* T on surface(light) 4.82 */
180
+ --ui-color-red-700: #b91c1c; /* โ˜… ยท T on surface(light) 6.47 */
181
+ --ui-color-red-800: #991b1b; /* T on surface(light) 8.31 */
182
+ --ui-color-red-900: #7f1d1d; /* T on surface(light) 10.02 */
183
+ --ui-color-red-950: #3a1414; /* T on surface(light) 16.28 */
184
+
185
+ /* green โ€” the success family */
186
+ --ui-color-green-100: #dcfce7; /* T on surface(dark) 17.31 */
187
+ --ui-color-green-200: #b4f6ca; /* T on surface(dark) 15.37 */
188
+ --ui-color-green-300: #86efac; /* T on surface(dark) 13.54 */
189
+ --ui-color-green-400: #4ade80; /* T on surface(dark) 10.91 */
190
+ --ui-color-green-500: #39be69; /* T on surface(dark) 7.91 */
191
+ --ui-color-green-600: #279e53; /* T on surface(dark) 5.52 */
192
+ --ui-color-green-700: #15803d; /* โ˜… ยท T on surface(light) 5.02 */
193
+ --ui-color-green-800: #166534; /* T on surface(light) 7.13 */
194
+ --ui-color-green-900: #15582f; /* T on surface(light) 8.51 */
195
+ --ui-color-green-950: #0f3320; /* T on surface(light) 13.86 */
196
+
197
+ /* amber โ€” the warning family */
198
+ --ui-color-amber-100: #fef3c7; /* T on surface(dark) 17.07 */
199
+ --ui-color-amber-200: #fde68a; /* T on surface(dark) 15.26 */
200
+ --ui-color-amber-300: #fcd361; /* T on surface(dark) 13.24 */
201
+ --ui-color-amber-400: #fbbf24; /* T on surface(dark) 11.39 */
202
+ --ui-color-amber-500: #e49b1b; /* T on surface(dark) 8.15 */
203
+ --ui-color-amber-600: #cc7712; /* T on surface(dark) 5.63 */
204
+ --ui-color-amber-700: #b45309; /* โ˜… ยท T on surface(light) 5.02 */
205
+ --ui-color-amber-800: #854d0e; /* T on surface(light) 6.85 */
206
+ --ui-color-amber-900: #714311; /* T on surface(light) 8.36 */
207
+ --ui-color-amber-950: #3a2510; /* T on surface(light) 14.46 */
208
+
209
+ /* sky โ€” the info family */
210
+ --ui-color-sky-100: #e0f2fe; /* T on surface(dark) 16.57 */
211
+ --ui-color-sky-200: #bae6fd; /* T on surface(dark) 14.33 */
212
+ --ui-color-sky-300: #82d2fb; /* T on surface(dark) 11.37 */
213
+ --ui-color-sky-400: #38bdf8; /* T on surface(dark) 8.87 */
214
+ --ui-color-sky-500: #28a0da; /* T on surface(dark) 6.46 */
215
+ --ui-color-sky-600: #1784bd; /* T on surface(dark) 4.59 */
216
+ --ui-color-sky-700: #0369a1; /* โ˜… ยท T on surface(light) 5.93 */
217
+ --ui-color-sky-800: #0a5784; /* T on surface(light) 7.75 */
218
+ --ui-color-sky-900: #0c4a6e; /* T on surface(light) 9.46 */
219
+ --ui-color-sky-950: #102338; /* T on surface(light) 15.91 */
220
+
146
221
  --ui-color-primary: var(--ui-color-teal-700);
147
222
  --ui-color-primary-hover: var(--ui-color-teal-800);
148
223
  --ui-color-primary-active: var(--ui-color-teal-900);
@@ -154,22 +229,22 @@
154
229
  --ui-color-secondary-active: #1e293b;
155
230
 
156
231
  /* Semantic */
157
- --ui-color-danger: #b91c1c;
158
- --ui-color-danger-hover: #991b1b;
159
- --ui-color-danger-active: #7f1d1d;
160
- --ui-color-success: #15803d;
161
- --ui-color-warning: #b45309;
162
- --ui-color-info: #0369a1;
232
+ --ui-color-danger: var(--ui-color-red-700);
233
+ --ui-color-danger-hover: var(--ui-color-red-800);
234
+ --ui-color-danger-active: var(--ui-color-red-900);
235
+ --ui-color-success: var(--ui-color-green-700);
236
+ --ui-color-warning: var(--ui-color-amber-700);
237
+ --ui-color-info: var(--ui-color-sky-700);
163
238
 
164
239
  /* Semantic โ€” AA-safe dark-text-on-tinted-bg pairs (Badge / Alert / Toast) */
165
- --ui-color-success-bg: #dcfce7;
166
- --ui-color-success-text: #166534;
167
- --ui-color-warning-bg: #fef3c7;
168
- --ui-color-warning-text: #854d0e;
169
- --ui-color-danger-bg: #fee2e2;
170
- --ui-color-danger-text: #991b1b;
171
- --ui-color-info-bg: #e0f2fe;
172
- --ui-color-info-text: #0c4a6e;
240
+ --ui-color-success-bg: var(--ui-color-green-100);
241
+ --ui-color-success-text: var(--ui-color-green-800);
242
+ --ui-color-warning-bg: var(--ui-color-amber-100);
243
+ --ui-color-warning-text: var(--ui-color-amber-800);
244
+ --ui-color-danger-bg: var(--ui-color-red-100);
245
+ --ui-color-danger-text: var(--ui-color-red-800);
246
+ --ui-color-info-bg: var(--ui-color-sky-100);
247
+ --ui-color-info-text: var(--ui-color-sky-900);
173
248
 
174
249
  /* Surfaces โ€” clean white + cool slate */
175
250
  --ui-color-surface: #ffffff;
@@ -297,21 +372,21 @@
297
372
  --ui-color-secondary-hover: #cbd5e1;
298
373
  --ui-color-secondary-active: #e2e8f0;
299
374
 
300
- --ui-color-danger: #f87171;
301
- --ui-color-danger-hover: #fca5a5;
302
- --ui-color-danger-active: #fecaca;
303
- --ui-color-success: #4ade80;
304
- --ui-color-warning: #fbbf24;
305
- --ui-color-info: #38bdf8;
306
-
307
- --ui-color-success-bg: #0f3320;
308
- --ui-color-success-text: #86efac;
309
- --ui-color-warning-bg: #3a2510;
310
- --ui-color-warning-text: #fde68a;
311
- --ui-color-danger-bg: #3a1414;
312
- --ui-color-danger-text: #fca5a5;
313
- --ui-color-info-bg: #102338;
314
- --ui-color-info-text: #bae6fd;
375
+ --ui-color-danger: var(--ui-color-red-400);
376
+ --ui-color-danger-hover: var(--ui-color-red-300);
377
+ --ui-color-danger-active: var(--ui-color-red-200);
378
+ --ui-color-success: var(--ui-color-green-400);
379
+ --ui-color-warning: var(--ui-color-amber-400);
380
+ --ui-color-info: var(--ui-color-sky-400);
381
+
382
+ --ui-color-success-bg: var(--ui-color-green-950);
383
+ --ui-color-success-text: var(--ui-color-green-300);
384
+ --ui-color-warning-bg: var(--ui-color-amber-950);
385
+ --ui-color-warning-text: var(--ui-color-amber-200);
386
+ --ui-color-danger-bg: var(--ui-color-red-950);
387
+ --ui-color-danger-text: var(--ui-color-red-300);
388
+ --ui-color-info-bg: var(--ui-color-sky-950);
389
+ --ui-color-info-text: var(--ui-color-sky-200);
315
390
 
316
391
  --ui-color-surface: #0a1116;
317
392
  --ui-color-surface-raised: #131c24;
@@ -357,21 +432,21 @@
357
432
  --ui-color-secondary-hover: #cbd5e1;
358
433
  --ui-color-secondary-active: #e2e8f0;
359
434
 
360
- --ui-color-danger: #f87171;
361
- --ui-color-danger-hover: #fca5a5;
362
- --ui-color-danger-active: #fecaca;
363
- --ui-color-success: #4ade80;
364
- --ui-color-warning: #fbbf24;
365
- --ui-color-info: #38bdf8;
366
-
367
- --ui-color-success-bg: #0f3320;
368
- --ui-color-success-text: #86efac;
369
- --ui-color-warning-bg: #3a2510;
370
- --ui-color-warning-text: #fde68a;
371
- --ui-color-danger-bg: #3a1414;
372
- --ui-color-danger-text: #fca5a5;
373
- --ui-color-info-bg: #102338;
374
- --ui-color-info-text: #bae6fd;
435
+ --ui-color-danger: var(--ui-color-red-400);
436
+ --ui-color-danger-hover: var(--ui-color-red-300);
437
+ --ui-color-danger-active: var(--ui-color-red-200);
438
+ --ui-color-success: var(--ui-color-green-400);
439
+ --ui-color-warning: var(--ui-color-amber-400);
440
+ --ui-color-info: var(--ui-color-sky-400);
441
+
442
+ --ui-color-success-bg: var(--ui-color-green-950);
443
+ --ui-color-success-text: var(--ui-color-green-300);
444
+ --ui-color-warning-bg: var(--ui-color-amber-950);
445
+ --ui-color-warning-text: var(--ui-color-amber-200);
446
+ --ui-color-danger-bg: var(--ui-color-red-950);
447
+ --ui-color-danger-text: var(--ui-color-red-300);
448
+ --ui-color-info-bg: var(--ui-color-sky-950);
449
+ --ui-color-info-text: var(--ui-color-sky-200);
375
450
 
376
451
  --ui-color-surface: #0a1116;
377
452
  --ui-color-surface-raised: #131c24;
@@ -417,21 +492,21 @@
417
492
  --ui-color-secondary-hover: #334155;
418
493
  --ui-color-secondary-active: #1e293b;
419
494
 
420
- --ui-color-danger: #b91c1c;
421
- --ui-color-danger-hover: #991b1b;
422
- --ui-color-danger-active: #7f1d1d;
423
- --ui-color-success: #15803d;
424
- --ui-color-warning: #b45309;
425
- --ui-color-info: #0369a1;
426
-
427
- --ui-color-success-bg: #dcfce7;
428
- --ui-color-success-text: #166534;
429
- --ui-color-warning-bg: #fef3c7;
430
- --ui-color-warning-text: #854d0e;
431
- --ui-color-danger-bg: #fee2e2;
432
- --ui-color-danger-text: #991b1b;
433
- --ui-color-info-bg: #e0f2fe;
434
- --ui-color-info-text: #0c4a6e;
495
+ --ui-color-danger: var(--ui-color-red-700);
496
+ --ui-color-danger-hover: var(--ui-color-red-800);
497
+ --ui-color-danger-active: var(--ui-color-red-900);
498
+ --ui-color-success: var(--ui-color-green-700);
499
+ --ui-color-warning: var(--ui-color-amber-700);
500
+ --ui-color-info: var(--ui-color-sky-700);
501
+
502
+ --ui-color-success-bg: var(--ui-color-green-100);
503
+ --ui-color-success-text: var(--ui-color-green-800);
504
+ --ui-color-warning-bg: var(--ui-color-amber-100);
505
+ --ui-color-warning-text: var(--ui-color-amber-800);
506
+ --ui-color-danger-bg: var(--ui-color-red-100);
507
+ --ui-color-danger-text: var(--ui-color-red-800);
508
+ --ui-color-info-bg: var(--ui-color-sky-100);
509
+ --ui-color-info-text: var(--ui-color-sky-900);
435
510
 
436
511
  --ui-color-surface: #ffffff;
437
512
  --ui-color-surface-raised: #f8fafc;