@atelier-ui/create-workspace 0.0.35 โ†’ 0.0.37

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/generators/preset/files/styles/tokens.css +151 -129
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 0.0.37 (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.36 (2026-04-26)
6
+
7
+ This was a version bump only for create-workspace to align it with other projects, there were no code changes.
8
+
1
9
  ## 0.0.35 (2026-04-26)
2
10
 
3
11
  ### ๐Ÿš€ Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/create-workspace",
3
- "version": "0.0.35",
3
+ "version": "0.0.37",
4
4
  "description": "Nx preset for Atelier workshop workspaces",
5
5
  "keywords": [
6
6
  "nx",
package/src/generators/preset/files/styles/tokens.css CHANGED
@@ -1,14 +1,21 @@
1
1
  /**
2
- * Design tokens for the LLM-optimized Angular component library.
3
- * Import this stylesheet once at the application root to activate the token layer.
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: 'Montserrat', 'Inter', ui-sans-serif, system-ui, -apple-system,
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
- /* Colors โ€” Primary */
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
- /* Colors โ€” Secondary */
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
- /* Colors โ€” Semantic */
40
- --ui-color-danger: #ef4444;
41
- --ui-color-danger-hover: #dc2626;
42
- --ui-color-danger-active: #b91c1c;
43
- --ui-color-success: #22c55e;
44
- --ui-color-warning: #f59e0b;
45
- --ui-color-info: #06b6d4;
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 (for Badge, Alert, Toast) */
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: #fef9c3;
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
- /* Colors โ€” Surfaces */
66
+ /* Surfaces โ€” clean white + cool slate */
58
67
  --ui-color-surface: #ffffff;
59
- --ui-color-surface-raised: #fafafa;
60
- --ui-color-surface-sunken: #f5f5f5;
68
+ --ui-color-surface-raised: #f8fafc;
69
+ --ui-color-surface-sunken: #f1f5f9;
61
70
 
62
- /* Colors โ€” Borders */
63
- --ui-color-border: #e5e7eb;
64
- --ui-color-border-hover: #d1d5db;
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
- /* Colors โ€” Text */
76
+ /* Text */
67
77
  --ui-color-text: #0f172a;
68
- --ui-color-text-muted: #4f5f7c;
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
- /* Colors โ€” Brand palette */
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(0, 0, 0, 0.03);
106
- --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06),
107
- 0 1px 2px -1px rgba(0, 0, 0, 0.06);
108
- --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
109
- 0 2px 4px -2px rgba(0, 0, 0, 0.05);
110
- --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
111
- 0 4px 6px -4px rgba(0, 0, 0, 0.04);
112
- --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
113
- 0 8px 10px -6px rgba(0, 0, 0, 0.04);
114
-
115
- /* Motion โ€” custom easings for polished feel */
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: #d1d5db;
136
- --ui-color-input-border-hover: #9ca3af;
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: #4b5563;
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: #00d0d0;
153
- --ui-color-primary-hover: #00bebe;
154
- --ui-color-primary-active: #009696;
155
- --ui-color-primary-light: rgba(0, 190, 190, 0.15);
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: #22d3ee;
178
+ --ui-color-info: #38bdf8;
168
179
 
169
- --ui-color-success-bg: #14532d;
180
+ --ui-color-success-bg: #0f3320;
170
181
  --ui-color-success-text: #86efac;
171
- --ui-color-warning-bg: #78350f;
182
+ --ui-color-warning-bg: #3a2510;
172
183
  --ui-color-warning-text: #fde68a;
173
- --ui-color-danger-bg: #7f1d1d;
174
- --ui-color-danger-text: #fecaca;
175
- --ui-color-info-bg: #0c4a6e;
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: #28283c;
179
- --ui-color-surface-raised: #2f2f45;
180
- --ui-color-surface-sunken: #22222f;
189
+ --ui-color-surface: #0a1116;
190
+ --ui-color-surface-raised: #131c24;
191
+ --ui-color-surface-sunken: #060c10;
181
192
 
182
- --ui-color-border: #3a3a4f;
183
- --ui-color-border-hover: #4a4a63;
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: #0f172a;
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: #4a4a63;
193
- --ui-color-input-border-hover: #686880;
194
- --ui-color-placeholder: #686880;
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.2);
197
- --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
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.35),
200
- 0 2px 4px -2px rgba(0, 0, 0, 0.25);
201
- --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
202
- 0 4px 6px -4px rgba(0, 0, 0, 0.2);
203
- --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
204
- 0 8px 10px -6px rgba(0, 0, 0, 0.2);
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: #00d0d0;
210
- --ui-color-primary-hover: #00bebe;
211
- --ui-color-primary-active: #009696;
212
- --ui-color-primary-light: rgba(0, 190, 190, 0.15);
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: #22d3ee;
236
+ --ui-color-info: #38bdf8;
225
237
 
226
- --ui-color-success-bg: #14532d;
238
+ --ui-color-success-bg: #0f3320;
227
239
  --ui-color-success-text: #86efac;
228
- --ui-color-warning-bg: #78350f;
240
+ --ui-color-warning-bg: #3a2510;
229
241
  --ui-color-warning-text: #fde68a;
230
- --ui-color-danger-bg: #7f1d1d;
231
- --ui-color-danger-text: #fecaca;
232
- --ui-color-info-bg: #0c4a6e;
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: #28283c;
236
- --ui-color-surface-raised: #2f2f45;
237
- --ui-color-surface-sunken: #22222f;
247
+ --ui-color-surface: #0a1116;
248
+ --ui-color-surface-raised: #131c24;
249
+ --ui-color-surface-sunken: #060c10;
238
250
 
239
- --ui-color-border: #3a3a4f;
240
- --ui-color-border-hover: #4a4a63;
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: #0f172a;
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: #4a4a63;
250
- --ui-color-input-border-hover: #686880;
251
- --ui-color-placeholder: #686880;
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.2);
254
- --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
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.35),
257
- 0 2px 4px -2px rgba(0, 0, 0, 0.25);
258
- --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
259
- 0 4px 6px -4px rgba(0, 0, 0, 0.2);
260
- --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
261
- 0 8px 10px -6px rgba(0, 0, 0, 0.2);
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: #007070;
267
- --ui-color-primary-hover: #005858;
268
- --ui-color-primary-active: #003f3f;
269
- --ui-color-primary-light: rgba(0, 190, 190, 0.08);
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
- --ui-color-danger: #ef4444;
274
- --ui-color-danger-hover: #dc2626;
275
- --ui-color-danger-active: #b91c1c;
276
- --ui-color-success: #22c55e;
277
- --ui-color-warning: #f59e0b;
278
- --ui-color-info: #06b6d4;
279
- /* Semantic โ€” AA-safe dark-text-on-tinted-bg pairs (for Badge, Alert, Toast) */
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: #fef9c3;
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: #fafafa;
290
- --ui-color-surface-sunken: #f5f5f5;
291
- --ui-color-border: #e5e7eb;
292
- --ui-color-border-hover: #d1d5db;
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: #4f5f7c;
314
+ --ui-color-text-muted: #475569;
295
315
  --ui-color-text-on-primary: #ffffff;
296
- --ui-color-input-border: #d1d5db;
297
- --ui-color-input-border-hover: #9ca3af;
298
- --ui-color-placeholder: #4b5563;
299
- --ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
300
- --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
301
- --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
302
- --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
303
- --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
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) {