openstatus.dev
Openstatus
www.openstatus.dev
1@import 'tailwindcss';
2
3@plugin 'tailwindcss-animate';
4@plugin '@tailwindcss/container-queries';
5
6@source '../../../../packages/ui/**/*.{ts,tsx}';
7@source '../../node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}';
8
9@custom-variant dark (&:is(.dark *));
10
11@theme {
12 --color-background: var(--background);
13 --color-foreground: var(--foreground);
14 --color-sidebar-ring: var(--sidebar-ring);
15 --color-sidebar-border: var(--sidebar-border);
16 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
17 --color-sidebar-accent: var(--sidebar-accent);
18 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
19 --color-sidebar-primary: var(--sidebar-primary);
20 --color-sidebar-foreground: var(--sidebar-foreground);
21 --color-sidebar: var(--sidebar);
22 --color-chart-5: var(--chart-5);
23 --color-chart-4: var(--chart-4);
24 --color-chart-3: var(--chart-3);
25 --color-chart-2: var(--chart-2);
26 --color-chart-1: var(--chart-1);
27 --color-ring: var(--ring);
28 --color-input: var(--input);
29 --color-border: var(--border);
30 --color-destructive: var(--destructive);
31 --color-accent-foreground: var(--accent-foreground);
32 --color-accent: var(--accent);
33 --color-muted-foreground: var(--muted-foreground);
34 --color-muted: var(--muted);
35 --color-secondary-foreground: var(--secondary-foreground);
36 --color-secondary: var(--secondary);
37 --color-primary-foreground: var(--primary-foreground);
38 --color-primary: var(--primary);
39 --color-popover-foreground: var(--popover-foreground);
40 --color-popover: var(--popover);
41 --color-card-foreground: var(--card-foreground);
42 --color-card: var(--card);
43 --radius-sm: calc(var(--radius) - 4px);
44 --radius-md: calc(var(--radius) - 2px);
45 --radius-lg: var(--radius);
46 --radius-xl: calc(var(--radius) + 4px);
47
48 --color-success: var(--success);
49 --color-warning: var(--warning);
50 --color-info: var(--info);
51
52 --color-sh-class: var(--sh-class);
53 --color-sh-identifier: var(--sh-identifier);
54 --color-sh-sign: var(--sh-sign);
55 --color-sh-string: var(--sh-string);
56 --color-sh-keyword: var(--sh-keyword);
57 --color-sh-comment: var(--sh-comment);
58 --color-sh-jsxliterals: var(--sh-jsxliterals);
59 --color-sh-property: var(--sh-property);
60 --color-sh-entity: var(--sh-entity);
61
62 --font-sans:
63 var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
64 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
65 --font-cal: var(--font-calsans);
66
67 --animate-accordion-down: accordion-down 0.2s ease-out;
68 --animate-accordion-up: accordion-up 0.2s ease-out;
69
70 @keyframes accordion-down {
71 from {
72 height: 0;
73 }
74 to {
75 height: var(--radix-accordion-content-height);
76 }
77 }
78 @keyframes accordion-up {
79 from {
80 height: var(--radix-accordion-content-height);
81 }
82 to {
83 height: 0;
84 }
85 }
86}
87
88@utility container {
89 margin-inline: auto;
90 padding-inline: 2rem;
91 @media (width >= --theme(--breakpoint-sm)) {
92 max-width: none;
93 }
94 @media (width >= 1400px) {
95 max-width: 1400px;
96 }
97}
98
99/*
100 The default border color has changed to `currentcolor` in Tailwind CSS v4,
101 so we've added these compatibility styles to make sure everything still
102 looks the same as it did with Tailwind CSS v3.
103
104 If we ever want to remove these styles, we need to add an explicit border
105 color utility to any element that depends on these defaults.
106*/
107@layer base {
108 *,
109 ::after,
110 ::before,
111 ::backdrop,
112 ::file-selector-button {
113 border-color: var(--color-gray-200, currentcolor);
114 }
115}
116
117@layer base {
118 :root {
119 --radius: 0.625rem;
120 --background: oklch(1 0 0);
121 --foreground: oklch(0.145 0 0);
122 --card: oklch(1 0 0);
123 --card-foreground: oklch(0.145 0 0);
124 --popover: oklch(1 0 0);
125 --popover-foreground: oklch(0.145 0 0);
126 --primary: oklch(0.205 0 0);
127 --primary-foreground: oklch(0.985 0 0);
128 --secondary: oklch(0.97 0 0);
129 --secondary-foreground: oklch(0.205 0 0);
130 --muted: oklch(0.97 0 0);
131 --muted-foreground: oklch(0.556 0 0);
132 --accent: oklch(0.97 0 0);
133 --accent-foreground: oklch(0.205 0 0);
134 --destructive: oklch(0.577 0.245 27.325);
135 --border: oklch(0.922 0 0);
136 --input: oklch(0.922 0 0);
137 --ring: oklch(0.708 0 0);
138 --chart-1: oklch(0.646 0.222 41.116);
139 --chart-2: oklch(0.6 0.118 184.704);
140 --chart-3: oklch(0.398 0.07 227.392);
141 --chart-4: oklch(0.828 0.189 84.429);
142 --chart-5: oklch(0.769 0.188 70.08);
143 --sidebar: oklch(0.985 0 0);
144 --sidebar-foreground: oklch(0.145 0 0);
145 --sidebar-primary: oklch(0.205 0 0);
146 --sidebar-primary-foreground: oklch(0.985 0 0);
147 --sidebar-accent: oklch(0.97 0 0);
148 --sidebar-accent-foreground: oklch(0.205 0 0);
149 --sidebar-border: oklch(0.922 0 0);
150 --sidebar-ring: oklch(0.708 0 0);
151
152 --success: oklch(0.72 0.19 150);
153 --warning: oklch(0.77 0.16 70);
154 --info: oklch(0.62 0.19 260);
155
156 --rainbow-1: oklch(0.64 0.21 25);
157 --rainbow-2: oklch(0.70 0.19 48);
158 --rainbow-3: oklch(0.77 0.16 70);
159 --rainbow-4: oklch(0.80 0.16 86);
160 --rainbow-5: oklch(0.77 0.20 131);
161 --rainbow-6: oklch(0.72 0.19 150);
162 --rainbow-7: oklch(0.70 0.15 162);
163 --rainbow-8: oklch(0.70 0.12 183);
164 --rainbow-9: oklch(0.71 0.13 215);
165 --rainbow-10: oklch(0.68 0.15 237);
166 --rainbow-11: oklch(0.62 0.19 260);
167 --rainbow-12: oklch(0.59 0.20 277);
168 --rainbow-13: oklch(0.61 0.22 293);
169 --rainbow-14: oklch(0.63 0.23 304);
170 --rainbow-15: oklch(0.67 0.26 322);
171 --rainbow-16: oklch(0.66 0.21 354);
172 --rainbow-17: oklch(0.65 0.22 16);
173
174 --sh-class: #2d5e9d;
175 --sh-identifier: #354150;
176 --sh-sign: #8996a3;
177 --sh-string: #007f7a;
178 --sh-keyword: #e02518;
179 --sh-comment: #a19595;
180 --sh-jsxliterals: #6266d1;
181 --sh-property: #e25a1c;
182 --sh-entity: #e25a1c;
183 }
184
185 .dark {
186 --background: oklch(0.145 0 0);
187 --foreground: oklch(0.985 0 0);
188 --card: oklch(0.205 0 0);
189 --card-foreground: oklch(0.985 0 0);
190 --popover: oklch(0.205 0 0);
191 --popover-foreground: oklch(0.985 0 0);
192 --primary: oklch(0.922 0 0);
193 --primary-foreground: oklch(0.205 0 0);
194 --secondary: oklch(0.269 0 0);
195 --secondary-foreground: oklch(0.985 0 0);
196 --muted: oklch(0.269 0 0);
197 --muted-foreground: oklch(0.708 0 0);
198 --accent: oklch(0.269 0 0);
199 --accent-foreground: oklch(0.985 0 0);
200 --destructive: oklch(0.704 0.191 22.216);
201 --border: oklch(1 0 0 / 10%);
202 --input: oklch(1 0 0 / 15%);
203 --ring: oklch(0.556 0 0);
204 --chart-1: oklch(0.488 0.243 264.376);
205 --chart-2: oklch(0.696 0.17 162.48);
206 --chart-3: oklch(0.769 0.188 70.08);
207 --chart-4: oklch(0.627 0.265 303.9);
208 --chart-5: oklch(0.645 0.246 16.439);
209 --sidebar: oklch(0.205 0 0);
210 --sidebar-foreground: oklch(0.985 0 0);
211 --sidebar-primary: oklch(0.488 0.243 264.376);
212 --sidebar-primary-foreground: oklch(0.985 0 0);
213 --sidebar-accent: oklch(0.269 0 0);
214 --sidebar-accent-foreground: oklch(0.985 0 0);
215 --sidebar-border: oklch(1 0 0 / 10%);
216 --sidebar-ring: oklch(0.556 0 0);
217
218 --success: oklch(0.72 0.19 150);
219 --warning: oklch(0.77 0.16 70);
220 --info: oklch(0.62 0.19 260);
221
222 --rainbow-1: oklch(0.64 0.21 25);
223 --rainbow-2: oklch(0.70 0.19 48);
224 --rainbow-3: oklch(0.77 0.16 70);
225 --rainbow-4: oklch(0.80 0.16 86);
226 --rainbow-5: oklch(0.77 0.20 131);
227 --rainbow-6: oklch(0.72 0.19 150);
228 --rainbow-7: oklch(0.70 0.15 162);
229 --rainbow-8: oklch(0.70 0.12 183);
230 --rainbow-9: oklch(0.71 0.13 215);
231 --rainbow-10: oklch(0.68 0.15 237);
232 --rainbow-11: oklch(0.62 0.19 260);
233 --rainbow-12: oklch(0.59 0.20 277);
234 --rainbow-13: oklch(0.61 0.22 293);
235 --rainbow-14: oklch(0.63 0.23 304);
236 --rainbow-15: oklch(0.67 0.26 322);
237 --rainbow-16: oklch(0.66 0.21 354);
238 --rainbow-17: oklch(0.65 0.22 16);
239
240 --sh-class: #4c97f8;
241 --sh-identifier: white;
242 --sh-keyword: #f47067;
243 --sh-string: #0fa295;
244 }
245}
246
247@layer base {
248 * {
249 @apply border-border;
250 }
251 body {
252 @apply bg-background text-foreground;
253 }
254
255 .dark [data-theme='dark'] {
256 display: block;
257 }
258
259 [data-theme='dark'] {
260 display: none;
261 }
262
263 [data-theme='light'] {
264 display: block;
265 }
266
267 .dark [data-theme='light'] {
268 display: none;
269 }
270}
271
272/* Typography */
273
274::selection {
275 background-color: var(--color-primary);
276 color: var(--color-primary-foreground);
277}
278
279.prose {
280 @apply text-foreground/80;
281}
282
283.prose .anchor {
284 @apply absolute invisible no-underline;
285
286 margin-left: -1em;
287 padding-right: 0.5em;
288 width: 80%;
289 max-width: 700px;
290 cursor: pointer;
291}
292
293.anchor:hover {
294 @apply visible;
295}
296
297.prose a {
298 @apply text-foreground underline transition-all decoration-muted-foreground/50 underline-offset-2 decoration-2 hover:decoration-muted-foreground;
299}
300
301.prose .anchor:after {
302 @apply text-muted-foreground;
303 content: '#';
304}
305
306.prose *:hover > .anchor {
307 @apply visible;
308}
309
310.prose pre {
311 @apply relative bg-muted overflow-x-auto border border-border py-2.5 px-3.5 text-sm rounded-none;
312}
313
314.prose code {
315 @apply px-1 py-0.5 bg-muted text-muted-foreground;
316}
317
318.prose pre code {
319 @apply p-0;
320 border: initial;
321 line-height: 1.5;
322}
323
324.prose code span {
325 @apply font-medium;
326}
327
328.prose img {
329 /* Don't apply styles to next/image */
330 @apply m-0;
331}
332
333.prose p {
334 @apply my-4 leading-7;
335}
336
337.prose h1 {
338 @apply text-3xl text-foreground font-medium tracking-tight my-4 relative;
339}
340
341
342.prose h2 {
343 @apply text-2xl text-foreground font-medium tracking-tight my-4 relative;
344}
345
346.prose h3 {
347 @apply text-xl text-foreground font-medium tracking-tight my-4 relative;
348}
349
350.prose h4 {
351 @apply text-lg text-foreground font-medium tracking-tight my-4 relative;
352}
353
354.prose hr {
355 @apply my-4 border-border;
356}
357
358.prose strong {
359 @apply text-foreground font-semibold;
360}
361
362.prose blockquote {
363 @apply border-l-2 border-foreground/50 pl-4;
364}
365
366.prose blockquote p::before {
367 content: '"';
368 @apply text-muted-foreground;
369}
370
371.prose blockquote p::after {
372 content: '"';
373 @apply text-muted-foreground;
374}
375
376.prose figure {
377 @apply my-4;
378}
379
380.prose figure img {
381 @apply aspect-video object-cover border border-border;
382}
383
384.prose figure figcaption {
385 @apply text-sm text-muted-foreground not-empty:mt-1;
386}
387
388.prose em {
389 @apply text-foreground italic;
390}
391
392.prose ul {
393 list-style-type: "- ";
394 @apply pl-4 list-outside marker:text-muted-foreground;
395}
396
397.prose ol {
398 /* NOTE: maybe replace by default pl and list-inside */
399 @apply pl-4 list-outside list-decimal marker:text-muted-foreground;
400}
401
402.prose li {
403 @apply leading-7;
404}
405
406.prose details {
407 @apply border border-border p-4 my-4;
408}
409
410.prose details p:last-child {
411 @apply mb-0;
412}
413
414.prose details summary {
415 @apply cursor-pointer font-medium text-foreground select-none;
416}
417
418.prose details summary:hover {
419 @apply bg-muted;
420}
421
422.prose details summary::marker {
423 @apply mr-1;
424}
425
426.prose details[open] summary {
427 @apply mb-2;
428}
429
430.prose form {
431 @apply my-4;
432}
433
434.prose form label {
435 @apply text-foreground font-medium;
436}
437
438/* Wrapper for scrollable tables */
439.prose .table-wrapper {
440 @apply w-full overflow-x-auto my-4;
441}
442
443.prose table {
444 @apply w-full border-collapse border border-border text-foreground;
445}
446
447.prose table th {
448 @apply font-medium bg-muted/50 p-4 text-left border border-border;
449}
450
451.prose table td {
452 @apply font-normal p-4 border border-border;
453}
454
455.prose table caption {
456 @apply text-muted-foreground text-sm caption-bottom mt-4;
457}
458
459pre::-webkit-scrollbar {
460 display: none;
461}
462
463pre {
464 -ms-overflow-style: none; /* IE and Edge */
465 scrollbar-width: none; /* Firefox */
466}
467
468/* Remove Safari input shadow on mobile */
469input[type='text'],
470input[type='email'] {
471 -webkit-appearance: none;
472 -moz-appearance: none;
473 appearance: none;
474}
475
476.title {
477 text-wrap: balance;
478}