@ivao/atmosphere-react 1.0.1 → 2.0.0-next.2
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/atmosphere-react.js +10064 -9374
- package/dist/atmosphere-react.js.map +1 -1
- package/dist/react-components.d.ts +8 -9
- package/dist/styles/index.css +1 -1
- package/package.json +65 -58
- package/src/styles/colors.css +98 -0
- package/src/styles/index.css +105 -0
- package/tailwind.preset.ts +237 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
|
|
3
|
+
@layer base {
|
|
4
|
+
:root {
|
|
5
|
+
--atmos-50: 182 197 249; /* #B6C5F9 */
|
|
6
|
+
--atmos-100: 164 182 247; /* #A4B6F7 */
|
|
7
|
+
--atmos-200: 126 152 244; /* #7E98F4 */
|
|
8
|
+
--atmos-300: 88 122 241; /* #587AF1 */
|
|
9
|
+
--atmos-400: 51 92 238; /* #335CEE */
|
|
10
|
+
--atmos-500: 19 66 228; /* #1342E4 */
|
|
11
|
+
--atmos-600: 16 55 191; /* #1037BF */
|
|
12
|
+
--atmos-700: 13 44 153; /* #0D2C99 */
|
|
13
|
+
--atmos-800: 9 29 101; /* #091D65 */
|
|
14
|
+
--atmos-900: 4 14 50; /* #040E32 */
|
|
15
|
+
--atmos: 13 44 153; /* #0D2C99 */
|
|
16
|
+
--ocean-50: 215 221 241; /* #D7DDF1 */
|
|
17
|
+
--ocean-100: 200 208 236; /* #C8D0EC */
|
|
18
|
+
--ocean-200: 170 182 225; /* #AAB6E1 */
|
|
19
|
+
--ocean-300: 140 156 215; /* #8C9CD7 */
|
|
20
|
+
--ocean-400: 109 131 204; /* #6D83CC */
|
|
21
|
+
--ocean-500: 79 105 194; /* #4F69C2 */
|
|
22
|
+
--ocean-600: 60 85 172; /* #3C55AC */
|
|
23
|
+
--ocean-700: 45 64 130; /* #2D4082 */
|
|
24
|
+
--ocean-800: 31 44 89; /* #1F2C59 */
|
|
25
|
+
--ocean-900: 16 23 47; /* #10172F */
|
|
26
|
+
--ocean: 60 85 172; /* #3C55AC */
|
|
27
|
+
--fuselage-50: 249 250 255; /* #f9faff */
|
|
28
|
+
--fuselage-100: 238 239 245; /* #EEEFF5 */
|
|
29
|
+
--fuselage-150: 224 225 236; /* #e0e1ec */
|
|
30
|
+
--fuselage-200: 210 211 224; /* #d2d3e0 */
|
|
31
|
+
--fuselage-250: 186 187 204; /* #babbcc */
|
|
32
|
+
--fuselage-300: 167 168 187; /* #a7a8bb */
|
|
33
|
+
--fuselage-400: 139 140 169; /* #8b8ca9 */
|
|
34
|
+
--fuselage-450: 116 117 152; /* #747598 */
|
|
35
|
+
--fuselage-500: 96 98 130; /* #606282 */
|
|
36
|
+
--fuselage-550: 79 80 107; /* #4f506b */
|
|
37
|
+
--fuselage-600: 61 63 84; /* #3d3f54 */
|
|
38
|
+
--fuselage-700: 44 45 60; /* #2c2d3c */
|
|
39
|
+
--fuselage-800: 33 33 46; /* #21212e */
|
|
40
|
+
--fuselage-900: 25 26 35; /* #191a23 */
|
|
41
|
+
--fuselage-950: 18 19 27; /* #12131B */
|
|
42
|
+
--semantic-red-50: 251 218 218; /* #FBDADA */
|
|
43
|
+
--semantic-red-100: 249 199 199; /* #F9C7C7 */
|
|
44
|
+
--semantic-red-200: 245 162 162; /* #F5A2A2 */
|
|
45
|
+
--semantic-red-300: 241 126 126; /* #F17E7E */
|
|
46
|
+
--semantic-red-400: 237 89 89; /* #ED5959 */
|
|
47
|
+
--semantic-red-500: 233 52 52; /* #E93434 */
|
|
48
|
+
--semantic-red-600: 207 22 22; /* #CF1616 */
|
|
49
|
+
--semantic-red-700: 156 17 17; /* #9C1111 */
|
|
50
|
+
--semantic-red-800: 105 11 11; /* #690B0B */
|
|
51
|
+
--semantic-red-900: 55 6 6; /* #370606 */
|
|
52
|
+
--semantic-red: 233 52 52; /* #E93434 */
|
|
53
|
+
--semantic-green-50: 188 239 206; /* #BCEFCE */
|
|
54
|
+
--semantic-green-100: 172 236 193; /* #ACECC1 */
|
|
55
|
+
--semantic-green-200: 138 228 169; /* #8AE4A9 */
|
|
56
|
+
--semantic-green-300: 105 220 145; /* #69DC91 */
|
|
57
|
+
--semantic-green-400: 72 213 120; /* #48D578 */
|
|
58
|
+
--semantic-green-500: 46 198 98; /* #2EC662 */
|
|
59
|
+
--semantic-green-600: 35 152 75; /* #23984B */
|
|
60
|
+
--semantic-green-700: 25 107 53; /* #196B35 */
|
|
61
|
+
--semantic-green-800: 14 61 30; /* #0E3D1E */
|
|
62
|
+
--semantic-green-900: 4 16 8; /* #041008 */
|
|
63
|
+
--semantic-green: 46 198 98; /* #2EC662 */
|
|
64
|
+
--semantic-yellow-50: 254 247 223; /* #FEF7DF */
|
|
65
|
+
--semantic-yellow-100: 254 242 203; /* #FEF2CB */
|
|
66
|
+
--semantic-yellow-200: 252 233 163; /* #FCE9A3 */
|
|
67
|
+
--semantic-yellow-300: 251 223 123; /* #FBDF7B */
|
|
68
|
+
--semantic-yellow-400: 250 214 84; /* #FAD654 */
|
|
69
|
+
--semantic-yellow-500: 249 204 44; /* #F9CC2C */
|
|
70
|
+
--semantic-yellow-600: 230 181 7; /* #E6B507 */
|
|
71
|
+
--semantic-yellow-700: 176 138 5; /* #B08A05 */
|
|
72
|
+
--semantic-yellow-800: 121 95 3; /* #795F03 */
|
|
73
|
+
--semantic-yellow-900: 67 52 2; /* #433402 */
|
|
74
|
+
--semantic-yellow: 249 204 44; /* #F9CC2C */
|
|
75
|
+
--semantic-blue-50: 250 251 253; /* #FAFBFD */
|
|
76
|
+
--semantic-blue-100: 237 242 250; /* #EDF2FA */
|
|
77
|
+
--semantic-blue-200: 219 229 244; /* #DBE5F4 */
|
|
78
|
+
--semantic-blue-300: 188 207 234; /* #BCCFEA */
|
|
79
|
+
--semantic-blue-400: 157 184 224; /* #9DB8E0 */
|
|
80
|
+
--semantic-blue-500: 126 162 214; /* #7EA2D6 */
|
|
81
|
+
--semantic-blue-600: 83 131 200; /* #5383C8 */
|
|
82
|
+
--semantic-blue-700: 55 103 173; /* #3767AD */
|
|
83
|
+
--semantic-blue-800: 41 78 130; /* #294E82 */
|
|
84
|
+
--semantic-blue-900: 28 52 88; /* #1C3458 */
|
|
85
|
+
--semantic-blue: 126 162 214; /* #7EA2D6 */
|
|
86
|
+
--product-creators: 139 92 246; /* #8b5cf6 */
|
|
87
|
+
--product-aurora-light: 75 127 126; /* #4b7f7e */
|
|
88
|
+
--product-aurora-mid: 49 91 90; /* #315b5a */
|
|
89
|
+
--product-aurora-dark: 8 38 40; /* #082628 */
|
|
90
|
+
--product-altitude-light: 98 123 160; /* #627ba0 */
|
|
91
|
+
--product-altitude-mid: 1 16 35; /* #011023 */
|
|
92
|
+
--product-altitude-dark: 0 3 7; /* #000307 */
|
|
93
|
+
--product-artifice-light: 234 152 78; /* #ea984e */
|
|
94
|
+
--product-artifice-mid: 229 128 46; /* #e5802e */
|
|
95
|
+
--product-artifice-dark: 226 110 23; /* #e26e17 */
|
|
96
|
+
--product-artifice-low: 168 103 0; /* #a86700 */
|
|
97
|
+
}
|
|
98
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@import './colors.css';
|
|
2
|
+
|
|
3
|
+
@tailwind base;
|
|
4
|
+
@tailwind components;
|
|
5
|
+
@tailwind utilities;
|
|
6
|
+
|
|
7
|
+
@layer base {
|
|
8
|
+
:root {
|
|
9
|
+
--background: var(--fuselage-50);
|
|
10
|
+
--foreground: var(--fuselage-800);
|
|
11
|
+
|
|
12
|
+
--card: var(--fuselage-100);
|
|
13
|
+
--card-foreground: var(--fuselage-800);
|
|
14
|
+
|
|
15
|
+
--popover: var(--fuselage-50);
|
|
16
|
+
--popover-foreground: var(--fuselage-800);
|
|
17
|
+
|
|
18
|
+
--primary: var(--atmos-700);
|
|
19
|
+
--primary-foreground: var(--atmos-50);
|
|
20
|
+
|
|
21
|
+
--secondary: var(--fuselage-100);
|
|
22
|
+
--secondary-foreground: var(--fuselage-800);
|
|
23
|
+
|
|
24
|
+
--muted: var(--fuselage-200);
|
|
25
|
+
--muted-foreground: var(--fuselage-500);
|
|
26
|
+
|
|
27
|
+
--accent: var(--fuselage-250);
|
|
28
|
+
--accent-foreground: var(--fuselage-500);
|
|
29
|
+
|
|
30
|
+
--destructive: var(--semantic-red-600);
|
|
31
|
+
--destructive-foreground: var(--semantic-red-50);
|
|
32
|
+
|
|
33
|
+
--border: var(--fuselage-150);
|
|
34
|
+
--input: var(--fuselage-150);
|
|
35
|
+
--ring: var(--fuselage-200);
|
|
36
|
+
|
|
37
|
+
--radius: 0.6rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dark {
|
|
41
|
+
--background: var(--fuselage-950);
|
|
42
|
+
--foreground: var(--fuselage-100);
|
|
43
|
+
|
|
44
|
+
--card: var(--fuselage-900);
|
|
45
|
+
--card-foreground: var(--fuselage-200);
|
|
46
|
+
|
|
47
|
+
--popover: var(--fuselage-950);
|
|
48
|
+
--popover-foreground: var(--fuselage-200);
|
|
49
|
+
|
|
50
|
+
--primary: var(--fuselage-50);
|
|
51
|
+
--primary-foreground: var(--fuselage-800);
|
|
52
|
+
|
|
53
|
+
--secondary: var(--fuselage-800);
|
|
54
|
+
--secondary-foreground: var(--fuselage-100);
|
|
55
|
+
|
|
56
|
+
--muted: var(--fuselage-700);
|
|
57
|
+
--muted-foreground: var(--fuselage-500);
|
|
58
|
+
|
|
59
|
+
--accent: var(--fuselage-700);
|
|
60
|
+
--accent-foreground: var(--fuselage-300);
|
|
61
|
+
|
|
62
|
+
--destructive: var(--semantic-red-600);
|
|
63
|
+
--destructive-foreground: var(--semantic-red-50);
|
|
64
|
+
|
|
65
|
+
--border: var(--fuselage-700);
|
|
66
|
+
--input: var(--fuselage-900);
|
|
67
|
+
--ring: var(--fuselage-800);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
body {
|
|
71
|
+
@apply bg-background text-foreground;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
h1 {
|
|
75
|
+
@apply text-4xl font-bold text-fuselage-800 dark:text-fuselage-50;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h2,
|
|
79
|
+
h3,
|
|
80
|
+
h4,
|
|
81
|
+
h5,
|
|
82
|
+
h6 {
|
|
83
|
+
@apply font-semibold text-fuselage-400 dark:text-fuselage-300;
|
|
84
|
+
}
|
|
85
|
+
h2 {
|
|
86
|
+
@apply text-3xl;
|
|
87
|
+
}
|
|
88
|
+
h3 {
|
|
89
|
+
@apply text-2xl;
|
|
90
|
+
}
|
|
91
|
+
h4 {
|
|
92
|
+
@apply text-xl;
|
|
93
|
+
}
|
|
94
|
+
h5 {
|
|
95
|
+
@apply text-lg;
|
|
96
|
+
}
|
|
97
|
+
h6 {
|
|
98
|
+
@apply text-base;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.border,
|
|
102
|
+
.border-color-default {
|
|
103
|
+
@apply border-fuselage-150 dark:border-fuselage-700;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import { colors, fonts } from '@ivao/atmosphere-brand';
|
|
2
|
+
|
|
3
|
+
import { type Config } from 'tailwindcss';
|
|
4
|
+
import animatePlugin from 'tailwindcss-animate';
|
|
5
|
+
import radixPlugin from 'tailwindcss-radix';
|
|
6
|
+
import defaultTheme from 'tailwindcss/defaultTheme';
|
|
7
|
+
|
|
8
|
+
interface Colors {
|
|
9
|
+
[key: string]: string | Colors;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const convertColorsToCSSVariables = (
|
|
13
|
+
colors: Colors,
|
|
14
|
+
prefix: string = '--',
|
|
15
|
+
): Colors => {
|
|
16
|
+
return Object.entries(colors).reduce<Colors>((acc, [key, value]) => {
|
|
17
|
+
if (typeof value === 'object') {
|
|
18
|
+
return {
|
|
19
|
+
...acc,
|
|
20
|
+
[key]: convertColorsToCSSVariables(
|
|
21
|
+
value,
|
|
22
|
+
`${prefix}${prefix.length === 2 ? '' : '-'}${key}`,
|
|
23
|
+
),
|
|
24
|
+
};
|
|
25
|
+
} else {
|
|
26
|
+
return {
|
|
27
|
+
...acc,
|
|
28
|
+
[key]:
|
|
29
|
+
'rgb(var(' +
|
|
30
|
+
(key === 'DEFAULT' ? prefix : `${prefix}-${key}`) +
|
|
31
|
+
') / <alpha-value>)',
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
}, {});
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const tailwindColors = convertColorsToCSSVariables(colors);
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
darkMode: 'class',
|
|
41
|
+
safelist: ['dark'],
|
|
42
|
+
theme: {
|
|
43
|
+
screens: {
|
|
44
|
+
xs: '400px',
|
|
45
|
+
...defaultTheme.screens,
|
|
46
|
+
},
|
|
47
|
+
container: {
|
|
48
|
+
center: true,
|
|
49
|
+
padding: '2rem',
|
|
50
|
+
screens: {
|
|
51
|
+
'2xl': '1400px',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
extend: {
|
|
55
|
+
colors: {
|
|
56
|
+
...tailwindColors,
|
|
57
|
+
/*
|
|
58
|
+
* Shadcn UI Color Palette for components
|
|
59
|
+
* @see ui.shadcn.com
|
|
60
|
+
*/
|
|
61
|
+
border: 'rgb(var(--border) / <alpha-value>)',
|
|
62
|
+
input: 'rgb(var(--input) / <alpha-value>)',
|
|
63
|
+
ring: 'rgb(var(--ring) / <alpha-value>)',
|
|
64
|
+
background: 'rgb(var(--background) / <alpha-value>)',
|
|
65
|
+
foreground: 'rgb(var(--foreground) / <alpha-value>)',
|
|
66
|
+
primary: {
|
|
67
|
+
DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
|
|
68
|
+
foreground: 'rgb(var(--primary-foreground) / <alpha-value>)',
|
|
69
|
+
},
|
|
70
|
+
secondary: {
|
|
71
|
+
DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
|
|
72
|
+
foreground: 'rgb(var(--secondary-foreground) / <alpha-value>)',
|
|
73
|
+
},
|
|
74
|
+
destructive: {
|
|
75
|
+
DEFAULT: 'rgb(var(--destructive) / <alpha-value>)',
|
|
76
|
+
foreground: 'rgb(var(--destructive-foreground) / <alpha-value>)',
|
|
77
|
+
},
|
|
78
|
+
muted: {
|
|
79
|
+
DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
|
|
80
|
+
foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
|
|
81
|
+
},
|
|
82
|
+
accent: {
|
|
83
|
+
DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
|
|
84
|
+
foreground: 'rgb(var(--accent-foreground) / <alpha-value>)',
|
|
85
|
+
},
|
|
86
|
+
popover: {
|
|
87
|
+
DEFAULT: 'rgb(var(--popover) / <alpha-value>)',
|
|
88
|
+
foreground: 'rgb(var(--popover-foreground) / <alpha-value>)',
|
|
89
|
+
},
|
|
90
|
+
card: {
|
|
91
|
+
DEFAULT: 'rgb(var(--card) / <alpha-value>)',
|
|
92
|
+
foreground: 'rgb(var(--card-foreground) / <alpha-value>)',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
borderRadius: {
|
|
96
|
+
lg: 'var(--radius)',
|
|
97
|
+
md: 'calc(var(--radius) - 2px)',
|
|
98
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
99
|
+
},
|
|
100
|
+
fontFamily: {
|
|
101
|
+
head: [fonts.head],
|
|
102
|
+
sans: [fonts.sans, ...defaultTheme.fontFamily.sans],
|
|
103
|
+
mono: [fonts.mono, ...defaultTheme.fontFamily.mono],
|
|
104
|
+
},
|
|
105
|
+
keyframes: {
|
|
106
|
+
'accordion-down': {
|
|
107
|
+
from: { height: '0' },
|
|
108
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
109
|
+
},
|
|
110
|
+
'accordion-up': {
|
|
111
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
112
|
+
to: { height: '0' },
|
|
113
|
+
},
|
|
114
|
+
// Dropdown menu
|
|
115
|
+
'scale-in': {
|
|
116
|
+
'0%': { opacity: '0', transform: 'scale(0)' },
|
|
117
|
+
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
118
|
+
},
|
|
119
|
+
'slide-down': {
|
|
120
|
+
'0%': { opacity: '0', transform: 'translateY(-10px)' },
|
|
121
|
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
122
|
+
},
|
|
123
|
+
'slide-up': {
|
|
124
|
+
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
125
|
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
126
|
+
},
|
|
127
|
+
// Tooltip
|
|
128
|
+
'slide-up-fade': {
|
|
129
|
+
'0%': { opacity: '0', transform: 'translateY(2px)' },
|
|
130
|
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
131
|
+
},
|
|
132
|
+
'slide-right-fade': {
|
|
133
|
+
'0%': { opacity: '0', transform: 'translateX(-2px)' },
|
|
134
|
+
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
135
|
+
},
|
|
136
|
+
'slide-down-fade': {
|
|
137
|
+
'0%': { opacity: '0', transform: 'translateY(-2px)' },
|
|
138
|
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
139
|
+
},
|
|
140
|
+
'slide-left-fade': {
|
|
141
|
+
'0%': { opacity: '0', transform: 'translateX(2px)' },
|
|
142
|
+
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
143
|
+
},
|
|
144
|
+
// Navigation menu
|
|
145
|
+
'enter-from-right': {
|
|
146
|
+
'0%': { transform: 'translateX(200px)', opacity: '0' },
|
|
147
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
148
|
+
},
|
|
149
|
+
'enter-from-left': {
|
|
150
|
+
'0%': { transform: 'translateX(-200px)', opacity: '0' },
|
|
151
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
152
|
+
},
|
|
153
|
+
'exit-to-right': {
|
|
154
|
+
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
155
|
+
'100%': { transform: 'translateX(200px)', opacity: '0' },
|
|
156
|
+
},
|
|
157
|
+
'exit-to-left': {
|
|
158
|
+
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
159
|
+
'100%': { transform: 'translateX(-200px)', opacity: '0' },
|
|
160
|
+
},
|
|
161
|
+
'scale-in-content': {
|
|
162
|
+
'0%': { transform: 'rotateX(-30deg) scale(0.9)', opacity: '0' },
|
|
163
|
+
'100%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
|
|
164
|
+
},
|
|
165
|
+
'scale-out-content': {
|
|
166
|
+
'0%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
|
|
167
|
+
'100%': { transform: 'rotateX(-10deg) scale(0.95)', opacity: '0' },
|
|
168
|
+
},
|
|
169
|
+
'fade-in': {
|
|
170
|
+
'0%': { opacity: '0' },
|
|
171
|
+
'100%': { opacity: '1' },
|
|
172
|
+
},
|
|
173
|
+
'fade-out': {
|
|
174
|
+
'0%': { opacity: '1' },
|
|
175
|
+
'100%': { opacity: '0' },
|
|
176
|
+
},
|
|
177
|
+
// Toast
|
|
178
|
+
'toast-hide': {
|
|
179
|
+
'0%': { opacity: '1' },
|
|
180
|
+
'100%': { opacity: '0' },
|
|
181
|
+
},
|
|
182
|
+
'toast-slide-in-right': {
|
|
183
|
+
'0%': { transform: `translateX(calc(100% + 1rem))` },
|
|
184
|
+
'100%': { transform: 'translateX(0)' },
|
|
185
|
+
},
|
|
186
|
+
'toast-slide-in-bottom': {
|
|
187
|
+
'0%': { transform: `translateY(calc(100% + 1rem))` },
|
|
188
|
+
'100%': { transform: 'translateY(0)' },
|
|
189
|
+
},
|
|
190
|
+
'toast-swipe-out-x': {
|
|
191
|
+
'0%': { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
|
|
192
|
+
'100%': {
|
|
193
|
+
transform: `translateX(calc(100% + 1rem))`,
|
|
194
|
+
},
|
|
195
|
+
},
|
|
196
|
+
'toast-swipe-out-y': {
|
|
197
|
+
'0%': { transform: 'translateY(var(--radix-toast-swipe-end-y))' },
|
|
198
|
+
'100%': {
|
|
199
|
+
transform: `translateY(calc(100% + 1rem))`,
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
animation: {
|
|
204
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
205
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
206
|
+
// Dropdown menu
|
|
207
|
+
'scale-in': 'scale-in 0.2s ease-in-out',
|
|
208
|
+
'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
209
|
+
'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
210
|
+
// Tooltip
|
|
211
|
+
'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
212
|
+
'slide-right-fade':
|
|
213
|
+
'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
214
|
+
'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
215
|
+
'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
216
|
+
// Navigation menu
|
|
217
|
+
'enter-from-right': 'enter-from-right 0.25s ease',
|
|
218
|
+
'enter-from-left': 'enter-from-left 0.25s ease',
|
|
219
|
+
'exit-to-right': 'exit-to-right 0.25s ease',
|
|
220
|
+
'exit-to-left': 'exit-to-left 0.25s ease',
|
|
221
|
+
'scale-in-content': 'scale-in-content 0.2s ease',
|
|
222
|
+
'scale-out-content': 'scale-out-content 0.2s ease',
|
|
223
|
+
'fade-in': 'fade-in 0.2s ease',
|
|
224
|
+
'fade-out': 'fade-out 0.2s ease',
|
|
225
|
+
// Toast
|
|
226
|
+
'toast-hide': 'toast-hide 100ms ease-in forwards',
|
|
227
|
+
'toast-slide-in-right':
|
|
228
|
+
'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
229
|
+
'toast-slide-in-bottom':
|
|
230
|
+
'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
231
|
+
'toast-swipe-out-x': 'toast-swipe-out-x 100ms ease-out forwards',
|
|
232
|
+
'toast-swipe-out-y': 'toast-swipe-out-y 100ms ease-out forwards',
|
|
233
|
+
},
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
plugins: [animatePlugin, radixPlugin],
|
|
237
|
+
} satisfies Partial<Config>;
|