@tac-ui/web 0.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/icons.d.mts +1 -0
- package/dist/icons.d.ts +1 -0
- package/dist/icons.js +12 -0
- package/dist/icons.mjs +1 -0
- package/dist/index.d.mts +1503 -0
- package/dist/index.d.ts +1503 -0
- package/dist/index.js +5934 -0
- package/dist/index.mjs +5783 -0
- package/dist/tailwind/preset.d.mts +603 -0
- package/dist/tailwind/preset.d.ts +603 -0
- package/dist/tailwind/preset.js +396 -0
- package/dist/tailwind/preset.mjs +393 -0
- package/package.json +67 -0
|
@@ -0,0 +1,396 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var web = require('@tac-ui/tokens/web');
|
|
4
|
+
var tokens = require('@tac-ui/tokens');
|
|
5
|
+
|
|
6
|
+
// src/tailwind/preset.ts
|
|
7
|
+
function generateThemeCSS() {
|
|
8
|
+
return `@layer base {
|
|
9
|
+
:root, [data-theme="light"] {
|
|
10
|
+
${web.generateCSSBlock("light")}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
[data-theme="dark"] {
|
|
14
|
+
${web.generateCSSBlock("dark")}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root:not([data-theme="light"]) {
|
|
19
|
+
${web.generateCSSBlock("dark")}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@layer base {
|
|
25
|
+
* {
|
|
26
|
+
border-color: var(--border);
|
|
27
|
+
}
|
|
28
|
+
*:not([data-no-bg-transition]) {
|
|
29
|
+
transition-property: background-color, color, border-color, box-shadow;
|
|
30
|
+
transition-duration: var(--duration-normal);
|
|
31
|
+
transition-timing-function: var(--ease-standard);
|
|
32
|
+
}
|
|
33
|
+
body {
|
|
34
|
+
background-color: var(--background);
|
|
35
|
+
color: var(--foreground);
|
|
36
|
+
font-family: var(--font-primary), system-ui, sans-serif;
|
|
37
|
+
-webkit-font-smoothing: antialiased;
|
|
38
|
+
-moz-osx-font-smoothing: grayscale;
|
|
39
|
+
text-rendering: optimizeLegibility;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes indicator-slide {
|
|
44
|
+
0% { transform: translateX(-100%); }
|
|
45
|
+
100% { transform: translateX(250%); }
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@keyframes snackbar-in {
|
|
49
|
+
from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
|
|
50
|
+
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@keyframes snackbar-out {
|
|
54
|
+
from { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
55
|
+
to { opacity: 0; transform: translateY(10px); filter: blur(2px); }
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes fade-in {
|
|
59
|
+
from { opacity: 0; }
|
|
60
|
+
to { opacity: 1; }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes dialog-in {
|
|
64
|
+
from { opacity: 0; transform: scale(0.95); filter: blur(4px); }
|
|
65
|
+
to { opacity: 1; transform: scale(1); filter: blur(0px); }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes scale-in {
|
|
69
|
+
from { opacity: 0; transform: scale(0.95) translateY(4px); filter: blur(2px); }
|
|
70
|
+
to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); }
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes toast-in {
|
|
74
|
+
from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
|
|
75
|
+
to { opacity: 1; transform: translateY(0); filter: blur(0px); }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes toast-out {
|
|
79
|
+
from { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
80
|
+
to { opacity: 0; transform: translateY(8px); filter: blur(2px); }
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@keyframes drawer-left-in {
|
|
84
|
+
from { transform: translateX(-100%); }
|
|
85
|
+
to { transform: translateX(0); }
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@keyframes drawer-right-in {
|
|
89
|
+
from { transform: translateX(100%); }
|
|
90
|
+
to { transform: translateX(0); }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@keyframes drawer-top-in {
|
|
94
|
+
from { transform: translateY(-100%); }
|
|
95
|
+
to { transform: translateY(0); }
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes drawer-bottom-in {
|
|
99
|
+
from { transform: translateY(100%); }
|
|
100
|
+
to { transform: translateY(0); }
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@keyframes btn-shine {
|
|
104
|
+
0% { transform: translateX(-100%) skewX(-15deg); }
|
|
105
|
+
100% { transform: translateX(200%) skewX(-15deg); }
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes shimmer {
|
|
109
|
+
0% { transform: translateX(-100%); }
|
|
110
|
+
100% { transform: translateX(200%); }
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-reduced-motion: reduce) {
|
|
114
|
+
*, *::before, *::after {
|
|
115
|
+
animation-duration: 0.01ms !important;
|
|
116
|
+
animation-iteration-count: 1 !important;
|
|
117
|
+
transition-duration: 0.01ms !important;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
${web.generateKeyframes()}`;
|
|
122
|
+
}
|
|
123
|
+
var tacPreset = {
|
|
124
|
+
theme: {
|
|
125
|
+
extend: {
|
|
126
|
+
colors: {
|
|
127
|
+
background: "var(--background)",
|
|
128
|
+
"background-subtle": "var(--background-subtle)",
|
|
129
|
+
foreground: "var(--foreground)",
|
|
130
|
+
surface: { DEFAULT: "var(--surface)", hover: "var(--surface-hover)" },
|
|
131
|
+
primary: { DEFAULT: "var(--primary)", hover: "var(--primary-hover)", foreground: "var(--primary-foreground)" },
|
|
132
|
+
secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
|
|
133
|
+
muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
|
|
134
|
+
card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
|
|
135
|
+
border: "var(--border)",
|
|
136
|
+
input: "var(--input)",
|
|
137
|
+
ring: "var(--ring)",
|
|
138
|
+
point: { DEFAULT: "var(--point)", hover: "var(--point-hover)", foreground: "var(--point-foreground)", subtle: "var(--point-subtle)" },
|
|
139
|
+
success: { DEFAULT: "var(--success)", bg: "var(--success-bg)", foreground: "var(--success-foreground)" },
|
|
140
|
+
warning: { DEFAULT: "var(--warning)", bg: "var(--warning-bg)", foreground: "var(--warning-foreground)" },
|
|
141
|
+
error: { DEFAULT: "var(--error)", bg: "var(--error-bg)", foreground: "var(--error-foreground)" },
|
|
142
|
+
info: { DEFAULT: "var(--info)", bg: "var(--info-bg)", foreground: "var(--info-foreground)" },
|
|
143
|
+
gray: { 50: "var(--gray-50)", 100: "var(--gray-100)", 200: "var(--gray-200)", 300: "var(--gray-300)", 400: "var(--gray-400)", 500: "var(--gray-500)", 600: "var(--gray-600)", 700: "var(--gray-700)", 800: "var(--gray-800)", 900: "var(--gray-900)" },
|
|
144
|
+
chart: { 1: "var(--chart-1)", 2: "var(--chart-2)", 3: "var(--chart-3)", 4: "var(--chart-4)", 5: "var(--chart-5)", 6: "var(--chart-6)", 7: "var(--chart-7)", 8: "var(--chart-8)" },
|
|
145
|
+
"surface-base": "var(--surface-base)",
|
|
146
|
+
"surface-elevated-low": "var(--surface-elevated-low)",
|
|
147
|
+
"surface-elevated-mid": "var(--surface-elevated-mid)",
|
|
148
|
+
"surface-elevated-high": "var(--surface-elevated-high)",
|
|
149
|
+
"interactive-hover": "var(--interactive-hover)",
|
|
150
|
+
"interactive-pressed": "var(--interactive-pressed)",
|
|
151
|
+
"interactive-focus": "var(--interactive-focus)",
|
|
152
|
+
// Button tokens
|
|
153
|
+
"btn-primary": { surface: "var(--btn-primary-surface)", hover: "var(--btn-primary-hover)" },
|
|
154
|
+
"btn-secondary": { surface: "var(--btn-secondary-surface)", hover: "var(--btn-secondary-hover)" },
|
|
155
|
+
"btn-outline": { border: "var(--btn-outline-border)", "border-hover": "var(--btn-outline-border-hover)", "hover-bg": "var(--btn-outline-hover-bg)" },
|
|
156
|
+
"btn-ghost-hover": "var(--btn-ghost-hover)",
|
|
157
|
+
"btn-point": { surface: "var(--btn-point-surface)", border: "var(--btn-point-border)", "hover-surface": "var(--btn-point-hover-surface)", "hover-border": "var(--btn-point-hover-border)" },
|
|
158
|
+
"btn-destructive": { surface: "var(--btn-destructive-surface)", hover: "var(--btn-destructive-hover)" },
|
|
159
|
+
// Interactive tokens
|
|
160
|
+
"interactive-surface-tint": "var(--interactive-surface-tint)",
|
|
161
|
+
"interactive-hover-tint": "var(--interactive-hover-tint)",
|
|
162
|
+
// Input tokens
|
|
163
|
+
"input-bg": "var(--input-bg)",
|
|
164
|
+
"input-border-rest": "var(--input-border-rest)",
|
|
165
|
+
"input-border-hover": "var(--input-border-hover)",
|
|
166
|
+
// Dropdown tokens
|
|
167
|
+
"dropdown-bg": "var(--dropdown-bg)",
|
|
168
|
+
"dropdown-item-hover": "var(--dropdown-item-hover)",
|
|
169
|
+
// Card accent tokens
|
|
170
|
+
"card-accent": { border: "var(--card-accent-border)", "hover-border": "var(--card-accent-hover-border)" }
|
|
171
|
+
},
|
|
172
|
+
spacing: { "2xs": "var(--spacing-2xs)", xs: "var(--spacing-xs)", sm: "var(--spacing-sm)", m: "var(--spacing-m)", lg: "var(--spacing-lg)", xl: "var(--spacing-xl)", "2xl": "var(--spacing-2xl)", "3xl": "var(--spacing-3xl)" },
|
|
173
|
+
borderRadius: { none: "var(--radius-none)", xs: "var(--radius-xs)", sm: "var(--radius-sm)", m: "var(--radius-m)", lg: "var(--radius-lg)", xl: "var(--radius-xl)", "2xl": "var(--radius-2xl)", pill: "var(--radius-pill)" },
|
|
174
|
+
boxShadow: { sm: "var(--shadow-sm)", m: "var(--shadow-m)", lg: "var(--shadow-lg)", xl: "var(--shadow-xl)", glow: "var(--accent-glow)", glass: "var(--shadow-glass)", "glass-lg": "var(--shadow-glass-lg)", "gradient-glow": "var(--gradient-glow-shadow)", "focus-glow": "var(--focus-glow)", "point-glow": "var(--point-glow)", "btn-primary-energy": "var(--btn-primary-energy)", "btn-primary-inset": "var(--btn-primary-inset)", "btn-point-energy": "var(--btn-point-energy)", "glass-inset": "var(--glass-inset)", "glass-panel": "var(--glass-panel-shadow)", "input-focus-glow": "var(--input-focus-glow)", "dropdown-shadow": "var(--dropdown-shadow)", "card-accent-glow": "var(--card-accent-glow)", "card-accent-hover-glow": "var(--card-accent-hover-glow)" },
|
|
175
|
+
backgroundImage: {
|
|
176
|
+
"gradient-brand": "var(--gradient-brand)",
|
|
177
|
+
"gradient-brand-hover": "var(--gradient-brand-hover)",
|
|
178
|
+
"gradient-subtle": "var(--gradient-subtle)",
|
|
179
|
+
"gradient-accent": "var(--gradient-accent)",
|
|
180
|
+
"gradient-accent-vivid": "var(--gradient-accent-vivid)",
|
|
181
|
+
"gradient-glow": "var(--gradient-glow)",
|
|
182
|
+
"gradient-mesh": "var(--gradient-mesh)",
|
|
183
|
+
"gradient-surface": "var(--gradient-surface)"
|
|
184
|
+
},
|
|
185
|
+
fontFamily: { primary: ["var(--font-primary)", "system-ui", "sans-serif"], secondary: ["var(--font-secondary)", "system-ui", "sans-serif"], display: ["var(--font-display)", "var(--font-primary)", "sans-serif"] },
|
|
186
|
+
transitionDuration: { instant: "var(--duration-instant)", fast: "var(--duration-fast)", normal: "var(--duration-normal)", slow: "var(--duration-slow)", complex: "var(--duration-complex)" },
|
|
187
|
+
transitionTimingFunction: { standard: "var(--ease-standard)", "ease-in": "var(--ease-in)", "ease-out": "var(--ease-out)", "ease-in-out": "var(--ease-in-out)", bounce: "var(--ease-bounce)", spring: "var(--ease-spring)", elastic: "var(--ease-elastic)" },
|
|
188
|
+
screens: { sm: `${tokens.breakpoints.sm}px`, md: `${tokens.breakpoints.md}px`, lg: `${tokens.breakpoints.lg}px`, xl: `${tokens.breakpoints.xl}px`, "2xl": `${tokens.breakpoints["2xl"]}px` },
|
|
189
|
+
containers: { sm: `${tokens.containers.sm}px`, md: `${tokens.containers.md}px`, lg: `${tokens.containers.lg}px`, xl: `${tokens.containers.xl}px` },
|
|
190
|
+
zIndex: { dropdown: "var(--z-dropdown)", sticky: "var(--z-sticky)", overlay: "var(--z-overlay)", modal: "var(--z-modal)", popover: "var(--z-popover)", tooltip: "var(--z-tooltip)", toast: "var(--z-toast)" },
|
|
191
|
+
keyframes: {
|
|
192
|
+
"indicator-slide": {
|
|
193
|
+
"0%": { transform: "translateX(-100%)" },
|
|
194
|
+
"100%": { transform: "translateX(250%)" }
|
|
195
|
+
},
|
|
196
|
+
"snackbar-in": {
|
|
197
|
+
from: { opacity: "0", transform: "translateY(16px)", filter: "blur(4px)" },
|
|
198
|
+
to: { opacity: "1", transform: "translateY(0)", filter: "blur(0)" }
|
|
199
|
+
},
|
|
200
|
+
"snackbar-out": {
|
|
201
|
+
from: { opacity: "1", transform: "translateY(0)", filter: "blur(0)" },
|
|
202
|
+
to: { opacity: "0", transform: "translateY(10px)", filter: "blur(2px)" }
|
|
203
|
+
},
|
|
204
|
+
"fade-in": {
|
|
205
|
+
from: { opacity: "0" },
|
|
206
|
+
to: { opacity: "1" }
|
|
207
|
+
},
|
|
208
|
+
"dialog-in": {
|
|
209
|
+
from: { opacity: "0", transform: "scale(0.95)", filter: "blur(4px)" },
|
|
210
|
+
to: { opacity: "1", transform: "scale(1)", filter: "blur(0px)" }
|
|
211
|
+
},
|
|
212
|
+
"scale-in": {
|
|
213
|
+
from: { opacity: "0", transform: "scale(0.95) translateY(4px)", filter: "blur(2px)" },
|
|
214
|
+
to: { opacity: "1", transform: "scale(1) translateY(0)", filter: "blur(0px)" }
|
|
215
|
+
},
|
|
216
|
+
"toast-in": {
|
|
217
|
+
from: { opacity: "0", transform: "translateY(12px)", filter: "blur(4px)" },
|
|
218
|
+
to: { opacity: "1", transform: "translateY(0)", filter: "blur(0px)" }
|
|
219
|
+
},
|
|
220
|
+
"toast-out": {
|
|
221
|
+
from: { opacity: "1", transform: "translateY(0)", filter: "blur(0)" },
|
|
222
|
+
to: { opacity: "0", transform: "translateY(8px)", filter: "blur(2px)" }
|
|
223
|
+
},
|
|
224
|
+
"drawer-left-in": {
|
|
225
|
+
from: { transform: "translateX(-100%)" },
|
|
226
|
+
to: { transform: "translateX(0)" }
|
|
227
|
+
},
|
|
228
|
+
"drawer-right-in": {
|
|
229
|
+
from: { transform: "translateX(100%)" },
|
|
230
|
+
to: { transform: "translateX(0)" }
|
|
231
|
+
},
|
|
232
|
+
"drawer-top-in": {
|
|
233
|
+
from: { transform: "translateY(-100%)" },
|
|
234
|
+
to: { transform: "translateY(0)" }
|
|
235
|
+
},
|
|
236
|
+
"drawer-bottom-in": {
|
|
237
|
+
from: { transform: "translateY(100%)" },
|
|
238
|
+
to: { transform: "translateY(0)" }
|
|
239
|
+
},
|
|
240
|
+
// Dia-inspired organic spring — blur entrance animations
|
|
241
|
+
"blur-fade-in": {
|
|
242
|
+
from: { opacity: "0", filter: "blur(8px)", transform: "translateY(8px)" },
|
|
243
|
+
to: { opacity: "1", filter: "blur(0px)", transform: "translateY(0)" }
|
|
244
|
+
},
|
|
245
|
+
"blur-scale-in": {
|
|
246
|
+
from: { opacity: "0", filter: "blur(6px)", transform: "scale(0.95)" },
|
|
247
|
+
to: { opacity: "1", filter: "blur(0px)", transform: "scale(1)" }
|
|
248
|
+
},
|
|
249
|
+
// Elastic micro-interactions — spring overshoot with physical mass
|
|
250
|
+
"elastic-press": {
|
|
251
|
+
"0%": { transform: "scale(1)" },
|
|
252
|
+
"50%": { transform: "scale(0.96)" },
|
|
253
|
+
"100%": { transform: "scale(0.96)" }
|
|
254
|
+
},
|
|
255
|
+
"elastic-release": {
|
|
256
|
+
"0%": { transform: "scale(0.96)" },
|
|
257
|
+
"50%": { transform: "scale(1.01)" },
|
|
258
|
+
"100%": { transform: "scale(1)" }
|
|
259
|
+
},
|
|
260
|
+
// Spotlight pulse
|
|
261
|
+
"spotlight-pulse": {
|
|
262
|
+
"0%, 100%": { opacity: "0" },
|
|
263
|
+
"50%": { opacity: "1" }
|
|
264
|
+
},
|
|
265
|
+
// Float animation
|
|
266
|
+
float: {
|
|
267
|
+
"0%, 100%": { transform: "translateY(0)" },
|
|
268
|
+
"50%": { transform: "translateY(-6px)" }
|
|
269
|
+
},
|
|
270
|
+
// Motion token presets
|
|
271
|
+
"fade-in-preset": {
|
|
272
|
+
from: { opacity: "0" },
|
|
273
|
+
to: { opacity: "1" }
|
|
274
|
+
},
|
|
275
|
+
"fade-out": {
|
|
276
|
+
from: { opacity: "1" },
|
|
277
|
+
to: { opacity: "0" }
|
|
278
|
+
},
|
|
279
|
+
"slide-in-up": {
|
|
280
|
+
from: { opacity: "0", transform: "translateY(8px)" },
|
|
281
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
282
|
+
},
|
|
283
|
+
"slide-in-down": {
|
|
284
|
+
from: { opacity: "0", transform: "translateY(-8px)" },
|
|
285
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
286
|
+
},
|
|
287
|
+
"slide-in-left": {
|
|
288
|
+
from: { opacity: "0", transform: "translateX(-8px)" },
|
|
289
|
+
to: { opacity: "1", transform: "translateX(0)" }
|
|
290
|
+
},
|
|
291
|
+
"slide-in-right": {
|
|
292
|
+
from: { opacity: "0", transform: "translateX(8px)" },
|
|
293
|
+
to: { opacity: "1", transform: "translateX(0)" }
|
|
294
|
+
},
|
|
295
|
+
"zoom-in": {
|
|
296
|
+
from: { opacity: "0", transform: "scale(0.85)" },
|
|
297
|
+
to: { opacity: "1", transform: "scale(1)" }
|
|
298
|
+
},
|
|
299
|
+
"press-down": {
|
|
300
|
+
from: { transform: "scale(1)" },
|
|
301
|
+
to: { transform: "scale(0.97)" }
|
|
302
|
+
},
|
|
303
|
+
"lift-up": {
|
|
304
|
+
from: { transform: "translateY(0)" },
|
|
305
|
+
to: { transform: "translateY(-2px)" }
|
|
306
|
+
},
|
|
307
|
+
"gradient-shimmer": {
|
|
308
|
+
"0%": { backgroundPosition: "0% 50%" },
|
|
309
|
+
"50%": { backgroundPosition: "100% 50%" },
|
|
310
|
+
"100%": { backgroundPosition: "0% 50%" }
|
|
311
|
+
},
|
|
312
|
+
shimmer: {
|
|
313
|
+
"0%": { transform: "translateX(-100%)" },
|
|
314
|
+
"100%": { transform: "translateX(200%)" }
|
|
315
|
+
},
|
|
316
|
+
"shimmer-flow": {
|
|
317
|
+
"0%": { transform: "translateX(-100%) scale(2) rotate(20deg)" },
|
|
318
|
+
"100%": { transform: "translateX(200%) scale(2) rotate(20deg)" }
|
|
319
|
+
},
|
|
320
|
+
spin: {
|
|
321
|
+
from: { transform: "rotate(0deg)" },
|
|
322
|
+
to: { transform: "rotate(360deg)" }
|
|
323
|
+
},
|
|
324
|
+
pulse: {
|
|
325
|
+
"0%, 100%": { opacity: "1" },
|
|
326
|
+
"50%": { opacity: "0.5" }
|
|
327
|
+
},
|
|
328
|
+
bounce: {
|
|
329
|
+
"0%, 100%": { transform: "translateY(0)" },
|
|
330
|
+
"50%": { transform: "translateY(-4px)" }
|
|
331
|
+
},
|
|
332
|
+
"spring-press": {
|
|
333
|
+
"0%": { transform: "scale(1)" },
|
|
334
|
+
"50%": { transform: "scale(0.95)" },
|
|
335
|
+
"100%": { transform: "scale(1)" }
|
|
336
|
+
},
|
|
337
|
+
"spring-hover": {
|
|
338
|
+
"0%": { transform: "scale(1)" },
|
|
339
|
+
"100%": { transform: "scale(1.02)" }
|
|
340
|
+
},
|
|
341
|
+
"btn-shine": {
|
|
342
|
+
"0%": { transform: "translateX(-100%) skewX(-15deg)" },
|
|
343
|
+
"100%": { transform: "translateX(200%) skewX(-15deg)" }
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
animation: {
|
|
347
|
+
"indicator-slide": "indicator-slide 1.5s linear infinite",
|
|
348
|
+
// Dia-inspired organic spring — snackbar enters with blur and momentum + overshoot
|
|
349
|
+
"snackbar-in": "snackbar-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
350
|
+
"snackbar-out": "snackbar-out 0.2s cubic-bezier(0.55, 0, 1, 0.45) forwards",
|
|
351
|
+
// Fade is simple — spring easing still adds organic deceleration
|
|
352
|
+
"fade-in": "fade-in 0.2s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
353
|
+
// Dialog inflates from behind with blur — Dia overlay feel
|
|
354
|
+
"dialog-in": "dialog-in 0.3s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
355
|
+
// Popovers spring up with scale + slight overshoot
|
|
356
|
+
"scale-in": "scale-in 0.22s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
357
|
+
// Toast rises from below with blur + overshoot spring
|
|
358
|
+
"toast-in": "toast-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
359
|
+
"toast-out": "toast-out 0.2s cubic-bezier(0.55, 0, 1, 0.45) forwards",
|
|
360
|
+
// Drawers slide with spring overshoot for physical momentum
|
|
361
|
+
"drawer-left-in": "drawer-left-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
362
|
+
"drawer-right-in": "drawer-right-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
363
|
+
"drawer-top-in": "drawer-top-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
364
|
+
"drawer-bottom-in": "drawer-bottom-in 0.35s cubic-bezier(0.22, 1.1, 0.36, 1)",
|
|
365
|
+
"slide-in-up": "slide-in-up 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
366
|
+
"slide-in-down": "slide-in-down 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
367
|
+
"slide-in-left": "slide-in-left 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
368
|
+
"slide-in-right": "slide-in-right 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
369
|
+
"fade-out": "fade-out 0.15s cubic-bezier(0.55, 0, 1, 0.45)",
|
|
370
|
+
"zoom-in": "zoom-in 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
371
|
+
"press-down": "press-down 0.08s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
372
|
+
"lift-up": "lift-up 0.15s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
373
|
+
shimmer: "shimmer 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
374
|
+
"shimmer-flow": "shimmer-flow 3s linear infinite",
|
|
375
|
+
spin: "spin 1s linear infinite",
|
|
376
|
+
pulse: "pulse 2s ease-in-out infinite",
|
|
377
|
+
bounce: "bounce 1s ease-in-out infinite",
|
|
378
|
+
"gradient-shimmer": "gradient-shimmer 3s ease-in-out infinite",
|
|
379
|
+
// Dia-style page-level entrances — blur resolves as element springs into place
|
|
380
|
+
"blur-fade-in": "blur-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both",
|
|
381
|
+
"blur-scale-in": "blur-scale-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both",
|
|
382
|
+
// Spring press/release — elastic overshoot gives physical life to interactions
|
|
383
|
+
"elastic-press": "elastic-press 0.2s cubic-bezier(0.22, 1.2, 0.36, 1) forwards",
|
|
384
|
+
"elastic-release": "elastic-release 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) forwards",
|
|
385
|
+
"spotlight-pulse": "spotlight-pulse 3s ease-in-out infinite",
|
|
386
|
+
float: "float 3s ease-in-out infinite",
|
|
387
|
+
"spring-press": "spring-press 0.3s cubic-bezier(0.22, 1.2, 0.36, 1) forwards",
|
|
388
|
+
"spring-hover": "spring-hover 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards",
|
|
389
|
+
"btn-shine": "btn-shine 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
exports.generateThemeCSS = generateThemeCSS;
|
|
396
|
+
exports.tacPreset = tacPreset;
|