@vifui/styles 0.4.0-alpha.6
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/README.md +224 -0
- package/base/base.css +154 -0
- package/components/accordion.css +240 -0
- package/components/alert.css +213 -0
- package/components/avatar.css +140 -0
- package/components/badge.css +297 -0
- package/components/breadcrumb.css +250 -0
- package/components/button.css +564 -0
- package/components/card.css +393 -0
- package/components/checkbox.css +293 -0
- package/components/divider.css +282 -0
- package/components/index.css +10 -0
- package/components/spinner.css +594 -0
- package/index.css +24 -0
- package/package.json +99 -0
- package/themes/default.css +335 -0
- package/utilities/index.css +488 -0
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default Theme - Light & Dark Mode
|
|
3
|
+
* VifUI design tokens and color system
|
|
4
|
+
* Using authentic Vuesax colors
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@layer base {
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: light;
|
|
10
|
+
|
|
11
|
+
/* ============================================ */
|
|
12
|
+
/* Simple Colors */
|
|
13
|
+
/* ============================================ */
|
|
14
|
+
|
|
15
|
+
--black: oklch(0% 0 0);
|
|
16
|
+
--white: oklch(100% 0 0);
|
|
17
|
+
--flakes: oklch(99.11% 0 0);
|
|
18
|
+
--eclipse: oklch(21.03% 0.006 285.89);
|
|
19
|
+
|
|
20
|
+
/* ============================================ */
|
|
21
|
+
/* Vuesax Authentic Colors */
|
|
22
|
+
/* ============================================ */
|
|
23
|
+
|
|
24
|
+
--vuesax-primary: oklch(0.61 0.2 263.6); /* rgb(31, 116, 255) */
|
|
25
|
+
--vuesax-secondary: oklch(0.4503 0.1821 305.37); /* rgb(121, 49, 177) */
|
|
26
|
+
--vuesax-danger: oklch(0.62 0.22 10); /* Pinkish-red */
|
|
27
|
+
--vuesax-success: oklch(0.77 0.2 145.5); /* rgb(70, 201, 58) */
|
|
28
|
+
--vuesax-warning: oklch(0.82 0.18 83.7); /* rgb(255, 186, 0) */
|
|
29
|
+
--vuesax-dark: oklch(0.2 0 0); /* rgb(30, 30, 30) */
|
|
30
|
+
--vuesax-light: oklch(0.96 0 0); /* rgb(245, 245, 245) */
|
|
31
|
+
|
|
32
|
+
/* ============================================ */
|
|
33
|
+
/* Neutral Scale (Extended for modern UIs) */
|
|
34
|
+
/* ============================================ */
|
|
35
|
+
|
|
36
|
+
--color-neutral-25: oklch(99% 0 0);
|
|
37
|
+
--color-neutral-50: oklch(98% 0 0);
|
|
38
|
+
--color-neutral-100: oklch(96% 0 0);
|
|
39
|
+
--color-neutral-200: oklch(90% 0 0);
|
|
40
|
+
--color-neutral-300: oklch(83% 0 0);
|
|
41
|
+
--color-neutral-400: oklch(64% 0 0);
|
|
42
|
+
--color-neutral-500: oklch(53% 0 0);
|
|
43
|
+
--color-neutral-600: oklch(45% 0 0);
|
|
44
|
+
--color-neutral-700: oklch(38% 0 0);
|
|
45
|
+
--color-neutral-800: oklch(27% 0 0);
|
|
46
|
+
--color-neutral-900: oklch(23% 0 0);
|
|
47
|
+
--color-neutral-950: oklch(15% 0 0);
|
|
48
|
+
|
|
49
|
+
/* ============================================ */
|
|
50
|
+
/* Semantic Colors - Light Mode */
|
|
51
|
+
/* ============================================ */
|
|
52
|
+
|
|
53
|
+
/* Background & Foreground */
|
|
54
|
+
--background: var(--white);
|
|
55
|
+
--foreground: var(--eclipse);
|
|
56
|
+
|
|
57
|
+
/* Surface (cards, panels, non-overlay components) */
|
|
58
|
+
--surface: var(--white);
|
|
59
|
+
--surface-foreground: var(--foreground);
|
|
60
|
+
|
|
61
|
+
/* Overlay (modals, dropdowns, floating elements) */
|
|
62
|
+
--overlay: var(--white);
|
|
63
|
+
--overlay-foreground: var(--foreground);
|
|
64
|
+
|
|
65
|
+
/* Muted text and disabled states */
|
|
66
|
+
--muted: oklch(55% 0.014 286);
|
|
67
|
+
--muted-foreground: oklch(45% 0.014 286);
|
|
68
|
+
|
|
69
|
+
/* Default/Secondary elements */
|
|
70
|
+
--default: var(--color-neutral-100);
|
|
71
|
+
--default-foreground: var(--eclipse);
|
|
72
|
+
--default-hover: var(--color-neutral-200);
|
|
73
|
+
|
|
74
|
+
/* Primary (Brand) */
|
|
75
|
+
--primary: var(--vuesax-primary);
|
|
76
|
+
--primary-foreground: var(--flakes);
|
|
77
|
+
--primary-hover: oklch(0.56 0.2 263.6);
|
|
78
|
+
|
|
79
|
+
/* Secondary */
|
|
80
|
+
--secondary: var(--color-default);
|
|
81
|
+
--secondary-foreground: var(--vuesax-primary);
|
|
82
|
+
--secondary-hover: var(--color-default);
|
|
83
|
+
|
|
84
|
+
/* Success */
|
|
85
|
+
--success: var(--vuesax-success);
|
|
86
|
+
--success-foreground: var(--flakes);
|
|
87
|
+
--success-hover: oklch(0.72 0.2 145.5);
|
|
88
|
+
|
|
89
|
+
/* Warning */
|
|
90
|
+
--warning: var(--vuesax-warning);
|
|
91
|
+
--warning-foreground: var(--eclipse);
|
|
92
|
+
--warning-hover: oklch(0.77 0.18 83.7);
|
|
93
|
+
|
|
94
|
+
/* Danger */
|
|
95
|
+
--danger: var(--vuesax-danger);
|
|
96
|
+
--danger-foreground: var(--flakes);
|
|
97
|
+
--danger-hover: oklch(0.58 0.24 10);
|
|
98
|
+
|
|
99
|
+
/* ============================================ */
|
|
100
|
+
/* UI Elements */
|
|
101
|
+
/* ============================================ */
|
|
102
|
+
|
|
103
|
+
--border: oklch(0% 0 0 / 10%);
|
|
104
|
+
--divider: var(--color-neutral-100);
|
|
105
|
+
--focus: var(--primary);
|
|
106
|
+
--link: var(--primary);
|
|
107
|
+
--scrollbar: var(--color-neutral-300);
|
|
108
|
+
|
|
109
|
+
/* ============================================ */
|
|
110
|
+
/* Modern Shadow System */
|
|
111
|
+
/* ============================================ */
|
|
112
|
+
|
|
113
|
+
/* Subtle elevation - for cards, panels */
|
|
114
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
115
|
+
|
|
116
|
+
--shadow-sm:
|
|
117
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
118
|
+
|
|
119
|
+
/* Default elevation - standard components */
|
|
120
|
+
--shadow-md:
|
|
121
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
122
|
+
|
|
123
|
+
/* Medium elevation - dropdowns, popovers */
|
|
124
|
+
--shadow-lg:
|
|
125
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
126
|
+
|
|
127
|
+
/* High elevation - modals, dialogs */
|
|
128
|
+
--shadow-xl:
|
|
129
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
130
|
+
|
|
131
|
+
/* Maximum elevation - tooltips, notifications */
|
|
132
|
+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
133
|
+
|
|
134
|
+
/* Component-specific shadows */
|
|
135
|
+
--surface-shadow: var(--shadow-sm);
|
|
136
|
+
--overlay-shadow: var(--shadow-xl);
|
|
137
|
+
--field-shadow: var(--shadow-xs);
|
|
138
|
+
|
|
139
|
+
/* Card shadows (Vuesax style) */
|
|
140
|
+
--card-shadow:
|
|
141
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
142
|
+
|
|
143
|
+
--card-shadow-hover:
|
|
144
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
145
|
+
|
|
146
|
+
--card-transition: all 0.3s var(--ease-smooth);
|
|
147
|
+
--card-image-scale: 1.1;
|
|
148
|
+
|
|
149
|
+
/* ============================================ */
|
|
150
|
+
/* Form Fields */
|
|
151
|
+
/* ============================================ */
|
|
152
|
+
|
|
153
|
+
--field-background: var(--white);
|
|
154
|
+
--field-foreground: var(--foreground);
|
|
155
|
+
--field-placeholder: var(--muted);
|
|
156
|
+
--field-border: var(--border);
|
|
157
|
+
--field-border-width: 1px;
|
|
158
|
+
--field-radius: calc(var(--radius) * 1.2);
|
|
159
|
+
|
|
160
|
+
/* ============================================ */
|
|
161
|
+
/* Spacing & Sizing */
|
|
162
|
+
/* ============================================ */
|
|
163
|
+
|
|
164
|
+
--spacing: 0.25rem;
|
|
165
|
+
--radius: 0.875rem;
|
|
166
|
+
--radius-sm: 0.5rem;
|
|
167
|
+
--radius-md: 0.875rem;
|
|
168
|
+
--radius-lg: 1rem;
|
|
169
|
+
--radius-xl: 1.25rem;
|
|
170
|
+
--radius-2xl: 1.5rem;
|
|
171
|
+
--radius-full: 9999px;
|
|
172
|
+
|
|
173
|
+
/* ============================================ */
|
|
174
|
+
/* Interactions */
|
|
175
|
+
/* ============================================ */
|
|
176
|
+
|
|
177
|
+
--ring-offset-width: 2px;
|
|
178
|
+
--disabled-opacity: 0.5;
|
|
179
|
+
--cursor-interactive: pointer;
|
|
180
|
+
--cursor-disabled: not-allowed;
|
|
181
|
+
|
|
182
|
+
/* Easing functions */
|
|
183
|
+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
184
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
185
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
186
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
|
|
187
|
+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
188
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
189
|
+
|
|
190
|
+
/* ============================================ */
|
|
191
|
+
/* Animations */
|
|
192
|
+
/* ============================================ */
|
|
193
|
+
|
|
194
|
+
--skeleton-animation: shimmer; /* shimmer, pulse, none */
|
|
195
|
+
--transition-fast: 150ms;
|
|
196
|
+
--transition-base: 200ms;
|
|
197
|
+
--transition-slow: 300ms;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* ============================================ */
|
|
201
|
+
/* Dark Mode */
|
|
202
|
+
/* ============================================ */
|
|
203
|
+
|
|
204
|
+
.dark,
|
|
205
|
+
[data-theme="dark"] {
|
|
206
|
+
color-scheme: dark;
|
|
207
|
+
|
|
208
|
+
/* Background & Foreground */
|
|
209
|
+
--background: oklch(15% 0.005 286);
|
|
210
|
+
--foreground: var(--flakes);
|
|
211
|
+
|
|
212
|
+
/* Surface */
|
|
213
|
+
--surface: oklch(18% 0.006 286);
|
|
214
|
+
--surface-foreground: var(--foreground);
|
|
215
|
+
|
|
216
|
+
/* Overlay (lighter for visibility) */
|
|
217
|
+
--overlay: oklch(20% 0.006 286);
|
|
218
|
+
--overlay-foreground: var(--foreground);
|
|
219
|
+
|
|
220
|
+
/* Muted */
|
|
221
|
+
--muted: oklch(55% 0.015 286);
|
|
222
|
+
--muted-foreground: oklch(70% 0.015 286);
|
|
223
|
+
|
|
224
|
+
/* Default */
|
|
225
|
+
--default: oklch(25% 0.006 286);
|
|
226
|
+
--default-foreground: var(--flakes);
|
|
227
|
+
--default-hover: oklch(30% 0.006 286);
|
|
228
|
+
|
|
229
|
+
/* Primary (brighter in dark mode) */
|
|
230
|
+
--primary: oklch(0.65 0.2 263.6);
|
|
231
|
+
--primary-foreground: var(--flakes);
|
|
232
|
+
--primary-hover: oklch(0.7 0.2 263.6);
|
|
233
|
+
|
|
234
|
+
/* Secondary */
|
|
235
|
+
--secondary: oklch(0.55 0.182 305.37);
|
|
236
|
+
--secondary-foreground: var(--flakes);
|
|
237
|
+
--secondary-hover: oklch(0.6 0.182 305.37);
|
|
238
|
+
|
|
239
|
+
/* Success */
|
|
240
|
+
--success: oklch(0.8 0.2 145.5);
|
|
241
|
+
--success-foreground: var(--eclipse);
|
|
242
|
+
--success-hover: oklch(0.85 0.2 145.5);
|
|
243
|
+
|
|
244
|
+
/* Warning */
|
|
245
|
+
--warning: oklch(0.86 0.18 83.7);
|
|
246
|
+
--warning-foreground: var(--eclipse);
|
|
247
|
+
--warning-hover: oklch(0.91 0.18 83.7);
|
|
248
|
+
|
|
249
|
+
/* Danger */
|
|
250
|
+
--danger: oklch(0.68 0.22 10);
|
|
251
|
+
--danger-foreground: var(--flakes);
|
|
252
|
+
--danger-hover: oklch(0.73 0.24 10);
|
|
253
|
+
|
|
254
|
+
/* UI Elements */
|
|
255
|
+
--border: oklch(100% 0 0 / 8%);
|
|
256
|
+
--divider: var(--color-neutral-800);
|
|
257
|
+
--focus: var(--primary);
|
|
258
|
+
--link: oklch(0.7 0.2 263.6);
|
|
259
|
+
--scrollbar: var(--color-neutral-700);
|
|
260
|
+
|
|
261
|
+
/* Dark Mode Shadows (more subtle) */
|
|
262
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
263
|
+
|
|
264
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
265
|
+
|
|
266
|
+
--shadow-md:
|
|
267
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
|
268
|
+
|
|
269
|
+
--shadow-lg:
|
|
270
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
|
271
|
+
|
|
272
|
+
--shadow-xl:
|
|
273
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
|
|
274
|
+
|
|
275
|
+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
|
|
276
|
+
|
|
277
|
+
/* Component shadows */
|
|
278
|
+
--surface-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
279
|
+
--overlay-shadow: var(--shadow-xl);
|
|
280
|
+
--field-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
281
|
+
|
|
282
|
+
/* Card shadows */
|
|
283
|
+
--card-shadow:
|
|
284
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
|
|
285
|
+
0 0 1px 0 rgba(0, 0, 0, 0.5);
|
|
286
|
+
|
|
287
|
+
--card-shadow-hover:
|
|
288
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
|
|
289
|
+
|
|
290
|
+
/* Form fields */
|
|
291
|
+
--field-background: var(--default);
|
|
292
|
+
--field-foreground: var(--foreground);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* ============================================ */
|
|
296
|
+
/* Tailwind v4 Theme Integration */
|
|
297
|
+
/* ============================================ */
|
|
298
|
+
|
|
299
|
+
@theme {
|
|
300
|
+
/* Primary colors */
|
|
301
|
+
--color-primary: var(--primary);
|
|
302
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
303
|
+
--color-primary-hover: var(--primary-hover);
|
|
304
|
+
|
|
305
|
+
/* Secondary colors */
|
|
306
|
+
--color-secondary: var(--secondary);
|
|
307
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
308
|
+
--color-secondary-hover: var(--secondary-hover);
|
|
309
|
+
|
|
310
|
+
/* Default colors */
|
|
311
|
+
--color-default: var(--default);
|
|
312
|
+
--color-default-foreground: var(--default-foreground);
|
|
313
|
+
--color-default-hover: var(--default-hover);
|
|
314
|
+
|
|
315
|
+
/* Status colors */
|
|
316
|
+
--color-success: var(--success);
|
|
317
|
+
--color-success-foreground: var(--success-foreground);
|
|
318
|
+
--color-success-hover: var(--success-hover);
|
|
319
|
+
|
|
320
|
+
--color-warning: var(--warning);
|
|
321
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
322
|
+
--color-warning-hover: var(--warning-hover);
|
|
323
|
+
|
|
324
|
+
--color-danger: var(--danger);
|
|
325
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
326
|
+
--color-danger-hover: var(--danger-hover);
|
|
327
|
+
|
|
328
|
+
/* Base colors */
|
|
329
|
+
--color-foreground: var(--foreground);
|
|
330
|
+
--color-background: var(--background);
|
|
331
|
+
--color-surface: var(--surface);
|
|
332
|
+
--color-overlay: var(--overlay);
|
|
333
|
+
--color-border: var(--border);
|
|
334
|
+
}
|
|
335
|
+
}
|