@fy-/fws-vue-tw3 3.0.2 → 3.1.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/dist/style.css +271 -0
- package/package.json +2 -2
package/dist/style.css
ADDED
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
/* fws-vue TW3 — modernized component styles */
|
|
2
|
+
/* Design principles: Linear luminance stacking, Vercel shadow-as-border, Stripe blue-tinted shadows */
|
|
3
|
+
/* All colors via fv-* tokens — project provides brand, library provides structure */
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--fv-btn-radius: 0.5rem;
|
|
7
|
+
--fv-transition: 150ms ease-out;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* ═══════════════════════════════════════
|
|
11
|
+
UTILITY CLASSES
|
|
12
|
+
═══════════════════════════════════════ */
|
|
13
|
+
|
|
14
|
+
.fws-error-text {
|
|
15
|
+
@apply text-red-600 dark:text-red-400;
|
|
16
|
+
}
|
|
17
|
+
.fws-helper-text {
|
|
18
|
+
@apply text-fv-neutral-500 dark:text-fv-neutral-400 text-sm;
|
|
19
|
+
}
|
|
20
|
+
.fws-link {
|
|
21
|
+
@apply text-fv-primary-600 dark:text-fv-primary-400 inline-flex items-center gap-1 underline underline-offset-2 hover:no-underline transition-colors;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ═══════════════════════════════════════
|
|
25
|
+
BUTTONS — Modern system
|
|
26
|
+
Inspired by: Linear (ghost/subtle), Vercel (shadow-border), Stripe (conservative radius)
|
|
27
|
+
|
|
28
|
+
Usage: <button class="btn primary">Label</button>
|
|
29
|
+
<button class="btn primary ol">Outlined</button>
|
|
30
|
+
<button class="btn primary sm">Small</button>
|
|
31
|
+
═══════════════════════════════════════ */
|
|
32
|
+
|
|
33
|
+
.btn {
|
|
34
|
+
@apply inline-flex items-center justify-center gap-2 font-medium
|
|
35
|
+
text-sm leading-none select-none cursor-pointer
|
|
36
|
+
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
|
|
37
|
+
dark:focus-visible:ring-offset-fv-neutral-900
|
|
38
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
39
|
+
motion-reduce:transition-none;
|
|
40
|
+
border-radius: var(--fv-btn-radius);
|
|
41
|
+
transition: color var(--fv-transition),
|
|
42
|
+
background-color var(--fv-transition),
|
|
43
|
+
border-color var(--fv-transition),
|
|
44
|
+
box-shadow var(--fv-transition),
|
|
45
|
+
transform 100ms ease;
|
|
46
|
+
|
|
47
|
+
/* Default size */
|
|
48
|
+
padding: 0.5rem 1rem;
|
|
49
|
+
|
|
50
|
+
/* Raycast/Linear: press feedback — no size change, just feel */
|
|
51
|
+
&:active:not(:disabled) {
|
|
52
|
+
transform: scale(0.97);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Size variants */
|
|
56
|
+
&.sm {
|
|
57
|
+
@apply text-xs;
|
|
58
|
+
padding: 0.375rem 0.75rem;
|
|
59
|
+
}
|
|
60
|
+
&.md {
|
|
61
|
+
@apply text-base;
|
|
62
|
+
padding: 0.625rem 1.25rem;
|
|
63
|
+
}
|
|
64
|
+
&.lg {
|
|
65
|
+
@apply text-base;
|
|
66
|
+
padding: 0.75rem 1.5rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* ── Primary ── */
|
|
70
|
+
&.primary {
|
|
71
|
+
@apply bg-fv-primary-600 text-white
|
|
72
|
+
hover:bg-fv-primary-700
|
|
73
|
+
active:bg-fv-primary-800
|
|
74
|
+
focus-visible:ring-fv-primary-500
|
|
75
|
+
dark:bg-fv-primary-500 dark:hover:bg-fv-primary-600 dark:active:bg-fv-primary-700;
|
|
76
|
+
/* Raycast: inset highlight (top) + shadow (bottom) = physical depth */
|
|
77
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
78
|
+
0 1px 2px rgba(0,0,0,0.1);
|
|
79
|
+
&:hover {
|
|
80
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
81
|
+
0 1px 3px rgba(0,0,0,0.15);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Stripe: outlined uses shadow-as-border for smoother radius */
|
|
85
|
+
&.ol {
|
|
86
|
+
@apply bg-transparent text-fv-primary-600
|
|
87
|
+
hover:bg-fv-primary-50
|
|
88
|
+
active:bg-fv-primary-100
|
|
89
|
+
dark:text-fv-primary-400
|
|
90
|
+
dark:hover:bg-fv-primary-950;
|
|
91
|
+
border: none;
|
|
92
|
+
box-shadow: inset 0 0 0 1px currentColor;
|
|
93
|
+
opacity: 0.8;
|
|
94
|
+
&:hover { opacity: 1; }
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ── Accent ── */
|
|
99
|
+
&.accent {
|
|
100
|
+
@apply bg-fv-accent-600 text-white
|
|
101
|
+
hover:bg-fv-accent-700
|
|
102
|
+
active:bg-fv-accent-800
|
|
103
|
+
focus-visible:ring-fv-accent-500
|
|
104
|
+
dark:bg-fv-accent-500 dark:hover:bg-fv-accent-600 dark:active:bg-fv-accent-700;
|
|
105
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
106
|
+
0 1px 2px rgba(0,0,0,0.1);
|
|
107
|
+
&:hover {
|
|
108
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
109
|
+
0 1px 3px rgba(0,0,0,0.15);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&.ol {
|
|
113
|
+
@apply bg-transparent text-fv-accent-600
|
|
114
|
+
hover:bg-fv-accent-50
|
|
115
|
+
active:bg-fv-accent-100
|
|
116
|
+
dark:text-fv-accent-400
|
|
117
|
+
dark:hover:bg-fv-accent-950;
|
|
118
|
+
border: none;
|
|
119
|
+
box-shadow: inset 0 0 0 1px currentColor;
|
|
120
|
+
opacity: 0.8;
|
|
121
|
+
&:hover { opacity: 1; }
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* ── Success ── */
|
|
126
|
+
&.success, &.valid {
|
|
127
|
+
@apply bg-green-600 text-white
|
|
128
|
+
hover:bg-green-700
|
|
129
|
+
active:bg-green-800
|
|
130
|
+
focus-visible:ring-green-500
|
|
131
|
+
dark:bg-green-600 dark:hover:bg-green-700;
|
|
132
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
133
|
+
0 1px 2px rgba(0,0,0,0.1);
|
|
134
|
+
|
|
135
|
+
&.ol {
|
|
136
|
+
@apply bg-transparent text-green-600
|
|
137
|
+
hover:bg-green-50
|
|
138
|
+
dark:text-green-400
|
|
139
|
+
dark:hover:bg-green-950;
|
|
140
|
+
border: none;
|
|
141
|
+
box-shadow: inset 0 0 0 1px currentColor;
|
|
142
|
+
opacity: 0.8;
|
|
143
|
+
&:hover { opacity: 1; }
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* ── Error / Danger ── */
|
|
148
|
+
&.error, &.danger {
|
|
149
|
+
@apply bg-red-600 text-white
|
|
150
|
+
hover:bg-red-700
|
|
151
|
+
active:bg-red-800
|
|
152
|
+
focus-visible:ring-red-500
|
|
153
|
+
dark:bg-red-600 dark:hover:bg-red-700;
|
|
154
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
155
|
+
0 1px 2px rgba(0,0,0,0.1);
|
|
156
|
+
|
|
157
|
+
&.ol {
|
|
158
|
+
@apply bg-transparent text-red-600
|
|
159
|
+
hover:bg-red-50
|
|
160
|
+
dark:text-red-400
|
|
161
|
+
dark:hover:bg-red-950;
|
|
162
|
+
border: none;
|
|
163
|
+
box-shadow: inset 0 0 0 1px currentColor;
|
|
164
|
+
opacity: 0.8;
|
|
165
|
+
&:hover { opacity: 1; }
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* ── Neutral ── */
|
|
170
|
+
&.neutral {
|
|
171
|
+
@apply bg-fv-neutral-700 text-white
|
|
172
|
+
hover:bg-fv-neutral-800
|
|
173
|
+
active:bg-fv-neutral-900
|
|
174
|
+
focus-visible:ring-fv-neutral-500
|
|
175
|
+
dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-700;
|
|
176
|
+
box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset,
|
|
177
|
+
0 1px 2px rgba(0,0,0,0.1);
|
|
178
|
+
|
|
179
|
+
&.ol {
|
|
180
|
+
@apply bg-transparent text-fv-neutral-600
|
|
181
|
+
hover:bg-fv-neutral-50
|
|
182
|
+
dark:text-fv-neutral-400
|
|
183
|
+
dark:hover:bg-fv-neutral-800;
|
|
184
|
+
border: none;
|
|
185
|
+
box-shadow: inset 0 0 0 1px currentColor;
|
|
186
|
+
opacity: 0.8;
|
|
187
|
+
&:hover { opacity: 1; }
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* ── Ghost — no background, subtle hover (Linear-style) ── */
|
|
192
|
+
&.ghost {
|
|
193
|
+
@apply bg-transparent text-fv-neutral-600
|
|
194
|
+
hover:bg-fv-neutral-100 hover:text-fv-neutral-900
|
|
195
|
+
active:bg-fv-neutral-200
|
|
196
|
+
focus-visible:ring-fv-neutral-400
|
|
197
|
+
dark:text-fv-neutral-400
|
|
198
|
+
dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-200;
|
|
199
|
+
box-shadow: none;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* ── Backward compat aliases ── */
|
|
203
|
+
&.defaults { padding: 0.5rem 1rem; }
|
|
204
|
+
&.small { @apply text-xs; padding: 0.375rem 0.75rem; }
|
|
205
|
+
&.medium { @apply text-base; padding: 0.625rem 1.25rem; }
|
|
206
|
+
&.large { @apply text-base; padding: 0.75rem 1.5rem; }
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* ═══════════════════════════════════════
|
|
210
|
+
PAGINATION
|
|
211
|
+
═══════════════════════════════════════ */
|
|
212
|
+
|
|
213
|
+
.pagination-jump-input {
|
|
214
|
+
@apply h-7 md:h-8 text-[10px] md:text-xs font-normal text-center
|
|
215
|
+
text-fv-neutral-700 bg-white/80
|
|
216
|
+
border border-fv-neutral-300 rounded-md
|
|
217
|
+
focus:ring-2 focus:ring-fv-primary-400/40 focus:border-fv-primary-400
|
|
218
|
+
outline-none
|
|
219
|
+
dark:bg-fv-neutral-800 dark:text-fv-neutral-300
|
|
220
|
+
dark:border-fv-neutral-600
|
|
221
|
+
dark:focus:ring-fv-primary-500/40 dark:focus:border-fv-primary-500
|
|
222
|
+
transition-all;
|
|
223
|
+
appearance: textfield !important;
|
|
224
|
+
-webkit-appearance: textfield !important;
|
|
225
|
+
-moz-appearance: textfield !important;
|
|
226
|
+
padding: 0 !important;
|
|
227
|
+
}
|
|
228
|
+
.pagination-jump-input::-webkit-outer-spin-button,
|
|
229
|
+
.pagination-jump-input::-webkit-inner-spin-button {
|
|
230
|
+
-webkit-appearance: none !important;
|
|
231
|
+
margin: 0 !important;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* ═══════════════════════════════════════
|
|
235
|
+
CARDS — Vercel shadow-as-border system
|
|
236
|
+
═══════════════════════════════════════ */
|
|
237
|
+
|
|
238
|
+
.fv-card {
|
|
239
|
+
@apply bg-white dark:bg-fv-neutral-900 rounded-lg;
|
|
240
|
+
box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px,
|
|
241
|
+
rgba(0,0,0,0.04) 0px 2px 4px;
|
|
242
|
+
transition: box-shadow var(--fv-transition);
|
|
243
|
+
}
|
|
244
|
+
.fv-card:hover {
|
|
245
|
+
box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px,
|
|
246
|
+
rgba(0,0,0,0.06) 0px 4px 8px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Dark mode: luminance borders instead of shadows (Linear) */
|
|
250
|
+
:is(.dark) .fv-card {
|
|
251
|
+
box-shadow: none;
|
|
252
|
+
border: 1px solid rgba(255,255,255,0.08);
|
|
253
|
+
}
|
|
254
|
+
:is(.dark) .fv-card:hover {
|
|
255
|
+
border-color: rgba(255,255,255,0.12);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* ═══════════════════════════════════════
|
|
259
|
+
GLASS — Optional frosted glass (Framer-inspired)
|
|
260
|
+
═══════════════════════════════════════ */
|
|
261
|
+
|
|
262
|
+
.fv-glass {
|
|
263
|
+
background: rgba(255,255,255,0.7);
|
|
264
|
+
backdrop-filter: blur(24px) saturate(1.2);
|
|
265
|
+
-webkit-backdrop-filter: blur(24px) saturate(1.2);
|
|
266
|
+
border: 1px solid rgba(0,0,0,0.06);
|
|
267
|
+
}
|
|
268
|
+
:is(.dark) .fv-glass {
|
|
269
|
+
background: rgba(12,13,16,0.7);
|
|
270
|
+
border-color: rgba(255,255,255,0.06);
|
|
271
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fy-/fws-vue-tw3",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Florian 'Fy' Gasquez <m@fy.to>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"*.css"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@fy-/fws-vue-core": "^3.0
|
|
25
|
+
"@fy-/fws-vue-core": "^3.1.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"tailwindcss": ">=3.4.0 <4.0.0"
|