@abumble/design-system 0.0.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.
@@ -0,0 +1,1032 @@
1
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
+ "Courier New", monospace;
10
+ --color-blue-600: oklch(54.6% 0.245 262.881);
11
+ --color-blue-800: oklch(42.4% 0.199 265.638);
12
+ --color-blue-900: oklch(37.9% 0.146 265.522);
13
+ --color-gray-700: oklch(37.3% 0.034 259.733);
14
+ --color-gray-900: oklch(21% 0.034 264.665);
15
+ --color-gray-950: oklch(13% 0.028 261.692);
16
+ --color-stone-300: oklch(86.9% 0.005 56.366);
17
+ --color-white: #fff;
18
+ --spacing: 0.25rem;
19
+ --breakpoint-xl: 80rem;
20
+ --text-xs: 0.75rem;
21
+ --text-xs--line-height: calc(1 / 0.75);
22
+ --text-sm: 0.875rem;
23
+ --text-sm--line-height: calc(1.25 / 0.875);
24
+ --font-weight-medium: 500;
25
+ --font-weight-semibold: 600;
26
+ --leading-relaxed: 1.625;
27
+ --default-transition-duration: 150ms;
28
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
+ --default-font-family: var(--font-sans);
30
+ --default-mono-font-family: var(--font-mono);
31
+ }
32
+ }
33
+ @layer base {
34
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
35
+ box-sizing: border-box;
36
+ margin: 0;
37
+ padding: 0;
38
+ border: 0 solid;
39
+ }
40
+ html, :host {
41
+ line-height: 1.5;
42
+ -webkit-text-size-adjust: 100%;
43
+ -moz-tab-size: 4;
44
+ -o-tab-size: 4;
45
+ tab-size: 4;
46
+ 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");
47
+ font-feature-settings: var(--default-font-feature-settings, normal);
48
+ font-variation-settings: var(--default-font-variation-settings, normal);
49
+ -webkit-tap-highlight-color: transparent;
50
+ }
51
+ hr {
52
+ height: 0;
53
+ color: inherit;
54
+ border-top-width: 1px;
55
+ }
56
+ abbr:where([title]) {
57
+ -webkit-text-decoration: underline dotted;
58
+ text-decoration: underline dotted;
59
+ }
60
+ h1, h2, h3, h4, h5, h6 {
61
+ font-size: inherit;
62
+ font-weight: inherit;
63
+ }
64
+ a {
65
+ color: inherit;
66
+ -webkit-text-decoration: inherit;
67
+ text-decoration: inherit;
68
+ }
69
+ b, strong {
70
+ font-weight: bolder;
71
+ }
72
+ code, kbd, samp, pre {
73
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
74
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
75
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
76
+ font-size: 1em;
77
+ }
78
+ small {
79
+ font-size: 80%;
80
+ }
81
+ sub, sup {
82
+ font-size: 75%;
83
+ line-height: 0;
84
+ position: relative;
85
+ vertical-align: baseline;
86
+ }
87
+ sub {
88
+ bottom: -0.25em;
89
+ }
90
+ sup {
91
+ top: -0.5em;
92
+ }
93
+ table {
94
+ text-indent: 0;
95
+ border-color: inherit;
96
+ border-collapse: collapse;
97
+ }
98
+ :-moz-focusring {
99
+ outline: auto;
100
+ }
101
+ progress {
102
+ vertical-align: baseline;
103
+ }
104
+ summary {
105
+ display: list-item;
106
+ }
107
+ ol, ul, menu {
108
+ list-style: none;
109
+ }
110
+ img, svg, video, canvas, audio, iframe, embed, object {
111
+ display: block;
112
+ vertical-align: middle;
113
+ }
114
+ img, video {
115
+ max-width: 100%;
116
+ height: auto;
117
+ }
118
+ button, input, select, optgroup, textarea, ::file-selector-button {
119
+ font: inherit;
120
+ font-feature-settings: inherit;
121
+ font-variation-settings: inherit;
122
+ letter-spacing: inherit;
123
+ color: inherit;
124
+ border-radius: 0;
125
+ background-color: transparent;
126
+ opacity: 1;
127
+ }
128
+ :where(select:is([multiple], [size])) optgroup {
129
+ font-weight: bolder;
130
+ }
131
+ :where(select:is([multiple], [size])) optgroup option {
132
+ padding-inline-start: 20px;
133
+ }
134
+ ::file-selector-button {
135
+ margin-inline-end: 4px;
136
+ }
137
+ ::-moz-placeholder {
138
+ opacity: 1;
139
+ }
140
+ ::placeholder {
141
+ opacity: 1;
142
+ }
143
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
144
+ ::-moz-placeholder {
145
+ color: currentcolor;
146
+ @supports (color: color-mix(in lab, red, red)) {
147
+ color: color-mix(in oklab, currentcolor 50%, transparent);
148
+ }
149
+ }
150
+ ::placeholder {
151
+ color: currentcolor;
152
+ @supports (color: color-mix(in lab, red, red)) {
153
+ color: color-mix(in oklab, currentcolor 50%, transparent);
154
+ }
155
+ }
156
+ }
157
+ textarea {
158
+ resize: vertical;
159
+ }
160
+ ::-webkit-search-decoration {
161
+ -webkit-appearance: none;
162
+ }
163
+ ::-webkit-date-and-time-value {
164
+ min-height: 1lh;
165
+ text-align: inherit;
166
+ }
167
+ ::-webkit-datetime-edit {
168
+ display: inline-flex;
169
+ }
170
+ ::-webkit-datetime-edit-fields-wrapper {
171
+ padding: 0;
172
+ }
173
+ ::-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 {
174
+ padding-block: 0;
175
+ }
176
+ ::-webkit-calendar-picker-indicator {
177
+ line-height: 1;
178
+ }
179
+ :-moz-ui-invalid {
180
+ box-shadow: none;
181
+ }
182
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
183
+ -webkit-appearance: button;
184
+ -moz-appearance: button;
185
+ appearance: button;
186
+ }
187
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
188
+ height: auto;
189
+ }
190
+ [hidden]:where(:not([hidden="until-found"])) {
191
+ display: none !important;
192
+ }
193
+ }
194
+ @layer utilities {
195
+ .static {
196
+ position: static;
197
+ }
198
+ .flex {
199
+ display: flex;
200
+ }
201
+ .inline-block {
202
+ display: inline-block;
203
+ }
204
+ .inline-flex {
205
+ display: inline-flex;
206
+ }
207
+ .size-8 {
208
+ width: calc(var(--spacing) * 8);
209
+ height: calc(var(--spacing) * 8);
210
+ }
211
+ .size-9 {
212
+ width: calc(var(--spacing) * 9);
213
+ height: calc(var(--spacing) * 9);
214
+ }
215
+ .size-10 {
216
+ width: calc(var(--spacing) * 10);
217
+ height: calc(var(--spacing) * 10);
218
+ }
219
+ .h-8 {
220
+ height: calc(var(--spacing) * 8);
221
+ }
222
+ .h-9 {
223
+ height: calc(var(--spacing) * 9);
224
+ }
225
+ .h-10 {
226
+ height: calc(var(--spacing) * 10);
227
+ }
228
+ .shrink-0 {
229
+ flex-shrink: 0;
230
+ }
231
+ .transform {
232
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
233
+ }
234
+ .items-center {
235
+ align-items: center;
236
+ }
237
+ .justify-center {
238
+ justify-content: center;
239
+ }
240
+ .gap-1\.5 {
241
+ gap: calc(var(--spacing) * 1.5);
242
+ }
243
+ .gap-2 {
244
+ gap: calc(var(--spacing) * 2);
245
+ }
246
+ .rounded {
247
+ border-radius: 0.25rem;
248
+ }
249
+ .border {
250
+ border-style: var(--tw-border-style);
251
+ border-width: 1px;
252
+ }
253
+ .bg-background {
254
+ background-color: var(--background);
255
+ }
256
+ .bg-destructive {
257
+ background-color: var(--destructive);
258
+ }
259
+ .bg-primary {
260
+ background-color: var(--primary);
261
+ }
262
+ .bg-secondary {
263
+ background-color: var(--secondary);
264
+ }
265
+ .px-3 {
266
+ padding-inline: calc(var(--spacing) * 3);
267
+ }
268
+ .px-4 {
269
+ padding-inline: calc(var(--spacing) * 4);
270
+ }
271
+ .px-6 {
272
+ padding-inline: calc(var(--spacing) * 6);
273
+ }
274
+ .py-2 {
275
+ padding-block: calc(var(--spacing) * 2);
276
+ }
277
+ .text-sm {
278
+ font-size: var(--text-sm);
279
+ line-height: var(--tw-leading, var(--text-sm--line-height));
280
+ }
281
+ .font-medium {
282
+ --tw-font-weight: var(--font-weight-medium);
283
+ font-weight: var(--font-weight-medium);
284
+ }
285
+ .whitespace-nowrap {
286
+ white-space: nowrap;
287
+ }
288
+ .text-primary {
289
+ color: var(--primary);
290
+ }
291
+ .text-primary-foreground {
292
+ color: var(--primary-foreground);
293
+ }
294
+ .text-secondary-foreground {
295
+ color: var(--secondary-foreground);
296
+ }
297
+ .text-white {
298
+ color: var(--color-white);
299
+ }
300
+ .underline-offset-4 {
301
+ text-underline-offset: 4px;
302
+ }
303
+ .shadow-xs {
304
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
305
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
306
+ }
307
+ .outline {
308
+ outline-style: var(--tw-outline-style);
309
+ outline-width: 1px;
310
+ }
311
+ .transition-all {
312
+ transition-property: all;
313
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
314
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
315
+ }
316
+ .outline-none {
317
+ --tw-outline-style: none;
318
+ outline-style: none;
319
+ }
320
+ .hover\:bg-accent {
321
+ &:hover {
322
+ @media (hover: hover) {
323
+ background-color: var(--accent);
324
+ }
325
+ }
326
+ }
327
+ .hover\:bg-destructive\/90 {
328
+ &:hover {
329
+ @media (hover: hover) {
330
+ background-color: var(--destructive);
331
+ @supports (color: color-mix(in lab, red, red)) {
332
+ background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
333
+ }
334
+ }
335
+ }
336
+ }
337
+ .hover\:bg-primary\/90 {
338
+ &:hover {
339
+ @media (hover: hover) {
340
+ background-color: var(--primary);
341
+ @supports (color: color-mix(in lab, red, red)) {
342
+ background-color: color-mix(in oklab, var(--primary) 90%, transparent);
343
+ }
344
+ }
345
+ }
346
+ }
347
+ .hover\:bg-secondary\/80 {
348
+ &:hover {
349
+ @media (hover: hover) {
350
+ background-color: var(--secondary);
351
+ @supports (color: color-mix(in lab, red, red)) {
352
+ background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
353
+ }
354
+ }
355
+ }
356
+ }
357
+ .hover\:text-accent-foreground {
358
+ &:hover {
359
+ @media (hover: hover) {
360
+ color: var(--accent-foreground);
361
+ }
362
+ }
363
+ }
364
+ .hover\:underline {
365
+ &:hover {
366
+ @media (hover: hover) {
367
+ text-decoration-line: underline;
368
+ }
369
+ }
370
+ }
371
+ .focus-visible\:border-ring {
372
+ &:focus-visible {
373
+ border-color: var(--ring);
374
+ }
375
+ }
376
+ .focus-visible\:ring-\[3px\] {
377
+ &:focus-visible {
378
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
379
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
380
+ }
381
+ }
382
+ .focus-visible\:ring-destructive\/20 {
383
+ &:focus-visible {
384
+ --tw-ring-color: var(--destructive);
385
+ @supports (color: color-mix(in lab, red, red)) {
386
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
387
+ }
388
+ }
389
+ }
390
+ .focus-visible\:ring-ring\/50 {
391
+ &:focus-visible {
392
+ --tw-ring-color: var(--ring);
393
+ @supports (color: color-mix(in lab, red, red)) {
394
+ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
395
+ }
396
+ }
397
+ }
398
+ .disabled\:pointer-events-none {
399
+ &:disabled {
400
+ pointer-events: none;
401
+ }
402
+ }
403
+ .disabled\:opacity-50 {
404
+ &:disabled {
405
+ opacity: 50%;
406
+ }
407
+ }
408
+ .has-\[\>svg\]\:px-2\.5 {
409
+ &:has(>svg) {
410
+ padding-inline: calc(var(--spacing) * 2.5);
411
+ }
412
+ }
413
+ .has-\[\>svg\]\:px-3 {
414
+ &:has(>svg) {
415
+ padding-inline: calc(var(--spacing) * 3);
416
+ }
417
+ }
418
+ .has-\[\>svg\]\:px-4 {
419
+ &:has(>svg) {
420
+ padding-inline: calc(var(--spacing) * 4);
421
+ }
422
+ }
423
+ .aria-invalid\:border-destructive {
424
+ &[aria-invalid="true"] {
425
+ border-color: var(--destructive);
426
+ }
427
+ }
428
+ .aria-invalid\:ring-destructive\/20 {
429
+ &[aria-invalid="true"] {
430
+ --tw-ring-color: var(--destructive);
431
+ @supports (color: color-mix(in lab, red, red)) {
432
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
433
+ }
434
+ }
435
+ }
436
+ .dark\:border-input {
437
+ &:is(.dark *) {
438
+ border-color: var(--input);
439
+ }
440
+ }
441
+ .dark\:bg-destructive\/60 {
442
+ &:is(.dark *) {
443
+ background-color: var(--destructive);
444
+ @supports (color: color-mix(in lab, red, red)) {
445
+ background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
446
+ }
447
+ }
448
+ }
449
+ .dark\:bg-input\/30 {
450
+ &:is(.dark *) {
451
+ background-color: var(--input);
452
+ @supports (color: color-mix(in lab, red, red)) {
453
+ background-color: color-mix(in oklab, var(--input) 30%, transparent);
454
+ }
455
+ }
456
+ }
457
+ .dark\:hover\:bg-accent\/50 {
458
+ &:is(.dark *) {
459
+ &:hover {
460
+ @media (hover: hover) {
461
+ background-color: var(--accent);
462
+ @supports (color: color-mix(in lab, red, red)) {
463
+ background-color: color-mix(in oklab, var(--accent) 50%, transparent);
464
+ }
465
+ }
466
+ }
467
+ }
468
+ }
469
+ .dark\:hover\:bg-input\/50 {
470
+ &:is(.dark *) {
471
+ &:hover {
472
+ @media (hover: hover) {
473
+ background-color: var(--input);
474
+ @supports (color: color-mix(in lab, red, red)) {
475
+ background-color: color-mix(in oklab, var(--input) 50%, transparent);
476
+ }
477
+ }
478
+ }
479
+ }
480
+ }
481
+ .dark\:focus-visible\:ring-destructive\/40 {
482
+ &:is(.dark *) {
483
+ &:focus-visible {
484
+ --tw-ring-color: var(--destructive);
485
+ @supports (color: color-mix(in lab, red, red)) {
486
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
487
+ }
488
+ }
489
+ }
490
+ }
491
+ .dark\:aria-invalid\:ring-destructive\/40 {
492
+ &:is(.dark *) {
493
+ &[aria-invalid="true"] {
494
+ --tw-ring-color: var(--destructive);
495
+ @supports (color: color-mix(in lab, red, red)) {
496
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
497
+ }
498
+ }
499
+ }
500
+ }
501
+ .\[\&_svg\]\:pointer-events-none {
502
+ & svg {
503
+ pointer-events: none;
504
+ }
505
+ }
506
+ .\[\&_svg\]\:shrink-0 {
507
+ & svg {
508
+ flex-shrink: 0;
509
+ }
510
+ }
511
+ .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
512
+ & svg:not([class*='size-']) {
513
+ width: calc(var(--spacing) * 4);
514
+ height: calc(var(--spacing) * 4);
515
+ }
516
+ }
517
+ }
518
+ @property --tw-animation-delay {
519
+ syntax: "*";
520
+ inherits: false;
521
+ initial-value: 0s;
522
+ }
523
+ @property --tw-animation-direction {
524
+ syntax: "*";
525
+ inherits: false;
526
+ initial-value: normal;
527
+ }
528
+ @property --tw-animation-duration {
529
+ syntax: "*";
530
+ inherits: false;
531
+ }
532
+ @property --tw-animation-fill-mode {
533
+ syntax: "*";
534
+ inherits: false;
535
+ initial-value: none;
536
+ }
537
+ @property --tw-animation-iteration-count {
538
+ syntax: "*";
539
+ inherits: false;
540
+ initial-value: 1;
541
+ }
542
+ @property --tw-enter-blur {
543
+ syntax: "*";
544
+ inherits: false;
545
+ initial-value: 0;
546
+ }
547
+ @property --tw-enter-opacity {
548
+ syntax: "*";
549
+ inherits: false;
550
+ initial-value: 1;
551
+ }
552
+ @property --tw-enter-rotate {
553
+ syntax: "*";
554
+ inherits: false;
555
+ initial-value: 0;
556
+ }
557
+ @property --tw-enter-scale {
558
+ syntax: "*";
559
+ inherits: false;
560
+ initial-value: 1;
561
+ }
562
+ @property --tw-enter-translate-x {
563
+ syntax: "*";
564
+ inherits: false;
565
+ initial-value: 0;
566
+ }
567
+ @property --tw-enter-translate-y {
568
+ syntax: "*";
569
+ inherits: false;
570
+ initial-value: 0;
571
+ }
572
+ @property --tw-exit-blur {
573
+ syntax: "*";
574
+ inherits: false;
575
+ initial-value: 0;
576
+ }
577
+ @property --tw-exit-opacity {
578
+ syntax: "*";
579
+ inherits: false;
580
+ initial-value: 1;
581
+ }
582
+ @property --tw-exit-rotate {
583
+ syntax: "*";
584
+ inherits: false;
585
+ initial-value: 0;
586
+ }
587
+ @property --tw-exit-scale {
588
+ syntax: "*";
589
+ inherits: false;
590
+ initial-value: 1;
591
+ }
592
+ @property --tw-exit-translate-x {
593
+ syntax: "*";
594
+ inherits: false;
595
+ initial-value: 0;
596
+ }
597
+ @property --tw-exit-translate-y {
598
+ syntax: "*";
599
+ inherits: false;
600
+ initial-value: 0;
601
+ }
602
+ @layer base {
603
+ button:not(:disabled),
604
+ [role="button"]:not(:disabled) {
605
+ cursor: pointer;
606
+ }
607
+ }
608
+ @keyframes rumble {
609
+ 0% {
610
+ transform: translateY(0) rotate(0deg);
611
+ }
612
+ 2.5% {
613
+ transform: translateY(-1px) rotate(-0.25deg);
614
+ }
615
+ 5% {
616
+ transform: translateY(0) rotate(0deg);
617
+ }
618
+ 7.5% {
619
+ transform: translateY(1px) rotate(0.25deg);
620
+ }
621
+ 10% {
622
+ transform: translateY(0) rotate(0deg);
623
+ }
624
+ }
625
+ @keyframes slide-right-return {
626
+ 0% {
627
+ transform: translateX(-50%) scaleX(1);
628
+ }
629
+ 50% {
630
+ transform: translateX(50%);
631
+ }
632
+ 55% {
633
+ transform: translateX(50%) scaleX(-1);
634
+ }
635
+ 95% {
636
+ transform: translateX(-50%) scaleX(-1);
637
+ }
638
+ 100% {
639
+ transform: translateX(-50%) scaleX(1);
640
+ }
641
+ }
642
+ .animate-rumble {
643
+ animation: rumble 2s ease-in-out infinite alternate;
644
+ display: block;
645
+ backface-visibility: hidden;
646
+ perspective: 1000px;
647
+ }
648
+ .animate-slide-right-return {
649
+ animation: slide-right-return 15s linear infinite;
650
+ display: block;
651
+ }
652
+ .card {
653
+ display: flex;
654
+ flex-direction: column;
655
+ gap: calc(var(--spacing) * 6);
656
+ border-radius: 0.25rem;
657
+ border-style: var(--tw-border-style);
658
+ border-width: 1px;
659
+ border-color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 80%, transparent);
660
+ @supports (color: color-mix(in lab, red, red)) {
661
+ border-color: color-mix(in oklab, var(--color-stone-300) 80%, transparent);
662
+ }
663
+ background-color: var(--card);
664
+ padding: calc(var(--spacing) * 6);
665
+ color: var(--card-foreground);
666
+ }
667
+ .image-background {
668
+ margin-bottom: calc(var(--spacing) * -10);
669
+ height: calc(var(--spacing) * 38);
670
+ background-color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 20%, transparent);
671
+ @supports (color: color-mix(in lab, red, red)) {
672
+ background-color: color-mix(in oklab, var(--color-stone-300) 20%, transparent);
673
+ }
674
+ background-size: cover;
675
+ background-position: center;
676
+ background-blend-mode: overlay;
677
+ @media (width >= 40rem) {
678
+ margin-bottom: calc(var(--spacing) * -16);
679
+ }
680
+ background-image: url('/src//assets//background-image.svg');
681
+ z-index: -1;
682
+ }
683
+ .center-page {
684
+ margin-inline: auto;
685
+ width: 100%;
686
+ max-width: var(--breakpoint-xl);
687
+ }
688
+ .sidebar-text {
689
+ display: flex;
690
+ height: calc(var(--spacing) * 8);
691
+ flex-shrink: 0;
692
+ align-items: center;
693
+ border-radius: 0.25rem;
694
+ padding-inline: calc(var(--spacing) * 2);
695
+ font-size: var(--text-xs);
696
+ line-height: var(--tw-leading, var(--text-xs--line-height));
697
+ --tw-font-weight: var(--font-weight-medium);
698
+ font-weight: var(--font-weight-medium);
699
+ color: var(--sidebar-foreground);
700
+ @supports (color: color-mix(in lab, red, red)) {
701
+ color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
702
+ }
703
+ --tw-ring-color: var(--sidebar-ring);
704
+ }
705
+ .code {
706
+ border-radius: 0.25rem;
707
+ border-style: var(--tw-border-style);
708
+ border-width: 1px;
709
+ border-color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 80%, transparent);
710
+ @supports (color: color-mix(in lab, red, red)) {
711
+ border-color: color-mix(in oklab, var(--color-stone-300) 80%, transparent);
712
+ }
713
+ background-color: var(--background);
714
+ padding-inline: calc(var(--spacing) * 1);
715
+ font-size: var(--text-sm);
716
+ line-height: var(--tw-leading, var(--text-sm--line-height));
717
+ }
718
+ .sidebar {
719
+ color: var(--sidebar-foreground);
720
+ }
721
+ .header {
722
+ position: fixed;
723
+ top: calc(var(--spacing) * 0);
724
+ z-index: 50;
725
+ display: flex;
726
+ width: 100%;
727
+ align-items: center;
728
+ justify-content: space-between;
729
+ border-style: var(--tw-border-style);
730
+ border-width: 1px;
731
+ border-color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 80%, transparent);
732
+ @supports (color: color-mix(in lab, red, red)) {
733
+ border-color: color-mix(in oklab, var(--color-stone-300) 80%, transparent);
734
+ }
735
+ background-color: var(--card);
736
+ padding-inline: calc(var(--spacing) * 3);
737
+ color: var(--card-foreground);
738
+ }
739
+ .sub-heading {
740
+ margin-top: calc(var(--spacing) * 8);
741
+ margin-bottom: calc(var(--spacing) * 1);
742
+ --tw-font-weight: var(--font-weight-semibold);
743
+ font-weight: var(--font-weight-semibold);
744
+ color: var(--color-gray-900);
745
+ }
746
+ .p-text {
747
+ --tw-leading: var(--leading-relaxed);
748
+ line-height: var(--leading-relaxed);
749
+ color: var(--color-gray-900);
750
+ }
751
+ .text-link {
752
+ color: var(--color-blue-600);
753
+ &:visited {
754
+ color: var(--color-blue-900);
755
+ }
756
+ &:hover {
757
+ @media (hover: hover) {
758
+ color: var(--color-blue-800);
759
+ }
760
+ }
761
+ }
762
+ .nav-link {
763
+ position: relative;
764
+ display: block;
765
+ padding-inline: calc(var(--spacing) * 3);
766
+ padding-block: calc(var(--spacing) * 2);
767
+ color: var(--color-gray-700);
768
+ 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, backdrop-filter, display, content-visibility, overlay, pointer-events;
769
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
770
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
771
+ &:hover {
772
+ @media (hover: hover) {
773
+ color: var(--color-gray-950);
774
+ }
775
+ }
776
+ }
777
+ .nav-link:hover,
778
+ .nav-link-active {
779
+ color: var(--color-gray-950);
780
+ 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, backdrop-filter, display, content-visibility, overlay, pointer-events;
781
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
782
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
783
+ --tw-duration: 200ms;
784
+ transition-duration: 200ms;
785
+ }
786
+ body {
787
+ margin: calc(var(--spacing) * 0);
788
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
789
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
790
+ sans-serif;
791
+ -webkit-font-smoothing: antialiased;
792
+ -moz-osx-font-smoothing: grayscale;
793
+ }
794
+ code {
795
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
796
+ }
797
+ :root {
798
+ --background: oklch(1 0.002 85);
799
+ --foreground: oklch(0.141 0.005 285.823);
800
+ --card: oklch(1 0 0 / 0.75);
801
+ --card-foreground: oklch(0.141 0.005 285.823);
802
+ --popover: oklch(1 0 0);
803
+ --popover-foreground: oklch(0.141 0.005 285.823);
804
+ --primary: oklch(0.21 0.006 285.885);
805
+ --primary-foreground: oklch(0.985 0 0);
806
+ --secondary: oklch(0.967 0.001 286.375);
807
+ --secondary-foreground: oklch(0.21 0.006 285.885);
808
+ --muted: oklch(0.967 0.001 286.375);
809
+ --muted-foreground: oklch(0.552 0.016 285.938);
810
+ --accent: oklch(0.967 0.001 286.375);
811
+ --accent-foreground: oklch(0.21 0.006 285.885);
812
+ --destructive: oklch(0.577 0.245 27.325);
813
+ --destructive-foreground: oklch(0.577 0.245 27.325);
814
+ --border: oklch(0.92 0.004 286.32);
815
+ --input: oklch(0.92 0.004 286.32);
816
+ --ring: oklch(0.871 0.006 286.286);
817
+ --chart-1: oklch(0.646 0.222 41.116);
818
+ --chart-2: oklch(0.6 0.118 184.704);
819
+ --chart-3: oklch(0.398 0.07 227.392);
820
+ --chart-4: oklch(0.828 0.189 84.429);
821
+ --chart-5: oklch(0.769 0.188 70.08);
822
+ --radius: 0.625rem;
823
+ --sidebar: var(--card);
824
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
825
+ --sidebar-primary: oklch(0.21 0.006 285.885);
826
+ --sidebar-primary-foreground: oklch(0.985 0 0);
827
+ --sidebar-accent: oklch(0.967 0.001 286.375);
828
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
829
+ --sidebar-border: oklch(0.92 0.004 286.32);
830
+ --sidebar-ring: oklch(0.871 0.006 286.286);
831
+ }
832
+ .dark {
833
+ --background: oklch(0.141 0.005 285.823);
834
+ --foreground: oklch(0.985 0 0);
835
+ --card: oklch(0.141 0.005 285.823);
836
+ --card-foreground: oklch(0.985 0 0);
837
+ --popover: oklch(0.141 0.005 285.823);
838
+ --popover-foreground: oklch(0.985 0 0);
839
+ --primary: oklch(0.985 0 0);
840
+ --primary-foreground: oklch(0.21 0.006 285.885);
841
+ --secondary: oklch(0.274 0.006 286.033);
842
+ --secondary-foreground: oklch(0.985 0 0);
843
+ --muted: oklch(0.274 0.006 286.033);
844
+ --muted-foreground: oklch(0.705 0.015 286.067);
845
+ --accent: oklch(0.274 0.006 286.033);
846
+ --accent-foreground: oklch(0.985 0 0);
847
+ --destructive: oklch(0.396 0.141 25.723);
848
+ --destructive-foreground: oklch(0.637 0.237 25.331);
849
+ --border: oklch(0.274 0.006 286.033);
850
+ --input: oklch(0.274 0.006 286.033);
851
+ --ring: oklch(0.442 0.017 285.786);
852
+ --chart-1: oklch(0.488 0.243 264.376);
853
+ --chart-2: oklch(0.696 0.17 162.48);
854
+ --chart-3: oklch(0.769 0.188 70.08);
855
+ --chart-4: oklch(0.627 0.265 303.9);
856
+ --chart-5: oklch(0.645 0.246 16.439);
857
+ --sidebar: oklch(0.21 0.006 285.885);
858
+ --sidebar-foreground: oklch(0.985 0 0);
859
+ --sidebar-primary: oklch(0.488 0.243 264.376);
860
+ --sidebar-primary-foreground: oklch(0.985 0 0);
861
+ --sidebar-accent: oklch(0.274 0.006 286.033);
862
+ --sidebar-accent-foreground: oklch(0.985 0 0);
863
+ --sidebar-border: oklch(0.274 0.006 286.033);
864
+ --sidebar-ring: oklch(0.442 0.017 285.786);
865
+ }
866
+ @layer base {
867
+ * {
868
+ border-color: var(--border);
869
+ outline-color: var(--ring);
870
+ @supports (color: color-mix(in lab, red, red)) {
871
+ outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
872
+ }
873
+ }
874
+ body {
875
+ background-color: var(--background);
876
+ color: var(--foreground);
877
+ }
878
+ }
879
+ @property --tw-rotate-x {
880
+ syntax: "*";
881
+ inherits: false;
882
+ }
883
+ @property --tw-rotate-y {
884
+ syntax: "*";
885
+ inherits: false;
886
+ }
887
+ @property --tw-rotate-z {
888
+ syntax: "*";
889
+ inherits: false;
890
+ }
891
+ @property --tw-skew-x {
892
+ syntax: "*";
893
+ inherits: false;
894
+ }
895
+ @property --tw-skew-y {
896
+ syntax: "*";
897
+ inherits: false;
898
+ }
899
+ @property --tw-border-style {
900
+ syntax: "*";
901
+ inherits: false;
902
+ initial-value: solid;
903
+ }
904
+ @property --tw-font-weight {
905
+ syntax: "*";
906
+ inherits: false;
907
+ }
908
+ @property --tw-shadow {
909
+ syntax: "*";
910
+ inherits: false;
911
+ initial-value: 0 0 #0000;
912
+ }
913
+ @property --tw-shadow-color {
914
+ syntax: "*";
915
+ inherits: false;
916
+ }
917
+ @property --tw-shadow-alpha {
918
+ syntax: "<percentage>";
919
+ inherits: false;
920
+ initial-value: 100%;
921
+ }
922
+ @property --tw-inset-shadow {
923
+ syntax: "*";
924
+ inherits: false;
925
+ initial-value: 0 0 #0000;
926
+ }
927
+ @property --tw-inset-shadow-color {
928
+ syntax: "*";
929
+ inherits: false;
930
+ }
931
+ @property --tw-inset-shadow-alpha {
932
+ syntax: "<percentage>";
933
+ inherits: false;
934
+ initial-value: 100%;
935
+ }
936
+ @property --tw-ring-color {
937
+ syntax: "*";
938
+ inherits: false;
939
+ }
940
+ @property --tw-ring-shadow {
941
+ syntax: "*";
942
+ inherits: false;
943
+ initial-value: 0 0 #0000;
944
+ }
945
+ @property --tw-inset-ring-color {
946
+ syntax: "*";
947
+ inherits: false;
948
+ }
949
+ @property --tw-inset-ring-shadow {
950
+ syntax: "*";
951
+ inherits: false;
952
+ initial-value: 0 0 #0000;
953
+ }
954
+ @property --tw-ring-inset {
955
+ syntax: "*";
956
+ inherits: false;
957
+ }
958
+ @property --tw-ring-offset-width {
959
+ syntax: "<length>";
960
+ inherits: false;
961
+ initial-value: 0px;
962
+ }
963
+ @property --tw-ring-offset-color {
964
+ syntax: "*";
965
+ inherits: false;
966
+ initial-value: #fff;
967
+ }
968
+ @property --tw-ring-offset-shadow {
969
+ syntax: "*";
970
+ inherits: false;
971
+ initial-value: 0 0 #0000;
972
+ }
973
+ @property --tw-outline-style {
974
+ syntax: "*";
975
+ inherits: false;
976
+ initial-value: solid;
977
+ }
978
+ @property --tw-leading {
979
+ syntax: "*";
980
+ inherits: false;
981
+ }
982
+ @property --tw-duration {
983
+ syntax: "*";
984
+ inherits: false;
985
+ }
986
+ @layer properties {
987
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
988
+ *, ::before, ::after, ::backdrop {
989
+ --tw-rotate-x: initial;
990
+ --tw-rotate-y: initial;
991
+ --tw-rotate-z: initial;
992
+ --tw-skew-x: initial;
993
+ --tw-skew-y: initial;
994
+ --tw-border-style: solid;
995
+ --tw-font-weight: initial;
996
+ --tw-shadow: 0 0 #0000;
997
+ --tw-shadow-color: initial;
998
+ --tw-shadow-alpha: 100%;
999
+ --tw-inset-shadow: 0 0 #0000;
1000
+ --tw-inset-shadow-color: initial;
1001
+ --tw-inset-shadow-alpha: 100%;
1002
+ --tw-ring-color: initial;
1003
+ --tw-ring-shadow: 0 0 #0000;
1004
+ --tw-inset-ring-color: initial;
1005
+ --tw-inset-ring-shadow: 0 0 #0000;
1006
+ --tw-ring-inset: initial;
1007
+ --tw-ring-offset-width: 0px;
1008
+ --tw-ring-offset-color: #fff;
1009
+ --tw-ring-offset-shadow: 0 0 #0000;
1010
+ --tw-outline-style: solid;
1011
+ --tw-animation-delay: 0s;
1012
+ --tw-animation-direction: normal;
1013
+ --tw-animation-duration: initial;
1014
+ --tw-animation-fill-mode: none;
1015
+ --tw-animation-iteration-count: 1;
1016
+ --tw-enter-blur: 0;
1017
+ --tw-enter-opacity: 1;
1018
+ --tw-enter-rotate: 0;
1019
+ --tw-enter-scale: 1;
1020
+ --tw-enter-translate-x: 0;
1021
+ --tw-enter-translate-y: 0;
1022
+ --tw-exit-blur: 0;
1023
+ --tw-exit-opacity: 1;
1024
+ --tw-exit-rotate: 0;
1025
+ --tw-exit-scale: 1;
1026
+ --tw-exit-translate-x: 0;
1027
+ --tw-exit-translate-y: 0;
1028
+ --tw-leading: initial;
1029
+ --tw-duration: initial;
1030
+ }
1031
+ }
1032
+ }