@parrot-co/parrot-ui 0.1.28 → 1.0.0-beta.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.
Files changed (19) hide show
  1. package/dist/colors.css +571 -0
  2. package/dist/dark.css +606 -0
  3. package/dist/index.d.mts +773 -0
  4. package/dist/index.d.ts +773 -0
  5. package/dist/index.js +3936 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +3850 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/styles.css +2865 -0
  10. package/dist/theme.css +67 -0
  11. package/package.json +69 -59
  12. package/src/theme.css +67 -0
  13. package/dist/main.js +0 -4586
  14. package/dist/main.js.map +0 -1
  15. package/dist/module.js +0 -4517
  16. package/dist/module.js.map +0 -1
  17. package/dist/types.d.ts +0 -604
  18. package/dist/types.d.ts.map +0 -1
  19. package/styles.css +0 -1
package/dist/styles.css ADDED
@@ -0,0 +1,2865 @@
1
+ /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
7
+ --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
8
+ --color-red-50: oklch(97.1% 0.013 17.38);
9
+ --color-red-100: oklch(93.6% 0.032 17.717);
10
+ --color-red-200: oklch(88.5% 0.062 18.334);
11
+ --color-red-300: oklch(80.8% 0.114 19.571);
12
+ --color-red-400: oklch(70.4% 0.191 22.216);
13
+ --color-red-500: oklch(63.7% 0.237 25.331);
14
+ --color-red-600: oklch(57.7% 0.245 27.325);
15
+ --color-red-700: oklch(50.5% 0.213 27.518);
16
+ --color-red-800: oklch(44.4% 0.177 26.899);
17
+ --color-red-900: oklch(39.6% 0.141 25.723);
18
+ --color-red-950: oklch(25.8% 0.092 26.042);
19
+ --color-orange-50: oklch(98% 0.016 73.684);
20
+ --color-orange-100: oklch(95.4% 0.038 75.164);
21
+ --color-orange-200: oklch(90.1% 0.076 70.697);
22
+ --color-orange-300: oklch(83.7% 0.128 66.29);
23
+ --color-orange-400: oklch(75% 0.183 55.934);
24
+ --color-orange-500: oklch(70.5% 0.213 47.604);
25
+ --color-orange-700: oklch(55.3% 0.195 38.402);
26
+ --color-orange-800: oklch(47% 0.157 37.304);
27
+ --color-orange-900: oklch(40.8% 0.123 38.172);
28
+ --color-orange-950: oklch(26.6% 0.079 36.259);
29
+ --color-amber-50: oklch(98.7% 0.022 95.277);
30
+ --color-amber-100: oklch(96.2% 0.059 95.617);
31
+ --color-amber-200: oklch(92.4% 0.12 95.746);
32
+ --color-amber-300: oklch(87.9% 0.169 91.605);
33
+ --color-amber-400: oklch(82.8% 0.189 84.429);
34
+ --color-amber-500: oklch(76.9% 0.188 70.08);
35
+ --color-amber-600: oklch(66.6% 0.179 58.318);
36
+ --color-amber-700: oklch(55.5% 0.163 48.998);
37
+ --color-amber-800: oklch(47.3% 0.137 46.201);
38
+ --color-amber-900: oklch(41.4% 0.112 45.904);
39
+ --color-amber-950: oklch(27.9% 0.077 45.635);
40
+ --color-yellow-50: oklch(98.7% 0.026 102.212);
41
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
42
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
43
+ --color-yellow-300: oklch(90.5% 0.182 98.111);
44
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
45
+ --color-yellow-500: oklch(79.5% 0.184 86.047);
46
+ --color-yellow-700: oklch(55.4% 0.135 66.442);
47
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
48
+ --color-yellow-900: oklch(42.1% 0.095 57.708);
49
+ --color-yellow-950: oklch(28.6% 0.066 53.813);
50
+ --color-lime-50: oklch(98.6% 0.031 120.757);
51
+ --color-lime-100: oklch(96.7% 0.067 122.328);
52
+ --color-lime-200: oklch(93.8% 0.127 124.321);
53
+ --color-lime-300: oklch(89.7% 0.196 126.665);
54
+ --color-lime-400: oklch(84.1% 0.238 128.85);
55
+ --color-lime-500: oklch(76.8% 0.233 130.85);
56
+ --color-lime-700: oklch(53.2% 0.157 131.589);
57
+ --color-lime-800: oklch(45.3% 0.124 130.933);
58
+ --color-lime-900: oklch(40.5% 0.101 131.063);
59
+ --color-lime-950: oklch(27.4% 0.072 132.109);
60
+ --color-green-50: oklch(98.2% 0.018 155.826);
61
+ --color-green-100: oklch(96.2% 0.044 156.743);
62
+ --color-green-200: oklch(92.5% 0.084 155.995);
63
+ --color-green-300: oklch(87.1% 0.15 154.449);
64
+ --color-green-400: oklch(79.2% 0.209 151.711);
65
+ --color-green-500: oklch(72.3% 0.219 149.579);
66
+ --color-green-600: oklch(62.7% 0.194 149.214);
67
+ --color-green-700: oklch(52.7% 0.154 150.069);
68
+ --color-green-800: oklch(44.8% 0.119 151.328);
69
+ --color-green-900: oklch(39.3% 0.095 152.535);
70
+ --color-green-950: oklch(26.6% 0.065 152.934);
71
+ --color-emerald-50: oklch(97.9% 0.021 166.113);
72
+ --color-emerald-100: oklch(95% 0.052 163.051);
73
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
74
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
75
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
76
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
77
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
78
+ --color-emerald-800: oklch(43.2% 0.095 166.913);
79
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
80
+ --color-emerald-950: oklch(26.2% 0.051 172.552);
81
+ --color-teal-50: oklch(98.4% 0.014 180.72);
82
+ --color-teal-100: oklch(95.3% 0.051 180.801);
83
+ --color-teal-200: oklch(91% 0.096 180.426);
84
+ --color-teal-300: oklch(85.5% 0.138 181.071);
85
+ --color-teal-400: oklch(77.7% 0.152 181.912);
86
+ --color-teal-500: oklch(70.4% 0.14 182.503);
87
+ --color-teal-700: oklch(51.1% 0.096 186.391);
88
+ --color-teal-800: oklch(43.7% 0.078 188.216);
89
+ --color-teal-900: oklch(38.6% 0.063 188.416);
90
+ --color-teal-950: oklch(27.7% 0.046 192.524);
91
+ --color-cyan-50: oklch(98.4% 0.019 200.873);
92
+ --color-cyan-100: oklch(95.6% 0.045 203.388);
93
+ --color-cyan-200: oklch(91.7% 0.08 205.041);
94
+ --color-cyan-300: oklch(86.5% 0.127 207.078);
95
+ --color-cyan-400: oklch(78.9% 0.154 211.53);
96
+ --color-cyan-500: oklch(71.5% 0.143 215.221);
97
+ --color-cyan-700: oklch(52% 0.105 223.128);
98
+ --color-cyan-800: oklch(45% 0.085 224.283);
99
+ --color-cyan-900: oklch(39.8% 0.07 227.392);
100
+ --color-cyan-950: oklch(30.2% 0.056 229.695);
101
+ --color-sky-50: oklch(97.7% 0.013 236.62);
102
+ --color-sky-100: oklch(95.1% 0.026 236.824);
103
+ --color-sky-200: oklch(90.1% 0.058 230.902);
104
+ --color-sky-300: oklch(82.8% 0.111 230.318);
105
+ --color-sky-400: oklch(74.6% 0.16 232.661);
106
+ --color-sky-500: oklch(68.5% 0.169 237.323);
107
+ --color-sky-600: oklch(58.8% 0.158 241.966);
108
+ --color-sky-700: oklch(50% 0.134 242.749);
109
+ --color-sky-800: oklch(44.3% 0.11 240.79);
110
+ --color-sky-900: oklch(39.1% 0.09 240.876);
111
+ --color-sky-950: oklch(29.3% 0.066 243.157);
112
+ --color-blue-50: oklch(97% 0.014 254.604);
113
+ --color-blue-100: oklch(93.2% 0.032 255.585);
114
+ --color-blue-200: oklch(88.2% 0.059 254.128);
115
+ --color-blue-300: oklch(80.9% 0.105 251.813);
116
+ --color-blue-400: oklch(70.7% 0.165 254.624);
117
+ --color-blue-500: oklch(62.3% 0.214 259.815);
118
+ --color-blue-600: oklch(54.6% 0.245 262.881);
119
+ --color-blue-700: oklch(48.8% 0.243 264.376);
120
+ --color-blue-800: oklch(42.4% 0.199 265.638);
121
+ --color-blue-900: oklch(37.9% 0.146 265.522);
122
+ --color-blue-950: oklch(28.2% 0.091 267.935);
123
+ --color-indigo-50: oklch(96.2% 0.018 272.314);
124
+ --color-indigo-100: oklch(93% 0.034 272.788);
125
+ --color-indigo-200: oklch(87% 0.065 274.039);
126
+ --color-indigo-300: oklch(78.5% 0.115 274.713);
127
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
128
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
129
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
130
+ --color-indigo-800: oklch(39.8% 0.195 277.366);
131
+ --color-indigo-900: oklch(35.9% 0.144 278.697);
132
+ --color-indigo-950: oklch(25.7% 0.09 281.288);
133
+ --color-violet-50: oklch(96.9% 0.016 293.756);
134
+ --color-violet-100: oklch(94.3% 0.029 294.588);
135
+ --color-violet-200: oklch(89.4% 0.057 293.283);
136
+ --color-violet-300: oklch(81.1% 0.111 293.571);
137
+ --color-violet-400: oklch(70.2% 0.183 293.541);
138
+ --color-violet-500: oklch(60.6% 0.25 292.717);
139
+ --color-violet-600: oklch(54.1% 0.281 293.009);
140
+ --color-violet-700: oklch(49.1% 0.27 292.581);
141
+ --color-violet-800: oklch(43.2% 0.232 292.759);
142
+ --color-violet-900: oklch(38% 0.189 293.745);
143
+ --color-violet-950: oklch(28.3% 0.141 291.089);
144
+ --color-purple-50: oklch(97.7% 0.014 308.299);
145
+ --color-purple-100: oklch(94.6% 0.033 307.174);
146
+ --color-purple-200: oklch(90.2% 0.063 306.703);
147
+ --color-purple-300: oklch(82.7% 0.119 306.383);
148
+ --color-purple-400: oklch(71.4% 0.203 305.504);
149
+ --color-purple-500: oklch(62.7% 0.265 303.9);
150
+ --color-purple-700: oklch(49.6% 0.265 301.924);
151
+ --color-purple-800: oklch(43.8% 0.218 303.724);
152
+ --color-purple-900: oklch(38.1% 0.176 304.987);
153
+ --color-purple-950: oklch(29.1% 0.149 302.717);
154
+ --color-fuchsia-50: oklch(97.7% 0.017 320.058);
155
+ --color-fuchsia-100: oklch(95.2% 0.037 318.852);
156
+ --color-fuchsia-200: oklch(90.3% 0.076 319.62);
157
+ --color-fuchsia-300: oklch(83.3% 0.145 321.434);
158
+ --color-fuchsia-400: oklch(74% 0.238 322.16);
159
+ --color-fuchsia-500: oklch(66.7% 0.295 322.15);
160
+ --color-fuchsia-700: oklch(51.8% 0.253 323.949);
161
+ --color-fuchsia-800: oklch(45.2% 0.211 324.591);
162
+ --color-fuchsia-900: oklch(40.1% 0.17 325.612);
163
+ --color-fuchsia-950: oklch(29.3% 0.136 325.661);
164
+ --color-pink-50: oklch(97.1% 0.014 343.198);
165
+ --color-pink-100: oklch(94.8% 0.028 342.258);
166
+ --color-pink-200: oklch(89.9% 0.061 343.231);
167
+ --color-pink-300: oklch(82.3% 0.12 346.018);
168
+ --color-pink-400: oklch(71.8% 0.202 349.761);
169
+ --color-pink-500: oklch(65.6% 0.241 354.308);
170
+ --color-pink-700: oklch(52.5% 0.223 3.958);
171
+ --color-pink-800: oklch(45.9% 0.187 3.815);
172
+ --color-pink-900: oklch(40.8% 0.153 2.432);
173
+ --color-pink-950: oklch(28.4% 0.109 3.907);
174
+ --color-rose-50: oklch(96.9% 0.015 12.422);
175
+ --color-rose-100: oklch(94.1% 0.03 12.58);
176
+ --color-rose-200: oklch(89.2% 0.058 10.001);
177
+ --color-rose-300: oklch(81% 0.117 11.638);
178
+ --color-rose-400: oklch(71.2% 0.194 13.428);
179
+ --color-rose-500: oklch(64.5% 0.246 16.439);
180
+ --color-rose-700: oklch(51.4% 0.222 16.935);
181
+ --color-rose-800: oklch(45.5% 0.188 13.697);
182
+ --color-rose-900: oklch(41% 0.159 10.272);
183
+ --color-rose-950: oklch(27.1% 0.105 12.094);
184
+ --color-slate-50: oklch(98.4% 0.003 247.858);
185
+ --color-slate-100: oklch(96.8% 0.007 247.896);
186
+ --color-slate-200: oklch(92.9% 0.013 255.508);
187
+ --color-slate-300: oklch(86.9% 0.022 252.894);
188
+ --color-slate-400: oklch(70.4% 0.04 256.788);
189
+ --color-slate-500: oklch(55.4% 0.046 257.417);
190
+ --color-slate-700: oklch(37.2% 0.044 257.287);
191
+ --color-slate-800: oklch(27.9% 0.041 260.031);
192
+ --color-slate-900: oklch(20.8% 0.042 265.755);
193
+ --color-slate-950: oklch(12.9% 0.042 264.695);
194
+ --color-gray-50: oklch(98.5% 0.002 247.839);
195
+ --color-gray-100: oklch(96.7% 0.003 264.542);
196
+ --color-gray-200: oklch(92.8% 0.006 264.531);
197
+ --color-gray-300: oklch(87.2% 0.01 258.338);
198
+ --color-gray-400: oklch(70.7% 0.022 261.325);
199
+ --color-gray-500: oklch(55.1% 0.027 264.364);
200
+ --color-gray-600: oklch(44.6% 0.03 256.802);
201
+ --color-gray-700: oklch(37.3% 0.034 259.733);
202
+ --color-gray-800: oklch(27.8% 0.033 256.848);
203
+ --color-gray-900: oklch(21% 0.034 264.665);
204
+ --color-gray-950: oklch(13% 0.028 261.692);
205
+ --color-zinc-50: oklch(98.5% 0 0);
206
+ --color-zinc-100: oklch(96.7% 0.001 286.375);
207
+ --color-zinc-200: oklch(92% 0.004 286.32);
208
+ --color-zinc-300: oklch(87.1% 0.006 286.286);
209
+ --color-zinc-400: oklch(70.5% 0.015 286.067);
210
+ --color-zinc-500: oklch(55.2% 0.016 285.938);
211
+ --color-zinc-700: oklch(37% 0.013 285.805);
212
+ --color-zinc-800: oklch(27.4% 0.006 286.033);
213
+ --color-zinc-900: oklch(21% 0.006 285.885);
214
+ --color-zinc-950: oklch(14.1% 0.005 285.823);
215
+ --color-neutral-50: oklch(98.5% 0 0);
216
+ --color-neutral-100: oklch(97% 0 0);
217
+ --color-neutral-200: oklch(92.2% 0 0);
218
+ --color-neutral-300: oklch(87% 0 0);
219
+ --color-neutral-400: oklch(70.8% 0 0);
220
+ --color-neutral-500: oklch(55.6% 0 0);
221
+ --color-neutral-700: oklch(37.1% 0 0);
222
+ --color-neutral-800: oklch(26.9% 0 0);
223
+ --color-neutral-900: oklch(20.5% 0 0);
224
+ --color-neutral-950: oklch(14.5% 0 0);
225
+ --color-stone-50: oklch(98.5% 0.001 106.423);
226
+ --color-stone-100: oklch(97% 0.001 106.424);
227
+ --color-stone-200: oklch(92.3% 0.003 48.717);
228
+ --color-stone-300: oklch(86.9% 0.005 56.366);
229
+ --color-stone-400: oklch(70.9% 0.01 56.259);
230
+ --color-stone-500: oklch(55.3% 0.013 58.071);
231
+ --color-stone-700: oklch(37.4% 0.01 67.558);
232
+ --color-stone-800: oklch(26.8% 0.007 34.298);
233
+ --color-stone-900: oklch(21.6% 0.006 56.043);
234
+ --color-stone-950: oklch(14.7% 0.004 49.25);
235
+ --color-black: #000;
236
+ --color-white: #fff;
237
+ --spacing: 0.25rem;
238
+ --text-xs: 0.75rem;
239
+ --text-xs--line-height: calc(1 / 0.75);
240
+ --text-sm: 0.875rem;
241
+ --text-sm--line-height: calc(1.25 / 0.875);
242
+ --text-base: 1rem;
243
+ --text-base--line-height: calc(1.5 / 1);
244
+ --text-lg: 1.125rem;
245
+ --text-xl: 1.25rem;
246
+ --text-xl--line-height: calc(1.75 / 1.25);
247
+ --text-2xl: 1.5rem;
248
+ --text-2xl--line-height: calc(2 / 1.5);
249
+ --font-weight-light: 300;
250
+ --font-weight-medium: 500;
251
+ --font-weight-bold: 700;
252
+ --leading-normal: 1.5;
253
+ --leading-relaxed: 1.625;
254
+ --radius-sm: 0.25rem;
255
+ --radius-md: 0.375rem;
256
+ --radius-lg: 0.5rem;
257
+ --radius-xl: 0.75rem;
258
+ --radius-2xl: 1rem;
259
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
260
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
261
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
262
+ --default-transition-duration: 150ms;
263
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
264
+ --default-font-family: var(--font-sans);
265
+ --default-mono-font-family: var(--font-mono);
266
+ --radius-full: 9999px;
267
+ --color-surface: var(--color-white);
268
+ --color-surface-raised: var(--color-white);
269
+ --color-surface-sunken: var(--color-gray-50);
270
+ --color-surface-hover: var(--color-gray-50);
271
+ --color-overlay: color-mix(in srgb, oklch(13% 0.028 261.692) 40%, transparent);
272
+ @supports (color: color-mix(in lab, red, red)) {
273
+ --color-overlay: color-mix(in oklch, var(--color-gray-950) 40%, transparent);
274
+ }
275
+ --color-text-dark: var(--color-gray-950);
276
+ --color-text-light: var(--color-gray-500);
277
+ --color-border: var(--color-gray-200);
278
+ --color-border-muted: color-mix(
279
+ in oklch,
280
+ oklch(13% 0.028 261.692) 10%,
281
+ transparent
282
+ );
283
+ @supports (color: color-mix(in lab, red, red)) {
284
+ --color-border-muted: color-mix(
285
+ in oklch,
286
+ var(--color-gray-950) 10%,
287
+ transparent
288
+ );
289
+ }
290
+ --color-border-subtle: color-mix(
291
+ in oklch,
292
+ oklch(13% 0.028 261.692) 6%,
293
+ transparent
294
+ );
295
+ @supports (color: color-mix(in lab, red, red)) {
296
+ --color-border-subtle: color-mix(
297
+ in oklch,
298
+ var(--color-gray-950) 6%,
299
+ transparent
300
+ );
301
+ }
302
+ --color-primary: var(--color-blue-600);
303
+ --color-accent: var(--color-violet-600);
304
+ --color-success: var(--color-green-600);
305
+ --color-warning: var(--color-amber-500);
306
+ --color-critical: var(--color-red-600);
307
+ --color-info: var(--color-sky-600);
308
+ --color-focus-ring: color-mix(
309
+ in oklch,
310
+ oklch(62.3% 0.214 259.815) 40%,
311
+ transparent
312
+ );
313
+ @supports (color: color-mix(in lab, red, red)) {
314
+ --color-focus-ring: color-mix(
315
+ in oklch,
316
+ var(--color-blue-500) 40%,
317
+ transparent
318
+ );
319
+ }
320
+ --color-focus-ring-critical: color-mix(
321
+ in oklch,
322
+ oklch(63.7% 0.237 25.331) 40%,
323
+ transparent
324
+ );
325
+ @supports (color: color-mix(in lab, red, red)) {
326
+ --color-focus-ring-critical: color-mix(
327
+ in oklch,
328
+ var(--color-red-500) 40%,
329
+ transparent
330
+ );
331
+ }
332
+ }
333
+ }
334
+ @layer base {
335
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
336
+ box-sizing: border-box;
337
+ margin: 0;
338
+ padding: 0;
339
+ border: 0 solid;
340
+ }
341
+ html, :host {
342
+ line-height: 1.5;
343
+ -webkit-text-size-adjust: 100%;
344
+ tab-size: 4;
345
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
346
+ font-feature-settings: var(--default-font-feature-settings, normal);
347
+ font-variation-settings: var(--default-font-variation-settings, normal);
348
+ -webkit-tap-highlight-color: transparent;
349
+ }
350
+ hr {
351
+ height: 0;
352
+ color: inherit;
353
+ border-top-width: 1px;
354
+ }
355
+ abbr:where([title]) {
356
+ -webkit-text-decoration: underline dotted;
357
+ text-decoration: underline dotted;
358
+ }
359
+ h1, h2, h3, h4, h5, h6 {
360
+ font-size: inherit;
361
+ font-weight: inherit;
362
+ }
363
+ a {
364
+ color: inherit;
365
+ -webkit-text-decoration: inherit;
366
+ text-decoration: inherit;
367
+ }
368
+ b, strong {
369
+ font-weight: bolder;
370
+ }
371
+ code, kbd, samp, pre {
372
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
373
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
374
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
375
+ font-size: 1em;
376
+ }
377
+ small {
378
+ font-size: 80%;
379
+ }
380
+ sub, sup {
381
+ font-size: 75%;
382
+ line-height: 0;
383
+ position: relative;
384
+ vertical-align: baseline;
385
+ }
386
+ sub {
387
+ bottom: -0.25em;
388
+ }
389
+ sup {
390
+ top: -0.5em;
391
+ }
392
+ table {
393
+ text-indent: 0;
394
+ border-color: inherit;
395
+ border-collapse: collapse;
396
+ }
397
+ :-moz-focusring {
398
+ outline: auto;
399
+ }
400
+ progress {
401
+ vertical-align: baseline;
402
+ }
403
+ summary {
404
+ display: list-item;
405
+ }
406
+ ol, ul, menu {
407
+ list-style: none;
408
+ }
409
+ img, svg, video, canvas, audio, iframe, embed, object {
410
+ display: block;
411
+ vertical-align: middle;
412
+ }
413
+ img, video {
414
+ max-width: 100%;
415
+ height: auto;
416
+ }
417
+ button, input, select, optgroup, textarea, ::file-selector-button {
418
+ font: inherit;
419
+ font-feature-settings: inherit;
420
+ font-variation-settings: inherit;
421
+ letter-spacing: inherit;
422
+ color: inherit;
423
+ border-radius: 0;
424
+ background-color: transparent;
425
+ opacity: 1;
426
+ }
427
+ :where(select:is([multiple], [size])) optgroup {
428
+ font-weight: bolder;
429
+ }
430
+ :where(select:is([multiple], [size])) optgroup option {
431
+ padding-inline-start: 20px;
432
+ }
433
+ ::file-selector-button {
434
+ margin-inline-end: 4px;
435
+ }
436
+ ::placeholder {
437
+ opacity: 1;
438
+ }
439
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
440
+ ::placeholder {
441
+ color: currentcolor;
442
+ @supports (color: color-mix(in lab, red, red)) {
443
+ color: color-mix(in oklab, currentcolor 50%, transparent);
444
+ }
445
+ }
446
+ }
447
+ textarea {
448
+ resize: vertical;
449
+ }
450
+ ::-webkit-search-decoration {
451
+ -webkit-appearance: none;
452
+ }
453
+ ::-webkit-date-and-time-value {
454
+ min-height: 1lh;
455
+ text-align: inherit;
456
+ }
457
+ ::-webkit-datetime-edit {
458
+ display: inline-flex;
459
+ }
460
+ ::-webkit-datetime-edit-fields-wrapper {
461
+ padding: 0;
462
+ }
463
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
464
+ padding-block: 0;
465
+ }
466
+ ::-webkit-calendar-picker-indicator {
467
+ line-height: 1;
468
+ }
469
+ :-moz-ui-invalid {
470
+ box-shadow: none;
471
+ }
472
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
473
+ appearance: button;
474
+ }
475
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
476
+ height: auto;
477
+ }
478
+ [hidden]:where(:not([hidden="until-found"])) {
479
+ display: none !important;
480
+ }
481
+ }
482
+ @layer utilities {
483
+ .visible {
484
+ visibility: visible;
485
+ }
486
+ .absolute {
487
+ position: absolute;
488
+ }
489
+ .fixed {
490
+ position: fixed;
491
+ }
492
+ .relative {
493
+ position: relative;
494
+ }
495
+ .static {
496
+ position: static;
497
+ }
498
+ .sticky {
499
+ position: sticky;
500
+ }
501
+ .container {
502
+ width: 100%;
503
+ @media (width >= 40rem) {
504
+ max-width: 40rem;
505
+ }
506
+ @media (width >= 48rem) {
507
+ max-width: 48rem;
508
+ }
509
+ @media (width >= 64rem) {
510
+ max-width: 64rem;
511
+ }
512
+ @media (width >= 80rem) {
513
+ max-width: 80rem;
514
+ }
515
+ @media (width >= 96rem) {
516
+ max-width: 96rem;
517
+ }
518
+ }
519
+ .block {
520
+ display: block;
521
+ }
522
+ .contents {
523
+ display: contents;
524
+ }
525
+ .flex {
526
+ display: flex;
527
+ }
528
+ .grid {
529
+ display: grid;
530
+ }
531
+ .hidden {
532
+ display: none;
533
+ }
534
+ .inline {
535
+ display: inline;
536
+ }
537
+ .inline-block {
538
+ display: inline-block;
539
+ }
540
+ .inline-flex {
541
+ display: inline-flex;
542
+ }
543
+ .table {
544
+ display: table;
545
+ }
546
+ .w-full {
547
+ width: 100%;
548
+ }
549
+ .transform {
550
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
551
+ }
552
+ .flex-col {
553
+ flex-direction: column;
554
+ }
555
+ .flex-row {
556
+ flex-direction: row;
557
+ }
558
+ .flex-wrap {
559
+ flex-wrap: wrap;
560
+ }
561
+ .items-center {
562
+ align-items: center;
563
+ }
564
+ .items-start {
565
+ align-items: flex-start;
566
+ }
567
+ .justify-between {
568
+ justify-content: space-between;
569
+ }
570
+ .justify-center {
571
+ justify-content: center;
572
+ }
573
+ .justify-end {
574
+ justify-content: flex-end;
575
+ }
576
+ .gap-0 {
577
+ gap: 0;
578
+ }
579
+ .gap-0\.5 {
580
+ gap: calc(var(--spacing) * 0.5);
581
+ }
582
+ .gap-1 {
583
+ gap: var(--spacing);
584
+ }
585
+ .gap-2 {
586
+ gap: calc(var(--spacing) * 2);
587
+ }
588
+ .gap-2\.5 {
589
+ gap: calc(var(--spacing) * 2.5);
590
+ }
591
+ .gap-3 {
592
+ gap: calc(var(--spacing) * 3);
593
+ }
594
+ .gap-3\.5 {
595
+ gap: calc(var(--spacing) * 3.5);
596
+ }
597
+ .gap-4 {
598
+ gap: calc(var(--spacing) * 4);
599
+ }
600
+ .gap-6 {
601
+ gap: calc(var(--spacing) * 6);
602
+ }
603
+ .gap-8 {
604
+ gap: calc(var(--spacing) * 8);
605
+ }
606
+ .gap-10 {
607
+ gap: calc(var(--spacing) * 10);
608
+ }
609
+ .gap-12 {
610
+ gap: calc(var(--spacing) * 12);
611
+ }
612
+ .rounded {
613
+ border-radius: 0.25rem;
614
+ }
615
+ .border {
616
+ border-style: var(--tw-border-style);
617
+ border-width: 1px;
618
+ }
619
+ .border-border-subtle {
620
+ border-color: var(--color-border-subtle);
621
+ }
622
+ .bg-surface-raised {
623
+ background-color: var(--color-surface-raised);
624
+ }
625
+ .p-4 {
626
+ padding: calc(var(--spacing) * 4);
627
+ }
628
+ .text-2xl {
629
+ font-size: var(--text-2xl);
630
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
631
+ }
632
+ .text-base {
633
+ font-size: var(--text-base);
634
+ line-height: var(--tw-leading, var(--text-base--line-height));
635
+ }
636
+ .text-sm {
637
+ font-size: var(--text-sm);
638
+ line-height: var(--tw-leading, var(--text-sm--line-height));
639
+ }
640
+ .text-xl {
641
+ font-size: var(--text-xl);
642
+ line-height: var(--tw-leading, var(--text-xl--line-height));
643
+ }
644
+ .text-xs {
645
+ font-size: var(--text-xs);
646
+ line-height: var(--tw-leading, var(--text-xs--line-height));
647
+ }
648
+ .leading-normal {
649
+ --tw-leading: var(--leading-normal);
650
+ line-height: var(--leading-normal);
651
+ }
652
+ .leading-relaxed {
653
+ --tw-leading: var(--leading-relaxed);
654
+ line-height: var(--leading-relaxed);
655
+ }
656
+ .font-medium {
657
+ --tw-font-weight: var(--font-weight-medium);
658
+ font-weight: var(--font-weight-medium);
659
+ }
660
+ .text-amber-600 {
661
+ color: var(--color-amber-600);
662
+ }
663
+ .text-black {
664
+ color: var(--color-black);
665
+ }
666
+ .text-gray-400 {
667
+ color: var(--color-gray-400);
668
+ }
669
+ .text-gray-500 {
670
+ color: var(--color-gray-500);
671
+ }
672
+ .text-gray-600 {
673
+ color: var(--color-gray-600);
674
+ }
675
+ .text-gray-700 {
676
+ color: var(--color-gray-700);
677
+ }
678
+ .text-gray-900 {
679
+ color: var(--color-gray-900);
680
+ }
681
+ .text-green-600 {
682
+ color: var(--color-green-600);
683
+ }
684
+ .text-inherit {
685
+ color: inherit;
686
+ }
687
+ .text-red-600 {
688
+ color: var(--color-red-600);
689
+ }
690
+ .text-text-dark {
691
+ color: var(--color-text-dark);
692
+ }
693
+ .text-text-light {
694
+ color: var(--color-text-light);
695
+ }
696
+ .capitalize {
697
+ text-transform: capitalize;
698
+ }
699
+ .lowercase {
700
+ text-transform: lowercase;
701
+ }
702
+ .uppercase {
703
+ text-transform: uppercase;
704
+ }
705
+ .outline {
706
+ outline-style: var(--tw-outline-style);
707
+ outline-width: 1px;
708
+ }
709
+ .invert {
710
+ --tw-invert: invert(100%);
711
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
712
+ }
713
+ .filter {
714
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
715
+ }
716
+ .transition {
717
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
718
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
719
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
720
+ }
721
+ .md\:gap-8 {
722
+ @media (width >= 48rem) {
723
+ gap: calc(var(--spacing) * 8);
724
+ }
725
+ }
726
+ .selected\:text-purple-500 {
727
+ &[data-selected] {
728
+ color: var(--color-purple-500);
729
+ }
730
+ }
731
+ }
732
+ @font-face {
733
+ font-family: 'Inter Variable';
734
+ font-style: normal;
735
+ font-display: swap;
736
+ font-weight: 100 900;
737
+ src: url(./files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
738
+ unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
739
+ }
740
+ @font-face {
741
+ font-family: 'Inter Variable';
742
+ font-style: normal;
743
+ font-display: swap;
744
+ font-weight: 100 900;
745
+ src: url(./files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
746
+ unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
747
+ }
748
+ @font-face {
749
+ font-family: 'Inter Variable';
750
+ font-style: normal;
751
+ font-display: swap;
752
+ font-weight: 100 900;
753
+ src: url(./files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
754
+ unicode-range: U+1F00-1FFF;
755
+ }
756
+ @font-face {
757
+ font-family: 'Inter Variable';
758
+ font-style: normal;
759
+ font-display: swap;
760
+ font-weight: 100 900;
761
+ src: url(./files/inter-greek-wght-normal.woff2) format('woff2-variations');
762
+ unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
763
+ }
764
+ @font-face {
765
+ font-family: 'Inter Variable';
766
+ font-style: normal;
767
+ font-display: swap;
768
+ font-weight: 100 900;
769
+ src: url(./files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
770
+ unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
771
+ }
772
+ @font-face {
773
+ font-family: 'Inter Variable';
774
+ font-style: normal;
775
+ font-display: swap;
776
+ font-weight: 100 900;
777
+ src: url(./files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
778
+ unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
779
+ }
780
+ @font-face {
781
+ font-family: 'Inter Variable';
782
+ font-style: normal;
783
+ font-display: swap;
784
+ font-weight: 100 900;
785
+ src: url(./files/inter-latin-wght-normal.woff2) format('woff2-variations');
786
+ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
787
+ }
788
+ @font-face {
789
+ font-family: 'Geist Mono Variable';
790
+ font-style: normal;
791
+ font-display: swap;
792
+ font-weight: 100 900;
793
+ src: url(./files/geist-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
794
+ unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
795
+ }
796
+ @font-face {
797
+ font-family: 'Geist Mono Variable';
798
+ font-style: normal;
799
+ font-display: swap;
800
+ font-weight: 100 900;
801
+ src: url(./files/geist-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
802
+ unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
803
+ }
804
+ @font-face {
805
+ font-family: 'Geist Mono Variable';
806
+ font-style: normal;
807
+ font-display: swap;
808
+ font-weight: 100 900;
809
+ src: url(./files/geist-mono-symbols2-wght-normal.woff2) format('woff2-variations');
810
+ unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
811
+ }
812
+ @font-face {
813
+ font-family: 'Geist Mono Variable';
814
+ font-style: normal;
815
+ font-display: swap;
816
+ font-weight: 100 900;
817
+ src: url(./files/geist-mono-vietnamese-wght-normal.woff2) format('woff2-variations');
818
+ unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
819
+ }
820
+ @font-face {
821
+ font-family: 'Geist Mono Variable';
822
+ font-style: normal;
823
+ font-display: swap;
824
+ font-weight: 100 900;
825
+ src: url(./files/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
826
+ unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
827
+ }
828
+ @font-face {
829
+ font-family: 'Geist Mono Variable';
830
+ font-style: normal;
831
+ font-display: swap;
832
+ font-weight: 100 900;
833
+ src: url(./files/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
834
+ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
835
+ }
836
+ * {
837
+ -webkit-font-smoothing: antialiased;
838
+ -moz-osx-font-smoothing: grayscale;
839
+ box-sizing: border-box;
840
+ outline: none;
841
+ text-decoration-style: dotted;
842
+ }
843
+ @layer components {
844
+ [data-color="red"] {
845
+ --c-solid: var(--color-red-700);
846
+ --c-solid-hover: var(--color-red-700);
847
+ --c-solid-active: var(--color-red-800);
848
+ --c-bg-subtle: var(--color-red-50);
849
+ --c-bg-muted: var(--color-red-100);
850
+ --c-bg-pastel: var(--color-red-200);
851
+ --c-bg-strong: var(--color-red-300);
852
+ --c-text: var(--color-red-700);
853
+ --c-text-strong: var(--color-red-800);
854
+ --c-border: var(--color-red-200);
855
+ --c-on-solid: white;
856
+ }
857
+ [data-color="orange"] {
858
+ --c-solid: var(--color-orange-700);
859
+ --c-solid-hover: var(--color-orange-700);
860
+ --c-solid-active: var(--color-orange-800);
861
+ --c-bg-subtle: var(--color-orange-50);
862
+ --c-bg-muted: var(--color-orange-100);
863
+ --c-bg-pastel: var(--color-orange-200);
864
+ --c-bg-strong: var(--color-orange-300);
865
+ --c-text: var(--color-orange-700);
866
+ --c-text-strong: var(--color-orange-800);
867
+ --c-border: var(--color-orange-200);
868
+ --c-on-solid: white;
869
+ }
870
+ [data-color="amber"] {
871
+ --c-solid: var(--color-amber-700);
872
+ --c-solid-hover: var(--color-amber-700);
873
+ --c-solid-active: var(--color-amber-800);
874
+ --c-bg-subtle: var(--color-amber-50);
875
+ --c-bg-muted: var(--color-amber-100);
876
+ --c-bg-pastel: var(--color-amber-200);
877
+ --c-bg-strong: var(--color-amber-300);
878
+ --c-text: var(--color-amber-700);
879
+ --c-text-strong: var(--color-amber-800);
880
+ --c-border: var(--color-amber-200);
881
+ --c-on-solid: var(--color-amber-950);
882
+ }
883
+ [data-color="yellow"] {
884
+ --c-solid: var(--color-yellow-700);
885
+ --c-solid-hover: var(--color-yellow-700);
886
+ --c-solid-active: var(--color-yellow-800);
887
+ --c-bg-subtle: var(--color-yellow-50);
888
+ --c-bg-muted: var(--color-yellow-100);
889
+ --c-bg-pastel: var(--color-yellow-200);
890
+ --c-bg-strong: var(--color-yellow-300);
891
+ --c-text: var(--color-yellow-700);
892
+ --c-text-strong: var(--color-yellow-800);
893
+ --c-border: var(--color-yellow-200);
894
+ --c-on-solid: var(--color-yellow-950);
895
+ }
896
+ [data-color="lime"] {
897
+ --c-solid: var(--color-lime-700);
898
+ --c-solid-hover: var(--color-lime-700);
899
+ --c-solid-active: var(--color-lime-800);
900
+ --c-bg-subtle: var(--color-lime-50);
901
+ --c-bg-muted: var(--color-lime-100);
902
+ --c-bg-pastel: var(--color-lime-200);
903
+ --c-bg-strong: var(--color-lime-300);
904
+ --c-text: var(--color-lime-700);
905
+ --c-text-strong: var(--color-lime-800);
906
+ --c-border: var(--color-lime-200);
907
+ --c-on-solid: var(--color-lime-950);
908
+ }
909
+ [data-color="green"] {
910
+ --c-solid: var(--color-green-700);
911
+ --c-solid-hover: var(--color-green-700);
912
+ --c-solid-active: var(--color-green-800);
913
+ --c-bg-subtle: var(--color-green-50);
914
+ --c-bg-muted: var(--color-green-100);
915
+ --c-bg-pastel: var(--color-green-200);
916
+ --c-bg-strong: var(--color-green-300);
917
+ --c-text: var(--color-green-700);
918
+ --c-text-strong: var(--color-green-800);
919
+ --c-border: var(--color-green-200);
920
+ --c-on-solid: white;
921
+ }
922
+ [data-color="emerald"] {
923
+ --c-solid: var(--color-emerald-700);
924
+ --c-solid-hover: var(--color-emerald-700);
925
+ --c-solid-active: var(--color-emerald-800);
926
+ --c-bg-subtle: var(--color-emerald-50);
927
+ --c-bg-muted: var(--color-emerald-100);
928
+ --c-bg-pastel: var(--color-emerald-200);
929
+ --c-bg-strong: var(--color-emerald-300);
930
+ --c-text: var(--color-emerald-700);
931
+ --c-text-strong: var(--color-emerald-800);
932
+ --c-border: var(--color-emerald-200);
933
+ --c-on-solid: white;
934
+ }
935
+ [data-color="teal"] {
936
+ --c-solid: var(--color-teal-700);
937
+ --c-solid-hover: var(--color-teal-700);
938
+ --c-solid-active: var(--color-teal-800);
939
+ --c-bg-subtle: var(--color-teal-50);
940
+ --c-bg-muted: var(--color-teal-100);
941
+ --c-bg-pastel: var(--color-teal-200);
942
+ --c-bg-strong: var(--color-teal-300);
943
+ --c-text: var(--color-teal-700);
944
+ --c-text-strong: var(--color-teal-800);
945
+ --c-border: var(--color-teal-200);
946
+ --c-on-solid: white;
947
+ }
948
+ [data-color="cyan"] {
949
+ --c-solid: var(--color-cyan-700);
950
+ --c-solid-hover: var(--color-cyan-700);
951
+ --c-solid-active: var(--color-cyan-800);
952
+ --c-bg-subtle: var(--color-cyan-50);
953
+ --c-bg-muted: var(--color-cyan-100);
954
+ --c-bg-pastel: var(--color-cyan-200);
955
+ --c-bg-strong: var(--color-cyan-300);
956
+ --c-text: var(--color-cyan-700);
957
+ --c-text-strong: var(--color-cyan-800);
958
+ --c-border: var(--color-cyan-200);
959
+ --c-on-solid: white;
960
+ }
961
+ [data-color="sky"] {
962
+ --c-solid: var(--color-sky-700);
963
+ --c-solid-hover: var(--color-sky-700);
964
+ --c-solid-active: var(--color-sky-800);
965
+ --c-bg-subtle: var(--color-sky-50);
966
+ --c-bg-muted: var(--color-sky-100);
967
+ --c-bg-pastel: var(--color-sky-200);
968
+ --c-bg-strong: var(--color-sky-300);
969
+ --c-text: var(--color-sky-700);
970
+ --c-text-strong: var(--color-sky-800);
971
+ --c-border: var(--color-sky-200);
972
+ --c-on-solid: white;
973
+ }
974
+ [data-color="blue"] {
975
+ --c-solid: var(--color-blue-700);
976
+ --c-solid-hover: var(--color-blue-700);
977
+ --c-solid-active: var(--color-blue-800);
978
+ --c-bg-subtle: var(--color-blue-50);
979
+ --c-bg-muted: var(--color-blue-100);
980
+ --c-bg-pastel: var(--color-blue-200);
981
+ --c-bg-strong: var(--color-blue-300);
982
+ --c-text: var(--color-blue-700);
983
+ --c-text-strong: var(--color-blue-800);
984
+ --c-border: var(--color-blue-200);
985
+ --c-on-solid: white;
986
+ }
987
+ [data-color="indigo"] {
988
+ --c-solid: var(--color-indigo-700);
989
+ --c-solid-hover: var(--color-indigo-700);
990
+ --c-solid-active: var(--color-indigo-800);
991
+ --c-bg-subtle: var(--color-indigo-50);
992
+ --c-bg-muted: var(--color-indigo-100);
993
+ --c-bg-pastel: var(--color-indigo-200);
994
+ --c-bg-strong: var(--color-indigo-300);
995
+ --c-text: var(--color-indigo-700);
996
+ --c-text-strong: var(--color-indigo-800);
997
+ --c-border: var(--color-indigo-200);
998
+ --c-on-solid: white;
999
+ }
1000
+ [data-color="violet"] {
1001
+ --c-solid: var(--color-violet-700);
1002
+ --c-solid-hover: var(--color-violet-700);
1003
+ --c-solid-active: var(--color-violet-800);
1004
+ --c-bg-subtle: var(--color-violet-50);
1005
+ --c-bg-muted: var(--color-violet-100);
1006
+ --c-bg-pastel: var(--color-violet-200);
1007
+ --c-bg-strong: var(--color-violet-300);
1008
+ --c-text: var(--color-violet-700);
1009
+ --c-text-strong: var(--color-violet-800);
1010
+ --c-border: var(--color-violet-200);
1011
+ --c-on-solid: white;
1012
+ }
1013
+ [data-color="purple"] {
1014
+ --c-solid: var(--color-purple-700);
1015
+ --c-solid-hover: var(--color-purple-700);
1016
+ --c-solid-active: var(--color-purple-800);
1017
+ --c-bg-subtle: var(--color-purple-50);
1018
+ --c-bg-muted: var(--color-purple-100);
1019
+ --c-bg-pastel: var(--color-purple-200);
1020
+ --c-bg-strong: var(--color-purple-300);
1021
+ --c-text: var(--color-purple-700);
1022
+ --c-text-strong: var(--color-purple-800);
1023
+ --c-border: var(--color-purple-200);
1024
+ --c-on-solid: white;
1025
+ }
1026
+ [data-color="fuchsia"] {
1027
+ --c-solid: var(--color-fuchsia-700);
1028
+ --c-solid-hover: var(--color-fuchsia-700);
1029
+ --c-solid-active: var(--color-fuchsia-800);
1030
+ --c-bg-subtle: var(--color-fuchsia-50);
1031
+ --c-bg-muted: var(--color-fuchsia-100);
1032
+ --c-bg-pastel: var(--color-fuchsia-200);
1033
+ --c-bg-strong: var(--color-fuchsia-300);
1034
+ --c-text: var(--color-fuchsia-700);
1035
+ --c-text-strong: var(--color-fuchsia-800);
1036
+ --c-border: var(--color-fuchsia-200);
1037
+ --c-on-solid: white;
1038
+ }
1039
+ [data-color="pink"] {
1040
+ --c-solid: var(--color-pink-700);
1041
+ --c-solid-hover: var(--color-pink-700);
1042
+ --c-solid-active: var(--color-pink-800);
1043
+ --c-bg-subtle: var(--color-pink-50);
1044
+ --c-bg-muted: var(--color-pink-100);
1045
+ --c-bg-pastel: var(--color-pink-200);
1046
+ --c-bg-strong: var(--color-pink-300);
1047
+ --c-text: var(--color-pink-700);
1048
+ --c-text-strong: var(--color-pink-800);
1049
+ --c-border: var(--color-pink-200);
1050
+ --c-on-solid: white;
1051
+ }
1052
+ [data-color="rose"] {
1053
+ --c-solid: var(--color-rose-700);
1054
+ --c-solid-hover: var(--color-rose-700);
1055
+ --c-solid-active: var(--color-rose-800);
1056
+ --c-bg-subtle: var(--color-rose-50);
1057
+ --c-bg-muted: var(--color-rose-100);
1058
+ --c-bg-pastel: var(--color-rose-200);
1059
+ --c-bg-strong: var(--color-rose-300);
1060
+ --c-text: var(--color-rose-700);
1061
+ --c-text-strong: var(--color-rose-800);
1062
+ --c-border: var(--color-rose-200);
1063
+ --c-on-solid: white;
1064
+ }
1065
+ [data-color="slate"] {
1066
+ --c-solid: var(--color-slate-700);
1067
+ --c-solid-hover: var(--color-slate-700);
1068
+ --c-solid-active: var(--color-slate-800);
1069
+ --c-bg-subtle: var(--color-slate-50);
1070
+ --c-bg-muted: var(--color-slate-100);
1071
+ --c-bg-pastel: var(--color-slate-200);
1072
+ --c-bg-strong: var(--color-slate-300);
1073
+ --c-text: var(--color-slate-700);
1074
+ --c-text-strong: var(--color-slate-800);
1075
+ --c-border: var(--color-slate-200);
1076
+ --c-on-solid: white;
1077
+ }
1078
+ [data-color="gray"] {
1079
+ --c-solid: var(--color-gray-700);
1080
+ --c-solid-hover: var(--color-gray-700);
1081
+ --c-solid-active: var(--color-gray-800);
1082
+ --c-bg-subtle: var(--color-gray-50);
1083
+ --c-bg-muted: var(--color-gray-100);
1084
+ --c-bg-pastel: var(--color-gray-200);
1085
+ --c-bg-strong: var(--color-gray-300);
1086
+ --c-text: var(--color-gray-700);
1087
+ --c-text-strong: var(--color-gray-800);
1088
+ --c-border: var(--color-gray-200);
1089
+ --c-on-solid: white;
1090
+ }
1091
+ [data-color="zinc"] {
1092
+ --c-solid: var(--color-zinc-700);
1093
+ --c-solid-hover: var(--color-zinc-700);
1094
+ --c-solid-active: var(--color-zinc-800);
1095
+ --c-bg-subtle: var(--color-zinc-50);
1096
+ --c-bg-muted: var(--color-zinc-100);
1097
+ --c-bg-pastel: var(--color-zinc-200);
1098
+ --c-bg-strong: var(--color-zinc-300);
1099
+ --c-text: var(--color-zinc-700);
1100
+ --c-text-strong: var(--color-zinc-800);
1101
+ --c-border: var(--color-zinc-200);
1102
+ --c-on-solid: white;
1103
+ }
1104
+ [data-color="neutral"] {
1105
+ --c-solid: var(--color-neutral-700);
1106
+ --c-solid-hover: var(--color-neutral-700);
1107
+ --c-solid-active: var(--color-neutral-800);
1108
+ --c-bg-subtle: var(--color-neutral-50);
1109
+ --c-bg-muted: var(--color-neutral-100);
1110
+ --c-bg-pastel: var(--color-neutral-200);
1111
+ --c-bg-strong: var(--color-neutral-300);
1112
+ --c-text: var(--color-neutral-700);
1113
+ --c-text-strong: var(--color-neutral-800);
1114
+ --c-border: var(--color-neutral-200);
1115
+ --c-on-solid: white;
1116
+ }
1117
+ [data-color="stone"] {
1118
+ --c-solid: var(--color-stone-700);
1119
+ --c-solid-hover: var(--color-stone-700);
1120
+ --c-solid-active: var(--color-stone-800);
1121
+ --c-bg-subtle: var(--color-stone-50);
1122
+ --c-bg-muted: var(--color-stone-100);
1123
+ --c-bg-pastel: var(--color-stone-200);
1124
+ --c-bg-strong: var(--color-stone-300);
1125
+ --c-text: var(--color-stone-700);
1126
+ --c-text-strong: var(--color-stone-800);
1127
+ --c-border: var(--color-stone-200);
1128
+ --c-on-solid: white;
1129
+ }
1130
+ [data-color="primary"] {
1131
+ --c-solid: var(--color-blue-700);
1132
+ --c-solid-hover: var(--color-blue-700);
1133
+ --c-solid-active: var(--color-blue-800);
1134
+ --c-bg-subtle: var(--color-blue-50);
1135
+ --c-bg-muted: var(--color-blue-100);
1136
+ --c-bg-pastel: var(--color-blue-200);
1137
+ --c-bg-strong: var(--color-blue-300);
1138
+ --c-text: var(--color-blue-700);
1139
+ --c-text-strong: var(--color-blue-800);
1140
+ --c-border: var(--color-blue-200);
1141
+ --c-on-solid: white;
1142
+ }
1143
+ [data-color="accent"] {
1144
+ --c-solid: var(--color-violet-700);
1145
+ --c-solid-hover: var(--color-violet-700);
1146
+ --c-solid-active: var(--color-violet-800);
1147
+ --c-bg-subtle: var(--color-violet-50);
1148
+ --c-bg-muted: var(--color-violet-100);
1149
+ --c-bg-pastel: var(--color-violet-200);
1150
+ --c-bg-strong: var(--color-violet-300);
1151
+ --c-text: var(--color-violet-700);
1152
+ --c-text-strong: var(--color-violet-800);
1153
+ --c-border: var(--color-violet-200);
1154
+ --c-on-solid: white;
1155
+ }
1156
+ [data-color="success"] {
1157
+ --c-solid: var(--color-emerald-700);
1158
+ --c-solid-hover: var(--color-emerald-700);
1159
+ --c-solid-active: var(--color-emerald-800);
1160
+ --c-bg-subtle: var(--color-emerald-50);
1161
+ --c-bg-muted: var(--color-emerald-100);
1162
+ --c-bg-pastel: var(--color-emerald-200);
1163
+ --c-bg-strong: var(--color-emerald-300);
1164
+ --c-text: var(--color-emerald-700);
1165
+ --c-text-strong: var(--color-emerald-800);
1166
+ --c-border: var(--color-emerald-200);
1167
+ --c-on-solid: white;
1168
+ }
1169
+ [data-color="warning"] {
1170
+ --c-solid: var(--color-amber-700);
1171
+ --c-solid-hover: var(--color-amber-700);
1172
+ --c-solid-active: var(--color-amber-800);
1173
+ --c-bg-subtle: var(--color-amber-50);
1174
+ --c-bg-muted: var(--color-amber-100);
1175
+ --c-bg-pastel: var(--color-amber-200);
1176
+ --c-bg-strong: var(--color-amber-300);
1177
+ --c-text: var(--color-amber-700);
1178
+ --c-text-strong: var(--color-amber-800);
1179
+ --c-border: var(--color-amber-200);
1180
+ --c-on-solid: var(--color-amber-950);
1181
+ }
1182
+ [data-color="critical"] {
1183
+ --c-solid: var(--color-red-700);
1184
+ --c-solid-hover: var(--color-red-700);
1185
+ --c-solid-active: var(--color-red-800);
1186
+ --c-bg-subtle: var(--color-red-50);
1187
+ --c-bg-muted: var(--color-red-100);
1188
+ --c-bg-pastel: var(--color-red-200);
1189
+ --c-bg-strong: var(--color-red-300);
1190
+ --c-text: var(--color-red-700);
1191
+ --c-text-strong: var(--color-red-800);
1192
+ --c-border: var(--color-red-200);
1193
+ --c-on-solid: white;
1194
+ }
1195
+ [data-color="info"] {
1196
+ --c-solid: var(--color-sky-700);
1197
+ --c-solid-hover: var(--color-sky-700);
1198
+ --c-solid-active: var(--color-sky-800);
1199
+ --c-bg-subtle: var(--color-sky-50);
1200
+ --c-bg-muted: var(--color-sky-100);
1201
+ --c-bg-pastel: var(--color-sky-200);
1202
+ --c-bg-strong: var(--color-sky-300);
1203
+ --c-text: var(--color-sky-700);
1204
+ --c-text-strong: var(--color-sky-800);
1205
+ --c-border: var(--color-sky-200);
1206
+ --c-on-solid: white;
1207
+ }
1208
+ [data-color="tomato"] {
1209
+ --c-solid: var(--color-red-700);
1210
+ --c-solid-hover: var(--color-red-700);
1211
+ --c-solid-active: var(--color-red-800);
1212
+ --c-bg-subtle: var(--color-red-50);
1213
+ --c-bg-muted: var(--color-red-100);
1214
+ --c-bg-pastel: var(--color-red-200);
1215
+ --c-bg-strong: var(--color-red-300);
1216
+ --c-text: var(--color-red-700);
1217
+ --c-text-strong: var(--color-red-800);
1218
+ --c-border: var(--color-red-200);
1219
+ --c-on-solid: white;
1220
+ }
1221
+ [data-color="crimson"] {
1222
+ --c-solid: var(--color-rose-700);
1223
+ --c-solid-hover: var(--color-rose-700);
1224
+ --c-solid-active: var(--color-rose-800);
1225
+ --c-bg-subtle: var(--color-rose-50);
1226
+ --c-bg-muted: var(--color-rose-100);
1227
+ --c-bg-pastel: var(--color-rose-200);
1228
+ --c-bg-strong: var(--color-rose-300);
1229
+ --c-text: var(--color-rose-700);
1230
+ --c-text-strong: var(--color-rose-800);
1231
+ --c-border: var(--color-rose-200);
1232
+ --c-on-solid: white;
1233
+ }
1234
+ [data-color="plum"] {
1235
+ --c-solid: var(--color-purple-700);
1236
+ --c-solid-hover: var(--color-purple-700);
1237
+ --c-solid-active: var(--color-purple-800);
1238
+ --c-bg-subtle: var(--color-purple-50);
1239
+ --c-bg-muted: var(--color-purple-100);
1240
+ --c-bg-pastel: var(--color-purple-200);
1241
+ --c-bg-strong: var(--color-purple-300);
1242
+ --c-text: var(--color-purple-700);
1243
+ --c-text-strong: var(--color-purple-800);
1244
+ --c-border: var(--color-purple-200);
1245
+ --c-on-solid: white;
1246
+ }
1247
+ [data-color="grass"] {
1248
+ --c-solid: var(--color-green-700);
1249
+ --c-solid-hover: var(--color-green-700);
1250
+ --c-solid-active: var(--color-green-800);
1251
+ --c-bg-subtle: var(--color-green-50);
1252
+ --c-bg-muted: var(--color-green-100);
1253
+ --c-bg-pastel: var(--color-green-200);
1254
+ --c-bg-strong: var(--color-green-300);
1255
+ --c-text: var(--color-green-700);
1256
+ --c-text-strong: var(--color-green-800);
1257
+ --c-border: var(--color-green-200);
1258
+ --c-on-solid: white;
1259
+ }
1260
+ [data-color="brown"] {
1261
+ --c-solid: var(--color-stone-700);
1262
+ --c-solid-hover: var(--color-stone-700);
1263
+ --c-solid-active: var(--color-stone-800);
1264
+ --c-bg-subtle: var(--color-stone-50);
1265
+ --c-bg-muted: var(--color-stone-100);
1266
+ --c-bg-pastel: var(--color-stone-200);
1267
+ --c-bg-strong: var(--color-stone-300);
1268
+ --c-text: var(--color-stone-700);
1269
+ --c-text-strong: var(--color-stone-800);
1270
+ --c-border: var(--color-stone-200);
1271
+ --c-on-solid: white;
1272
+ }
1273
+ [data-color="mint"] {
1274
+ --c-solid: var(--color-emerald-700);
1275
+ --c-solid-hover: var(--color-emerald-700);
1276
+ --c-solid-active: var(--color-emerald-800);
1277
+ --c-bg-subtle: var(--color-emerald-50);
1278
+ --c-bg-muted: var(--color-emerald-100);
1279
+ --c-bg-pastel: var(--color-emerald-200);
1280
+ --c-bg-strong: var(--color-emerald-300);
1281
+ --c-text: var(--color-emerald-700);
1282
+ --c-text-strong: var(--color-emerald-800);
1283
+ --c-border: var(--color-emerald-200);
1284
+ --c-on-solid: white;
1285
+ }
1286
+ [data-color="gold"] {
1287
+ --c-solid: var(--color-amber-700);
1288
+ --c-solid-hover: var(--color-amber-700);
1289
+ --c-solid-active: var(--color-amber-800);
1290
+ --c-bg-subtle: var(--color-amber-50);
1291
+ --c-bg-muted: var(--color-amber-100);
1292
+ --c-bg-pastel: var(--color-amber-200);
1293
+ --c-bg-strong: var(--color-amber-300);
1294
+ --c-text: var(--color-amber-700);
1295
+ --c-text-strong: var(--color-amber-800);
1296
+ --c-border: var(--color-amber-200);
1297
+ --c-on-solid: var(--color-amber-950);
1298
+ }
1299
+ [data-color="bronze"] {
1300
+ --c-solid: var(--color-orange-700);
1301
+ --c-solid-hover: var(--color-orange-700);
1302
+ --c-solid-active: var(--color-orange-800);
1303
+ --c-bg-subtle: var(--color-orange-50);
1304
+ --c-bg-muted: var(--color-orange-100);
1305
+ --c-bg-pastel: var(--color-orange-200);
1306
+ --c-bg-strong: var(--color-orange-300);
1307
+ --c-text: var(--color-orange-700);
1308
+ --c-text-strong: var(--color-orange-800);
1309
+ --c-border: var(--color-orange-200);
1310
+ --c-on-solid: white;
1311
+ }
1312
+ [data-color="mauve"] {
1313
+ --c-solid: var(--color-zinc-700);
1314
+ --c-solid-hover: var(--color-zinc-700);
1315
+ --c-solid-active: var(--color-zinc-800);
1316
+ --c-bg-subtle: var(--color-zinc-50);
1317
+ --c-bg-muted: var(--color-zinc-100);
1318
+ --c-bg-pastel: var(--color-zinc-200);
1319
+ --c-bg-strong: var(--color-zinc-300);
1320
+ --c-text: var(--color-zinc-700);
1321
+ --c-text-strong: var(--color-zinc-800);
1322
+ --c-border: var(--color-zinc-200);
1323
+ --c-on-solid: white;
1324
+ }
1325
+ [data-color="sage"] {
1326
+ --c-solid: var(--color-green-700);
1327
+ --c-solid-hover: var(--color-green-700);
1328
+ --c-solid-active: var(--color-green-800);
1329
+ --c-bg-subtle: var(--color-green-50);
1330
+ --c-bg-muted: var(--color-green-100);
1331
+ --c-bg-pastel: var(--color-green-200);
1332
+ --c-bg-strong: var(--color-green-300);
1333
+ --c-text: var(--color-green-700);
1334
+ --c-text-strong: var(--color-green-800);
1335
+ --c-border: var(--color-green-200);
1336
+ --c-on-solid: white;
1337
+ }
1338
+ [data-color="olive"] {
1339
+ --c-solid: var(--color-lime-700);
1340
+ --c-solid-hover: var(--color-lime-700);
1341
+ --c-solid-active: var(--color-lime-800);
1342
+ --c-bg-subtle: var(--color-lime-50);
1343
+ --c-bg-muted: var(--color-lime-100);
1344
+ --c-bg-pastel: var(--color-lime-200);
1345
+ --c-bg-strong: var(--color-lime-300);
1346
+ --c-text: var(--color-lime-700);
1347
+ --c-text-strong: var(--color-lime-800);
1348
+ --c-border: var(--color-lime-200);
1349
+ --c-on-solid: var(--color-lime-950);
1350
+ }
1351
+ [data-color="sand"] {
1352
+ --c-solid: var(--color-stone-700);
1353
+ --c-solid-hover: var(--color-stone-700);
1354
+ --c-solid-active: var(--color-stone-800);
1355
+ --c-bg-subtle: var(--color-stone-50);
1356
+ --c-bg-muted: var(--color-stone-100);
1357
+ --c-bg-pastel: var(--color-stone-200);
1358
+ --c-bg-strong: var(--color-stone-300);
1359
+ --c-text: var(--color-stone-700);
1360
+ --c-text-strong: var(--color-stone-800);
1361
+ --c-border: var(--color-stone-200);
1362
+ --c-on-solid: white;
1363
+ }
1364
+ }
1365
+ @layer components {
1366
+ [data-variant] {
1367
+ background-color: var(--variant-bg);
1368
+ color: var(--variant-fg);
1369
+ border: 1px solid var(--variant-border, transparent);
1370
+ }
1371
+ [data-variant]:not([data-interactive="false"], [aria-disabled="true"]):hover {
1372
+ background-color: var(--variant-hover);
1373
+ }
1374
+ [data-variant]:not([data-interactive="false"], [aria-disabled="true"])[data-pressed] {
1375
+ background-color: var(--variant-pressed);
1376
+ }
1377
+ [data-variant="solid"] {
1378
+ --variant-fg: var(--c-on-solid);
1379
+ --variant-bg: var(--c-solid);
1380
+ --variant-hover: var(--c-solid-hover);
1381
+ --variant-pressed: var(--c-solid-active);
1382
+ }
1383
+ [data-variant="light"] {
1384
+ --variant-fg: var(--c-text);
1385
+ --variant-bg: var(--c-bg-subtle);
1386
+ --variant-hover: var(--c-bg-muted);
1387
+ --variant-pressed: var(--c-bg-pastel);
1388
+ }
1389
+ [data-variant="outline"] {
1390
+ --variant-fg: var(--c-text);
1391
+ --variant-bg: transparent;
1392
+ --variant-border: var(--c-border);
1393
+ --variant-hover: var(--c-bg-subtle);
1394
+ --variant-pressed: var(--c-bg-muted);
1395
+ }
1396
+ [data-variant="lightOutline"] {
1397
+ --variant-fg: var(--c-text);
1398
+ --variant-bg: var(--c-bg-subtle);
1399
+ --variant-border: var(--c-border);
1400
+ --variant-hover: var(--c-bg-muted);
1401
+ --variant-pressed: var(--c-bg-pastel);
1402
+ }
1403
+ [data-variant="ghost"] {
1404
+ --variant-fg: var(--c-text);
1405
+ --variant-bg: transparent;
1406
+ --variant-hover: var(--c-bg-subtle);
1407
+ --variant-pressed: var(--c-bg-muted);
1408
+ }
1409
+ [data-variant="pastel"] {
1410
+ --variant-fg: var(--c-text-strong);
1411
+ --variant-bg: var(--c-bg-pastel);
1412
+ --variant-hover: var(--c-bg-strong);
1413
+ --variant-pressed: var(--c-bg-strong);
1414
+ }
1415
+ [data-variant="solidMono"] {
1416
+ --variant-fg: var(--c-text-strong);
1417
+ --variant-bg: var(--c-bg-muted);
1418
+ --variant-hover: var(--c-bg-pastel);
1419
+ --variant-pressed: var(--c-bg-strong);
1420
+ }
1421
+ }
1422
+ @layer components {
1423
+ .parrot-theme {
1424
+ font-family: var(--font-sans);
1425
+ }
1426
+ .prt-size {
1427
+ height: var(--size);
1428
+ padding-inline: var(--size-px);
1429
+ font-size: var(--size-font);
1430
+ gap: var(--size-gap);
1431
+ &[data-size="2xs"] {
1432
+ --size: calc(var(--spacing) * 5);
1433
+ --size-px: calc(var(--spacing) * 2);
1434
+ --size-font: 0.5rem;
1435
+ --size-gap: calc(var(--spacing) * 1);
1436
+ }
1437
+ &[data-size="xs"] {
1438
+ --size: calc(var(--spacing) * 6);
1439
+ --size-px: calc(var(--spacing) * 2.5);
1440
+ --size-font: var(--text-xs);
1441
+ --size-gap: calc(var(--spacing) * 1.5);
1442
+ }
1443
+ &[data-size="sm"] {
1444
+ --size: calc(var(--spacing) * 8);
1445
+ --size-px: calc(var(--spacing) * 3);
1446
+ --size-font: var(--text-sm);
1447
+ --size-gap: calc(var(--spacing) * 1.5);
1448
+ }
1449
+ &[data-size="md"] {
1450
+ --size: calc(var(--spacing) * 10);
1451
+ --size-px: calc(var(--spacing) * 4);
1452
+ --size-font: var(--text-sm);
1453
+ --size-gap: calc(var(--spacing) * 2);
1454
+ }
1455
+ &[data-size="lg"] {
1456
+ --size: calc(var(--spacing) * 11);
1457
+ --size-px: calc(var(--spacing) * 5);
1458
+ --size-font: var(--text-base);
1459
+ --size-gap: calc(var(--spacing) * 2);
1460
+ }
1461
+ &[data-size="xl"] {
1462
+ --size: calc(var(--spacing) * 12);
1463
+ --size-px: calc(var(--spacing) * 6);
1464
+ --size-font: var(--text-lg);
1465
+ --size-gap: calc(var(--spacing) * 2.5);
1466
+ }
1467
+ &[data-size="2xl"] {
1468
+ --size: calc(var(--spacing) * 14);
1469
+ --size-px: calc(var(--spacing) * 7);
1470
+ --size-font: var(--text-xl);
1471
+ --size-gap: calc(var(--spacing) * 3);
1472
+ }
1473
+ &[data-size="3xl"] {
1474
+ --size: calc(var(--spacing) * 16);
1475
+ --size-px: calc(var(--spacing) * 8);
1476
+ --size-font: var(--text-2xl);
1477
+ --size-gap: calc(var(--spacing) * 3);
1478
+ }
1479
+ }
1480
+ [data-radius] {
1481
+ border-radius: var(--prt-radius, 0);
1482
+ }
1483
+ [data-radius="none"] {
1484
+ --prt-radius: 0;
1485
+ }
1486
+ [data-radius="sm"] {
1487
+ --prt-radius: var(--radius-sm);
1488
+ }
1489
+ [data-radius="md"] {
1490
+ --prt-radius: var(--radius-md);
1491
+ }
1492
+ [data-radius="lg"] {
1493
+ --prt-radius: var(--radius-lg);
1494
+ }
1495
+ [data-radius="xl"] {
1496
+ --prt-radius: var(--radius-xl);
1497
+ }
1498
+ [data-radius="2xl"] {
1499
+ --prt-radius: var(--radius-2xl);
1500
+ }
1501
+ [data-radius="full"] {
1502
+ --prt-radius: var(--radius-full);
1503
+ }
1504
+ }
1505
+ @layer components {
1506
+ .prt-button {
1507
+ display: inline-flex;
1508
+ flex-wrap: nowrap;
1509
+ align-items: center;
1510
+ justify-content: center;
1511
+ flex-shrink: 0;
1512
+ white-space: nowrap;
1513
+ user-select: none;
1514
+ cursor: pointer;
1515
+ font-weight: 500;
1516
+ outline: none;
1517
+ transition: background-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
1518
+ &:focus-visible {
1519
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1520
+ }
1521
+ &[data-pressed] {
1522
+ transform: scale(0.97);
1523
+ }
1524
+ @media (prefers-reduced-motion: reduce) {
1525
+ transition: background-color 100ms ease, box-shadow 100ms ease;
1526
+ &[data-pressed] {
1527
+ transform: none;
1528
+ }
1529
+ }
1530
+ &[data-icon-button="true"] {
1531
+ width: var(--prt-icon-button-size, var(--size));
1532
+ height: var(--prt-icon-button-size, var(--size));
1533
+ padding-inline: 0;
1534
+ flex-shrink: 0;
1535
+ }
1536
+ &[data-loading="true"] {
1537
+ pointer-events: none;
1538
+ }
1539
+ &:disabled {
1540
+ opacity: 0.5;
1541
+ cursor: not-allowed;
1542
+ pointer-events: none;
1543
+ }
1544
+ }
1545
+ .prt-button-loader {
1546
+ margin-left: calc(var(--spacing) * 2);
1547
+ }
1548
+ .prt-button[data-icon-button="true"] .prt-button-loader {
1549
+ margin-left: 0;
1550
+ }
1551
+ }
1552
+ @layer components {
1553
+ .prt-input-group {
1554
+ width: 100%;
1555
+ &[data-size="xs"] {
1556
+ --input-height: calc(var(--spacing) * 6);
1557
+ --input-font: var(--text-xs);
1558
+ }
1559
+ &[data-size="sm"] {
1560
+ --input-height: calc(var(--spacing) * 8);
1561
+ --input-font: var(--text-sm);
1562
+ }
1563
+ &[data-size="md"] {
1564
+ --input-height: calc(var(--spacing) * 10);
1565
+ --input-font: var(--text-sm);
1566
+ }
1567
+ &[data-size="lg"] {
1568
+ --input-height: calc(var(--spacing) * 11);
1569
+ --input-font: var(--text-base);
1570
+ }
1571
+ &[data-size="xl"] {
1572
+ --input-height: calc(var(--spacing) * 12);
1573
+ --input-font: var(--text-lg);
1574
+ }
1575
+ }
1576
+ .prt-input-label {
1577
+ display: inline-block;
1578
+ font-size: var(--text-sm);
1579
+ font-weight: 500;
1580
+ color: var(--color-text-light);
1581
+ }
1582
+ [data-required] .prt-input-label::after {
1583
+ content: "*";
1584
+ margin-inline-start: 2px;
1585
+ color: var(--color-critical);
1586
+ }
1587
+ .prt-input-description {
1588
+ font-size: var(--text-xs);
1589
+ line-height: 1.4;
1590
+ color: var(--color-gray-500);
1591
+ }
1592
+ .prt-input-error {
1593
+ font-size: var(--text-xs);
1594
+ line-height: 1.4;
1595
+ color: var(--color-critical);
1596
+ }
1597
+ .prt-input-control {
1598
+ height: var(--input-height);
1599
+ border-radius: var(--prt-radius);
1600
+ padding-inline: calc(var(--spacing) * 2.5);
1601
+ font-size: var(--input-font);
1602
+ color: var(--color-gray-900);
1603
+ background: var(--color-surface-raised);
1604
+ border: 1px solid var(--color-border);
1605
+ outline: none;
1606
+ transition: border-color 100ms ease, box-shadow 100ms ease;
1607
+ & .prt-text-input-el {
1608
+ flex: 1;
1609
+ min-width: 0;
1610
+ background: transparent;
1611
+ border: none;
1612
+ outline: none;
1613
+ font-size: inherit;
1614
+ color: inherit;
1615
+ }
1616
+ & .prt-text-input-el::placeholder, &::placeholder {
1617
+ color: var(--color-gray-400);
1618
+ }
1619
+ & .add-on {
1620
+ display: flex;
1621
+ align-items: center;
1622
+ color: var(--color-gray-500);
1623
+ }
1624
+ &:focus-within {
1625
+ border-color: var(--color-primary);
1626
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1627
+ }
1628
+ &[data-appearance="filled"] {
1629
+ background: var(--color-surface-sunken);
1630
+ border-color: transparent;
1631
+ }
1632
+ &[data-appearance="filled-outline"] {
1633
+ background: var(--color-surface-sunken);
1634
+ }
1635
+ &[data-has-error="true"] {
1636
+ border-color: var(--color-critical);
1637
+ &:focus-within {
1638
+ border-color: var(--color-critical);
1639
+ box-shadow: 0 0 0 3px var(--color-focus-ring-critical);
1640
+ }
1641
+ }
1642
+ &[data-disabled="true"] {
1643
+ opacity: 0.5;
1644
+ cursor: not-allowed;
1645
+ }
1646
+ }
1647
+ }
1648
+ @layer components {
1649
+ .prt-modal-underlay {
1650
+ position: fixed;
1651
+ inset: 0;
1652
+ width: 100vw;
1653
+ height: 100vh;
1654
+ padding: 12px;
1655
+ background: var(--color-overlay);
1656
+ display: grid;
1657
+ align-items: start;
1658
+ }
1659
+ .prt-modal-container {
1660
+ display: inline-flex;
1661
+ &[data-variant="modal"] {
1662
+ align-self: center;
1663
+ justify-self: center;
1664
+ }
1665
+ &[data-variant="drawer"] {
1666
+ justify-self: end;
1667
+ }
1668
+ }
1669
+ .prt-modal-content {
1670
+ background: var(--color-surface-raised);
1671
+ display: flex;
1672
+ flex-direction: column;
1673
+ position: relative;
1674
+ overflow: hidden;
1675
+ box-shadow: var(--shadow-xl);
1676
+ max-height: calc(100vh - 24px);
1677
+ }
1678
+ .prt-modal-head {
1679
+ padding: 1rem;
1680
+ border-bottom: 1px solid var(--color-border);
1681
+ }
1682
+ .prt-modal-body {
1683
+ padding: 1rem;
1684
+ overflow-y: auto;
1685
+ flex: 1 1 0%;
1686
+ }
1687
+ .prt-modal-footer {
1688
+ padding: 1rem;
1689
+ align-self: flex-end;
1690
+ width: 100%;
1691
+ background: inherit;
1692
+ border-top: 1px solid var(--color-border);
1693
+ }
1694
+ }
1695
+ @layer components {
1696
+ .prt-avatar {
1697
+ width: var(--size);
1698
+ padding-inline: 0;
1699
+ display: inline-flex;
1700
+ align-items: center;
1701
+ justify-content: center;
1702
+ overflow: hidden;
1703
+ flex-shrink: 0;
1704
+ line-height: 1;
1705
+ font-weight: 500;
1706
+ text-transform: uppercase;
1707
+ user-select: none;
1708
+ & img {
1709
+ width: 100%;
1710
+ height: 100%;
1711
+ object-fit: cover;
1712
+ object-position: center;
1713
+ }
1714
+ &[data-size="2xs"] {
1715
+ font-size: 0.5rem;
1716
+ }
1717
+ &[data-size="xs"] {
1718
+ font-size: 0.625rem;
1719
+ }
1720
+ &[data-size="sm"] {
1721
+ font-size: var(--text-xs);
1722
+ }
1723
+ &[data-size="md"] {
1724
+ font-size: var(--text-sm);
1725
+ }
1726
+ &[data-size="lg"] {
1727
+ font-size: var(--text-base);
1728
+ }
1729
+ &[data-size="xl"] {
1730
+ font-size: var(--text-lg);
1731
+ }
1732
+ &[data-size="2xl"] {
1733
+ font-size: var(--text-xl);
1734
+ }
1735
+ &[data-size="3xl"] {
1736
+ font-size: var(--text-2xl);
1737
+ }
1738
+ }
1739
+ .prt-avatar-group {
1740
+ display: inline-flex;
1741
+ align-items: center;
1742
+ & > * {
1743
+ box-shadow: 0 0 0 2px var(--color-surface);
1744
+ }
1745
+ & > *:not(:first-child) {
1746
+ margin-inline-start: calc(var(--spacing) * -2);
1747
+ }
1748
+ }
1749
+ }
1750
+ @layer components {
1751
+ .prt-checkbox {
1752
+ display: flex;
1753
+ align-items: center;
1754
+ gap: calc(var(--spacing) * 3);
1755
+ &:where([data-disabled]) {
1756
+ opacity: 0.5;
1757
+ cursor: not-allowed;
1758
+ }
1759
+ .prt-fake-checkbox {
1760
+ --base-size: calc(var(--spacing) * 3);
1761
+ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
1762
+ display: inline-flex;
1763
+ align-items: center;
1764
+ justify-content: center;
1765
+ border-width: 1.5px;
1766
+ border-style: solid;
1767
+ border-color: var(--color-gray-300);
1768
+ height: var(--base-size);
1769
+ width: var(--base-size);
1770
+ border-radius: var(--prt-radius, var(--radius-md));
1771
+ flex-shrink: 0;
1772
+ & > svg {
1773
+ width: 72%;
1774
+ height: 72%;
1775
+ }
1776
+ &:where([data-size="xs"]) {
1777
+ --base-size: calc(var(--spacing) * 3);
1778
+ }
1779
+ &:where([data-size="sm"]) {
1780
+ --base-size: calc(var(--spacing) * 4);
1781
+ }
1782
+ &:where([data-size="md"]) {
1783
+ --base-size: calc(var(--spacing) * 5);
1784
+ }
1785
+ &:where([data-size="lg"]) {
1786
+ --base-size: calc(var(--spacing) * 6);
1787
+ }
1788
+ &:where([data-size="xl"]) {
1789
+ --base-size: calc(var(--spacing) * 7);
1790
+ }
1791
+ &[data-variant] {
1792
+ border-color: transparent;
1793
+ }
1794
+ &:where([data-focused="true"]) {
1795
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1796
+ }
1797
+ &:where([data-appearance="filled"]) {
1798
+ background-color: var(--color-border);
1799
+ border-color: transparent;
1800
+ }
1801
+ }
1802
+ }
1803
+ }
1804
+ @layer components {
1805
+ .prt-radio {
1806
+ display: flex;
1807
+ align-items: center;
1808
+ gap: calc(var(--spacing) * 2);
1809
+ &[data-disabled] {
1810
+ opacity: 0.5;
1811
+ cursor: not-allowed;
1812
+ }
1813
+ }
1814
+ .prt-fake-radio {
1815
+ --base-radio-size: calc(var(--spacing) * 3);
1816
+ border-radius: 50%;
1817
+ border-width: 1px;
1818
+ border-color: var(--color-border);
1819
+ border-style: solid;
1820
+ transition: border 150ms;
1821
+ flex-shrink: 0;
1822
+ flex-grow: 0;
1823
+ height: var(--base-radio-size);
1824
+ width: var(--base-radio-size);
1825
+ &[data-checked="true"] {
1826
+ border-color: var(--c-solid-hover, var(--color-primary));
1827
+ border-width: thick;
1828
+ }
1829
+ &[data-size="sm"] {
1830
+ --base-radio-size: calc(var(--spacing) * 4);
1831
+ }
1832
+ &[data-size="md"] {
1833
+ --base-radio-size: calc(var(--spacing) * 5);
1834
+ }
1835
+ &[data-size="lg"] {
1836
+ --base-radio-size: calc(var(--spacing) * 6);
1837
+ }
1838
+ &[data-size="xl"] {
1839
+ --base-radio-size: calc(var(--spacing) * 7);
1840
+ }
1841
+ }
1842
+ .prt-radio-card {
1843
+ padding: calc(var(--spacing) * 3);
1844
+ border-radius: var(--prt-radius, var(--radius-lg));
1845
+ display: flex;
1846
+ gap: calc(var(--spacing) * 3);
1847
+ border-color: transparent;
1848
+ border-style: solid;
1849
+ transition: all 150ms ease-out;
1850
+ &[data-selected] {
1851
+ background-color: var(--color-surface-hover);
1852
+ border-color: var(--color-border);
1853
+ }
1854
+ &[data-appearance="outline"] {
1855
+ background-color: var(--color-surface);
1856
+ border-color: var(--color-border);
1857
+ }
1858
+ &[data-appearance="filled"] {
1859
+ background-color: var(--color-surface-hover);
1860
+ }
1861
+ }
1862
+ }
1863
+ @layer components {
1864
+ .prt-switch-group {
1865
+ display: inline-flex;
1866
+ align-items: center;
1867
+ gap: calc(var(--spacing) * 2);
1868
+ cursor: pointer;
1869
+ -webkit-tap-highlight-color: transparent;
1870
+ &[data-disabled] {
1871
+ cursor: default;
1872
+ opacity: 0.5;
1873
+ }
1874
+ &[data-selected] {
1875
+ .prt-switch {
1876
+ background-color: var(--c-text, var(--color-primary));
1877
+ }
1878
+ .prt-switch-thumb {
1879
+ transform: translateX(100%);
1880
+ }
1881
+ }
1882
+ &[data-focus-visible] .prt-switch {
1883
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1884
+ border-color: var(--color-border);
1885
+ }
1886
+ &[data-focus-visible][data-selected] .prt-switch {
1887
+ border-color: transparent;
1888
+ }
1889
+ &[data-pressed] .prt-switch-thumb {
1890
+ width: calc( var(--base-switch-track-height) - (2 * var(--base-switch-padding)) - (2 * var(--base-switch-border-width)) + 4px );
1891
+ }
1892
+ &[data-pressed][data-selected] .prt-switch-thumb {
1893
+ margin-left: -8px;
1894
+ }
1895
+ }
1896
+ .prt-switch {
1897
+ --base-switch-track-height: calc(var(--spacing) * 4);
1898
+ --base-switch-padding: calc(var(--spacing) * 0.5);
1899
+ --base-switch-border-width: 1px;
1900
+ display: flex;
1901
+ align-items: center;
1902
+ padding: var(--base-switch-padding);
1903
+ height: var(--base-switch-track-height);
1904
+ border: 1px solid transparent;
1905
+ background-color: var(--color-gray-200);
1906
+ border-radius: var(--base-switch-track-height);
1907
+ &[data-size="sm"] {
1908
+ width: 26px;
1909
+ }
1910
+ &[data-size="md"] {
1911
+ --base-switch-track-height: calc(var(--spacing) * 5);
1912
+ width: 34px;
1913
+ }
1914
+ &[data-size="lg"] {
1915
+ --base-switch-track-height: calc(var(--spacing) * 7);
1916
+ width: 50px;
1917
+ }
1918
+ .prt-switch-thumb {
1919
+ height: 100%;
1920
+ width: calc( var(--base-switch-track-height) - (2 * var(--base-switch-padding)) - (2 * var(--base-switch-border-width)) );
1921
+ background-color: var(--color-surface);
1922
+ will-change: transform;
1923
+ border-radius: var(--base-switch-track-height);
1924
+ box-shadow: 0 0 0 1px var(--color-gray-200);
1925
+ transition: all 300ms ease-out;
1926
+ }
1927
+ }
1928
+ }
1929
+ @layer components {
1930
+ .prt-separator {
1931
+ display: flex;
1932
+ height: 1px;
1933
+ background: var(--color-border);
1934
+ flex-shrink: 0;
1935
+ &[data-orientation="horizontal"] {
1936
+ width: 100%;
1937
+ }
1938
+ &[data-orientation="vertical"] {
1939
+ width: 1px;
1940
+ height: 100%;
1941
+ }
1942
+ &[data-opacity="faint"] {
1943
+ background: var(--color-border);
1944
+ }
1945
+ &[data-opacity="medium"] {
1946
+ background: var(--color-gray-300);
1947
+ }
1948
+ &[data-opacity="strong"] {
1949
+ background: var(--color-gray-400);
1950
+ }
1951
+ }
1952
+ }
1953
+ @layer components {
1954
+ .prt-select-trigger {
1955
+ display: flex;
1956
+ align-items: center;
1957
+ justify-content: space-between;
1958
+ outline: none;
1959
+ &[data-selection-mode="multiple"] {
1960
+ min-height: var(--input-height);
1961
+ height: auto;
1962
+ }
1963
+ & .selector {
1964
+ flex-shrink: 0;
1965
+ color: var(--c-solid);
1966
+ }
1967
+ }
1968
+ }
1969
+ @layer components {
1970
+ .prt-list-box-wrapper {
1971
+ list-style: none;
1972
+ max-height: 300px;
1973
+ overflow-y: auto;
1974
+ scrollbar-width: none;
1975
+ padding: calc(var(--spacing) * 1);
1976
+ scroll-padding: calc(var(--spacing) * 1);
1977
+ border: 1px solid var(--color-border-subtle);
1978
+ border-radius: var(--prt-radius);
1979
+ background: var(--color-surface-raised);
1980
+ box-shadow: var(--shadow-sm);
1981
+ }
1982
+ .prt-list-option {
1983
+ list-style: none;
1984
+ display: flex;
1985
+ align-items: center;
1986
+ justify-content: space-between;
1987
+ padding: calc(var(--spacing) * 2);
1988
+ font-size: var(--text-sm);
1989
+ font-weight: 400;
1990
+ border-radius: var(--prt-radius, var(--radius-md));
1991
+ outline: none;
1992
+ cursor: pointer;
1993
+ & .selection-indicator {
1994
+ flex-shrink: 0;
1995
+ color: var(--color-gray-900);
1996
+ }
1997
+ & .prt-list-option-icon-wrapper {
1998
+ color: var(--color-gray-600);
1999
+ }
2000
+ &[data-pressed] {
2001
+ background: var(--color-gray-200);
2002
+ }
2003
+ &[data-disabled] {
2004
+ opacity: 0.5;
2005
+ }
2006
+ &[data-focus-visible], &[data-focused] {
2007
+ background: var(--color-surface-hover);
2008
+ color: var(--color-gray-900);
2009
+ & .prt-list-option-icon-wrapper {
2010
+ color: var(--color-gray-700);
2011
+ }
2012
+ }
2013
+ &[data-selected] {
2014
+ background: var(--color-surface-hover);
2015
+ }
2016
+ }
2017
+ .prt-list-option-icon {
2018
+ flex-shrink: 0;
2019
+ color: inherit;
2020
+ }
2021
+ .prt-list-section {
2022
+ margin-top: calc(var(--spacing) * 2);
2023
+ }
2024
+ .prt-list-box-wrapper[data-section-separator="true"] .prt-list-section:not(:first-child) {
2025
+ border-top: 1px solid var(--color-border);
2026
+ padding-top: calc(var(--spacing) * 2);
2027
+ }
2028
+ .prt-list-section-header {
2029
+ padding: 0 calc(var(--spacing) * 2);
2030
+ margin-bottom: calc(var(--spacing) * 2);
2031
+ color: var(--color-text-light);
2032
+ font-size: var(--text-sm);
2033
+ }
2034
+ }
2035
+ @layer components {
2036
+ .prt-combo-box-button {
2037
+ --prt-icon-button-size: calc(var(--input-height) - calc(var(--spacing) * 2.5));
2038
+ border-radius: var(--radius-full);
2039
+ }
2040
+ }
2041
+ @layer components {
2042
+ .prt-tab-list {
2043
+ display: flex;
2044
+ gap: calc(var(--spacing) * 3);
2045
+ margin-bottom: calc(var(--spacing) * 3);
2046
+ border-bottom: 1px solid var(--color-border);
2047
+ position: relative;
2048
+ }
2049
+ .prt-tab {
2050
+ display: flex;
2051
+ padding-bottom: calc(var(--spacing) * 3);
2052
+ font-size: var(--text-sm);
2053
+ color: var(--color-gray-500);
2054
+ outline: none;
2055
+ cursor: pointer;
2056
+ &[data-selected] {
2057
+ color: var(--color-gray-900);
2058
+ }
2059
+ }
2060
+ }
2061
+ @layer components {
2062
+ @keyframes prt-loader-spin {
2063
+ to {
2064
+ transform: rotate(360deg);
2065
+ }
2066
+ }
2067
+ .prt-loader {
2068
+ display: inline-flex;
2069
+ line-height: 0;
2070
+ }
2071
+ .prt-loader[data-color] {
2072
+ color: var(--variant-fg, var(--c-text));
2073
+ }
2074
+ .prt-loader-icon {
2075
+ --loader-size: calc(var(--spacing) * 6);
2076
+ width: var(--loader-size);
2077
+ height: var(--loader-size);
2078
+ animation: prt-loader-spin 0.8s linear infinite;
2079
+ &[data-size="xs"] {
2080
+ --loader-size: calc(var(--spacing) * 4);
2081
+ }
2082
+ &[data-size="sm"] {
2083
+ --loader-size: calc(var(--spacing) * 5);
2084
+ }
2085
+ &[data-size="md"] {
2086
+ --loader-size: calc(var(--spacing) * 6);
2087
+ }
2088
+ &[data-size="lg"] {
2089
+ --loader-size: calc(var(--spacing) * 8);
2090
+ }
2091
+ &[data-size="xl"] {
2092
+ --loader-size: calc(var(--spacing) * 10);
2093
+ }
2094
+ &[data-size="2xl"] {
2095
+ --loader-size: calc(var(--spacing) * 12);
2096
+ }
2097
+ &[data-size="3xl"] {
2098
+ --loader-size: calc(var(--spacing) * 16);
2099
+ }
2100
+ }
2101
+ @media (prefers-reduced-motion: reduce) {
2102
+ .prt-loader-icon {
2103
+ animation-duration: 2s;
2104
+ }
2105
+ }
2106
+ }
2107
+ @layer components {
2108
+ .prt-date-field {
2109
+ position: relative;
2110
+ overflow: hidden;
2111
+ display: inline-flex;
2112
+ flex: 1;
2113
+ align-items: center;
2114
+ padding: 4px 0;
2115
+ }
2116
+ .prt-date-input-segment {
2117
+ outline: none;
2118
+ font-variant-numeric: tabular-nums;
2119
+ text-align: center;
2120
+ font-size: inherit;
2121
+ transition: all 100ms ease-out;
2122
+ border-radius: var(--radius-sm);
2123
+ color: var(--color-gray-900);
2124
+ &[data-placeholder] {
2125
+ color: var(--color-gray-400);
2126
+ }
2127
+ &[data-type="literal"] {
2128
+ color: var(--color-border);
2129
+ padding: 0;
2130
+ }
2131
+ &:not([data-type="literal"]) {
2132
+ padding: 0 4px;
2133
+ }
2134
+ &:focus {
2135
+ background: var(--c-solid-hover);
2136
+ color: var(--c-on-solid);
2137
+ }
2138
+ }
2139
+ .prt-calendar-wrapper {
2140
+ display: flex;
2141
+ flex-direction: column;
2142
+ gap: calc(var(--spacing) * 2);
2143
+ width: fit-content;
2144
+ background-color: var(--color-surface-raised);
2145
+ border-radius: var(--prt-radius, var(--radius-lg));
2146
+ box-shadow: var(--shadow-sm);
2147
+ border: 1px solid var(--color-border-subtle);
2148
+ padding: 12px 16px;
2149
+ }
2150
+ .prt-calendar-header {
2151
+ display: flex;
2152
+ align-items: center;
2153
+ justify-content: space-between;
2154
+ gap: calc(var(--spacing) * 2);
2155
+ }
2156
+ .prt-calendar-heading {
2157
+ flex: 1;
2158
+ margin: 0;
2159
+ text-align: center;
2160
+ font-size: var(--text-sm);
2161
+ font-weight: 400;
2162
+ color: var(--color-gray-900);
2163
+ }
2164
+ .prt-calendar-months {
2165
+ display: flex;
2166
+ gap: calc(var(--spacing) * 6);
2167
+ }
2168
+ .prt-calendar-grid {
2169
+ border-collapse: collapse;
2170
+ }
2171
+ .prt-date-weekday {
2172
+ font-size: var(--text-sm);
2173
+ font-weight: 400;
2174
+ color: var(--color-gray-500);
2175
+ text-align: center;
2176
+ padding-bottom: calc(var(--spacing) * 1);
2177
+ }
2178
+ .prt-date-cell {
2179
+ --size: 36px;
2180
+ width: var(--size);
2181
+ height: var(--size);
2182
+ display: flex;
2183
+ align-items: center;
2184
+ justify-content: center;
2185
+ border-radius: var(--radius-full);
2186
+ outline: none;
2187
+ font-size: var(--text-sm);
2188
+ cursor: pointer;
2189
+ color: var(--color-gray-900);
2190
+ &:hover {
2191
+ background-color: var(--color-gray-100);
2192
+ }
2193
+ &[data-focus-visible] {
2194
+ color: var(--c-on-solid);
2195
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2196
+ border: 1.5px solid var(--color-border);
2197
+ }
2198
+ &[data-outside-month] {
2199
+ visibility: hidden;
2200
+ }
2201
+ &[data-disabled], &[data-unavailable] {
2202
+ color: var(--color-gray-400);
2203
+ cursor: not-allowed;
2204
+ }
2205
+ &[data-selected] {
2206
+ background-color: var(--c-solid-hover);
2207
+ color: var(--c-on-solid);
2208
+ }
2209
+ }
2210
+ .date-field-control {
2211
+ display: flex;
2212
+ align-items: center;
2213
+ }
2214
+ .prt-calendar-selects {
2215
+ flex: 1;
2216
+ }
2217
+ .prt-calendar-wrapper[data-range="true"] .prt-date-cell {
2218
+ border-radius: 0;
2219
+ &[data-selected] {
2220
+ background-color: var(--color-border);
2221
+ color: var(--color-gray-900);
2222
+ }
2223
+ &[data-selection-start], &[data-selection-end] {
2224
+ background-color: var(--c-solid-hover);
2225
+ color: var(--c-on-solid);
2226
+ }
2227
+ &[data-selection-start] {
2228
+ border-start-start-radius: var(--radius-full);
2229
+ border-end-start-radius: var(--radius-full);
2230
+ }
2231
+ &[data-selection-end] {
2232
+ border-start-end-radius: var(--radius-full);
2233
+ border-end-end-radius: var(--radius-full);
2234
+ }
2235
+ }
2236
+ .prt-date-range-fields {
2237
+ display: inline-flex;
2238
+ align-items: center;
2239
+ gap: calc(var(--spacing) * 2);
2240
+ }
2241
+ .prt-date-range-sep {
2242
+ color: var(--c-solid);
2243
+ }
2244
+ .prt-date-picker-trigger {
2245
+ display: inline-flex;
2246
+ align-items: center;
2247
+ justify-content: space-between;
2248
+ gap: calc(var(--spacing) * 2);
2249
+ }
2250
+ }
2251
+ @layer components {
2252
+ .prt-slider {
2253
+ display: flex;
2254
+ flex-direction: column;
2255
+ --base-thumb-size: calc(var(--spacing) * 5);
2256
+ --base-track-height: calc(var(--spacing) * 1);
2257
+ gap: calc(var(--spacing) * 3);
2258
+ &:where([data-size="xs"]) {
2259
+ --base-thumb-size: 18px;
2260
+ --base-track-height: calc(var(--spacing) * 1);
2261
+ }
2262
+ &:where([data-size="sm"]) {
2263
+ --base-thumb-size: calc(var(--spacing) * 6);
2264
+ --base-track-height: calc(var(--spacing) * 2);
2265
+ }
2266
+ &:where([data-size="md"]) {
2267
+ --base-thumb-size: calc(var(--spacing) * 8);
2268
+ --base-track-height: calc(var(--spacing) * 3);
2269
+ }
2270
+ &:where([data-size="lg"]) {
2271
+ --base-thumb-size: calc(var(--spacing) * 10);
2272
+ --base-track-height: calc(var(--spacing) * 4);
2273
+ }
2274
+ &:where([data-size="xl"]) {
2275
+ --base-thumb-size: calc(var(--spacing) * 12);
2276
+ --base-track-height: calc(var(--spacing) * 5);
2277
+ }
2278
+ &.horizontal .prt-slider-track {
2279
+ width: 100%;
2280
+ height: var(--base-track-height);
2281
+ background: var(--color-gray-100);
2282
+ display: flex;
2283
+ align-items: center;
2284
+ border-radius: calc(var(--base-track-height) / 2);
2285
+ }
2286
+ .prt-slider-track-fill {
2287
+ height: var(--base-track-height);
2288
+ background: var(--c-solid-hover);
2289
+ border-radius: calc(var(--base-track-height) / 2);
2290
+ }
2291
+ .prt-slider-thumb {
2292
+ height: var(--base-thumb-size);
2293
+ width: var(--base-thumb-size);
2294
+ border-radius: 50%;
2295
+ border: 2px solid white;
2296
+ cursor: grab;
2297
+ display: flex;
2298
+ align-items: center;
2299
+ justify-content: center;
2300
+ background: var(--c-solid-hover);
2301
+ transform: none !important;
2302
+ box-shadow: var(--shadow-sm);
2303
+ .prt-slider-thumb-inner {
2304
+ --base-thumb-inner-size: calc(var(--base-thumb-size) - 10px);
2305
+ width: var(--base-thumb-inner-size);
2306
+ height: var(--base-thumb-inner-size);
2307
+ border-radius: 50%;
2308
+ background: white;
2309
+ will-change: transform;
2310
+ transition: transform 150ms;
2311
+ }
2312
+ &:where([data-dragging]) .prt-slider-thumb-inner {
2313
+ transform: scale(0.8);
2314
+ cursor: grabbing;
2315
+ }
2316
+ }
2317
+ }
2318
+ }
2319
+ @layer components {
2320
+ .prt-color-area {
2321
+ --base-size: 200px;
2322
+ --base-thumb-size: calc(var(--spacing) * 4);
2323
+ height: var(--base-size);
2324
+ width: var(--base-size);
2325
+ .prt-color-area-thumb {
2326
+ cursor: pointer;
2327
+ height: var(--base-thumb-size);
2328
+ width: var(--base-thumb-size);
2329
+ border-radius: 50%;
2330
+ border: 3px solid white;
2331
+ box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
2332
+ }
2333
+ }
2334
+ .prt-color-slider {
2335
+ --base-track-height: calc(var(--spacing) * 2);
2336
+ --base-thumb-size: calc(var(--spacing) * 3.5);
2337
+ .prt-color-slider-track {
2338
+ display: flex;
2339
+ align-items: center;
2340
+ height: var(--base-track-height);
2341
+ width: 100%;
2342
+ border-radius: var(--base-track-height);
2343
+ }
2344
+ .prt-color-slider-checkers {
2345
+ width: 100%;
2346
+ height: 100%;
2347
+ background: repeating-conic-gradient(#ccc 0% 25%, white 0% 50%) 50% / 8px 8px;
2348
+ border-radius: var(--base-track-height);
2349
+ top: 0;
2350
+ left: 0;
2351
+ z-index: -1;
2352
+ position: absolute;
2353
+ opacity: 0.4;
2354
+ }
2355
+ .prt-color-slider-thumb {
2356
+ height: var(--base-thumb-size);
2357
+ width: var(--base-thumb-size);
2358
+ border-radius: var(--base-thumb-size);
2359
+ cursor: pointer;
2360
+ box-shadow: white 0px 0px 0px 3px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 4px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
2361
+ top: calc(var(--base-track-height) / 2);
2362
+ }
2363
+ }
2364
+ .prt-color-swatch-picker {
2365
+ display: flex;
2366
+ flex-wrap: wrap;
2367
+ gap: calc(var(--spacing) * 2);
2368
+ }
2369
+ .prt-color-swatch-item {
2370
+ position: relative;
2371
+ outline: none;
2372
+ border-radius: var(--radius-md);
2373
+ width: fit-content;
2374
+ cursor: pointer;
2375
+ &[data-focus-visible] {
2376
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2377
+ }
2378
+ &[data-selected]::after {
2379
+ content: "";
2380
+ position: absolute;
2381
+ inset: 0;
2382
+ border: 2px solid black;
2383
+ outline: 2px solid white;
2384
+ outline-offset: -4px;
2385
+ border-radius: inherit;
2386
+ }
2387
+ &[data-disabled] {
2388
+ opacity: 0.2;
2389
+ }
2390
+ }
2391
+ .prt-color-swatch {
2392
+ --base-size: calc(var(--spacing) * 4);
2393
+ --base-radius: var(--radius-md);
2394
+ height: var(--base-size);
2395
+ width: var(--base-size);
2396
+ border-radius: var(--base-radius);
2397
+ position: relative;
2398
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2399
+ cursor: pointer;
2400
+ &::before {
2401
+ content: "";
2402
+ position: absolute;
2403
+ height: 100%;
2404
+ width: 100%;
2405
+ background: repeating-conic-gradient(#ccc 0% 25%, white 0% 50%) 50% / 8px 8px;
2406
+ border-radius: var(--base-radius);
2407
+ z-index: -1;
2408
+ opacity: 0.4;
2409
+ }
2410
+ }
2411
+ }
2412
+ @layer components {
2413
+ .prt-tag {
2414
+ --base-tag-height: calc(var(--spacing) * 4);
2415
+ --base-tag-padding: calc(var(--spacing) * 2);
2416
+ --base-tag-font-size: var(--text-xs);
2417
+ display: inline-flex;
2418
+ gap: calc(var(--spacing) * 1.5);
2419
+ align-items: center;
2420
+ height: var(--base-tag-height);
2421
+ padding: 0 var(--base-tag-padding);
2422
+ font-size: var(--base-tag-font-size);
2423
+ &[data-size="xs"] {
2424
+ --base-tag-padding: calc(var(--spacing) * 1.5);
2425
+ }
2426
+ &[data-size="sm"] {
2427
+ --base-tag-height: calc(var(--spacing) * 5);
2428
+ --base-tag-font-size: var(--text-sm);
2429
+ }
2430
+ &[data-size="md"] {
2431
+ --base-tag-height: calc(var(--spacing) * 6);
2432
+ --base-tag-font-size: var(--text-sm);
2433
+ }
2434
+ &[data-size="lg"] {
2435
+ --base-tag-height: calc(var(--spacing) * 7);
2436
+ --base-tag-font-size: var(--text-sm);
2437
+ }
2438
+ &[data-size="xl"] {
2439
+ --base-tag-height: calc(var(--spacing) * 8);
2440
+ --base-tag-font-size: var(--text-sm);
2441
+ }
2442
+ }
2443
+ }
2444
+ @layer components {
2445
+ .prt-space {
2446
+ &[data-compact="true"] {
2447
+ .space-item:not(.space-item-first, .space-item-last) {
2448
+ border-radius: 0px;
2449
+ }
2450
+ .space-item:not(.space-item-end) {
2451
+ margin-inline-end: -1px;
2452
+ }
2453
+ .space-item-first {
2454
+ border-start-end-radius: 0px;
2455
+ border-end-end-radius: 0px;
2456
+ }
2457
+ .space-item-last {
2458
+ border-start-start-radius: 0px;
2459
+ border-end-start-radius: 0px;
2460
+ }
2461
+ .compact-item-wrapper-adjust {
2462
+ margin-inline-end: -1px;
2463
+ }
2464
+ .prt-button {
2465
+ position: relative;
2466
+ &:not(.space-item-first) {
2467
+ border-inline-start-width: 0;
2468
+ }
2469
+ &:not(.space-item-last) {
2470
+ margin-inline-end: 0;
2471
+ border-inline-end-width: 0;
2472
+ }
2473
+ &:not(.space-item-last)::after {
2474
+ content: "";
2475
+ position: absolute;
2476
+ inset-block: 0;
2477
+ inset-inline-end: 0;
2478
+ width: 1px;
2479
+ background: var( --variant-border, currentColor );
2480
+ @supports (color: color-mix(in lab, red, red)) {
2481
+ background: var( --variant-border, color-mix(in oklab, currentColor 20%, transparent) );
2482
+ }
2483
+ pointer-events: none;
2484
+ }
2485
+ }
2486
+ }
2487
+ }
2488
+ }
2489
+ @layer components {
2490
+ .prt-table {
2491
+ border-collapse: separate;
2492
+ border-spacing: 0;
2493
+ width: 100%;
2494
+ border: 1px solid var(--color-border);
2495
+ border-radius: var(--prt-radius, var(--radius-lg));
2496
+ overflow: clip;
2497
+ outline: none;
2498
+ font-size: var(--text-sm);
2499
+ }
2500
+ .prt-table-column {
2501
+ text-align: left;
2502
+ padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
2503
+ font-weight: 500;
2504
+ color: var(--color-gray-700);
2505
+ border-bottom: 1px solid var(--color-border);
2506
+ background: var(--color-gray-100);
2507
+ outline: none;
2508
+ cursor: default;
2509
+ &[data-sort-direction] {
2510
+ color: var(--color-gray-900);
2511
+ }
2512
+ &[data-focus-visible] {
2513
+ outline: 2px solid var(--color-focus-ring);
2514
+ outline-offset: -2px;
2515
+ }
2516
+ }
2517
+ .prt-table-column-header {
2518
+ display: flex;
2519
+ align-items: center;
2520
+ gap: calc(var(--spacing) * 1);
2521
+ }
2522
+ .prt-table-sort-indicator {
2523
+ display: inline-flex;
2524
+ align-items: center;
2525
+ }
2526
+ .prt-table-row {
2527
+ outline: none;
2528
+ color: var(--color-gray-900);
2529
+ &[data-hovered] {
2530
+ background: var(--color-surface-hover);
2531
+ }
2532
+ &[data-selected] {
2533
+ background: var(--c-bg-subtle, var(--color-gray-100));
2534
+ }
2535
+ &[data-focus-visible] {
2536
+ outline: 2px solid var(--color-focus-ring);
2537
+ outline-offset: -2px;
2538
+ }
2539
+ }
2540
+ .prt-table-cell {
2541
+ padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
2542
+ border-bottom: 1px solid var(--color-border);
2543
+ outline: none;
2544
+ .prt-table-row:last-child & {
2545
+ border-bottom: none;
2546
+ }
2547
+ &[data-focus-visible] {
2548
+ outline: 2px solid var(--color-focus-ring);
2549
+ outline-offset: -2px;
2550
+ }
2551
+ }
2552
+ }
2553
+ @layer components {
2554
+ .prt-timeline-item {
2555
+ position: relative;
2556
+ }
2557
+ .prt-timeline-indicator-container {
2558
+ width: auto;
2559
+ height: auto;
2560
+ justify-content: center;
2561
+ }
2562
+ .prt-timeline-item-tail {
2563
+ border-inline-start: 1px solid var(--color-border);
2564
+ height: 100%;
2565
+ width: 1px;
2566
+ }
2567
+ .prt-timeline-indicator {
2568
+ width: 12px;
2569
+ height: 12px;
2570
+ border-radius: var(--radius-full);
2571
+ border-width: 3px;
2572
+ }
2573
+ .prt-timeline-item-content {
2574
+ padding-bottom: calc(var(--spacing) * 5);
2575
+ padding-left: calc(var(--spacing) * 3);
2576
+ }
2577
+ }
2578
+ @layer components {
2579
+ .prt-text-area {
2580
+ height: auto;
2581
+ min-height: calc(var(--spacing) * 25);
2582
+ padding-block: calc(var(--spacing) * 3);
2583
+ font-size: var(--text-sm);
2584
+ line-height: 1.3;
2585
+ resize: none;
2586
+ &[data-resize="horizontal"] {
2587
+ resize: horizontal;
2588
+ }
2589
+ &[data-resize="vertical"] {
2590
+ resize: vertical;
2591
+ }
2592
+ &[data-resize="both"] {
2593
+ resize: both;
2594
+ }
2595
+ }
2596
+ }
2597
+ @layer components {
2598
+ .prt-file-uploader {
2599
+ display: flex;
2600
+ border-style: dashed;
2601
+ border-width: 1px;
2602
+ border-color: var(--color-border);
2603
+ padding: calc(var(--spacing) * 3);
2604
+ border-radius: var(--prt-radius);
2605
+ outline: none;
2606
+ .prt-file-uploader-trigger {
2607
+ all: unset;
2608
+ display: flex;
2609
+ flex: 1;
2610
+ cursor: pointer;
2611
+ color: inherit;
2612
+ }
2613
+ &[data-drop-target] {
2614
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2615
+ border-color: var(--color-border);
2616
+ background-color: var(--c-bg-subtle);
2617
+ color: var(--c-solid);
2618
+ }
2619
+ &[data-state="idle"] {
2620
+ color: var(--c-solid);
2621
+ }
2622
+ &[data-state="loading"] {
2623
+ color: var(--c-solid);
2624
+ }
2625
+ &[data-state="success"] {
2626
+ border-color: var(--color-success);
2627
+ border-style: solid;
2628
+ background-color: var(--color-green-50);
2629
+ color: var(--color-green-700);
2630
+ }
2631
+ &[data-state="error"] {
2632
+ border-color: var(--color-critical);
2633
+ border-style: solid;
2634
+ background-color: var(--color-red-50);
2635
+ color: var(--color-critical);
2636
+ .state-icon {
2637
+ color: var(--color-critical);
2638
+ }
2639
+ }
2640
+ }
2641
+ }
2642
+ @layer components {
2643
+ .prt-draggable-list {
2644
+ list-style: none;
2645
+ padding: 0;
2646
+ margin: 0;
2647
+ display: flex;
2648
+ flex-direction: column;
2649
+ gap: calc(var(--spacing) * 1);
2650
+ outline: none;
2651
+ &[data-drop-target] {
2652
+ outline: 1px dashed var(--color-primary);
2653
+ border-radius: var(--radius-md);
2654
+ }
2655
+ .react-aria-DropIndicator[data-drop-target] {
2656
+ outline: 1px solid var(--color-primary);
2657
+ }
2658
+ }
2659
+ .prt-draggable-list-item {
2660
+ display: flex;
2661
+ align-items: center;
2662
+ gap: calc(var(--spacing) * 2);
2663
+ padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
2664
+ border: 1px solid var(--color-border);
2665
+ border-radius: var(--radius-md);
2666
+ background: var(--color-surface-raised);
2667
+ outline: none;
2668
+ .prt-draggable-list-handle {
2669
+ all: unset;
2670
+ cursor: grab;
2671
+ color: var(--color-gray-500);
2672
+ line-height: 1;
2673
+ padding: 0 calc(var(--spacing) * 1);
2674
+ &[data-focus-visible] {
2675
+ outline: 2px solid var(--color-focus-ring);
2676
+ border-radius: var(--radius-sm);
2677
+ }
2678
+ }
2679
+ &[data-dragging] {
2680
+ opacity: 0.5;
2681
+ }
2682
+ &[data-drop-target] {
2683
+ outline: 1px dashed var(--color-critical);
2684
+ }
2685
+ &[data-focus-visible] {
2686
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2687
+ }
2688
+ }
2689
+ }
2690
+ @layer components {
2691
+ .prt-tag-field {
2692
+ display: flex;
2693
+ align-items: center;
2694
+ flex-wrap: wrap;
2695
+ padding: 4px;
2696
+ gap: calc(var(--spacing) * 1.5);
2697
+ height: auto;
2698
+ min-height: var(--input-height);
2699
+ &:focus-within {
2700
+ border: 1px solid var(--color-primary);
2701
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2702
+ }
2703
+ }
2704
+ .prt-tag-field-group, .prt-tag-field-list {
2705
+ display: contents;
2706
+ }
2707
+ .prt-tag-field-tag {
2708
+ display: inline-flex;
2709
+ outline: none;
2710
+ border-radius: var(--radius-full);
2711
+ &[data-focus-visible] {
2712
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
2713
+ }
2714
+ }
2715
+ .prt-tag-field-remove {
2716
+ all: unset;
2717
+ display: inline-flex;
2718
+ align-items: center;
2719
+ justify-content: center;
2720
+ margin-inline-start: 6px;
2721
+ cursor: pointer;
2722
+ color: inherit;
2723
+ opacity: 0.7;
2724
+ &[data-hovered] {
2725
+ opacity: 1;
2726
+ }
2727
+ &[data-focus-visible] {
2728
+ outline: 2px solid var(--color-primary);
2729
+ border-radius: var(--radius-sm);
2730
+ }
2731
+ }
2732
+ .prt-tag-field-input {
2733
+ border: none;
2734
+ background: transparent;
2735
+ outline: none;
2736
+ min-width: 80px;
2737
+ flex: 1;
2738
+ margin-inline-start: 4px;
2739
+ writing-mode: horizontal-tb;
2740
+ font-size: inherit;
2741
+ color: var(--color-gray-900);
2742
+ &::placeholder {
2743
+ color: var(--color-gray-400);
2744
+ }
2745
+ }
2746
+ }
2747
+ @property --tw-rotate-x {
2748
+ syntax: "*";
2749
+ inherits: false;
2750
+ }
2751
+ @property --tw-rotate-y {
2752
+ syntax: "*";
2753
+ inherits: false;
2754
+ }
2755
+ @property --tw-rotate-z {
2756
+ syntax: "*";
2757
+ inherits: false;
2758
+ }
2759
+ @property --tw-skew-x {
2760
+ syntax: "*";
2761
+ inherits: false;
2762
+ }
2763
+ @property --tw-skew-y {
2764
+ syntax: "*";
2765
+ inherits: false;
2766
+ }
2767
+ @property --tw-border-style {
2768
+ syntax: "*";
2769
+ inherits: false;
2770
+ initial-value: solid;
2771
+ }
2772
+ @property --tw-leading {
2773
+ syntax: "*";
2774
+ inherits: false;
2775
+ }
2776
+ @property --tw-font-weight {
2777
+ syntax: "*";
2778
+ inherits: false;
2779
+ }
2780
+ @property --tw-outline-style {
2781
+ syntax: "*";
2782
+ inherits: false;
2783
+ initial-value: solid;
2784
+ }
2785
+ @property --tw-blur {
2786
+ syntax: "*";
2787
+ inherits: false;
2788
+ }
2789
+ @property --tw-brightness {
2790
+ syntax: "*";
2791
+ inherits: false;
2792
+ }
2793
+ @property --tw-contrast {
2794
+ syntax: "*";
2795
+ inherits: false;
2796
+ }
2797
+ @property --tw-grayscale {
2798
+ syntax: "*";
2799
+ inherits: false;
2800
+ }
2801
+ @property --tw-hue-rotate {
2802
+ syntax: "*";
2803
+ inherits: false;
2804
+ }
2805
+ @property --tw-invert {
2806
+ syntax: "*";
2807
+ inherits: false;
2808
+ }
2809
+ @property --tw-opacity {
2810
+ syntax: "*";
2811
+ inherits: false;
2812
+ }
2813
+ @property --tw-saturate {
2814
+ syntax: "*";
2815
+ inherits: false;
2816
+ }
2817
+ @property --tw-sepia {
2818
+ syntax: "*";
2819
+ inherits: false;
2820
+ }
2821
+ @property --tw-drop-shadow {
2822
+ syntax: "*";
2823
+ inherits: false;
2824
+ }
2825
+ @property --tw-drop-shadow-color {
2826
+ syntax: "*";
2827
+ inherits: false;
2828
+ }
2829
+ @property --tw-drop-shadow-alpha {
2830
+ syntax: "<percentage>";
2831
+ inherits: false;
2832
+ initial-value: 100%;
2833
+ }
2834
+ @property --tw-drop-shadow-size {
2835
+ syntax: "*";
2836
+ inherits: false;
2837
+ }
2838
+ @layer properties {
2839
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
2840
+ *, ::before, ::after, ::backdrop {
2841
+ --tw-rotate-x: initial;
2842
+ --tw-rotate-y: initial;
2843
+ --tw-rotate-z: initial;
2844
+ --tw-skew-x: initial;
2845
+ --tw-skew-y: initial;
2846
+ --tw-border-style: solid;
2847
+ --tw-leading: initial;
2848
+ --tw-font-weight: initial;
2849
+ --tw-outline-style: solid;
2850
+ --tw-blur: initial;
2851
+ --tw-brightness: initial;
2852
+ --tw-contrast: initial;
2853
+ --tw-grayscale: initial;
2854
+ --tw-hue-rotate: initial;
2855
+ --tw-invert: initial;
2856
+ --tw-opacity: initial;
2857
+ --tw-saturate: initial;
2858
+ --tw-sepia: initial;
2859
+ --tw-drop-shadow: initial;
2860
+ --tw-drop-shadow-color: initial;
2861
+ --tw-drop-shadow-alpha: 100%;
2862
+ --tw-drop-shadow-size: initial;
2863
+ }
2864
+ }
2865
+ }