@ztwoint/z-ui 0.1.50 → 0.1.52

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.
@@ -3,393 +3,393 @@
3
3
  /* TODO: A lot of these overlap with tailwind's defaults. We should only append the changes */
4
4
 
5
5
  :root {
6
- /* Neutral Colors */
7
- --neutral-00: #ffffff;
8
- --neutral-25: #fafafa;
9
- --neutral-50: #f6f6f6;
10
- --neutral-75: #f0f0f0;
11
- --neutral-100: #e7e7e7;
12
- --neutral-150: #e0e0e0;
13
- --neutral-200: #d1d1d1;
14
- --neutral-300: #b0b0b0;
15
- --neutral-400: #888888;
16
- --neutral-500: #6d6d6d;
17
- --neutral-600: #5d5d5d;
18
- --neutral-700: #4f4f4f;
19
- --neutral-800: #454545;
20
- --neutral-900: #3d3d3d;
21
- --neutral-950: #000000;
22
-
23
- /* Blue Colors */
24
- --blue-50: #eff6ff;
25
- --blue-100: #dbeafe;
26
- --blue-200: #bfdbfe;
27
- --blue-300: #93c5fd;
28
- --blue-400: #60a5fa;
29
- --blue-500: #3b82f6;
30
- --blue-600: #2563eb;
31
- --blue-700: #1d4ed8;
32
- --blue-800: #1e40af;
33
- --blue-900: #1e3a8a;
34
- --blue-950: #172554;
35
-
36
- /* Red Colors */
37
- --red-50: #fef2f2;
38
- --red-100: #fee2e2;
39
- --red-200: #fecaca;
40
- --red-300: #fca5a5;
41
- --red-400: #f87171;
42
- --red-500: #ef4444;
43
- --red-600: #dc2626;
44
- --red-700: #b91c1c;
45
- --red-800: #991b1b;
46
- --red-900: #7f1d1d;
47
- --red-950: #450a0a;
48
-
49
- /* Amber Colors */
50
- --amber-50: #fffbeb;
51
- --amber-100: #fef3c7;
52
- --amber-200: #fde68a;
53
- --amber-300: #fcd34d;
54
- --amber-400: #fbbf24;
55
- --amber-500: #f59e0b;
56
- --amber-600: #d97706;
57
- --amber-700: #b45309;
58
- --amber-800: #92400e;
59
- --amber-900: #78350f;
60
- --amber-950: #451a03;
61
-
62
- /* Green Colors */
63
- --green-50: #f0fdf4;
64
- --green-100: #dcfce7;
65
- --green-200: #bbf7d0;
66
- --green-300: #86efac;
67
- --green-400: #4ade80;
68
- --green-500: #22c55e;
69
- --green-600: #16a34a;
70
- --green-700: #15803d;
71
- --green-800: #166534;
72
- --green-900: #14532d;
73
- --green-950: #052e16;
74
-
75
- /* Violet Colors */
76
- --violet-50: #faf5ff;
77
- --violet-100: #ede9fe;
78
- --violet-200: #ddd6fe;
79
- --violet-300: #c4b5fd;
80
- --violet-400: #a78bfa;
81
- --violet-500: #8b5cf6;
82
- --violet-600: #7c3aed;
83
- --violet-700: #6d28d9;
84
- --violet-800: #5b21b6;
85
- --violet-900: #4c1d95;
86
- --violet-950: #2e1065;
87
-
88
- /* Sky Colors */
89
- --sky-50: #f0f9ff;
90
- --sky-100: #e0f2fe;
91
- --sky-200: #bae6fd;
92
- --sky-300: #7dd3fc;
93
- --sky-400: #38bdf8;
94
- --sky-500: #0ea5e9;
95
- --sky-600: #0284c7;
96
- --sky-700: #0369a1;
97
- --sky-800: #075985;
98
- --sky-900: #0c4a6e;
99
- --sky-950: #082f49;
100
-
101
- /* Alpha One (Black with opacity in light mode) */
102
- --alpha-one-0: rgba(0, 0, 0, 0);
103
- --alpha-one-50: rgba(0, 0, 0, 0.05);
104
- --alpha-one-100: rgba(0, 0, 0, 0.1);
105
- --alpha-one-150: rgba(0, 0, 0, 0.15);
106
- --alpha-one-200: rgba(0, 0, 0, 0.2);
107
- --alpha-one-300: rgba(0, 0, 0, 0.3);
108
- --alpha-one-400: rgba(0, 0, 0, 0.4);
109
- --alpha-one-500: rgba(0, 0, 0, 0.5);
110
- --alpha-one-600: rgba(0, 0, 0, 0.6);
111
- --alpha-one-700: rgba(0, 0, 0, 0.7);
112
- --alpha-one-800: rgba(0, 0, 0, 0.8);
113
- --alpha-one-900: rgba(0, 0, 0, 0.9);
114
-
115
- /* Alpha Two (White with opacity in light mode) */
116
- --alpha-two-0: rgba(255, 255, 255, 0);
117
- --alpha-two-50: rgba(255, 255, 255, 0.05);
118
- --alpha-two-100: rgba(255, 255, 255, 0.1);
119
- --alpha-two-150: rgba(255, 255, 255, 0.15);
120
- --alpha-two-200: rgba(255, 255, 255, 0.2);
121
- --alpha-two-300: rgba(255, 255, 255, 0.3);
122
- --alpha-two-400: rgba(255, 255, 255, 0.4);
123
- --alpha-two-500: rgba(255, 255, 255, 0.5);
124
- --alpha-two-600: rgba(255, 255, 255, 0.6);
125
- --alpha-two-700: rgba(255, 255, 255, 0.7);
126
- --alpha-two-800: rgba(255, 255, 255, 0.8);
127
- --alpha-two-900: rgba(255, 255, 255, 0.9);
128
-
129
- --shadow-custom:
130
- 0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
131
- --shadow-default:
132
- 0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
133
-
134
- --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
6
+ /* Neutral Colors */
7
+ --neutral-00: #ffffff;
8
+ --neutral-25: #fafafa;
9
+ --neutral-50: #f6f6f6;
10
+ --neutral-75: #f0f0f0;
11
+ --neutral-100: #e7e7e7;
12
+ --neutral-150: #e0e0e0;
13
+ --neutral-200: #d1d1d1;
14
+ --neutral-300: #b0b0b0;
15
+ --neutral-400: #888888;
16
+ --neutral-500: #6d6d6d;
17
+ --neutral-600: #5d5d5d;
18
+ --neutral-700: #4f4f4f;
19
+ --neutral-800: #454545;
20
+ --neutral-900: #3d3d3d;
21
+ --neutral-950: #000000;
22
+
23
+ /* Blue Colors */
24
+ --blue-50: #eff6ff;
25
+ --blue-100: #dbeafe;
26
+ --blue-200: #bfdbfe;
27
+ --blue-300: #93c5fd;
28
+ --blue-400: #60a5fa;
29
+ --blue-500: #3b82f6;
30
+ --blue-600: #2563eb;
31
+ --blue-700: #1d4ed8;
32
+ --blue-800: #1e40af;
33
+ --blue-900: #1e3a8a;
34
+ --blue-950: #172554;
35
+
36
+ /* Red Colors */
37
+ --red-50: #fef2f2;
38
+ --red-100: #fee2e2;
39
+ --red-200: #fecaca;
40
+ --red-300: #fca5a5;
41
+ --red-400: #f87171;
42
+ --red-500: #ef4444;
43
+ --red-600: #dc2626;
44
+ --red-700: #b91c1c;
45
+ --red-800: #991b1b;
46
+ --red-900: #7f1d1d;
47
+ --red-950: #450a0a;
48
+
49
+ /* Amber Colors */
50
+ --amber-50: #fffbeb;
51
+ --amber-100: #fef3c7;
52
+ --amber-200: #fde68a;
53
+ --amber-300: #fcd34d;
54
+ --amber-400: #fbbf24;
55
+ --amber-500: #f59e0b;
56
+ --amber-600: #d97706;
57
+ --amber-700: #b45309;
58
+ --amber-800: #92400e;
59
+ --amber-900: #78350f;
60
+ --amber-950: #451a03;
61
+
62
+ /* Green Colors */
63
+ --green-50: #f0fdf4;
64
+ --green-100: #dcfce7;
65
+ --green-200: #bbf7d0;
66
+ --green-300: #86efac;
67
+ --green-400: #4ade80;
68
+ --green-500: #22c55e;
69
+ --green-600: #16a34a;
70
+ --green-700: #15803d;
71
+ --green-800: #166534;
72
+ --green-900: #14532d;
73
+ --green-950: #052e16;
74
+
75
+ /* Violet Colors */
76
+ --violet-50: #faf5ff;
77
+ --violet-100: #ede9fe;
78
+ --violet-200: #ddd6fe;
79
+ --violet-300: #c4b5fd;
80
+ --violet-400: #a78bfa;
81
+ --violet-500: #8b5cf6;
82
+ --violet-600: #7c3aed;
83
+ --violet-700: #6d28d9;
84
+ --violet-800: #5b21b6;
85
+ --violet-900: #4c1d95;
86
+ --violet-950: #2e1065;
87
+
88
+ /* Sky Colors */
89
+ --sky-50: #f0f9ff;
90
+ --sky-100: #e0f2fe;
91
+ --sky-200: #bae6fd;
92
+ --sky-300: #7dd3fc;
93
+ --sky-400: #38bdf8;
94
+ --sky-500: #0ea5e9;
95
+ --sky-600: #0284c7;
96
+ --sky-700: #0369a1;
97
+ --sky-800: #075985;
98
+ --sky-900: #0c4a6e;
99
+ --sky-950: #082f49;
100
+
101
+ /* Alpha One (Black with opacity in light mode) */
102
+ --alpha-one-0: rgba(0, 0, 0, 0);
103
+ --alpha-one-50: rgba(0, 0, 0, 0.05);
104
+ --alpha-one-100: rgba(0, 0, 0, 0.1);
105
+ --alpha-one-150: rgba(0, 0, 0, 0.15);
106
+ --alpha-one-200: rgba(0, 0, 0, 0.2);
107
+ --alpha-one-300: rgba(0, 0, 0, 0.3);
108
+ --alpha-one-400: rgba(0, 0, 0, 0.4);
109
+ --alpha-one-500: rgba(0, 0, 0, 0.5);
110
+ --alpha-one-600: rgba(0, 0, 0, 0.6);
111
+ --alpha-one-700: rgba(0, 0, 0, 0.7);
112
+ --alpha-one-800: rgba(0, 0, 0, 0.8);
113
+ --alpha-one-900: rgba(0, 0, 0, 0.9);
114
+
115
+ /* Alpha Two (White with opacity in light mode) */
116
+ --alpha-two-0: rgba(255, 255, 255, 0);
117
+ --alpha-two-50: rgba(255, 255, 255, 0.05);
118
+ --alpha-two-100: rgba(255, 255, 255, 0.1);
119
+ --alpha-two-150: rgba(255, 255, 255, 0.15);
120
+ --alpha-two-200: rgba(255, 255, 255, 0.2);
121
+ --alpha-two-300: rgba(255, 255, 255, 0.3);
122
+ --alpha-two-400: rgba(255, 255, 255, 0.4);
123
+ --alpha-two-500: rgba(255, 255, 255, 0.5);
124
+ --alpha-two-600: rgba(255, 255, 255, 0.6);
125
+ --alpha-two-700: rgba(255, 255, 255, 0.7);
126
+ --alpha-two-800: rgba(255, 255, 255, 0.8);
127
+ --alpha-two-900: rgba(255, 255, 255, 0.9);
128
+
129
+ --shadow-custom:
130
+ 0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
131
+ --shadow-default:
132
+ 0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
133
+
134
+ --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
135
135
  }
