@atelier-ui/create-workspace 0.2.21 โ 0.2.23
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.
- package/CHANGELOG.md +15 -0
- package/package.json +1 -1
- package/src/generators/preset/files/styles/tokens.css +134 -59
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
## 0.2.23 (2026-08-27)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for create-workspace to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 0.2.22 (2026-08-27)
|
|
6
|
+
|
|
7
|
+
### ๐ Features
|
|
8
|
+
|
|
9
|
+
- **tokens:** ramps for the four status families, and one type step below the scale ([f0a6beb](https://github.com/DominikPieper/atelier-ui/commit/f0a6beb))
|
|
10
|
+
|
|
11
|
+
### โค๏ธ Thank You
|
|
12
|
+
|
|
13
|
+
- Claude Opus 5
|
|
14
|
+
- Dominik Pieper @DominikPieper
|
|
15
|
+
|
|
1
16
|
## 0.2.21 (2026-08-27)
|
|
2
17
|
|
|
3
18
|
### ๐ฉน Fixes
|
package/package.json
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:
|
|
158
|
-
--ui-color-danger-hover:
|
|
159
|
-
--ui-color-danger-active:
|
|
160
|
-
--ui-color-success:
|
|
161
|
-
--ui-color-warning:
|
|
162
|
-
--ui-color-info:
|
|
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:
|
|
166
|
-
--ui-color-success-text:
|
|
167
|
-
--ui-color-warning-bg:
|
|
168
|
-
--ui-color-warning-text:
|
|
169
|
-
--ui-color-danger-bg:
|
|
170
|
-
--ui-color-danger-text:
|
|
171
|
-
--ui-color-info-bg:
|
|
172
|
-
--ui-color-info-text:
|
|
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:
|
|
301
|
-
--ui-color-danger-hover:
|
|
302
|
-
--ui-color-danger-active:
|
|
303
|
-
--ui-color-success:
|
|
304
|
-
--ui-color-warning:
|
|
305
|
-
--ui-color-info:
|
|
306
|
-
|
|
307
|
-
--ui-color-success-bg:
|
|
308
|
-
--ui-color-success-text:
|
|
309
|
-
--ui-color-warning-bg:
|
|
310
|
-
--ui-color-warning-text:
|
|
311
|
-
--ui-color-danger-bg:
|
|
312
|
-
--ui-color-danger-text:
|
|
313
|
-
--ui-color-info-bg:
|
|
314
|
-
--ui-color-info-text:
|
|
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:
|
|
361
|
-
--ui-color-danger-hover:
|
|
362
|
-
--ui-color-danger-active:
|
|
363
|
-
--ui-color-success:
|
|
364
|
-
--ui-color-warning:
|
|
365
|
-
--ui-color-info:
|
|
366
|
-
|
|
367
|
-
--ui-color-success-bg:
|
|
368
|
-
--ui-color-success-text:
|
|
369
|
-
--ui-color-warning-bg:
|
|
370
|
-
--ui-color-warning-text:
|
|
371
|
-
--ui-color-danger-bg:
|
|
372
|
-
--ui-color-danger-text:
|
|
373
|
-
--ui-color-info-bg:
|
|
374
|
-
--ui-color-info-text:
|
|
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:
|
|
421
|
-
--ui-color-danger-hover:
|
|
422
|
-
--ui-color-danger-active:
|
|
423
|
-
--ui-color-success:
|
|
424
|
-
--ui-color-warning:
|
|
425
|
-
--ui-color-info:
|
|
426
|
-
|
|
427
|
-
--ui-color-success-bg:
|
|
428
|
-
--ui-color-success-text:
|
|
429
|
-
--ui-color-warning-bg:
|
|
430
|
-
--ui-color-warning-text:
|
|
431
|
-
--ui-color-danger-bg:
|
|
432
|
-
--ui-color-danger-text:
|
|
433
|
-
--ui-color-info-bg:
|
|
434
|
-
--ui-color-info-text:
|
|
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;
|