1/* Author: Yazan Agha-Schrader */
2/* Inspiration was a batman wallpaper that i have on my phone */
3
4.theme-beeninorder {
5
6--primary-color-1: hsl(202, 11%, 19%);
7--primary-color-2: hsl(202, 11%, 23%);
8--primary-color-3: hsl(201, 11%, 28%);
9--primary-color-4: hsl(201, 11%, 40%);
10
11--secondary-color-1: hsl(201, 11%, 80%);
12--secondary-color-2: hsl(201, 11%, 74%);
13--secondary-color-3: hsl(201, 11%, 67%);
14--secondary-color-4: hsl(201, 11%, 60%);
15
16
17--theme-nuance-color-1: hsl(44.5, 96.7%, 52.9%);
18--theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
19--theme-nuance-color-3: hsl(44.5, 96.7%, 52.9%);
20--theme-nuance-color-4: hsl(44.5, 96.7%, 52.9%);
21
22
23
24/* ---------- PRIMARY COLORS ----------------- */
25--primary-color-1: hsl(201, 11%, 19%);
26 --primary-color-1-hue: 201;
27 --primary-color-1-saturation: 11%;
28 --primary-color-1-lightness: 19%;
29
30--primary-color-2: hsl(201, 11%, 23%);
31 --primary-color-2-hue: 201;
32 --primary-color-2-saturation: 11%;
33 --primary-color-2-lightness: 23%;
34
35--primary-color-3: hsl(201, 11%, 28%);
36 --primary-color-3-hue: 201;
37 --primary-color-3-saturation: 11%;
38 --primary-color-3-lightness: 28%;
39
40--primary-color-4: hsl(201, 11%, 40%);
41 --primary-color-4-hue: 201;
42 --primary-color-4-saturation: 11%;
43 --primary-color-4-lightness: 40%;
44
45
46
47/* ---------- SECONDARY COLORS --------------- */
48--secondary-color-1: hsl(201, 11%, 80%);
49--secondary-color-1-hue: 201;
50--secondary-color-1-saturation: 11%;
51--secondary-color-1-lightness: 80%;
52
53--secondary-color-2: hsl(201, 11%, 74%);
54--secondary-color-2-hue: 201;
55--secondary-color-2-saturation: 11%;
56--secondary-color-2-lightness: 74%;
57
58--secondary-color-3: hsl(201, 11%, 67%);
59--secondary-color-3-hue: 201;
60--secondary-color-3-saturation: 11%;
61--secondary-color-3-lightness: 67%;
62
63--secondary-color-4: hsl(201, 11%, 60%);
64--secondary-color-4-hue: 201;
65--secondary-color-4-saturation: 11%;
66--secondary-color-4-lightness: 60%;
67
68
69
70/* ----------- NUANCES COLORS ---------------- */
71--theme-nuance-color-1: hsl(44.5, 96.7%, 52.9%);
72 --theme-nuance-color-1-hue: 44.5;
73 --theme-nuance-color-1-saturation: 96.7%;
74 --theme-nuance-color-1-lightness: 52.9%;
75
76--theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
77 --theme-nuance-color-2-hue: 44.5;
78 --theme-nuance-color-2-saturation: 96.7%;
79 --theme-nuance-color-2-lightness: 52.9%;
80
81--theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
82 --theme-nuance-color-3-hue: 44.5;
83 --theme-nuance-color-3-saturation: 96.7%;
84 --theme-nuance-color-3-lightness: 52.9%;
85
86--theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
87 --theme-nuance-color-4-hue: 44.5;
88 --theme-nuance-color-4-saturation: 96.7%;
89 --theme-nuance-color-4-lightness: 52.9%;
90
91
92
93/* ----------- ROYGP COLORS ------------------ */
94 --theme-red-color: hsl(232, 40%, 45%);
95 --theme-orange-color: #e76f51;
96 --theme-yellow-color: #ffd95f;
97 --theme-green-color: #A3BE8C;
98 --theme-purple-color: hsl(232, 30%, 40%);
99
100
101
102/* ------------------------------------------- */
103--background-color-1: var(--primary-color-1);
104--background-color-2: var(--primary-color-2);
105--background-color-3: var(--primary-color-3);
106--background-color-4: var(--primary-color-4);
107
108--border-color-1: var(--primary-color-2);
109--border-color-2: var(--primary-color-3);
110--border-color-3: var(--primary-color-4);
111
112--border-focus-color: var(--theme-nuance-color-2);
113--border-focus-shadow: var(--theme-nuance-color-1);
114
115--text-color-plain: var(--secondary-color-1);
116--text-color-subtile-1: var(--secondary-color-2);
117--text-color-subtile-2: var(--secondary-color-3);
118
119--code-background-color: var(--secondary-color-2);
120--code-text-color: var(--primary-color-2);
121
122--ui-range-thumb-color: var(--theme-nuance-color-3);
123--ui-range-thumb-border: var(--ui-ranger-thumb-color);
124
125--textarea-border-color: var(--secondary-color-4);
126
127--chat-id-color: var(--theme-nuance-color-4);
128
129
130
131/* ------------------------------------------- */
132--button-alert-text-hover: var(--secondary-color-1);
133--button-alert-color-hover: var(--theme-purple-color);
134--button-alert-border-hover: var(--theme-purple-color);
135
136--button-alert-text-active: var(--secondary-color-1);
137--button-alert-color-active: var(--theme-red-color);
138--button-alert-border-active: var(--theme-red-color);
139
140
141
142/* ----------- PRIMARY BUTTONS --------------- */
143/* - button should immediately catch the eye - */
144--button-primary-text: var(--primary-color-1);
145--button-primary-color: var(--theme-nuance-color-3);
146--button-primary-border: var(--theme-nuance-color-3);
147
148
149/* ---------hover---------- */
150--button-primary-text-hover:
151 hsl(201,
152 calc(var(--primary-color-1-saturation) - 100%),
153 calc(var(--primary-color-1-lightness) + 100%));
154
155--button-primary-color-hover:
156 hsl(44.5,
157 calc(var(--theme-nuance-color-3-saturation) - 2%),
158 calc(var(--theme-nuance-color-3-lightness) - 10%));
159
160--button-primary-border-hover:
161 hsl(44.5,
162 calc(var(--theme-nuance-color-3-saturation) - 2%),
163 calc(var(--theme-nuance-color-3-lightness) - 10%));
164
165
166/* ---------active--------- */
167--button-primary-text-active:
168 hsl(44.5,
169 calc(var(--theme-nuance-color-3-saturation) - 100%),
170 calc(var(--theme-nuance-color-3-lightness) + 100%));
171
172--button-primary-color-active:
173 hsl(44.5,
174 calc(var(--theme-nuance-color-3-saturation) - 10%),
175 calc(var(--theme-nuance-color-3-lightness) - 15%));
176
177--button-primary-border-active:
178 hsl(44.5,
179 calc(var(--theme-nuance-color-3-saturation) - 2%),
180 calc(var(--theme-nuance-color-3-lightness) + 10%));
181
182
183
184/* ---------- SECONDARY BUTTONS -------------- */
185/* these should NOT immediately catch the eye */
186--button-secondary-text: var(--secondary-color-1);
187--button-secondary-color: var(--primary-color-3);
188--button-secondary-border: var(--primary-color-3);
189
190
191/* ---------hover---------- */
192--button-secondary-text-hover:
193 hsl(44.5,
194 calc(var(--theme-nuance-color-3-saturation) - 20%),
195 calc(var(--theme-nuance-color-3-lightness) - 80%));
196
197--button-secondary-color-hover: var(--primary-color-4);
198--button-secondary-border-hover: var(--primary-color-4);
199
200
201/* ---------active--------- */
202--button-secondary-text-active: var(--secondary-color-1);
203
204--button-secondary-color-active:
205 hsl(201,
206 calc(var(--primary-color-4-saturation) - 30%),
207 calc(var(--primary-color-4-lightness) - 15%));
208
209--button-secondary-border-active:
210 hsl(201,
211 calc(var(--primary-color-4-saturation) - 30%),
212 calc(var(--primary-color-4-lightness) - 15%));
213
214
215
216/* ---------- TERTIARY BUTTONS --------------- */
217/* ---------- disabled buttons --------------- */
218--button-tertiary-text: var(--primary-color-4);
219--button-tertiary-color: var(--primary-color-2);
220--button-tertiary-border: var(--primary-color-2);
221
222
223/* ---------hover---------- */
224--button-tertiary-text: var(--primary-color-4);
225--button-tertiary-color: var(--primary-color-2);
226--button-tertiary-border: var(--primary-color-2);
227
228}