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