@fayz-ai/ui 0.10.0 → 0.10.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/styles.css +461 -0
- package/package.json +3 -3
package/dist/styles.css
ADDED
|
@@ -0,0 +1,461 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind components;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
@layer base {
|
|
6
|
+
:root {
|
|
7
|
+
/* Polaris "Sail" light — page #f1f1f1, cards #ffffff, near-black brand #303030 */
|
|
8
|
+
--primary: 0 0% 18.8%;
|
|
9
|
+
--primary-foreground: 0 0% 100%;
|
|
10
|
+
--secondary: 0 0% 96.9%;
|
|
11
|
+
--secondary-foreground: 0 0% 18.8%;
|
|
12
|
+
--accent: 0 0% 94.5%;
|
|
13
|
+
--accent-foreground: 0 0% 18.8%;
|
|
14
|
+
--background: 0 0% 94.5%;
|
|
15
|
+
--foreground: 0 0% 18.8%;
|
|
16
|
+
--card: 0 0% 100%;
|
|
17
|
+
--card-foreground: 0 0% 18.8%;
|
|
18
|
+
--muted: 0 0% 96.9%;
|
|
19
|
+
--muted-foreground: 0 0% 38%;
|
|
20
|
+
--border: 0 0% 89%;
|
|
21
|
+
--input: 0 0% 54.1%;
|
|
22
|
+
--ring: 214 100% 41.4%;
|
|
23
|
+
--popover: 0 0% 100%;
|
|
24
|
+
--popover-foreground: 0 0% 18.8%;
|
|
25
|
+
--destructive: 354 92% 41%;
|
|
26
|
+
--destructive-foreground: 0 0% 100%;
|
|
27
|
+
--success: 167 95% 25.1%;
|
|
28
|
+
--success-foreground: 0 0% 100%;
|
|
29
|
+
--warning: 43 100% 50%;
|
|
30
|
+
--warning-foreground: 0 0% 18.8%;
|
|
31
|
+
|
|
32
|
+
/* Info + Magic — Polaris semantic accents (full strength, used for icons/links) */
|
|
33
|
+
--info: 214 100% 41.4%; /* #005bd3 */
|
|
34
|
+
--info-foreground: 0 0% 100%;
|
|
35
|
+
--magic: 257 100% 65.7%; /* #8051ff */
|
|
36
|
+
--magic-foreground: 0 0% 100%;
|
|
37
|
+
|
|
38
|
+
/* Polaris soft status pairs — desaturated tints used on badges/banners */
|
|
39
|
+
--info-soft: 212 100% 95.9%; /* #ebf5ff */
|
|
40
|
+
--info-soft-foreground: 200 100% 24.3%; /* #00527c */
|
|
41
|
+
--success-soft: 126 96% 90%; /* #cdfed4 */
|
|
42
|
+
--success-soft-foreground: 153 74% 18.6%; /* #0c5132 */
|
|
43
|
+
--warning-soft: 51 100% 92.7%; /* #fff8db */
|
|
44
|
+
--warning-soft-foreground: 39 73% 31.4%; /* #8a6116 */
|
|
45
|
+
--destructive-soft: 351 91% 95.5%; /* #fee8eb */
|
|
46
|
+
--destructive-soft-foreground: 350 86% 30%; /* #8e0b21 */
|
|
47
|
+
--magic-soft: 257 100% 96.7%; /* #f3eeff */
|
|
48
|
+
--magic-soft-foreground: 256 64% 45%; /* #4f2bbb */
|
|
49
|
+
|
|
50
|
+
/* Layout surfaces — light gray sidebar with raised-white active items */
|
|
51
|
+
--sidebar: 0 0% 92.2%;
|
|
52
|
+
--sidebar-foreground: 0 0% 18.8%;
|
|
53
|
+
--sidebar-border: 0 0% 86.3%;
|
|
54
|
+
--sidebar-accent: 0 0% 100%;
|
|
55
|
+
--sidebar-accent-foreground: 0 0% 18.8%;
|
|
56
|
+
--sidebar-muted: 0 0% 38%;
|
|
57
|
+
--content: 0 0% 94.5%;
|
|
58
|
+
|
|
59
|
+
/* UI Perception Tokens */
|
|
60
|
+
--button-radius: 0.5rem;
|
|
61
|
+
--card-radius: 0.5rem;
|
|
62
|
+
--input-radius: 0.5rem;
|
|
63
|
+
--modal-radius: 1rem;
|
|
64
|
+
--font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
65
|
+
--font-family-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
|
|
66
|
+
/* Polaris hairline + a touch of bottom lift so cards visibly float on the gray page */
|
|
67
|
+
--shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(26, 26, 26, 0.06), 0 1px 2px -1px rgba(26, 26, 26, 0.06);
|
|
68
|
+
--shadow-md: 0 1px 1px -1px rgba(26, 26, 26, 0.07), 0 4px 8px -2px rgba(26, 26, 26, 0.10);
|
|
69
|
+
--shadow-lg: 0 4px 12px -2px rgba(26, 26, 26, 0.15), 0 1px 3px rgba(26, 26, 26, 0.08);
|
|
70
|
+
|
|
71
|
+
/* Polaris button bevels */
|
|
72
|
+
--shadow-button:
|
|
73
|
+
inset 0 -1px 0 rgba(0,0,0,0.10),
|
|
74
|
+
inset 0 1px 0 rgba(255,255,255,0.50),
|
|
75
|
+
0 1px 0 rgba(0,0,0,0.05);
|
|
76
|
+
--shadow-button-primary:
|
|
77
|
+
inset 0 -1px 0 rgba(0,0,0,0.20),
|
|
78
|
+
inset 0 1px 0 rgba(255,255,255,0.20),
|
|
79
|
+
0 1px 1.5px rgba(0,0,0,0.20);
|
|
80
|
+
--shadow-button-inset:
|
|
81
|
+
inset 0 2px 1px -1px rgba(0,0,0,0.20),
|
|
82
|
+
inset 0 0 0 1px rgba(0,0,0,0.05);
|
|
83
|
+
--surface-backdrop-filter: none;
|
|
84
|
+
--modal-bg: hsl(var(--card));
|
|
85
|
+
--modal-border: hsl(var(--border) / 0.5);
|
|
86
|
+
--modal-overlay-bg: rgb(0 0 0 / 0.5);
|
|
87
|
+
--modal-overlay-backdrop-filter: blur(2px);
|
|
88
|
+
--modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
89
|
+
--glass-edge-gradient: linear-gradient(hsl(var(--border)), hsl(var(--border)));
|
|
90
|
+
--glass-primary-edge-gradient: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
|
|
91
|
+
--glass-inner-highlight: inset 0 0 0 0 transparent;
|
|
92
|
+
--field-bg: hsl(var(--card));
|
|
93
|
+
--field-border: hsl(var(--input));
|
|
94
|
+
--field-shadow: inset 0 1px 0 rgb(0 0 0 / 0.06);
|
|
95
|
+
--button-bg: hsl(var(--card));
|
|
96
|
+
--button-hover-bg: hsl(var(--muted));
|
|
97
|
+
--button-border: hsl(var(--border));
|
|
98
|
+
--button-primary-bg: hsl(var(--primary));
|
|
99
|
+
--button-primary-hover-bg: hsl(var(--primary) / 0.9);
|
|
100
|
+
--button-primary-border: hsl(var(--primary));
|
|
101
|
+
--button-backdrop-filter: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.dark {
|
|
105
|
+
/* "Sail midnight" — Polaris dark */
|
|
106
|
+
--primary: 0 0% 100%;
|
|
107
|
+
--primary-foreground: 0 0% 10.2%;
|
|
108
|
+
--secondary: 0 0% 18.8%;
|
|
109
|
+
--secondary-foreground: 0 0% 89%;
|
|
110
|
+
--accent: 0 0% 22.7%;
|
|
111
|
+
--accent-foreground: 0 0% 100%;
|
|
112
|
+
--background: 0 0% 10.2%;
|
|
113
|
+
--foreground: 0 0% 89%;
|
|
114
|
+
--card: 0 0% 14.9%;
|
|
115
|
+
--card-foreground: 0 0% 89%;
|
|
116
|
+
--muted: 0 0% 18.8%;
|
|
117
|
+
--muted-foreground: 0 0% 64.7%;
|
|
118
|
+
--border: 0 0% 22.7%;
|
|
119
|
+
--input: 0 0% 32.2%;
|
|
120
|
+
--ring: 217 100% 68.4%;
|
|
121
|
+
--popover: 0 0% 18.8%;
|
|
122
|
+
--popover-foreground: 0 0% 89%;
|
|
123
|
+
--destructive: 7 100% 44.9%;
|
|
124
|
+
--destructive-foreground: 0 0% 100%;
|
|
125
|
+
--success: 156 71% 42.5%;
|
|
126
|
+
--success-foreground: 0 0% 0%;
|
|
127
|
+
--warning: 41 100% 65.1%;
|
|
128
|
+
--warning-foreground: 0 0% 10.2%;
|
|
129
|
+
|
|
130
|
+
--info: 217 100% 68.4%;
|
|
131
|
+
--info-foreground: 0 0% 10.2%;
|
|
132
|
+
--magic: 257 96% 75%;
|
|
133
|
+
--magic-foreground: 0 0% 10.2%;
|
|
134
|
+
|
|
135
|
+
/* Soft pairs invert */
|
|
136
|
+
--info-soft: 215 100% 31%; /* #00359e */
|
|
137
|
+
--info-soft-foreground: 213 100% 84.5%; /* #b3d4ff */
|
|
138
|
+
--success-soft: 153 74% 18.6%; /* #0c5132 */
|
|
139
|
+
--success-soft-foreground: 152 56% 80.5%; /* #aee9d1 */
|
|
140
|
+
--warning-soft: 31 100% 17.6%; /* #5a3500 */
|
|
141
|
+
--warning-soft-foreground: 35 100% 81%; /* #ffd79d */
|
|
142
|
+
--destructive-soft: 350 75% 17.6%; /* #4d0b1a */
|
|
143
|
+
--destructive-soft-foreground: 357 100% 92%;/* #ffd7d9 */
|
|
144
|
+
--magic-soft: 254 67% 26%; /* #2a1670 */
|
|
145
|
+
--magic-soft-foreground: 267 89% 86%; /* #d6bbfb */
|
|
146
|
+
|
|
147
|
+
/* Layout surfaces */
|
|
148
|
+
--sidebar: 0 0% 10.2%;
|
|
149
|
+
--sidebar-foreground: 0 0% 89%;
|
|
150
|
+
--sidebar-border: 0 0% 16.5%;
|
|
151
|
+
--sidebar-accent: 0 0% 18.8%;
|
|
152
|
+
--sidebar-accent-foreground: 0 0% 100%;
|
|
153
|
+
--sidebar-muted: 0 0% 64.7%;
|
|
154
|
+
--content: 0 0% 10.2%;
|
|
155
|
+
|
|
156
|
+
--shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35);
|
|
157
|
+
--shadow-md: 0 1px 1px -1px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.6);
|
|
158
|
+
--shadow-lg: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
159
|
+
|
|
160
|
+
--shadow-button:
|
|
161
|
+
inset 0 -1px 0 rgba(0,0,0,0.40),
|
|
162
|
+
inset 0 1px 0 rgba(255,255,255,0.08),
|
|
163
|
+
0 1px 0 rgba(0,0,0,0.30);
|
|
164
|
+
--shadow-button-primary:
|
|
165
|
+
inset 0 -1px 0 rgba(0,0,0,0.20),
|
|
166
|
+
inset 0 1px 0 rgba(255,255,255,0.40),
|
|
167
|
+
0 1px 1.5px rgba(0,0,0,0.40);
|
|
168
|
+
--shadow-button-inset:
|
|
169
|
+
inset 0 2px 1px -1px rgba(0,0,0,0.50),
|
|
170
|
+
inset 0 0 0 1px rgba(0,0,0,0.20);
|
|
171
|
+
--surface-backdrop-filter: none;
|
|
172
|
+
--modal-bg: hsl(var(--card));
|
|
173
|
+
--modal-border: hsl(var(--border) / 0.5);
|
|
174
|
+
--modal-overlay-bg: rgb(0 0 0 / 0.5);
|
|
175
|
+
--modal-overlay-backdrop-filter: blur(2px);
|
|
176
|
+
--modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
|
|
177
|
+
--glass-edge-gradient: linear-gradient(hsl(var(--border)), hsl(var(--border)));
|
|
178
|
+
--glass-primary-edge-gradient: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
|
|
179
|
+
--glass-inner-highlight: inset 0 0 0 0 transparent;
|
|
180
|
+
--button-bg: hsl(var(--card));
|
|
181
|
+
--button-hover-bg: hsl(var(--muted));
|
|
182
|
+
--button-border: hsl(var(--border));
|
|
183
|
+
--button-primary-bg: hsl(var(--primary));
|
|
184
|
+
--button-primary-hover-bg: hsl(var(--primary) / 0.9);
|
|
185
|
+
--button-primary-border: hsl(var(--primary));
|
|
186
|
+
--button-backdrop-filter: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
* {
|
|
190
|
+
border-color: hsl(var(--border));
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
body {
|
|
194
|
+
background-color: hsl(var(--background));
|
|
195
|
+
color: hsl(var(--foreground));
|
|
196
|
+
font-family: var(--font-family);
|
|
197
|
+
font-size: 0.8125rem; /* 13px — Polaris body default */
|
|
198
|
+
line-height: 1.25rem; /* 20px */
|
|
199
|
+
font-feature-settings: 'ss01', 'ss02', 'cv11';
|
|
200
|
+
-webkit-font-smoothing: antialiased;
|
|
201
|
+
-moz-osx-font-smoothing: grayscale;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Hide scrollbar — for horizontal tab strips and similar */
|
|
206
|
+
.scrollbar-none::-webkit-scrollbar { display: none; }
|
|
207
|
+
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
|
|
208
|
+
|
|
209
|
+
.fayz-glass-surface {
|
|
210
|
+
backdrop-filter: var(--surface-backdrop-filter);
|
|
211
|
+
-webkit-backdrop-filter: var(--surface-backdrop-filter);
|
|
212
|
+
background-clip: padding-box;
|
|
213
|
+
transform: translateZ(0);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.fayz-glass-surface.border,
|
|
217
|
+
.bg-card.border,
|
|
218
|
+
.bg-popover.border,
|
|
219
|
+
.bg-background.border,
|
|
220
|
+
.bg-primary.border,
|
|
221
|
+
.border.bg-card,
|
|
222
|
+
.border.bg-popover,
|
|
223
|
+
.border.bg-background,
|
|
224
|
+
.border.bg-primary {
|
|
225
|
+
border-color: transparent;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.fayz-glass-surface.bg-card,
|
|
229
|
+
.bg-card.fayz-glass-surface,
|
|
230
|
+
.border.bg-card,
|
|
231
|
+
.bg-card.border {
|
|
232
|
+
background:
|
|
233
|
+
linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
|
|
234
|
+
var(--glass-edge-gradient) border-box;
|
|
235
|
+
box-shadow: var(--shadow-sm), var(--glass-inner-highlight);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.fayz-glass-surface.bg-popover,
|
|
239
|
+
.bg-popover.fayz-glass-surface,
|
|
240
|
+
.border.bg-popover,
|
|
241
|
+
.bg-popover.border {
|
|
242
|
+
background:
|
|
243
|
+
linear-gradient(hsl(var(--popover)), hsl(var(--popover))) padding-box,
|
|
244
|
+
var(--glass-edge-gradient) border-box;
|
|
245
|
+
box-shadow: var(--shadow-lg), var(--glass-inner-highlight);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.bg-primary.border {
|
|
249
|
+
background:
|
|
250
|
+
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) padding-box,
|
|
251
|
+
var(--glass-primary-edge-gradient) border-box;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.bg-popover {
|
|
255
|
+
backdrop-filter: var(--surface-backdrop-filter);
|
|
256
|
+
-webkit-backdrop-filter: var(--surface-backdrop-filter);
|
|
257
|
+
background-clip: padding-box;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.fayz-modal-overlay {
|
|
261
|
+
background: var(--modal-overlay-bg);
|
|
262
|
+
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
|
263
|
+
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.fayz-modal-content {
|
|
267
|
+
background: var(--modal-bg);
|
|
268
|
+
border-color: var(--modal-border) !important;
|
|
269
|
+
box-shadow: var(--modal-shadow);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.fayz-glass-divider {
|
|
273
|
+
border-color: rgb(255 255 255 / 0.44) !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@supports (border-color: color-mix(in srgb, white 50%, transparent)) {
|
|
277
|
+
.fayz-glass-divider {
|
|
278
|
+
border-color: color-mix(in srgb, var(--modal-border) 62%, transparent) !important;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.fayz-glass-field,
|
|
283
|
+
input.bg-card,
|
|
284
|
+
textarea.bg-card,
|
|
285
|
+
select.bg-card,
|
|
286
|
+
.border-input.bg-card,
|
|
287
|
+
.bg-card.border-input,
|
|
288
|
+
.bg-background.border {
|
|
289
|
+
background: var(--field-bg);
|
|
290
|
+
border-color: var(--field-border) !important;
|
|
291
|
+
box-shadow: var(--field-shadow);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* Theme transition — applied briefly during light/dark switch */
|
|
295
|
+
.theme-transitioning,
|
|
296
|
+
.theme-transitioning *,
|
|
297
|
+
.theme-transitioning *::before,
|
|
298
|
+
.theme-transitioning *::after {
|
|
299
|
+
transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease,
|
|
300
|
+
box-shadow 400ms ease, fill 400ms ease, stroke 400ms ease !important;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Animation keyframes for Radix UI components */
|
|
304
|
+
@keyframes enter {
|
|
305
|
+
from {
|
|
306
|
+
opacity: var(--tw-enter-opacity, 1);
|
|
307
|
+
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
308
|
+
scale(var(--tw-enter-scale, 1));
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@keyframes exit {
|
|
313
|
+
to {
|
|
314
|
+
opacity: var(--tw-exit-opacity, 1);
|
|
315
|
+
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
316
|
+
scale(var(--tw-exit-scale, 1));
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Page transition */
|
|
321
|
+
@keyframes page-enter {
|
|
322
|
+
from { opacity: 0; transform: translateY(var(--saas-page-enter-offset)); }
|
|
323
|
+
to { opacity: 1; transform: translateY(0); }
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* Radix animation utilities (replaces tailwindcss-animate plugin) */
|
|
327
|
+
.animate-in {
|
|
328
|
+
animation-name: enter;
|
|
329
|
+
animation-duration: 200ms;
|
|
330
|
+
animation-timing-function: ease-out;
|
|
331
|
+
animation-fill-mode: both;
|
|
332
|
+
}
|
|
333
|
+
.animate-out {
|
|
334
|
+
animation-name: exit;
|
|
335
|
+
animation-duration: 150ms;
|
|
336
|
+
animation-timing-function: ease-in;
|
|
337
|
+
animation-fill-mode: both;
|
|
338
|
+
}
|
|
339
|
+
.fade-in-0 { --tw-enter-opacity: 0; }
|
|
340
|
+
.fade-out-0 { --tw-exit-opacity: 0; }
|
|
341
|
+
.zoom-in-95 { --tw-enter-scale: 0.95; }
|
|
342
|
+
.zoom-out-95 { --tw-exit-scale: 0.95; }
|
|
343
|
+
.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
|
|
344
|
+
.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
|
|
345
|
+
.slide-in-from-bottom-4 { --tw-enter-translate-y: 1rem; }
|
|
346
|
+
.slide-in-from-left-1\/2 { --tw-enter-translate-x: -50%; }
|
|
347
|
+
.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
|
|
348
|
+
.slide-in-from-top-\[48\%\] { --tw-enter-translate-y: -48%; }
|
|
349
|
+
.slide-out-to-left-1\/2 { --tw-exit-translate-x: -50%; }
|
|
350
|
+
.slide-out-to-top-\[48\%\] { --tw-exit-translate-y: -48%; }
|
|
351
|
+
.slide-out-to-top-2 { --tw-exit-translate-y: -0.5rem; }
|
|
352
|
+
.duration-200 { animation-duration: 200ms; }
|
|
353
|
+
.duration-300 { animation-duration: 300ms; }
|
|
354
|
+
|
|
355
|
+
/* Modal & overlay animations */
|
|
356
|
+
.saas-mdl-ov[data-state="open"] { animation: saas-mdl-ov-in 200ms ease-out both; }
|
|
357
|
+
.saas-mdl-ov[data-state="closed"] { animation: saas-mdl-ov-out 150ms ease-in both; }
|
|
358
|
+
.saas-mdl-ct[data-state="open"] { animation: saas-mdl-ct-in 250ms cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
359
|
+
.saas-mdl-ct[data-state="closed"] { animation: saas-mdl-ct-out 180ms ease-in both; }
|
|
360
|
+
|
|
361
|
+
@keyframes saas-mdl-ov-in { from { opacity: 0; } to { opacity: 1; } }
|
|
362
|
+
@keyframes saas-mdl-ov-out { from { opacity: 1; } to { opacity: 0; } }
|
|
363
|
+
@keyframes saas-mdl-ct-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
|
364
|
+
@keyframes saas-mdl-ct-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } }
|
|
365
|
+
|
|
366
|
+
/* Page transition tokens */
|
|
367
|
+
:root {
|
|
368
|
+
--saas-transition-duration: 200ms;
|
|
369
|
+
--saas-transition-easing: ease-out;
|
|
370
|
+
--saas-page-enter-duration: 250ms;
|
|
371
|
+
--saas-page-enter-offset: 4px;
|
|
372
|
+
--saas-nav-slide-offset: 12px;
|
|
373
|
+
--saas-rail-duration: 260ms;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/* Page content transition */
|
|
377
|
+
.saas-page-enter {
|
|
378
|
+
animation: page-enter var(--saas-page-enter-duration) var(--saas-transition-easing) both;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* Mobile drawer animation */
|
|
382
|
+
.saas-drawer[data-state="open"] {
|
|
383
|
+
animation: saas-drawer-in 250ms ease-out both;
|
|
384
|
+
}
|
|
385
|
+
.saas-drawer[data-state="closed"] {
|
|
386
|
+
animation: saas-drawer-out 200ms ease-in both;
|
|
387
|
+
}
|
|
388
|
+
@keyframes saas-drawer-in {
|
|
389
|
+
from { opacity: 0; transform: translateX(-100%); }
|
|
390
|
+
to { opacity: 1; transform: translateX(0); }
|
|
391
|
+
}
|
|
392
|
+
@keyframes saas-drawer-out {
|
|
393
|
+
from { opacity: 1; transform: translateX(0); }
|
|
394
|
+
to { opacity: 0; transform: translateX(-100%); }
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* Command palette animation */
|
|
398
|
+
.saas-cmd-palette[data-state="open"] {
|
|
399
|
+
animation: saas-cmd-in 200ms ease-out both;
|
|
400
|
+
}
|
|
401
|
+
.saas-cmd-palette[data-state="closed"] {
|
|
402
|
+
animation: saas-cmd-out 150ms ease-in both;
|
|
403
|
+
}
|
|
404
|
+
@keyframes saas-cmd-in {
|
|
405
|
+
from { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-8px); }
|
|
406
|
+
to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
|
|
407
|
+
}
|
|
408
|
+
@keyframes saas-cmd-out {
|
|
409
|
+
from { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
|
|
410
|
+
to { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-8px); }
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Navigation transitions */
|
|
414
|
+
.saas-nav-forward {
|
|
415
|
+
animation: saas-slide-forward var(--saas-transition-duration) var(--saas-transition-easing) both;
|
|
416
|
+
}
|
|
417
|
+
.saas-nav-back {
|
|
418
|
+
animation: saas-slide-back var(--saas-transition-duration) var(--saas-transition-easing) both;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
@keyframes saas-slide-forward {
|
|
422
|
+
from { opacity: 0; transform: translateX(var(--saas-nav-slide-offset)); }
|
|
423
|
+
to { opacity: 1; transform: translateX(0); }
|
|
424
|
+
}
|
|
425
|
+
@keyframes saas-slide-back {
|
|
426
|
+
from { opacity: 0; transform: translateX(calc(-1 * var(--saas-nav-slide-offset))); }
|
|
427
|
+
to { opacity: 1; transform: translateX(0); }
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
/* Sidebar rail push — when the whole left menu swaps context (e.g. app nav →
|
|
431
|
+
settings nav) the incoming rail pulls in from one side while the outgoing
|
|
432
|
+
one slides off the other, iOS-push style. The outgoing pane is absolutely
|
|
433
|
+
positioned over the incoming one for the duration of the animation. */
|
|
434
|
+
.saas-rail-in-forward { animation: saas-rail-in-forward var(--saas-rail-duration) var(--saas-transition-easing) both; }
|
|
435
|
+
.saas-rail-out-forward { animation: saas-rail-out-forward var(--saas-rail-duration) var(--saas-transition-easing) both; }
|
|
436
|
+
.saas-rail-in-back { animation: saas-rail-in-back var(--saas-rail-duration) var(--saas-transition-easing) both; }
|
|
437
|
+
.saas-rail-out-back { animation: saas-rail-out-back var(--saas-rail-duration) var(--saas-transition-easing) both; }
|
|
438
|
+
|
|
439
|
+
@keyframes saas-rail-in-forward {
|
|
440
|
+
from { opacity: 0; transform: translateX(100%); }
|
|
441
|
+
to { opacity: 1; transform: translateX(0); }
|
|
442
|
+
}
|
|
443
|
+
@keyframes saas-rail-out-forward {
|
|
444
|
+
from { opacity: 1; transform: translateX(0); }
|
|
445
|
+
to { opacity: 0; transform: translateX(-35%); }
|
|
446
|
+
}
|
|
447
|
+
@keyframes saas-rail-in-back {
|
|
448
|
+
from { opacity: 0; transform: translateX(-100%); }
|
|
449
|
+
to { opacity: 1; transform: translateX(0); }
|
|
450
|
+
}
|
|
451
|
+
@keyframes saas-rail-out-back {
|
|
452
|
+
from { opacity: 1; transform: translateX(0); }
|
|
453
|
+
to { opacity: 0; transform: translateX(35%); }
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
@media (prefers-reduced-motion: reduce) {
|
|
457
|
+
.saas-rail-in-forward, .saas-rail-out-forward,
|
|
458
|
+
.saas-rail-in-back, .saas-rail-out-back {
|
|
459
|
+
animation-duration: 1ms;
|
|
460
|
+
}
|
|
461
|
+
}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"fayz": {
|
|
4
4
|
"status": "beta"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.10.
|
|
6
|
+
"version": "0.10.1",
|
|
7
7
|
"description": "Fayz SDK UI — Radix + Tailwind component library with CRUD engine and layout shells",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"sideEffects": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"types": "./dist/icons.d.ts",
|
|
38
38
|
"import": "./dist/icons.js"
|
|
39
39
|
},
|
|
40
|
-
"./styles.css": "./
|
|
40
|
+
"./styles.css": "./dist/styles.css",
|
|
41
41
|
"./preset": {
|
|
42
42
|
"types": "./dist/theme/preset.d.ts",
|
|
43
43
|
"import": "./dist/preset.js",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"access": "public"
|
|
97
97
|
},
|
|
98
98
|
"scripts": {
|
|
99
|
-
"build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
|
|
99
|
+
"build": "tsup && mkdir -p dist && cp src/styles.css dist/styles.css && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
|
|
100
100
|
"dev": "tsup --watch",
|
|
101
101
|
"typecheck": "tsc --noEmit",
|
|
102
102
|
"clean": "rm -rf dist"
|