@7onic-ui/tokens 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/cli/sync.js +2533 -0
- package/css/all.css +6 -0
- package/css/themes/dark.css +300 -0
- package/css/themes/light.css +142 -0
- package/css/variables.css +924 -0
- package/figma-tokens.json +2404 -0
- package/js/index.js +763 -0
- package/js/index.mjs +762 -0
- package/json/tokens.json +447 -0
- package/package.json +63 -0
- package/tailwind/v3-preset.js +701 -0
- package/tailwind/v4-theme.css +879 -0
- package/tailwind/v4.css +7 -0
- package/types/index.d.ts +200 -0
|
@@ -0,0 +1,701 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design System - Tailwind CSS v3 Preset
|
|
3
|
+
* ⚠️ Auto-generated from figma-tokens.json — DO NOT EDIT
|
|
4
|
+
*
|
|
5
|
+
* Non-color values reference CSS variables from variables.css for auto-sync.
|
|
6
|
+
* Primitive colors use HEX for Tailwind v3 opacity modifier support (bg-white/10, etc.).
|
|
7
|
+
* Semantic colors use rgb() with RGB channel variables for opacity modifier support (bg-primary/50, etc.).
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* ```js
|
|
11
|
+
* // tailwind.config.js
|
|
12
|
+
* module.exports = {
|
|
13
|
+
* presets: [require('@7onic-ui/react/tailwind-preset')],
|
|
14
|
+
* }
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/** @type {import('tailwindcss').Config} */
|
|
19
|
+
module.exports = {
|
|
20
|
+
theme: {
|
|
21
|
+
extend: {
|
|
22
|
+
colors: {
|
|
23
|
+
// Standalone primitive colors (HEX for opacity modifier support: bg-white/10, etc.)
|
|
24
|
+
white: '#FFFFFF',
|
|
25
|
+
black: '#000000',
|
|
26
|
+
|
|
27
|
+
// Semantic colors (rgb() with alpha-value for opacity modifier support)
|
|
28
|
+
background: {
|
|
29
|
+
DEFAULT: 'rgb(var(--color-background-rgb) / <alpha-value>)',
|
|
30
|
+
paper: 'rgb(var(--color-background-paper-rgb) / <alpha-value>)',
|
|
31
|
+
elevated: 'rgb(var(--color-background-elevated-rgb) / <alpha-value>)',
|
|
32
|
+
muted: 'rgb(var(--color-background-muted-rgb) / <alpha-value>)',
|
|
33
|
+
},
|
|
34
|
+
foreground: 'rgb(var(--color-text-rgb) / <alpha-value>)',
|
|
35
|
+
|
|
36
|
+
primary: {
|
|
37
|
+
DEFAULT: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
|
|
38
|
+
hover: 'rgb(var(--color-primary-hover-rgb) / <alpha-value>)',
|
|
39
|
+
active: 'rgb(var(--color-primary-active-rgb) / <alpha-value>)',
|
|
40
|
+
tint: 'rgb(var(--color-primary-tint-rgb) / <alpha-value>)',
|
|
41
|
+
foreground: 'rgb(var(--color-primary-text-rgb) / <alpha-value>)',
|
|
42
|
+
'50': '#DBF8FB',
|
|
43
|
+
'100': '#B2F0F5',
|
|
44
|
+
'200': '#89E8F0',
|
|
45
|
+
'300': '#60E0EB',
|
|
46
|
+
'400': '#37D8E6',
|
|
47
|
+
'500': '#1AC6D5',
|
|
48
|
+
'600': '#15A0AC',
|
|
49
|
+
'700': '#107A84',
|
|
50
|
+
'800': '#0B545B',
|
|
51
|
+
'900': '#062E32',
|
|
52
|
+
},
|
|
53
|
+
secondary: {
|
|
54
|
+
DEFAULT: 'rgb(var(--color-secondary-rgb) / <alpha-value>)',
|
|
55
|
+
hover: 'rgb(var(--color-secondary-hover-rgb) / <alpha-value>)',
|
|
56
|
+
active: 'rgb(var(--color-secondary-active-rgb) / <alpha-value>)',
|
|
57
|
+
tint: 'rgb(var(--color-secondary-tint-rgb) / <alpha-value>)',
|
|
58
|
+
foreground: 'rgb(var(--color-secondary-text-rgb) / <alpha-value>)',
|
|
59
|
+
'50': '#F5F5FB',
|
|
60
|
+
'100': '#EBEBF5',
|
|
61
|
+
'200': '#D9D9E9',
|
|
62
|
+
'300': '#BCBCD2',
|
|
63
|
+
'400': '#8F8FA9',
|
|
64
|
+
'500': '#69697F',
|
|
65
|
+
'600': '#4E4E60',
|
|
66
|
+
'700': '#3B3B4A',
|
|
67
|
+
'800': '#2F2F3B',
|
|
68
|
+
'900': '#23232D',
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
// Status colors
|
|
72
|
+
success: {
|
|
73
|
+
DEFAULT: 'rgb(var(--color-success-rgb) / <alpha-value>)',
|
|
74
|
+
hover: 'rgb(var(--color-success-hover-rgb) / <alpha-value>)',
|
|
75
|
+
active: 'rgb(var(--color-success-active-rgb) / <alpha-value>)',
|
|
76
|
+
tint: 'rgb(var(--color-success-tint-rgb) / <alpha-value>)',
|
|
77
|
+
foreground: 'rgb(var(--color-success-text-rgb) / <alpha-value>)',
|
|
78
|
+
},
|
|
79
|
+
warning: {
|
|
80
|
+
DEFAULT: 'rgb(var(--color-warning-rgb) / <alpha-value>)',
|
|
81
|
+
hover: 'rgb(var(--color-warning-hover-rgb) / <alpha-value>)',
|
|
82
|
+
active: 'rgb(var(--color-warning-active-rgb) / <alpha-value>)',
|
|
83
|
+
tint: 'rgb(var(--color-warning-tint-rgb) / <alpha-value>)',
|
|
84
|
+
foreground: 'rgb(var(--color-warning-text-rgb) / <alpha-value>)',
|
|
85
|
+
},
|
|
86
|
+
error: {
|
|
87
|
+
DEFAULT: 'rgb(var(--color-error-rgb) / <alpha-value>)',
|
|
88
|
+
hover: 'rgb(var(--color-error-hover-rgb) / <alpha-value>)',
|
|
89
|
+
active: 'rgb(var(--color-error-active-rgb) / <alpha-value>)',
|
|
90
|
+
tint: 'rgb(var(--color-error-tint-rgb) / <alpha-value>)',
|
|
91
|
+
foreground: 'rgb(var(--color-error-text-rgb) / <alpha-value>)',
|
|
92
|
+
bg: 'rgb(var(--color-error-bg-rgb) / <alpha-value>)',
|
|
93
|
+
},
|
|
94
|
+
info: {
|
|
95
|
+
DEFAULT: 'rgb(var(--color-info-rgb) / <alpha-value>)',
|
|
96
|
+
hover: 'rgb(var(--color-info-hover-rgb) / <alpha-value>)',
|
|
97
|
+
active: 'rgb(var(--color-info-active-rgb) / <alpha-value>)',
|
|
98
|
+
tint: 'rgb(var(--color-info-tint-rgb) / <alpha-value>)',
|
|
99
|
+
foreground: 'rgb(var(--color-info-text-rgb) / <alpha-value>)',
|
|
100
|
+
},
|
|
101
|
+
|
|
102
|
+
// Primitive color palettes (HEX for opacity modifier support)
|
|
103
|
+
gray: {
|
|
104
|
+
'50': '#F9F9FA',
|
|
105
|
+
'100': '#F4F4F5',
|
|
106
|
+
'200': '#E4E4E6',
|
|
107
|
+
'300': '#D4D4D5',
|
|
108
|
+
'400': '#9A9A9B',
|
|
109
|
+
'500': '#6B6B6C',
|
|
110
|
+
'600': '#4A4A4B',
|
|
111
|
+
'700': '#3A3A3E',
|
|
112
|
+
'800': '#2D2D31',
|
|
113
|
+
'900': '#222225',
|
|
114
|
+
},
|
|
115
|
+
blue: {
|
|
116
|
+
'50': '#EFF6FF',
|
|
117
|
+
'100': '#DBEAFE',
|
|
118
|
+
'200': '#BFDBFE',
|
|
119
|
+
'300': '#93C5FD',
|
|
120
|
+
'400': '#60A5FA',
|
|
121
|
+
'500': '#3B82F6',
|
|
122
|
+
'600': '#2563EB',
|
|
123
|
+
'700': '#1D4ED8',
|
|
124
|
+
'800': '#1E40AF',
|
|
125
|
+
'900': '#1E3A8A',
|
|
126
|
+
},
|
|
127
|
+
green: {
|
|
128
|
+
'50': '#ECFDF5',
|
|
129
|
+
'100': '#D1FAE5',
|
|
130
|
+
'200': '#A7F3D0',
|
|
131
|
+
'300': '#6EE7B7',
|
|
132
|
+
'400': '#34D399',
|
|
133
|
+
'500': '#10B981',
|
|
134
|
+
'600': '#059669',
|
|
135
|
+
'700': '#047857',
|
|
136
|
+
'800': '#065F46',
|
|
137
|
+
'900': '#064E3B',
|
|
138
|
+
},
|
|
139
|
+
yellow: {
|
|
140
|
+
'50': '#FFFBEB',
|
|
141
|
+
'100': '#FEF3C7',
|
|
142
|
+
'200': '#FDE68A',
|
|
143
|
+
'300': '#FCD34D',
|
|
144
|
+
'400': '#FBBF24',
|
|
145
|
+
'500': '#F59E0B',
|
|
146
|
+
'600': '#D97706',
|
|
147
|
+
'700': '#B45309',
|
|
148
|
+
'800': '#92400E',
|
|
149
|
+
'900': '#78350F',
|
|
150
|
+
},
|
|
151
|
+
red: {
|
|
152
|
+
'50': '#FEF2F2',
|
|
153
|
+
'100': '#FEE2E2',
|
|
154
|
+
'200': '#FECACA',
|
|
155
|
+
'300': '#FCA5A5',
|
|
156
|
+
'400': '#F87171',
|
|
157
|
+
'500': '#EF4444',
|
|
158
|
+
'600': '#DC2626',
|
|
159
|
+
'700': '#B91C1C',
|
|
160
|
+
'800': '#991B1B',
|
|
161
|
+
'900': '#7F1D1D',
|
|
162
|
+
},
|
|
163
|
+
|
|
164
|
+
// UI colors
|
|
165
|
+
border: {
|
|
166
|
+
DEFAULT: 'rgb(var(--color-border-rgb) / <alpha-value>)',
|
|
167
|
+
strong: 'rgb(var(--color-border-strong-rgb) / <alpha-value>)',
|
|
168
|
+
subtle: 'rgb(var(--color-border-subtle-rgb) / <alpha-value>)',
|
|
169
|
+
},
|
|
170
|
+
ring: {
|
|
171
|
+
DEFAULT: 'rgb(var(--color-focus-ring-rgb) / <alpha-value>)',
|
|
172
|
+
error: 'rgb(var(--color-focus-ring-error-rgb) / <alpha-value>)',
|
|
173
|
+
},
|
|
174
|
+
muted: {
|
|
175
|
+
DEFAULT: 'rgb(var(--color-background-muted-rgb) / <alpha-value>)',
|
|
176
|
+
foreground: 'rgb(var(--color-text-muted-rgb) / <alpha-value>)',
|
|
177
|
+
},
|
|
178
|
+
disabled: {
|
|
179
|
+
DEFAULT: 'rgb(var(--color-disabled-rgb) / <alpha-value>)',
|
|
180
|
+
foreground: 'rgb(var(--color-disabled-text-rgb) / <alpha-value>)',
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
// Chart colors
|
|
184
|
+
chart: {
|
|
185
|
+
'1': 'rgb(var(--color-chart-1-rgb) / <alpha-value>)',
|
|
186
|
+
'2': 'rgb(var(--color-chart-2-rgb) / <alpha-value>)',
|
|
187
|
+
'3': 'rgb(var(--color-chart-3-rgb) / <alpha-value>)',
|
|
188
|
+
'4': 'rgb(var(--color-chart-4-rgb) / <alpha-value>)',
|
|
189
|
+
'5': 'rgb(var(--color-chart-5-rgb) / <alpha-value>)',
|
|
190
|
+
},
|
|
191
|
+
|
|
192
|
+
// Text
|
|
193
|
+
text: {
|
|
194
|
+
DEFAULT: 'rgb(var(--color-text-rgb) / <alpha-value>)',
|
|
195
|
+
muted: 'rgb(var(--color-text-muted-rgb) / <alpha-value>)',
|
|
196
|
+
subtle: 'rgb(var(--color-text-subtle-rgb) / <alpha-value>)',
|
|
197
|
+
link: 'rgb(var(--color-text-link-rgb) / <alpha-value>)',
|
|
198
|
+
primary: 'rgb(var(--color-text-primary-rgb) / <alpha-value>)',
|
|
199
|
+
info: 'rgb(var(--color-text-info-rgb) / <alpha-value>)',
|
|
200
|
+
success: 'rgb(var(--color-text-success-rgb) / <alpha-value>)',
|
|
201
|
+
error: 'rgb(var(--color-text-error-rgb) / <alpha-value>)',
|
|
202
|
+
warning: 'rgb(var(--color-text-warning-rgb) / <alpha-value>)',
|
|
203
|
+
},
|
|
204
|
+
},
|
|
205
|
+
|
|
206
|
+
fontSize: {
|
|
207
|
+
'2xs': ['var(--font-size-2xs)', { lineHeight: 'var(--line-height-2xs)' }],
|
|
208
|
+
'xs': ['var(--font-size-xs)', { lineHeight: 'var(--line-height-xs)' }],
|
|
209
|
+
'sm': ['var(--font-size-sm)', { lineHeight: 'var(--line-height-sm)' }],
|
|
210
|
+
'md': ['var(--font-size-md)', { lineHeight: 'var(--line-height-md)' }],
|
|
211
|
+
'base': ['var(--font-size-base)', { lineHeight: 'var(--line-height-base)' }],
|
|
212
|
+
'lg': ['var(--font-size-lg)', { lineHeight: 'var(--line-height-lg)' }],
|
|
213
|
+
'xl': ['var(--font-size-xl)', { lineHeight: 'var(--line-height-xl)' }],
|
|
214
|
+
'2xl': ['var(--font-size-2xl)', { lineHeight: 'var(--line-height-2xl)' }],
|
|
215
|
+
'3xl': ['var(--font-size-3xl)', { lineHeight: 'var(--line-height-3xl)' }],
|
|
216
|
+
'4xl': ['var(--font-size-4xl)', { lineHeight: 'var(--line-height-4xl)' }],
|
|
217
|
+
'5xl': ['var(--font-size-5xl)', { lineHeight: 'var(--line-height-5xl)' }],
|
|
218
|
+
},
|
|
219
|
+
|
|
220
|
+
fontFamily: {
|
|
221
|
+
'sans': ['var(--font-family-sans)'],
|
|
222
|
+
'mono': ['var(--font-family-mono)'],
|
|
223
|
+
},
|
|
224
|
+
|
|
225
|
+
spacing: {
|
|
226
|
+
'0': 'var(--spacing-0)',
|
|
227
|
+
'0.5': 'var(--spacing-0-5)',
|
|
228
|
+
'1': 'var(--spacing-1)',
|
|
229
|
+
'1.5': 'var(--spacing-1-5)',
|
|
230
|
+
'2': 'var(--spacing-2)',
|
|
231
|
+
'2.5': 'var(--spacing-2-5)',
|
|
232
|
+
'3': 'var(--spacing-3)',
|
|
233
|
+
'4': 'var(--spacing-4)',
|
|
234
|
+
'5': 'var(--spacing-5)',
|
|
235
|
+
'6': 'var(--spacing-6)',
|
|
236
|
+
'7': 'var(--spacing-7)',
|
|
237
|
+
'8': 'var(--spacing-8)',
|
|
238
|
+
'10': 'var(--spacing-10)',
|
|
239
|
+
'12': 'var(--spacing-12)',
|
|
240
|
+
'14': 'var(--spacing-14)',
|
|
241
|
+
'16': 'var(--spacing-16)',
|
|
242
|
+
'20': 'var(--spacing-20)',
|
|
243
|
+
'24': 'var(--spacing-24)',
|
|
244
|
+
},
|
|
245
|
+
|
|
246
|
+
borderRadius: {
|
|
247
|
+
'none': 'var(--radius-none)',
|
|
248
|
+
'sm': 'var(--radius-sm)',
|
|
249
|
+
'base': 'var(--radius-base)',
|
|
250
|
+
'DEFAULT': 'var(--radius-base)',
|
|
251
|
+
'md': 'var(--radius-md)',
|
|
252
|
+
'lg': 'var(--radius-lg)',
|
|
253
|
+
'xl': 'var(--radius-xl)',
|
|
254
|
+
'2xl': 'var(--radius-2xl)',
|
|
255
|
+
'3xl': 'var(--radius-3xl)',
|
|
256
|
+
'full': 'var(--radius-full)',
|
|
257
|
+
},
|
|
258
|
+
|
|
259
|
+
boxShadow: {
|
|
260
|
+
'xs': 'var(--shadow-xs)',
|
|
261
|
+
'sm': 'var(--shadow-sm)',
|
|
262
|
+
'md': 'var(--shadow-md)',
|
|
263
|
+
'lg': 'var(--shadow-lg)',
|
|
264
|
+
'xl': 'var(--shadow-xl)',
|
|
265
|
+
'primary-glow': 'var(--shadow-primary-glow)',
|
|
266
|
+
},
|
|
267
|
+
|
|
268
|
+
zIndex: {
|
|
269
|
+
'0': 'var(--z-index-0)',
|
|
270
|
+
'10': 'var(--z-index-10)',
|
|
271
|
+
'20': 'var(--z-index-20)',
|
|
272
|
+
'30': 'var(--z-index-30)',
|
|
273
|
+
'40': 'var(--z-index-40)',
|
|
274
|
+
'50': 'var(--z-index-50)',
|
|
275
|
+
'sticky': 'var(--z-index-sticky)',
|
|
276
|
+
'dropdown': 'var(--z-index-dropdown)',
|
|
277
|
+
'overlay': 'var(--z-index-overlay)',
|
|
278
|
+
'modal': 'var(--z-index-modal)',
|
|
279
|
+
'popover': 'var(--z-index-popover)',
|
|
280
|
+
'tooltip': 'var(--z-index-tooltip)',
|
|
281
|
+
'toast': 'var(--z-index-toast)',
|
|
282
|
+
},
|
|
283
|
+
|
|
284
|
+
transitionDuration: {
|
|
285
|
+
'instant': 'var(--duration-instant)',
|
|
286
|
+
'fast': 'var(--duration-fast)',
|
|
287
|
+
'micro': 'var(--duration-micro)',
|
|
288
|
+
'normal': 'var(--duration-normal)',
|
|
289
|
+
'slow': 'var(--duration-slow)',
|
|
290
|
+
'slower': 'var(--duration-slower)',
|
|
291
|
+
'slowest': 'var(--duration-slowest)',
|
|
292
|
+
'spin': 'var(--duration-spin)',
|
|
293
|
+
},
|
|
294
|
+
|
|
295
|
+
transitionTimingFunction: {
|
|
296
|
+
'linear': 'var(--easing-linear)',
|
|
297
|
+
'ease': 'var(--easing-ease)',
|
|
298
|
+
'ease-in': 'var(--easing-ease-in)',
|
|
299
|
+
'ease-out': 'var(--easing-ease-out)',
|
|
300
|
+
'ease-in-out': 'var(--easing-ease-in-out)',
|
|
301
|
+
},
|
|
302
|
+
|
|
303
|
+
opacity: {
|
|
304
|
+
'0': 'var(--opacity-0)',
|
|
305
|
+
'5': 'var(--opacity-5)',
|
|
306
|
+
'10': 'var(--opacity-10)',
|
|
307
|
+
'15': 'var(--opacity-15)',
|
|
308
|
+
'20': 'var(--opacity-20)',
|
|
309
|
+
'25': 'var(--opacity-25)',
|
|
310
|
+
'30': 'var(--opacity-30)',
|
|
311
|
+
'35': 'var(--opacity-35)',
|
|
312
|
+
'40': 'var(--opacity-40)',
|
|
313
|
+
'45': 'var(--opacity-45)',
|
|
314
|
+
'50': 'var(--opacity-50)',
|
|
315
|
+
'55': 'var(--opacity-55)',
|
|
316
|
+
'60': 'var(--opacity-60)',
|
|
317
|
+
'65': 'var(--opacity-65)',
|
|
318
|
+
'70': 'var(--opacity-70)',
|
|
319
|
+
'75': 'var(--opacity-75)',
|
|
320
|
+
'80': 'var(--opacity-80)',
|
|
321
|
+
'85': 'var(--opacity-85)',
|
|
322
|
+
'90': 'var(--opacity-90)',
|
|
323
|
+
'95': 'var(--opacity-95)',
|
|
324
|
+
'100': 'var(--opacity-100)',
|
|
325
|
+
},
|
|
326
|
+
|
|
327
|
+
scale: {
|
|
328
|
+
'50': 'var(--scale-50)',
|
|
329
|
+
'75': 'var(--scale-75)',
|
|
330
|
+
'95': 'var(--scale-95)',
|
|
331
|
+
'pressed': 'var(--scale-pressed)',
|
|
332
|
+
},
|
|
333
|
+
|
|
334
|
+
keyframes: {
|
|
335
|
+
'checkbox-enter': {
|
|
336
|
+
from: { 'opacity': '0', 'transform': 'scale(0.75)' },
|
|
337
|
+
to: { 'opacity': '1', 'transform': 'scale(1)' },
|
|
338
|
+
},
|
|
339
|
+
'radio-enter': {
|
|
340
|
+
from: { 'opacity': '0', 'transform': 'scale(0.5)' },
|
|
341
|
+
to: { 'opacity': '1', 'transform': 'scale(1)' },
|
|
342
|
+
},
|
|
343
|
+
'fade-in': {
|
|
344
|
+
from: { 'opacity': '0' },
|
|
345
|
+
to: { 'opacity': '1' },
|
|
346
|
+
},
|
|
347
|
+
'fade-out': {
|
|
348
|
+
from: { 'opacity': '1' },
|
|
349
|
+
to: { 'opacity': '0' },
|
|
350
|
+
},
|
|
351
|
+
'modal-overlay-enter': {
|
|
352
|
+
from: { 'opacity': '0' },
|
|
353
|
+
to: { 'opacity': '1' },
|
|
354
|
+
},
|
|
355
|
+
'modal-overlay-exit': {
|
|
356
|
+
from: { 'opacity': '1' },
|
|
357
|
+
to: { 'opacity': '0' },
|
|
358
|
+
},
|
|
359
|
+
'modal-content-enter': {
|
|
360
|
+
from: { 'opacity': '0', 'transform': 'scale(0.95) translateY(8px)' },
|
|
361
|
+
to: { 'opacity': '1', 'transform': 'scale(1) translateY(0)' },
|
|
362
|
+
},
|
|
363
|
+
'modal-content-exit': {
|
|
364
|
+
from: { 'opacity': '1', 'transform': 'scale(1) translateY(0)' },
|
|
365
|
+
to: { 'opacity': '0', 'transform': 'scale(0.95) translateY(8px)' },
|
|
366
|
+
},
|
|
367
|
+
'nav-viewport-enter': {
|
|
368
|
+
from: { 'opacity': '0', 'transform': 'scale(0.98) translateY(-2px)' },
|
|
369
|
+
to: { 'opacity': '1', 'transform': 'scale(1) translateY(0)' },
|
|
370
|
+
},
|
|
371
|
+
'nav-viewport-exit': {
|
|
372
|
+
from: { 'opacity': '1', 'transform': 'scale(1) translateY(0)' },
|
|
373
|
+
to: { 'opacity': '0', 'transform': 'scale(0.98) translateY(-2px)' },
|
|
374
|
+
},
|
|
375
|
+
'accordion-down': {
|
|
376
|
+
from: { height: '0' },
|
|
377
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
378
|
+
},
|
|
379
|
+
'accordion-up': {
|
|
380
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
381
|
+
to: { height: '0' },
|
|
382
|
+
},
|
|
383
|
+
'collapsible-down': {
|
|
384
|
+
from: { height: '0' },
|
|
385
|
+
to: { height: 'var(--radix-collapsible-content-height)' },
|
|
386
|
+
},
|
|
387
|
+
'collapsible-up': {
|
|
388
|
+
from: { height: 'var(--radix-collapsible-content-height)' },
|
|
389
|
+
to: { height: '0' },
|
|
390
|
+
},
|
|
391
|
+
'drawer-right-enter': {
|
|
392
|
+
from: { 'transform': 'translateX(100%)' },
|
|
393
|
+
to: { 'transform': 'translateX(0)' },
|
|
394
|
+
},
|
|
395
|
+
'drawer-right-exit': {
|
|
396
|
+
from: { 'transform': 'translateX(0)' },
|
|
397
|
+
to: { 'transform': 'translateX(100%)' },
|
|
398
|
+
},
|
|
399
|
+
'drawer-left-enter': {
|
|
400
|
+
from: { 'transform': 'translateX(-100%)' },
|
|
401
|
+
to: { 'transform': 'translateX(0)' },
|
|
402
|
+
},
|
|
403
|
+
'drawer-left-exit': {
|
|
404
|
+
from: { 'transform': 'translateX(0)' },
|
|
405
|
+
to: { 'transform': 'translateX(-100%)' },
|
|
406
|
+
},
|
|
407
|
+
'drawer-top-enter': {
|
|
408
|
+
from: { 'transform': 'translateY(-100%)' },
|
|
409
|
+
to: { 'transform': 'translateY(0)' },
|
|
410
|
+
},
|
|
411
|
+
'drawer-top-exit': {
|
|
412
|
+
from: { 'transform': 'translateY(0)' },
|
|
413
|
+
to: { 'transform': 'translateY(-100%)' },
|
|
414
|
+
},
|
|
415
|
+
'drawer-bottom-enter': {
|
|
416
|
+
from: { 'transform': 'translateY(100%)' },
|
|
417
|
+
to: { 'transform': 'translateY(0)' },
|
|
418
|
+
},
|
|
419
|
+
'drawer-bottom-exit': {
|
|
420
|
+
from: { 'transform': 'translateY(0)' },
|
|
421
|
+
to: { 'transform': 'translateY(100%)' },
|
|
422
|
+
},
|
|
423
|
+
'tooltip-top-enter': {
|
|
424
|
+
from: { 'opacity': '0', 'transform': 'translateY(4px)' },
|
|
425
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
426
|
+
},
|
|
427
|
+
'tooltip-top-exit': {
|
|
428
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
429
|
+
to: { 'opacity': '0', 'transform': 'translateY(4px)' },
|
|
430
|
+
},
|
|
431
|
+
'tooltip-bottom-enter': {
|
|
432
|
+
from: { 'opacity': '0', 'transform': 'translateY(-4px)' },
|
|
433
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
434
|
+
},
|
|
435
|
+
'tooltip-bottom-exit': {
|
|
436
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
437
|
+
to: { 'opacity': '0', 'transform': 'translateY(-4px)' },
|
|
438
|
+
},
|
|
439
|
+
'tooltip-right-enter': {
|
|
440
|
+
from: { 'opacity': '0', 'transform': 'translateX(-4px)' },
|
|
441
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
442
|
+
},
|
|
443
|
+
'tooltip-right-exit': {
|
|
444
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
445
|
+
to: { 'opacity': '0', 'transform': 'translateX(-4px)' },
|
|
446
|
+
},
|
|
447
|
+
'tooltip-left-enter': {
|
|
448
|
+
from: { 'opacity': '0', 'transform': 'translateX(4px)' },
|
|
449
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
450
|
+
},
|
|
451
|
+
'tooltip-left-exit': {
|
|
452
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
453
|
+
to: { 'opacity': '0', 'transform': 'translateX(4px)' },
|
|
454
|
+
},
|
|
455
|
+
'popover-top-enter': {
|
|
456
|
+
from: { 'opacity': '0', 'transform': 'translateY(4px)' },
|
|
457
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
458
|
+
},
|
|
459
|
+
'popover-top-exit': {
|
|
460
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
461
|
+
to: { 'opacity': '0', 'transform': 'translateY(4px)' },
|
|
462
|
+
},
|
|
463
|
+
'popover-bottom-enter': {
|
|
464
|
+
from: { 'opacity': '0', 'transform': 'translateY(-4px)' },
|
|
465
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
466
|
+
},
|
|
467
|
+
'popover-bottom-exit': {
|
|
468
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
469
|
+
to: { 'opacity': '0', 'transform': 'translateY(-4px)' },
|
|
470
|
+
},
|
|
471
|
+
'popover-right-enter': {
|
|
472
|
+
from: { 'opacity': '0', 'transform': 'translateX(-4px)' },
|
|
473
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
474
|
+
},
|
|
475
|
+
'popover-right-exit': {
|
|
476
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
477
|
+
to: { 'opacity': '0', 'transform': 'translateX(-4px)' },
|
|
478
|
+
},
|
|
479
|
+
'popover-left-enter': {
|
|
480
|
+
from: { 'opacity': '0', 'transform': 'translateX(4px)' },
|
|
481
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
482
|
+
},
|
|
483
|
+
'popover-left-exit': {
|
|
484
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
485
|
+
to: { 'opacity': '0', 'transform': 'translateX(4px)' },
|
|
486
|
+
},
|
|
487
|
+
'toast-slide-in-right': {
|
|
488
|
+
from: { 'opacity': '0', 'transform': 'translateX(100%)' },
|
|
489
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
490
|
+
},
|
|
491
|
+
'toast-slide-out-right': {
|
|
492
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
493
|
+
to: { 'opacity': '0', 'transform': 'translateX(100%)' },
|
|
494
|
+
},
|
|
495
|
+
'toast-slide-in-left': {
|
|
496
|
+
from: { 'opacity': '0', 'transform': 'translateX(-100%)' },
|
|
497
|
+
to: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
498
|
+
},
|
|
499
|
+
'toast-slide-out-left': {
|
|
500
|
+
from: { 'opacity': '1', 'transform': 'translateX(0)' },
|
|
501
|
+
to: { 'opacity': '0', 'transform': 'translateX(-100%)' },
|
|
502
|
+
},
|
|
503
|
+
'toast-slide-in-top': {
|
|
504
|
+
from: { 'opacity': '0', 'transform': 'translateY(-100%)' },
|
|
505
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
506
|
+
},
|
|
507
|
+
'toast-slide-out-top': {
|
|
508
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
509
|
+
to: { 'opacity': '0', 'transform': 'translateY(-100%)' },
|
|
510
|
+
},
|
|
511
|
+
'toast-slide-in-bottom': {
|
|
512
|
+
from: { 'opacity': '0', 'transform': 'translateY(100%)' },
|
|
513
|
+
to: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
514
|
+
},
|
|
515
|
+
'toast-slide-out-bottom': {
|
|
516
|
+
from: { 'opacity': '1', 'transform': 'translateY(0)' },
|
|
517
|
+
to: { 'opacity': '0', 'transform': 'translateY(100%)' },
|
|
518
|
+
},
|
|
519
|
+
'spin': {
|
|
520
|
+
from: { 'transform': 'rotate(0deg)' },
|
|
521
|
+
to: { 'transform': 'rotate(360deg)' },
|
|
522
|
+
},
|
|
523
|
+
'progress-stripe': {
|
|
524
|
+
from: { 'background-position': '1rem 0' },
|
|
525
|
+
to: { 'background-position': '0 0' },
|
|
526
|
+
},
|
|
527
|
+
'spinner-orbit': {
|
|
528
|
+
from: { 'transform': 'rotateY(0deg)' },
|
|
529
|
+
to: { 'transform': 'rotateY(360deg)' },
|
|
530
|
+
},
|
|
531
|
+
'spinner-dot': {
|
|
532
|
+
'0%, 100%': { 'opacity': '0.2' },
|
|
533
|
+
'50%': { 'opacity': '1' },
|
|
534
|
+
},
|
|
535
|
+
'spinner-bar': {
|
|
536
|
+
'0%, 100%': { 'transform': 'scaleY(0.4)' },
|
|
537
|
+
'50%': { 'transform': 'scaleY(1)' },
|
|
538
|
+
},
|
|
539
|
+
'spinner-morph': {
|
|
540
|
+
'0%, 100%': { 'border-radius': '50%', 'transform': 'rotateY(0deg) rotate(0deg)' },
|
|
541
|
+
'25%': { 'border-radius': '30% 70% 70% 30% / 30% 30% 70% 70%', 'transform': 'rotateY(90deg) rotate(90deg)' },
|
|
542
|
+
'50%': { 'border-radius': '50%', 'transform': 'rotateY(180deg) rotate(180deg)' },
|
|
543
|
+
'75%': { 'border-radius': '70% 30% 30% 70% / 70% 70% 30% 30%', 'transform': 'rotateY(270deg) rotate(270deg)' },
|
|
544
|
+
},
|
|
545
|
+
'skeleton-pulse': {
|
|
546
|
+
'0%, 100%': { 'opacity': '1' },
|
|
547
|
+
'50%': { 'opacity': '0.4' },
|
|
548
|
+
},
|
|
549
|
+
'skeleton-wave': {
|
|
550
|
+
'0%': { 'transform': 'translateX(-100%)' },
|
|
551
|
+
'100%': { 'transform': 'translateX(100%)' },
|
|
552
|
+
},
|
|
553
|
+
},
|
|
554
|
+
|
|
555
|
+
animation: {
|
|
556
|
+
'checkbox-enter': 'checkbox-enter var(--duration-micro) var(--easing-ease-out)',
|
|
557
|
+
'radio-enter': 'radio-enter var(--duration-micro) var(--easing-ease-out)',
|
|
558
|
+
'fade-in': 'fade-in var(--duration-normal) var(--easing-ease-out)',
|
|
559
|
+
'fade-out': 'fade-out var(--duration-normal) var(--easing-ease-out)',
|
|
560
|
+
'modal-overlay-enter': 'modal-overlay-enter var(--duration-normal) var(--easing-ease-out)',
|
|
561
|
+
'modal-overlay-exit': 'modal-overlay-exit var(--duration-fast) var(--easing-ease-out)',
|
|
562
|
+
'modal-content-enter': 'modal-content-enter var(--duration-normal) var(--easing-ease-out)',
|
|
563
|
+
'modal-content-exit': 'modal-content-exit var(--duration-fast) var(--easing-ease-out)',
|
|
564
|
+
'nav-viewport-enter': 'nav-viewport-enter var(--duration-micro) var(--easing-ease-out)',
|
|
565
|
+
'nav-viewport-exit': 'nav-viewport-exit var(--duration-fast) var(--easing-ease-out)',
|
|
566
|
+
'accordion-down': 'accordion-down var(--duration-normal) var(--easing-ease-out)',
|
|
567
|
+
'accordion-up': 'accordion-up var(--duration-normal) var(--easing-ease-out)',
|
|
568
|
+
'collapsible-down': 'collapsible-down var(--duration-normal) var(--easing-ease-out)',
|
|
569
|
+
'collapsible-up': 'collapsible-up var(--duration-normal) var(--easing-ease-out)',
|
|
570
|
+
'drawer-right-enter': 'drawer-right-enter var(--duration-slow) var(--easing-ease-out)',
|
|
571
|
+
'drawer-right-exit': 'drawer-right-exit var(--duration-normal) var(--easing-ease-out)',
|
|
572
|
+
'drawer-left-enter': 'drawer-left-enter var(--duration-slow) var(--easing-ease-out)',
|
|
573
|
+
'drawer-left-exit': 'drawer-left-exit var(--duration-normal) var(--easing-ease-out)',
|
|
574
|
+
'drawer-top-enter': 'drawer-top-enter var(--duration-slow) var(--easing-ease-out)',
|
|
575
|
+
'drawer-top-exit': 'drawer-top-exit var(--duration-normal) var(--easing-ease-out)',
|
|
576
|
+
'drawer-bottom-enter': 'drawer-bottom-enter var(--duration-slow) var(--easing-ease-out)',
|
|
577
|
+
'drawer-bottom-exit': 'drawer-bottom-exit var(--duration-normal) var(--easing-ease-out)',
|
|
578
|
+
'tooltip-top-enter': 'tooltip-top-enter var(--duration-micro) var(--easing-ease-out)',
|
|
579
|
+
'tooltip-top-exit': 'tooltip-top-exit var(--duration-fast) var(--easing-ease-out)',
|
|
580
|
+
'tooltip-bottom-enter': 'tooltip-bottom-enter var(--duration-micro) var(--easing-ease-out)',
|
|
581
|
+
'tooltip-bottom-exit': 'tooltip-bottom-exit var(--duration-fast) var(--easing-ease-out)',
|
|
582
|
+
'tooltip-right-enter': 'tooltip-right-enter var(--duration-micro) var(--easing-ease-out)',
|
|
583
|
+
'tooltip-right-exit': 'tooltip-right-exit var(--duration-fast) var(--easing-ease-out)',
|
|
584
|
+
'tooltip-left-enter': 'tooltip-left-enter var(--duration-micro) var(--easing-ease-out)',
|
|
585
|
+
'tooltip-left-exit': 'tooltip-left-exit var(--duration-fast) var(--easing-ease-out)',
|
|
586
|
+
'popover-top-enter': 'popover-top-enter var(--duration-normal) var(--easing-ease-out)',
|
|
587
|
+
'popover-top-exit': 'popover-top-exit var(--duration-fast) var(--easing-ease-out)',
|
|
588
|
+
'popover-bottom-enter': 'popover-bottom-enter var(--duration-normal) var(--easing-ease-out)',
|
|
589
|
+
'popover-bottom-exit': 'popover-bottom-exit var(--duration-fast) var(--easing-ease-out)',
|
|
590
|
+
'popover-right-enter': 'popover-right-enter var(--duration-normal) var(--easing-ease-out)',
|
|
591
|
+
'popover-right-exit': 'popover-right-exit var(--duration-fast) var(--easing-ease-out)',
|
|
592
|
+
'popover-left-enter': 'popover-left-enter var(--duration-normal) var(--easing-ease-out)',
|
|
593
|
+
'popover-left-exit': 'popover-left-exit var(--duration-fast) var(--easing-ease-out)',
|
|
594
|
+
'toast-slide-in-right': 'toast-slide-in-right var(--duration-slow) var(--easing-ease-out)',
|
|
595
|
+
'toast-slide-out-right': 'toast-slide-out-right var(--duration-normal) var(--easing-ease-out)',
|
|
596
|
+
'toast-slide-in-left': 'toast-slide-in-left var(--duration-slow) var(--easing-ease-out)',
|
|
597
|
+
'toast-slide-out-left': 'toast-slide-out-left var(--duration-normal) var(--easing-ease-out)',
|
|
598
|
+
'toast-slide-in-top': 'toast-slide-in-top var(--duration-slow) var(--easing-ease-out)',
|
|
599
|
+
'toast-slide-out-top': 'toast-slide-out-top var(--duration-normal) var(--easing-ease-out)',
|
|
600
|
+
'toast-slide-in-bottom': 'toast-slide-in-bottom var(--duration-slow) var(--easing-ease-out)',
|
|
601
|
+
'toast-slide-out-bottom': 'toast-slide-out-bottom var(--duration-normal) var(--easing-ease-out)',
|
|
602
|
+
'spin': 'spin var(--duration-spin) var(--easing-linear) infinite',
|
|
603
|
+
'progress-stripe': 'progress-stripe var(--duration-spin) var(--easing-linear) infinite',
|
|
604
|
+
'spinner-orbit': 'spinner-orbit var(--duration-spin) var(--easing-linear) infinite',
|
|
605
|
+
'spinner-dot': 'spinner-dot var(--duration-spin) var(--easing-ease-in-out) infinite',
|
|
606
|
+
'spinner-bar': 'spinner-bar var(--duration-spin) var(--easing-ease-in-out) infinite',
|
|
607
|
+
'spinner-morph': 'spinner-morph var(--duration-spin) var(--easing-ease-in-out) infinite',
|
|
608
|
+
'skeleton-pulse': 'skeleton-pulse var(--duration-spin) var(--easing-ease-in-out) infinite',
|
|
609
|
+
'skeleton-wave': 'skeleton-wave var(--duration-spin) var(--easing-linear) infinite',
|
|
610
|
+
},
|
|
611
|
+
},
|
|
612
|
+
},
|
|
613
|
+
plugins: [
|
|
614
|
+
// Icon size utilities
|
|
615
|
+
function({ addUtilities }) {
|
|
616
|
+
addUtilities({
|
|
617
|
+
'.icon-2xs': { width: 'var(--icon-size-2xs)', height: 'var(--icon-size-2xs)' },
|
|
618
|
+
'.icon-xs': { width: 'var(--icon-size-xs)', height: 'var(--icon-size-xs)' },
|
|
619
|
+
'.icon-sm': { width: 'var(--icon-size-sm)', height: 'var(--icon-size-sm)' },
|
|
620
|
+
'.icon-md': { width: 'var(--icon-size-md)', height: 'var(--icon-size-md)' },
|
|
621
|
+
'.icon-lg': { width: 'var(--icon-size-lg)', height: 'var(--icon-size-lg)' },
|
|
622
|
+
'.icon-xl': { width: 'var(--icon-size-xl)', height: 'var(--icon-size-xl)' },
|
|
623
|
+
})
|
|
624
|
+
},
|
|
625
|
+
// Scale reset for grouped buttons (override active:scale-pressed)
|
|
626
|
+
function({ addUtilities }) {
|
|
627
|
+
addUtilities({
|
|
628
|
+
'.scale-none': { transform: 'none !important' },
|
|
629
|
+
})
|
|
630
|
+
},
|
|
631
|
+
// Focus ring utility (v3/v4 compatible)
|
|
632
|
+
function({ addUtilities }) {
|
|
633
|
+
addUtilities({
|
|
634
|
+
'.focus-ring': {
|
|
635
|
+
outline: '2px solid transparent',
|
|
636
|
+
'outline-offset': '2px',
|
|
637
|
+
'box-shadow': '0 0 0 2px var(--color-focus-ring)',
|
|
638
|
+
},
|
|
639
|
+
})
|
|
640
|
+
},
|
|
641
|
+
// Animation utilities (generated from semantic.animation)
|
|
642
|
+
function({ addUtilities }) {
|
|
643
|
+
addUtilities({
|
|
644
|
+
'.animate-checkbox-enter': { 'animation': 'checkbox-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
645
|
+
'.animate-radio-enter': { 'animation': 'radio-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
646
|
+
'.animate-fade-in': { 'animation': 'fade-in var(--duration-normal) var(--easing-ease-out)' },
|
|
647
|
+
'.animate-fade-out': { 'animation': 'fade-out var(--duration-normal) var(--easing-ease-out)' },
|
|
648
|
+
'.animate-modal-overlay-enter': { 'animation': 'modal-overlay-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
649
|
+
'.animate-modal-overlay-exit': { 'animation': 'modal-overlay-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
650
|
+
'.animate-modal-content-enter': { 'animation': 'modal-content-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
651
|
+
'.animate-modal-content-exit': { 'animation': 'modal-content-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
652
|
+
'.animate-nav-viewport-enter': { 'animation': 'nav-viewport-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
653
|
+
'.animate-nav-viewport-exit': { 'animation': 'nav-viewport-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
654
|
+
'.animate-accordion-down': { 'animation': 'accordion-down var(--duration-normal) var(--easing-ease-out)' },
|
|
655
|
+
'.animate-accordion-up': { 'animation': 'accordion-up var(--duration-normal) var(--easing-ease-out)' },
|
|
656
|
+
'.animate-collapsible-down': { 'animation': 'collapsible-down var(--duration-normal) var(--easing-ease-out)' },
|
|
657
|
+
'.animate-collapsible-up': { 'animation': 'collapsible-up var(--duration-normal) var(--easing-ease-out)' },
|
|
658
|
+
'.animate-drawer-right-enter': { 'animation': 'drawer-right-enter var(--duration-slow) var(--easing-ease-out)' },
|
|
659
|
+
'.animate-drawer-right-exit': { 'animation': 'drawer-right-exit var(--duration-normal) var(--easing-ease-out)' },
|
|
660
|
+
'.animate-drawer-left-enter': { 'animation': 'drawer-left-enter var(--duration-slow) var(--easing-ease-out)' },
|
|
661
|
+
'.animate-drawer-left-exit': { 'animation': 'drawer-left-exit var(--duration-normal) var(--easing-ease-out)' },
|
|
662
|
+
'.animate-drawer-top-enter': { 'animation': 'drawer-top-enter var(--duration-slow) var(--easing-ease-out)' },
|
|
663
|
+
'.animate-drawer-top-exit': { 'animation': 'drawer-top-exit var(--duration-normal) var(--easing-ease-out)' },
|
|
664
|
+
'.animate-drawer-bottom-enter': { 'animation': 'drawer-bottom-enter var(--duration-slow) var(--easing-ease-out)' },
|
|
665
|
+
'.animate-drawer-bottom-exit': { 'animation': 'drawer-bottom-exit var(--duration-normal) var(--easing-ease-out)' },
|
|
666
|
+
'.animate-tooltip-top-enter': { 'animation': 'tooltip-top-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
667
|
+
'.animate-tooltip-top-exit': { 'animation': 'tooltip-top-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
668
|
+
'.animate-tooltip-bottom-enter': { 'animation': 'tooltip-bottom-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
669
|
+
'.animate-tooltip-bottom-exit': { 'animation': 'tooltip-bottom-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
670
|
+
'.animate-tooltip-right-enter': { 'animation': 'tooltip-right-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
671
|
+
'.animate-tooltip-right-exit': { 'animation': 'tooltip-right-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
672
|
+
'.animate-tooltip-left-enter': { 'animation': 'tooltip-left-enter var(--duration-micro) var(--easing-ease-out)' },
|
|
673
|
+
'.animate-tooltip-left-exit': { 'animation': 'tooltip-left-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
674
|
+
'.animate-popover-top-enter': { 'animation': 'popover-top-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
675
|
+
'.animate-popover-top-exit': { 'animation': 'popover-top-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
676
|
+
'.animate-popover-bottom-enter': { 'animation': 'popover-bottom-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
677
|
+
'.animate-popover-bottom-exit': { 'animation': 'popover-bottom-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
678
|
+
'.animate-popover-right-enter': { 'animation': 'popover-right-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
679
|
+
'.animate-popover-right-exit': { 'animation': 'popover-right-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
680
|
+
'.animate-popover-left-enter': { 'animation': 'popover-left-enter var(--duration-normal) var(--easing-ease-out)' },
|
|
681
|
+
'.animate-popover-left-exit': { 'animation': 'popover-left-exit var(--duration-fast) var(--easing-ease-out)' },
|
|
682
|
+
'.animate-toast-slide-in-right': { 'animation': 'toast-slide-in-right var(--duration-slow) var(--easing-ease-out)' },
|
|
683
|
+
'.animate-toast-slide-out-right': { 'animation': 'toast-slide-out-right var(--duration-normal) var(--easing-ease-out)' },
|
|
684
|
+
'.animate-toast-slide-in-left': { 'animation': 'toast-slide-in-left var(--duration-slow) var(--easing-ease-out)' },
|
|
685
|
+
'.animate-toast-slide-out-left': { 'animation': 'toast-slide-out-left var(--duration-normal) var(--easing-ease-out)' },
|
|
686
|
+
'.animate-toast-slide-in-top': { 'animation': 'toast-slide-in-top var(--duration-slow) var(--easing-ease-out)' },
|
|
687
|
+
'.animate-toast-slide-out-top': { 'animation': 'toast-slide-out-top var(--duration-normal) var(--easing-ease-out)' },
|
|
688
|
+
'.animate-toast-slide-in-bottom': { 'animation': 'toast-slide-in-bottom var(--duration-slow) var(--easing-ease-out)' },
|
|
689
|
+
'.animate-toast-slide-out-bottom': { 'animation': 'toast-slide-out-bottom var(--duration-normal) var(--easing-ease-out)' },
|
|
690
|
+
'.animate-spin': { 'animation': 'spin var(--duration-spin) var(--easing-linear) infinite' },
|
|
691
|
+
'.animate-progress-stripe': { 'animation': 'progress-stripe var(--duration-spin) var(--easing-linear) infinite' },
|
|
692
|
+
'.animate-spinner-orbit': { 'animation': 'spinner-orbit var(--duration-spin) var(--easing-linear) infinite' },
|
|
693
|
+
'.animate-spinner-dot': { 'animation': 'spinner-dot var(--duration-spin) var(--easing-ease-in-out) infinite' },
|
|
694
|
+
'.animate-spinner-bar': { 'animation': 'spinner-bar var(--duration-spin) var(--easing-ease-in-out) infinite' },
|
|
695
|
+
'.animate-spinner-morph': { 'animation': 'spinner-morph var(--duration-spin) var(--easing-ease-in-out) infinite' },
|
|
696
|
+
'.animate-skeleton-pulse': { 'animation': 'skeleton-pulse var(--duration-spin) var(--easing-ease-in-out) infinite' },
|
|
697
|
+
'.animate-skeleton-wave': { 'animation': 'skeleton-wave var(--duration-spin) var(--easing-linear) infinite' },
|
|
698
|
+
})
|
|
699
|
+
},
|
|
700
|
+
],
|
|
701
|
+
}
|