-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.css
More file actions
160 lines (150 loc) · 5.5 KB
/
index.css
File metadata and controls
160 lines (150 loc) · 5.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
@import "tailwindcss";
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("./InterVariable.woff2") format("woff2");
}
/* Light theme (default) */
:root {
--bg-primary: 250 250 250; /* neutral-50 */
--bg-secondary: 241 245 249; /* slate-100 */
--bg-badge: 226 232 240; /* slate-200 */
--bg-badge-hover: 254 215 170; /* orange-200 */
--gradient-from: 254 215 170; /* orange-200 */
--text-primary: 15 23 42; /* slate-900 */
--text-secondary: 100 116 139; /* slate-500 */
--text-tertiary: 148 163 184; /* slate-400 */
--text-badge: 100 116 139; /* slate-500 */
--text-badge-hover: 71 85 105; /* slate-600 */
--text-muted: 203 213 225; /* slate-300 */
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: 15 23 42; /* slate-900 */
--bg-secondary: 30 41 59; /* slate-800 */
--bg-badge: 51 65 85; /* slate-700 */
--bg-badge-hover: 194 65 12; /* orange-700 */
--gradient-from: 194 65 12; /* orange-700 */
--text-primary: 248 250 252; /* slate-50 */
--text-secondary: 203 213 225; /* slate-300 */
--text-tertiary: 148 163 184; /* slate-400 */
--text-badge: 203 213 225; /* slate-300 */
--text-badge-hover: 226 232 240; /* slate-200 */
--text-muted: 71 85 105; /* slate-600 */
}
}
/* High contrast light theme */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
:root {
--bg-primary: 255 255 255; /* white */
--bg-secondary: 226 232 240; /* slate-200 */
--bg-badge: 203 213 225; /* slate-300 */
--bg-badge-hover: 251 146 60; /* orange-400 */
--gradient-from: 251 146 60; /* orange-400 */
--text-primary: 0 0 0; /* black */
--text-secondary: 30 41 59; /* slate-800 */
--text-tertiary: 71 85 105; /* slate-600 */
--text-badge: 30 41 59; /* slate-800 */
--text-badge-hover: 0 0 0; /* black */
--text-muted: 148 163 184; /* slate-400 */
}
}
/* High contrast dark theme */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root {
--bg-primary: 0 0 0; /* black */
--bg-secondary: 30 41 59; /* slate-800 */
--bg-badge: 71 85 105; /* slate-600 */
--bg-badge-hover: 255 140 0; /* bright orange */
--gradient-from: 255 140 0; /* bright orange */
--text-primary: 255 255 255; /* white */
--text-secondary: 226 232 240; /* slate-200 */
--text-tertiary: 203 213 225; /* slate-300 */
--text-badge: 241 245 249; /* slate-100 */
--text-badge-hover: 255 255 255; /* white */
--text-muted: 100 116 139; /* slate-500 */
}
}
/* Protanopia & Deuteranopia light theme (red-green color blindness) */
/* Uses blue-yellow contrasts instead of red-green */
@media (prefers-color-scheme: light) {
@supports (color: color(display-p3 1 1 1)) {
:root:has(body[data-cvd="protanopia"]),
:root:has(body[data-cvd="deuteranopia"]) {
--bg-primary: 250 250 250; /* neutral-50 */
--bg-secondary: 241 245 249; /* slate-100 */
--bg-badge: 219 234 254; /* blue-100 */
--bg-badge-hover: 147 197 253; /* blue-300 */
--gradient-from: 147 197 253; /* blue-300 */
--text-primary: 15 23 42; /* slate-900 */
--text-secondary: 71 85 105; /* slate-600 */
--text-tertiary: 100 116 139; /* slate-500 */
--text-badge: 30 64 175; /* blue-800 */
--text-badge-hover: 30 58 138; /* blue-900 */
--text-muted: 203 213 225; /* slate-300 */
}
}
}
/* Protanopia & Deuteranopia dark theme */
@media (prefers-color-scheme: dark) {
@supports (color: color(display-p3 1 1 1)) {
:root:has(body[data-cvd="protanopia"]),
:root:has(body[data-cvd="deuteranopia"]) {
--bg-primary: 15 23 42; /* slate-900 */
--bg-secondary: 30 41 59; /* slate-800 */
--bg-badge: 30 58 138; /* blue-900 */
--bg-badge-hover: 59 130 246; /* blue-500 */
--gradient-from: 59 130 246; /* blue-500 */
--text-primary: 248 250 252; /* slate-50 */
--text-secondary: 203 213 225; /* slate-300 */
--text-tertiary: 148 163 184; /* slate-400 */
--text-badge: 147 197 253; /* blue-300 */
--text-badge-hover: 191 219 254; /* blue-200 */
--text-muted: 71 85 105; /* slate-600 */
}
}
}
/* Protanopia & Deuteranopia high contrast light */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
@supports (color: color(display-p3 1 1 1)) {
:root:has(body[data-cvd="protanopia"]),
:root:has(body[data-cvd="deuteranopia"]) {
--bg-primary: 255 255 255; /* white */
--bg-secondary: 226 232 240; /* slate-200 */
--bg-badge: 191 219 254; /* blue-200 */
--bg-badge-hover: 96 165 250; /* blue-400 */
--gradient-from: 96 165 250; /* blue-400 */
--text-primary: 0 0 0; /* black */
--text-secondary: 30 41 59; /* slate-800 */
--text-tertiary: 51 65 85; /* slate-700 */
--text-badge: 29 78 216; /* blue-700 */
--text-badge-hover: 0 0 0; /* black */
--text-muted: 148 163 184; /* slate-400 */
}
}
}
/* Protanopia & Deuteranopia high contrast dark */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
@supports (color: color(display-p3 1 1 1)) {
:root:has(body[data-cvd="protanopia"]),
:root:has(body[data-cvd="deuteranopia"]) {
--bg-primary: 0 0 0; /* black */
--bg-secondary: 30 41 59; /* slate-800 */
--bg-badge: 29 78 216; /* blue-700 */
--bg-badge-hover: 96 165 250; /* blue-400 */
--gradient-from: 96 165 250; /* blue-400 */
--text-primary: 255 255 255; /* white */
--text-secondary: 226 232 240; /* slate-200 */
--text-tertiary: 203 213 225; /* slate-300 */
--text-badge: 219 234 254; /* blue-100 */
--text-badge-hover: 255 255 255; /* white */
--text-muted: 100 116 139; /* slate-500 */
}
}
}
body {
font-family: "InterVariable", sans-serif;
}