|
| 1 | +@import "@plane/tailwind-config/index.css"; |
1 | 2 | @import "@plane/propel/styles/fonts.css"; |
2 | 3 |
|
3 | | -@tailwind base; |
4 | | -@tailwind components; |
5 | | -@tailwind utilities; |
6 | | - |
7 | | -@layer components { |
8 | | - .text-1\.5xl { |
9 | | - font-size: 1.375rem; |
10 | | - line-height: 1.875rem; |
11 | | - } |
12 | | - |
13 | | - .text-2\.5xl { |
14 | | - font-size: 1.75rem; |
15 | | - line-height: 2.25rem; |
16 | | - } |
17 | | -} |
18 | | - |
19 | | -@layer base { |
20 | | - html { |
21 | | - font-family: "Inter", sans-serif; |
22 | | - } |
23 | | - |
24 | | - :root { |
25 | | - color-scheme: light !important; |
26 | | - |
27 | | - --color-primary-10: 229, 243, 250; |
28 | | - --color-primary-20: 216, 237, 248; |
29 | | - --color-primary-30: 199, 229, 244; |
30 | | - --color-primary-40: 169, 214, 239; |
31 | | - --color-primary-50: 144, 202, 234; |
32 | | - --color-primary-60: 109, 186, 227; |
33 | | - --color-primary-70: 75, 170, 221; |
34 | | - --color-primary-80: 41, 154, 214; |
35 | | - --color-primary-90: 34, 129, 180; |
36 | | - --color-primary-100: 0, 99, 153; |
37 | | - --color-primary-200: 0, 92, 143; |
38 | | - --color-primary-300: 0, 86, 133; |
39 | | - --color-primary-400: 0, 77, 117; |
40 | | - --color-primary-500: 0, 66, 102; |
41 | | - --color-primary-600: 0, 53, 82; |
42 | | - --color-primary-700: 0, 43, 66; |
43 | | - --color-primary-800: 0, 33, 51; |
44 | | - --color-primary-900: 0, 23, 36; |
45 | | - |
46 | | - --color-background-100: 255, 255, 255; /* primary bg */ |
47 | | - --color-background-90: 247, 247, 247; /* secondary bg */ |
48 | | - --color-background-80: 232, 232, 232; /* tertiary bg */ |
49 | | - |
50 | | - --color-text-100: 23, 23, 23; /* primary text */ |
51 | | - --color-text-200: 58, 58, 58; /* secondary text */ |
52 | | - --color-text-300: 82, 82, 82; /* tertiary text */ |
53 | | - --color-text-400: 163, 163, 163; /* placeholder text */ |
54 | | - |
55 | | - --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ |
56 | | - |
57 | | - --color-border-100: 245, 245, 245; /* subtle border= 1 */ |
58 | | - --color-border-200: 229, 229, 229; /* subtle border- 2 */ |
59 | | - --color-border-300: 212, 212, 212; /* strong border- 1 */ |
60 | | - --color-border-400: 185, 185, 185; /* strong border- 2 */ |
61 | | - |
62 | | - --color-shadow-2xs: |
63 | | - 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06), |
64 | | - 0px 1px 2px 0px rgba(23, 23, 23, 0.14); |
65 | | - --color-shadow-xs: |
66 | | - 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12), |
67 | | - 0px 1px 8px -1px rgba(16, 24, 40, 0.1); |
68 | | - --color-shadow-sm: |
69 | | - 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12); |
70 | | - --color-shadow-rg: |
71 | | - 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08), |
72 | | - 0px 1px 12px 0px rgba(16, 24, 40, 0.04); |
73 | | - --color-shadow-md: |
74 | | - 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), |
75 | | - 0px 1px 16px 0px rgba(16, 24, 40, 0.12); |
76 | | - --color-shadow-lg: |
77 | | - 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12), |
78 | | - 0px 1px 24px 0px rgba(16, 24, 40, 0.12); |
79 | | - --color-shadow-xl: |
80 | | - 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16), |
81 | | - 0px 0px 52px 0px rgba(16, 24, 40, 0.16); |
82 | | - --color-shadow-2xl: |
83 | | - 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12), |
84 | | - 0px 1px 32px 0px rgba(16, 24, 40, 0.12); |
85 | | - --color-shadow-3xl: |
86 | | - 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12), |
87 | | - 0px 1px 48px 0px rgba(16, 24, 40, 0.12); |
88 | | - --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05); |
89 | | - |
90 | | - --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ |
91 | | - --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ |
92 | | - --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ |
93 | | - |
94 | | - --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ |
95 | | - --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ |
96 | | - --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ |
97 | | - --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ |
98 | | - |
99 | | - --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ |
100 | | - --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ |
101 | | - --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ |
102 | | - --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ |
103 | | - |
104 | | - --color-sidebar-shadow-2xs: var(--color-shadow-2xs); |
105 | | - --color-sidebar-shadow-xs: var(--color-shadow-xs); |
106 | | - --color-sidebar-shadow-sm: var(--color-shadow-sm); |
107 | | - --color-sidebar-shadow-rg: var(--color-shadow-rg); |
108 | | - --color-sidebar-shadow-md: var(--color-shadow-md); |
109 | | - --color-sidebar-shadow-lg: var(--color-shadow-lg); |
110 | | - --color-sidebar-shadow-xl: var(--color-shadow-xl); |
111 | | - --color-sidebar-shadow-2xl: var(--color-shadow-2xl); |
112 | | - --color-sidebar-shadow-3xl: var(--color-shadow-3xl); |
113 | | - --color-sidebar-shadow-4xl: var(--color-shadow-4xl); |
114 | | - |
115 | | - /* toast theme */ |
116 | | - --color-toast-success-text: 178, 221, 181; |
117 | | - --color-toast-error-text: 206, 44, 49; |
118 | | - --color-toast-warning-text: 255, 186, 24; |
119 | | - --color-toast-info-text: 141, 164, 239; |
120 | | - --color-toast-loading-text: 255, 255, 255; |
121 | | - --color-toast-secondary-text: 185, 187, 198; |
122 | | - --color-toast-tertiary-text: 139, 141, 152; |
123 | | - |
124 | | - --color-toast-success-background: 46, 46, 46; |
125 | | - --color-toast-error-background: 46, 46, 46; |
126 | | - --color-toast-warning-background: 46, 46, 46; |
127 | | - --color-toast-info-background: 46, 46, 46; |
128 | | - --color-toast-loading-background: 46, 46, 46; |
129 | | - |
130 | | - --color-toast-success-border: 42, 126, 59; |
131 | | - --color-toast-error-border: 100, 23, 35; |
132 | | - --color-toast-warning-border: 79, 52, 34; |
133 | | - --color-toast-info-border: 58, 91, 199; |
134 | | - --color-toast-loading-border: 96, 100, 108; |
135 | | - } |
136 | | - |
137 | | - [data-theme="light"], |
138 | | - [data-theme="light-contrast"] { |
139 | | - color-scheme: light !important; |
140 | | - |
141 | | - --color-background-100: 255, 255, 255; /* primary bg */ |
142 | | - --color-background-90: 247, 247, 247; /* secondary bg */ |
143 | | - --color-background-80: 232, 232, 232; /* tertiary bg */ |
144 | | - } |
145 | | - |
146 | | - [data-theme="light"] { |
147 | | - --color-text-100: 23, 23, 23; /* primary text */ |
148 | | - --color-text-200: 58, 58, 58; /* secondary text */ |
149 | | - --color-text-300: 82, 82, 82; /* tertiary text */ |
150 | | - --color-text-400: 163, 163, 163; /* placeholder text */ |
151 | | - |
152 | | - --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ |
153 | | - |
154 | | - --color-border-100: 245, 245, 245; /* subtle border= 1 */ |
155 | | - --color-border-200: 229, 229, 229; /* subtle border- 2 */ |
156 | | - --color-border-300: 212, 212, 212; /* strong border- 1 */ |
157 | | - --color-border-400: 185, 185, 185; /* strong border- 2 */ |
158 | | - |
159 | | - /* toast theme */ |
160 | | - --color-toast-success-text: 62, 155, 79; |
161 | | - --color-toast-error-text: 220, 62, 66; |
162 | | - --color-toast-warning-text: 255, 186, 24; |
163 | | - --color-toast-info-text: 51, 88, 212; |
164 | | - --color-toast-loading-text: 28, 32, 36; |
165 | | - --color-toast-secondary-text: 128, 131, 141; |
166 | | - --color-toast-tertiary-text: 96, 100, 108; |
167 | | - |
168 | | - --color-toast-success-background: 253, 253, 254; |
169 | | - --color-toast-error-background: 255, 252, 252; |
170 | | - --color-toast-warning-background: 254, 253, 251; |
171 | | - --color-toast-info-background: 253, 253, 254; |
172 | | - --color-toast-loading-background: 253, 253, 254; |
173 | | - |
174 | | - --color-toast-success-border: 218, 241, 219; |
175 | | - --color-toast-error-border: 255, 219, 220; |
176 | | - --color-toast-warning-border: 255, 247, 194; |
177 | | - --color-toast-info-border: 210, 222, 255; |
178 | | - --color-toast-loading-border: 224, 225, 230; |
179 | | - } |
180 | | - |
181 | | - [data-theme="light-contrast"] { |
182 | | - --color-text-100: 11, 11, 11; /* primary text */ |
183 | | - --color-text-200: 38, 38, 38; /* secondary text */ |
184 | | - --color-text-300: 58, 58, 58; /* tertiary text */ |
185 | | - --color-text-400: 115, 115, 115; /* placeholder text */ |
186 | | - |
187 | | - --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ |
188 | | - |
189 | | - --color-border-100: 34, 34, 34; /* subtle border= 1 */ |
190 | | - --color-border-200: 38, 38, 38; /* subtle border- 2 */ |
191 | | - --color-border-300: 46, 46, 46; /* strong border- 1 */ |
192 | | - --color-border-400: 58, 58, 58; /* strong border- 2 */ |
193 | | - } |
194 | | - |
195 | | - [data-theme="dark"], |
196 | | - [data-theme="dark-contrast"] { |
197 | | - color-scheme: dark !important; |
198 | | - |
199 | | - --color-primary-10: 8, 31, 43; |
200 | | - --color-primary-20: 10, 37, 51; |
201 | | - --color-primary-30: 13, 49, 69; |
202 | | - --color-primary-40: 16, 58, 81; |
203 | | - --color-primary-50: 18, 68, 94; |
204 | | - --color-primary-60: 23, 86, 120; |
205 | | - --color-primary-70: 28, 104, 146; |
206 | | - --color-primary-80: 31, 116, 163; |
207 | | - --color-primary-90: 34, 129, 180; |
208 | | - --color-primary-100: 40, 146, 204; |
209 | | - --color-primary-200: 41, 154, 214; |
210 | | - --color-primary-300: 75, 170, 221; |
211 | | - --color-primary-400: 109, 186, 227; |
212 | | - --color-primary-500: 144, 202, 234; |
213 | | - --color-primary-600: 169, 214, 239; |
214 | | - --color-primary-700: 199, 229, 244; |
215 | | - --color-primary-800: 216, 237, 248; |
216 | | - --color-primary-900: 229, 243, 250; |
217 | | - |
218 | | - --color-background-100: 25, 25, 25; /* primary bg */ |
219 | | - --color-background-90: 32, 32, 32; /* secondary bg */ |
220 | | - --color-background-80: 44, 44, 44; /* tertiary bg */ |
221 | | - |
222 | | - --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); |
223 | | - --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5); |
224 | | - --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5); |
225 | | - --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5); |
226 | | - --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5); |
227 | | - --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55); |
228 | | - --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55); |
229 | | - --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6); |
230 | | - --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65); |
231 | | - } |
232 | | - |
233 | | - [data-theme="dark"] { |
234 | | - --color-text-100: 229, 229, 229; /* primary text */ |
235 | | - --color-text-200: 163, 163, 163; /* secondary text */ |
236 | | - --color-text-300: 115, 115, 115; /* tertiary text */ |
237 | | - --color-text-400: 82, 82, 82; /* placeholder text */ |
238 | | - |
239 | | - --color-scrollbar: 82, 82, 82; /* scrollbar thumb */ |
240 | | - |
241 | | - --color-border-100: 34, 34, 34; /* subtle border= 1 */ |
242 | | - --color-border-200: 38, 38, 38; /* subtle border- 2 */ |
243 | | - --color-border-300: 46, 46, 46; /* strong border- 1 */ |
244 | | - --color-border-400: 58, 58, 58; /* strong border- 2 */ |
245 | | - } |
246 | | - |
247 | | - [data-theme="dark-contrast"] { |
248 | | - --color-text-100: 250, 250, 250; /* primary text */ |
249 | | - --color-text-200: 241, 241, 241; /* secondary text */ |
250 | | - --color-text-300: 212, 212, 212; /* tertiary text */ |
251 | | - --color-text-400: 115, 115, 115; /* placeholder text */ |
252 | | - |
253 | | - --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ |
254 | | - |
255 | | - --color-border-100: 245, 245, 245; /* subtle border= 1 */ |
256 | | - --color-border-200: 229, 229, 229; /* subtle border- 2 */ |
257 | | - --color-border-300: 212, 212, 212; /* strong border- 1 */ |
258 | | - --color-border-400: 185, 185, 185; /* strong border- 2 */ |
259 | | - } |
260 | | - |
261 | | - [data-theme="light"], |
262 | | - [data-theme="dark"], |
263 | | - [data-theme="light-contrast"], |
264 | | - [data-theme="dark-contrast"] { |
265 | | - --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ |
266 | | - --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ |
267 | | - --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ |
268 | | - |
269 | | - --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ |
270 | | - --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ |
271 | | - --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ |
272 | | - --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ |
273 | | - |
274 | | - --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ |
275 | | - --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */ |
276 | | - --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */ |
277 | | - --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */ |
278 | | - } |
| 4 | +html { |
| 5 | + font-family: "Inter", sans-serif; |
279 | 6 | } |
280 | 7 |
|
281 | 8 | * { |
|
0 commit comments