openstatus.dev
Openstatus
www.openstatus.dev
1@layer base, starlight, theme, components, utilities;
2
3@import '@astrojs/starlight-tailwind';
4@import 'tailwindcss/theme.css' layer(theme);
5@import 'tailwindcss/utilities.css' layer(utilities);
6
7@theme {
8 --font-cal: "calsans", "sans-serif";
9 --font-mono: 'CommitMono', 'sans-serif';
10 --font-sans: 'Inter', 'sans-serif';
11}
12
13@layer base {
14 @font-face {
15 font-family: 'calsans';
16 src: url('/fonts/CalSans-SemiBold.ttf') format('truetype');
17 font-weight: 600;
18 font-style: normal;
19 font-display: swap;
20 }
21 @font-face {
22 font-family: 'CommitMono';
23 src:
24 url('/fonts/CommitMono-400-Regular.otf') format('opentype');
25 font-weight: 400;
26 font-style: normal;
27 font-display: swap;
28 }
29 @font-face {
30 font-family: 'CommitMono';
31 src:
32 url('/fonts/CommitMono-700-Regular.otf') format('opentype');
33 font-weight: 700;
34 font-style: normal;
35 font-display: swap;
36 }
37
38 @font-face {
39 font-family: 'Inter Variable';
40 font-style: normal;
41 font-display: swap;
42 font-weight: 100 900;
43 src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
44 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
45 }
46}
47
48@layer base {
49 h1 {
50 letter-spacing: var(--tracking-tight);
51 }
52 h2 {
53 letter-spacing: var(--tracking-tighter);
54 }
55
56
57 :root[data-theme='light'] {
58 --background: 0 0% 100%;
59 --foreground: 222.2 84% 4.9%;
60
61 --muted: 210 40% 96.1%;
62 --muted-foreground: 215.4 16.3% 46.9%;
63
64 --popover: 0 0% 100%;
65 --popover-foreground: 222.2 84% 4.9%;
66
67 --card: 0 0% 100%;
68 --card-foreground: 222.2 84% 4.9%;
69
70 --border: 214.3 31.8% 91.4%;
71 --input: 214.3 31.8% 91.4%;
72
73 --primary: 222.2 47.4% 11.2%;
74 --primary-foreground: 210 40% 98%;
75
76 --secondary: 210 40% 96.1%;
77 --secondary-foreground: 222.2 47.4% 11.2%;
78
79 --accent: 210 40% 96.1%;
80 --accent-foreground: 222.2 47.4% 11.2%;
81
82 --destructive: 0 84.2% 60.2%;
83 --destructive-foreground: 210 40% 98%;
84
85 --ring: 215 20.2% 65.1%;
86
87 --radius: 0.5rem;
88
89 /** Chart Colors */
90 --chart-1: 12 76% 61%;
91 --chart-2: 173 58% 39%;
92 --chart-3: 197 37% 24%;
93 --chart-4: 43 74% 66%;
94 --chart-5: 27 87% 67%;
95
96 /* Status Tracker Colors - Radix Color */
97 --status-degraded: 50 100% 52%; /* Amber 10 */
98 --status-operational: 131 39% 51%; /* Grass 10 */
99 --status-down: 11 82% 59%; /* Tomato 10 */
100 --status-monitoring: 210 100% 62%; /* Blue 10 */
101 }
102
103 :root {
104 --background: 222.2 84% 4.9%;
105 --foreground: 210 40% 98%;
106
107 --muted: 217.2 32.6% 17.5%;
108 --muted-foreground: 215 20.2% 65.1%;
109
110 --popover: 222.2 84% 4.9%;
111 --popover-foreground: 210 40% 98%;
112
113 --card: 222.2 84% 4.9%;
114 --card-foreground: 210 40% 98%;
115
116 --border: 217.2 32.6% 17.5%;
117 --input: 217.2 32.6% 17.5%;
118
119 --primary: 210 40% 98%;
120 --primary-foreground: 222.2 47.4% 11.2%;
121
122 --secondary: 217.2 32.6% 17.5%;
123 --secondary-foreground: 210 40% 98%;
124
125 --accent: 217.2 32.6% 17.5%;
126 --accent-foreground: 210 40% 98%;
127
128 --destructive: 0 62.8% 30.6%;
129 --destructive-foreground: 0 85.7% 97.3%;
130
131 --ring: 217.2 32.6% 17.5%;
132
133 /* Chart Colors */
134 --chart-1: 220 70% 50%;
135 --chart-2: 160 60% 45%;
136 --chart-3: 30 80% 55%;
137 --chart-4: 280 65% 60%;
138 --chart-5: 340 75% 55%;
139
140 /* Status Tracker Colors - Radix Color */
141 --status-degraded: 50 100% 52%; /* Amber 10 */
142 --status-operational: 131 39% 51%; /* Grass 10 */
143 --status-down: 11 82% 59%; /* Tomato 10 */
144 --status-monitoring: 210 100% 62%; /* Blue 10 */
145
146 }
147 }
148
149/* https://ui.shadcn.com/colors */
150
151/* Dark mode colors. */
152:root {
153 --sl-color-accent-low: #020817;
154 --sl-color-accent: #f8fafc;
155 --sl-color-accent-high: #f1f5f9;
156 --sl-color-white: #f8fafc;
157 --sl-color-gray-1: #f1f5f9;
158 --sl-color-gray-2: #94a3b8;
159 --sl-color-gray-3: #64748b;
160 --sl-color-gray-4: #475569;
161 --sl-color-gray-5: #1e293b;
162 --sl-color-gray-6: #0f172a;
163 --sl-color-black: #020817;
164}
165
166/* Light mode colors. */
167:root[data-theme='light'] {
168 --sl-color-accent-low: #f8fafc;
169 --sl-color-accent: #020817;
170 --sl-color-accent-high: #0f172a;
171 --sl-color-white: #020817;
172 --sl-color-gray-1: #0f172a;
173 --sl-color-gray-2: #1e293b;
174 --sl-color-gray-3: #475569;
175 --sl-color-gray-4: #64748b;
176 --sl-color-gray-5: #94a3b8;
177 --sl-color-gray-6: #f1f5f9;
178 --sl-color-gray-7: #f8fafc;
179 --sl-color-black: #ffffff;
180}