@hotosm/ui 0.2.0-a8 → 0.2.0-b0

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.
@@ -0,0 +1,1092 @@
1
+ :root {
2
+ --hot-red-900: #b9302d;
3
+ --hot-red-800: #c93938;
4
+ --hot-red-700: #d63f3f;
5
+ --hot-red-600: #e84846;
6
+ --hot-red-500: #f75047;
7
+ --hot-red-400: #f15f5e;
8
+ --hot-red-300: #e67c7e;
9
+ --hot-red-200: #efa0a2;
10
+ --hot-red-100: #fed1d7;
11
+ --hot-red-50: #feecf0;
12
+ --hot-red: var(--hot-red-700);
13
+ --hot-red-rgb: 215 63 63;
14
+
15
+ --hot-darkred-900: #5b1018;
16
+ --hot-darkred-800: #6c2020;
17
+ --hot-darkred-700: #7c2e26;
18
+ --hot-darkred-600: #8d3a2f;
19
+ --hot-darkred-500: #994335;
20
+ --hot-darkred-400: #b15e4e;
21
+ --hot-darkred-300: #c87968;
22
+ --hot-darkred-200: #e69b8c;
23
+ --hot-darkred-100: #ffbead;
24
+ --hot-darkred-50: #ffdec8;
25
+ --hot-darkred: var(--hot-darkred-700);
26
+ --hot-darkred-rgb: 108 32 32;
27
+
28
+ --hot-light-gray: #e1e0e0;
29
+ --hot-light-gray-rgb: 225 224 224;
30
+ --hot-gray-900: #2c3038;
31
+ --hot-gray-800: #3f444f;
32
+ --hot-gray-700: #4f5765;
33
+ --hot-gray-600: #606a7c;
34
+ --hot-gray-500: #6e798d;
35
+ --hot-gray-400: #848c9d;
36
+ --hot-gray-300: #9aa1af;
37
+ --hot-gray-200: #b7bcc5;
38
+ --hot-gray-100: #d3d7dc;
39
+ --hot-gray-50: #eeeef0;
40
+ --hot-gray: var(--hot-gray-900);
41
+ --hot-gray-rgb: 104 112 127;
42
+
43
+ --hot-yellow-900: #ef7e1a;
44
+ --hot-yellow-800: #f4a628;
45
+ --hot-yellow-700: #f6bd30;
46
+ --hot-yellow-600: #f9d538;
47
+ --hot-yellow-500: #f7e53a;
48
+ --hot-yellow-400: #faea58;
49
+ --hot-yellow-300: #fcef77;
50
+ --hot-yellow-200: #fdf39d;
51
+ --hot-yellow-100: #fef8c4;
52
+ --hot-yellow-50: #fefde7;
53
+ --hot-yellow: var(--hot-yellow-800);
54
+ --hot-yellow-rgb: 250 167 30;
55
+
56
+ --hot-green-900: #105950;
57
+ --hot-green-800: #15766e;
58
+ --hot-green-700: #17867e;
59
+ --hot-green-600: #1a978f;
60
+ --hot-green-500: #1da49d;
61
+ --hot-green-400: #34b3ad;
62
+ --hot-green-300: #57c1bd;
63
+ --hot-green-200: #87d3d1;
64
+ --hot-green-100: #b7e4e3;
65
+ --hot-green-50: #e2f4f4;
66
+ --hot-green: var(--hot-green-300);
67
+ --hot-green-rgb: 69 156 160;
68
+
69
+ --hot-blue-900: #182642;
70
+ --hot-blue-800: #20365b;
71
+ --hot-blue-700: #263f68;
72
+ --hot-blue-600: #2e4873;
73
+ --hot-blue-500: #344f7b;
74
+ --hot-blue-400: #53688b;
75
+ --hot-blue-300: #71829e;
76
+ --hot-blue-200: #97a5ba;
77
+ --hot-blue-100: #bfc8d6;
78
+ --hot-blue-50: #e6e9ee;
79
+ --hot-blue: var(--hot-blue-800);
80
+ --hot-blue-rgb: 32 54 91;
81
+
82
+ --hot-white: #ffffff;
83
+ --hot-white-rgb: 255 255 255;
84
+ --hot-black: #2c3038;
85
+ --hot-black-rgb: 44 48 56;
86
+
87
+ --hot-primary: var(--hot-red);
88
+ --hot-primary-light: var(--hot-red-200);
89
+ --hot-primary-dark: var(--hot-red-900);
90
+ --hot-primary-contrastText: var(--hot-white);
91
+ --hot-primary-rgb: var(--hot-red-rgb);
92
+
93
+ --hot-secondary: var(--hot-gray);
94
+ --hot-secondary-light: var(--hot-gray-200);
95
+ --hot-secondary-dark: var(--hot-black);
96
+ --hot-secondary-contrastText: var(--hot-white);
97
+ --hot-secondary-rgb: var(--hot-gray-rgb);
98
+
99
+ --hot-info: var(--hot-blue);
100
+ --hot-info-light: var(--hot-blue-300);
101
+ --hot-info-dark: var(--hot-blue-900);
102
+ --hot-info-contrastText: var(--hot-white);
103
+ --hot-info-rgb: var(--hot-blue-rgb);
104
+
105
+ --hot-error: var(--hot-darkred);
106
+ --hot-error-light: var(--hot-darkred-400);
107
+ --hot-error-dark: var(--hot-darkred-900);
108
+ --hot-error-contrastText: var(--hot-white);
109
+ --hot-error-rgb: var(--hot-darkred-rgb);
110
+
111
+ --hot-warning: var(--hot-yellow);
112
+ --hot-warning-light: var(--hot-yellow-400);
113
+ --hot-warning-dark: var(--hot-yellow-900);
114
+ --hot-warning-contrastText: var(--hot-white);
115
+ --hot-warning-rgb: var(--hot-yellow-rgb);
116
+
117
+ --hot-success: var(--hot-green);
118
+ --hot-success-light: var(--hot-green-100);
119
+ --hot-success-dark: var(--hot-green-600);
120
+ --hot-success-contrastText: var(--hot-white);
121
+ --hot-success-rgb: var(--hot-green-rgb);
122
+ }
123
+
124
+ :root,
125
+ :host,
126
+ .sl-theme-light {
127
+ color-scheme: light;
128
+
129
+ --sl-color-gray-50: hsl(0 0% 97.5%);
130
+ --sl-color-gray-100: hsl(240 4.8% 95.9%);
131
+ --sl-color-gray-200: hsl(240 5.9% 90%);
132
+ --sl-color-gray-300: hsl(240 4.9% 83.9%);
133
+ --sl-color-gray-400: hsl(240 5% 64.9%);
134
+ --sl-color-gray-500: hsl(240 3.8% 46.1%);
135
+ --sl-color-gray-600: hsl(240 5.2% 33.9%);
136
+ --sl-color-gray-700: hsl(240 5.3% 26.1%);
137
+ --sl-color-gray-800: hsl(240 3.7% 15.9%);
138
+ --sl-color-gray-900: hsl(240 5.9% 10%);
139
+ --sl-color-gray-950: hsl(240 7.3% 8%);
140
+
141
+ --sl-color-red-50: hsl(0 85.7% 97.3%);
142
+ --sl-color-red-100: hsl(0 93.3% 94.1%);
143
+ --sl-color-red-200: hsl(0 96.3% 89.4%);
144
+ --sl-color-red-300: hsl(0 93.5% 81.8%);
145
+ --sl-color-red-400: hsl(0 90.6% 70.8%);
146
+ --sl-color-red-500: hsl(0 84.2% 60.2%);
147
+ --sl-color-red-600: hsl(0 72.2% 50.6%);
148
+ --sl-color-red-700: hsl(0 73.7% 41.8%);
149
+ --sl-color-red-800: hsl(0 70% 35.3%);
150
+ --sl-color-red-900: hsl(0 62.8% 30.6%);
151
+ --sl-color-red-950: hsl(0 60% 19.6%);
152
+
153
+ --sl-color-orange-50: hsl(33.3 100% 96.5%);
154
+ --sl-color-orange-100: hsl(34.3 100% 91.8%);
155
+ --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
156
+ --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
157
+ --sl-color-orange-400: hsl(27 96% 61%);
158
+ --sl-color-orange-500: hsl(24.6 95% 53.1%);
159
+ --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
160
+ --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
161
+ --sl-color-orange-800: hsl(15 79.1% 33.7%);
162
+ --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
163
+ --sl-color-orange-950: hsl(15.2 69.1% 19%);
164
+
165
+ --sl-color-amber-50: hsl(48 100% 96.1%);
166
+ --sl-color-amber-100: hsl(48 96.5% 88.8%);
167
+ --sl-color-amber-200: hsl(48 96.6% 76.7%);
168
+ --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
169
+ --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
170
+ --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
171
+ --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
172
+ --sl-color-amber-700: hsl(26 90.5% 37.1%);
173
+ --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
174
+ --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
175
+ --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
176
+
177
+ --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
178
+ --sl-color-yellow-100: hsl(54.9 96.7% 88%);
179
+ --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
180
+ --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
181
+ --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
182
+ --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
183
+ --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
184
+ --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
185
+ --sl-color-yellow-800: hsl(31.8 81% 28.8%);
186
+ --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
187
+ --sl-color-yellow-950: hsl(33.1 69% 13.9%);
188
+
189
+ --sl-color-lime-50: hsl(78.3 92% 95.1%);
190
+ --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
191
+ --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
192
+ --sl-color-lime-300: hsl(82 84.5% 67.1%);
193
+ --sl-color-lime-400: hsl(82.7 78% 55.5%);
194
+ --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
195
+ --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
196
+ --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
197
+ --sl-color-lime-800: hsl(86.3 69% 22.7%);
198
+ --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
199
+ --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
200
+
201
+ --sl-color-green-50: hsl(138.5 76.5% 96.7%);
202
+ --sl-color-green-100: hsl(140.6 84.2% 92.5%);
203
+ --sl-color-green-200: hsl(141 78.9% 85.1%);
204
+ --sl-color-green-300: hsl(141.7 76.6% 73.1%);
205
+ --sl-color-green-400: hsl(141.9 69.2% 58%);
206
+ --sl-color-green-500: hsl(142.1 70.6% 45.3%);
207
+ --sl-color-green-600: hsl(142.1 76.2% 36.3%);
208
+ --sl-color-green-700: hsl(142.4 71.8% 29.2%);
209
+ --sl-color-green-800: hsl(142.8 64.2% 24.1%);
210
+ --sl-color-green-900: hsl(143.8 61.2% 20.2%);
211
+ --sl-color-green-950: hsl(144.3 60.7% 12%);
212
+
213
+ --sl-color-emerald-50: hsl(151.8 81% 95.9%);
214
+ --sl-color-emerald-100: hsl(149.3 80.4% 90%);
215
+ --sl-color-emerald-200: hsl(152.4 76% 80.4%);
216
+ --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
217
+ --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
218
+ --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
219
+ --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
220
+ --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
221
+ --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
222
+ --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
223
+ --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
224
+
225
+ --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
226
+ --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
227
+ --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
228
+ --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
229
+ --sl-color-teal-400: hsl(172.5 66% 50.4%);
230
+ --sl-color-teal-500: hsl(173.4 80.4% 40%);
231
+ --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
232
+ --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
233
+ --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
234
+ --sl-color-teal-900: hsl(175.9 60.8% 19%);
235
+ --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
236
+
237
+ --sl-color-cyan-50: hsl(183.2 100% 96.3%);
238
+ --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
239
+ --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
240
+ --sl-color-cyan-300: hsl(187 92.4% 69%);
241
+ --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
242
+ --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
243
+ --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
244
+ --sl-color-cyan-700: hsl(192.9 82.3% 31%);
245
+ --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
246
+ --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
247
+ --sl-color-cyan-950: hsl(196.8 61% 16.1%);
248
+
249
+ --sl-color-sky-50: hsl(204 100% 97.1%);
250
+ --sl-color-sky-100: hsl(204 93.8% 93.7%);
251
+ --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
252
+ --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
253
+ --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
254
+ --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
255
+ --sl-color-sky-600: hsl(200.4 98% 39.4%);
256
+ --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
257
+ --sl-color-sky-800: hsl(201 90% 27.5%);
258
+ --sl-color-sky-900: hsl(202 80.3% 23.9%);
259
+ --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
260
+
261
+ --sl-color-blue-50: hsl(213.8 100% 96.9%);
262
+ --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
263
+ --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
264
+ --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
265
+ --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
266
+ --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
267
+ --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
268
+ --sl-color-blue-700: hsl(224.3 76.3% 48%);
269
+ --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
270
+ --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
271
+ --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
272
+
273
+ --sl-color-indigo-50: hsl(225.9 100% 96.7%);
274
+ --sl-color-indigo-100: hsl(226.5 100% 93.9%);
275
+ --sl-color-indigo-200: hsl(228 96.5% 88.8%);
276
+ --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
277
+ --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
278
+ --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
279
+ --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
280
+ --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
281
+ --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
282
+ --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
283
+ --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
284
+
285
+ --sl-color-violet-50: hsl(250 100% 97.6%);
286
+ --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
287
+ --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
288
+ --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
289
+ --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
290
+ --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
291
+ --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
292
+ --sl-color-violet-700: hsl(263.4 70% 50.4%);
293
+ --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
294
+ --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
295
+ --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
296
+
297
+ --sl-color-purple-50: hsl(270 100% 98%);
298
+ --sl-color-purple-100: hsl(268.7 100% 95.5%);
299
+ --sl-color-purple-200: hsl(268.6 100% 91.8%);
300
+ --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
301
+ --sl-color-purple-400: hsl(270 95.2% 75.3%);
302
+ --sl-color-purple-500: hsl(270.7 91% 65.1%);
303
+ --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
304
+ --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
305
+ --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
306
+ --sl-color-purple-900: hsl(273.6 65.6% 32%);
307
+ --sl-color-purple-950: hsl(276 59.5% 16.5%);
308
+
309
+ --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
310
+ --sl-color-fuchsia-100: hsl(287 100% 95.5%);
311
+ --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
312
+ --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
313
+ --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
314
+ --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
315
+ --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
316
+ --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
317
+ --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
318
+ --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
319
+ --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
320
+
321
+ --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
322
+ --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
323
+ --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
324
+ --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
325
+ --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
326
+ --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
327
+ --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
328
+ --sl-color-pink-700: hsl(335.1 77.6% 42%);
329
+ --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
330
+ --sl-color-pink-900: hsl(335.9 69% 30.4%);
331
+ --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
332
+
333
+ --sl-color-rose-50: hsl(355.7 100% 97.3%);
334
+ --sl-color-rose-100: hsl(355.6 100% 94.7%);
335
+ --sl-color-rose-200: hsl(352.7 96.1% 90%);
336
+ --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
337
+ --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
338
+ --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
339
+ --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
340
+ --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
341
+ --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
342
+ --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
343
+ --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
344
+
345
+ --sl-color-primary-50: var(--sl-color-sky-50);
346
+ --sl-color-primary-100: var(--sl-color-sky-100);
347
+ --sl-color-primary-200: var(--sl-color-sky-200);
348
+ --sl-color-primary-300: var(--sl-color-sky-300);
349
+ --sl-color-primary-400: var(--sl-color-sky-400);
350
+ --sl-color-primary-500: var(--sl-color-sky-500);
351
+ --sl-color-primary-600: var(--sl-color-sky-600);
352
+ --sl-color-primary-700: var(--sl-color-sky-700);
353
+ --sl-color-primary-800: var(--sl-color-sky-800);
354
+ --sl-color-primary-900: var(--sl-color-sky-900);
355
+ --sl-color-primary-950: var(--sl-color-sky-950);
356
+
357
+ --sl-color-success-50: var(--sl-color-green-50);
358
+ --sl-color-success-100: var(--sl-color-green-100);
359
+ --sl-color-success-200: var(--sl-color-green-200);
360
+ --sl-color-success-300: var(--sl-color-green-300);
361
+ --sl-color-success-400: var(--sl-color-green-400);
362
+ --sl-color-success-500: var(--sl-color-green-500);
363
+ --sl-color-success-600: var(--sl-color-green-600);
364
+ --sl-color-success-700: var(--sl-color-green-700);
365
+ --sl-color-success-800: var(--sl-color-green-800);
366
+ --sl-color-success-900: var(--sl-color-green-900);
367
+ --sl-color-success-950: var(--sl-color-green-950);
368
+
369
+ --sl-color-warning-50: var(--sl-color-amber-50);
370
+ --sl-color-warning-100: var(--sl-color-amber-100);
371
+ --sl-color-warning-200: var(--sl-color-amber-200);
372
+ --sl-color-warning-300: var(--sl-color-amber-300);
373
+ --sl-color-warning-400: var(--sl-color-amber-400);
374
+ --sl-color-warning-500: var(--sl-color-amber-500);
375
+ --sl-color-warning-600: var(--sl-color-amber-600);
376
+ --sl-color-warning-700: var(--sl-color-amber-700);
377
+ --sl-color-warning-800: var(--sl-color-amber-800);
378
+ --sl-color-warning-900: var(--sl-color-amber-900);
379
+ --sl-color-warning-950: var(--sl-color-amber-950);
380
+
381
+ --sl-color-danger-50: var(--sl-color-red-50);
382
+ --sl-color-danger-100: var(--sl-color-red-100);
383
+ --sl-color-danger-200: var(--sl-color-red-200);
384
+ --sl-color-danger-300: var(--sl-color-red-300);
385
+ --sl-color-danger-400: var(--sl-color-red-400);
386
+ --sl-color-danger-500: var(--sl-color-red-500);
387
+ --sl-color-danger-600: var(--sl-color-red-600);
388
+ --sl-color-danger-700: var(--sl-color-red-700);
389
+ --sl-color-danger-800: var(--sl-color-red-800);
390
+ --sl-color-danger-900: var(--sl-color-red-900);
391
+ --sl-color-danger-950: var(--sl-color-red-950);
392
+
393
+ --sl-color-neutral-50: var(--sl-color-gray-50);
394
+ --sl-color-neutral-100: var(--sl-color-gray-100);
395
+ --sl-color-neutral-200: var(--sl-color-gray-200);
396
+ --sl-color-neutral-300: var(--sl-color-gray-300);
397
+ --sl-color-neutral-400: var(--sl-color-gray-400);
398
+ --sl-color-neutral-500: var(--sl-color-gray-500);
399
+ --sl-color-neutral-600: var(--sl-color-gray-600);
400
+ --sl-color-neutral-700: var(--sl-color-gray-700);
401
+ --sl-color-neutral-800: var(--sl-color-gray-800);
402
+ --sl-color-neutral-900: var(--sl-color-gray-900);
403
+ --sl-color-neutral-950: var(--sl-color-gray-950);
404
+
405
+ --sl-color-neutral-0: hsl(0, 0%, 100%);
406
+ --sl-color-neutral-1000: hsl(0, 0%, 0%);
407
+
408
+ --sl-border-radius-small: 0.1875rem;
409
+ --sl-border-radius-medium: 0.25rem;
410
+ --sl-border-radius-large: 0.5rem;
411
+ --sl-border-radius-x-large: 1rem;
412
+
413
+ --sl-border-radius-circle: 50%;
414
+ --sl-border-radius-pill: 9999px;
415
+
416
+ --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
417
+ --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
418
+ --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
419
+ --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
420
+ --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
421
+
422
+ --sl-spacing-3x-small: 0.125rem;
423
+ --sl-spacing-2x-small: 0.25rem;
424
+ --sl-spacing-x-small: 0.5rem;
425
+ --sl-spacing-small: 0.75rem;
426
+ --sl-spacing-medium: 1rem;
427
+ --sl-spacing-large: 1.25rem;
428
+ --sl-spacing-x-large: 1.75rem;
429
+ --sl-spacing-2x-large: 2.25rem;
430
+ --sl-spacing-3x-large: 3rem;
431
+ --sl-spacing-4x-large: 4.5rem;
432
+
433
+ --sl-transition-x-slow: 1000ms;
434
+ --sl-transition-slow: 500ms;
435
+ --sl-transition-medium: 250ms;
436
+ --sl-transition-fast: 150ms;
437
+ --sl-transition-x-fast: 50ms;
438
+
439
+ --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
440
+ --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
441
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
442
+ "Segoe UI Symbol";
443
+ --sl-font-serif: Georgia, "Times New Roman", serif;
444
+
445
+ --sl-font-size-2x-small: 0.625rem;
446
+ --sl-font-size-x-small: 0.75rem;
447
+ --sl-font-size-small: 0.875rem;
448
+ --sl-font-size-medium: 1rem;
449
+ --sl-font-size-large: 1.25rem;
450
+ --sl-font-size-x-large: 1.5rem;
451
+ --sl-font-size-2x-large: 2.25rem;
452
+ --sl-font-size-3x-large: 3rem;
453
+ --sl-font-size-4x-large: 4.5rem;
454
+
455
+ --sl-font-weight-light: 300;
456
+ --sl-font-weight-normal: 400;
457
+ --sl-font-weight-semibold: 500;
458
+ --sl-font-weight-bold: 700;
459
+
460
+ --sl-letter-spacing-denser: -0.03em;
461
+ --sl-letter-spacing-dense: -0.015em;
462
+ --sl-letter-spacing-normal: normal;
463
+ --sl-letter-spacing-loose: 0.075em;
464
+ --sl-letter-spacing-looser: 0.15em;
465
+
466
+ --sl-line-height-denser: 1;
467
+ --sl-line-height-dense: 1.4;
468
+ --sl-line-height-normal: 1.8;
469
+ --sl-line-height-loose: 2.2;
470
+ --sl-line-height-looser: 2.6;
471
+
472
+ --sl-focus-ring-color: var(--sl-color-primary-600);
473
+ --sl-focus-ring-style: solid;
474
+ --sl-focus-ring-width: 3px;
475
+ --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
476
+ var(--sl-focus-ring-color);
477
+ --sl-focus-ring-offset: 1px;
478
+
479
+ --sl-button-font-size-small: var(--sl-font-size-x-small);
480
+ --sl-button-font-size-medium: var(--sl-font-size-small);
481
+ --sl-button-font-size-large: var(--sl-font-size-medium);
482
+
483
+ --sl-input-height-small: 1.875rem;
484
+ --sl-input-height-medium: 2.5rem;
485
+ --sl-input-height-large: 3.125rem;
486
+
487
+ --sl-input-background-color: var(--sl-color-neutral-0);
488
+ --sl-input-background-color-hover: var(--sl-input-background-color);
489
+ --sl-input-background-color-focus: var(--sl-input-background-color);
490
+ --sl-input-background-color-disabled: var(--sl-color-neutral-100);
491
+ --sl-input-border-color: var(--sl-color-neutral-300);
492
+ --sl-input-border-color-hover: var(--sl-color-neutral-400);
493
+ --sl-input-border-color-focus: var(--sl-color-primary-500);
494
+ --sl-input-border-color-disabled: var(--sl-color-neutral-300);
495
+ --sl-input-border-width: 1px;
496
+ --sl-input-required-content: "*";
497
+ --sl-input-required-content-offset: -2px;
498
+ --sl-input-required-content-color: var(--sl-input-label-color);
499
+
500
+ --sl-input-border-radius-small: var(--sl-border-radius-medium);
501
+ --sl-input-border-radius-medium: var(--sl-border-radius-medium);
502
+ --sl-input-border-radius-large: var(--sl-border-radius-medium);
503
+
504
+ --sl-input-font-family: var(--sl-font-sans);
505
+ --sl-input-font-weight: var(--sl-font-weight-normal);
506
+ --sl-input-font-size-small: var(--sl-font-size-small);
507
+ --sl-input-font-size-medium: var(--sl-font-size-medium);
508
+ --sl-input-font-size-large: var(--sl-font-size-large);
509
+ --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
510
+
511
+ --sl-input-color: var(--sl-color-neutral-700);
512
+ --sl-input-color-hover: var(--sl-color-neutral-700);
513
+ --sl-input-color-focus: var(--sl-color-neutral-700);
514
+ --sl-input-color-disabled: var(--sl-color-neutral-900);
515
+ --sl-input-icon-color: var(--sl-color-neutral-500);
516
+ --sl-input-icon-color-hover: var(--sl-color-neutral-600);
517
+ --sl-input-icon-color-focus: var(--sl-color-neutral-600);
518
+ --sl-input-placeholder-color: var(--sl-color-neutral-500);
519
+ --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
520
+ --sl-input-spacing-small: var(--sl-spacing-small);
521
+ --sl-input-spacing-medium: var(--sl-spacing-medium);
522
+ --sl-input-spacing-large: var(--sl-spacing-large);
523
+
524
+ --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
525
+ --sl-input-focus-ring-offset: 0;
526
+
527
+ --sl-input-filled-background-color: var(--sl-color-neutral-100);
528
+ --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
529
+ --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
530
+ --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
531
+ --sl-input-filled-color: var(--sl-color-neutral-800);
532
+ --sl-input-filled-color-hover: var(--sl-color-neutral-800);
533
+ --sl-input-filled-color-focus: var(--sl-color-neutral-700);
534
+ --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
535
+
536
+ --sl-input-label-font-size-small: var(--sl-font-size-small);
537
+ --sl-input-label-font-size-medium: var(--sl-font-size-medium);
538
+ --sl-input-label-font-size-large: var(--sl-font-size-large);
539
+ --sl-input-label-color: inherit;
540
+
541
+ --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
542
+ --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
543
+ --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
544
+ --sl-input-help-text-color: var(--sl-color-neutral-500);
545
+
546
+ --sl-toggle-size-small: 0.875rem;
547
+ --sl-toggle-size-medium: 1.125rem;
548
+ --sl-toggle-size-large: 1.375rem;
549
+
550
+ --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
551
+
552
+ --sl-panel-background-color: var(--sl-color-neutral-0);
553
+ --sl-panel-border-color: var(--sl-color-neutral-200);
554
+ --sl-panel-border-width: 1px;
555
+
556
+ --sl-tooltip-border-radius: var(--sl-border-radius-medium);
557
+ --sl-tooltip-background-color: var(--sl-color-neutral-800);
558
+ --sl-tooltip-color: var(--sl-color-neutral-0);
559
+ --sl-tooltip-font-family: var(--sl-font-sans);
560
+ --sl-tooltip-font-weight: var(--sl-font-weight-normal);
561
+ --sl-tooltip-font-size: var(--sl-font-size-small);
562
+ --sl-tooltip-line-height: var(--sl-line-height-dense);
563
+ --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
564
+ --sl-tooltip-arrow-size: 6px;
565
+
566
+ --sl-z-index-drawer: 700;
567
+ --sl-z-index-dialog: 800;
568
+ --sl-z-index-dropdown: 900;
569
+ --sl-z-index-toast: 950;
570
+ --sl-z-index-tooltip: 1000;
571
+ }
572
+
573
+ @supports (scrollbar-gutter: stable) {
574
+ .sl-scroll-lock {
575
+ scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
576
+ }
577
+
578
+ .sl-scroll-lock body {
579
+ overflow: hidden !important;
580
+ }
581
+ }
582
+
583
+ @supports not (scrollbar-gutter: stable) {
584
+ .sl-scroll-lock body {
585
+ padding-right: var(--sl-scroll-lock-size) !important;
586
+ overflow: hidden !important;
587
+ }
588
+ }
589
+
590
+ .sl-toast-stack {
591
+ position: fixed;
592
+ top: 0;
593
+ inset-inline-end: 0;
594
+ z-index: var(--sl-z-index-toast);
595
+ width: 28rem;
596
+ max-width: 100%;
597
+ max-height: 100%;
598
+ overflow: auto;
599
+ }
600
+
601
+ .sl-toast-stack sl-alert {
602
+ margin: var(--sl-spacing-medium);
603
+ }
604
+
605
+ .sl-toast-stack sl-alert::part(base) {
606
+ box-shadow: var(--sl-shadow-large);
607
+ }
608
+
609
+ :host,
610
+ .sl-theme-dark {
611
+ color-scheme: dark;
612
+
613
+ --sl-color-gray-50: hsl(240 5.1% 15%);
614
+ --sl-color-gray-100: hsl(240 5.7% 18.2%);
615
+ --sl-color-gray-200: hsl(240 4.6% 22%);
616
+ --sl-color-gray-300: hsl(240 5% 27.6%);
617
+ --sl-color-gray-400: hsl(240 5% 35.5%);
618
+ --sl-color-gray-500: hsl(240 3.7% 44%);
619
+ --sl-color-gray-600: hsl(240 5.3% 58%);
620
+ --sl-color-gray-700: hsl(240 5.6% 73%);
621
+ --sl-color-gray-800: hsl(240 7.3% 84%);
622
+ --sl-color-gray-900: hsl(240 9.1% 91.8%);
623
+ --sl-color-gray-950: hsl(0 0% 95%);
624
+
625
+ --sl-color-red-50: hsl(0 56% 23.9%);
626
+ --sl-color-red-100: hsl(0.6 60% 33.9%);
627
+ --sl-color-red-200: hsl(0.9 67.2% 37.1%);
628
+ --sl-color-red-300: hsl(1.1 71.3% 43.7%);
629
+ --sl-color-red-400: hsl(1 76% 52.5%);
630
+ --sl-color-red-500: hsl(0.7 89.6% 57.2%);
631
+ --sl-color-red-600: hsl(0 98.6% 67.9%);
632
+ --sl-color-red-700: hsl(0 100% 72.3%);
633
+ --sl-color-red-800: hsl(0 100% 85.6%);
634
+ --sl-color-red-900: hsl(0 100% 90.3%);
635
+ --sl-color-red-950: hsl(0 100% 95.9%);
636
+
637
+ --sl-color-orange-50: hsl(15 64.2% 23.3%);
638
+ --sl-color-orange-100: hsl(15.1 70.9% 31.1%);
639
+ --sl-color-orange-200: hsl(15.3 75.7% 35.5%);
640
+ --sl-color-orange-300: hsl(17.1 83.5% 42.7%);
641
+ --sl-color-orange-400: hsl(20.1 88% 50.8%);
642
+ --sl-color-orange-500: hsl(24.3 100% 50.5%);
643
+ --sl-color-orange-600: hsl(27.2 100% 57.7%);
644
+ --sl-color-orange-700: hsl(31.3 100% 68.7%);
645
+ --sl-color-orange-800: hsl(33.8 100% 79.3%);
646
+ --sl-color-orange-900: hsl(38.9 100% 87.7%);
647
+ --sl-color-orange-950: hsl(46.2 100% 95%);
648
+
649
+ --sl-color-amber-50: hsl(21.9 66.3% 21.1%);
650
+ --sl-color-amber-100: hsl(21.5 73.6% 29.7%);
651
+ --sl-color-amber-200: hsl(22.3 77.6% 33.3%);
652
+ --sl-color-amber-300: hsl(25.4 84.2% 39.6%);
653
+ --sl-color-amber-400: hsl(31.4 87.4% 46.7%);
654
+ --sl-color-amber-500: hsl(37 96.6% 48.3%);
655
+ --sl-color-amber-600: hsl(43.3 100% 53.4%);
656
+ --sl-color-amber-700: hsl(46.5 100% 61.1%);
657
+ --sl-color-amber-800: hsl(49.3 100% 73%);
658
+ --sl-color-amber-900: hsl(51.8 100% 85%);
659
+ --sl-color-amber-950: hsl(60 100% 94.6%);
660
+
661
+ --sl-color-yellow-50: hsl(32.5 60% 18.2%);
662
+ --sl-color-yellow-100: hsl(28.1 68.6% 29%);
663
+ --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
664
+ --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
665
+ --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
666
+ --sl-color-yellow-500: hsl(44.7 88% 46%);
667
+ --sl-color-yellow-600: hsl(47.7 100% 50.9%);
668
+ --sl-color-yellow-700: hsl(51.3 100% 59.9%);
669
+ --sl-color-yellow-800: hsl(54.6 100% 73%);
670
+ --sl-color-yellow-900: hsl(58.9 100% 84.2%);
671
+ --sl-color-yellow-950: hsl(60 100% 94%);
672
+
673
+ --sl-color-lime-50: hsl(86.5 54.4% 18%);
674
+ --sl-color-lime-100: hsl(87.6 56.8% 23.3%);
675
+ --sl-color-lime-200: hsl(85.8 63.2% 24.5%);
676
+ --sl-color-lime-300: hsl(86.1 72% 29.4%);
677
+ --sl-color-lime-400: hsl(85.5 76.8% 37.3%);
678
+ --sl-color-lime-500: hsl(84.3 74.2% 42.1%);
679
+ --sl-color-lime-600: hsl(82.8 81.5% 52.6%);
680
+ --sl-color-lime-700: hsl(82 89.9% 64%);
681
+ --sl-color-lime-800: hsl(80.9 97.9% 76.6%);
682
+ --sl-color-lime-900: hsl(77.9 100% 85.8%);
683
+ --sl-color-lime-950: hsl(69.5 100% 93.8%);
684
+
685
+ --sl-color-green-50: hsl(144.3 53.6% 16%);
686
+ --sl-color-green-100: hsl(143.2 55.4% 23.5%);
687
+ --sl-color-green-200: hsl(141.5 58.2% 26.3%);
688
+ --sl-color-green-300: hsl(140.8 64.2% 31.8%);
689
+ --sl-color-green-400: hsl(140.3 68% 39.2%);
690
+ --sl-color-green-500: hsl(141.1 64.9% 43%);
691
+ --sl-color-green-600: hsl(141.6 72.4% 55.2%);
692
+ --sl-color-green-700: hsl(141.7 82.7% 70.1%);
693
+ --sl-color-green-800: hsl(141 90.9% 82.1%);
694
+ --sl-color-green-900: hsl(142 100% 89.1%);
695
+ --sl-color-green-950: hsl(144 100% 95.5%);
696
+
697
+ --sl-color-emerald-50: hsl(164.3 75% 13.5%);
698
+ --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
699
+ --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
700
+ --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
701
+ --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
702
+ --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
703
+ --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
704
+ --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
705
+ --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
706
+ --sl-color-emerald-900: hsl(149.3 100% 87%);
707
+ --sl-color-emerald-950: hsl(158.6 100% 94.8%);
708
+
709
+ --sl-color-teal-50: hsl(176.5 51.5% 15.4%);
710
+ --sl-color-teal-100: hsl(175.9 54.7% 22.3%);
711
+ --sl-color-teal-200: hsl(175.9 60.7% 23.9%);
712
+ --sl-color-teal-300: hsl(174.5 67.3% 28.8%);
713
+ --sl-color-teal-400: hsl(174.4 71.9% 34.9%);
714
+ --sl-color-teal-500: hsl(173.1 71% 38.3%);
715
+ --sl-color-teal-600: hsl(172.3 68.2% 48.1%);
716
+ --sl-color-teal-700: hsl(170.5 81.3% 61.5%);
717
+ --sl-color-teal-800: hsl(168.4 92.1% 75.2%);
718
+ --sl-color-teal-900: hsl(168.3 100% 86%);
719
+ --sl-color-teal-950: hsl(180 100% 95.5%);
720
+
721
+ --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
722
+ --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
723
+ --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
724
+ --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
725
+ --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
726
+ --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
727
+ --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
728
+ --sl-color-cyan-700: hsl(187 98.6% 66.2%);
729
+ --sl-color-cyan-800: hsl(184.9 100% 78.3%);
730
+ --sl-color-cyan-900: hsl(180 100% 86.6%);
731
+ --sl-color-cyan-950: hsl(180 100% 94.8%);
732
+
733
+ --sl-color-sky-50: hsl(203 63.8% 20.9%);
734
+ --sl-color-sky-100: hsl(203.4 70.4% 28%);
735
+ --sl-color-sky-200: hsl(202.7 75.8% 30.8%);
736
+ --sl-color-sky-300: hsl(203.1 80.4% 36.1%);
737
+ --sl-color-sky-400: hsl(202.1 80.5% 44.3%);
738
+ --sl-color-sky-500: hsl(199.7 85.9% 47.7%);
739
+ --sl-color-sky-600: hsl(198.7 97.9% 57.2%);
740
+ --sl-color-sky-700: hsl(198.7 100% 70.5%);
741
+ --sl-color-sky-800: hsl(198.8 100% 82.5%);
742
+ --sl-color-sky-900: hsl(198.5 100% 89.9%);
743
+ --sl-color-sky-950: hsl(186 100% 95.5%);
744
+
745
+ --sl-color-blue-50: hsl(227.1 49.5% 22.7%);
746
+ --sl-color-blue-100: hsl(225.8 58.9% 36.8%);
747
+ --sl-color-blue-200: hsl(227.7 64.4% 42.9%);
748
+ --sl-color-blue-300: hsl(226.1 72.7% 51.2%);
749
+ --sl-color-blue-400: hsl(222.6 86.5% 56.3%);
750
+ --sl-color-blue-500: hsl(217.8 95.8% 57.4%);
751
+ --sl-color-blue-600: hsl(213.3 100% 65%);
752
+ --sl-color-blue-700: hsl(210.9 100% 74.8%);
753
+ --sl-color-blue-800: hsl(211.5 100% 83.4%);
754
+ --sl-color-blue-900: hsl(211 100% 88.9%);
755
+ --sl-color-blue-950: hsl(201.8 100% 95.3%);
756
+
757
+ --sl-color-indigo-50: hsl(243.5 40.8% 27%);
758
+ --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
759
+ --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
760
+ --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
761
+ --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
762
+ --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
763
+ --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
764
+ --sl-color-indigo-700: hsl(229.4 100% 78.3%);
765
+ --sl-color-indigo-800: hsl(227.1 100% 85%);
766
+ --sl-color-indigo-900: hsl(223.8 100% 89.9%);
767
+ --sl-color-indigo-950: hsl(220 100% 95.1%);
768
+
769
+ --sl-color-violet-50: hsl(265.1 57.3% 25.4%);
770
+ --sl-color-violet-100: hsl(263.5 63.8% 39.4%);
771
+ --sl-color-violet-200: hsl(263.4 66.2% 44.1%);
772
+ --sl-color-violet-300: hsl(263.7 72.8% 52.4%);
773
+ --sl-color-violet-400: hsl(262.5 87.3% 59.8%);
774
+ --sl-color-violet-500: hsl(258.3 95.1% 63.2%);
775
+ --sl-color-violet-600: hsl(255.1 100% 67.2%);
776
+ --sl-color-violet-700: hsl(253 100% 81.5%);
777
+ --sl-color-violet-800: hsl(251.7 100% 87.9%);
778
+ --sl-color-violet-900: hsl(254.1 100% 91.7%);
779
+ --sl-color-violet-950: hsl(257.1 100% 96.1%);
780
+
781
+ --sl-color-purple-50: hsl(276 54.3% 20.5%);
782
+ --sl-color-purple-100: hsl(273.6 61.8% 35.4%);
783
+ --sl-color-purple-200: hsl(272.9 64% 41.4%);
784
+ --sl-color-purple-300: hsl(271.9 68.1% 49.2%);
785
+ --sl-color-purple-400: hsl(271.5 85.1% 57.8%);
786
+ --sl-color-purple-500: hsl(270.7 96.4% 62.1%);
787
+ --sl-color-purple-600: hsl(270.5 100% 71.9%);
788
+ --sl-color-purple-700: hsl(270.9 100% 81.3%);
789
+ --sl-color-purple-800: hsl(272.4 100% 87.7%);
790
+ --sl-color-purple-900: hsl(276.7 100% 91.5%);
791
+ --sl-color-purple-950: hsl(300 100% 96.5%);
792
+
793
+ --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
794
+ --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
795
+ --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
796
+ --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
797
+ --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
798
+ --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
799
+ --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
800
+ --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
801
+ --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
802
+ --sl-color-fuchsia-900: hsl(300 100% 91.5%);
803
+ --sl-color-fuchsia-950: hsl(300 100% 96.3%);
804
+
805
+ --sl-color-pink-50: hsl(336.2 59.6% 20%);
806
+ --sl-color-pink-100: hsl(336.8 63.9% 34%);
807
+ --sl-color-pink-200: hsl(336.8 68.7% 37.6%);
808
+ --sl-color-pink-300: hsl(336.1 71.8% 44.5%);
809
+ --sl-color-pink-400: hsl(333.9 74.9% 53.1%);
810
+ --sl-color-pink-500: hsl(330.7 86.3% 57.7%);
811
+ --sl-color-pink-600: hsl(328.6 91.5% 67.2%);
812
+ --sl-color-pink-700: hsl(327.4 97.6% 78.7%);
813
+ --sl-color-pink-800: hsl(325.1 100% 86.6%);
814
+ --sl-color-pink-900: hsl(322.1 100% 91.3%);
815
+ --sl-color-pink-950: hsl(315 100% 95.9%);
816
+
817
+ --sl-color-rose-50: hsl(342.3 62.9% 21.5%);
818
+ --sl-color-rose-100: hsl(342.8 68.9% 34.2%);
819
+ --sl-color-rose-200: hsl(344.8 72.6% 37.3%);
820
+ --sl-color-rose-300: hsl(346.9 75.8% 43.7%);
821
+ --sl-color-rose-400: hsl(348.2 80.1% 52.7%);
822
+ --sl-color-rose-500: hsl(350.4 94.8% 57.5%);
823
+ --sl-color-rose-600: hsl(351.2 100% 58.1%);
824
+ --sl-color-rose-700: hsl(352.3 100% 78.1%);
825
+ --sl-color-rose-800: hsl(352 100% 86.2%);
826
+ --sl-color-rose-900: hsl(354.5 100% 90.7%);
827
+ --sl-color-rose-950: hsl(353.3 100% 95.7%);
828
+
829
+ --sl-color-primary-50: var(--sl-color-sky-50);
830
+ --sl-color-primary-100: var(--sl-color-sky-100);
831
+ --sl-color-primary-200: var(--sl-color-sky-200);
832
+ --sl-color-primary-300: var(--sl-color-sky-300);
833
+ --sl-color-primary-400: var(--sl-color-sky-400);
834
+ --sl-color-primary-500: var(--sl-color-sky-500);
835
+ --sl-color-primary-600: var(--sl-color-sky-600);
836
+ --sl-color-primary-700: var(--sl-color-sky-700);
837
+ --sl-color-primary-800: var(--sl-color-sky-800);
838
+ --sl-color-primary-900: var(--sl-color-sky-900);
839
+ --sl-color-primary-950: var(--sl-color-sky-950);
840
+
841
+ --sl-color-success-50: var(--sl-color-green-50);
842
+ --sl-color-success-100: var(--sl-color-green-100);
843
+ --sl-color-success-200: var(--sl-color-green-200);
844
+ --sl-color-success-300: var(--sl-color-green-300);
845
+ --sl-color-success-400: var(--sl-color-green-400);
846
+ --sl-color-success-500: var(--sl-color-green-500);
847
+ --sl-color-success-600: var(--sl-color-green-600);
848
+ --sl-color-success-700: var(--sl-color-green-700);
849
+ --sl-color-success-800: var(--sl-color-green-800);
850
+ --sl-color-success-900: var(--sl-color-green-900);
851
+ --sl-color-success-950: var(--sl-color-green-950);
852
+
853
+ --sl-color-warning-50: var(--sl-color-amber-50);
854
+ --sl-color-warning-100: var(--sl-color-amber-100);
855
+ --sl-color-warning-200: var(--sl-color-amber-200);
856
+ --sl-color-warning-300: var(--sl-color-amber-300);
857
+ --sl-color-warning-400: var(--sl-color-amber-400);
858
+ --sl-color-warning-500: var(--sl-color-amber-500);
859
+ --sl-color-warning-600: var(--sl-color-amber-600);
860
+ --sl-color-warning-700: var(--sl-color-amber-700);
861
+ --sl-color-warning-800: var(--sl-color-amber-800);
862
+ --sl-color-warning-900: var(--sl-color-amber-900);
863
+ --sl-color-warning-950: var(--sl-color-amber-950);
864
+
865
+ --sl-color-danger-50: var(--sl-color-red-50);
866
+ --sl-color-danger-100: var(--sl-color-red-100);
867
+ --sl-color-danger-200: var(--sl-color-red-200);
868
+ --sl-color-danger-300: var(--sl-color-red-300);
869
+ --sl-color-danger-400: var(--sl-color-red-400);
870
+ --sl-color-danger-500: var(--sl-color-red-500);
871
+ --sl-color-danger-600: var(--sl-color-red-600);
872
+ --sl-color-danger-700: var(--sl-color-red-700);
873
+ --sl-color-danger-800: var(--sl-color-red-800);
874
+ --sl-color-danger-900: var(--sl-color-red-900);
875
+ --sl-color-danger-950: var(--sl-color-red-950);
876
+
877
+ --sl-color-neutral-50: var(--sl-color-gray-50);
878
+ --sl-color-neutral-100: var(--sl-color-gray-100);
879
+ --sl-color-neutral-200: var(--sl-color-gray-200);
880
+ --sl-color-neutral-300: var(--sl-color-gray-300);
881
+ --sl-color-neutral-400: var(--sl-color-gray-400);
882
+ --sl-color-neutral-500: var(--sl-color-gray-500);
883
+ --sl-color-neutral-600: var(--sl-color-gray-600);
884
+ --sl-color-neutral-700: var(--sl-color-gray-700);
885
+ --sl-color-neutral-800: var(--sl-color-gray-800);
886
+ --sl-color-neutral-900: var(--sl-color-gray-900);
887
+ --sl-color-neutral-950: var(--sl-color-gray-950);
888
+
889
+ --sl-color-neutral-0: hsl(240, 5.9%, 11%);
890
+ --sl-color-neutral-1000: hsl(0, 0%, 100%);
891
+
892
+ --sl-border-radius-small: 0.1875rem;
893
+ --sl-border-radius-medium: 0.25rem;
894
+ --sl-border-radius-large: 0.5rem;
895
+ --sl-border-radius-x-large: 1rem;
896
+
897
+ --sl-border-radius-circle: 50%;
898
+ --sl-border-radius-pill: 9999px;
899
+
900
+ --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
901
+ --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
902
+ --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
903
+ --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
904
+ --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
905
+
906
+ --sl-spacing-3x-small: 0.125rem;
907
+ --sl-spacing-2x-small: 0.25rem;
908
+ --sl-spacing-x-small: 0.5rem;
909
+ --sl-spacing-small: 0.75rem;
910
+ --sl-spacing-medium: 1rem;
911
+ --sl-spacing-large: 1.25rem;
912
+ --sl-spacing-x-large: 1.75rem;
913
+ --sl-spacing-2x-large: 2.25rem;
914
+ --sl-spacing-3x-large: 3rem;
915
+ --sl-spacing-4x-large: 4.5rem;
916
+
917
+ --sl-transition-x-slow: 1000ms;
918
+ --sl-transition-slow: 500ms;
919
+ --sl-transition-medium: 250ms;
920
+ --sl-transition-fast: 150ms;
921
+ --sl-transition-x-fast: 50ms;
922
+
923
+ --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
924
+ --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
925
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
926
+ "Segoe UI Symbol";
927
+ --sl-font-serif: Georgia, "Times New Roman", serif;
928
+
929
+ --sl-font-size-2x-small: 0.625rem;
930
+ --sl-font-size-x-small: 0.75rem;
931
+ --sl-font-size-small: 0.875rem;
932
+ --sl-font-size-medium: 1rem;
933
+ --sl-font-size-large: 1.25rem;
934
+ --sl-font-size-x-large: 1.5rem;
935
+ --sl-font-size-2x-large: 2.25rem;
936
+ --sl-font-size-3x-large: 3rem;
937
+ --sl-font-size-4x-large: 4.5rem;
938
+
939
+ --sl-font-weight-light: 300;
940
+ --sl-font-weight-normal: 400;
941
+ --sl-font-weight-semibold: 500;
942
+ --sl-font-weight-bold: 700;
943
+
944
+ --sl-letter-spacing-denser: -0.03em;
945
+ --sl-letter-spacing-dense: -0.015em;
946
+ --sl-letter-spacing-normal: normal;
947
+ --sl-letter-spacing-loose: 0.075em;
948
+ --sl-letter-spacing-looser: 0.15em;
949
+
950
+ --sl-line-height-denser: 1;
951
+ --sl-line-height-dense: 1.4;
952
+ --sl-line-height-normal: 1.8;
953
+ --sl-line-height-loose: 2.2;
954
+ --sl-line-height-looser: 2.6;
955
+
956
+ --sl-focus-ring-color: var(--sl-color-primary-700);
957
+ --sl-focus-ring-style: solid;
958
+ --sl-focus-ring-width: 3px;
959
+ --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
960
+ var(--sl-focus-ring-color);
961
+ --sl-focus-ring-offset: 1px;
962
+
963
+ --sl-button-font-size-small: var(--sl-font-size-x-small);
964
+ --sl-button-font-size-medium: var(--sl-font-size-small);
965
+ --sl-button-font-size-large: var(--sl-font-size-medium);
966
+
967
+ --sl-input-height-small: 1.875rem;
968
+ --sl-input-height-medium: 2.5rem;
969
+ --sl-input-height-large: 3.125rem;
970
+
971
+ --sl-input-background-color: var(--sl-color-neutral-0);
972
+ --sl-input-background-color-hover: var(--sl-input-background-color);
973
+ --sl-input-background-color-focus: var(--sl-input-background-color);
974
+ --sl-input-background-color-disabled: var(--sl-color-neutral-100);
975
+ --sl-input-border-color: var(--sl-color-neutral-300);
976
+ --sl-input-border-color-hover: var(--sl-color-neutral-400);
977
+ --sl-input-border-color-focus: var(--sl-color-primary-500);
978
+ --sl-input-border-color-disabled: var(--sl-color-neutral-300);
979
+ --sl-input-border-width: 1px;
980
+ --sl-input-required-content: "*";
981
+ --sl-input-required-content-offset: -2px;
982
+ --sl-input-required-content-color: var(--sl-input-label-color);
983
+
984
+ --sl-input-border-radius-small: var(--sl-border-radius-medium);
985
+ --sl-input-border-radius-medium: var(--sl-border-radius-medium);
986
+ --sl-input-border-radius-large: var(--sl-border-radius-medium);
987
+
988
+ --sl-input-font-family: var(--sl-font-sans);
989
+ --sl-input-font-weight: var(--sl-font-weight-normal);
990
+ --sl-input-font-size-small: var(--sl-font-size-small);
991
+ --sl-input-font-size-medium: var(--sl-font-size-medium);
992
+ --sl-input-font-size-large: var(--sl-font-size-large);
993
+ --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
994
+
995
+ --sl-input-color: var(--sl-color-neutral-700);
996
+ --sl-input-color-hover: var(--sl-color-neutral-700);
997
+ --sl-input-color-focus: var(--sl-color-neutral-700);
998
+ --sl-input-color-disabled: var(--sl-color-neutral-900);
999
+ --sl-input-icon-color: var(--sl-color-neutral-500);
1000
+ --sl-input-icon-color-hover: var(--sl-color-neutral-600);
1001
+ --sl-input-icon-color-focus: var(--sl-color-neutral-600);
1002
+ --sl-input-placeholder-color: var(--sl-color-neutral-500);
1003
+ --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
1004
+ --sl-input-spacing-small: var(--sl-spacing-small);
1005
+ --sl-input-spacing-medium: var(--sl-spacing-medium);
1006
+ --sl-input-spacing-large: var(--sl-spacing-large);
1007
+
1008
+ --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
1009
+ --sl-input-focus-ring-offset: 0;
1010
+
1011
+ --sl-input-filled-background-color: var(--sl-color-neutral-100);
1012
+ --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
1013
+ --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
1014
+ --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
1015
+ --sl-input-filled-color: var(--sl-color-neutral-800);
1016
+ --sl-input-filled-color-hover: var(--sl-color-neutral-800);
1017
+ --sl-input-filled-color-focus: var(--sl-color-neutral-700);
1018
+ --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
1019
+
1020
+ --sl-input-label-font-size-small: var(--sl-font-size-small);
1021
+ --sl-input-label-font-size-medium: var(--sl-font-size-medium);
1022
+ --sl-input-label-font-size-large: var(--sl-font-size-large);
1023
+ --sl-input-label-color: inherit;
1024
+
1025
+ --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
1026
+ --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
1027
+ --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
1028
+ --sl-input-help-text-color: var(--sl-color-neutral-500);
1029
+
1030
+ --sl-toggle-size-small: 0.875rem;
1031
+ --sl-toggle-size-medium: 1.125rem;
1032
+ --sl-toggle-size-large: 1.375rem;
1033
+
1034
+ --sl-overlay-background-color: hsl(0 0% 0% / 43%);
1035
+
1036
+ --sl-panel-background-color: var(--sl-color-neutral-50);
1037
+ --sl-panel-border-color: var(--sl-color-neutral-200);
1038
+ --sl-panel-border-width: 1px;
1039
+
1040
+ --sl-tooltip-border-radius: var(--sl-border-radius-medium);
1041
+ --sl-tooltip-background-color: var(--sl-color-neutral-800);
1042
+ --sl-tooltip-color: var(--sl-color-neutral-0);
1043
+ --sl-tooltip-font-family: var(--sl-font-sans);
1044
+ --sl-tooltip-font-weight: var(--sl-font-weight-normal);
1045
+ --sl-tooltip-font-size: var(--sl-font-size-small);
1046
+ --sl-tooltip-line-height: var(--sl-line-height-dense);
1047
+ --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
1048
+ --sl-tooltip-arrow-size: 6px;
1049
+
1050
+ --sl-z-index-drawer: 700;
1051
+ --sl-z-index-dialog: 800;
1052
+ --sl-z-index-dropdown: 900;
1053
+ --sl-z-index-toast: 950;
1054
+ --sl-z-index-tooltip: 1000;
1055
+ }
1056
+
1057
+ @supports (scrollbar-gutter: stable) {
1058
+ .sl-scroll-lock {
1059
+ scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
1060
+ }
1061
+
1062
+ .sl-scroll-lock body {
1063
+ overflow: hidden !important;
1064
+ }
1065
+ }
1066
+
1067
+ @supports not (scrollbar-gutter: stable) {
1068
+ .sl-scroll-lock body {
1069
+ padding-right: var(--sl-scroll-lock-size) !important;
1070
+ overflow: hidden !important;
1071
+ }
1072
+ }
1073
+
1074
+ .sl-toast-stack {
1075
+ position: fixed;
1076
+ top: 0;
1077
+ inset-inline-end: 0;
1078
+ z-index: var(--sl-z-index-toast);
1079
+ width: 28rem;
1080
+ max-width: 100%;
1081
+ max-height: 100%;
1082
+ overflow: auto;
1083
+ }
1084
+
1085
+ .sl-toast-stack sl-alert {
1086
+ margin: var(--sl-spacing-medium);
1087
+ }
1088
+
1089
+ .sl-toast-stack sl-alert::part(base) {
1090
+ box-shadow: var(--sl-shadow-large);
1091
+ }
1092
+