1/* Author: Yazan Agha-Schrader */
2/* Inspiration from Nord Theme https://www.nordtheme.com/docs/colors-and-palettes */
3
4.theme-snowstorm {
5
6/* ---------- PRIMARY COLORS ----------------- */
7--primary-color-1: hsl(217.5, 26.7%, 94.1%);
8 --primary-color-1-hue: 217.5;
9 --primary-color-1-saturation: 26.7%;
10 --primary-color-1-lightness: 94.1%;
11
12--primary-color-2: hsl(218.2, 26.8%, 92.0%);
13 --primary-color-2-hue: 218.2;
14 --primary-color-2-saturation: 26.8%;
15 --primary-color-2-lightness: 92.0%;
16
17--primary-color-3: hsl(218.8, 27.9%, 88.0%);
18 --primary-color-3-hue: 218.8;
19 --primary-color-3-saturation: 27.9%;
20 --primary-color-3-lightness: 88.0%;
21
22--primary-color-4: hsl(218.8, 18.3%, 81.8%);
23 --primary-color-4-hue: 218.8;
24 --primary-color-4-saturation: 18.3%;
25 --primary-color-4-lightness: 81.8%;
26
27
28/* ---------- SECONDARY COLORS --------------- */
29--secondary-color-1: hsl(220.0, 16.4%, 21.6%);
30 --secondary-color-1-hue: 220.0;
31 --secondary-color-1-saturation: 16.4%;
32 --secondary-color-1-lightness: 21.6%;
33
34--secondary-color-2: hsl(221.7, 16.3%, 27.6%);
35 --secondary-color-2-hue: 221.7;
36 --secondary-color-2-saturation: 16.3%;
37 --secondary-color-2-lightness: 27.6%;
38
39--secondary-color-3: hsl(220.0, 16.8%, 31.6%);
40 --secondary-color-3-hue: 220.0;
41 --secondary-color-3-saturation: 16.8%;
42 --secondary-color-3-lightness: 31.6%;
43
44--secondary-color-4: hsl(220.0, 16.5%, 35.7%);
45 --secondary-color-4-hue: 220.0;
46 --secondary-color-4-saturation: 16.5%;
47 --secondary-color-4-lightness: 35.7%;
48
49
50
51/* ----------- NUANCES COLORS ---------------- */
52--theme-nuance-color-1: hsl(178.7, 25.1%, 64.9%);
53 --theme-nuance-color-1-hue: 178.7;
54 --theme-nuance-color-1-saturation: 25.1%;
55 --theme-nuance-color-1-lightness: 64.9%;
56
57--theme-nuance-color-2: hsl(193.3, 43.4%, 67.5%);
58 --theme-nuance-color-2-hue: 193.3;
59 --theme-nuance-color-2-saturation: 43.4%;
60 --theme-nuance-color-2-lightness: 67.5%;
61
62--theme-nuance-color-3: hsl(210.0, 34.0%, 63.1%);
63 --theme-nuance-color-3-hue: 210.0;
64 --theme-nuance-color-3-saturation: 34.0%;
65 --theme-nuance-color-3-lightness: 63.1%;
66
67--theme-nuance-color-4: hsl(213.1, 32.0%, 52.2%);
68 --theme-nuance-color-4-hue: 213.1;
69 --theme-nuance-color-4-saturation: 32.0%;
70 --theme-nuance-color-4-lightness: 52.2%;
71
72
73
74/* ----------- ROYGP COLORS ------------------ */
75--theme-red-color: hsl(32.5, 80%, 50%);
76--theme-orange-color: hsl(32.5, 70%, 45%);
77--theme-yellow-color: hsl(40.0, 0.6%, 73.3%);
78--theme-green-color: hsl(92.4, 27.8%, 64.7%);
79--theme-purple-color: hsl(311.1, 20.2%, 63.1%);
80
81
82
83/* ------------------------------------------- */
84--background-color-1: var(--primary-color-1);
85--background-color-2: var(--primary-color-2);
86--background-color-3: var(--primary-color-3);
87--background-color-4: var(--primary-color-4);
88
89--border-color-1: var(--primary-color-2);
90--border-color-2: var(--primary-color-3);
91--border-color-3: var(--primary-color-4);
92
93--border-focus-color: var(--theme-nuance-color-2);
94--border-focus-shadow: var(--theme-nuance-color-1);
95
96--text-color-plain: var(--secondary-color-1);
97--text-color-subtile-1: var(--secondary-color-2);
98--text-color-subtile-2: var(--secondary-color-3);
99
100--code-background-color: var(--secondary-color-2);
101--code-text-color: var(--primary-color-2);
102
103--ui-range-thumb-color: var(--theme-nuance-color-3);
104--ui-range-thumb-border: var(--ui-ranger-thumb-color);
105
106--textarea-border-color: var(--secondary-color-4);
107
108--chat-id-color: var(--theme-nuance-color-4);
109
110
111
112/* ------------------------------------------- */
113--button-alert-text-hover: var(--primary-color-1);
114--button-alert-color-hover: var(--theme-orange-color);
115--button-alert-border-hover: var(--theme-orange-color);
116
117--button-alert-text-active: var(--primary-color-1);
118--button-alert-color-active: var(--theme-red-color);
119--button-alert-border-active: var(--theme-red-color);
120
121
122
123/* ----------- PRIMARY BUTTONS --------------- */
124/* - button should immediately catch the eye - */
125--button-primary-text: var(--secondary-color-1);
126--button-primary-color: var(--theme-nuance-color-3);
127--button-primary-border: var(--theme-nuance-color-3);
128
129
130/* ---------hover---------- */
131--button-primary-text-hover:
132 hsl(217.5,
133 calc(var(--secondary-color-1-saturation) + 35%),
134 calc(var(--secondary-color-1-lightness) - 30%));
135
136--button-primary-color-hover:
137 hsl(210,
138 calc(var(--theme-nuance-color-3-saturation) - 2%),
139 calc(var(--theme-nuance-color-3-lightness) - 10%));
140
141--button-primary-border-hover:
142 hsl(210,
143 calc(var(--theme-nuance-color-3-saturation) - 2%),
144 calc(var(--theme-nuance-color-3-lightness) - 10%));
145
146
147/* ---------active--------- */
148--button-primary-text-active:
149 hsl(210,
150 calc(var(--theme-nuance-color-3-saturation) - 20%),
151 calc(var(--theme-nuance-color-3-lightness) + 35%));
152
153--button-primary-color-active:
154 hsl(210,
155 calc(var(--theme-nuance-color-3-saturation) - 10%),
156 calc(var(--theme-nuance-color-3-lightness) - 25%));
157
158--button-primary-border-active:
159 hsl(210,
160 calc(var(--theme-nuance-color-3-saturation) - 10%),
161 calc(var(--theme-nuance-color-3-lightness) - 25%));
162
163
164
165/* ---------- SECONDARY BUTTONS -------------- */
166/* these should NOT immediately catch the eye */
167--button-secondary-text:
168 hsl(210,
169 calc(var(--theme-nuance-color-3-saturation) - 20%),
170 calc(var(--theme-nuance-color-3-lightness) - 50%));
171
172--button-secondary-color:
173 hsl(210,
174 calc(var(--theme-nuance-color-3-saturation) - 20%),
175 calc(var(--theme-nuance-color-3-lightness) + 10%));
176
177--button-secondary-border:
178 hsl(210,
179 calc(var(--theme-nuance-color-3-saturation) - 20%),
180 calc(var(--theme-nuance-color-3-lightness) + 10%));
181
182
183/* ---------hover---------- */
184--button-secondary-text-hover:
185 hsl(210,
186 calc(var(--theme-nuance-color-3-saturation) - 20%),
187 calc(var(--theme-nuance-color-3-lightness) - 80%));
188
189--button-secondary-color-hover:
190 hsl(210,
191 calc(var(--theme-nuance-color-3-saturation) - 22%),
192 calc(var(--theme-nuance-color-3-lightness) + 1%));
193
194--button-secondary-border-hover:
195 hsl(210,
196 calc(var(--theme-nuance-color-3-saturation) - 22%),
197 calc(var(--theme-nuance-color-3-lightness) + 1%));
198
199
200/* ---------active--------- */
201--button-secondary-text-active:
202 hsl(210,
203 calc(var(--theme-nuance-color-3-saturation) + 40%),
204 calc(var(--theme-nuance-color-3-lightness) - 55%));
205
206--button-secondary-color-active:
207 hsl(210,
208 calc(var(--theme-nuance-color-3-saturation) - 30%),
209 calc(var(--theme-nuance-color-3-lightness) - 5%));
210
211--button-secondary-border-active:
212 hsl(210,
213 calc(var(--theme-nuance-color-3-saturation) - 30%),
214 calc(var(--theme-nuance-color-3-lightness) - 5%));
215
216
217
218/* ---------- TERTIARY BUTTONS --------------- */
219/* ---------- disabled buttons --------------- */
220--button-tertiary-text:
221 hsl(210,
222 calc(var(--theme-nuance-color-3-saturation) - 40%),
223 calc(var(--theme-nuance-color-3-lightness) - 5%));
224
225--button-tertiary-color:
226 hsl(210,
227 calc(var(--theme-nuance-color-3-saturation) - 40%),
228 calc(var(--theme-nuance-color-3-lightness) + 20%));
229
230--button-tertiary-border:
231 hsl(210,
232 calc(var(--theme-nuance-color-3-saturation) - 40%),
233 calc(var(--theme-nuance-color-3-lightness) + 20%));
234
235/* ---------hover---------- */
236--button-tertiary-text-hover:
237 hsl(210,
238 calc(var(--theme-nuance-color-3-saturation) - 40%),
239 calc(var(--theme-nuance-color-3-lightness) - 5%));
240
241--button-tertiary-color-hover:
242 hsl(210,
243 calc(var(--theme-nuance-color-3-saturation) - 40%),
244 calc(var(--theme-nuance-color-3-lightness) + 20%));
245
246--button-tertiary-border-hover:
247 hsl(210,
248 calc(var(--theme-nuance-color-3-saturation) - 40%),
249 calc(var(--theme-nuance-color-3-lightness) + 20%));
250
251}