yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
brookjeynes.dev
1@import "tailwindcss";
2
3@theme {
4 --color-bg-dark: hsl(109, 20%, 90%);
5 --color-bg: hsl(109, 20%, 98%);
6 --color-bg-light: hsl(109, 20%, 100%);
7
8 --color-text: hsl(109, 0%, 5%);
9 --color-text-muted: hsl(109, 0%, 38%);
10
11 --color-primary: hsl(109, 50%, 77%);
12 --color-primary-surface: hsla(109, 50%, 77%, 0.3);
13 --color-primary-text: hsl(109, 50%, 19%);
14
15 --color-heatmap-8: hsla(109, 50%, 77%, 1);
16 --color-heatmap-4: hsla(109, 50%, 77%, 0.8);
17 --color-heatmap-2: hsla(109, 50%, 77%, 0.6);
18 --color-heatmap-0: hsla(109, 50%, 77%, 0.4);
19
20 --color-secondary: hsl(300, 50%, 74%);
21 --color-secondary-surface: hsla(300, 50%, 74%, 0.3);
22 --color-secondary-text: hsl(300, 50%, 19%);
23
24 --color-streak: hsl(20, 60%, 72%);
25 --color-streak-surface: hsla(20, 60%, 72%, 0.3);
26 --color-streak-text: hsl(20, 60%, 19%);
27
28 --color-gray: hsl(109, 0%, 70%);
29 --color-gray-light: hsla(109, 0%, 70%, 0.1);
30
31 --color-blue: hsl(195, 50%, 77%);
32 --color-blue-surface: hsla(195, 50%, 77%, 0.3);
33 --color-blue-text: hsl(195, 50%, 19%);
34
35 --color-toast-success: hsl(109, 50%, 77%);
36 --color-toast-info: hsl(195, 50%, 77%);
37 --color-toast-error: hsl(0, 91%, 77%);
38}
39
40@utility card {
41 display: flex;
42 flex-direction: column;
43 gap: theme(gap.3);
44 background-color: theme(--color-bg-light);
45 border-radius: theme(borderRadius.md);
46 filter: drop-shadow(theme(dropShadow.md));
47 width: 100%;
48 padding: theme(spacing.6);
49}
50
51@utility error {
52 padding: theme(spacing.2);
53 margin: theme(spacing.2) theme(spacing.0);
54 border-radius: theme(borderRadius.md);
55 border-width: 1px;
56 border-color: theme(colors.red.500);
57 color: theme(colors.red.500);
58 font-size: theme(text.sm);
59}
60
61@utility pill {
62 display: flex;
63 justify-content: center;
64 align-items: center;
65 padding: theme(spacing.1) theme(spacing.4);
66 border-radius: theme(borderRadius.full);
67 font-size: theme(text.sm);
68 filter: drop-shadow(theme(dropShadow.sm));
69}
70
71@utility pill-primary {
72 background-color: theme(--color-primary-surface);
73 color: theme(--color-primary-text);
74}
75
76@utility pill-secondary {
77 background-color: theme(--color-secondary-surface);
78 color: theme(--color-secondary-text);
79}
80
81@utility pill-streak {
82 background-color: theme(--color-streak-surface);
83 color: theme(--color-streak-text);
84}
85
86@utility pill-muted {
87 border-color: theme(--color-bg-dark);
88 border-width: 1px;
89 background-color: theme(--color-bg);
90 color: theme(--color-text-muted);
91}
92
93@utility percentage-bar {
94 height: theme(spacing.2);
95 border-radius: theme(borderRadius.md);
96 background-color: theme(--color-bg-dark);
97}
98
99@utility input {
100 padding: theme(spacing.2) theme(spacing.4);
101 border-radius: theme(borderRadius.md);
102 border-width: 1px;
103 border-color: theme(--color-bg-dark);
104 background-color: theme(--color-bg-light);
105 font-size: theme(text.sm);
106 color: theme(--color-text);
107
108 @variant placeholder {
109 color: theme(--color-text-muted);
110 opacity: 1;
111 }
112}
113
114@utility btn {
115 display: flex;
116 align-items: center;
117 justify-content: center;
118 gap: theme(gap.2);
119 cursor: pointer;
120 padding: theme(spacing.2) theme(spacing.4);
121 width: 100%;
122 color: theme(--color-text);
123 font-weight: theme(fontWeight.medium);
124
125 img {
126 transition: all 150ms ease-in-out;
127 }
128
129 @variant disabled {
130 opacity: 0.5;
131 cursor: not-allowed;
132 pointer-events: none;
133 }
134
135 @screen sm {
136 width: fit-content;
137 }
138}
139
140@utility btn-primary {
141 border-radius: theme(borderRadius.md);
142 background-color: theme(--color-primary);
143
144 @variant hover {
145 background-color: theme(--color-primary-surface);
146 }
147}
148
149@utility btn-secondary {
150 border-radius: theme(borderRadius.md);
151 border-width: 1px;
152 border-color: theme(--color-bg-dark);
153 background-color: theme(--color-bg-light);
154
155 @variant hover {
156 background-color: theme(--color-bg);
157 }
158}
159
160@utility btn-dangerous {
161 border-radius: theme(borderRadius.md);
162 border-width: 1px;
163 border-color: theme(colors.red.300);
164 color: theme(colors.red.600);
165
166 @variant hover {
167 background-color: theme(colors.red.50);
168 border-color: theme(colors.red.400);
169 }
170}
171
172@utility btn-muted {
173 border-radius: theme(borderRadius.md);
174 border-color: theme(--color-bg-dark);
175 background-color: theme(colors.white);
176 border-width: 1px;
177
178 @variant hover {
179 opacity: 75%;
180 }
181}
182
183[x-cloak] { display: none !important; }
184
185body {
186 font-family: "Twemoji Country Flags", var(--default-font-family);
187}