1@import url("theme-snowstorm.css");
2@import url("theme-polarnight.css");
3@import url("theme-ketivah.css");
4@import url("theme-mangotango.css");
5@import url("theme-playground.css");
6@import url("theme-beeninorder.css");
7
8:root {
9/* ---------- PRIMARY COLORS ----------------- */
10--primary-color-1: hsl(217.5, 26.7%, 94.1%);
11 --primary-color-1-hue: 217.5;
12 --primary-color-1-saturation: 26.7%;
13 --primary-color-1-lightness: 94.1%;
14
15--primary-color-2: hsl(218.2, 26.8%, 92.0%);
16 --primary-color-2-hue: 218.2;
17 --primary-color-2-saturation: 26.8%;
18 --primary-color-2-lightness: 92.0%;
19
20--primary-color-3: hsl(218.8, 27.9%, 88.0%);
21 --primary-color-3-hue: 218.8;
22 --primary-color-3-saturation: 27.9%;
23 --primary-color-3-lightness: 88.0%;
24
25--primary-color-4: hsl(218.8, 18.3%, 81.8%);
26 --primary-color-4-hue: 218.8;
27 --primary-color-4-saturation: 18.3%;
28 --primary-color-4-lightness: 81.8%;
29
30
31/* ---------- SECONDARY COLORS --------------- */
32--secondary-color-1: hsl(220.0, 16.4%, 21.6%);
33 --secondary-color-1-hue: 220.0;
34 --secondary-color-1-saturation: 16.4%;
35 --secondary-color-1-lightness: 21.6%;
36
37--secondary-color-2: hsl(221.7, 16.3%, 27.6%);
38 --secondary-color-2-hue: 221.7;
39 --secondary-color-2-saturation: 16.3%;
40 --secondary-color-2-lightness: 27.6%;
41
42--secondary-color-3: hsl(220.0, 16.8%, 31.6%);
43 --secondary-color-3-hue: 220.0;
44 --secondary-color-3-saturation: 16.8%;
45 --secondary-color-3-lightness: 31.6%;
46
47--secondary-color-4: hsl(220.0, 16.5%, 35.7%);
48 --secondary-color-4-hue: 220.0;
49 --secondary-color-4-saturation: 16.5%;
50 --secondary-color-4-lightness: 35.7%;
51
52
53
54/* ----------- NUANCES COLORS ---------------- */
55--theme-nuance-color-1: hsl(178.7, 25.1%, 64.9%);
56 --theme-nuance-color-1-hue: 178.7;
57 --theme-nuance-color-1-saturation: 25.1%;
58 --theme-nuance-color-1-lightness: 64.9%;
59
60--theme-nuance-color-2: hsl(193.3, 43.4%, 67.5%);
61 --theme-nuance-color-2-hue: 193.3;
62 --theme-nuance-color-2-saturation: 43.4%;
63 --theme-nuance-color-2-lightness: 67.5%;
64
65--theme-nuance-color-3: hsl(210.0, 34.0%, 63.1%);
66 --theme-nuance-color-3-hue: 210.0;
67 --theme-nuance-color-3-saturation: 34.0%;
68 --theme-nuance-color-3-lightness: 63.1%;
69
70--theme-nuance-color-4: hsl(213.1, 32.0%, 52.2%);
71 --theme-nuance-color-4-hue: 213.1;
72 --theme-nuance-color-4-saturation: 32.0%;
73 --theme-nuance-color-4-lightness: 52.2%;
74
75
76
77/* ----------- ROYGP COLORS ------------------ */
78--theme-red-color: hsl(32.5, 80%, 50%);
79--theme-orange-color: hsl(32.5, 70%, 45%);
80--theme-yellow-color: hsl(40.0, 0.6%, 73.3%);
81--theme-green-color: hsl(92.4, 27.8%, 64.7%);
82--theme-purple-color: hsl(311.1, 20.2%, 63.1%);
83
84
85
86/* ------------------------------------------- */
87--background-color-1: var(--primary-color-1);
88--background-color-2: var(--primary-color-2);
89--background-color-3: var(--primary-color-3);
90--background-color-4: var(--primary-color-4);
91
92--border-color-1: var(--primary-color-2);
93--border-color-2: var(--primary-color-3);
94--border-color-3: var(--primary-color-4);
95
96--border-focus-color: var(--theme-nuance-color-2);
97--border-focus-shadow: var(--theme-nuance-color-1);
98
99--text-color-plain: var(--secondary-color-1);
100--text-color-subtile-1: var(--secondary-color-2);
101--text-color-subtile-2: var(--secondary-color-3);
102
103--code-background-color: var(--secondary-color-2);
104--code-text-color: var(--primary-color-2);
105
106--ui-range-thumb-color: var(--theme-nuance-color-3);
107--ui-range-thumb-border: var(--ui-ranger-thumb-color);
108
109--textarea-border-color: var(--secondary-color-4);
110
111--chat-id-color: var(--theme-nuance-color-4);
112
113
114
115/* ------------------------------------------- */
116--button-alert-text-hover: var(--primary-color-1);
117--button-alert-color-hover: var(--theme-orange-color);
118--button-alert-border-hover: var(--theme-orange-color);
119
120--button-alert-text-active: var(--primary-color-1);
121--button-alert-color-active: var(--theme-red-color);
122--button-alert-border-active: var(--theme-red-color);
123
124
125
126/* ----------- PRIMARY BUTTONS --------------- */
127/* - button should immediately catch the eye - */
128--button-primary-text: var(--secondary-color-1);
129--button-primary-color: var(--theme-nuance-color-3);
130--button-primary-border: var(--theme-nuance-color-3);
131
132
133/* ---------hover---------- */
134--button-primary-text-hover:
135 hsl(217.5,
136 calc(var(--secondary-color-1-saturation) + 35%),
137 calc(var(--secondary-color-1-lightness) - 30%));
138
139--button-primary-color-hover:
140 hsl(210,
141 calc(var(--theme-nuance-color-3-saturation) - 2%),
142 calc(var(--theme-nuance-color-3-lightness) - 10%));
143
144--button-primary-border-hover:
145 hsl(210,
146 calc(var(--theme-nuance-color-3-saturation) - 2%),
147 calc(var(--theme-nuance-color-3-lightness) - 10%));
148
149
150/* ---------active--------- */
151--button-primary-text-active:
152 hsl(210,
153 calc(var(--theme-nuance-color-3-saturation) - 20%),
154 calc(var(--theme-nuance-color-3-lightness) + 35%));
155
156--button-primary-color-active:
157 hsl(210,
158 calc(var(--theme-nuance-color-3-saturation) - 10%),
159 calc(var(--theme-nuance-color-3-lightness) - 25%));
160
161--button-primary-border-active:
162 hsl(210,
163 calc(var(--theme-nuance-color-3-saturation) - 10%),
164 calc(var(--theme-nuance-color-3-lightness) - 25%));
165
166
167
168/* ---------- SECONDARY BUTTONS -------------- */
169/* these should NOT immediately catch the eye */
170--button-secondary-text:
171 hsl(210,
172 calc(var(--theme-nuance-color-3-saturation) - 20%),
173 calc(var(--theme-nuance-color-3-lightness) - 50%));
174
175--button-secondary-color:
176 hsl(210,
177 calc(var(--theme-nuance-color-3-saturation) - 20%),
178 calc(var(--theme-nuance-color-3-lightness) + 10%));
179
180--button-secondary-border:
181 hsl(210,
182 calc(var(--theme-nuance-color-3-saturation) - 20%),
183 calc(var(--theme-nuance-color-3-lightness) + 10%));
184
185
186/* ---------hover---------- */
187--button-secondary-text-hover:
188 hsl(210,
189 calc(var(--theme-nuance-color-3-saturation) - 20%),
190 calc(var(--theme-nuance-color-3-lightness) - 80%));
191
192--button-secondary-color-hover:
193 hsl(210,
194 calc(var(--theme-nuance-color-3-saturation) - 22%),
195 calc(var(--theme-nuance-color-3-lightness) + 1%));
196
197--button-secondary-border-hover:
198 hsl(210,
199 calc(var(--theme-nuance-color-3-saturation) - 22%),
200 calc(var(--theme-nuance-color-3-lightness) + 1%));
201
202
203/* ---------active--------- */
204--button-secondary-text-active:
205 hsl(210,
206 calc(var(--theme-nuance-color-3-saturation) + 40%),
207 calc(var(--theme-nuance-color-3-lightness) - 55%));
208
209--button-secondary-color-active:
210 hsl(210,
211 calc(var(--theme-nuance-color-3-saturation) - 30%),
212 calc(var(--theme-nuance-color-3-lightness) - 5%));
213
214--button-secondary-border-active:
215 hsl(210,
216 calc(var(--theme-nuance-color-3-saturation) - 30%),
217 calc(var(--theme-nuance-color-3-lightness) - 5%));
218
219
220
221/* ---------- TERTIARY BUTTONS --------------- */
222/* ---------- disabled buttons --------------- */
223--button-tertiary-text:
224 hsl(210,
225 calc(var(--theme-nuance-color-3-saturation) - 40%),
226 calc(var(--theme-nuance-color-3-lightness) - 5%));
227
228--button-tertiary-color:
229 hsl(210,
230 calc(var(--theme-nuance-color-3-saturation) - 40%),
231 calc(var(--theme-nuance-color-3-lightness) + 20%));
232
233--button-tertiary-border:
234 hsl(210,
235 calc(var(--theme-nuance-color-3-saturation) - 40%),
236 calc(var(--theme-nuance-color-3-lightness) + 20%));
237
238/* ---------hover---------- */
239--button-tertiary-text-hover:
240 hsl(210,
241 calc(var(--theme-nuance-color-3-saturation) - 40%),
242 calc(var(--theme-nuance-color-3-lightness) - 5%));
243
244--button-tertiary-color-hover:
245 hsl(210,
246 calc(var(--theme-nuance-color-3-saturation) - 40%),
247 calc(var(--theme-nuance-color-3-lightness) + 20%));
248
249--button-tertiary-border-hover:
250 hsl(210,
251 calc(var(--theme-nuance-color-3-saturation) - 40%),
252 calc(var(--theme-nuance-color-3-lightness) + 20%));
253}
254
255/*
256
257.theme-template {
258
259
260 If light theme: should go from bright to darker
261 If dark theme: should go from dark to brighter
262 ideally this should not be anything but steps of
263 gray or slightly variants from it
264
265 --primary-color-1: #2E3440;
266 --primary-color-2: #3B4252;
267 --primary-color-3: #434C5E;
268 --primary-color-4: #4C566A;
269
270
271
272 If light theme: should go from dark to brighter
273 If dark theme: should go from bright to darker
274 ideally this should not be anything but steps of
275 gray or slightly variants from it
276
277 --secondary-color-1: #ECEFF4;
278 --secondary-color-2: #E5E9F0;
279 --secondary-color-3: #D8DEE9;
280 --secondary-color-4: #C8CED9;
281
282
283
284 Choose wisely nuance colors. It is not easy to find
285 4 harmonizing nuance colors. But keep in mind, that
286 only one accent color could work too.
287
288 --theme-nuance-color-1: #8FBCBB;
289 --theme-nuance-color-2: #88C0D0;
290 --theme-nuance-color-3: #81A1C1;
291 --theme-nuance-color-4: #5E81AC;
292
293
294
295 adapt the color red, orange, yellow, green,
296 purple to the 'mood' of your overall design
297 e.g is it low-contrast? vibrant? dynamic? etc
298
299 --theme-red-color: #BF616A;
300 --theme-orange-color: #D08770;
301 --theme-yellow-color: #EBCB8B;
302 --theme-green-color: #A3BE8C;
303 --theme-purple-color: #B48EAD;
304
305
306
307NOTE: comment all those line `--- ...` out
308------------------------------------------------
309--background-color-1:
310--background-color-2:
311--background-color-3:
312--background-color-4:
313
314--border-color-1:
315--border-color-2:
316--border-color-3:
317
318--border-focus-color:
319--border-focus-shadow:
320
321--text-color-plain:
322--text-color-subtile-1:
323--text-color-subtile-2:
324
325--code-background-color:
326--code-text-color:
327
328--ui-range-thumb-color:
329--ui-range-thumb-border:
330
331--textarea-border-color:
332
333
334
335-------------------------------------------
336--button-alert-text-hover:
337--button-alert-color-hover:
338--button-alert-border-hover:
339
340--button-alert-text-active:
341--button-alert-color-active:
342--button-alert-border-active:
343
344
345
346----------- PRIMARY -----------------------
347--button should immediately catch the eye--
348
349--button-primary-text:
350--button-primary-color:
351--button-primary-border:
352
353
354---------hover----------
355--button-primary-text-hover:
356--button-primary-color-hover:
357--button-primary-border-hover:
358
359
360---------active---------
361--button-primary-text-active:
362--button-primary-color-active:
363--button-primary-border-active:
364
365
366
367------------ SECONDARY ------------------------
368--button should NOT immediately catch the eye--
369
370--button-secondary-text:
371--button-secondary-color:
372--button-secondary-border:
373
374
375---------hover----------
376--button-secondary-text-hover:
377--button-secondary-color-hover:
378--button-secondary-border-hover:
379
380
381---------active---------
382--button-secondary-text-active:
383--button-secondary-color-active:
384--button-secondary-border-active:
385
386
387
388---------- TERTIARY -----------------------
389---------- disabled buttons ---------------
390--button-tertiary-text:
391--button-tertiary-color:
392--button-tertiary-border:
393
394
395---------hover----------
396--button-tertiary-text:
397--button-tertiary-color:
398--button-tertiary-border:
399
400}
401
402*/