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