openstatus.dev
Openstatus
www.openstatus.dev
1@import 'tailwindcss';
2
3@plugin 'tailwindcss-animate';
4@plugin '@tailwindcss/container-queries';
5@plugin '@tailwindcss/typography';
6
7@source '../../../../packages/ui/**/*.{ts,tsx}';
8@source '../../../../packages/tracker/**/*.{ts,tsx}';
9@source '../../node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}';
10
11@custom-variant dark (&:is(.dark *));
12
13@theme {
14 --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
15
16 --color-border: hsl(var(--border));
17 --color-input: hsl(var(--input));
18 --color-ring: hsl(var(--ring));
19 --color-background: hsl(var(--background));
20 --color-foreground: hsl(var(--foreground));
21
22 --color-primary: hsl(var(--primary));
23 --color-primary-foreground: hsl(var(--primary-foreground));
24
25 --color-secondary: hsl(var(--secondary));
26 --color-secondary-foreground: hsl(var(--secondary-foreground));
27
28 --color-destructive: hsl(var(--destructive));
29 --color-destructive-foreground: hsl(var(--destructive-foreground));
30
31 --color-muted: hsl(var(--muted));
32 --color-muted-foreground: hsl(var(--muted-foreground));
33
34 --color-accent: hsl(var(--accent));
35 --color-accent-foreground: hsl(var(--accent-foreground));
36
37 --color-popover: hsl(var(--popover));
38 --color-popover-foreground: hsl(var(--popover-foreground));
39
40 --color-card: hsl(var(--card));
41 --color-card-foreground: hsl(var(--card-foreground));
42
43 --color-status-operational: hsl(var(--status-operational));
44
45 --color-status-degraded: hsl(var(--status-degraded));
46
47 --color-status-down: hsl(var(--status-down));
48
49 --color-status-monitoring: hsl(var(--status-monitoring));
50
51 --radius-lg: var(--radius);
52 --radius-md: calc(var(--radius) - 2px);
53 --radius-sm: calc(var(--radius) - 4px);
54
55 --font-sans:
56 var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
57 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
58 --font-cal: var(--font-calsans);
59
60 --animate-accordion-down: accordion-down 0.2s ease-out;
61 --animate-accordion-up: accordion-up 0.2s ease-out;
62
63 @keyframes accordion-down {
64 from {
65 height: 0;
66 }
67 to {
68 height: var(--radix-accordion-content-height);
69 }
70 }
71 @keyframes accordion-up {
72 from {
73 height: var(--radix-accordion-content-height);
74 }
75 to {
76 height: 0;
77 }
78 }
79}
80
81@utility container {
82 margin-inline: auto;
83 padding-inline: 2rem;
84 @media (width >= --theme(--breakpoint-sm)) {
85 max-width: none;
86 }
87 @media (width >= 1400px) {
88 max-width: 1400px;
89 }
90}
91
92/*
93 The default border color has changed to `currentcolor` in Tailwind CSS v4,
94 so we've added these compatibility styles to make sure everything still
95 looks the same as it did with Tailwind CSS v3.
96
97 If we ever want to remove these styles, we need to add an explicit border
98 color utility to any element that depends on these defaults.
99*/
100@layer base {
101 *,
102 ::after,
103 ::before,
104 ::backdrop,
105 ::file-selector-button {
106 border-color: var(--color-gray-200, currentcolor);
107 }
108}
109
110@layer base {
111 :root {
112 --background: 0 0% 100%;
113 --foreground: 222.2 84% 4.9%;
114
115 --muted: 210 40% 96.1%;
116 --muted-foreground: 215.4 16.3% 46.9%;
117
118 --popover: 0 0% 100%;
119 --popover-foreground: 222.2 84% 4.9%;
120
121 --card: 0 0% 100%;
122 --card-foreground: 222.2 84% 4.9%;
123
124 --border: 214.3 31.8% 91.4%;
125 --input: 214.3 31.8% 91.4%;
126
127 --primary: 222.2 47.4% 11.2%;
128 --primary-foreground: 210 40% 98%;
129
130 --secondary: 210 40% 96.1%;
131 --secondary-foreground: 222.2 47.4% 11.2%;
132
133 --accent: 210 40% 96.1%;
134 --accent-foreground: 222.2 47.4% 11.2%;
135
136 --destructive: 0 84.2% 60.2%;
137 --destructive-foreground: 210 40% 98%;
138
139 --ring: 215 20.2% 65.1%;
140
141 --radius: 0.5rem;
142
143 /** Chart Colors */
144 --chart-1: 12 76% 61%;
145 --chart-2: 173 58% 39%;
146 --chart-3: 197 37% 24%;
147 --chart-4: 43 74% 66%;
148 --chart-5: 27 87% 67%;
149
150 /* Status Tracker Colors - Radix Color */
151 --status-degraded: 50 100% 52%; /* Amber 10 */
152 --status-operational: 131 39% 51%; /* Grass 10 */
153 --status-down: 11 82% 59%; /* Tomato 10 */
154 --status-monitoring: 210 100% 62%; /* Blue 10 */
155 }
156
157 .dark {
158 --background: 222.2 84% 4.9%;
159 --foreground: 210 40% 98%;
160
161 --muted: 217.2 32.6% 17.5%;
162 --muted-foreground: 215 20.2% 65.1%;
163
164 --popover: 222.2 84% 4.9%;
165 --popover-foreground: 210 40% 98%;
166
167 --card: 222.2 84% 4.9%;
168 --card-foreground: 210 40% 98%;
169
170 --border: 217.2 32.6% 17.5%;
171 --input: 217.2 32.6% 17.5%;
172
173 --primary: 210 40% 98%;
174 --primary-foreground: 222.2 47.4% 11.2%;
175
176 --secondary: 217.2 32.6% 17.5%;
177 --secondary-foreground: 210 40% 98%;
178
179 --accent: 217.2 32.6% 17.5%;
180 --accent-foreground: 210 40% 98%;
181
182 --destructive: 0 62.8% 30.6%;
183 --destructive-foreground: 0 85.7% 97.3%;
184
185 --ring: 217.2 32.6% 17.5%;
186
187 /* Chart Colors */
188 --chart-1: 220 70% 50%;
189 --chart-2: 160 60% 45%;
190 --chart-3: 30 80% 55%;
191 --chart-4: 280 65% 60%;
192 --chart-5: 340 75% 55%;
193
194 /* Status Tracker Colors - Radix Color */
195 --status-degraded: 50 100% 52%; /* Amber 10 */
196 --status-operational: 131 39% 51%; /* Grass 10 */
197 --status-down: 11 82% 59%; /* Tomato 10 */
198 --status-monitoring: 210 100% 62%; /* Blue 10 */
199
200 }
201}
202
203@layer base {
204 * {
205 @apply border-border;
206 }
207 body {
208 @apply bg-background text-foreground;
209 }
210
211 [data-highlighted-chars] {
212 @apply bg-muted rounded;
213 }
214
215 [data-highlighted-line] {
216 @apply bg-muted rounded;
217 }
218
219 [data-rehype-pretty-code-caption] {
220 @apply mt-1 text-muted-foreground text-xs;
221 }
222
223 [data-rehype-pretty-code-title] {
224 @apply mb-1 text-muted-foreground text-xs font-mono;
225 }
226
227 .dark [data-theme='dark'] {
228 display: block;
229 }
230
231 [data-theme='dark'] {
232 display: none;
233 }
234
235 [data-theme='light'] {
236 display: block;
237 }
238
239 .dark [data-theme='light'] {
240 display: none;
241 }
242}