My agentic slop goes here. Not intended for anyone else!
anil.recoil.org
1/**
2 * Arod Theming System
3 * Semantic CSS variables for comprehensive theming support
4 */
5
6:root {
7 /* Typography */
8 --font-family-base: system-ui, -apple-system, sans-serif;
9 --font-family-mono: 'SF Mono', Consolas, monospace;
10 --font-size-base: 0.9em;
11 --font-size-small: 0.85em;
12 --font-size-tiny: 0.75em;
13 --line-height-base: 1.45;
14
15 /* Spacing */
16 --spacing-xs: 0.25rem;
17 --spacing-sm: 0.5rem;
18 --spacing-md: 1rem;
19 --spacing-lg: 1.5rem;
20 --spacing-xl: 2rem;
21
22 /* Border radius */
23 --radius-sm: 3px;
24 --radius-md: 4px;
25 --radius-lg: 8px;
26 --radius-full: 50%;
27
28 /* Transitions */
29 --transition-fast: 0.2s ease;
30 --transition-medium: 0.3s ease;
31 --transition-slow: 0.5s ease;
32}
33
34/* Light Theme (Default) */
35[data-theme="light"] {
36 /* Primary colors */
37 --color-bg-primary: #fffffc;
38 --color-bg-secondary: #fafafa;
39 --color-bg-tertiary: #f5f5f5;
40
41 /* Text colors */
42 --color-text-primary: #1a1a1a;
43 --color-text-secondary: #666;
44 --color-text-muted: #999;
45 --color-text-inverse: #ffffff;
46
47 /* Interactive colors */
48 --color-link: #090c8d;
49 --color-link-hover: #0066cc;
50 --color-accent: #090c8d;
51 --color-accent-hover: #0066cc;
52
53 /* UI colors */
54 --color-border: #e0e0e0;
55 --color-border-light: #f0f0f0;
56 --color-border-dark: #ccc;
57
58 /* Code block colors */
59 --color-code-bg: rgba(0, 0, 0, 0.05);
60 --color-code-block-bg: rgba(0, 0, 0, 0.03);
61 --color-code-text: inherit;
62
63 /* Sidenote colors */
64 --color-sidenote-bg: #fafafa;
65 --color-sidenote-border: #e0e0e0;
66 --color-sidenote-text: #666;
67 --color-sidenote-number: #090c8d;
68 --color-sidenote-highlight-bg: #090c8d;
69 --color-sidenote-highlight-text: #ffffff;
70 --color-sidenote-ref-bg: rgba(9, 12, 141, 0.08);
71 --color-sidenote-ref-border: rgba(9, 12, 141, 0.2);
72
73 /* State colors */
74 --color-hover-bg: rgba(9, 12, 141, 0.05);
75 --color-active-bg: rgba(9, 12, 141, 0.1);
76 --color-selected-bg: rgba(9, 12, 141, 0.15);
77
78 /* Shadow */
79 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
80 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
81 --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
82}
83
84/* Dark Theme */
85[data-theme="dark"] {
86 /* Primary colors */
87 --color-bg-primary: #1a1a1a;
88 --color-bg-secondary: #252525;
89 --color-bg-tertiary: #2a2a2a;
90
91 /* Text colors */
92 --color-text-primary: #e0e0e0;
93 --color-text-secondary: #999;
94 --color-text-muted: #777;
95 --color-text-inverse: #1a1a1a;
96
97 /* Interactive colors */
98 --color-link: #4db8ff;
99 --color-link-hover: #66c7ff;
100 --color-accent: #4db8ff;
101 --color-accent-hover: #66c7ff;
102
103 /* UI colors */
104 --color-border: #444;
105 --color-border-light: #333;
106 --color-border-dark: #555;
107
108 /* Code block colors */
109 --color-code-bg: rgba(255, 255, 255, 0.04);
110 --color-code-block-bg: #0d0d0d;
111 --color-code-text: inherit;
112
113 /* Sidenote colors */
114 --color-sidenote-bg: #1f1f1f;
115 --color-sidenote-border: #333;
116 --color-sidenote-text: #999;
117 --color-sidenote-number: #4db8ff;
118 --color-sidenote-highlight-bg: #4db8ff;
119 --color-sidenote-highlight-text: #1a1a1a;
120 --color-sidenote-ref-bg: rgba(77, 184, 255, 0.1);
121 --color-sidenote-ref-border: rgba(77, 184, 255, 0.3);
122
123 /* State colors */
124 --color-hover-bg: rgba(77, 184, 255, 0.1);
125 --color-active-bg: rgba(77, 184, 255, 0.2);
126 --color-selected-bg: rgba(77, 184, 255, 0.3);
127
128 /* Shadow */
129 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
130 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
131 --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
132}
133
134/* High Contrast Theme */
135[data-theme="high-contrast"] {
136 /* Primary colors */
137 --color-bg-primary: #ffffff;
138 --color-bg-secondary: #f0f0f0;
139 --color-bg-tertiary: #e0e0e0;
140
141 /* Text colors */
142 --color-text-primary: #000000;
143 --color-text-secondary: #333333;
144 --color-text-muted: #555555;
145 --color-text-inverse: #ffffff;
146
147 /* Interactive colors */
148 --color-link: #0000ff;
149 --color-link-hover: #000080;
150 --color-accent: #0000ff;
151 --color-accent-hover: #000080;
152
153 /* UI colors */
154 --color-border: #000000;
155 --color-border-light: #333333;
156 --color-border-dark: #000000;
157
158 /* Code block colors */
159 --color-code-bg: #f0f0f0;
160 --color-code-block-bg: #e0e0e0;
161 --color-code-text: #000000;
162
163 /* Sidenote colors */
164 --color-sidenote-bg: #f0f0f0;
165 --color-sidenote-border: #000000;
166 --color-sidenote-text: #000000;
167 --color-sidenote-number: #0000ff;
168 --color-sidenote-highlight-bg: #000000;
169 --color-sidenote-highlight-text: #ffffff;
170 --color-sidenote-ref-bg: #e0e0e0;
171 --color-sidenote-ref-border: #000000;
172
173 /* State colors */
174 --color-hover-bg: #e0e0e0;
175 --color-active-bg: #d0d0d0;
176 --color-selected-bg: #c0c0c0;
177
178 /* Shadow */
179 --shadow-sm: 0 0 0 1px #000000;
180 --shadow-md: 0 0 0 2px #000000;
181 --shadow-lg: 0 0 0 3px #000000;
182}
183
184/* Colorblind-friendly Theme (Deuteranopia/Protanopia optimized) */
185[data-theme="colorblind"] {
186 /* Primary colors */
187 --color-bg-primary: #fffffc;
188 --color-bg-secondary: #fafafa;
189 --color-bg-tertiary: #f5f5f5;
190
191 /* Text colors */
192 --color-text-primary: #1a1a1a;
193 --color-text-secondary: #666;
194 --color-text-muted: #999;
195 --color-text-inverse: #ffffff;
196
197 /* Interactive colors (Blue-Orange contrast) */
198 --color-link: #0066cc;
199 --color-link-hover: #0052a3;
200 --color-accent: #ff8800;
201 --color-accent-hover: #ff6600;
202
203 /* UI colors */
204 --color-border: #e0e0e0;
205 --color-border-light: #f0f0f0;
206 --color-border-dark: #ccc;
207
208 /* Code block colors */
209 --color-code-bg: rgba(0, 102, 204, 0.08);
210 --color-code-block-bg: rgba(0, 102, 204, 0.05);
211 --color-code-text: inherit;
212
213 /* Sidenote colors */
214 --color-sidenote-bg: #f8f9fc;
215 --color-sidenote-border: #0066cc;
216 --color-sidenote-text: #666;
217 --color-sidenote-number: #ff8800;
218 --color-sidenote-highlight-bg: #ff8800;
219 --color-sidenote-highlight-text: #ffffff;
220 --color-sidenote-ref-bg: rgba(255, 136, 0, 0.1);
221 --color-sidenote-ref-border: rgba(255, 136, 0, 0.4);
222
223 /* State colors */
224 --color-hover-bg: rgba(0, 102, 204, 0.1);
225 --color-active-bg: rgba(0, 102, 204, 0.2);
226 --color-selected-bg: rgba(255, 136, 0, 0.2);
227
228 /* Shadow */
229 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
230 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
231 --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
232}
233
234/* Sepia Theme (Reading comfort) */
235[data-theme="sepia"] {
236 /* Primary colors */
237 --color-bg-primary: #f4f1e8;
238 --color-bg-secondary: #ebe6d6;
239 --color-bg-tertiary: #e0dac8;
240
241 /* Text colors */
242 --color-text-primary: #3a3328;
243 --color-text-secondary: #5a5345;
244 --color-text-muted: #7a7365;
245 --color-text-inverse: #f4f1e8;
246
247 /* Interactive colors */
248 --color-link: #704214;
249 --color-link-hover: #5a3310;
250 --color-accent: #8b4513;
251 --color-accent-hover: #704214;
252
253 /* UI colors */
254 --color-border: #d0c8b8;
255 --color-border-light: #e0d8c8;
256 --color-border-dark: #c0b8a8;
257
258 /* Code block colors */
259 --color-code-bg: rgba(139, 69, 19, 0.08);
260 --color-code-block-bg: rgba(139, 69, 19, 0.05);
261 --color-code-text: inherit;
262
263 /* Sidenote colors */
264 --color-sidenote-bg: #ebe6d6;
265 --color-sidenote-border: #c0b8a8;
266 --color-sidenote-text: #5a5345;
267 --color-sidenote-number: #8b4513;
268 --color-sidenote-highlight-bg: #8b4513;
269 --color-sidenote-highlight-text: #f4f1e8;
270 --color-sidenote-ref-bg: rgba(139, 69, 19, 0.1);
271 --color-sidenote-ref-border: rgba(139, 69, 19, 0.3);
272
273 /* State colors */
274 --color-hover-bg: rgba(139, 69, 19, 0.1);
275 --color-active-bg: rgba(139, 69, 19, 0.15);
276 --color-selected-bg: rgba(139, 69, 19, 0.2);
277
278 /* Shadow */
279 --shadow-sm: 0 2px 4px rgba(58, 51, 40, 0.1);
280 --shadow-md: 0 4px 12px rgba(58, 51, 40, 0.15);
281 --shadow-lg: 0 8px 24px rgba(58, 51, 40, 0.2);
282}
283
284/* Apply system preference when theme is set to system */
285[data-theme="system"] {
286 /* Will inherit from either light or dark based on JS logic */
287}
288
289/* Ensure smooth transitions when changing themes */
290* {
291 transition: background-color var(--transition-medium),
292 color var(--transition-medium),
293 border-color var(--transition-medium);
294}