@atelier-ui/angular 0.1.9 → 0.1.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 (2) hide show
  1. package/package.json +14 -10
  2. package/src/styles/tokens.css +346 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/angular",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "description": "Atelier component library for Angular — LLM-optimised, accessible, design-token-driven",
5
5
  "keywords": [
6
6
  "angular",
@@ -12,6 +12,19 @@
12
12
  ],
13
13
  "author": "Atelier",
14
14
  "license": "MIT",
15
+ "exports": {
16
+ "./styles/tokens.css": {
17
+ "style": "./src/styles/tokens.css",
18
+ "default": "./src/styles/tokens.css"
19
+ },
20
+ "./package.json": {
21
+ "default": "./package.json"
22
+ },
23
+ ".": {
24
+ "types": "./types/atelier-ui-angular.d.ts",
25
+ "default": "./fesm2022/atelier-ui-angular.mjs"
26
+ }
27
+ },
15
28
  "repository": {
16
29
  "type": "git",
17
30
  "url": "https://github.com/DominikPieper/atelier-ui.git",
@@ -24,15 +37,6 @@
24
37
  },
25
38
  "module": "fesm2022/atelier-ui-angular.mjs",
26
39
  "typings": "types/atelier-ui-angular.d.ts",
27
- "exports": {
28
- "./package.json": {
29
- "default": "./package.json"
30
- },
31
- ".": {
32
- "types": "./types/atelier-ui-angular.d.ts",
33
- "default": "./fesm2022/atelier-ui-angular.mjs"
34
- }
35
- },
36
40
  "sideEffects": false,
37
41
  "type": "module",
