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