@likelion-design/ui 0.1.2 → 0.1.5

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/index.css CHANGED
@@ -1,4 +1,199 @@
1
- /* src/stories/button.css */
1
+ /* src/styles.css */
2
+ :root {
3
+ --background: #ffffff;
4
+ --foreground: #171717;
5
+ --color-background: var(--background);
6
+ --color-foreground: var(--foreground);
7
+ --font-sans: var(--font-geist-sans);
8
+ --font-mono: var(--font-geist-mono);
9
+ --color-static-white: #ffffff;
10
+ --color-static-black: #000000;
11
+ --color-static-gradation-primary:
12
+ linear-gradient(
13
+
14
+ 180deg,
15
+ #ffc74e 0%,
16
+ var(--color-primary-500) 100% );
17
+ --color-static-gradation-dark:
18
+ radial-gradient(
19
+
20
+ circle,
21
+ #191f28 0%,
22
+ #993a00 100% );
23
+ --color-static-gradation-black:
24
+ linear-gradient(
25
+
26
+ 180deg,
27
+ var(--color-static-black) 0%,
28
+ var(--color-static-black) 100% );
29
+ --color-static-gradation-white:
30
+ linear-gradient(
31
+
32
+ 180deg,
33
+ var(--color-static-white) 0%,
34
+ var(--color-static-white) 100% );
35
+ --color-static-dim: rgba(0, 0, 0, 0.5);
36
+ --color-primary-50: #ffefe5;
37
+ --color-primary-100: #ffdfcc;
38
+ --color-primary-200: #ffbf99;
39
+ --color-primary-300: #ffa066;
40
+ --color-primary-400: #ff8033;
41
+ --color-primary-500: #ff6000;
42
+ --color-primary-600: #cc4d00;
43
+ --color-primary-700: #993a00;
44
+ --color-primary-800: #662600;
45
+ --color-primary-900: #4d1d00;
46
+ --color-gray-50: #f9fafb;
47
+ --color-gray-100: #f3f4f6;
48
+ --color-gray-200: #e5e7ea;
49
+ --color-gray-300: #d1d6dc;
50
+ --color-gray-400: #b1b8c0;
51
+ --color-gray-500: #8a95a0;
52
+ --color-gray-600: #6b7583;
53
+ --color-gray-700: #4e5967;
54
+ --color-gray-800: #333d4b;
55
+ --color-gray-850: #262f3c;
56
+ --color-gray-900: #191f28;
57
+ --color-yellow-50: #fef7cd;
58
+ --color-yellow-100: #feee9a;
59
+ --color-yellow-200: #fde876;
60
+ --color-yellow-300: #fdd600;
61
+ --color-yellow-400: #efc100;
62
+ --color-yellow-500: #be9b00;
63
+ --color-yellow-600: #8c7300;
64
+ --color-yellow-700: #735f00;
65
+ --color-yellow-800: #574a00;
66
+ --color-yellow-900: #3c3200;
67
+ --color-lightgreen-50: #e9f7d4;
68
+ --color-lightgreen-100: #d7f2b1;
69
+ --color-lightgreen-200: #c7ec93;
70
+ --color-lightgreen-300: #b0d55c;
71
+ --color-lightgreen-400: #89c81b;
72
+ --color-lightgreen-500: #79b116;
73
+ --color-lightgreen-600: #4a7f05;
74
+ --color-lightgreen-700: #2d660a;
75
+ --color-lightgreen-800: #144d14;
76
+ --color-lightgreen-900: #0a3c02;
77
+ --color-green-50: #d3f8ef;
78
+ --color-green-100: #c4f8eb;
79
+ --color-green-200: #b4edde;
80
+ --color-green-300: #7eddcd;
81
+ --color-green-400: #4fc8b8;
82
+ --color-green-500: #0da796;
83
+ --color-green-600: #05806d;
84
+ --color-green-700: #006d5d;
85
+ --color-green-800: #005448;
86
+ --color-green-900: #003c32;
87
+ --color-blue-50: #dbf1ff;
88
+ --color-blue-100: #ccebff;
89
+ --color-blue-200: #c0e6ff;
90
+ --color-blue-300: #80c6fb;
91
+ --color-blue-400: #6daae7;
92
+ --color-blue-500: #3d94ff;
93
+ --color-blue-600: #2077e5;
94
+ --color-blue-700: #045ca9;
95
+ --color-blue-800: #004875;
96
+ --color-blue-900: #1d3649;
97
+ --color-purple-50: #f5e5ff;
98
+ --color-purple-100: #f0d6ff;
99
+ --color-purple-200: #eac7ff;
100
+ --color-purple-300: #d7aaff;
101
+ --color-purple-400: #ba8ff7;
102
+ --color-purple-500: #af79dd;
103
+ --color-purple-600: #9855d4;
104
+ --color-purple-700: #734098;
105
+ --color-purple-800: #5d327b;
106
+ --color-purple-900: #412356;
107
+ --color-pink-50: #ffe5ff;
108
+ --color-pink-100: #ffd2ff;
109
+ --color-pink-200: #ffc2ff;
110
+ --color-pink-300: #ff9eee;
111
+ --color-pink-400: #ef81ce;
112
+ --color-pink-500: #d3689f;
113
+ --color-pink-600: #c14180;
114
+ --color-pink-700: #a02c6d;
115
+ --color-pink-800: #7c1c58;
116
+ --color-pink-900: #601146;
117
+ --color-red-50: #ffe5ec;
118
+ --color-red-100: #ffccd8;
119
+ --color-red-200: #ffb8c9;
120
+ --color-red-300: #ffa5b4;
121
+ --color-red-400: #f7858e;
122
+ --color-red-500: #ea6565;
123
+ --color-red-600: #e12337;
124
+ --color-red-700: #ad1625;
125
+ --color-red-800: #8c101c;
126
+ --color-red-900: #6e0a1e;
127
+ --color-semantic-fg-primary: var(--color-primary-500);
128
+ --color-semantic-fg-pressed: var(--color-primary-600);
129
+ --color-semantic-fg-inverted: var(--color-static-white);
130
+ --color-semantic-fg-strong: var(--color-static-black);
131
+ --color-semantic-fg-normal: var(--color-gray-800);
132
+ --color-semantic-fg-neutral: var(--color-gray-700);
133
+ --color-semantic-fg-alternative: var(--color-gray-600);
134
+ --color-semantic-fg-assistive: var(--color-gray-500);
135
+ --color-semantic-fg-disabled: var(--color-gray-400);
136
+ --color-semantic-fg-yellow: var(--color-yellow-500);
137
+ --color-semantic-fg-lightgreen: var(--color-lightgreen-500);
138
+ --color-semantic-fg-green: var(--color-green-500);
139
+ --color-semantic-fg-blue: var(--color-blue-500);
140
+ --color-semantic-fg-purple: var(--color-purple-500);
141
+ --color-semantic-fg-pink: var(--color-pink-500);
142
+ --color-semantic-fg-red: var(--color-red-500);
143
+ --color-semantic-fg-black: var(--color-static-black);
144
+ --color-semantic-fg-white: var(--color-static-white);
145
+ --color-semantic-bg-normal: var(--color-gray-100);
146
+ --color-semantic-bg-normal-hovered: var(--color-gray-50);
147
+ --color-semantic-bg-normal-alternative: var(--color-gray-200);
148
+ --color-semantic-bg-normal-assistive: var(--color-gray-50);
149
+ --color-semantic-bg-normal-disabled: var(--color-gray-100);
150
+ --color-semantic-bg-inverted: var(--color-gray-900);
151
+ --color-semantic-bg-hovered: var(--color-gray-850);
152
+ --color-semantic-bg-primary: var(--color-primary-500);
153
+ --color-semantic-bg-primary-hovered: var(--color-primary-600);
154
+ --color-semantic-bg-primary-weak: var(--color-primary-50);
155
+ --color-semantic-bg-lightgreen: var(--color-lightgreen-50);
156
+ --color-semantic-bg-yellow: var(--color-yellow-50);
157
+ --color-semantic-bg-green: var(--color-green-50);
158
+ --color-semantic-bg-blue: var(--color-blue-50);
159
+ --color-semantic-bg-purple: var(--color-purple-50);
160
+ --color-semantic-bg-pink: var(--color-pink-50);
161
+ --color-semantic-bg-red: var(--color-red-50);
162
+ --color-semantic-bg-black: var(--color-static-black);
163
+ --color-semantic-bg-white: var(--color-static-white);
164
+ --color-semantic-bg-week-primary: rgba(255, 96, 0, 0.08);
165
+ --color-semantic-bg-week-primary-hovered: rgba(255, 96, 0, 0.16);
166
+ --color-semantic-bg-week-neutral-dark: rgba(0, 0, 0, 0.08);
167
+ --color-semantic-bg-week-neutral-dark-hovered: rgba(0, 0, 0, 0.16);
168
+ --color-semantic-bg-week-neutral-light: rgba(255, 255, 255, 0.08);
169
+ --color-semantic-bg-week-neutral-light-hovered: rgba(255, 255, 255, 0.16);
170
+ --color-semantic-border-primary: var(--color-primary-500);
171
+ --color-semantic-border-strong: var(--color-gray-800);
172
+ --color-semantic-border-normal: var(--color-gray-300);
173
+ --color-semantic-border-weak: var(--color-gray-200);
174
+ --color-semantic-border-white: var(--color-static-white);
175
+ --color-semantic-border-black: var(--color-static-black);
176
+ --color-semantic-border-inverted: var(--color-gray-700);
177
+ --color-semantic-border-inverted-strong: var(--color-gray-600);
178
+ --color-semantic-info-negative: var(--color-red-600);
179
+ --color-semantic-info-positive: var(--color-green-500);
180
+ --color-semantic-info-black: var(--color-static-black);
181
+ --color-semantic-info-white: var(--color-static-white);
182
+ }
183
+ @media (prefers-color-scheme: dark) {
184
+ :root {
185
+ --background: #0a0a0a;
186
+ --foreground: #ededed;
187
+ }
188
+ }
189
+ body {
190
+ background: var(--background);
191
+ color: var(--foreground);
192
+ font-family:
193
+ Arial,
194
+ Helvetica,
195
+ sans-serif;
196
+ }
2
197
  .storybook-button {
3
198
  display: inline-block;
4
199
  cursor: pointer;
@@ -412,8 +607,6 @@
412
607
  .icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
413
608
  background-color: rgba(255, 255, 255, 0.1);
414
609
  }
415
-
416
- /* src/stories/header.css */
417
610
  .storybook-header {
418
611
  display: flex;
419
612
  justify-content: space-between;
@@ -447,8 +640,6 @@
447
640
  color: #333;
448
641
  font-size: 14px;
449
642
  }
450
-
451
- /* src/stories/page.css */
452
643
  .storybook-page {
453
644
  margin: 0 auto;
454
645
  padding: 48px 20px;
@@ -513,607 +704,5 @@
513
704
  .storybook-page .tip-wrapper svg path {
514
705
  fill: #1ea7fd;
515
706
  }
516
-
517
- /* src/styles/globals.css */
518
- @layer properties;
519
- @layer theme, base, components, utilities;
520
- @layer theme {
521
- :root,
522
- :host {
523
- --color-red-50: #ffe5ec;
524
- --color-red-500: #ea6565;
525
- --color-red-600: #e12337;
526
- --color-yellow-50: #fef7cd;
527
- --color-yellow-500: #be9b00;
528
- --color-green-50: #d3f8ef;
529
- --color-green-500: #0da796;
530
- --color-blue-50: #dbf1ff;
531
- --color-blue-500: #3d94ff;
532
- --color-purple-50: #f5e5ff;
533
- --color-purple-500: #af79dd;
534
- --color-pink-50: #ffe5ff;
535
- --color-pink-500: #d3689f;
536
- --color-gray-50: #f9fafb;
537
- --color-gray-100: #f3f4f6;
538
- --color-gray-200: #e5e7ea;
539
- --color-gray-300: #d1d6dc;
540
- --color-gray-400: #b1b8c0;
541
- --color-gray-500: #8a95a0;
542
- --color-gray-600: #6b7583;
543
- --color-gray-700: #4e5967;
544
- --color-gray-800: #333d4b;
545
- --color-gray-900: #191f28;
546
- --color-zinc-50: oklch(98.5% 0 0);
547
- --color-zinc-400: oklch(70.5% 0.015 286.067);
548
- --color-zinc-600: oklch(44.2% 0.017 285.786);
549
- --color-zinc-950: oklch(14.1% 0.005 285.823);
550
- --color-black: #000;
551
- --color-white: #fff;
552
- --spacing: 0.25rem;
553
- --container-xs: 20rem;
554
- --container-md: 28rem;
555
- --container-3xl: 48rem;
556
- --text-base: 1rem;
557
- --text-base--line-height: calc(1.5 / 1);
558
- --text-lg: 1.125rem;
559
- --text-lg--line-height: calc(1.75 / 1.125);
560
- --text-3xl: 1.875rem;
561
- --text-3xl--line-height: calc(2.25 / 1.875);
562
- --font-weight-medium: 500;
563
- --font-weight-semibold: 600;
564
- --tracking-tight: -0.025em;
565
- --default-transition-duration: 150ms;
566
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
567
- --default-font-family: var(--font-geist-sans);
568
- --default-mono-font-family: var(--font-geist-mono);
569
- --color-static-white: #ffffff;
570
- --color-static-black: #000000;
571
- --color-primary-50: #ffefe5;
572
- --color-primary-500: #ff6000;
573
- --color-primary-600: #cc4d00;
574
- --color-gray-850: #262f3c;
575
- --color-lightgreen-50: #e9f7d4;
576
- --color-lightgreen-500: #79b116;
577
- --color-semantic-fg-primary: var(--color-primary-500);
578
- --color-semantic-fg-inverted: var(--color-static-white);
579
- --color-semantic-fg-normal: var(--color-gray-800);
580
- --color-semantic-fg-disabled: var(--color-gray-400);
581
- --color-semantic-fg-white: var(--color-static-white);
582
- --color-semantic-bg-normal: var(--color-gray-100);
583
- --color-semantic-bg-normal-hovered: var(--color-gray-50);
584
- --color-semantic-bg-normal-disabled: var(--color-gray-100);
585
- --color-semantic-bg-inverted: var(--color-gray-900);
586
- --color-semantic-bg-primary: var(--color-primary-500);
587
- --color-semantic-bg-primary-hovered: var(--color-primary-600);
588
- --color-semantic-bg-primary-weak: var(--color-primary-50);
589
- --color-semantic-bg-white: var(--color-static-white);
590
- --color-semantic-bg-week-primary: rgba(255, 96, 0, 0.08);
591
- --color-semantic-bg-week-primary-hovered: rgba(255, 96, 0, 0.16);
592
- --color-semantic-bg-week-neutral-dark: rgba(0, 0, 0, 0.08);
593
- --color-semantic-bg-week-neutral-dark-hovered: rgba(0, 0, 0, 0.16);
594
- --color-semantic-border-normal: var(--color-gray-300);
595
- --color-semantic-border-weak: var(--color-gray-200);
596
- }
597
- }
598
- @layer base {
599
- *,
600
- ::after,
601
- ::before,
602
- ::backdrop,
603
- ::file-selector-button {
604
- box-sizing: border-box;
605
- margin: 0;
606
- padding: 0;
607
- border: 0 solid;
608
- }
609
- html,
610
- :host {
611
- line-height: 1.5;
612
- -webkit-text-size-adjust: 100%;
613
- tab-size: 4;
614
- 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");
615
- font-feature-settings: var(--default-font-feature-settings, normal);
616
- font-variation-settings: var(--default-font-variation-settings, normal);
617
- -webkit-tap-highlight-color: transparent;
618
- }
619
- hr {
620
- height: 0;
621
- color: inherit;
622
- border-top-width: 1px;
623
- }
624
- abbr:where([title]) {
625
- -webkit-text-decoration: underline dotted;
626
- text-decoration: underline dotted;
627
- }
628
- h1,
629
- h2,
630
- h3,
631
- h4,
632
- h5,
633
- h6 {
634
- font-size: inherit;
635
- font-weight: inherit;
636
- }
637
- a {
638
- color: inherit;
639
- -webkit-text-decoration: inherit;
640
- text-decoration: inherit;
641
- }
642
- b,
643
- strong {
644
- font-weight: bolder;
645
- }
646
- code,
647
- kbd,
648
- samp,
649
- pre {
650
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
651
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
652
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
653
- font-size: 1em;
654
- }
655
- small {
656
- font-size: 80%;
657
- }
658
- sub,
659
- sup {
660
- font-size: 75%;
661
- line-height: 0;
662
- position: relative;
663
- vertical-align: baseline;
664
- }
665
- sub {
666
- bottom: -0.25em;
667
- }
668
- sup {
669
- top: -0.5em;
670
- }
671
- table {
672
- text-indent: 0;
673
- border-color: inherit;
674
- border-collapse: collapse;
675
- }
676
- :-moz-focusring {
677
- outline: auto;
678
- }
679
- progress {
680
- vertical-align: baseline;
681
- }
682
- summary {
683
- display: list-item;
684
- }
685
- ol,
686
- ul,
687
- menu {
688
- list-style: none;
689
- }
690
- img,
691
- svg,
692
- video,
693
- canvas,
694
- audio,
695
- iframe,
696
- embed,
697
- object {
698
- display: block;
699
- vertical-align: middle;
700
- }
701
- img,
702
- video {
703
- max-width: 100%;
704
- height: auto;
705
- }
706
- button,
707
- input,
708
- select,
709
- optgroup,
710
- textarea,
711
- ::file-selector-button {
712
- font: inherit;
713
- font-feature-settings: inherit;
714
- font-variation-settings: inherit;
715
- letter-spacing: inherit;
716
- color: inherit;
717
- border-radius: 0;
718
- background-color: transparent;
719
- opacity: 1;
720
- }
721
- :where(select:is([multiple], [size])) optgroup {
722
- font-weight: bolder;
723
- }
724
- :where(select:is([multiple], [size])) optgroup option {
725
- padding-inline-start: 20px;
726
- }
727
- ::file-selector-button {
728
- margin-inline-end: 4px;
729
- }
730
- ::placeholder {
731
- opacity: 1;
732
- }
733
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
734
- ::placeholder {
735
- color: currentcolor;
736
- @supports (color: color-mix(in lab, red, red)) {
737
- color: color-mix(in oklab, currentcolor 50%, transparent);
738
- }
739
- }
740
- }
741
- textarea {
742
- resize: vertical;
743
- }
744
- ::-webkit-search-decoration {
745
- -webkit-appearance: none;
746
- }
747
- ::-webkit-date-and-time-value {
748
- min-height: 1lh;
749
- text-align: inherit;
750
- }
751
- ::-webkit-datetime-edit {
752
- display: inline-flex;
753
- }
754
- ::-webkit-datetime-edit-fields-wrapper {
755
- padding: 0;
756
- }
757
- ::-webkit-datetime-edit,
758
- ::-webkit-datetime-edit-year-field,
759
- ::-webkit-datetime-edit-month-field,
760
- ::-webkit-datetime-edit-day-field,
761
- ::-webkit-datetime-edit-hour-field,
762
- ::-webkit-datetime-edit-minute-field,
763
- ::-webkit-datetime-edit-second-field,
764
- ::-webkit-datetime-edit-millisecond-field,
765
- ::-webkit-datetime-edit-meridiem-field {
766
- padding-block: 0;
767
- }
768
- ::-webkit-calendar-picker-indicator {
769
- line-height: 1;
770
- }
771
- :-moz-ui-invalid {
772
- box-shadow: none;
773
- }
774
- button,
775
- input:where([type=button], [type=reset], [type=submit]),
776
- ::file-selector-button {
777
- appearance: button;
778
- }
779
- ::-webkit-inner-spin-button,
780
- ::-webkit-outer-spin-button {
781
- height: auto;
782
- }
783
- [hidden]:where(:not([hidden=until-found])) {
784
- display: none !important;
785
- }
786
- }
787
- @layer utilities {
788
- .fixed {
789
- position: fixed;
790
- }
791
- .static {
792
- position: static;
793
- }
794
- .contents {
795
- display: contents;
796
- }
797
- .flex {
798
- display: flex;
799
- }
800
- .inline-block {
801
- display: inline-block;
802
- }
803
- .h-12 {
804
- height: calc(var(--spacing) * 12);
805
- }
806
- .min-h-screen {
807
- min-height: 100vh;
808
- }
809
- .w-full {
810
- width: 100%;
811
- }
812
- .max-w-3xl {
813
- max-width: var(--container-3xl);
814
- }
815
- .max-w-md {
816
- max-width: var(--container-md);
817
- }
818
- .max-w-xs {
819
- max-width: var(--container-xs);
820
- }
821
- .transform {
822
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
823
- }
824
- .flex-col {
825
- flex-direction: column;
826
- }
827
- .items-center {
828
- align-items: center;
829
- }
830
- .justify-between {
831
- justify-content: space-between;
832
- }
833
- .justify-center {
834
- justify-content: center;
835
- }
836
- .gap-2 {
837
- gap: calc(var(--spacing) * 2);
838
- }
839
- .gap-4 {
840
- gap: calc(var(--spacing) * 4);
841
- }
842
- .gap-6 {
843
- gap: calc(var(--spacing) * 6);
844
- }
845
- .rounded-full {
846
- border-radius: calc(infinity * 1px);
847
- }
848
- .border {
849
- border-style: var(--tw-border-style);
850
- border-width: 1px;
851
- }
852
- .border-solid {
853
- --tw-border-style: solid;
854
- border-style: solid;
855
- }
856
- .border-black\/\[\.08\] {
857
- border-color: color-mix(in srgb, #000 8%, transparent);
858
- @supports (color: color-mix(in lab, red, red)) {
859
- border-color: color-mix(in oklab, var(--color-black) 8%, transparent);
860
- }
861
- }
862
- .bg-foreground {
863
- background-color: var(--foreground);
864
- }
865
- .bg-white {
866
- background-color: var(--color-white);
867
- }
868
- .bg-zinc-50 {
869
- background-color: var(--color-zinc-50);
870
- }
871
- .px-5 {
872
- padding-inline: calc(var(--spacing) * 5);
873
- }
874
- .px-16 {
875
- padding-inline: calc(var(--spacing) * 16);
876
- }
877
- .py-32 {
878
- padding-block: calc(var(--spacing) * 32);
879
- }
880
- .text-center {
881
- text-align: center;
882
- }
883
- .font-sans {
884
- font-family: var(--font-geist-sans);
885
- }
886
- .text-3xl {
887
- font-size: var(--text-3xl);
888
- line-height: var(--tw-leading, var(--text-3xl--line-height));
889
- }
890
- .text-base {
891
- font-size: var(--text-base);
892
- line-height: var(--tw-leading, var(--text-base--line-height));
893
- }
894
- .text-lg {
895
- font-size: var(--text-lg);
896
- line-height: var(--tw-leading, var(--text-lg--line-height));
897
- }
898
- .leading-8 {
899
- --tw-leading: calc(var(--spacing) * 8);
900
- line-height: calc(var(--spacing) * 8);
901
- }
902
- .leading-10 {
903
- --tw-leading: calc(var(--spacing) * 10);
904
- line-height: calc(var(--spacing) * 10);
905
- }
906
- .font-medium {
907
- --tw-font-weight: var(--font-weight-medium);
908
- font-weight: var(--font-weight-medium);
909
- }
910
- .font-semibold {
911
- --tw-font-weight: var(--font-weight-semibold);
912
- font-weight: var(--font-weight-semibold);
913
- }
914
- .tracking-tight {
915
- --tw-tracking: var(--tracking-tight);
916
- letter-spacing: var(--tracking-tight);
917
- }
918
- .text-background {
919
- color: var(--background);
920
- }
921
- .text-black {
922
- color: var(--color-black);
923
- }
924
- .text-zinc-600 {
925
- color: var(--color-zinc-600);
926
- }
927
- .text-zinc-950 {
928
- color: var(--color-zinc-950);
929
- }
930
- .antialiased {
931
- -webkit-font-smoothing: antialiased;
932
- -moz-osx-font-smoothing: grayscale;
933
- }
934
- .outline {
935
- outline-style: var(--tw-outline-style);
936
- outline-width: 1px;
937
- }
938
- .transition-colors {
939
- transition-property:
940
- color,
941
- background-color,
942
- border-color,
943
- outline-color,
944
- text-decoration-color,
945
- fill,
946
- stroke,
947
- --tw-gradient-from,
948
- --tw-gradient-via,
949
- --tw-gradient-to;
950
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
951
- transition-duration: var(--tw-duration, var(--default-transition-duration));
952
- }
953
- .hover\:border-transparent {
954
- &:hover {
955
- @media (hover: hover) {
956
- border-color: transparent;
957
- }
958
- }
959
- }
960
- .hover\:bg-\[\#383838\] {
961
- &:hover {
962
- @media (hover: hover) {
963
- background-color: #383838;
964
- }
965
- }
966
- }
967
- .hover\:bg-black\/\[\.04\] {
968
- &:hover {
969
- @media (hover: hover) {
970
- background-color: color-mix(in srgb, #000 4%, transparent);
971
- @supports (color: color-mix(in lab, red, red)) {
972
- background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
973
- }
974
- }
975
- }
976
- }
977
- .sm\:flex-row {
978
- @media (width >= 40rem) {
979
- flex-direction: row;
980
- }
981
- }
982
- .sm\:items-start {
983
- @media (width >= 40rem) {
984
- align-items: flex-start;
985
- }
986
- }
987
- .sm\:text-left {
988
- @media (width >= 40rem) {
989
- text-align: left;
990
- }
991
- }
992
- .md\:w-\[158px\] {
993
- @media (width >= 48rem) {
994
- width: 158px;
995
- }
996
- }
997
- .dark\:border-white\/\[\.145\] {
998
- @media (prefers-color-scheme: dark) {
999
- border-color: color-mix(in srgb, #fff 14.499999999999998%, transparent);
1000
- @supports (color: color-mix(in lab, red, red)) {
1001
- border-color: color-mix(in oklab, var(--color-white) 14.499999999999998%, transparent);
1002
- }
1003
- }
1004
- }
1005
- .dark\:bg-black {
1006
- @media (prefers-color-scheme: dark) {
1007
- background-color: var(--color-black);
1008
- }
1009
- }
1010
- .dark\:text-zinc-50 {
1011
- @media (prefers-color-scheme: dark) {
1012
- color: var(--color-zinc-50);
1013
- }
1014
- }
1015
- .dark\:text-zinc-400 {
1016
- @media (prefers-color-scheme: dark) {
1017
- color: var(--color-zinc-400);
1018
- }
1019
- }
1020
- .dark\:invert {
1021
- @media (prefers-color-scheme: dark) {
1022
- --tw-invert: invert(100%);
1023
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1024
- }
1025
- }
1026
- .dark\:hover\:bg-\[\#1a1a1a\] {
1027
- @media (prefers-color-scheme: dark) {
1028
- &:hover {
1029
- @media (hover: hover) {
1030
- background-color: #1a1a1a;
1031
- }
1032
- }
1033
- }
1034
- }
1035
- .dark\:hover\:bg-\[\#ccc\] {
1036
- @media (prefers-color-scheme: dark) {
1037
- &:hover {
1038
- @media (hover: hover) {
1039
- background-color: #ccc;
1040
- }
1041
- }
1042
- }
1043
- }
1044
- }
1045
- :root {
1046
- --background: #ffffff;
1047
- --foreground: #171717;
1048
- }
1049
- @media (prefers-color-scheme: dark) {
1050
- :root {
1051
- --background: #0a0a0a;
1052
- --foreground: #ededed;
1053
- }
1054
- }
1055
- body {
1056
- background: var(--background);
1057
- color: var(--foreground);
1058
- font-family:
1059
- Arial,
1060
- Helvetica,
1061
- sans-serif;
1062
- }
1063
- @property --tw-rotate-x { syntax: "*"; inherits: false; }
1064
- @property --tw-rotate-y { syntax: "*"; inherits: false; }
1065
- @property --tw-rotate-z { syntax: "*"; inherits: false; }
1066
- @property --tw-skew-x { syntax: "*"; inherits: false; }
1067
- @property --tw-skew-y { syntax: "*"; inherits: false; }
1068
- @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1069
- @property --tw-leading { syntax: "*"; inherits: false; }
1070
- @property --tw-font-weight { syntax: "*"; inherits: false; }
1071
- @property --tw-tracking { syntax: "*"; inherits: false; }
1072
- @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
1073
- @property --tw-blur { syntax: "*"; inherits: false; }
1074
- @property --tw-brightness { syntax: "*"; inherits: false; }
1075
- @property --tw-contrast { syntax: "*"; inherits: false; }
1076
- @property --tw-grayscale { syntax: "*"; inherits: false; }
1077
- @property --tw-hue-rotate { syntax: "*"; inherits: false; }
1078
- @property --tw-invert { syntax: "*"; inherits: false; }
1079
- @property --tw-opacity { syntax: "*"; inherits: false; }
1080
- @property --tw-saturate { syntax: "*"; inherits: false; }
1081
- @property --tw-sepia { syntax: "*"; inherits: false; }
1082
- @property --tw-drop-shadow { syntax: "*"; inherits: false; }
1083
- @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
1084
- @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1085
- @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
1086
- @layer properties {
1087
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1088
- *,
1089
- ::before,
1090
- ::after,
1091
- ::backdrop {
1092
- --tw-rotate-x: initial;
1093
- --tw-rotate-y: initial;
1094
- --tw-rotate-z: initial;
1095
- --tw-skew-x: initial;
1096
- --tw-skew-y: initial;
1097
- --tw-border-style: solid;
1098
- --tw-leading: initial;
1099
- --tw-font-weight: initial;
1100
- --tw-tracking: initial;
1101
- --tw-outline-style: solid;
1102
- --tw-blur: initial;
1103
- --tw-brightness: initial;
1104
- --tw-contrast: initial;
1105
- --tw-grayscale: initial;
1106
- --tw-hue-rotate: initial;
1107
- --tw-invert: initial;
1108
- --tw-opacity: initial;
1109
- --tw-saturate: initial;
1110
- --tw-sepia: initial;
1111
- --tw-drop-shadow: initial;
1112
- --tw-drop-shadow-color: initial;
1113
- --tw-drop-shadow-alpha: 100%;
1114
- --tw-drop-shadow-size: initial;
1115
- }
1116
- }
1117
- }
1118
707
  /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1119
708
  /*# sourceMappingURL=index.css.map */