136
136
 
137
137
  .dark {
138
- /* Neutral Colors - Dark Mode */
139
- --neutral-00: #141414;
140
- --neutral-25: rgba(255, 255, 255, 0.025);
141
- --neutral-50: rgba(255, 255, 255, 0.05);
142
- --neutral-75: rgba(255, 255, 255, 0.075);
143
- --neutral-100: rgba(255, 255, 255, 0.1);
144
- --neutral-150: rgba(255, 255, 255, 0.15);
145
- --neutral-200: rgba(255, 255, 255, 0.2);
146
- --neutral-300: rgba(255, 255, 255, 0.3);
147
- --neutral-400: rgba(255, 255, 255, 0.4);
148
- --neutral-500: rgba(255, 255, 255, 0.5);
149
- --neutral-600: rgba(255, 255, 255, 0.6);
150
- --neutral-700: rgba(255, 255, 255, 0.7);
151
- --neutral-800: rgba(255, 255, 255, 0.8);
152
- --neutral-900: rgba(255, 255, 255, 0.9);
153
- --neutral-950: #ffffff;
154
-
155
- /* Blue Colors - Dark Mode */
156
- --blue-50: #181f2b;
157
- --blue-100: #203558;
158
- --blue-200: #284b85;
159
- --blue-300: #2f61b2;
160
- --blue-400: #3777df;
161
- --blue-500: #3b82f6;
162
- --blue-600: #4f8ef7;
163
- --blue-700: #76a8f9;
164
- --blue-800: #9dc1fb;
165
- --blue-900: #c4d9fc;
166
- --blue-950: #ebf2fe;
167
-
168
- /* Red Colors - Dark Mode */
169
- --red-50: #2a1919;
170
- --red-100: #562222;
171
- --red-200: #812c2c;
172
- --red-300: #ad3636;
173
- --red-400: #d93f3f;
174
- --red-500: #ef4444;
175
- --red-600: #f15757;
176
- --red-700: #f47c7c;
177
- --red-800: #f7a1a1;
178
- --red-900: #fac7c7;
179
- --red-950: #fdecec;
180
-
181
- /* Amber Colors - Dark Mode */
182
- --amber-50: #2b2213;
183
- --amber-100: #583d11;
184
- --amber-200: #845910;
185
- --amber-300: #b1750e;
186
- --amber-400: #de900c;
187
- --amber-500: #f59e0b;
188
- --amber-600: #f6a823;
189
- --amber-700: #f8bb54;
190
- --amber-800: #facf85;
191
- --amber-900: #fce2b6;
192
- --amber-950: #fef5e7;
193
-
194
- /* Green Colors - Dark Mode */
195
- --green-50: #15261b;
196
- --green-100: #18492a;
197
- --green-200: #1b6d39;
198
- --green-300: #1e9048;
199
- --green-400: #21b357;
200
- --green-500: #22c55e;
201
- --green-600: #38cb6e;
202
- --green-700: #64d68e;
203
- --green-800: #90e2ae;
204
- --green-900: #bdeecf;
205
- --green-950: #e9f9ef;
206
-
207
- /* Violet Colors - Dark Mode */
208
- --violet-50: #201b2b;
209
- --violet-100: #382a58;
210
- --violet-200: #503885;
211
- --violet-300: #6746b2;
212
- --violet-400: #7f55df;
213
- --violet-500: #8b5cf6;
214
- --violet-600: #976cf7;
215
- --violet-700: #ae8df9;
216
- --violet-800: #c5adfb;
217
- --violet-900: #dccefc;
218
- --violet-950: #f3effe;
219
-
220
- /* Sky Colors - Dark Mode */
221
- --sky-50: #132329;
222
- --sky-100: #124054;
223
- --sky-200: #115d7f;
224
- --sky-300: #107aa9;
225
- --sky-400: #0f96d4;
226
- --sky-500: #0ea5e9;
227
- --sky-600: #26aeeb;
228
- --sky-700: #56c0f0;
229
- --sky-800: #86d2f4;
230
- --sky-900: #b7e4f8;
231
- --sky-950: #e7f6fd;
232
-
233
- /* Alpha One (White with opacity in dark mode) */
234
- --alpha-one-0: rgba(255, 255, 255, 0);
235
- --alpha-one-50: rgba(255, 255, 255, 0.05);
236
- --alpha-one-100: rgba(255, 255, 255, 0.1);
237
- --alpha-one-150: rgba(255, 255, 255, 0.15);
238
- --alpha-one-200: rgba(255, 255, 255, 0.2);
239
- --alpha-one-300: rgba(255, 255, 255, 0.3);
240
- --alpha-one-400: rgba(255, 255, 255, 0.4);
241
- --alpha-one-500: rgba(255, 255, 255, 0.5);
242
- --alpha-one-600: rgba(255, 255, 255, 0.6);
243
- --alpha-one-700: rgba(255, 255, 255, 0.7);
244
- --alpha-one-800: rgba(255, 255, 255, 0.8);
245
- --alpha-one-900: rgba(255, 255, 255, 0.9);
246
-
247
- /* Alpha Two (Black with opacity in dark mode) */
248
- --alpha-two-0: rgba(0, 0, 0, 0);
249
- --alpha-two-50: rgba(0, 0, 0, 0.05);
250
- --alpha-two-100: rgba(0, 0, 0, 0.1);
251
- --alpha-two-150: rgba(0, 0, 0, 0.15);
252
- --alpha-two-200: rgba(0, 0, 0, 0.2);
253
- --alpha-two-300: rgba(0, 0, 0, 0.3);
254
- --alpha-two-400: rgba(0, 0, 0, 0.4);
255
- --alpha-two-500: rgba(0, 0, 0, 0.5);
256
- --alpha-two-600: rgba(0, 0, 0, 0.6);
257
- --alpha-two-700: rgba(0, 0, 0, 0.7);
258
- --alpha-two-800: rgba(0, 0, 0, 0.8);
259
- --alpha-two-900: rgba(0, 0, 0, 0.9);
260
-
261
- --shadow-custom:
262
- 0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
263
- --shadow-default:
264
- 0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
265
-
266
- --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
138
+ /* Neutral Colors - Dark Mode */
139
+ --neutral-00: #141414;
140
+ --neutral-25: rgba(255, 255, 255, 0.025);
141
+ --neutral-50: rgba(255, 255, 255, 0.05);
142
+ --neutral-75: rgba(255, 255, 255, 0.075);
143
+ --neutral-100: rgba(255, 255, 255, 0.1);
144
+ --neutral-150: rgba(255, 255, 255, 0.15);
145
+ --neutral-200: rgba(255, 255, 255, 0.2);
146
+ --neutral-300: rgba(255, 255, 255, 0.3);
147
+ --neutral-400: rgba(255, 255, 255, 0.4);
148
+ --neutral-500: rgba(255, 255, 255, 0.5);
149
+ --neutral-600: rgba(255, 255, 255, 0.6);
150
+ --neutral-700: rgba(255, 255, 255, 0.7);
151
+ --neutral-800: rgba(255, 255, 255, 0.8);
152
+ --neutral-900: rgba(255, 255, 255, 0.9);
153
+ --neutral-950: #ffffff;
154
+
155
+ /* Blue Colors - Dark Mode */
156
+ --blue-50: #181f2b;
157
+ --blue-100: #203558;
158
+ --blue-200: #284b85;
159
+ --blue-300: #2f61b2;
160
+ --blue-400: #3777df;
161
+ --blue-500: #3b82f6;
162
+ --blue-600: #4f8ef7;
163
+ --blue-700: #76a8f9;
164
+ --blue-800: #9dc1fb;
165
+ --blue-900: #c4d9fc;
166
+ --blue-950: #ebf2fe;
167
+
168
+ /* Red Colors - Dark Mode */
169
+ --red-50: #2a1919;
170
+ --red-100: #562222;
171
+ --red-200: #812c2c;
172
+ --red-300: #ad3636;
173
+ --red-400: #d93f3f;
174
+ --red-500: #ef4444;
175
+ --red-600: #f15757;
176
+ --red-700: #f47c7c;
177
+ --red-800: #f7a1a1;
178
+ --red-900: #fac7c7;
179
+ --red-950: #fdecec;
180
+
181
+ /* Amber Colors - Dark Mode */
182
+ --amber-50: #2b2213;
183
+ --amber-100: #583d11;
184
+ --amber-200: #845910;
185
+ --amber-300: #b1750e;
186
+ --amber-400: #de900c;
187
+ --amber-500: #f59e0b;
188
+ --amber-600: #f6a823;
189
+ --amber-700: #f8bb54;
190
+ --amber-800: #facf85;
191
+ --amber-900: #fce2b6;
192
+ --amber-950: #fef5e7;
193
+
194
+ /* Green Colors - Dark Mode */
195
+ --green-50: #15261b;
196
+ --green-100: #18492a;
197
+ --green-200: #1b6d39;
198
+ --green-300: #1e9048;
199
+ --green-400: #21b357;
200
+ --green-500: #22c55e;
201
+ --green-600: #38cb6e;
202
+ --green-700: #64d68e;
203
+ --green-800: #90e2ae;
204
+ --green-900: #bdeecf;
205
+ --green-950: #e9f9ef;
206
+
207
+ /* Violet Colors - Dark Mode */
208
+ --violet-50: #201b2b;
209
+ --violet-100: #382a58;
210
+ --violet-200: #503885;
211
+ --violet-300: #6746b2;
212
+ --violet-400: #7f55df;
213
+ --violet-500: #8b5cf6;
214
+ --violet-600: #976cf7;
215
+ --violet-700: #ae8df9;
216
+ --violet-800: #c5adfb;
217
+ --violet-900: #dccefc;
218
+ --violet-950: #f3effe;
219
+
220
+ /* Sky Colors - Dark Mode */
221
+ --sky-50: #132329;
222
+ --sky-100: #124054;
223
+ --sky-200: #115d7f;
224
+ --sky-300: #107aa9;
225
+ --sky-400: #0f96d4;
226
+ --sky-500: #0ea5e9;
227
+ --sky-600: #26aeeb;
228
+ --sky-700: #56c0f0;
229
+ --sky-800: #86d2f4;
230
+ --sky-900: #b7e4f8;
231
+ --sky-950: #e7f6fd;
232
+
233
+ /* Alpha One (White with opacity in dark mode) */
234
+ --alpha-one-0: rgba(255, 255, 255, 0);
235
+ --alpha-one-50: rgba(255, 255, 255, 0.05);
236
+ --alpha-one-100: rgba(255, 255, 255, 0.1);
237
+ --alpha-one-150: rgba(255, 255, 255, 0.15);
238
+ --alpha-one-200: rgba(255, 255, 255, 0.2);
239
+ --alpha-one-300: rgba(255, 255, 255, 0.3);
240
+ --alpha-one-400: rgba(255, 255, 255, 0.4);
241
+ --alpha-one-500: rgba(255, 255, 255, 0.5);
242
+ --alpha-one-600: rgba(255, 255, 255, 0.6);
243
+ --alpha-one-700: rgba(255, 255, 255, 0.7);
244
+ --alpha-one-800: rgba(255, 255, 255, 0.8);
245
+ --alpha-one-900: rgba(255, 255, 255, 0.9);
246
+
247
+ /* Alpha Two (Black with opacity in dark mode) */
248
+ --alpha-two-0: rgba(0, 0, 0, 0);
249
+ --alpha-two-50: rgba(0, 0, 0, 0.05);
250
+ --alpha-two-100: rgba(0, 0, 0, 0.1);
251
+ --alpha-two-150: rgba(0, 0, 0, 0.15);
252
+ --alpha-two-200: rgba(0, 0, 0, 0.2);
253
+ --alpha-two-300: rgba(0, 0, 0, 0.3);
254
+ --alpha-two-400: rgba(0, 0, 0, 0.4);
255
+ --alpha-two-500: rgba(0, 0, 0, 0.5);
256
+ --alpha-two-600: rgba(0, 0, 0, 0.6);
257
+ --alpha-two-700: rgba(0, 0, 0, 0.7);
258
+ --alpha-two-800: rgba(0, 0, 0, 0.8);
259
+ --alpha-two-900: rgba(0, 0, 0, 0.9);
260
+
261
+ --shadow-custom:
262
+ 0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
263
+ --shadow-default:
264
+ 0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
265
+
266
+ --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
267
267
  }
