singularity-components 0.1.60 → 0.1.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.css CHANGED
@@ -1,581 +1,831 @@
1
1
  /* lib/tailwind.css */
2
- *,
3
- ::before,
4
- ::after {
5
- --tw-border-spacing-x: 0;
6
- --tw-border-spacing-y: 0;
7
- --tw-translate-x: 0;
8
- --tw-translate-y: 0;
9
- --tw-rotate: 0;
10
- --tw-skew-x: 0;
11
- --tw-skew-y: 0;
12
- --tw-scale-x: 1;
13
- --tw-scale-y: 1;
14
- --tw-pan-x: ;
15
- --tw-pan-y: ;
16
- --tw-pinch-zoom: ;
17
- --tw-scroll-snap-strictness: proximity;
18
- --tw-gradient-from-position: ;
19
- --tw-gradient-via-position: ;
20
- --tw-gradient-to-position: ;
21
- --tw-ordinal: ;
22
- --tw-slashed-zero: ;
23
- --tw-numeric-figure: ;
24
- --tw-numeric-spacing: ;
25
- --tw-numeric-fraction: ;
26
- --tw-ring-inset: ;
27
- --tw-ring-offset-width: 0px;
28
- --tw-ring-offset-color: #fff;
29
- --tw-ring-color: rgb(59 130 246 / 0.5);
30
- --tw-ring-offset-shadow: 0 0 #0000;
31
- --tw-ring-shadow: 0 0 #0000;
32
- --tw-shadow: 0 0 #0000;
33
- --tw-shadow-colored: 0 0 #0000;
34
- --tw-blur: ;
35
- --tw-brightness: ;
36
- --tw-contrast: ;
37
- --tw-grayscale: ;
38
- --tw-hue-rotate: ;
39
- --tw-invert: ;
40
- --tw-saturate: ;
41
- --tw-sepia: ;
42
- --tw-drop-shadow: ;
43
- --tw-backdrop-blur: ;
44
- --tw-backdrop-brightness: ;
45
- --tw-backdrop-contrast: ;
46
- --tw-backdrop-grayscale: ;
47
- --tw-backdrop-hue-rotate: ;
48
- --tw-backdrop-invert: ;
49
- --tw-backdrop-opacity: ;
50
- --tw-backdrop-saturate: ;
51
- --tw-backdrop-sepia: ;
52
- --tw-contain-size: ;
53
- --tw-contain-layout: ;
54
- --tw-contain-paint: ;
55
- --tw-contain-style: ;
56
- }
57
- ::backdrop {
58
- --tw-border-spacing-x: 0;
59
- --tw-border-spacing-y: 0;
60
- --tw-translate-x: 0;
61
- --tw-translate-y: 0;
62
- --tw-rotate: 0;
63
- --tw-skew-x: 0;
64
- --tw-skew-y: 0;
65
- --tw-scale-x: 1;
66
- --tw-scale-y: 1;
67
- --tw-pan-x: ;
68
- --tw-pan-y: ;
69
- --tw-pinch-zoom: ;
70
- --tw-scroll-snap-strictness: proximity;
71
- --tw-gradient-from-position: ;
72
- --tw-gradient-via-position: ;
73
- --tw-gradient-to-position: ;
74
- --tw-ordinal: ;
75
- --tw-slashed-zero: ;
76
- --tw-numeric-figure: ;
77
- --tw-numeric-spacing: ;
78
- --tw-numeric-fraction: ;
79
- --tw-ring-inset: ;
80
- --tw-ring-offset-width: 0px;
81
- --tw-ring-offset-color: #fff;
82
- --tw-ring-color: rgb(59 130 246 / 0.5);
83
- --tw-ring-offset-shadow: 0 0 #0000;
84
- --tw-ring-shadow: 0 0 #0000;
85
- --tw-shadow: 0 0 #0000;
86
- --tw-shadow-colored: 0 0 #0000;
87
- --tw-blur: ;
88
- --tw-brightness: ;
89
- --tw-contrast: ;
90
- --tw-grayscale: ;
91
- --tw-hue-rotate: ;
92
- --tw-invert: ;
93
- --tw-saturate: ;
94
- --tw-sepia: ;
95
- --tw-drop-shadow: ;
96
- --tw-backdrop-blur: ;
97
- --tw-backdrop-brightness: ;
98
- --tw-backdrop-contrast: ;
99
- --tw-backdrop-grayscale: ;
100
- --tw-backdrop-hue-rotate: ;
101
- --tw-backdrop-invert: ;
102
- --tw-backdrop-opacity: ;
103
- --tw-backdrop-saturate: ;
104
- --tw-backdrop-sepia: ;
105
- --tw-contain-size: ;
106
- --tw-contain-layout: ;
107
- --tw-contain-paint: ;
108
- --tw-contain-style: ;
109
- }
110
- *,
111
- ::before,
112
- ::after {
113
- box-sizing: border-box;
114
- border-width: 0;
115
- border-style: solid;
116
- border-color: currentColor;
117
- }
118
- ::before,
119
- ::after {
120
- --tw-content: "";
121
- }
122
- html,
123
- :host {
124
- line-height: 1.5;
125
- -webkit-text-size-adjust: 100%;
126
- -moz-tab-size: 4;
127
- -o-tab-size: 4;
128
- tab-size: 4;
129
- font-family:
130
- ui-sans-serif,
131
- system-ui,
132
- sans-serif,
133
- "Apple Color Emoji",
134
- "Segoe UI Emoji",
135
- "Segoe UI Symbol",
136
- "Noto Color Emoji";
137
- font-feature-settings: normal;
138
- font-variation-settings: normal;
139
- -webkit-tap-highlight-color: transparent;
140
- }
141
- body {
142
- margin: 0;
143
- line-height: inherit;
144
- }
145
- hr {
146
- height: 0;
147
- color: inherit;
148
- border-top-width: 1px;
149
- }
150
- abbr:where([title]) {
151
- -webkit-text-decoration: underline dotted;
152
- text-decoration: underline dotted;
153
- }
154
- h1,
155
- h2,
156
- h3,
157
- h4,
158
- h5,
159
- h6 {
160
- font-size: inherit;
161
- font-weight: inherit;
162
- }
163
- a {
164
- color: inherit;
165
- text-decoration: inherit;
166
- }
167
- b,
168
- strong {
169
- font-weight: bolder;
170
- }
171
- code,
172
- kbd,
173
- samp,
174
- pre {
175
- font-family:
176
- ui-monospace,
177
- SFMono-Regular,
178
- Menlo,
179
- Monaco,
180
- Consolas,
181
- "Liberation Mono",
182
- "Courier New",
183
- monospace;
184
- font-feature-settings: normal;
185
- font-variation-settings: normal;
186
- font-size: 1em;
187
- }
188
- small {
189
- font-size: 80%;
190
- }
191
- sub,
192
- sup {
193
- font-size: 75%;
194
- line-height: 0;
195
- position: relative;
196
- vertical-align: baseline;
197
- }
198
- sub {
199
- bottom: -0.25em;
200
- }
201
- sup {
202
- top: -0.5em;
203
- }
204
- table {
205
- text-indent: 0;
206
- border-color: inherit;
207
- border-collapse: collapse;
208
- }
209
- button,
210
- input,
211
- optgroup,
212
- select,
213
- textarea {
214
- font-family: inherit;
215
- font-feature-settings: inherit;
216
- font-variation-settings: inherit;
217
- font-size: 100%;
218
- font-weight: inherit;
219
- line-height: inherit;
220
- letter-spacing: inherit;
221
- color: inherit;
222
- margin: 0;
223
- padding: 0;
224
- }
225
- button,
226
- select {
227
- text-transform: none;
228
- }
229
- button,
230
- input:where([type=button]),
231
- input:where([type=reset]),
232
- input:where([type=submit]) {
233
- -webkit-appearance: button;
234
- background-color: transparent;
235
- background-image: none;
236
- }
237
- :-moz-focusring {
238
- outline: auto;
239
- }
240
- :-moz-ui-invalid {
241
- box-shadow: none;
242
- }
243
- progress {
244
- vertical-align: baseline;
245
- }
246
- ::-webkit-inner-spin-button,
247
- ::-webkit-outer-spin-button {
248
- height: auto;
249
- }
250
- [type=search] {
251
- -webkit-appearance: textfield;
252
- outline-offset: -2px;
253
- }
254
- ::-webkit-search-decoration {
255
- -webkit-appearance: none;
256
- }
257
- ::-webkit-file-upload-button {
258
- -webkit-appearance: button;
259
- font: inherit;
260
- }
261
- summary {
262
- display: list-item;
263
- }
264
- blockquote,
265
- dl,
266
- dd,
267
- h1,
268
- h2,
269
- h3,
270
- h4,
271
- h5,
272
- h6,
273
- hr,
274
- figure,
275
- p,
276
- pre {
277
- margin: 0;
278
- }
279
- fieldset {
280
- margin: 0;
281
- padding: 0;
282
- }
283
- legend {
284
- padding: 0;
285
- }
286
- ol,
287
- ul,
288
- menu {
289
- list-style: none;
290
- margin: 0;
291
- padding: 0;
292
- }
293
- dialog {
294
- padding: 0;
295
- }
296
- textarea {
297
- resize: vertical;
298
- }
299
- input::-moz-placeholder,
300
- textarea::-moz-placeholder {
301
- opacity: 1;
302
- color: #9ca3af;
303
- }
304
- input::placeholder,
305
- textarea::placeholder {
306
- opacity: 1;
307
- color: #9ca3af;
308
- }
309
- button,
310
- [role=button] {
311
- cursor: pointer;
312
- }
313
- :disabled {
314
- cursor: default;
315
- }
316
- img,
317
- svg,
318
- video,
319
- canvas,
320
- audio,
321
- iframe,
322
- embed,
323
- object {
324
- display: block;
325
- vertical-align: middle;
326
- }
327
- img,
328
- video {
329
- max-width: 100%;
330
- height: auto;
331
- }
332
- [hidden]:where(:not([hidden=until-found])) {
333
- display: none;
334
- }
335
- :root {
336
- --sg-black: 0 0% 15%;
337
- --sg-white: 30 20% 98%;
338
- --sg-gray: 30 10% 70%;
339
- --sg-orange: 33 75% 54%;
340
- --sg-orange-foreground: 0 0% 20%;
341
- --sg-purple: 250 45% 58%;
342
- --sg-purple-foreground: 250 50% 98%;
343
- --sg-red: 0 65% 51%;
344
- --sg-red-foreground: 0 0% 98%;
345
- --sg-green: 120 45% 45%;
346
- --sg-green-foreground: 120 50% 98%;
347
- --sg-primary: var(--sg-orange);
348
- --sg-background: var(--sg-white);
349
- --sg-foreground: var(--sg-black);
350
- --sg-border: var(--sg-primary);
351
- --sg-ring: 210 65% 55%;
352
- --sg-radius: 0.5rem;
353
- --muted: 210 40% 96.1%;
354
- --muted-foreground: 215.4 16.3% 46.9%;
355
- --popover: 0 0% 100%;
356
- --popover-foreground: 222.2 47.4% 11.2%;
357
- --input: 214.3 31.8% 91.4%;
358
- --card: 0 0% 100%;
359
- --card-foreground: 222.2 47.4% 11.2%;
360
- --primary: 222.2 47.4% 11.2%;
361
- --primary-foreground: 210 40% 98%;
362
- --secondary: 210 40% 96.1%;
363
- --secondary-foreground: 222.2 47.4% 11.2%;
364
- --accent: 210 40% 96.1%;
365
- --accent-foreground: 222.2 47.4% 11.2%;
366
- --destructive: 0 100% 50%;
367
- --destructive-foreground: 210 40% 98%;
368
- --test1: 1px;
369
- --sg-spacing-1: 0.25rem;
370
- --sg-spacing-2: 0.5rem;
371
- --sg-spacing-3: 0.75rem;
372
- --sg-spacing-4: 1rem;
373
- --sg-spacing-6: 1.5rem;
374
- --sg-spacing-8: 2rem;
375
- --sg-spacing-12: 3rem;
376
- --sg-spacing-16: 4rem;
377
- --sg-spacing-20: 5rem;
378
- --sg-spacing-24: 6rem;
379
- --sg-spacing-28: 7rem;
380
- --sg-spacing-32: 8rem;
381
- --sg-spacing-36: 9rem;
382
- --sg-spacing-40: 10rem;
383
- }
384
- :root body {
385
- background-color: hsl(var(--sg-background));
386
- }
387
- .sg-mx-auto {
388
- margin-left: auto;
389
- margin-right: auto;
390
- }
391
- .sg-inline-flex {
392
- display: inline-flex;
393
- }
394
- .sg-grid {
395
- display: grid;
396
- }
397
- .sg-h-8 {
398
- height: var(--sg-spacing-8);
399
- }
400
- .sg-w-full {
401
- width: 100%;
402
- }
403
- .sg-max-w-\[768px\] {
404
- max-width: 768px;
405
- }
406
- .sg-grid-cols-1 {
407
- grid-template-columns: repeat(1, minmax(0, 1fr));
408
- }
409
- .sg-items-center {
410
- align-items: center;
411
- }
412
- .sg-justify-center {
413
- justify-content: center;
414
- }
415
- .sg-gap-2 {
416
- gap: var(--sg-spacing-2);
417
- }
418
- .sg-gap-4 {
419
- gap: var(--sg-spacing-4);
420
- }
421
- .sg-whitespace-nowrap {
422
- white-space: nowrap;
423
- }
424
- .sg-rounded-md {
425
- border-radius: 0.375rem;
426
- }
427
- .sg-border {
428
- border-width: 1px;
429
- }
430
- .sg-border-orange {
431
- border-color: hsl(var(--sg-orange));
432
- }
433
- .sg-border-transparent {
434
- border-color: transparent;
435
- }
436
- .sg-bg-black {
437
- background-color: hsl(var(--sg-black));
438
- }
439
- .sg-bg-green {
440
- background-color: hsl(var(--sg-green));
441
- }
442
- .sg-bg-orange {
443
- background-color: hsl(var(--sg-orange));
444
- }
445
- .sg-bg-purple {
446
- background-color: hsl(var(--sg-purple));
447
- }
448
- .sg-bg-red {
449
- background-color: hsl(var(--sg-red));
450
- }
451
- .sg-bg-transparent {
452
- background-color: transparent;
453
- }
454
- .sg-bg-white {
455
- background-color: hsl(var(--sg-white));
456
- }
457
- .sg-px-3 {
458
- padding-left: var(--sg-spacing-3);
459
- padding-right: var(--sg-spacing-3);
460
- }
461
- .sg-px-4 {
462
- padding-left: var(--sg-spacing-4);
463
- padding-right: var(--sg-spacing-4);
464
- }
465
- .sg-px-8 {
466
- padding-left: var(--sg-spacing-8);
467
- padding-right: var(--sg-spacing-8);
468
- }
469
- .sg-py-2 {
470
- padding-top: var(--sg-spacing-2);
471
- padding-bottom: var(--sg-spacing-2);
472
- }
473
- .sg-text-2xl {
474
- font-size: 1.5rem;
475
- line-height: 2rem;
476
- }
477
- .sg-text-3xl {
478
- font-size: 1.875rem;
479
- line-height: 2.25rem;
480
- }
481
- .sg-text-4xl {
482
- font-size: 2.25rem;
483
- line-height: 2.5rem;
484
- }
485
- .sg-text-base {
486
- font-size: 1rem;
487
- line-height: 1.5rem;
488
- }
489
- .sg-text-lg {
490
- font-size: 1.125rem;
491
- line-height: 1.75rem;
492
- }
493
- .sg-text-sm {
494
- font-size: 0.875rem;
495
- line-height: 1.25rem;
496
- }
497
- .sg-text-xl {
498
- font-size: 1.25rem;
499
- line-height: 1.75rem;
500
- }
501
- .sg-text-xs {
502
- font-size: 0.75rem;
503
- line-height: 1rem;
504
- }
505
- .sg-font-bold {
506
- font-weight: 700;
507
- }
508
- .sg-font-extrabold {
509
- font-weight: 800;
510
- }
511
- .sg-font-medium {
512
- font-weight: 500;
513
- }
514
- .sg-font-normal {
515
- font-weight: 400;
516
- }
517
- .sg-font-semibold {
518
- font-weight: 600;
519
- }
520
- .sg-tracking-tight {
521
- letter-spacing: -0.025em;
522
- }
523
- .sg-text-accent-foreground {
524
- color: hsl(var(--accent-foreground));
525
- }
526
- .sg-text-destructive {
527
- color: hsl(var(--destructive));
528
- }
529
- .sg-text-foreground {
530
- color: hsl(var(--sg-foreground));
531
- }
532
- .sg-text-green-foreground {
533
- color: hsl(var(--sg-green-foreground));
534
- }
535
- .sg-text-orange-foreground {
536
- color: hsl(var(--sg-orange-foreground));
537
- }
538
- .sg-text-primary {
539
- color: hsl(var(--primary));
540
- }
541
- .sg-text-purple-foreground {
542
- color: hsl(var(--sg-purple-foreground));
543
- }
544
- .sg-text-red-foreground {
545
- color: hsl(var(--sg-red-foreground));
546
- }
547
- .sg-text-secondary-foreground {
548
- color: hsl(var(--secondary-foreground));
2
+ @layer theme, base, components, utilities;
3
+ @layer theme {
4
+ :root,
5
+ :host {
6
+ --sg-font-sans:
7
+ ui-sans-serif,
8
+ system-ui,
9
+ sans-serif,
10
+ "Apple Color Emoji",
11
+ "Segoe UI Emoji",
12
+ "Segoe UI Symbol",
13
+ "Noto Color Emoji";
14
+ --sg-font-serif:
15
+ ui-serif,
16
+ Georgia,
17
+ Cambria,
18
+ "Times New Roman",
19
+ Times,
20
+ serif;
21
+ --sg-font-mono:
22
+ ui-monospace,
23
+ SFMono-Regular,
24
+ Menlo,
25
+ Monaco,
26
+ Consolas,
27
+ "Liberation Mono",
28
+ "Courier New",
29
+ monospace;
30
+ --sg-breakpoint-sm: 40rem;
31
+ --sg-breakpoint-md: 48rem;
32
+ --sg-breakpoint-lg: 64rem;
33
+ --sg-breakpoint-xl: 80rem;
34
+ --sg-breakpoint-2xl: 96rem;
35
+ --sg-container-3xs: 16rem;
36
+ --sg-container-2xs: 18rem;
37
+ --sg-container-xs: 20rem;
38
+ --sg-container-sm: 24rem;
39
+ --sg-container-md: 28rem;
40
+ --sg-container-lg: 32rem;
41
+ --sg-container-xl: 36rem;
42
+ --sg-container-2xl: 42rem;
43
+ --sg-container-3xl: 48rem;
44
+ --sg-container-4xl: 56rem;
45
+ --sg-container-5xl: 64rem;
46
+ --sg-container-6xl: 72rem;
47
+ --sg-container-7xl: 80rem;
48
+ --sg-text-xs: 0.75rem;
49
+ --sg-text-xs--line-height: calc(1 / 0.75);
50
+ --sg-text-sm: 0.875rem;
51
+ --sg-text-sm--line-height: calc(1.25 / 0.875);
52
+ --sg-text-base: 1rem;
53
+ --sg-text-base--line-height: calc(1.5 / 1);
54
+ --sg-text-lg: 1.125rem;
55
+ --sg-text-lg--line-height: calc(1.75 / 1.125);
56
+ --sg-text-xl: 1.25rem;
57
+ --sg-text-xl--line-height: calc(1.75 / 1.25);
58
+ --sg-text-2xl: 1.5rem;
59
+ --sg-text-2xl--line-height: calc(2 / 1.5);
60
+ --sg-text-3xl: 1.875rem;
61
+ --sg-text-3xl--line-height: calc(2.25 / 1.875);
62
+ --sg-text-4xl: 2.25rem;
63
+ --sg-text-4xl--line-height: calc(2.5 / 2.25);
64
+ --sg-text-5xl: 3rem;
65
+ --sg-text-5xl--line-height: 1;
66
+ --sg-text-6xl: 3.75rem;
67
+ --sg-text-6xl--line-height: 1;
68
+ --sg-text-7xl: 4.5rem;
69
+ --sg-text-7xl--line-height: 1;
70
+ --sg-text-8xl: 6rem;
71
+ --sg-text-8xl--line-height: 1;
72
+ --sg-text-9xl: 8rem;
73
+ --sg-text-9xl--line-height: 1;
74
+ --sg-font-weight-thin: 100;
75
+ --sg-font-weight-extralight: 200;
76
+ --sg-font-weight-light: 300;
77
+ --sg-font-weight-normal: 400;
78
+ --sg-font-weight-medium: 500;
79
+ --sg-font-weight-semibold: 600;
80
+ --sg-font-weight-bold: 700;
81
+ --sg-font-weight-extrabold: 800;
82
+ --sg-font-weight-black: 900;
83
+ --sg-tracking-tighter: -0.05em;
84
+ --sg-tracking-tight: -0.025em;
85
+ --sg-tracking-normal: 0em;
86
+ --sg-tracking-wide: 0.025em;
87
+ --sg-tracking-wider: 0.05em;
88
+ --sg-tracking-widest: 0.1em;
89
+ --sg-leading-tight: 1.25;
90
+ --sg-leading-snug: 1.375;
91
+ --sg-leading-normal: 1.5;
92
+ --sg-leading-relaxed: 1.625;
93
+ --sg-leading-loose: 2;
94
+ --sg-radius-xs: 0.125rem;
95
+ --sg-radius-sm: 0.25rem;
96
+ --sg-radius-md: 0.375rem;
97
+ --sg-radius-lg: 0.5rem;
98
+ --sg-radius-xl: 0.75rem;
99
+ --sg-radius-2xl: 1rem;
100
+ --sg-radius-3xl: 1.5rem;
101
+ --sg-radius-4xl: 2rem;
102
+ --sg-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
103
+ --sg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
104
+ --sg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
105
+ --sg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
106
+ --sg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
107
+ --sg-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
108
+ --sg-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
109
+ --sg-inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
110
+ --sg-inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
111
+ --sg-inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
112
+ --sg-drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
113
+ --sg-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
114
+ --sg-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
115
+ --sg-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
116
+ --sg-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
117
+ --sg-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
118
+ --sg-ease-in: cubic-bezier(0.4, 0, 1, 1);
119
+ --sg-ease-out: cubic-bezier(0, 0, 0.2, 1);
120
+ --sg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
121
+ --sg-animate-spin: spin 1s linear infinite;
122
+ --sg-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
123
+ --sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
124
+ --sg-animate-bounce: bounce 1s infinite;
125
+ --sg-blur-xs: 4px;
126
+ --sg-blur-sm: 8px;
127
+ --sg-blur-md: 12px;
128
+ --sg-blur-lg: 16px;
129
+ --sg-blur-xl: 24px;
130
+ --sg-blur-2xl: 40px;
131
+ --sg-blur-3xl: 64px;
132
+ --sg-perspective-dramatic: 100px;
133
+ --sg-perspective-near: 300px;
134
+ --sg-perspective-normal: 500px;
135
+ --sg-perspective-midrange: 800px;
136
+ --sg-perspective-distant: 1200px;
137
+ --sg-aspect-video: 16 / 9;
138
+ --sg-default-transition-duration: 150ms;
139
+ --sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
140
+ --sg-default-font-family: var(--font-sans);
141
+ --sg-default-font-feature-settings: var(--font-sans--font-feature-settings);
142
+ --sg-default-font-variation-settings: var( --font-sans--font-variation-settings );
143
+ --sg-default-mono-font-family: var(--font-mono);
144
+ --sg-default-mono-font-feature-settings: var( --font-mono--font-feature-settings );
145
+ --sg-default-mono-font-variation-settings: var( --font-mono--font-variation-settings );
146
+ --sg-color-transparent: transparent;
147
+ --sg-color-current: currentColor;
148
+ --sg-color-white: hsl(var(--sg-white));
149
+ --sg-color-black: hsl(var(--sg-black));
150
+ --sg-color-gray: hsl(var(--sg-gray));
151
+ --sg-color-orange: hsl(var(--sg-orange));
152
+ --sg-color-orange-foreground: hsl(var(--sg-orange-foreground));
153
+ --sg-color-purple: hsl(var(--sg-purple));
154
+ --sg-color-purple-foreground: hsl(var(--sg-purple-foreground));
155
+ --sg-color-red: hsl(var(--sg-red));
156
+ --sg-color-red-foreground: hsl(var(--sg-red-foreground));
157
+ --sg-color-green: hsl(var(--sg-green));
158
+ --sg-color-green-foreground: hsl(var(--sg-green-foreground));
159
+ --sg-color-border: hsl(var(--sg-border));
160
+ --sg-color-background: hsl(var(--sg-background));
161
+ --sg-color-foreground: hsl(var(--sg-foreground));
162
+ --sg-color-ring: hsl(var(--sg-ring));
163
+ --sg-color-input: hsl(var(--input));
164
+ --sg-color-primary: hsl(var(--primary));
165
+ --sg-color-primary-foreground: hsl(var(--primary-foreground));
166
+ --sg-color-secondary: hsl(var(--secondary));
167
+ --sg-color-secondary-foreground: hsl(var(--secondary-foreground));
168
+ --sg-color-destructive: hsl(var(--destructive));
169
+ --sg-color-destructive-foreground: hsl(var(--destructive-foreground));
170
+ --sg-color-accent: hsl(var(--accent));
171
+ --sg-color-accent-foreground: hsl(var(--accent-foreground));
172
+ --sg-spacing-1: var(--sg-spacing-1);
173
+ --sg-spacing-2: var(--sg-spacing-2);
174
+ --sg-spacing-3: var(--sg-spacing-3);
175
+ --sg-spacing-4: var(--sg-spacing-4);
176
+ --sg-spacing-6: var(--sg-spacing-6);
177
+ --sg-spacing-8: var(--sg-spacing-8);
178
+ --sg-spacing-12: var(--sg-spacing-12);
179
+ --sg-spacing-16: var(--sg-spacing-16);
180
+ --sg-spacing-20: var(--sg-spacing-20);
181
+ --sg-spacing-24: var(--sg-spacing-24);
182
+ --sg-spacing-28: var(--sg-spacing-28);
183
+ --sg-spacing-32: var(--sg-spacing-32);
184
+ --sg-spacing-36: var(--sg-spacing-36);
185
+ --sg-spacing-40: var(--sg-spacing-40);
186
+ }
549
187
  }
550
- .sg-underline-offset-4 {
551
- text-underline-offset: 4px;
188
+ @layer base {
189
+ *,
190
+ ::after,
191
+ ::before,
192
+ ::backdrop,
193
+ ::file-selector-button {
194
+ box-sizing: border-box;
195
+ margin: 0;
196
+ padding: 0;
197
+ border: 0 solid;
198
+ }
199
+ html,
200
+ :host {
201
+ line-height: 1.5;
202
+ -webkit-text-size-adjust: 100%;
203
+ tab-size: 4;
204
+ 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" );
205
+ font-feature-settings: var(--default-font-feature-settings, normal);
206
+ font-variation-settings: var( --default-font-variation-settings, normal );
207
+ -webkit-tap-highlight-color: transparent;
208
+ }
209
+ body {
210
+ line-height: inherit;
211
+ }
212
+ hr {
213
+ height: 0;
214
+ color: inherit;
215
+ border-top-width: 1px;
216
+ }
217
+ abbr:where([title]) {
218
+ -webkit-text-decoration: underline dotted;
219
+ text-decoration: underline dotted;
220
+ }
221
+ h1,
222
+ h2,
223
+ h3,
224
+ h4,
225
+ h5,
226
+ h6 {
227
+ font-size: inherit;
228
+ font-weight: inherit;
229
+ }
230
+ a {
231
+ color: inherit;
232
+ -webkit-text-decoration: inherit;
233
+ text-decoration: inherit;
234
+ }
235
+ b,
236
+ strong {
237
+ font-weight: bolder;
238
+ }
239
+ code,
240
+ kbd,
241
+ samp,
242
+ pre {
243
+ font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
244
+ font-feature-settings: var( --default-mono-font-feature-settings, normal );
245
+ font-variation-settings: var( --default-mono-font-variation-settings, normal );
246
+ font-size: 1em;
247
+ }
248
+ small {
249
+ font-size: 80%;
250
+ }
251
+ sub,
252
+ sup {
253
+ font-size: 75%;
254
+ line-height: 0;
255
+ position: relative;
256
+ vertical-align: baseline;
257
+ }
258
+ sub {
259
+ bottom: -0.25em;
260
+ }
261
+ sup {
262
+ top: -0.5em;
263
+ }
264
+ table {
265
+ text-indent: 0;
266
+ border-color: inherit;
267
+ border-collapse: collapse;
268
+ }
269
+ :-moz-focusring {
270
+ outline: auto;
271
+ }
272
+ progress {
273
+ vertical-align: baseline;
274
+ }
275
+ summary {
276
+ display: list-item;
277
+ }
278
+ ol,
279
+ ul,
280
+ menu {
281
+ list-style: none;
282
+ }
283
+ img,
284
+ svg,
285
+ video,
286
+ canvas,
287
+ audio,
288
+ iframe,
289
+ embed,
290
+ object {
291
+ display: block;
292
+ vertical-align: middle;
293
+ }
294
+ img,
295
+ video {
296
+ max-width: 100%;
297
+ height: auto;
298
+ }
299
+ button,
300
+ input,
301
+ select,
302
+ optgroup,
303
+ textarea,
304
+ ::file-selector-button {
305
+ font: inherit;
306
+ font-feature-settings: inherit;
307
+ font-variation-settings: inherit;
308
+ letter-spacing: inherit;
309
+ color: inherit;
310
+ border-radius: 0;
311
+ background-color: transparent;
312
+ opacity: 1;
313
+ }
314
+ :where(select:is([multiple], [size])) optgroup {
315
+ font-weight: bolder;
316
+ }
317
+ :where(select:is([multiple], [size])) optgroup option {
318
+ padding-inline-start: 20px;
319
+ }
320
+ ::file-selector-button {
321
+ margin-inline-end: 4px;
322
+ }
323
+ ::placeholder {
324
+ opacity: 1;
325
+ color: color-mix(in oklab, currentColor 50%, transparent);
326
+ }
327
+ textarea {
328
+ resize: vertical;
329
+ }
330
+ ::-webkit-search-decoration {
331
+ -webkit-appearance: none;
332
+ }
333
+ ::-webkit-date-and-time-value {
334
+ min-height: 1lh;
335
+ text-align: inherit;
336
+ }
337
+ ::-webkit-datetime-edit {
338
+ display: inline-flex;
339
+ }
340
+ ::-webkit-datetime-edit-fields-wrapper {
341
+ padding: 0;
342
+ }
343
+ ::-webkit-datetime-edit,
344
+ ::-webkit-datetime-edit-year-field,
345
+ ::-webkit-datetime-edit-month-field,
346
+ ::-webkit-datetime-edit-day-field,
347
+ ::-webkit-datetime-edit-hour-field,
348
+ ::-webkit-datetime-edit-minute-field,
349
+ ::-webkit-datetime-edit-second-field,
350
+ ::-webkit-datetime-edit-millisecond-field,
351
+ ::-webkit-datetime-edit-meridiem-field {
352
+ padding-block: 0;
353
+ }
354
+ :-moz-ui-invalid {
355
+ box-shadow: none;
356
+ }
357
+ button,
358
+ input:where([type=button], [type=reset], [type=submit]),
359
+ ::file-selector-button {
360
+ appearance: button;
361
+ }
362
+ ::-webkit-inner-spin-button,
363
+ ::-webkit-outer-spin-button {
364
+ height: auto;
365
+ }
366
+ [hidden]:where(:not([hidden=until-found])) {
367
+ display: none !important;
368
+ }
552
369
  }
553
- .sg-shadow {
554
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
555
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
556
- box-shadow:
557
- var(--tw-ring-offset-shadow, 0 0 #0000),
558
- var(--tw-ring-shadow, 0 0 #0000),
559
- var(--tw-shadow);
370
+ @layer utilities {
371
+ .sg\:mx-auto {
372
+ margin-inline: auto;
373
+ }
374
+ .sg\:grid {
375
+ display: grid;
376
+ }
377
+ .sg\:inline-flex {
378
+ display: inline-flex;
379
+ }
380
+ .sg\:h-8 {
381
+ height: var(--sg-spacing-8);
382
+ }
383
+ .sg\:w-full {
384
+ width: 100%;
385
+ }
386
+ .sg\:max-w-\[768px\] {
387
+ max-width: 768px;
388
+ }
389
+ .sg\:grid-cols-1 {
390
+ grid-template-columns: repeat(1, minmax(0, 1fr));
391
+ }
392
+ .sg\:items-center {
393
+ align-items: center;
394
+ }
395
+ .sg\:justify-center {
396
+ justify-content: center;
397
+ }
398
+ .sg\:gap-2 {
399
+ gap: var(--sg-spacing-2);
400
+ }
401
+ .sg\:gap-4 {
402
+ gap: var(--sg-spacing-4);
403
+ }
404
+ .sg\:rounded-md {
405
+ border-radius: var(--sg-radius-md);
406
+ }
407
+ .sg\:border {
408
+ border-style: var(--tw-border-style);
409
+ border-width: 1px;
410
+ }
411
+ .sg\:border-orange {
412
+ border-color: var(--sg-color-orange);
413
+ }
414
+ .sg\:border-transparent {
415
+ border-color: transparent;
416
+ }
417
+ .sg\:bg-black {
418
+ background-color: var(--sg-color-black);
419
+ }
420
+ .sg\:bg-green {
421
+ background-color: var(--sg-color-green);
422
+ }
423
+ .sg\:bg-orange {
424
+ background-color: var(--sg-color-orange);
425
+ }
426
+ .sg\:bg-purple {
427
+ background-color: var(--sg-color-purple);
428
+ }
429
+ .sg\:bg-red {
430
+ background-color: var(--sg-color-red);
431
+ }
432
+ .sg\:bg-transparent {
433
+ background-color: transparent;
434
+ }
435
+ .sg\:bg-white {
436
+ background-color: var(--sg-color-white);
437
+ }
438
+ .sg\:px-3 {
439
+ padding-inline: var(--sg-spacing-3);
440
+ }
441
+ .sg\:px-4 {
442
+ padding-inline: var(--sg-spacing-4);
443
+ }
444
+ .sg\:px-8 {
445
+ padding-inline: var(--sg-spacing-8);
446
+ }
447
+ .sg\:py-2 {
448
+ padding-block: var(--sg-spacing-2);
449
+ }
450
+ .sg\:text-2xl {
451
+ font-size: var(--sg-text-2xl);
452
+ line-height: var(--tw-leading, var(--sg-text-2xl--line-height));
453
+ }
454
+ .sg\:text-3xl {
455
+ font-size: var(--sg-text-3xl);
456
+ line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
457
+ }
458
+ .sg\:text-4xl {
459
+ font-size: var(--sg-text-4xl);
460
+ line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
461
+ }
462
+ .sg\:text-base {
463
+ font-size: var(--sg-text-base);
464
+ line-height: var(--tw-leading, var(--sg-text-base--line-height));
465
+ }
466
+ .sg\:text-lg {
467
+ font-size: var(--sg-text-lg);
468
+ line-height: var(--tw-leading, var(--sg-text-lg--line-height));
469
+ }
470
+ .sg\:text-sm {
471
+ font-size: var(--sg-text-sm);
472
+ line-height: var(--tw-leading, var(--sg-text-sm--line-height));
473
+ }
474
+ .sg\:text-xl {
475
+ font-size: var(--sg-text-xl);
476
+ line-height: var(--tw-leading, var(--sg-text-xl--line-height));
477
+ }
478
+ .sg\:text-xs {
479
+ font-size: var(--sg-text-xs);
480
+ line-height: var(--tw-leading, var(--sg-text-xs--line-height));
481
+ }
482
+ .sg\:font-bold {
483
+ --tw-font-weight: var(--sg-font-weight-bold);
484
+ font-weight: var(--sg-font-weight-bold);
485
+ }
486
+ .sg\:font-extrabold {
487
+ --tw-font-weight: var(--sg-font-weight-extrabold);
488
+ font-weight: var(--sg-font-weight-extrabold);
489
+ }
490
+ .sg\:font-medium {
491
+ --tw-font-weight: var(--sg-font-weight-medium);
492
+ font-weight: var(--sg-font-weight-medium);
493
+ }
494
+ .sg\:font-normal {
495
+ --tw-font-weight: var(--sg-font-weight-normal);
496
+ font-weight: var(--sg-font-weight-normal);
497
+ }
498
+ .sg\:font-semibold {
499
+ --tw-font-weight: var(--sg-font-weight-semibold);
500
+ font-weight: var(--sg-font-weight-semibold);
501
+ }
502
+ .sg\:tracking-tight {
503
+ --tw-tracking: var(--sg-tracking-tight);
504
+ letter-spacing: var(--sg-tracking-tight);
505
+ }
506
+ .sg\:whitespace-nowrap {
507
+ white-space: nowrap;
508
+ }
509
+ .sg\:text-accent-foreground {
510
+ color: var(--sg-color-accent-foreground);
511
+ }
512
+ .sg\:text-destructive {
513
+ color: var(--sg-color-destructive);
514
+ }
515
+ .sg\:text-foreground {
516
+ color: var(--sg-color-foreground);
517
+ }
518
+ .sg\:text-green-foreground {
519
+ color: var(--sg-color-green-foreground);
520
+ }
521
+ .sg\:text-orange-foreground {
522
+ color: var(--sg-color-orange-foreground);
523
+ }
524
+ .sg\:text-primary {
525
+ color: var(--sg-color-primary);
526
+ }
527
+ .sg\:text-purple-foreground {
528
+ color: var(--sg-color-purple-foreground);
529
+ }
530
+ .sg\:text-red-foreground {
531
+ color: var(--sg-color-red-foreground);
532
+ }
533
+ .sg\:text-secondary-foreground {
534
+ color: var(--sg-color-secondary-foreground);
535
+ }
536
+ .sg\:underline-offset-4 {
537
+ text-underline-offset: 4px;
538
+ }
539
+ .sg\:shadow {
540
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
541
+ box-shadow:
542
+ var(--tw-inset-shadow),
543
+ var(--tw-inset-ring-shadow),
544
+ var(--tw-ring-offset-shadow),
545
+ var(--tw-ring-shadow),
546
+ var(--tw-shadow);
547
+ }
548
+ .sg\:shadow-sm {
549
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
550
+ box-shadow:
551
+ var(--tw-inset-shadow),
552
+ var(--tw-inset-ring-shadow),
553
+ var(--tw-ring-offset-shadow),
554
+ var(--tw-ring-shadow),
555
+ var(--tw-shadow);
556
+ }
557
+ .sg\:transition-colors {
558
+ transition-property:
559
+ color,
560
+ background-color,
561
+ border-color,
562
+ outline-color,
563
+ text-decoration-color,
564
+ fill,
565
+ stroke,
566
+ --tw-gradient-from,
567
+ --tw-gradient-via,
568
+ --tw-gradient-to;
569
+ transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
570
+ transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
571
+ }
572
+ .sg\:hover\:bg-accent {
573
+ &:hover {
574
+ @media (hover: hover) {
575
+ background-color: var(--sg-color-accent);
576
+ }
577
+ }
578
+ }
579
+ .sg\:hover\:bg-gray\/20 {
580
+ &:hover {
581
+ @media (hover: hover) {
582
+ background-color: color-mix(in oklab, var(--sg-color-gray) 20%, transparent);
583
+ }
584
+ }
585
+ }
586
+ .sg\:hover\:bg-green\/80 {
587
+ &:hover {
588
+ @media (hover: hover) {
589
+ background-color: color-mix(in oklab, var(--sg-color-green) 80%, transparent);
590
+ }
591
+ }
592
+ }
593
+ .sg\:hover\:bg-orange\/80 {
594
+ &:hover {
595
+ @media (hover: hover) {
596
+ background-color: color-mix(in oklab, var(--sg-color-orange) 80%, transparent);
597
+ }
598
+ }
599
+ }
600
+ .sg\:hover\:bg-orange\/90 {
601
+ &:hover {
602
+ @media (hover: hover) {
603
+ background-color: color-mix(in oklab, var(--sg-color-orange) 90%, transparent);
604
+ }
605
+ }
606
+ }
607
+ .sg\:hover\:bg-purple\/80 {
608
+ &:hover {
609
+ @media (hover: hover) {
610
+ background-color: color-mix(in oklab, var(--sg-color-purple) 80%, transparent);
611
+ }
612
+ }
613
+ }
614
+ .sg\:hover\:bg-purple\/90 {
615
+ &:hover {
616
+ @media (hover: hover) {
617
+ background-color: color-mix(in oklab, var(--sg-color-purple) 90%, transparent);
618
+ }
619
+ }
620
+ }
621
+ .sg\:hover\:bg-red\/90 {
622
+ &:hover {
623
+ @media (hover: hover) {
624
+ background-color: color-mix(in oklab, var(--sg-color-red) 90%, transparent);
625
+ }
626
+ }
627
+ }
628
+ .sg\:hover\:text-accent-foreground {
629
+ &:hover {
630
+ @media (hover: hover) {
631
+ color: var(--sg-color-accent-foreground);
632
+ }
633
+ }
634
+ }
635
+ .sg\:hover\:underline {
636
+ &:hover {
637
+ @media (hover: hover) {
638
+ text-decoration-line: underline;
639
+ }
640
+ }
641
+ }
642
+ .sg\:focus\:ring-2 {
643
+ &:focus {
644
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
645
+ box-shadow:
646
+ var(--tw-inset-shadow),
647
+ var(--tw-inset-ring-shadow),
648
+ var(--tw-ring-offset-shadow),
649
+ var(--tw-ring-shadow),
650
+ var(--tw-shadow);
651
+ }
652
+ }
653
+ .sg\:focus\:ring-ring {
654
+ &:focus {
655
+ --tw-ring-color: var(--sg-color-ring);
656
+ }
657
+ }
658
+ .sg\:focus\:ring-offset-2 {
659
+ &:focus {
660
+ --tw-ring-offset-width: 2px;
661
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
662
+ }
663
+ }
664
+ .sg\:focus\:outline-hidden {
665
+ &:focus {
666
+ outline-style: none;
667
+ @media (forced-colors: active) {
668
+ outline: 2px solid transparent;
669
+ outline-offset: 2px;
670
+ }
671
+ }
672
+ }
673
+ .sg\:focus-visible\:ring-2 {
674
+ &:focus-visible {
675
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
676
+ box-shadow:
677
+ var(--tw-inset-shadow),
678
+ var(--tw-inset-ring-shadow),
679
+ var(--tw-ring-offset-shadow),
680
+ var(--tw-ring-shadow),
681
+ var(--tw-shadow);
682
+ }
683
+ }
684
+ .sg\:focus-visible\:ring-ring {
685
+ &:focus-visible {
686
+ --tw-ring-color: var(--sg-color-ring);
687
+ }
688
+ }
689
+ .sg\:focus-visible\:outline-hidden {
690
+ &:focus-visible {
691
+ outline-style: none;
692
+ @media (forced-colors: active) {
693
+ outline: 2px solid transparent;
694
+ outline-offset: 2px;
695
+ }
696
+ }
697
+ }
698
+ .sg\:disabled\:pointer-events-none {
699
+ &:disabled {
700
+ pointer-events: none;
701
+ }
702
+ }
703
+ .sg\:disabled\:opacity-50 {
704
+ &:disabled {
705
+ opacity: 50%;
706
+ }
707
+ }
708
+ .sg\:md\:grid-cols-2 {
709
+ @media (width >= 48rem) {
710
+ grid-template-columns: repeat(2, minmax(0, 1fr));
711
+ }
712
+ }
713
+ .sg\:md\:grid-cols-3 {
714
+ @media (width >= 48rem) {
715
+ grid-template-columns: repeat(3, minmax(0, 1fr));
716
+ }
717
+ }
718
+ .sg\:md\:grid-cols-4 {
719
+ @media (width >= 48rem) {
720
+ grid-template-columns: repeat(4, minmax(0, 1fr));
721
+ }
722
+ }
723
+ .sg\:lg\:text-5xl {
724
+ @media (width >= 64rem) {
725
+ font-size: var(--sg-text-5xl);
726
+ line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
727
+ }
728
+ }
729
+ .sg\:\[\&_svg\]\:pointer-events-none {
730
+ & svg {
731
+ pointer-events: none;
732
+ }
733
+ }
734
+ .sg\:\[\&_svg\]\:size-4 {
735
+ & svg {
736
+ width: var(--sg-spacing-4);
737
+ height: var(--sg-spacing-4);
738
+ }
739
+ }
740
+ .sg\:\[\&_svg\]\:shrink-0 {
741
+ & svg {
742
+ flex-shrink: 0;
743
+ }
744
+ }
560
745
  }
561
- .sg-shadow-sm {
562
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
563
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
564
- box-shadow:
565
- var(--tw-ring-offset-shadow, 0 0 #0000),
566
- var(--tw-ring-shadow, 0 0 #0000),
567
- var(--tw-shadow);
746
+ @layer base {
747
+ *,
748
+ ::after,
749
+ ::before,
750
+ ::backdrop,
751
+ ::file-selector-button {
752
+ border-color: var(--color-gray-200, currentColor);
753
+ }
568
754
  }
569
- .sg-transition-colors {
570
- transition-property:
571
- color,
572
- background-color,
573
- border-color,
574
- text-decoration-color,
575
- fill,
576
- stroke;
577
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
578
- transition-duration: 150ms;
755
+ @layer base {
756
+ :root {
757
+ --sg-black: 0 0% 15%;
758
+ --sg-white: 30 20% 98%;
759
+ --sg-gray: 30 10% 70%;
760
+ --sg-orange: 33 75% 54%;
761
+ --sg-orange-foreground: 0 0% 20%;
762
+ --sg-purple: 250 45% 58%;
763
+ --sg-purple-foreground: 250 50% 98%;
764
+ --sg-red: 0 65% 51%;
765
+ --sg-red-foreground: 0 0% 98%;
766
+ --sg-green: 120 45% 45%;
767
+ --sg-green-foreground: 120 50% 98%;
768
+ --sg-primary: var(--sg-orange);
769
+ --sg-background: var(--sg-white);
770
+ --sg-foreground: var(--sg-black);
771
+ --sg-border: var(--sg-primary);
772
+ --sg-ring: 210 65% 55%;
773
+ --sg-radius: 0.5rem;
774
+ --muted: 210 40% 96.1%;
775
+ --muted-foreground: 215.4 16.3% 46.9%;
776
+ --popover: 0 0% 100%;
777
+ --popover-foreground: 222.2 47.4% 11.2%;
778
+ --input: 214.3 31.8% 91.4%;
779
+ --card: 0 0% 100%;
780
+ --card-foreground: 222.2 47.4% 11.2%;
781
+ --primary: 222.2 47.4% 11.2%;
782
+ --primary-foreground: 210 40% 98%;
783
+ --secondary: 210 40% 96.1%;
784
+ --secondary-foreground: 222.2 47.4% 11.2%;
785
+ --accent: 210 40% 96.1%;
786
+ --accent-foreground: 222.2 47.4% 11.2%;
787
+ --destructive: 0 100% 50%;
788
+ --destructive-foreground: 210 40% 98%;
789
+ --test1: 1px;
790
+ --sg-spacing-1: 0.25rem;
791
+ --sg-spacing-2: 0.5rem;
792
+ --sg-spacing-3: 0.75rem;
793
+ --sg-spacing-4: 1rem;
794
+ --sg-spacing-6: 1.5rem;
795
+ --sg-spacing-8: 2rem;
796
+ --sg-spacing-12: 3rem;
797
+ --sg-spacing-16: 4rem;
798
+ --sg-spacing-20: 5rem;
799
+ --sg-spacing-24: 6rem;
800
+ --sg-spacing-28: 7rem;
801
+ --sg-spacing-32: 8rem;
802
+ --sg-spacing-36: 9rem;
803
+ --sg-spacing-40: 10rem;
804
+ body {
805
+ background-color: hsl(var(--sg-background));
806
+ }
807
+ }
808
+ .dark {
809
+ --background: 224 71% 4%;
810
+ --foreground: 213 31% 91%;
811
+ --muted: 223 47% 11%;
812
+ --muted-foreground: 215.4 16.3% 56.9%;
813
+ --accent: 216 34% 17%;
814
+ --accent-foreground: 210 40% 98%;
815
+ --popover: 224 71% 4%;
816
+ --popover-foreground: 215 20.2% 65.1%;
817
+ --border: 216 34% 17%;
818
+ --input: 216 34% 17%;
819
+ --card: 224 71% 4%;
820
+ --card-foreground: 213 31% 91%;
821
+ --primary: 210 40% 98%;
822
+ --primary-foreground: 222.2 47.4% 1.2%;
823
+ --secondary: 222.2 47.4% 11.2%;
824
+ --secondary-foreground: 210 40% 98%;
825
+ --destructive: 0 63% 31%;
826
+ --destructive-foreground: 210 40% 98%;
827
+ --ring: 216 34% 17%;
828
+ }
579
829
  }
580
830
  @keyframes enter {
581
831
  from {
@@ -589,100 +839,46 @@ video {
589
839
  transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
590
840
  }
591
841
  }
592
- .hover\:sg-bg-accent:hover {
593
- background-color: hsl(var(--accent));
594
- }
595
- .hover\:sg-bg-gray\/20:hover {
596
- background-color: hsl(var(--sg-gray) / 0.2);
597
- }
598
- .hover\:sg-bg-green\/80:hover {
599
- background-color: hsl(var(--sg-green) / 0.8);
600
- }
601
- .hover\:sg-bg-orange\/80:hover {
602
- background-color: hsl(var(--sg-orange) / 0.8);
603
- }
604
- .hover\:sg-bg-orange\/90:hover {
605
- background-color: hsl(var(--sg-orange) / 0.9);
606
- }
607
- .hover\:sg-bg-purple\/80:hover {
608
- background-color: hsl(var(--sg-purple) / 0.8);
609
- }
610
- .hover\:sg-bg-purple\/90:hover {
611
- background-color: hsl(var(--sg-purple) / 0.9);
612
- }
613
- .hover\:sg-bg-red\/90:hover {
614
- background-color: hsl(var(--sg-red) / 0.9);
615
- }
616
- .hover\:sg-text-accent-foreground:hover {
617
- color: hsl(var(--accent-foreground));
618
- }
619
- .hover\:sg-underline:hover {
620
- text-decoration-line: underline;
621
- }
622
- .focus\:sg-outline-none:focus {
623
- outline: 2px solid transparent;
624
- outline-offset: 2px;
625
- }
626
- .focus\:sg-ring-2:focus {
627
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
628
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
629
- box-shadow:
630
- var(--tw-ring-offset-shadow),
631
- var(--tw-ring-shadow),
632
- var(--tw-shadow, 0 0 #0000);
633
- }
634
- .focus\:sg-ring-ring:focus {
635
- --tw-ring-color: hsl(var(--sg-ring));
636
- }
637
- .focus\:sg-ring-offset-2:focus {
638
- --tw-ring-offset-width: 2px;
639
- }
640
- .focus-visible\:sg-outline-none:focus-visible {
641
- outline: 2px solid transparent;
642
- outline-offset: 2px;
643
- }
644
- .focus-visible\:sg-ring-2:focus-visible {
645
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
646
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
647
- box-shadow:
648
- var(--tw-ring-offset-shadow),
649
- var(--tw-ring-shadow),
650
- var(--tw-shadow, 0 0 #0000);
651
- }
652
- .focus-visible\:sg-ring-ring:focus-visible {
653
- --tw-ring-color: hsl(var(--sg-ring));
654
- }
655
- .disabled\:sg-pointer-events-none:disabled {
656
- pointer-events: none;
657
- }
658
- .disabled\:sg-opacity-50:disabled {
659
- opacity: 0.5;
660
- }
661
- @media (min-width: 768px) {
662
- .md\:sg-grid-cols-2 {
663
- grid-template-columns: repeat(2, minmax(0, 1fr));
664
- }
665
- .md\:sg-grid-cols-3 {
666
- grid-template-columns: repeat(3, minmax(0, 1fr));
667
- }
668
- .md\:sg-grid-cols-4 {
669
- grid-template-columns: repeat(4, minmax(0, 1fr));
842
+ @keyframes spin {
843
+ to {
844
+ transform: rotate(360deg);
670
845
  }
671
846
  }
672
- @media (min-width: 1024px) {
673
- .lg\:sg-text-5xl {
674
- font-size: 3rem;
675
- line-height: 1;
847
+ @keyframes ping {
848
+ 75%, 100% {
849
+ transform: scale(2);
850
+ opacity: 0;
676
851
  }
677
852
  }
678
- .\[\&_svg\]\:sg-pointer-events-none svg {
679
- pointer-events: none;
680
- }
681
- .\[\&_svg\]\:sg-size-4 svg {
682
- width: var(--sg-spacing-4);
683
- height: var(--sg-spacing-4);
853
+ @keyframes pulse {
854
+ 50% {
855
+ opacity: 0.5;
856
+ }
684
857
  }
685
- .\[\&_svg\]\:sg-shrink-0 svg {
686
- flex-shrink: 0;
858
+ @keyframes bounce {
859
+ 0%, 100% {
860
+ transform: translateY(-25%);
861
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
862
+ }
863
+ 50% {
864
+ transform: none;
865
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
866
+ }
687
867
  }
868
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
869
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
870
+ @property --tw-tracking { syntax: "*"; inherits: false; }
871
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
872
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
873
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
874
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
875
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
876
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
877
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
878
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
879
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
880
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
881
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
882
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
883
+ /*! tailwindcss v4.0.2 | MIT License | https://tailwindcss.com */
688
884
  /*# sourceMappingURL=main.css.map */