@formatica/vue 0.1.0 → 0.1.1
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/dist/style.css +607 -1
- package/package.json +6 -3
package/dist/style.css
CHANGED
|
@@ -1 +1,607 @@
|
|
|
1
|
-
|
|
1
|
+
/*
|
|
2
|
+
* Formatica — form builder styles
|
|
3
|
+
* Import this file in your project to get dark mode, theming (CSS variables),
|
|
4
|
+
* and base styling for all Formatica form elements.
|
|
5
|
+
*
|
|
6
|
+
* import '@formatica/vue/style.css';
|
|
7
|
+
*
|
|
8
|
+
* All rules are scoped to `.fc-form-builder` so they only affect Formatica forms.
|
|
9
|
+
* Rules are intentionally placed OUTSIDE any @layer so they beat Tailwind utilities.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
13
|
+
1. THEME CSS VARIABLES
|
|
14
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
15
|
+
|
|
16
|
+
.fc-form-builder {
|
|
17
|
+
--_primary: var(--fc-color-primary, #3b82f6);
|
|
18
|
+
--_error: var(--fc-color-error, #ef4444);
|
|
19
|
+
--_success: var(--fc-color-success, #22c55e);
|
|
20
|
+
--_radius: var(--fc-border-radius, 0.375rem);
|
|
21
|
+
--_border: var(--fc-color-border, #d1d5db);
|
|
22
|
+
--_border-focus: var(--fc-color-border-focus, var(--_primary));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
26
|
+
2. BASE STYLING — inputs, textareas, selects
|
|
27
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
28
|
+
|
|
29
|
+
/* --- Sizing, padding, border-radius --- */
|
|
30
|
+
.fc-form-builder
|
|
31
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
|
|
32
|
+
.fc-form-builder textarea,
|
|
33
|
+
.fc-form-builder select {
|
|
34
|
+
border-color: var(--_border);
|
|
35
|
+
border-radius: var(--_radius);
|
|
36
|
+
padding-left: var(--fc-input-padding-x, 0.75rem);
|
|
37
|
+
padding-right: var(--fc-input-padding-x, 0.75rem);
|
|
38
|
+
padding-top: var(--fc-input-padding-y, 0.5rem);
|
|
39
|
+
padding-bottom: var(--fc-input-padding-y, 0.5rem);
|
|
40
|
+
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* --- Border radius on buttons --- */
|
|
44
|
+
.fc-form-builder button[type="button"],
|
|
45
|
+
.fc-form-builder button[type="submit"] {
|
|
46
|
+
border-radius: var(--_radius) !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* --- Required asterisk --- */
|
|
50
|
+
.fc-form-builder .text-red-500[aria-hidden="true"] {
|
|
51
|
+
color: var(--_error);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
55
|
+
3. FOCUS STATES
|
|
56
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
57
|
+
|
|
58
|
+
.fc-form-builder
|
|
59
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
|
|
60
|
+
.fc-form-builder textarea:focus,
|
|
61
|
+
.fc-form-builder select:focus {
|
|
62
|
+
border-color: var(--_border-focus) !important;
|
|
63
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary) 20%, transparent) !important;
|
|
64
|
+
outline: none !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Generic focus ring for buttons, collapsible headers, step circles, tabs */
|
|
68
|
+
.fc-form-builder button:focus,
|
|
69
|
+
.fc-form-builder [tabindex]:focus {
|
|
70
|
+
--tw-ring-color: color-mix(in srgb, var(--_primary) 40%, transparent) !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
74
|
+
4. CHECKBOX / RADIO / SWITCH / SLIDER — accent overrides
|
|
75
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
76
|
+
|
|
77
|
+
.fc-form-builder input[type="checkbox"]:checked,
|
|
78
|
+
.fc-form-builder input[type="radio"]:checked {
|
|
79
|
+
accent-color: var(--_primary);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.fc-form-builder input[type="range"] {
|
|
83
|
+
accent-color: var(--_primary) !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.fc-form-builder .accent-blue-500 {
|
|
87
|
+
accent-color: var(--_primary) !important;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
91
|
+
5. SUBMIT BUTTON
|
|
92
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
93
|
+
|
|
94
|
+
.fc-form-builder button[type="submit"],
|
|
95
|
+
.fc-form-builder .fc-submit-btn {
|
|
96
|
+
background-color: var(--_primary);
|
|
97
|
+
border-radius: var(--_radius);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.fc-form-builder button[type="submit"]:hover,
|
|
101
|
+
.fc-form-builder .fc-submit-btn:hover {
|
|
102
|
+
background-color: var(--fc-color-primary-hover, color-mix(in srgb, var(--_primary) 85%, black));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
106
|
+
6. ERROR STATES
|
|
107
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
108
|
+
|
|
109
|
+
.fc-form-builder .fc-error,
|
|
110
|
+
.fc-form-builder [role="alert"] {
|
|
111
|
+
color: var(--_error);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.fc-form-builder .border-red-500,
|
|
115
|
+
.fc-form-builder .focus\:border-red-500:focus {
|
|
116
|
+
border-color: var(--_error) !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.fc-form-builder .text-red-500,
|
|
120
|
+
.fc-form-builder .text-red-600 {
|
|
121
|
+
color: var(--_error) !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.fc-form-builder .ring-red-500\/20,
|
|
125
|
+
.fc-form-builder .focus\:ring-red-500\/20:focus {
|
|
126
|
+
--tw-ring-color: color-mix(in srgb, var(--_error) 20%, transparent) !important;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
130
|
+
7. SWITCH TOGGLE (SwitchInput.vue)
|
|
131
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
132
|
+
|
|
133
|
+
.fc-form-builder button[role="switch"][aria-checked="true"],
|
|
134
|
+
.fc-form-builder button.bg-blue-500:not([type="submit"]) {
|
|
135
|
+
background-color: var(--_primary) !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.fc-form-builder button[role="switch"]:focus {
|
|
139
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary) 20%, transparent) !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
143
|
+
8. STEP INDICATORS (FormSteps.vue)
|
|
144
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
145
|
+
|
|
146
|
+
/* Active / completed step circle */
|
|
147
|
+
.fc-form-builder .border-blue-500.bg-blue-500 {
|
|
148
|
+
border-color: var(--_primary) !important;
|
|
149
|
+
background-color: var(--_primary) !important;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Active step circle (border only, not filled) */
|
|
153
|
+
.fc-form-builder .border-blue-500:not(.bg-blue-500) {
|
|
154
|
+
border-color: var(--_primary) !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Next button in steps */
|
|
158
|
+
.fc-form-builder .bg-blue-500.text-white {
|
|
159
|
+
background-color: var(--_primary) !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.fc-form-builder .bg-blue-500.text-white:hover,
|
|
163
|
+
.fc-form-builder .hover\:bg-blue-600:hover {
|
|
164
|
+
background-color: color-mix(in srgb, var(--_primary) 85%, black) !important;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Completed step check icon bg */
|
|
168
|
+
.fc-form-builder .bg-blue-500 {
|
|
169
|
+
background-color: var(--_primary) !important;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
173
|
+
9. TAB INDICATORS (FormTabs.vue)
|
|
174
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
175
|
+
|
|
176
|
+
/* Active tab text */
|
|
177
|
+
.fc-form-builder .text-blue-600 {
|
|
178
|
+
color: var(--_primary) !important;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Active tab underline bar */
|
|
182
|
+
.fc-form-builder .bg-blue-500.h-0\.5,
|
|
183
|
+
.fc-form-builder [class*="bg-blue-500"][class*="h-0.5"] {
|
|
184
|
+
background-color: var(--_primary) !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
188
|
+
10. TAGS (TagsInput.vue) & SELECT MULTI-VALUE CHIPS
|
|
189
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
190
|
+
|
|
191
|
+
.fc-form-builder .bg-blue-100 {
|
|
192
|
+
background-color: color-mix(in srgb, var(--_primary) 15%, white) !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.fc-form-builder .text-blue-800 {
|
|
196
|
+
color: color-mix(in srgb, var(--_primary) 80%, black) !important;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.fc-form-builder .text-blue-600 {
|
|
200
|
+
color: var(--_primary) !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.fc-form-builder .text-blue-600:hover,
|
|
204
|
+
.fc-form-builder .hover\:text-blue-800:hover {
|
|
205
|
+
color: color-mix(in srgb, var(--_primary) 80%, black) !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Tag input / select dropdown focused wrapper */
|
|
209
|
+
.fc-form-builder .border-blue-500.ring-2 {
|
|
210
|
+
border-color: var(--_border-focus) !important;
|
|
211
|
+
--tw-ring-color: color-mix(in srgb, var(--_primary) 20%, transparent) !important;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
215
|
+
11. DROPDOWN HIGHLIGHTED OPTION
|
|
216
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
217
|
+
|
|
218
|
+
.fc-form-builder .bg-blue-50 {
|
|
219
|
+
background-color: color-mix(in srgb, var(--_primary) 8%, white) !important;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.fc-form-builder .text-blue-700 {
|
|
223
|
+
color: color-mix(in srgb, var(--_primary) 70%, black) !important;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
227
|
+
12. CHECKBOX / RADIO CHECKED STATES
|
|
228
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
229
|
+
|
|
230
|
+
.fc-form-builder .border-blue-500.bg-blue-500.text-white {
|
|
231
|
+
border-color: var(--_primary) !important;
|
|
232
|
+
background-color: var(--_primary) !important;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Radio outer ring when selected */
|
|
236
|
+
.fc-form-builder .border-blue-500 {
|
|
237
|
+
border-color: var(--_primary) !important;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* Radio inner dot */
|
|
241
|
+
.fc-form-builder .rounded-full.bg-blue-500 {
|
|
242
|
+
background-color: var(--_primary) !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
246
|
+
13. FILE UPLOAD DRAG HOVER (FileInput.vue)
|
|
247
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
248
|
+
|
|
249
|
+
.fc-form-builder .border-blue-500.bg-blue-50 {
|
|
250
|
+
border-color: var(--_primary) !important;
|
|
251
|
+
background-color: color-mix(in srgb, var(--_primary) 8%, white) !important;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* "browse" link text */
|
|
255
|
+
.fc-form-builder .text-blue-500 {
|
|
256
|
+
color: var(--_primary) !important;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
260
|
+
14. GROUP COLLAPSE / GENERIC FOCUS RINGS
|
|
261
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
262
|
+
|
|
263
|
+
.fc-form-builder .focus\:ring-blue-500\/40:focus {
|
|
264
|
+
--tw-ring-color: color-mix(in srgb, var(--_primary) 40%, transparent) !important;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.fc-form-builder .focus\:border-blue-500:focus {
|
|
268
|
+
border-color: var(--_border-focus) !important;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.fc-form-builder .focus\:ring-blue-500\/20:focus {
|
|
272
|
+
--tw-ring-color: color-mix(in srgb, var(--_primary) 20%, transparent) !important;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.fc-form-builder .ring-blue-500\/20 {
|
|
276
|
+
--tw-ring-color: color-mix(in srgb, var(--_primary) 20%, transparent) !important;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Select dropdown search input focus */
|
|
280
|
+
.fc-form-builder .fc-select-search:focus {
|
|
281
|
+
border-color: var(--_border-focus) !important;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
285
|
+
15. DARK MODE
|
|
286
|
+
All rules use the `.dark` class strategy (Tailwind default).
|
|
287
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
288
|
+
|
|
289
|
+
/* --- Input / Textarea / Select backgrounds & text --- */
|
|
290
|
+
.dark .fc-form-builder
|
|
291
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
|
|
292
|
+
.dark .fc-form-builder textarea,
|
|
293
|
+
.dark .fc-form-builder select {
|
|
294
|
+
background-color: #1f2937; /* gray-800 */
|
|
295
|
+
color: #ffffff;
|
|
296
|
+
border-color: #4b5563; /* gray-600 */
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Also support dark class on the form-builder itself */
|
|
300
|
+
.fc-form-builder.dark
|
|
301
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
|
|
302
|
+
.fc-form-builder.dark textarea,
|
|
303
|
+
.fc-form-builder.dark select {
|
|
304
|
+
background-color: #1f2937;
|
|
305
|
+
color: #ffffff;
|
|
306
|
+
border-color: #4b5563;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* --- Placeholder text --- */
|
|
310
|
+
.dark .fc-form-builder
|
|
311
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"])::placeholder,
|
|
312
|
+
.dark .fc-form-builder textarea::placeholder,
|
|
313
|
+
.dark .fc-form-builder select::placeholder {
|
|
314
|
+
color: #6b7280; /* gray-500 */
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* --- Combobox trigger (SelectInput.vue custom dropdown) --- */
|
|
318
|
+
.dark .fc-form-builder [role="combobox"] {
|
|
319
|
+
background-color: #1f2937;
|
|
320
|
+
color: #ffffff;
|
|
321
|
+
border-color: #4b5563;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* --- Tags wrapper (TagsInput.vue) --- */
|
|
325
|
+
.dark .fc-form-builder .flex.flex-wrap.items-center.gap-1\.5.rounded-md.border.bg-white {
|
|
326
|
+
background-color: #1f2937;
|
|
327
|
+
border-color: #4b5563;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* --- Dropdown panel (SelectInput, TagsInput) --- */
|
|
331
|
+
.dark .fc-form-builder .border-gray-200.bg-white.shadow-lg,
|
|
332
|
+
.dark .fc-form-builder .border-gray-200.bg-white.shadow-xl {
|
|
333
|
+
background-color: #111827; /* gray-900 */
|
|
334
|
+
border-color: #374151; /* gray-700 */
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* --- Dropdown options text --- */
|
|
338
|
+
.dark .fc-form-builder .text-gray-900 {
|
|
339
|
+
color: #f3f4f6; /* gray-100 */
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.dark .fc-form-builder li.text-gray-900 {
|
|
343
|
+
color: #f3f4f6;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* --- Dropdown hover / highlight --- */
|
|
347
|
+
.dark .fc-form-builder .hover\:bg-gray-50:hover,
|
|
348
|
+
.dark .fc-form-builder .bg-gray-100 {
|
|
349
|
+
background-color: #1f2937; /* gray-800 */
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* --- Search inside dropdown --- */
|
|
353
|
+
.dark .fc-form-builder .border-gray-200.p-2,
|
|
354
|
+
.dark .fc-form-builder .border-gray-200.border-b {
|
|
355
|
+
border-color: #374151;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.dark .fc-form-builder .border-gray-300.px-2,
|
|
359
|
+
.dark .fc-form-builder .fc-select-search {
|
|
360
|
+
background-color: #1f2937;
|
|
361
|
+
color: #ffffff;
|
|
362
|
+
border-color: #4b5563;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* --- Labels --- */
|
|
366
|
+
.dark .fc-form-builder label .text-sm.font-medium.text-gray-700,
|
|
367
|
+
.dark .fc-form-builder .text-gray-700 {
|
|
368
|
+
color: #d1d5db; /* gray-300 */
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.dark .fc-form-builder .block.text-sm.font-medium.text-gray-700 {
|
|
372
|
+
color: #d1d5db;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/* --- Help text --- */
|
|
376
|
+
.dark .fc-form-builder .text-gray-400 {
|
|
377
|
+
color: #6b7280; /* gray-500 */
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* --- Checkbox / Radio label text --- */
|
|
381
|
+
.dark .fc-form-builder .text-sm.text-gray-700 {
|
|
382
|
+
color: #d1d5db;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/* --- Checkbox / Radio unchecked border --- */
|
|
386
|
+
.dark .fc-form-builder .border-gray-300.bg-white {
|
|
387
|
+
background-color: #1f2937;
|
|
388
|
+
border-color: #4b5563;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/* Just border (radio unchecked) */
|
|
392
|
+
.dark .fc-form-builder [role="radio"].border-gray-300,
|
|
393
|
+
.dark .fc-form-builder [role="checkbox"].border-gray-300 {
|
|
394
|
+
border-color: #4b5563;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* --- Switch inactive track --- */
|
|
398
|
+
.dark .fc-form-builder button[role="switch"].bg-gray-300 {
|
|
399
|
+
background-color: #4b5563;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
/* --- Slider track background --- */
|
|
403
|
+
.dark .fc-form-builder input[type="range"].bg-gray-200 {
|
|
404
|
+
background-color: #374151;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
/* --- Disabled input --- */
|
|
408
|
+
.dark .fc-form-builder .bg-gray-100 {
|
|
409
|
+
background-color: #111827; /* gray-900 */
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.dark .fc-form-builder .bg-gray-50 {
|
|
413
|
+
background-color: #1f2937;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* --- Prefix/suffix addons --- */
|
|
417
|
+
.dark .fc-form-builder .border-gray-300.bg-gray-50.px-3.text-sm.text-gray-500 {
|
|
418
|
+
background-color: #1f2937;
|
|
419
|
+
border-color: #4b5563;
|
|
420
|
+
color: #9ca3af;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
/* --- Form title --- */
|
|
424
|
+
.dark .fc-form-builder .text-lg.font-semibold.text-gray-900 {
|
|
425
|
+
color: #f9fafb; /* gray-50 */
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* --- Form description --- */
|
|
429
|
+
.dark .fc-form-builder .text-sm.text-gray-500 {
|
|
430
|
+
color: #9ca3af; /* gray-400 */
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
/* --- Step title --- */
|
|
434
|
+
.dark .fc-form-builder .text-base.font-semibold.text-gray-800 {
|
|
435
|
+
color: #e5e7eb; /* gray-200 */
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* --- Step circle: inactive --- */
|
|
439
|
+
.dark .fc-form-builder .border-gray-300.bg-white.text-gray-500 {
|
|
440
|
+
background-color: #1f2937;
|
|
441
|
+
border-color: #4b5563;
|
|
442
|
+
color: #9ca3af;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/* --- Step connector inactive --- */
|
|
446
|
+
.dark .fc-form-builder .bg-gray-200 {
|
|
447
|
+
background-color: #374151;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/* --- Step navigation border --- */
|
|
451
|
+
.dark .fc-form-builder .border-gray-100 {
|
|
452
|
+
border-color: #1f2937;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
/* --- Tab bar border --- */
|
|
456
|
+
.dark .fc-form-builder .border-b.border-gray-200 {
|
|
457
|
+
border-color: #374151;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
/* --- Inactive tab text --- */
|
|
461
|
+
.dark .fc-form-builder .text-gray-500.hover\:text-gray-700:hover {
|
|
462
|
+
color: #9ca3af;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.dark .fc-form-builder .text-gray-500.hover\:text-gray-700:hover:hover {
|
|
466
|
+
color: #d1d5db;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* --- Disabled tab text --- */
|
|
470
|
+
.dark .fc-form-builder .cursor-not-allowed.text-gray-300 {
|
|
471
|
+
color: #4b5563;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
/* --- Group (fieldset) --- */
|
|
475
|
+
.dark .fc-form-builder fieldset.border-gray-200.bg-white,
|
|
476
|
+
.dark .fc-form-builder .rounded-lg.border.border-gray-200.bg-white {
|
|
477
|
+
background-color: #111827;
|
|
478
|
+
border-color: #374151;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
/* --- Group header border --- */
|
|
482
|
+
.dark .fc-form-builder .border-b.border-gray-100 {
|
|
483
|
+
border-color: #1f2937;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
/* --- Group title --- */
|
|
487
|
+
.dark .fc-form-builder .text-sm.font-semibold.text-gray-800 {
|
|
488
|
+
color: #e5e7eb;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
/* --- Group description --- */
|
|
492
|
+
.dark .fc-form-builder .text-xs.text-gray-500 {
|
|
493
|
+
color: #9ca3af;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
/* --- Switch label text --- */
|
|
497
|
+
.dark .fc-form-builder .text-sm.text-gray-600 {
|
|
498
|
+
color: #d1d5db;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/* --- File upload drop zone --- */
|
|
502
|
+
.dark .fc-form-builder .border-dashed.border-gray-300.bg-gray-50 {
|
|
503
|
+
background-color: #1f2937;
|
|
504
|
+
border-color: #4b5563;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.dark .fc-form-builder .border-dashed .hover\:border-gray-400:hover {
|
|
508
|
+
border-color: #6b7280;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* --- File upload text --- */
|
|
512
|
+
.dark .fc-form-builder .text-sm.text-gray-600 {
|
|
513
|
+
color: #d1d5db;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* --- File list item --- */
|
|
517
|
+
.dark .fc-form-builder .border-gray-200.bg-white.px-3.py-2 {
|
|
518
|
+
background-color: #1f2937;
|
|
519
|
+
border-color: #374151;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
/* --- Divider --- */
|
|
523
|
+
.dark .fc-form-builder .border-t.border-gray-200 {
|
|
524
|
+
border-color: #374151;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.dark .fc-form-builder .bg-white.px-3.text-xs.text-gray-500 {
|
|
528
|
+
background-color: #111827;
|
|
529
|
+
color: #9ca3af;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* --- Tooltip --- */
|
|
533
|
+
.dark .fc-form-builder .bg-gray-200.text-gray-500 {
|
|
534
|
+
background-color: #374151;
|
|
535
|
+
color: #d1d5db;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
/* --- Reset button --- */
|
|
539
|
+
.dark .fc-form-builder button[type="reset"] {
|
|
540
|
+
background-color: #1f2937;
|
|
541
|
+
color: #d1d5db;
|
|
542
|
+
border-color: #4b5563;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.dark .fc-form-builder button[type="reset"]:hover {
|
|
546
|
+
background-color: #111827;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
/* --- Prev button in steps --- */
|
|
550
|
+
.dark .fc-form-builder .fc-steps-prev-btn {
|
|
551
|
+
background-color: #1f2937;
|
|
552
|
+
color: #d1d5db;
|
|
553
|
+
border-color: #4b5563;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.dark .fc-form-builder .fc-steps-prev-btn:hover:not(:disabled) {
|
|
557
|
+
background-color: #111827;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* --- "No options found" text --- */
|
|
561
|
+
.dark .fc-form-builder .px-3.py-2.text-sm.text-gray-400 {
|
|
562
|
+
color: #6b7280;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
/* --- Phone input specific dark overrides --- */
|
|
566
|
+
.dark .fc-form-builder .border-gray-300.dark\:border-gray-600 {
|
|
567
|
+
border-color: #4b5563;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
/* --- Tags: dark mode chip colors use color-mix with dark background --- */
|
|
571
|
+
.dark .fc-form-builder .bg-blue-100 {
|
|
572
|
+
background-color: color-mix(in srgb, var(--_primary) 20%, #1f2937) !important;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
576
|
+
16. DARK MODE — media query variant (prefers-color-scheme)
|
|
577
|
+
For projects that use `darkMode: 'media'` in Tailwind config.
|
|
578
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
579
|
+
|
|
580
|
+
@media (prefers-color-scheme: dark) {
|
|
581
|
+
.fc-form-builder:not(.light)
|
|
582
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
|
|
583
|
+
.fc-form-builder:not(.light) textarea,
|
|
584
|
+
.fc-form-builder:not(.light) select {
|
|
585
|
+
background-color: #1f2937;
|
|
586
|
+
color: #ffffff;
|
|
587
|
+
border-color: #4b5563;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.fc-form-builder:not(.light)
|
|
591
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"])::placeholder,
|
|
592
|
+
.fc-form-builder:not(.light) textarea::placeholder {
|
|
593
|
+
color: #6b7280;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.fc-form-builder:not(.light) [role="combobox"] {
|
|
597
|
+
background-color: #1f2937;
|
|
598
|
+
color: #ffffff;
|
|
599
|
+
border-color: #4b5563;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.fc-form-builder:not(.light) button[type="reset"] {
|
|
603
|
+
background-color: #1f2937;
|
|
604
|
+
color: #d1d5db;
|
|
605
|
+
border-color: #4b5563;
|
|
606
|
+
}
|
|
607
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formatica/vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Schema-driven, fully-typed form builder for Vue 3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/formatica.umd.cjs",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"./types": {
|
|
16
16
|
"types": "./dist/types/index.d.ts"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"./style.css": "./dist/style.css"
|
|
18
19
|
},
|
|
19
20
|
"files": [
|
|
20
21
|
"dist",
|
|
@@ -32,7 +33,9 @@
|
|
|
32
33
|
"bugs": {
|
|
33
34
|
"url": ""
|
|
34
35
|
},
|
|
35
|
-
"sideEffects":
|
|
36
|
+
"sideEffects": [
|
|
37
|
+
"*.css"
|
|
38
|
+
],
|
|
36
39
|
"scripts": {
|
|
37
40
|
"build": "vite build",
|
|
38
41
|
"typecheck": "vue-tsc --noEmit",
|