268
268
 
269
269
  /* Tailwind v4 Theme Integration */
270
270
  @theme inline {
271
- /* Neutral Colors */
272
- --color-neutral-00: var(--neutral-00);
273
- --color-neutral-25: var(--neutral-25);
274
- --color-neutral-50: var(--neutral-50);
275
- --color-neutral-75: var(--neutral-75);
276
- --color-neutral-100: var(--neutral-100);
277
- --color-neutral-150: var(--neutral-150);
278
- --color-neutral-200: var(--neutral-200);
279
- --color-neutral-300: var(--neutral-300);
280
- --color-neutral-400: var(--neutral-400);
281
- --color-neutral-500: var(--neutral-500);
282
- --color-neutral-600: var(--neutral-600);
283
- --color-neutral-700: var(--neutral-700);
284
- --color-neutral-800: var(--neutral-800);
285
- --color-neutral-900: var(--neutral-900);
286
- --color-neutral-950: var(--neutral-950);
287
-
288
- /* Blue Colors */
289
- --color-blue-50: var(--blue-50);
290
- --color-blue-100: var(--blue-100);
291
- --color-blue-200: var(--blue-200);
292
- --color-blue-300: var(--blue-300);
293
- --color-blue-400: var(--blue-400);
294
- --color-blue-500: var(--blue-500);
295
- --color-blue-600: var(--blue-600);
296
- --color-blue-700: var(--blue-700);
297
- --color-blue-800: var(--blue-800);
298
- --color-blue-900: var(--blue-900);
299
- --color-blue-950: var(--blue-950);
300
-
301
- /* Red Colors */
302
- --color-red-50: var(--red-50);
303
- --color-red-100: var(--red-100);
304
- --color-red-200: var(--red-200);
305
- --color-red-300: var(--red-300);
306
- --color-red-400: var(--red-400);
307
- --color-red-500: var(--red-500);
308
- --color-red-600: var(--red-600);
309
- --color-red-700: var(--red-700);
310
- --color-red-800: var(--red-800);
311
- --color-red-900: var(--red-900);
312
- --color-red-950: var(--red-950);
313
-
314
- /* Amber Colors */
315
- --color-amber-50: var(--amber-50);
316
- --color-amber-100: var(--amber-100);
317
- --color-amber-200: var(--amber-200);
318
- --color-amber-300: var(--amber-300);
319
- --color-amber-400: var(--amber-400);
320
- --color-amber-500: var(--amber-500);
321
- --color-amber-600: var(--amber-600);
322
- --color-amber-700: var(--amber-700);
323
- --color-amber-800: var(--amber-800);
324
- --color-amber-900: var(--amber-900);
325
- --color-amber-950: var(--amber-950);
326
-
327
- /* Green Colors */
328
- --color-green-50: var(--green-50);
329
- --color-green-100: var(--green-100);
330
- --color-green-200: var(--green-200);
331
- --color-green-300: var(--green-300);
332
- --color-green-400: var(--green-400);
333
- --color-green-500: var(--green-500);
334
- --color-green-600: var(--green-600);
335
- --color-green-700: var(--green-700);
336
- --color-green-800: var(--green-800);
337
- --color-green-900: var(--green-900);
338
- --color-green-950: var(--green-950);
339
-
340
- /* Violet Colors */
341
- --color-violet-50: var(--violet-50);
342
- --color-violet-100: var(--violet-100);
343
- --color-violet-200: var(--violet-200);
344
- --color-violet-300: var(--violet-300);
345
- --color-violet-400: var(--violet-400);
346
- --color-violet-500: var(--violet-500);
347
- --color-violet-600: var(--violet-600);
348
- --color-violet-700: var(--violet-700);
349
- --color-violet-800: var(--violet-800);
350
- --color-violet-900: var(--violet-900);
351
- --color-violet-950: var(--violet-950);
352
-
353
- /* Sky Colors */
354
- --color-sky-50: var(--sky-50);
355
- --color-sky-100: var(--sky-100);
356
- --color-sky-200: var(--sky-200);
357
- --color-sky-300: var(--sky-300);
358
- --color-sky-400: var(--sky-400);
359
- --color-sky-500: var(--sky-500);
360
- --color-sky-600: var(--sky-600);
361
- --color-sky-700: var(--sky-700);
362
- --color-sky-800: var(--sky-800);
363
- --color-sky-900: var(--sky-900);
364
- --color-sky-950: var(--sky-950);
365
-
366
- /* Alpha One Colors */
367
- --color-alpha-one-0: var(--alpha-one-0);
368
- --color-alpha-one-50: var(--alpha-one-50);
369
- --color-alpha-one-100: var(--alpha-one-100);
370
- --color-alpha-one-150: var(--alpha-one-150);
371
- --color-alpha-one-200: var(--alpha-one-200);
372
- --color-alpha-one-300: var(--alpha-one-300);
373
- --color-alpha-one-400: var(--alpha-one-400);
374
- --color-alpha-one-500: var(--alpha-one-500);
375
- --color-alpha-one-600: var(--alpha-one-600);
376
- --color-alpha-one-700: var(--alpha-one-700);
377
- --color-alpha-one-800: var(--alpha-one-800);
378
- --color-alpha-one-900: var(--alpha-one-900);
379
-
380
- /* Alpha Two Colors */
381
- --color-alpha-two-0: var(--alpha-two-0);
382
- --color-alpha-two-50: var(--alpha-two-50);
383
- --color-alpha-two-100: var(--alpha-two-100);
384
- --color-alpha-two-150: var(--alpha-two-150);
385
- --color-alpha-two-200: var(--alpha-two-200);
386
- --color-alpha-two-300: var(--alpha-two-300);
387
- --color-alpha-two-400: var(--alpha-two-400);
388
- --color-alpha-two-500: var(--alpha-two-500);
389
- --color-alpha-two-600: var(--alpha-two-600);
390
- --color-alpha-two-700: var(--alpha-two-700);
391
- --color-alpha-two-800: var(--alpha-two-800);
392
- --color-alpha-two-900: var(--alpha-two-900);
393
-
394
- --shadow-button-disabled: var(--shadow-button-disabled);
395
- }
271
+ /* Neutral Colors */
272
+ --color-neutral-00: var(--neutral-00);
273
+ --color-neutral-25: var(--neutral-25);
274
+ --color-neutral-50: var(--neutral-50);
275
+ --color-neutral-75: var(--neutral-75);
276
+ --color-neutral-100: var(--neutral-100);
277
+ --color-neutral-150: var(--neutral-150);
278
+ --color-neutral-200: var(--neutral-200);
279
+ --color-neutral-300: var(--neutral-300);
280
+ --color-neutral-400: var(--neutral-400);
281
+ --color-neutral-500: var(--neutral-500);
282
+ --color-neutral-600: var(--neutral-600);
283
+ --color-neutral-700: var(--neutral-700);
284
+ --color-neutral-800: var(--neutral-800);
285
+ --color-neutral-900: var(--neutral-900);
286
+ --color-neutral-950: var(--neutral-950);
287
+
288
+ /* Blue Colors */
289
+ --color-blue-50: var(--blue-50);
290
+ --color-blue-100: var(--blue-100);
291
+ --color-blue-200: var(--blue-200);
292
+ --color-blue-300: var(--blue-300);
293
+ --color-blue-400: var(--blue-400);
294
+ --color-blue-500: var(--blue-500);
295
+ --color-blue-600: var(--blue-600);
296
+ --color-blue-700: var(--blue-700);
297
+ --color-blue-800: var(--blue-800);
298
+ --color-blue-900: var(--blue-900);
299
+ --color-blue-950: var(--blue-950);
300
+
301
+ /* Red Colors */
302
+ --color-red-50: var(--red-50);
303
+ --color-red-100: var(--red-100);
304
+ --color-red-200: var(--red-200);
305
+ --color-red-300: var(--red-300);
306
+ --color-red-400: var(--red-400);
307
+ --color-red-500: var(--red-500);
308
+ --color-red-600: var(--red-600);
309
+ --color-red-700: var(--red-700);
310
+ --color-red-800: var(--red-800);
311
+ --color-red-900: var(--red-900);
312
+ --color-red-950: var(--red-950);
313
+
314
+ /* Amber Colors */
315
+ --color-amber-50: var(--amber-50);
316
+ --color-amber-100: var(--amber-100);
317
+ --color-amber-200: var(--amber-200);
318
+ --color-amber-300: var(--amber-300);
319
+ --color-amber-400: var(--amber-400);
320
+ --color-amber-500: var(--amber-500);
321
+ --color-amber-600: var(--amber-600);
322
+ --color-amber-700: var(--amber-700);
323
+ --color-amber-800: var(--amber-800);
324
+ --color-amber-900: var(--amber-900);
325
+ --color-amber-950: var(--amber-950);
326
+
327
+ /* Green Colors */
328
+ --color-green-50: var(--green-50);
329
+ --color-green-100: var(--green-100);
330
+ --color-green-200: var(--green-200);
331
+ --color-green-300: var(--green-300);
332
+ --color-green-400: var(--green-400);
333
+ --color-green-500: var(--green-500);
334
+ --color-green-600: var(--green-600);
335
+ --color-green-700: var(--green-700);
336
+ --color-green-800: var(--green-800);
337
+ --color-green-900: var(--green-900);
338
+ --color-green-950: var(--green-950);
339
+
340
+ /* Violet Colors */
341
+ --color-violet-50: var(--violet-50);
342
+ --color-violet-100: var(--violet-100);
343
+ --color-violet-200: var(--violet-200);
344
+ --color-violet-300: var(--violet-300);
345
+ --color-violet-400: var(--violet-400);
346
+ --color-violet-500: var(--violet-500);
347
+ --color-violet-600: var(--violet-600);
348
+ --color-violet-700: var(--violet-700);
349
+ --color-violet-800: var(--violet-800);
350
+ --color-violet-900: var(--violet-900);
351
+ --color-violet-950: var(--violet-950);
352
+
353
+ /* Sky Colors */
354
+ --color-sky-50: var(--sky-50);
355
+ --color-sky-100: var(--sky-100);
356
+ --color-sky-200: var(--sky-200);
357
+ --color-sky-300: var(--sky-300);
358
+ --color-sky-400: var(--sky-400);
359
+ --color-sky-500: var(--sky-500);
360
+ --color-sky-600: var(--sky-600);
361
+ --color-sky-700: var(--sky-700);
362
+ --color-sky-800: var(--sky-800);
363
+ --color-sky-900: var(--sky-900);
364
+ --color-sky-950: var(--sky-950);
365
+
366
+ /* Alpha One Colors */
367
+ --color-alpha-one-0: var(--alpha-one-0);
368
+ --color-alpha-one-50: var(--alpha-one-50);
369
+ --color-alpha-one-100: var(--alpha-one-100);
370
+ --color-alpha-one-150: var(--alpha-one-150);
371
+ --color-alpha-one-200: var(--alpha-one-200);
372
+ --color-alpha-one-300: var(--alpha-one-300);
373
+ --color-alpha-one-400: var(--alpha-one-400);
374
+ --color-alpha-one-500: var(--alpha-one-500);
375
+ --color-alpha-one-600: var(--alpha-one-600);
376
+ --color-alpha-one-700: var(--alpha-one-700);
377
+ --color-alpha-one-800: var(--alpha-one-800);
378
+ --color-alpha-one-900: var(--alpha-one-900);
379
+
380
+ /* Alpha Two Colors */
381
+ --color-alpha-two-0: var(--alpha-two-0);
382
+ --color-alpha-two-50: var(--alpha-two-50);
383
+ --color-alpha-two-100: var(--alpha-two-100);
384
+ --color-alpha-two-150: var(--alpha-two-150);
385
+ --color-alpha-two-200: var(--alpha-two-200);
386
+ --color-alpha-two-300: var(--alpha-two-300);
387
+ --color-alpha-two-400: var(--alpha-two-400);
388
+ --color-alpha-two-500: var(--alpha-two-500);
389
+ --color-alpha-two-600: var(--alpha-two-600);
390
+ --color-alpha-two-700: var(--alpha-two-700);
391
+ --color-alpha-two-800: var(--alpha-two-800);
392
+ --color-alpha-two-900: var(--alpha-two-900);
393
+
394
+ --shadow-button-disabled: var(--shadow-button-disabled);
395
+ }