1/* Author: Yazan Agha-Schrader */
2/* Inspiration from OpenAI's Playground platform https://platform.openai.com/playground/ */
3
4.theme-playground {
5
6/* ---------- PRIMARY COLORS ----------------- */
7--primary-color-1: hsl(0, 0%, 99.2%);
8 --primary-color-1-hue: 0;
9 --primary-color-1-saturation: 0%;
10 --primary-color-1-lightness: 99.2%;
11
12--primary-color-2: hsl(0, 0%, 95%);
13 --primary-color-2-hue: 0;
14 --primary-color-2-saturation: 0%;
15 --primary-color-2-lightness: 95%;
16
17--primary-color-3: hsl(0, 0%, 88%);
18 --primary-color-3-hue: 0;
19 --primary-color-3-saturation: 0%;
20 --primary-color-3-lightness: 88%;
21
22--primary-color-4: hsl(0, 0%, 80%);
23 --primary-color-4-hue: 0;
24 --primary-color-4-saturation: 0%;
25 --primary-color-4-lightness: 80%;
26
27
28
29/* ---------- SECONDARY COLORS --------------- */
30--secondary-color-1: hsl(0, 0%, 20%);
31 --secondary-color-1-hue: 0;
32 --secondary-color-1-saturation: 0%;
33 --secondary-color-1-lightness: 20%;
34
35--secondary-color-2: hsl(0, 0%, 23.1%);
36 --secondary-color-2-hue: 0;
37 --secondary-color-2-saturation: 0%;
38 --secondary-color-2-lightness: 23.1%;
39
40--secondary-color-3: hsl(0, 0%, 29%);
41 --secondary-color-3-hue: 0;
42 --secondary-color-3-saturation: 0%;
43 --secondary-color-3-lightness: 29%;
44
45--secondary-color-4: hsl(0, 0%, 36.1%);
46 --secondary-color-4-hue: 0;
47 --secondary-color-4-saturation: 0%;
48 --secondary-color-4-lightness: 36.1%;
49
50
51
52/* ----------- NUANCES COLORS ---------------- */
53--theme-nuance-color-1: hsl(165.2, 82.1%, 35.1%);
54 --theme-nuance-color-1-hue: 165.2;
55 --theme-nuance-color-1-saturation: 82.1%;
56 --theme-nuance-color-1-lightness: 35.1%;
57
58--theme-nuance-color-2: hsl(165.2, 82.1%, 35.1%);
59 --theme-nuance-color-2-hue: 165.2;
60 --theme-nuance-color-2-saturation: 82.1%;
61 --theme-nuance-color-2-lightness: 35.1%;
62
63--theme-nuance-color-3: hsl(165.2, 81.1%, 35.3%);
64 --theme-nuance-color-3-hue: 165.2;
65 --theme-nuance-color-3-saturation: 81.1%;
66 --theme-nuance-color-3-lightness: 35.3%;
67
68--theme-nuance-color-4: hsl(164.9, 81.6%, 27.6%);
69 --theme-nuance-color-4-hue: 164.9;
70 --theme-nuance-color-4-saturation: 81.6%;
71 --theme-nuance-color-4-lightness: 27.6%;
72
73
74
75/* ----------- ROYGP COLORS ------------------ */
76--theme-red-color: hsl(0.3, 80%, 50%);
77--theme-orange-color: #e76f51;
78--theme-yellow-color: hsl(60, 70.6%, 73.3%);
79--theme-green-color: #A3BE8C;
80--theme-purple-color: hsl(0.3, 70%, 45%);
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(--primary-color-4);
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(--primary-color-1);
115--button-alert-color-hover: var(--theme-purple-color);
116--button-alert-border-hover: var(--theme-purple-color);
117
118--button-alert-text-active: var(--primary-color-1);
119--button-alert-color-active: var(--theme-red-color);
120--button-alert-border-active: var(--theme-red-color);
121
122
123
124/* ----------- PRIMARY BUTTONS --------------- */
125/* - button should immediately catch the eye - */
126--button-primary-text:
127 hsl(0,
128 calc(var(--primary-color-1-saturation) - 100%),
129 calc(var(--primary-color-1-lightness) + 100%));
130
131--button-primary-color: var(--theme-nuance-color-3);
132--button-primary-border: var(--theme-nuance-color-3);
133
134
135/* ---------hover---------- */
136--button-primary-text-hover:
137 hsl(0,
138 calc(var(--primary-color-1-saturation) - 100%),
139 calc(var(--primary-color-1-lightness) + 100%));
140
141--button-primary-color-hover:
142 hsl(165.2,
143 calc(var(--theme-nuance-color-3-saturation) - 2%),
144 calc(var(--theme-nuance-color-3-lightness) - 10%));
145
146--button-primary-border-hover:
147 hsl(165.2,
148 calc(var(--theme-nuance-color-3-saturation) - 2%),
149 calc(var(--theme-nuance-color-3-lightness) - 10%));
150
151
152/* ---------active--------- */
153--button-primary-text-active:
154 hsl(165.2,
155 calc(var(--theme-nuance-color-3-saturation) - 100%),
156 calc(var(--theme-nuance-color-3-lightness) + 100%));
157
158--button-primary-color-active:
159 hsl(165.2,
160 calc(var(--theme-nuance-color-3-saturation) - 10%),
161 calc(var(--theme-nuance-color-3-lightness) - 15%));
162
163--button-primary-border-active:
164 hsl(165.2,
165 calc(var(--theme-nuance-color-3-saturation) - 2%),
166 calc(var(--theme-nuance-color-3-lightness) + 10%));
167
168
169
170/* ---------- SECONDARY BUTTONS -------------- */
171/* these should NOT immediately catch the eye */
172--button-secondary-text:
173 hsl(165.2,
174 calc(var(--theme-nuance-color-3-saturation) - 20%),
175 calc(var(--theme-nuance-color-3-lightness) - 50%));
176
177--button-secondary-color: var(--primary-color-3);
178--button-secondary-border: var(--primary-color-3);
179
180
181/* ---------hover---------- */
182--button-secondary-text-hover:
183 hsl(165.2,
184 calc(var(--theme-nuance-color-3-saturation) - 20%),
185 calc(var(--theme-nuance-color-3-lightness) - 80%));
186
187--button-secondary-color-hover: var(--primary-color-4);
188--button-secondary-border-hover: var(--primary-color-4);
189
190
191/* ---------active--------- */
192--button-secondary-text-active:
193 hsl(165.2,
194 calc(var(--theme-nuance-color-3-saturation) - 20%),
195 calc(var(--theme-nuance-color-3-lightness) - 80%));
196
197--button-secondary-color-active:
198 hsl(0,
199 calc(var(--primary-color-4-saturation) - 30%),
200 calc(var(--primary-color-4-lightness) - 15%));
201
202--button-secondary-border-active:
203 hsl(0,
204 calc(var(--primary-color-4-saturation) - 30%),
205 calc(var(--primary-color-4-lightness) - 15%));
206
207
208
209/* ---------- TERTIARY BUTTONS --------------- */
210/* ---------- disabled buttons --------------- */
211--button-tertiary-text: var(--primary-color-4);
212--button-tertiary-color: var(--primary-color-2);
213--button-tertiary-border: var(--primary-color-2);
214
215
216/* ---------hover---------- */
217--button-tertiary-text: var(--primary-color-4);
218--button-tertiary-color: var(--primary-color-2);
219--button-tertiary-border: var(--primary-color-2);
220
221}