@atelier-ui/angular 0.2.42 → 0.2.43
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/README.md +1 -3
- package/fesm2022/atelier-ui-angular.mjs +363 -106
- package/fesm2022/atelier-ui-angular.mjs.map +1 -1
- package/package.json +3 -2
- package/src/styles/tokens.css +59 -43
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atelier-ui/angular",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.43",
|
|
4
4
|
"description": "Atelier component library for Angular — LLM-optimised, accessible, design-token-driven",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@angular/core": "^22.0.0",
|
|
35
35
|
"@angular/common": "^22.0.0",
|
|
36
|
-
"@angular/forms": "^22.0.0"
|
|
36
|
+
"@angular/forms": "^22.0.0",
|
|
37
|
+
"@angular/cdk": "^22.0.0"
|
|
37
38
|
},
|
|
38
39
|
"module": "fesm2022/atelier-ui-angular.mjs",
|
|
39
40
|
"typings": "types/atelier-ui-angular.d.ts",
|
package/src/styles/tokens.css
CHANGED
|
@@ -22,10 +22,12 @@
|
|
|
22
22
|
|
|
23
23
|
:root {
|
|
24
24
|
/* Typography */
|
|
25
|
-
--ui-font-family:
|
|
25
|
+
--ui-font-family:
|
|
26
|
+
'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
|
|
26
27
|
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
27
28
|
--ui-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
|
|
28
|
-
--ui-font-mono:
|
|
29
|
+
--ui-font-mono:
|
|
30
|
+
'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
|
|
29
31
|
'Courier New', monospace;
|
|
30
32
|
/* Below the smallest readable size, for text inside a box too small to hold it:
|
|
31
33
|
the initials in a 24px avatar and the count in its overflow badge. Named rather
|
|
@@ -74,9 +76,15 @@
|
|
|
74
76
|
* padding, not one line among many). See ADR-0052.
|
|
75
77
|
*/
|
|
76
78
|
--ui-row-inset: 0.25rem;
|
|
77
|
-
--ui-row-height-sm: calc(
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
--ui-row-height-sm: calc(
|
|
80
|
+
var(--ui-control-height-sm) + 2 * var(--ui-row-inset)
|
|
81
|
+
);
|
|
82
|
+
--ui-row-height-md: calc(
|
|
83
|
+
var(--ui-control-height-md) + 2 * var(--ui-row-inset)
|
|
84
|
+
);
|
|
85
|
+
--ui-row-height-lg: calc(
|
|
86
|
+
var(--ui-control-height-lg) + 2 * var(--ui-row-inset)
|
|
87
|
+
);
|
|
80
88
|
|
|
81
89
|
--ui-control-height-sm: 2rem;
|
|
82
90
|
--ui-control-height-md: 2.5rem;
|
|
@@ -104,8 +112,8 @@
|
|
|
104
112
|
* role with --ui-letter-spacing-tight and an uppercased label role with
|
|
105
113
|
* --ui-letter-spacing-uppercase yourself.
|
|
106
114
|
*/
|
|
107
|
-
--ui-type-display: italic var(--ui-font-weight-normal)
|
|
108
|
-
var(--ui-line-height-tight) var(--ui-font-display);
|
|
115
|
+
--ui-type-display: italic var(--ui-font-weight-normal)
|
|
116
|
+
var(--ui-font-size-3xl) / var(--ui-line-height-tight) var(--ui-font-display);
|
|
109
117
|
--ui-type-headline: var(--ui-font-weight-bold) var(--ui-font-size-2xl) /
|
|
110
118
|
var(--ui-line-height-tight) var(--ui-font-family);
|
|
111
119
|
--ui-type-title: var(--ui-font-weight-semibold) var(--ui-font-size-lg) /
|
|
@@ -292,9 +300,9 @@
|
|
|
292
300
|
--ui-color-overlay: rgba(0, 0, 0, 0.5);
|
|
293
301
|
|
|
294
302
|
/* Borders — split decorative from functional per WCAG 1.4.11 */
|
|
295
|
-
--ui-color-border: #e2e8f0;
|
|
303
|
+
--ui-color-border: #e2e8f0; /* decorative */
|
|
296
304
|
--ui-color-border-hover: #cbd5e1;
|
|
297
|
-
--ui-color-border-strong: #64748b;
|
|
305
|
+
--ui-color-border-strong: #64748b; /* functional ≥3:1 */
|
|
298
306
|
|
|
299
307
|
/* Text */
|
|
300
308
|
--ui-color-text: #0f172a;
|
|
@@ -316,10 +324,10 @@
|
|
|
316
324
|
--ui-opacity-disabled: 0.5;
|
|
317
325
|
|
|
318
326
|
/* Border radius — bumped for modern feel */
|
|
319
|
-
--ui-radius-sm: 0.5rem;
|
|
327
|
+
--ui-radius-sm: 0.5rem; /* was 0.375rem */
|
|
320
328
|
--ui-radius-md: 0.625rem; /* was 0.5rem */
|
|
321
329
|
--ui-radius-lg: 0.875rem; /* was 0.75rem */
|
|
322
|
-
--ui-radius-xl: 1.25rem;
|
|
330
|
+
--ui-radius-xl: 1.25rem; /* was 1rem */
|
|
323
331
|
--ui-radius-full: 9999px;
|
|
324
332
|
|
|
325
333
|
/* ── Border widths ──────────────────────────────────────────────────────────
|
|
@@ -348,13 +356,15 @@
|
|
|
348
356
|
|
|
349
357
|
/* Shadows — slate-tinted dual-layer (ambient + key light) */
|
|
350
358
|
--ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
351
|
-
--ui-shadow-sm:
|
|
352
|
-
0 1px 2px -1px rgba(15, 23, 42, 0.06);
|
|
353
|
-
--ui-shadow-md:
|
|
354
|
-
0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
355
|
-
--ui-shadow-lg:
|
|
359
|
+
--ui-shadow-sm:
|
|
360
|
+
0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
|
|
361
|
+
--ui-shadow-md:
|
|
362
|
+
0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
363
|
+
--ui-shadow-lg:
|
|
364
|
+
0 10px 15px -3px rgba(15, 23, 42, 0.08),
|
|
356
365
|
0 4px 6px -4px rgba(15, 23, 42, 0.04);
|
|
357
|
-
--ui-shadow-xl:
|
|
366
|
+
--ui-shadow-xl:
|
|
367
|
+
0 20px 25px -5px rgba(15, 23, 42, 0.1),
|
|
358
368
|
0 8px 10px -6px rgba(15, 23, 42, 0.04);
|
|
359
369
|
|
|
360
370
|
/* Motion */
|
|
@@ -375,10 +385,10 @@
|
|
|
375
385
|
* both of which are mode-dependent, so the ring follows the mode for free.
|
|
376
386
|
* The danger variant exists so an invalid control does not have to restate
|
|
377
387
|
* the formula (it did, in atl-input.css, until 2026-08-26). */
|
|
378
|
-
--ui-focus-ring:
|
|
379
|
-
0 0 0 4px var(--ui-color-primary);
|
|
380
|
-
--ui-focus-ring-danger:
|
|
381
|
-
0 0 0 4px var(--ui-color-danger);
|
|
388
|
+
--ui-focus-ring:
|
|
389
|
+
0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-primary);
|
|
390
|
+
--ui-focus-ring-danger:
|
|
391
|
+
0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
|
|
382
392
|
|
|
383
393
|
/* Form controls */
|
|
384
394
|
--ui-color-input-bg: var(--ui-color-surface-sunken);
|
|
@@ -450,18 +460,18 @@
|
|
|
450
460
|
--ui-color-placeholder: #94a3b8;
|
|
451
461
|
|
|
452
462
|
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
453
|
-
--ui-shadow-sm:
|
|
454
|
-
0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
455
|
-
--ui-shadow-md:
|
|
456
|
-
0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
457
|
-
--ui-shadow-lg:
|
|
458
|
-
0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
459
|
-
--ui-shadow-xl:
|
|
460
|
-
0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
463
|
+
--ui-shadow-sm:
|
|
464
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
465
|
+
--ui-shadow-md:
|
|
466
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
467
|
+
--ui-shadow-lg:
|
|
468
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
469
|
+
--ui-shadow-xl:
|
|
470
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
461
471
|
}
|
|
462
472
|
}
|
|
463
473
|
|
|
464
|
-
[data-theme=
|
|
474
|
+
[data-theme='dark'] {
|
|
465
475
|
--ui-color-primary: var(--ui-color-teal-300);
|
|
466
476
|
--ui-color-primary-hover: var(--ui-color-teal-200);
|
|
467
477
|
--ui-color-primary-active: var(--ui-color-teal-100);
|
|
@@ -510,18 +520,18 @@
|
|
|
510
520
|
--ui-color-placeholder: #94a3b8;
|
|
511
521
|
|
|
512
522
|
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
513
|
-
--ui-shadow-sm:
|
|
514
|
-
0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
515
|
-
--ui-shadow-md:
|
|
516
|
-
0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
517
|
-
--ui-shadow-lg:
|
|
518
|
-
0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
519
|
-
--ui-shadow-xl:
|
|
520
|
-
0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
523
|
+
--ui-shadow-sm:
|
|
524
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
525
|
+
--ui-shadow-md:
|
|
526
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
527
|
+
--ui-shadow-lg:
|
|
528
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
529
|
+
--ui-shadow-xl:
|
|
530
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
521
531
|
}
|
|
522
532
|
|
|
523
533
|
/* Explicit light theme — declared last so it wins over prefers-color-scheme: dark */
|
|
524
|
-
[data-theme=
|
|
534
|
+
[data-theme='light'] {
|
|
525
535
|
--ui-color-primary: var(--ui-color-teal-700);
|
|
526
536
|
--ui-color-primary-hover: var(--ui-color-teal-800);
|
|
527
537
|
--ui-color-primary-active: var(--ui-color-teal-900);
|
|
@@ -570,10 +580,16 @@
|
|
|
570
580
|
--ui-color-placeholder: #64748b;
|
|
571
581
|
|
|
572
582
|
--ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
573
|
-
--ui-shadow-sm:
|
|
574
|
-
|
|
575
|
-
--ui-shadow-
|
|
576
|
-
|
|
583
|
+
--ui-shadow-sm:
|
|
584
|
+
0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
|
|
585
|
+
--ui-shadow-md:
|
|
586
|
+
0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
587
|
+
--ui-shadow-lg:
|
|
588
|
+
0 10px 15px -3px rgba(15, 23, 42, 0.08),
|
|
589
|
+
0 4px 6px -4px rgba(15, 23, 42, 0.04);
|
|
590
|
+
--ui-shadow-xl:
|
|
591
|
+
0 20px 25px -5px rgba(15, 23, 42, 0.1),
|
|
592
|
+
0 8px 10px -6px rgba(15, 23, 42, 0.04);
|
|
577
593
|
}
|
|
578
594
|
|
|
579
595
|
@media (prefers-reduced-motion: reduce) {
|