@atelier-ui/create-workspace 0.0.34 β 0.0.36
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
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
## 0.0.36 (2026-04-26)
|
|
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.0.35 (2026-04-26)
|
|
6
|
+
|
|
7
|
+
### π Features
|
|
8
|
+
|
|
9
|
+
- **libs:** Phase 3 β non-color differentiation + protanopia bumps ([#64748](https://github.com/DominikPieper/atelier-ui/issues/64748), [#4](https://github.com/DominikPieper/atelier-ui/issues/4))
|
|
10
|
+
|
|
11
|
+
### β€οΈ Thank You
|
|
12
|
+
|
|
13
|
+
- Claude Opus 4.7 (1M context)
|
|
14
|
+
- Dominik Pieper
|
|
15
|
+
|
|
1
16
|
## 0.0.34 (2026-04-25)
|
|
2
17
|
|
|
3
18
|
This was a version bump only for create-workspace to align it with other projects, there were no code changes.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atelier-ui/create-workspace",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Nx preset for Atelier
|
|
3
|
+
"version": "0.0.36",
|
|
4
|
+
"description": "Nx preset for Atelier workshop workspaces",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"nx",
|
|
7
7
|
"preset",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"angular",
|
|
10
10
|
"workshop"
|
|
11
11
|
],
|
|
12
|
-
"author": "Atelier
|
|
12
|
+
"author": "Atelier",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"repository": {
|
|
15
15
|
"type": "git",
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Design tokens for the
|
|
3
|
-
*
|
|
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)
|
|
4
11
|
*
|
|
5
12
|
* Usage:
|
|
6
|
-
* @import '@atelier-ui/angular/styles/tokens.css';
|
|
13
|
+
* @import '@atelier-ui/{angular,react,vue}/styles/tokens.css';
|
|
7
14
|
*/
|
|
8
15
|
|
|
9
16
|
:root {
|
|
10
17
|
/* Typography */
|
|
11
|
-
--ui-font-family: '
|
|
18
|
+
--ui-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
|
|
12
19
|
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
20
|
--ui-font-size-xs: 0.75rem;
|
|
14
21
|
--ui-font-size-sm: 0.875rem;
|
|
@@ -25,53 +32,56 @@
|
|
|
25
32
|
--ui-line-height-tight: 1.25;
|
|
26
33
|
--ui-line-height-normal: 1.5;
|
|
27
34
|
|
|
28
|
-
/*
|
|
29
|
-
--ui-color-primary: #007070;
|
|
30
|
-
--ui-color-primary-hover: #005858;
|
|
31
|
-
--ui-color-primary-active: #003f3f;
|
|
32
|
-
--ui-color-primary-light: rgba(0, 190, 190, 0.08);
|
|
35
|
+
/* ββ Colours Β· light mode (default) ββββββββββββββββββββββββββ */
|
|
33
36
|
|
|
34
|
-
/*
|
|
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) */
|
|
35
44
|
--ui-color-secondary: #475569;
|
|
36
45
|
--ui-color-secondary-hover: #334155;
|
|
37
46
|
--ui-color-secondary-active: #1e293b;
|
|
38
47
|
|
|
39
|
-
/*
|
|
40
|
-
--ui-color-danger: #
|
|
41
|
-
--ui-color-danger-hover: #
|
|
42
|
-
--ui-color-danger-active: #
|
|
43
|
-
--ui-color-success: #
|
|
44
|
-
--ui-color-warning: #
|
|
45
|
-
--ui-color-info: #
|
|
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;
|
|
46
55
|
|
|
47
|
-
/* Semantic β AA-safe dark-text-on-tinted-bg pairs (
|
|
56
|
+
/* Semantic β AA-safe dark-text-on-tinted-bg pairs (Badge / Alert / Toast) */
|
|
48
57
|
--ui-color-success-bg: #dcfce7;
|
|
49
58
|
--ui-color-success-text: #166534;
|
|
50
|
-
--ui-color-warning-bg: #
|
|
59
|
+
--ui-color-warning-bg: #fef3c7;
|
|
51
60
|
--ui-color-warning-text: #854d0e;
|
|
52
61
|
--ui-color-danger-bg: #fee2e2;
|
|
53
62
|
--ui-color-danger-text: #991b1b;
|
|
54
63
|
--ui-color-info-bg: #e0f2fe;
|
|
55
64
|
--ui-color-info-text: #0c4a6e;
|
|
56
65
|
|
|
57
|
-
/*
|
|
66
|
+
/* Surfaces β clean white + cool slate */
|
|
58
67
|
--ui-color-surface: #ffffff;
|
|
59
|
-
--ui-color-surface-raised: #
|
|
60
|
-
--ui-color-surface-sunken: #
|
|
68
|
+
--ui-color-surface-raised: #f8fafc;
|
|
69
|
+
--ui-color-surface-sunken: #f1f5f9;
|
|
61
70
|
|
|
62
|
-
/*
|
|
63
|
-
--ui-color-border: #
|
|
64
|
-
--ui-color-border-hover: #
|
|
71
|
+
/* Borders β split decorative from functional per WCAG 1.4.11 */
|
|
72
|
+
--ui-color-border: #e2e8f0; /* decorative */
|
|
73
|
+
--ui-color-border-hover: #cbd5e1;
|
|
74
|
+
--ui-color-border-strong: #64748b; /* functional β₯3:1 */
|
|
65
75
|
|
|
66
|
-
/*
|
|
76
|
+
/* Text */
|
|
67
77
|
--ui-color-text: #0f172a;
|
|
68
|
-
--ui-color-text-muted: #
|
|
78
|
+
--ui-color-text-muted: #475569;
|
|
69
79
|
--ui-color-text-on-primary: #ffffff;
|
|
70
80
|
--ui-color-text-on-secondary: #ffffff;
|
|
71
81
|
--ui-color-text-on-danger: #ffffff;
|
|
72
82
|
--ui-color-text-on-success: #ffffff;
|
|
73
83
|
|
|
74
|
-
/*
|
|
84
|
+
/* Brand palette β Conciso reference, opt-in for components that need it */
|
|
75
85
|
--ui-color-brand-corporate: #00bebe;
|
|
76
86
|
--ui-color-brand-agile: #00d296;
|
|
77
87
|
--ui-color-brand-architecture: #009696;
|
|
@@ -82,11 +92,11 @@
|
|
|
82
92
|
--ui-color-brand-light-green: #a0fa50;
|
|
83
93
|
--ui-opacity-disabled: 0.5;
|
|
84
94
|
|
|
85
|
-
/* Border radius */
|
|
86
|
-
--ui-radius-sm: 0.375rem
|
|
87
|
-
--ui-radius-md: 0.5rem
|
|
88
|
-
--ui-radius-lg: 0.75rem
|
|
89
|
-
--ui-radius-xl: 1rem
|
|
95
|
+
/* Border radius β bumped for modern feel */
|
|
96
|
+
--ui-radius-sm: 0.5rem; /* was 0.375rem */
|
|
97
|
+
--ui-radius-md: 0.625rem; /* was 0.5rem */
|
|
98
|
+
--ui-radius-lg: 0.875rem; /* was 0.75rem */
|
|
99
|
+
--ui-radius-xl: 1.25rem; /* was 1rem */
|
|
90
100
|
--ui-radius-full: 9999px;
|
|
91
101
|
|
|
92
102
|
/* Spacing */
|
|
@@ -101,18 +111,18 @@
|
|
|
101
111
|
--ui-spacing-12: 3rem;
|
|
102
112
|
--ui-spacing-16: 4rem;
|
|
103
113
|
|
|
104
|
-
/* Shadows β dual-layer (ambient + key light) */
|
|
105
|
-
--ui-shadow-xs: 0 1px 2px 0 rgba(
|
|
106
|
-
--ui-shadow-sm: 0 1px 3px 0 rgba(
|
|
107
|
-
0 1px 2px -1px rgba(
|
|
108
|
-
--ui-shadow-md: 0 4px 6px -1px rgba(
|
|
109
|
-
0 2px 4px -2px rgba(
|
|
110
|
-
--ui-shadow-lg: 0 10px 15px -3px rgba(
|
|
111
|
-
0 4px 6px -4px rgba(
|
|
112
|
-
--ui-shadow-xl: 0 20px 25px -5px rgba(
|
|
113
|
-
0 8px 10px -6px rgba(
|
|
114
|
-
|
|
115
|
-
/* Motion
|
|
114
|
+
/* Shadows β slate-tinted dual-layer (ambient + key light) */
|
|
115
|
+
--ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
116
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08),
|
|
117
|
+
0 1px 2px -1px rgba(15, 23, 42, 0.06);
|
|
118
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08),
|
|
119
|
+
0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
120
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
|
|
121
|
+
0 4px 6px -4px rgba(15, 23, 42, 0.04);
|
|
122
|
+
--ui-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10),
|
|
123
|
+
0 8px 10px -6px rgba(15, 23, 42, 0.04);
|
|
124
|
+
|
|
125
|
+
/* Motion */
|
|
116
126
|
--ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
117
127
|
--ui-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
|
|
118
128
|
--ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
@@ -132,11 +142,11 @@
|
|
|
132
142
|
/* Form controls */
|
|
133
143
|
--ui-color-input-bg: var(--ui-color-surface-sunken);
|
|
134
144
|
--ui-color-input-bg-focus: var(--ui-color-surface);
|
|
135
|
-
--ui-color-input-border:
|
|
136
|
-
--ui-color-input-border-hover: #
|
|
145
|
+
--ui-color-input-border: var(--ui-color-border-strong);
|
|
146
|
+
--ui-color-input-border-hover: #475569;
|
|
137
147
|
--ui-color-input-border-focus: var(--ui-color-primary);
|
|
138
148
|
--ui-color-input-border-invalid: var(--ui-color-danger);
|
|
139
|
-
--ui-color-placeholder: #
|
|
149
|
+
--ui-color-placeholder: #64748b;
|
|
140
150
|
--ui-color-error-text: var(--ui-color-danger-text);
|
|
141
151
|
|
|
142
152
|
/* Z-index scale */
|
|
@@ -147,12 +157,14 @@
|
|
|
147
157
|
--ui-z-toast: 400;
|
|
148
158
|
}
|
|
149
159
|
|
|
160
|
+
/* ββ Colours Β· dark mode βββββββββββββββββββββββββββββββββββββ */
|
|
161
|
+
|
|
150
162
|
@media (prefers-color-scheme: dark) {
|
|
151
163
|
:root {
|
|
152
|
-
--ui-color-primary: #
|
|
153
|
-
--ui-color-primary-hover: #
|
|
154
|
-
--ui-color-primary-active: #
|
|
155
|
-
--ui-color-primary-light: rgba(
|
|
164
|
+
--ui-color-primary: #34d8d8;
|
|
165
|
+
--ui-color-primary-hover: #5ee5e5;
|
|
166
|
+
--ui-color-primary-active: #87efef;
|
|
167
|
+
--ui-color-primary-light: rgba(52, 216, 216, 0.15);
|
|
156
168
|
|
|
157
169
|
--ui-color-secondary: #94a3b8;
|
|
158
170
|
--ui-color-secondary-hover: #cbd5e1;
|
|
@@ -161,55 +173,56 @@
|
|
|
161
173
|
--ui-color-danger: #f87171;
|
|
162
174
|
--ui-color-danger-hover: #fca5a5;
|
|
163
175
|
--ui-color-danger-active: #fecaca;
|
|
164
|
-
|
|
165
176
|
--ui-color-success: #4ade80;
|
|
166
177
|
--ui-color-warning: #fbbf24;
|
|
167
|
-
--ui-color-info: #
|
|
178
|
+
--ui-color-info: #38bdf8;
|
|
168
179
|
|
|
169
|
-
--ui-color-success-bg: #
|
|
180
|
+
--ui-color-success-bg: #0f3320;
|
|
170
181
|
--ui-color-success-text: #86efac;
|
|
171
|
-
--ui-color-warning-bg: #
|
|
182
|
+
--ui-color-warning-bg: #3a2510;
|
|
172
183
|
--ui-color-warning-text: #fde68a;
|
|
173
|
-
--ui-color-danger-bg: #
|
|
174
|
-
--ui-color-danger-text: #
|
|
175
|
-
--ui-color-info-bg: #
|
|
184
|
+
--ui-color-danger-bg: #3a1414;
|
|
185
|
+
--ui-color-danger-text: #fca5a5;
|
|
186
|
+
--ui-color-info-bg: #102338;
|
|
176
187
|
--ui-color-info-text: #bae6fd;
|
|
177
188
|
|
|
178
|
-
--ui-color-surface: #
|
|
179
|
-
--ui-color-surface-raised: #
|
|
180
|
-
--ui-color-surface-sunken: #
|
|
189
|
+
--ui-color-surface: #0a1116;
|
|
190
|
+
--ui-color-surface-raised: #131c24;
|
|
191
|
+
--ui-color-surface-sunken: #060c10;
|
|
181
192
|
|
|
182
|
-
--ui-color-border: #
|
|
183
|
-
--ui-color-border-hover: #
|
|
193
|
+
--ui-color-border: #1e293b;
|
|
194
|
+
--ui-color-border-hover: #334155;
|
|
195
|
+
--ui-color-border-strong: #64748b;
|
|
184
196
|
|
|
185
197
|
--ui-color-text: #f1f5f9;
|
|
186
198
|
--ui-color-text-muted: #94a3b8;
|
|
187
|
-
--ui-color-text-on-primary: #
|
|
199
|
+
--ui-color-text-on-primary: #0a1116;
|
|
188
200
|
--ui-color-text-on-secondary: #0f172a;
|
|
201
|
+
--ui-color-text-on-danger: #0a1116;
|
|
189
202
|
|
|
190
203
|
--ui-opacity-disabled: 0.65;
|
|
191
204
|
|
|
192
|
-
--ui-color-input-border:
|
|
193
|
-
--ui-color-input-border-hover: #
|
|
194
|
-
--ui-color-placeholder: #
|
|
205
|
+
--ui-color-input-border: var(--ui-color-border-strong);
|
|
206
|
+
--ui-color-input-border-hover: #94a3b8;
|
|
207
|
+
--ui-color-placeholder: #94a3b8;
|
|
195
208
|
|
|
196
|
-
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.
|
|
197
|
-
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.
|
|
209
|
+
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
210
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
|
|
198
211
|
0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
199
|
-
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.
|
|
200
|
-
0 2px 4px -2px rgba(0, 0, 0, 0.
|
|
201
|
-
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.
|
|
202
|
-
0 4px 6px -4px rgba(0, 0, 0, 0.
|
|
203
|
-
--ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.
|
|
204
|
-
0 8px 10px -6px rgba(0, 0, 0, 0.
|
|
212
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45),
|
|
213
|
+
0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
214
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
|
|
215
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
216
|
+
--ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
|
|
217
|
+
0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
205
218
|
}
|
|
206
219
|
}
|
|
207
220
|
|
|
208
221
|
[data-theme="dark"] {
|
|
209
|
-
--ui-color-primary: #
|
|
210
|
-
--ui-color-primary-hover: #
|
|
211
|
-
--ui-color-primary-active: #
|
|
212
|
-
--ui-color-primary-light: rgba(
|
|
222
|
+
--ui-color-primary: #34d8d8;
|
|
223
|
+
--ui-color-primary-hover: #5ee5e5;
|
|
224
|
+
--ui-color-primary-active: #87efef;
|
|
225
|
+
--ui-color-primary-light: rgba(52, 216, 216, 0.15);
|
|
213
226
|
|
|
214
227
|
--ui-color-secondary: #94a3b8;
|
|
215
228
|
--ui-color-secondary-hover: #cbd5e1;
|
|
@@ -218,89 +231,98 @@
|
|
|
218
231
|
--ui-color-danger: #f87171;
|
|
219
232
|
--ui-color-danger-hover: #fca5a5;
|
|
220
233
|
--ui-color-danger-active: #fecaca;
|
|
221
|
-
|
|
222
234
|
--ui-color-success: #4ade80;
|
|
223
235
|
--ui-color-warning: #fbbf24;
|
|
224
|
-
--ui-color-info: #
|
|
236
|
+
--ui-color-info: #38bdf8;
|
|
225
237
|
|
|
226
|
-
--ui-color-success-bg: #
|
|
238
|
+
--ui-color-success-bg: #0f3320;
|
|
227
239
|
--ui-color-success-text: #86efac;
|
|
228
|
-
--ui-color-warning-bg: #
|
|
240
|
+
--ui-color-warning-bg: #3a2510;
|
|
229
241
|
--ui-color-warning-text: #fde68a;
|
|
230
|
-
--ui-color-danger-bg: #
|
|
231
|
-
--ui-color-danger-text: #
|
|
232
|
-
--ui-color-info-bg: #
|
|
242
|
+
--ui-color-danger-bg: #3a1414;
|
|
243
|
+
--ui-color-danger-text: #fca5a5;
|
|
244
|
+
--ui-color-info-bg: #102338;
|
|
233
245
|
--ui-color-info-text: #bae6fd;
|
|
234
246
|
|
|
235
|
-
--ui-color-surface: #
|
|
236
|
-
--ui-color-surface-raised: #
|
|
237
|
-
--ui-color-surface-sunken: #
|
|
247
|
+
--ui-color-surface: #0a1116;
|
|
248
|
+
--ui-color-surface-raised: #131c24;
|
|
249
|
+
--ui-color-surface-sunken: #060c10;
|
|
238
250
|
|
|
239
|
-
--ui-color-border: #
|
|
240
|
-
--ui-color-border-hover: #
|
|
251
|
+
--ui-color-border: #1e293b;
|
|
252
|
+
--ui-color-border-hover: #334155;
|
|
253
|
+
--ui-color-border-strong: #64748b;
|
|
241
254
|
|
|
242
255
|
--ui-color-text: #f1f5f9;
|
|
243
256
|
--ui-color-text-muted: #94a3b8;
|
|
244
|
-
--ui-color-text-on-primary: #
|
|
257
|
+
--ui-color-text-on-primary: #0a1116;
|
|
245
258
|
--ui-color-text-on-secondary: #0f172a;
|
|
259
|
+
--ui-color-text-on-danger: #0a1116;
|
|
246
260
|
|
|
247
261
|
--ui-opacity-disabled: 0.65;
|
|
248
262
|
|
|
249
|
-
--ui-color-input-border:
|
|
250
|
-
--ui-color-input-border-hover: #
|
|
251
|
-
--ui-color-placeholder: #
|
|
263
|
+
--ui-color-input-border: var(--ui-color-border-strong);
|
|
264
|
+
--ui-color-input-border-hover: #94a3b8;
|
|
265
|
+
--ui-color-placeholder: #94a3b8;
|
|
252
266
|
|
|
253
|
-
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.
|
|
254
|
-
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.
|
|
267
|
+
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
268
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
|
|
255
269
|
0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
|
256
|
-
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.
|
|
257
|
-
0 2px 4px -2px rgba(0, 0, 0, 0.
|
|
258
|
-
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.
|
|
259
|
-
0 4px 6px -4px rgba(0, 0, 0, 0.
|
|
260
|
-
--ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.
|
|
261
|
-
0 8px 10px -6px rgba(0, 0, 0, 0.
|
|
270
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45),
|
|
271
|
+
0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
272
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
|
|
273
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.25);
|
|
274
|
+
--ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
|
|
275
|
+
0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
|
262
276
|
}
|
|
263
277
|
|
|
264
278
|
/* Explicit light theme β declared last so it wins over prefers-color-scheme: dark */
|
|
265
279
|
[data-theme="light"] {
|
|
266
|
-
--ui-color-primary: #
|
|
267
|
-
--ui-color-primary-hover: #
|
|
268
|
-
--ui-color-primary-active: #
|
|
269
|
-
--ui-color-primary-light: rgba(0,
|
|
280
|
+
--ui-color-primary: #006470;
|
|
281
|
+
--ui-color-primary-hover: #004e58;
|
|
282
|
+
--ui-color-primary-active: #003a42;
|
|
283
|
+
--ui-color-primary-light: rgba(0, 100, 112, 0.08);
|
|
284
|
+
|
|
270
285
|
--ui-color-secondary: #475569;
|
|
271
286
|
--ui-color-secondary-hover: #334155;
|
|
272
287
|
--ui-color-secondary-active: #1e293b;
|
|
273
|
-
|
|
274
|
-
--ui-color-danger
|
|
275
|
-
--ui-color-danger-
|
|
276
|
-
--ui-color-
|
|
277
|
-
--ui-color-
|
|
278
|
-
--ui-color-
|
|
279
|
-
|
|
288
|
+
|
|
289
|
+
--ui-color-danger: #b91c1c;
|
|
290
|
+
--ui-color-danger-hover: #991b1b;
|
|
291
|
+
--ui-color-danger-active: #7f1d1d;
|
|
292
|
+
--ui-color-success: #15803d;
|
|
293
|
+
--ui-color-warning: #b45309;
|
|
294
|
+
--ui-color-info: #0369a1;
|
|
295
|
+
|
|
280
296
|
--ui-color-success-bg: #dcfce7;
|
|
281
297
|
--ui-color-success-text: #166534;
|
|
282
|
-
--ui-color-warning-bg: #
|
|
298
|
+
--ui-color-warning-bg: #fef3c7;
|
|
283
299
|
--ui-color-warning-text: #854d0e;
|
|
284
300
|
--ui-color-danger-bg: #fee2e2;
|
|
285
301
|
--ui-color-danger-text: #991b1b;
|
|
286
302
|
--ui-color-info-bg: #e0f2fe;
|
|
287
303
|
--ui-color-info-text: #0c4a6e;
|
|
304
|
+
|
|
288
305
|
--ui-color-surface: #ffffff;
|
|
289
|
-
--ui-color-surface-raised: #
|
|
290
|
-
--ui-color-surface-sunken: #
|
|
291
|
-
|
|
292
|
-
--ui-color-border
|
|
306
|
+
--ui-color-surface-raised: #f8fafc;
|
|
307
|
+
--ui-color-surface-sunken: #f1f5f9;
|
|
308
|
+
|
|
309
|
+
--ui-color-border: #e2e8f0;
|
|
310
|
+
--ui-color-border-hover: #cbd5e1;
|
|
311
|
+
--ui-color-border-strong: #64748b;
|
|
312
|
+
|
|
293
313
|
--ui-color-text: #0f172a;
|
|
294
|
-
--ui-color-text-muted: #
|
|
314
|
+
--ui-color-text-muted: #475569;
|
|
295
315
|
--ui-color-text-on-primary: #ffffff;
|
|
296
|
-
|
|
297
|
-
--ui-color-input-border
|
|
298
|
-
--ui-color-
|
|
299
|
-
--ui-
|
|
300
|
-
|
|
301
|
-
--ui-shadow-
|
|
302
|
-
--ui-shadow-
|
|
303
|
-
--ui-shadow-
|
|
316
|
+
|
|
317
|
+
--ui-color-input-border: var(--ui-color-border-strong);
|
|
318
|
+
--ui-color-input-border-hover: #475569;
|
|
319
|
+
--ui-color-placeholder: #64748b;
|
|
320
|
+
|
|
321
|
+
--ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
322
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
|
|
323
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
324
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
|
|
325
|
+
--ui-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
|
|
304
326
|
}
|
|
305
327
|
|
|
306
328
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* preflight.mjs
|
|
4
4
|
*
|
|
5
5
|
* Pre-workshop self-check. Verifies the local environment is ready for the
|
|
6
|
-
* Atelier
|
|
6
|
+
* Atelier workshop (Figma + Claude Code + Storybook MCP).
|
|
7
7
|
*
|
|
8
8
|
* Run via: node tools/scripts/preflight.mjs
|
|
9
9
|
* (or npm run preflight)
|
|
@@ -271,7 +271,7 @@ function header(title) {
|
|
|
271
271
|
|
|
272
272
|
async function main() {
|
|
273
273
|
console.log('');
|
|
274
|
-
console.log(bold('Atelier
|
|
274
|
+
console.log(bold('Atelier Preflight'));
|
|
275
275
|
console.log(dim('Checking your environment for the workshopβ¦'));
|
|
276
276
|
|
|
277
277
|
header('Runtime');
|
|
@@ -111,9 +111,9 @@ Before using any component:
|
|
|
111
111
|
3. Call \`get-documentation-for-story\` for a specific variant
|
|
112
112
|
4. Do not use a component that is not in the docs`)
|
|
113
113
|
.join('\n\n');
|
|
114
|
-
tree.write('CLAUDE.md', `# Atelier
|
|
114
|
+
tree.write('CLAUDE.md', `# Atelier Workshop
|
|
115
115
|
|
|
116
|
-
This workspace uses Atelier
|
|
116
|
+
This workspace uses Atelier for all UI components.
|
|
117
117
|
Full API reference: ${SITE_URL}/llms-full.txt
|
|
118
118
|
|
|
119
119
|
## MCP Servers
|
|
@@ -139,7 +139,7 @@ Key tokens:
|
|
|
139
139
|
## Rules
|
|
140
140
|
- Prefer component props over custom CSS
|
|
141
141
|
- When custom styling is needed, use --ui-color-* and --ui-spacing-* tokens
|
|
142
|
-
- Do not install other UI component libraries alongside Atelier
|
|
142
|
+
- Do not install other UI component libraries alongside Atelier
|
|
143
143
|
- Do not add inline hex colors or hardcoded spacing values
|
|
144
144
|
|
|
145
145
|
## Apps
|
|
@@ -220,7 +220,7 @@ file exports). The Desktop Bridge covers creation and inspection without a token
|
|
|
220
220
|
}
|
|
221
221
|
(0, devkit_1.writeJson)(tree, '.mcp.json', { mcpServers });
|
|
222
222
|
// Write README
|
|
223
|
-
tree.write('README.md', `# Atelier
|
|
223
|
+
tree.write('README.md', `# Atelier Workshop
|
|
224
224
|
|
|
225
225
|
## Apps
|
|
226
226
|
|