@cahyo-dimas/freeday 2.1.0 → 3.0.0
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 +244 -0
- package/COMPONENTS.md +191 -18
- package/README.id.md +1 -1
- package/README.md +1 -1
- package/USAGE.md +1 -1
- package/adapters/blazor/FdyAppShell.razor +1 -1
- package/adapters/blazor/FdyAppShell.razor.cs +35 -0
- package/adapters/blazor/FdyAutocomplete.razor +4 -1
- package/adapters/blazor/FdyAutocomplete.razor.cs +26 -0
- package/adapters/blazor/FdyCascade.razor +6 -1
- package/adapters/blazor/FdyCascade.razor.cs +24 -0
- package/adapters/blazor/FdyCombo.razor +1 -0
- package/adapters/blazor/FdyCombo.razor.cs +13 -0
- package/adapters/blazor/FdyDatepicker.razor +15 -1
- package/adapters/blazor/FdyDatepicker.razor.cs +46 -0
- package/adapters/blazor/FdyTable.razor +44 -4
- package/adapters/blazor/FdyTable.razor.cs +110 -0
- package/adapters/blazor/freeday-blazor.js +8 -0
- package/adapters/react/components/FdyAppShell.tsx +52 -11
- package/adapters/react/components/FdyDrawer.tsx +3 -1
- package/adapters/react/components/FdyModal.tsx +3 -1
- package/adapters/react/components/FdyTable.tsx +123 -2
- package/adapters/vue/components/FdyAppShell.vue +41 -11
- package/adapters/vue/components/FdyDrawer.vue +4 -1
- package/adapters/vue/components/FdyModal.vue +4 -1
- package/adapters/vue/components/FdyTable.vue +125 -4
- package/dist/freeday-app-shell.js +23 -5
- package/dist/freeday-autocomplete.js +17 -1
- package/dist/freeday-busy.js +168 -0
- package/dist/freeday-cascade.js +53 -3
- package/dist/freeday-chart.js +33 -3
- package/dist/freeday-datepicker.js +109 -17
- package/dist/freeday-select.js +18 -1
- package/dist/freeday-stepper.js +54 -4
- package/dist/freeday-table.js +4 -2
- package/dist/freeday-timepicker.js +19 -1
- package/dist/freeday.bundle.css +616 -39
- package/dist/freeday.css +93 -11
- package/dist/freeday.js +499 -37
- package/dist/freeday.tokens.css +523 -28
- package/docs/agent-onboarding.md +4 -0
- package/docs/getting-started.md +1 -1
- package/package.json +4 -3
- package/src/components/app-shell.css +29 -5
- package/src/components/appbar.css +2 -2
- package/src/components/busy.css +33 -0
- package/src/components/card.css +1 -1
- package/src/components/drawer.css +1 -1
- package/src/components/menu.css +1 -1
- package/src/components/modal.css +1 -1
- package/src/components/stepper.css +11 -0
- package/src/components/table.css +13 -0
- package/tokens/tokens.json +54 -10
package/dist/freeday.tokens.css
CHANGED
|
@@ -11,6 +11,14 @@
|
|
|
11
11
|
--azure-800: #1c398c;
|
|
12
12
|
--azure-900: #1c336e;
|
|
13
13
|
--azure-950: #131e42;
|
|
14
|
+
--primary-50: var(--azure-50);
|
|
15
|
+
--primary-100: var(--azure-100);
|
|
16
|
+
--primary-300: var(--azure-300);
|
|
17
|
+
--primary-400: var(--azure-400);
|
|
18
|
+
--primary-500: var(--azure-500);
|
|
19
|
+
--primary-600: var(--azure-600);
|
|
20
|
+
--primary-700: var(--azure-700);
|
|
21
|
+
--primary-800: var(--azure-800);
|
|
14
22
|
--slate-0: #ffffff;
|
|
15
23
|
--slate-50: #f7f8fa;
|
|
16
24
|
--slate-100: #eef0f4;
|
|
@@ -40,24 +48,129 @@
|
|
|
40
48
|
--red-500: #ef4444;
|
|
41
49
|
--red-600: #dc2626;
|
|
42
50
|
--red-700: #b91c1c;
|
|
51
|
+
--amber-50: #fffbeb;
|
|
43
52
|
--amber-100: #fef3c7;
|
|
53
|
+
--amber-300: #fcd34d;
|
|
44
54
|
--amber-400: #fbbf24;
|
|
45
55
|
--amber-500: #f59e0b;
|
|
46
56
|
--amber-600: #d97706;
|
|
47
57
|
--amber-700: #b45309;
|
|
48
58
|
--amber-800: #92400e;
|
|
59
|
+
--green-50: #f0fdf4;
|
|
49
60
|
--green-100: #dcfce7;
|
|
61
|
+
--green-300: #86efac;
|
|
50
62
|
--green-400: #4ade80;
|
|
51
63
|
--green-500: #22c55e;
|
|
52
64
|
--green-600: #16a34a;
|
|
53
65
|
--green-700: #15803d;
|
|
54
66
|
--green-800: #166534;
|
|
67
|
+
--blue-50: #eff6ff;
|
|
55
68
|
--blue-100: #dbeafe;
|
|
56
69
|
--blue-300: #93c5fd;
|
|
57
70
|
--blue-400: #60a5fa;
|
|
58
71
|
--blue-500: #3b82f6;
|
|
59
72
|
--blue-600: #2563eb;
|
|
60
73
|
--blue-700: #1d4ed8;
|
|
74
|
+
--blue-800: #1e40af;
|
|
75
|
+
--emerald-50: #ecfdf5;
|
|
76
|
+
--emerald-100: #d1fae5;
|
|
77
|
+
--emerald-300: #6ee7b7;
|
|
78
|
+
--emerald-400: #34d399;
|
|
79
|
+
--emerald-500: #10b981;
|
|
80
|
+
--emerald-600: #059669;
|
|
81
|
+
--emerald-700: #047857;
|
|
82
|
+
--emerald-800: #065f46;
|
|
83
|
+
--lime-50: #f7fee7;
|
|
84
|
+
--lime-100: #ecfccb;
|
|
85
|
+
--lime-300: #bef264;
|
|
86
|
+
--lime-400: #a3e635;
|
|
87
|
+
--lime-500: #84cc16;
|
|
88
|
+
--lime-600: #65a30d;
|
|
89
|
+
--lime-700: #4d7c0f;
|
|
90
|
+
--lime-800: #3f6212;
|
|
91
|
+
--orange-50: #fff7ed;
|
|
92
|
+
--orange-100: #ffedd5;
|
|
93
|
+
--orange-300: #fdba74;
|
|
94
|
+
--orange-400: #fb923c;
|
|
95
|
+
--orange-500: #f97316;
|
|
96
|
+
--orange-600: #ea580c;
|
|
97
|
+
--orange-700: #c2410c;
|
|
98
|
+
--orange-800: #9a3412;
|
|
99
|
+
--yellow-50: #fefce8;
|
|
100
|
+
--yellow-100: #fef9c3;
|
|
101
|
+
--yellow-300: #fde047;
|
|
102
|
+
--yellow-400: #facc15;
|
|
103
|
+
--yellow-500: #eab308;
|
|
104
|
+
--yellow-600: #ca8a04;
|
|
105
|
+
--yellow-700: #a16207;
|
|
106
|
+
--yellow-800: #854d0e;
|
|
107
|
+
--yellow-900: #713f12;
|
|
108
|
+
--teal-50: #f0fdfa;
|
|
109
|
+
--teal-100: #ccfbf1;
|
|
110
|
+
--teal-300: #5eead4;
|
|
111
|
+
--teal-400: #2dd4bf;
|
|
112
|
+
--teal-500: #14b8a6;
|
|
113
|
+
--teal-600: #0d9488;
|
|
114
|
+
--teal-700: #0f766e;
|
|
115
|
+
--teal-800: #115e59;
|
|
116
|
+
--cyan-50: #ecfeff;
|
|
117
|
+
--cyan-100: #cffafe;
|
|
118
|
+
--cyan-300: #67e8f9;
|
|
119
|
+
--cyan-400: #22d3ee;
|
|
120
|
+
--cyan-500: #06b6d4;
|
|
121
|
+
--cyan-600: #0891b2;
|
|
122
|
+
--cyan-700: #0e7490;
|
|
123
|
+
--cyan-800: #155e75;
|
|
124
|
+
--indigo-50: #eef2ff;
|
|
125
|
+
--indigo-100: #e0e7ff;
|
|
126
|
+
--indigo-200: #c7d2fe;
|
|
127
|
+
--indigo-300: #a5b4fc;
|
|
128
|
+
--indigo-400: #818cf8;
|
|
129
|
+
--indigo-500: #6366f1;
|
|
130
|
+
--indigo-600: #4f46e5;
|
|
131
|
+
--indigo-700: #4338ca;
|
|
132
|
+
--indigo-800: #3730a3;
|
|
133
|
+
--violet-50: #f5f3ff;
|
|
134
|
+
--violet-100: #ede9fe;
|
|
135
|
+
--violet-200: #ddd6fe;
|
|
136
|
+
--violet-300: #c4b5fd;
|
|
137
|
+
--violet-400: #a78bfa;
|
|
138
|
+
--violet-500: #8b5cf6;
|
|
139
|
+
--violet-600: #7c3aed;
|
|
140
|
+
--violet-700: #6d28d9;
|
|
141
|
+
--violet-800: #5b21b6;
|
|
142
|
+
--purple-50: #faf5ff;
|
|
143
|
+
--purple-100: #f3e8ff;
|
|
144
|
+
--purple-300: #d8b4fe;
|
|
145
|
+
--purple-400: #c084fc;
|
|
146
|
+
--purple-500: #a855f7;
|
|
147
|
+
--purple-600: #9333ea;
|
|
148
|
+
--purple-700: #7e22ce;
|
|
149
|
+
--purple-800: #6b21a8;
|
|
150
|
+
--fuchsia-50: #fdf4ff;
|
|
151
|
+
--fuchsia-100: #fae8ff;
|
|
152
|
+
--fuchsia-300: #f0abfc;
|
|
153
|
+
--fuchsia-400: #e879f9;
|
|
154
|
+
--fuchsia-500: #d946ef;
|
|
155
|
+
--fuchsia-600: #c026d3;
|
|
156
|
+
--fuchsia-700: #a21caf;
|
|
157
|
+
--fuchsia-800: #86198f;
|
|
158
|
+
--pink-50: #fdf2f8;
|
|
159
|
+
--pink-100: #fce7f3;
|
|
160
|
+
--pink-300: #f9a8d4;
|
|
161
|
+
--pink-400: #f472b6;
|
|
162
|
+
--pink-500: #ec4899;
|
|
163
|
+
--pink-600: #db2777;
|
|
164
|
+
--pink-700: #be185d;
|
|
165
|
+
--pink-800: #9d174d;
|
|
166
|
+
--rose-50: #fff1f2;
|
|
167
|
+
--rose-100: #ffe4e6;
|
|
168
|
+
--rose-300: #fda4af;
|
|
169
|
+
--rose-400: #fb7185;
|
|
170
|
+
--rose-500: #f43f5e;
|
|
171
|
+
--rose-600: #e11d48;
|
|
172
|
+
--rose-700: #be123c;
|
|
173
|
+
--rose-800: #9f1239;
|
|
61
174
|
--font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
|
|
62
175
|
--font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
63
176
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
@@ -117,12 +230,12 @@
|
|
|
117
230
|
--control-switch-w: 2.4rem;
|
|
118
231
|
--control-switch-h: 1.35rem;
|
|
119
232
|
--bw: 1px;
|
|
120
|
-
--color-primary: var(--
|
|
121
|
-
--color-primary-hover: var(--
|
|
122
|
-
--color-primary-active: var(--
|
|
233
|
+
--color-primary: var(--primary-600);
|
|
234
|
+
--color-primary-hover: var(--primary-700);
|
|
235
|
+
--color-primary-active: var(--primary-800);
|
|
123
236
|
--color-on-primary: var(--slate-0);
|
|
124
|
-
--color-primary-soft: var(--
|
|
125
|
-
--color-primary-border: var(--
|
|
237
|
+
--color-primary-soft: var(--primary-50);
|
|
238
|
+
--color-primary-border: var(--primary-100);
|
|
126
239
|
--color-accent: var(--sky-600);
|
|
127
240
|
--color-accent-hover: var(--sky-700);
|
|
128
241
|
--color-on-accent: var(--slate-0);
|
|
@@ -131,6 +244,8 @@
|
|
|
131
244
|
--color-surface: var(--slate-0);
|
|
132
245
|
--color-surface-2: var(--slate-50);
|
|
133
246
|
--color-surface-3: var(--slate-100);
|
|
247
|
+
--color-surface-raised: var(--color-surface);
|
|
248
|
+
--color-scrim: rgba(10,12,25,.5);
|
|
134
249
|
--color-text: var(--slate-900);
|
|
135
250
|
--color-text-muted: var(--slate-600);
|
|
136
251
|
--color-text-subtle: var(--slate-500);
|
|
@@ -151,7 +266,7 @@
|
|
|
151
266
|
--color-danger-soft: var(--red-100);
|
|
152
267
|
--color-info: var(--blue-600);
|
|
153
268
|
--color-info-soft: var(--blue-100);
|
|
154
|
-
--color-primary-strong: var(--
|
|
269
|
+
--color-primary-strong: var(--primary-700);
|
|
155
270
|
--color-success-strong: var(--green-800);
|
|
156
271
|
--color-warning-strong: var(--amber-800);
|
|
157
272
|
--color-danger-strong: var(--red-700);
|
|
@@ -174,7 +289,9 @@
|
|
|
174
289
|
--tone-6: var(--chart-6);
|
|
175
290
|
--tone-7: var(--chart-7);
|
|
176
291
|
--tone-8: var(--chart-8);
|
|
177
|
-
--
|
|
292
|
+
--surface-filter: none;
|
|
293
|
+
--surface-inset: inset 0 0 0 0 transparent;
|
|
294
|
+
--focus-ring: var(--primary-600);
|
|
178
295
|
--focus-ring-width: 2px;
|
|
179
296
|
}
|
|
180
297
|
/* The SYSTEM default stays root-scoped: it is a statement about the document, and dropping :root
|
|
@@ -188,12 +305,12 @@
|
|
|
188
305
|
--shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
|
|
189
306
|
--shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
|
|
190
307
|
--shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
|
|
191
|
-
--color-primary: var(--
|
|
192
|
-
--color-primary-hover: var(--
|
|
193
|
-
--color-primary-active: var(--
|
|
308
|
+
--color-primary: var(--primary-500);
|
|
309
|
+
--color-primary-hover: var(--primary-400);
|
|
310
|
+
--color-primary-active: var(--primary-300);
|
|
194
311
|
--color-on-primary: var(--slate-0);
|
|
195
|
-
--color-primary-soft:
|
|
196
|
-
--color-primary-border:
|
|
312
|
+
--color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
|
|
313
|
+
--color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
|
|
197
314
|
--color-accent: var(--sky-400);
|
|
198
315
|
--color-accent-hover: var(--sky-300);
|
|
199
316
|
--color-on-accent: #06233f;
|
|
@@ -202,6 +319,7 @@
|
|
|
202
319
|
--color-surface: var(--slate-950);
|
|
203
320
|
--color-surface-2: var(--slate-900);
|
|
204
321
|
--color-surface-3: var(--slate-800);
|
|
322
|
+
--color-surface-raised: var(--color-surface);
|
|
205
323
|
--color-text: var(--slate-100);
|
|
206
324
|
--color-text-muted: var(--slate-400);
|
|
207
325
|
--color-text-subtle: var(--slate-500);
|
|
@@ -220,7 +338,7 @@
|
|
|
220
338
|
--color-danger-soft: rgba(248,113,113,.18);
|
|
221
339
|
--color-info: var(--blue-400);
|
|
222
340
|
--color-info-soft: rgba(96,165,250,.18);
|
|
223
|
-
--color-primary-strong: var(--
|
|
341
|
+
--color-primary-strong: var(--primary-300);
|
|
224
342
|
--color-success-strong: var(--green-400);
|
|
225
343
|
--color-warning-strong: var(--amber-400);
|
|
226
344
|
--color-danger-strong: var(--red-300);
|
|
@@ -235,7 +353,7 @@
|
|
|
235
353
|
--chart-8: #e66767;
|
|
236
354
|
--chart-grid: var(--slate-800);
|
|
237
355
|
--chart-tick: var(--slate-600);
|
|
238
|
-
--focus-ring: var(--
|
|
356
|
+
--focus-ring: var(--primary-400);
|
|
239
357
|
}
|
|
240
358
|
}
|
|
241
359
|
/* The two EXPLICIT opt-ins are deliberately NOT scoped to :root, for the same reason as density
|
|
@@ -251,12 +369,12 @@
|
|
|
251
369
|
--shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
|
|
252
370
|
--shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
|
|
253
371
|
--shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
|
|
254
|
-
--color-primary: var(--
|
|
255
|
-
--color-primary-hover: var(--
|
|
256
|
-
--color-primary-active: var(--
|
|
372
|
+
--color-primary: var(--primary-500);
|
|
373
|
+
--color-primary-hover: var(--primary-400);
|
|
374
|
+
--color-primary-active: var(--primary-300);
|
|
257
375
|
--color-on-primary: var(--slate-0);
|
|
258
|
-
--color-primary-soft:
|
|
259
|
-
--color-primary-border:
|
|
376
|
+
--color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
|
|
377
|
+
--color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
|
|
260
378
|
--color-accent: var(--sky-400);
|
|
261
379
|
--color-accent-hover: var(--sky-300);
|
|
262
380
|
--color-on-accent: #06233f;
|
|
@@ -265,6 +383,7 @@
|
|
|
265
383
|
--color-surface: var(--slate-950);
|
|
266
384
|
--color-surface-2: var(--slate-900);
|
|
267
385
|
--color-surface-3: var(--slate-800);
|
|
386
|
+
--color-surface-raised: var(--color-surface);
|
|
268
387
|
--color-text: var(--slate-100);
|
|
269
388
|
--color-text-muted: var(--slate-400);
|
|
270
389
|
--color-text-subtle: var(--slate-500);
|
|
@@ -283,7 +402,7 @@
|
|
|
283
402
|
--color-danger-soft: rgba(248,113,113,.18);
|
|
284
403
|
--color-info: var(--blue-400);
|
|
285
404
|
--color-info-soft: rgba(96,165,250,.18);
|
|
286
|
-
--color-primary-strong: var(--
|
|
405
|
+
--color-primary-strong: var(--primary-300);
|
|
287
406
|
--color-success-strong: var(--green-400);
|
|
288
407
|
--color-warning-strong: var(--amber-400);
|
|
289
408
|
--color-danger-strong: var(--red-300);
|
|
@@ -298,7 +417,7 @@
|
|
|
298
417
|
--chart-8: #e66767;
|
|
299
418
|
--chart-grid: var(--slate-800);
|
|
300
419
|
--chart-tick: var(--slate-600);
|
|
301
|
-
--focus-ring: var(--
|
|
420
|
+
--focus-ring: var(--primary-400);
|
|
302
421
|
}
|
|
303
422
|
[data-theme="light"] {
|
|
304
423
|
--shadow-1: 0 1px 2px rgba(16,14,30,.06);
|
|
@@ -307,12 +426,12 @@
|
|
|
307
426
|
--shadow-4: 0 24px 48px -12px rgba(16,14,30,.26),0 2px 8px rgba(16,14,30,.10);
|
|
308
427
|
--shadow-lift: 0 1px 2px rgba(16,14,30,.05),0 16px 34px -14px rgba(16,14,30,.24);
|
|
309
428
|
--shadow-lift-hover: 0 2px 4px rgba(16,14,30,.06),0 30px 50px -16px rgba(16,14,30,.33);
|
|
310
|
-
--color-primary: var(--
|
|
311
|
-
--color-primary-hover: var(--
|
|
312
|
-
--color-primary-active: var(--
|
|
429
|
+
--color-primary: var(--primary-600);
|
|
430
|
+
--color-primary-hover: var(--primary-700);
|
|
431
|
+
--color-primary-active: var(--primary-800);
|
|
313
432
|
--color-on-primary: var(--slate-0);
|
|
314
|
-
--color-primary-soft: var(--
|
|
315
|
-
--color-primary-border: var(--
|
|
433
|
+
--color-primary-soft: var(--primary-50);
|
|
434
|
+
--color-primary-border: var(--primary-100);
|
|
316
435
|
--color-accent: var(--sky-600);
|
|
317
436
|
--color-accent-hover: var(--sky-700);
|
|
318
437
|
--color-on-accent: var(--slate-0);
|
|
@@ -321,6 +440,7 @@
|
|
|
321
440
|
--color-surface: var(--slate-0);
|
|
322
441
|
--color-surface-2: var(--slate-50);
|
|
323
442
|
--color-surface-3: var(--slate-100);
|
|
443
|
+
--color-surface-raised: var(--color-surface);
|
|
324
444
|
--color-text: var(--slate-900);
|
|
325
445
|
--color-text-muted: var(--slate-600);
|
|
326
446
|
--color-text-subtle: var(--slate-500);
|
|
@@ -339,7 +459,7 @@
|
|
|
339
459
|
--color-danger-soft: var(--red-100);
|
|
340
460
|
--color-info: var(--blue-600);
|
|
341
461
|
--color-info-soft: var(--blue-100);
|
|
342
|
-
--color-primary-strong: var(--
|
|
462
|
+
--color-primary-strong: var(--primary-700);
|
|
343
463
|
--color-success-strong: var(--green-800);
|
|
344
464
|
--color-warning-strong: var(--amber-800);
|
|
345
465
|
--color-danger-strong: var(--red-700);
|
|
@@ -354,7 +474,7 @@
|
|
|
354
474
|
--chart-8: #e34948;
|
|
355
475
|
--chart-grid: var(--slate-200);
|
|
356
476
|
--chart-tick: var(--slate-400);
|
|
357
|
-
--focus-ring: var(--
|
|
477
|
+
--focus-ring: var(--primary-600);
|
|
358
478
|
}
|
|
359
479
|
/* Density is deliberately NOT scoped to :root. These are custom properties, so they inherit,
|
|
360
480
|
* putting the attribute on any ancestor (a route wrapper, one section) densifies just that
|
|
@@ -379,3 +499,378 @@
|
|
|
379
499
|
--space-6: 1.5rem;
|
|
380
500
|
--control-h: 2.5rem;
|
|
381
501
|
}
|
|
502
|
+
[data-style="glass"] {
|
|
503
|
+
--color-surface-raised: rgba(255,255,255,.82);
|
|
504
|
+
--surface-filter: blur(14px) saturate(150%);
|
|
505
|
+
--surface-inset: inset 0 1px 0 rgba(255,255,255,.55);
|
|
506
|
+
}
|
|
507
|
+
[data-style="soft"] {
|
|
508
|
+
--color-surface-raised: var(--color-surface);
|
|
509
|
+
--surface-filter: none;
|
|
510
|
+
--surface-inset: inset 0 0 0 0 transparent;
|
|
511
|
+
}
|
|
512
|
+
@media (prefers-color-scheme: dark) {
|
|
513
|
+
:root:not([data-theme="light"])[data-style="glass"] {
|
|
514
|
+
--color-surface-raised: rgba(23,27,38,.90);
|
|
515
|
+
--surface-inset: inset 0 1px 0 rgba(255,255,255,.09);
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
[data-theme="dark"][data-style="glass"] {
|
|
519
|
+
--color-surface-raised: rgba(23,27,38,.90);
|
|
520
|
+
--surface-inset: inset 0 1px 0 rgba(255,255,255,.09);
|
|
521
|
+
}
|
|
522
|
+
[data-theme="light"][data-style="glass"] {
|
|
523
|
+
--color-surface-raised: rgba(255,255,255,.82);
|
|
524
|
+
--surface-inset: inset 0 1px 0 rgba(255,255,255,.55);
|
|
525
|
+
}
|
|
526
|
+
/* Primary palette axis. 18 options, see $primaries in tokens.json. */
|
|
527
|
+
[data-primary="azure"] {
|
|
528
|
+
--primary-50: var(--azure-50);
|
|
529
|
+
--primary-100: var(--azure-100);
|
|
530
|
+
--primary-300: var(--azure-300);
|
|
531
|
+
--primary-400: var(--azure-400);
|
|
532
|
+
--primary-500: var(--azure-500);
|
|
533
|
+
--primary-600: var(--azure-600);
|
|
534
|
+
--primary-700: var(--azure-700);
|
|
535
|
+
--primary-800: var(--azure-800);
|
|
536
|
+
--color-on-primary: var(--slate-0);
|
|
537
|
+
}
|
|
538
|
+
[data-primary="sky"] {
|
|
539
|
+
--primary-50: var(--sky-50);
|
|
540
|
+
--primary-100: var(--sky-100);
|
|
541
|
+
--primary-300: var(--sky-300);
|
|
542
|
+
--primary-400: var(--sky-400);
|
|
543
|
+
--primary-500: var(--sky-500);
|
|
544
|
+
--primary-600: var(--sky-600);
|
|
545
|
+
--primary-700: var(--sky-700);
|
|
546
|
+
--primary-800: var(--sky-800);
|
|
547
|
+
--color-on-primary: var(--slate-0);
|
|
548
|
+
}
|
|
549
|
+
@media (prefers-color-scheme: dark) {
|
|
550
|
+
:root:not([data-theme="light"])[data-primary="sky"] {
|
|
551
|
+
--color-on-primary: var(--slate-950);
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
[data-theme="dark"][data-primary="sky"] {
|
|
555
|
+
--color-on-primary: var(--slate-950);
|
|
556
|
+
}
|
|
557
|
+
[data-theme="light"][data-primary="sky"] {
|
|
558
|
+
--color-on-primary: var(--slate-0);
|
|
559
|
+
}
|
|
560
|
+
[data-primary="blue"] {
|
|
561
|
+
--primary-50: var(--blue-50);
|
|
562
|
+
--primary-100: var(--blue-100);
|
|
563
|
+
--primary-300: var(--blue-300);
|
|
564
|
+
--primary-400: var(--blue-400);
|
|
565
|
+
--primary-500: var(--blue-500);
|
|
566
|
+
--primary-600: var(--blue-600);
|
|
567
|
+
--primary-700: var(--blue-700);
|
|
568
|
+
--primary-800: var(--blue-800);
|
|
569
|
+
--color-on-primary: var(--slate-0);
|
|
570
|
+
}
|
|
571
|
+
@media (prefers-color-scheme: dark) {
|
|
572
|
+
:root:not([data-theme="light"])[data-primary="blue"] {
|
|
573
|
+
--color-on-primary: var(--slate-950);
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
[data-theme="dark"][data-primary="blue"] {
|
|
577
|
+
--color-on-primary: var(--slate-950);
|
|
578
|
+
}
|
|
579
|
+
[data-theme="light"][data-primary="blue"] {
|
|
580
|
+
--color-on-primary: var(--slate-0);
|
|
581
|
+
}
|
|
582
|
+
[data-primary="indigo"] {
|
|
583
|
+
--primary-50: var(--indigo-50);
|
|
584
|
+
--primary-100: var(--indigo-100);
|
|
585
|
+
--primary-300: var(--indigo-300);
|
|
586
|
+
--primary-400: var(--indigo-400);
|
|
587
|
+
--primary-500: var(--indigo-500);
|
|
588
|
+
--primary-600: var(--indigo-600);
|
|
589
|
+
--primary-700: var(--indigo-700);
|
|
590
|
+
--primary-800: var(--indigo-800);
|
|
591
|
+
--color-on-primary: var(--slate-0);
|
|
592
|
+
}
|
|
593
|
+
@media (prefers-color-scheme: dark) {
|
|
594
|
+
:root:not([data-theme="light"])[data-primary="indigo"] {
|
|
595
|
+
--primary-300: var(--indigo-200);
|
|
596
|
+
--primary-400: var(--indigo-300);
|
|
597
|
+
--primary-500: var(--indigo-400);
|
|
598
|
+
--color-on-primary: var(--slate-950);
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
[data-theme="dark"][data-primary="indigo"] {
|
|
602
|
+
--primary-300: var(--indigo-200);
|
|
603
|
+
--primary-400: var(--indigo-300);
|
|
604
|
+
--primary-500: var(--indigo-400);
|
|
605
|
+
--color-on-primary: var(--slate-950);
|
|
606
|
+
}
|
|
607
|
+
[data-theme="light"][data-primary="indigo"] {
|
|
608
|
+
--primary-300: var(--indigo-300);
|
|
609
|
+
--primary-400: var(--indigo-400);
|
|
610
|
+
--primary-500: var(--indigo-500);
|
|
611
|
+
--color-on-primary: var(--slate-0);
|
|
612
|
+
}
|
|
613
|
+
[data-primary="violet"] {
|
|
614
|
+
--primary-50: var(--violet-50);
|
|
615
|
+
--primary-100: var(--violet-100);
|
|
616
|
+
--primary-300: var(--violet-300);
|
|
617
|
+
--primary-400: var(--violet-400);
|
|
618
|
+
--primary-500: var(--violet-500);
|
|
619
|
+
--primary-600: var(--violet-600);
|
|
620
|
+
--primary-700: var(--violet-700);
|
|
621
|
+
--primary-800: var(--violet-800);
|
|
622
|
+
--color-on-primary: var(--slate-0);
|
|
623
|
+
}
|
|
624
|
+
@media (prefers-color-scheme: dark) {
|
|
625
|
+
:root:not([data-theme="light"])[data-primary="violet"] {
|
|
626
|
+
--primary-300: var(--violet-200);
|
|
627
|
+
--primary-400: var(--violet-300);
|
|
628
|
+
--primary-500: var(--violet-400);
|
|
629
|
+
--color-on-primary: var(--slate-950);
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
[data-theme="dark"][data-primary="violet"] {
|
|
633
|
+
--primary-300: var(--violet-200);
|
|
634
|
+
--primary-400: var(--violet-300);
|
|
635
|
+
--primary-500: var(--violet-400);
|
|
636
|
+
--color-on-primary: var(--slate-950);
|
|
637
|
+
}
|
|
638
|
+
[data-theme="light"][data-primary="violet"] {
|
|
639
|
+
--primary-300: var(--violet-300);
|
|
640
|
+
--primary-400: var(--violet-400);
|
|
641
|
+
--primary-500: var(--violet-500);
|
|
642
|
+
--color-on-primary: var(--slate-0);
|
|
643
|
+
}
|
|
644
|
+
[data-primary="purple"] {
|
|
645
|
+
--primary-50: var(--purple-50);
|
|
646
|
+
--primary-100: var(--purple-100);
|
|
647
|
+
--primary-300: var(--purple-300);
|
|
648
|
+
--primary-400: var(--purple-400);
|
|
649
|
+
--primary-500: var(--purple-500);
|
|
650
|
+
--primary-600: var(--purple-600);
|
|
651
|
+
--primary-700: var(--purple-700);
|
|
652
|
+
--primary-800: var(--purple-800);
|
|
653
|
+
--color-on-primary: var(--slate-0);
|
|
654
|
+
}
|
|
655
|
+
@media (prefers-color-scheme: dark) {
|
|
656
|
+
:root:not([data-theme="light"])[data-primary="purple"] {
|
|
657
|
+
--color-on-primary: var(--slate-950);
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
[data-theme="dark"][data-primary="purple"] {
|
|
661
|
+
--color-on-primary: var(--slate-950);
|
|
662
|
+
}
|
|
663
|
+
[data-theme="light"][data-primary="purple"] {
|
|
664
|
+
--color-on-primary: var(--slate-0);
|
|
665
|
+
}
|
|
666
|
+
[data-primary="fuchsia"] {
|
|
667
|
+
--primary-50: var(--fuchsia-50);
|
|
668
|
+
--primary-100: var(--fuchsia-100);
|
|
669
|
+
--primary-300: var(--fuchsia-300);
|
|
670
|
+
--primary-400: var(--fuchsia-400);
|
|
671
|
+
--primary-500: var(--fuchsia-500);
|
|
672
|
+
--primary-600: var(--fuchsia-600);
|
|
673
|
+
--primary-700: var(--fuchsia-700);
|
|
674
|
+
--primary-800: var(--fuchsia-800);
|
|
675
|
+
--color-on-primary: var(--slate-0);
|
|
676
|
+
}
|
|
677
|
+
@media (prefers-color-scheme: dark) {
|
|
678
|
+
:root:not([data-theme="light"])[data-primary="fuchsia"] {
|
|
679
|
+
--color-on-primary: var(--slate-950);
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
[data-theme="dark"][data-primary="fuchsia"] {
|
|
683
|
+
--color-on-primary: var(--slate-950);
|
|
684
|
+
}
|
|
685
|
+
[data-theme="light"][data-primary="fuchsia"] {
|
|
686
|
+
--color-on-primary: var(--slate-0);
|
|
687
|
+
}
|
|
688
|
+
[data-primary="pink"] {
|
|
689
|
+
--primary-50: var(--pink-50);
|
|
690
|
+
--primary-100: var(--pink-100);
|
|
691
|
+
--primary-300: var(--pink-300);
|
|
692
|
+
--primary-400: var(--pink-400);
|
|
693
|
+
--primary-500: var(--pink-500);
|
|
694
|
+
--primary-600: var(--pink-600);
|
|
695
|
+
--primary-700: var(--pink-700);
|
|
696
|
+
--primary-800: var(--pink-800);
|
|
697
|
+
--color-on-primary: var(--slate-0);
|
|
698
|
+
}
|
|
699
|
+
@media (prefers-color-scheme: dark) {
|
|
700
|
+
:root:not([data-theme="light"])[data-primary="pink"] {
|
|
701
|
+
--color-on-primary: var(--slate-950);
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
[data-theme="dark"][data-primary="pink"] {
|
|
705
|
+
--color-on-primary: var(--slate-950);
|
|
706
|
+
}
|
|
707
|
+
[data-theme="light"][data-primary="pink"] {
|
|
708
|
+
--color-on-primary: var(--slate-0);
|
|
709
|
+
}
|
|
710
|
+
[data-primary="rose"] {
|
|
711
|
+
--primary-50: var(--rose-50);
|
|
712
|
+
--primary-100: var(--rose-100);
|
|
713
|
+
--primary-300: var(--rose-300);
|
|
714
|
+
--primary-400: var(--rose-400);
|
|
715
|
+
--primary-500: var(--rose-500);
|
|
716
|
+
--primary-600: var(--rose-600);
|
|
717
|
+
--primary-700: var(--rose-700);
|
|
718
|
+
--primary-800: var(--rose-800);
|
|
719
|
+
--color-on-primary: var(--slate-0);
|
|
720
|
+
}
|
|
721
|
+
@media (prefers-color-scheme: dark) {
|
|
722
|
+
:root:not([data-theme="light"])[data-primary="rose"] {
|
|
723
|
+
--color-on-primary: var(--slate-950);
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
[data-theme="dark"][data-primary="rose"] {
|
|
727
|
+
--color-on-primary: var(--slate-950);
|
|
728
|
+
}
|
|
729
|
+
[data-theme="light"][data-primary="rose"] {
|
|
730
|
+
--color-on-primary: var(--slate-0);
|
|
731
|
+
}
|
|
732
|
+
[data-primary="orange"] {
|
|
733
|
+
--primary-50: var(--orange-50);
|
|
734
|
+
--primary-100: var(--orange-100);
|
|
735
|
+
--primary-300: var(--orange-300);
|
|
736
|
+
--primary-400: var(--orange-400);
|
|
737
|
+
--primary-500: var(--orange-500);
|
|
738
|
+
--primary-600: var(--orange-600);
|
|
739
|
+
--primary-700: var(--orange-700);
|
|
740
|
+
--primary-800: var(--orange-800);
|
|
741
|
+
--color-on-primary: var(--slate-950);
|
|
742
|
+
}
|
|
743
|
+
[data-primary="amber"] {
|
|
744
|
+
--primary-50: var(--amber-50);
|
|
745
|
+
--primary-100: var(--amber-100);
|
|
746
|
+
--primary-300: var(--amber-300);
|
|
747
|
+
--primary-400: var(--amber-400);
|
|
748
|
+
--primary-500: var(--amber-500);
|
|
749
|
+
--primary-600: var(--amber-600);
|
|
750
|
+
--primary-700: var(--amber-700);
|
|
751
|
+
--primary-800: var(--amber-800);
|
|
752
|
+
--color-on-primary: var(--slate-950);
|
|
753
|
+
}
|
|
754
|
+
[data-primary="yellow"] {
|
|
755
|
+
--primary-50: var(--yellow-50);
|
|
756
|
+
--primary-100: var(--yellow-100);
|
|
757
|
+
--primary-300: var(--yellow-300);
|
|
758
|
+
--primary-400: var(--yellow-400);
|
|
759
|
+
--primary-500: var(--yellow-500);
|
|
760
|
+
--primary-600: var(--yellow-700);
|
|
761
|
+
--primary-700: var(--yellow-800);
|
|
762
|
+
--primary-800: var(--yellow-900);
|
|
763
|
+
--color-on-primary: var(--slate-0);
|
|
764
|
+
}
|
|
765
|
+
@media (prefers-color-scheme: dark) {
|
|
766
|
+
:root:not([data-theme="light"])[data-primary="yellow"] {
|
|
767
|
+
--color-on-primary: var(--slate-950);
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
[data-theme="dark"][data-primary="yellow"] {
|
|
771
|
+
--color-on-primary: var(--slate-950);
|
|
772
|
+
}
|
|
773
|
+
[data-theme="light"][data-primary="yellow"] {
|
|
774
|
+
--color-on-primary: var(--slate-0);
|
|
775
|
+
}
|
|
776
|
+
[data-primary="lime"] {
|
|
777
|
+
--primary-50: var(--lime-50);
|
|
778
|
+
--primary-100: var(--lime-100);
|
|
779
|
+
--primary-300: var(--lime-300);
|
|
780
|
+
--primary-400: var(--lime-400);
|
|
781
|
+
--primary-500: var(--lime-500);
|
|
782
|
+
--primary-600: var(--lime-600);
|
|
783
|
+
--primary-700: var(--lime-700);
|
|
784
|
+
--primary-800: var(--lime-800);
|
|
785
|
+
--color-on-primary: var(--slate-950);
|
|
786
|
+
}
|
|
787
|
+
[data-primary="green"] {
|
|
788
|
+
--primary-50: var(--green-50);
|
|
789
|
+
--primary-100: var(--green-100);
|
|
790
|
+
--primary-300: var(--green-300);
|
|
791
|
+
--primary-400: var(--green-400);
|
|
792
|
+
--primary-500: var(--green-500);
|
|
793
|
+
--primary-600: var(--green-600);
|
|
794
|
+
--primary-700: var(--green-700);
|
|
795
|
+
--primary-800: var(--green-800);
|
|
796
|
+
--color-on-primary: var(--slate-950);
|
|
797
|
+
}
|
|
798
|
+
[data-primary="emerald"] {
|
|
799
|
+
--primary-50: var(--emerald-50);
|
|
800
|
+
--primary-100: var(--emerald-100);
|
|
801
|
+
--primary-300: var(--emerald-300);
|
|
802
|
+
--primary-400: var(--emerald-400);
|
|
803
|
+
--primary-500: var(--emerald-500);
|
|
804
|
+
--primary-600: var(--emerald-600);
|
|
805
|
+
--primary-700: var(--emerald-700);
|
|
806
|
+
--primary-800: var(--emerald-800);
|
|
807
|
+
--color-on-primary: var(--slate-950);
|
|
808
|
+
}
|
|
809
|
+
[data-primary="teal"] {
|
|
810
|
+
--primary-50: var(--teal-50);
|
|
811
|
+
--primary-100: var(--teal-100);
|
|
812
|
+
--primary-300: var(--teal-300);
|
|
813
|
+
--primary-400: var(--teal-400);
|
|
814
|
+
--primary-500: var(--teal-500);
|
|
815
|
+
--primary-600: var(--teal-600);
|
|
816
|
+
--primary-700: var(--teal-700);
|
|
817
|
+
--primary-800: var(--teal-800);
|
|
818
|
+
--color-on-primary: var(--slate-950);
|
|
819
|
+
}
|
|
820
|
+
[data-primary="cyan"] {
|
|
821
|
+
--primary-50: var(--cyan-50);
|
|
822
|
+
--primary-100: var(--cyan-100);
|
|
823
|
+
--primary-300: var(--cyan-300);
|
|
824
|
+
--primary-400: var(--cyan-400);
|
|
825
|
+
--primary-500: var(--cyan-500);
|
|
826
|
+
--primary-600: var(--cyan-600);
|
|
827
|
+
--primary-700: var(--cyan-700);
|
|
828
|
+
--primary-800: var(--cyan-800);
|
|
829
|
+
--color-on-primary: var(--slate-950);
|
|
830
|
+
}
|
|
831
|
+
[data-primary="noir"] {
|
|
832
|
+
--primary-50: var(--slate-100);
|
|
833
|
+
--primary-100: var(--slate-200);
|
|
834
|
+
--primary-300: var(--slate-500);
|
|
835
|
+
--primary-400: var(--slate-700);
|
|
836
|
+
--primary-500: var(--slate-800);
|
|
837
|
+
--primary-600: var(--slate-900);
|
|
838
|
+
--primary-700: var(--slate-800);
|
|
839
|
+
--primary-800: var(--slate-950);
|
|
840
|
+
--color-on-primary: var(--slate-0);
|
|
841
|
+
}
|
|
842
|
+
@media (prefers-color-scheme: dark) {
|
|
843
|
+
:root:not([data-theme="light"])[data-primary="noir"] {
|
|
844
|
+
--primary-50: var(--slate-800);
|
|
845
|
+
--primary-100: var(--slate-700);
|
|
846
|
+
--primary-300: var(--slate-300);
|
|
847
|
+
--primary-400: var(--slate-200);
|
|
848
|
+
--primary-500: var(--slate-100);
|
|
849
|
+
--primary-600: var(--slate-50);
|
|
850
|
+
--primary-700: var(--slate-200);
|
|
851
|
+
--primary-800: var(--slate-300);
|
|
852
|
+
--color-on-primary: var(--slate-950);
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
[data-theme="dark"][data-primary="noir"] {
|
|
856
|
+
--primary-50: var(--slate-800);
|
|
857
|
+
--primary-100: var(--slate-700);
|
|
858
|
+
--primary-300: var(--slate-300);
|
|
859
|
+
--primary-400: var(--slate-200);
|
|
860
|
+
--primary-500: var(--slate-100);
|
|
861
|
+
--primary-600: var(--slate-50);
|
|
862
|
+
--primary-700: var(--slate-200);
|
|
863
|
+
--primary-800: var(--slate-300);
|
|
864
|
+
--color-on-primary: var(--slate-950);
|
|
865
|
+
}
|
|
866
|
+
[data-theme="light"][data-primary="noir"] {
|
|
867
|
+
--primary-50: var(--slate-100);
|
|
868
|
+
--primary-100: var(--slate-200);
|
|
869
|
+
--primary-300: var(--slate-500);
|
|
870
|
+
--primary-400: var(--slate-700);
|
|
871
|
+
--primary-500: var(--slate-800);
|
|
872
|
+
--primary-600: var(--slate-900);
|
|
873
|
+
--primary-700: var(--slate-800);
|
|
874
|
+
--primary-800: var(--slate-950);
|
|
875
|
+
--color-on-primary: var(--slate-0);
|
|
876
|
+
}
|
package/docs/agent-onboarding.md
CHANGED
|
@@ -128,6 +128,10 @@ Recent additions most likely to replace something an app hand-rolled (all detail
|
|
|
128
128
|
| `pageSizes` on `FdyTable` | a rows-per-page control bolted above the table, away from the pager |
|
|
129
129
|
| `FdyTableFooter` | rebuilding the range + pager to add a size control, on a responsive list |
|
|
130
130
|
| the calendar's month grid (press the title) | clicking "previous month" thirty times |
|
|
131
|
+
| `Freeday.busy()` / `Freeday.idle()` | a hand-rolled scrim, and a second one from the component that also thought it owned the screen |
|
|
132
|
+
| `selectable` + `selectedKeys` on `FdyTable` | a checkbox column bolted beside a controlled table, with its own bulk bar |
|
|
133
|
+
| `fdy-step-before-change` | a wizard whose Next cannot be stopped while the server is still deciding |
|
|
134
|
+
| `.fdy-table--striped` | a `:nth-child` rule of your own that turns out to be the same colour as hover |
|
|
131
135
|
|
|
132
136
|
## 3. Starting a new screen
|
|
133
137
|
|