38
42
  "dependencies": {
package/src/styles/tokens.css ADDED
@@ -0,0 +1,346 @@
1
+ /**
2
+ * Design tokens for the Atelier component library.
3
+ * Direction A — Conciso anchor only. Deep Conciso teal on a clean white
4
+ * canvas (light) / bright teal on rich slate (dark). Modernised radius
5
+ * scale. No moss, no warm bone — just Conciso.
6
+ *
7
+ * All foreground/background pairs verified WCAG 2.2 AA via
8
+ * tools/scripts/wcag-contrast.mjs (52/52 pairs passing 2026-04-26).
9
+ *
10
+ * Plan: ~/.claude/plans/atelier-design-rebrief.md (Direction A pivot)
11
+ *
12
+ * Usage:
13
+ * @import '@atelier-ui/{angular,react,vue}/styles/tokens.css';
14
+ */
15
+
16
+ :root {
17
+ /* Typography */
18
+ --ui-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
19
+ BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
20
+ --ui-font-size-xs: 0.75rem;
21
+ --ui-font-size-sm: 0.875rem;
22
+ --ui-font-size-md: 1rem;
23
+ --ui-font-size-lg: 1.125rem;
24
+ --ui-font-size-xl: 1.25rem;
25
+ --ui-font-size-2xl: 1.5rem;
26
+ --ui-letter-spacing-tight: -0.01em;
27
+ --ui-letter-spacing-normal: 0;
28
+ --ui-letter-spacing-wide: 0.01em;
29
+ --ui-font-weight-normal: 400;
30
+ --ui-font-weight-medium: 500;
31
+ --ui-font-weight-semibold: 600;
32
+ --ui-line-height-tight: 1.25;
33
+ --ui-line-height-normal: 1.5;
34
+
35
+ /* ── Colours · light mode (default) ────────────────────────── */
36
+
37
+ /* Primary — Conciso deep teal */
38
+ --ui-color-primary: #006470;
39
+ --ui-color-primary-hover: #004e58;
40
+ --ui-color-primary-active: #003a42;
41
+ --ui-color-primary-light: rgba(0, 100, 112, 0.08);
42
+
43
+ /* Secondary (legacy — kept for components that opt in) */
44
+ --ui-color-secondary: #475569;
45
+ --ui-color-secondary-hover: #334155;
46
+ --ui-color-secondary-active: #1e293b;
47
+
48
+ /* Semantic */
49
+ --ui-color-danger: #b91c1c;
50
+ --ui-color-danger-hover: #991b1b;
51
+ --ui-color-danger-active: #7f1d1d;
52
+ --ui-color-success: #15803d;
53
+ --ui-color-warning: #b45309;
54
+ --ui-color-info: #0369a1;
55
+
56
+ /* Semantic — AA-safe dark-text-on-tinted-bg pairs (Badge / Alert / Toast) */
57
+ --ui-color-success-bg: #dcfce7;
58
+ --ui-color-success-text: #166534;
59
+ --ui-color-warning-bg: #fef3c7;
60
+ --ui-color-warning-text: #854d0e;
61
+ --ui-color-danger-bg: #fee2e2;
62
+ --ui-color-danger-text: #991b1b;
63
+ --ui-color-info-bg: #e0f2fe;
64
+ --ui-color-info-text: #0c4a6e;
65
+
66
+ /* Surfaces — clean white + cool slate */
67
+ --ui-color-surface: #ffffff;
68
+ --ui-color-surface-raised: #f8fafc;
69
+ --ui-color-surface-sunken: #f1f5f9;
70
+ --ui-color-overlay: rgba(0, 0, 0, 0.5);
71
+
72
+ /* Borders — split decorative from functional per WCAG 1.4.11 */
73
+ --ui-color-border: #e2e8f0; /* decorative */
74
+ --ui-color-border-hover: #cbd5e1;
75
+ --ui-color-border-strong: #64748b; /* functional ≥3:1 */
76
+
77
+ /* Text */
78
+ --ui-color-text: #0f172a;
79
+ --ui-color-text-muted: #475569;
80
+ --ui-color-text-on-primary: #ffffff;
81
+ --ui-color-text-on-secondary: #ffffff;
82
+ --ui-color-text-on-danger: #ffffff;
83
+ --ui-color-text-on-success: #ffffff;
84
+
85
+ /* Brand palette — Conciso reference, opt-in for components that need it */
86
+ --ui-color-brand-corporate: #00bebe;
87
+ --ui-color-brand-agile: #00d296;
88
+ --ui-color-brand-architecture: #009696;
89
+ --ui-color-brand-development: #00b4ff;
90
+ --ui-color-brand-petrol: #005064;
91
+ --ui-color-brand-ai: #b5e61c;
92
+ --ui-color-brand-light-blue: #00ebff;
93
+ --ui-color-brand-light-green: #a0fa50;
94
+ --ui-opacity-disabled: 0.5;
95
+
96
+ /* Border radius — bumped for modern feel */
97
+ --ui-radius-sm: 0.5rem; /* was 0.375rem */
98
+ --ui-radius-md: 0.625rem; /* was 0.5rem */
99
+ --ui-radius-lg: 0.875rem; /* was 0.75rem */
100
+ --ui-radius-xl: 1.25rem; /* was 1rem */
101
+ --ui-radius-full: 9999px;
102
+
103
+ /* Spacing */
104
+ --ui-spacing-1: 0.25rem;
105
+ --ui-spacing-2: 0.5rem;
106
+ --ui-spacing-3: 0.75rem;
107
+ --ui-spacing-4: 1rem;
108
+ --ui-spacing-5: 1.25rem;
109
+ --ui-spacing-6: 1.5rem;
110
+ --ui-spacing-8: 2rem;
111
+ --ui-spacing-10: 2.5rem;
112
+ --ui-spacing-12: 3rem;
113
+ --ui-spacing-16: 4rem;
114
+
115
+ /* Shadows — slate-tinted dual-layer (ambient + key light) */
116
+ --ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
117
+ --ui-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08),
118
+ 0 1px 2px -1px rgba(15, 23, 42, 0.06);
119
+ --ui-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08),
120
+ 0 2px 4px -2px rgba(15, 23, 42, 0.05);
121
+ --ui-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
122
+ 0 4px 6px -4px rgba(15, 23, 42, 0.04);
123
+ --ui-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10),
124
+ 0 8px 10px -6px rgba(15, 23, 42, 0.04);
125
+
126
+ /* Motion */
127
+ --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
128
+ --ui-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
129
+ --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
130
+
131
+ --ui-duration-fast: 150ms;
132
+ --ui-duration-normal: 200ms;
133
+ --ui-duration-slow: 300ms;
134
+
135
+ --ui-transition-fast: var(--ui-duration-fast) var(--ui-ease-out);
136
+ --ui-transition-normal: var(--ui-duration-normal) var(--ui-ease-out);
137
+ --ui-transition-slow: var(--ui-duration-slow) var(--ui-ease-out);
138
+
139
+ /* Focus ring — double-ring for light & dark background compatibility */
140
+ --ui-focus-ring: 0 0 0 2px var(--ui-color-surface),
141
+ 0 0 0 4px var(--ui-color-primary);
142
+
143
+ /* Form controls */
144
+ --ui-color-input-bg: var(--ui-color-surface-sunken);
145
+ --ui-color-input-bg-focus: var(--ui-color-surface);
146
+ --ui-color-input-border: var(--ui-color-border-strong);
147
+ --ui-color-input-border-hover: #475569;
148
+ --ui-color-input-border-focus: var(--ui-color-primary);
149
+ --ui-color-input-border-invalid: var(--ui-color-danger);
150
+ --ui-color-placeholder: #64748b;
151
+ --ui-color-error-text: var(--ui-color-danger-text);
152
+
153
+ /* Z-index scale */
154
+ --ui-z-base: 0;
155
+ --ui-z-dropdown: 100;
156
+ --ui-z-overlay: 200;
157
+ --ui-z-modal: 300;
158
+ --ui-z-toast: 400;
159
+ }
160
+
161
+ /* ── Colours · dark mode ───────────────────────────────────── */
162
+
163
+ @media (prefers-color-scheme: dark) {
164
+ :root {
165
+ --ui-color-primary: #34d8d8;
166
+ --ui-color-primary-hover: #5ee5e5;
167
+ --ui-color-primary-active: #87efef;
168
+ --ui-color-primary-light: rgba(52, 216, 216, 0.15);
169
+
170
+ --ui-color-secondary: #94a3b8;
171
+ --ui-color-secondary-hover: #cbd5e1;
172
+ --ui-color-secondary-active: #e2e8f0;
173
+
174
+ --ui-color-danger: #f87171;
175
+ --ui-color-danger-hover: #fca5a5;
176
+ --ui-color-danger-active: #fecaca;
177
+ --ui-color-success: #4ade80;
178
+ --ui-color-warning: #fbbf24;
179
+ --ui-color-info: #38bdf8;
180
+
181
+ --ui-color-success-bg: #0f3320;
182
+ --ui-color-success-text: #86efac;
183
+ --ui-color-warning-bg: #3a2510;
184
+ --ui-color-warning-text: #fde68a;
185
+ --ui-color-danger-bg: #3a1414;
186
+ --ui-color-danger-text: #fca5a5;
187
+ --ui-color-info-bg: #102338;
188
+ --ui-color-info-text: #bae6fd;
189
+
190
+ --ui-color-surface: #0a1116;
191
+ --ui-color-surface-raised: #131c24;
192
+ --ui-color-surface-sunken: #060c10;
193
+ --ui-color-overlay: rgba(0, 0, 0, 0.7);
194
+
195
+ --ui-color-border: #1e293b;
196
+ --ui-color-border-hover: #334155;
197
+ --ui-color-border-strong: #64748b;
198
+
199
+ --ui-color-text: #f1f5f9;
200
+ --ui-color-text-muted: #94a3b8;
201
+ --ui-color-text-on-primary: #0a1116;
202
+ --ui-color-text-on-secondary: #0f172a;
203
+ --ui-color-text-on-danger: #0a1116;
204
+ --ui-color-text-on-success: #0a1116;
205
+
206
+ --ui-opacity-disabled: 0.65;
207
+
208
+ --ui-color-input-border: var(--ui-color-border-strong);
209
+ --ui-color-input-border-hover: #94a3b8;
210
+ --ui-color-placeholder: #94a3b8;
211
+
212
+ --ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
213
+ --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
214
+ 0 1px 2px -1px rgba(0, 0, 0, 0.3);
215
+ --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45),
216
+ 0 2px 4px -2px rgba(0, 0, 0, 0.3);
217
+ --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
218
+ 0 4px 6px -4px rgba(0, 0, 0, 0.25);
219
+ --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
220
+ 0 8px 10px -6px rgba(0, 0, 0, 0.25);
221
+ }
222
+ }
223
+
224
+ [data-theme="dark"] {
225
+ --ui-color-primary: #34d8d8;
226
+ --ui-color-primary-hover: #5ee5e5;
227
+ --ui-color-primary-active: #87efef;
228
+ --ui-color-primary-light: rgba(52, 216, 216, 0.15);
229
+
230
+ --ui-color-secondary: #94a3b8;
231
+ --ui-color-secondary-hover: #cbd5e1;
232
+ --ui-color-secondary-active: #e2e8f0;
233
+
234
+ --ui-color-danger: #f87171;
235
+ --ui-color-danger-hover: #fca5a5;
236
+ --ui-color-danger-active: #fecaca;
237
+ --ui-color-success: #4ade80;
238
+ --ui-color-warning: #fbbf24;
239
+ --ui-color-info: #38bdf8;
240
+
241
+ --ui-color-success-bg: #0f3320;
242
+ --ui-color-success-text: #86efac;
243
+ --ui-color-warning-bg: #3a2510;
244
+ --ui-color-warning-text: #fde68a;
245
+ --ui-color-danger-bg: #3a1414;
246
+ --ui-color-danger-text: #fca5a5;
247
+ --ui-color-info-bg: #102338;
248
+ --ui-color-info-text: #bae6fd;
249
+
250
+ --ui-color-surface: #0a1116;
251
+ --ui-color-surface-raised: #131c24;
252
+ --ui-color-surface-sunken: #060c10;
253
+ --ui-color-overlay: rgba(0, 0, 0, 0.7);
254
+
255
+ --ui-color-border: #1e293b;
256
+ --ui-color-border-hover: #334155;
257
+ --ui-color-border-strong: #64748b;
258
+
259
+ --ui-color-text: #f1f5f9;
260
+ --ui-color-text-muted: #94a3b8;
261
+ --ui-color-text-on-primary: #0a1116;
262
+ --ui-color-text-on-secondary: #0f172a;
263
+ --ui-color-text-on-danger: #0a1116;
264
+ --ui-color-text-on-success: #0a1116;
265
+
266
+ --ui-opacity-disabled: 0.65;
267
+
268
+ --ui-color-input-border: var(--ui-color-border-strong);
269
+ --ui-color-input-border-hover: #94a3b8;
270
+ --ui-color-placeholder: #94a3b8;
271
+
272
+ --ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
273
+ --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
274
+ 0 1px 2px -1px rgba(0, 0, 0, 0.3);
275
+ --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45),
276
+ 0 2px 4px -2px rgba(0, 0, 0, 0.3);
277
+ --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
278
+ 0 4px 6px -4px rgba(0, 0, 0, 0.25);
279
+ --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
280
+ 0 8px 10px -6px rgba(0, 0, 0, 0.25);
281
+ }
282
+
283
+ /* Explicit light theme — declared last so it wins over prefers-color-scheme: dark */
284
+ [data-theme="light"] {
285
+ --ui-color-primary: #006470;
286
+ --ui-color-primary-hover: #004e58;
287
+ --ui-color-primary-active: #003a42;
288
+ --ui-color-primary-light: rgba(0, 100, 112, 0.08);
289
+
290
+ --ui-color-secondary: #475569;
291
+ --ui-color-secondary-hover: #334155;
292
+ --ui-color-secondary-active: #1e293b;
293
+
294
+ --ui-color-danger: #b91c1c;
295
+ --ui-color-danger-hover: #991b1b;
296
+ --ui-color-danger-active: #7f1d1d;
297
+ --ui-color-success: #15803d;
298
+ --ui-color-warning: #b45309;
299
+ --ui-color-info: #0369a1;
300
+
301
+ --ui-color-success-bg: #dcfce7;
302
+ --ui-color-success-text: #166534;
303
+ --ui-color-warning-bg: #fef3c7;
304
+ --ui-color-warning-text: #854d0e;
305
+ --ui-color-danger-bg: #fee2e2;
306
+ --ui-color-danger-text: #991b1b;
307
+ --ui-color-info-bg: #e0f2fe;
308
+ --ui-color-info-text: #0c4a6e;
309
+
310
+ --ui-color-surface: #ffffff;
311
+ --ui-color-surface-raised: #f8fafc;
312
+ --ui-color-surface-sunken: #f1f5f9;
313
+ --ui-color-overlay: rgba(0, 0, 0, 0.5);
314
+
315
+ --ui-color-border: #e2e8f0;
316
+ --ui-color-border-hover: #cbd5e1;
317
+ --ui-color-border-strong: #64748b;
318
+
319
+ --ui-color-text: #0f172a;
320
+ --ui-color-text-muted: #475569;
321
+ --ui-color-text-on-primary: #ffffff;
322
+ --ui-color-text-on-secondary: #ffffff;
323
+ --ui-color-text-on-danger: #ffffff;
324
+ --ui-color-text-on-success: #ffffff;
325
+
326
+ --ui-opacity-disabled: 0.5;
327
+
328
+ --ui-color-input-border: var(--ui-color-border-strong);
329
+ --ui-color-input-border-hover: #475569;
330
+ --ui-color-placeholder: #64748b;
331
+
332
+ --ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
333
+ --ui-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
334
+ --ui-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
335
+ --ui-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
336
+ --ui-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
337
+ }
338
+
339
+ @media (prefers-reduced-motion: reduce) {
340
+ :root {
341
+ --ui-duration-fast: 0ms;
342
+ --ui-duration-normal: 0ms;
343
+ --ui-duration-slow: 0ms;
344
+ --ui-ease-spring: ease;
345
+ }
346
+ }