File size: 7,215 Bytes
5a29263
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
/* Author: Yazan Agha-Schrader */
/* Inspiration from OpenAI's Playground platform https://platform.openai.com/playground/ */

.theme-playground {

/* ---------- PRIMARY COLORS ----------------- */
--primary-color-1: hsl(0, 0%,    99.2%);
    --primary-color-1-hue:         0;
    --primary-color-1-saturation:  0%;
    --primary-color-1-lightness:   99.2%;

--primary-color-2: hsl(0, 0%,    95%);
    --primary-color-2-hue:         0;
    --primary-color-2-saturation:  0%;
    --primary-color-2-lightness:   95%;

--primary-color-3: hsl(0, 0%,    88%);
    --primary-color-3-hue:         0;
    --primary-color-3-saturation:  0%;
    --primary-color-3-lightness:   88%;

--primary-color-4: hsl(0, 0%,    80%);
    --primary-color-4-hue:         0;
    --primary-color-4-saturation:  0%;
    --primary-color-4-lightness:   80%;



/* ---------- SECONDARY COLORS --------------- */
--secondary-color-1: hsl(0, 0%,    20%);
    --secondary-color-1-hue:         0;
    --secondary-color-1-saturation:  0%;
    --secondary-color-1-lightness:   20%;

--secondary-color-2: hsl(0, 0%,    23.1%);
    --secondary-color-2-hue:         0;
    --secondary-color-2-saturation:  0%;
    --secondary-color-2-lightness:   23.1%;

--secondary-color-3: hsl(0, 0%,    29%);
    --secondary-color-3-hue:         0;
    --secondary-color-3-saturation:  0%;
    --secondary-color-3-lightness:   29%;

--secondary-color-4: hsl(0, 0%,    36.1%);
    --secondary-color-4-hue:         0;
    --secondary-color-4-saturation:  0%;
    --secondary-color-4-lightness:   36.1%;



/* ----------- NUANCES COLORS ---------------- */
--theme-nuance-color-1: hsl(165.2, 82.1%, 35.1%);
    --theme-nuance-color-1-hue:             165.2;
    --theme-nuance-color-1-saturation:      82.1%;
    --theme-nuance-color-1-lightness:       35.1%;

--theme-nuance-color-2: hsl(165.2, 82.1%, 35.1%);
    --theme-nuance-color-2-hue:             165.2;
    --theme-nuance-color-2-saturation:      82.1%;
    --theme-nuance-color-2-lightness:       35.1%;

--theme-nuance-color-3: hsl(165.2, 81.1%, 35.3%);
    --theme-nuance-color-3-hue:             165.2;
    --theme-nuance-color-3-saturation:      81.1%;
    --theme-nuance-color-3-lightness:       35.3%;

--theme-nuance-color-4: hsl(164.9, 81.6%, 27.6%);
    --theme-nuance-color-4-hue:             164.9;
    --theme-nuance-color-4-saturation:      81.6%;
    --theme-nuance-color-4-lightness:       27.6%;



/* ----------- ROYGP COLORS ------------------ */
--theme-red-color:     hsl(0.3, 80%, 50%);
--theme-orange-color:  #e76f51;
--theme-yellow-color:  hsl(60, 70.6%, 73.3%);
--theme-green-color:   #A3BE8C;
--theme-purple-color:  hsl(0.3, 70%, 45%);



/* ------------------------------------------- */
--background-color-1:    var(--primary-color-1);
--background-color-2:    var(--primary-color-2);
--background-color-3:    var(--primary-color-3);
--background-color-4:    var(--primary-color-4);

--border-color-1:        var(--primary-color-2);
--border-color-2:        var(--primary-color-3);
--border-color-3:        var(--primary-color-4);

--border-focus-color:    var(--theme-nuance-color-2);
--border-focus-shadow:   var(--theme-nuance-color-1);

--text-color-plain:      var(--secondary-color-1);
--text-color-subtile-1:  var(--secondary-color-2);
--text-color-subtile-2:  var(--secondary-color-3);

--code-background-color: var(--secondary-color-2);
--code-text-color:       var(--primary-color-2);

--ui-range-thumb-color:  var(--primary-color-4);
--ui-range-thumb-border: var(--ui-ranger-thumb-color);

--textarea-border-color: var(--secondary-color-4);

--chat-id-color:        var(--theme-nuance-color-4);



/* ------------------------------------------- */
--button-alert-text-hover:       var(--primary-color-1);
--button-alert-color-hover:      var(--theme-purple-color);
--button-alert-border-hover:     var(--theme-purple-color);

--button-alert-text-active:      var(--primary-color-1);
--button-alert-color-active:     var(--theme-red-color);
--button-alert-border-active:    var(--theme-red-color);



/* ----------- PRIMARY BUTTONS --------------- */
/* - button should immediately catch the eye - */
--button-primary-text:
    hsl(0,
    calc(var(--primary-color-1-saturation) - 100%),
    calc(var(--primary-color-1-lightness)  + 100%));

--button-primary-color:  var(--theme-nuance-color-3);
--button-primary-border: var(--theme-nuance-color-3);


/* ---------hover---------- */
--button-primary-text-hover:
    hsl(0,
    calc(var(--primary-color-1-saturation) - 100%),
    calc(var(--primary-color-1-lightness)  + 100%));

--button-primary-color-hover:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 2%),
    calc(var(--theme-nuance-color-3-lightness)  - 10%));

--button-primary-border-hover:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 2%),
    calc(var(--theme-nuance-color-3-lightness)  - 10%));


/* ---------active--------- */
--button-primary-text-active:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 100%),
    calc(var(--theme-nuance-color-3-lightness)  + 100%));

--button-primary-color-active:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 10%),
    calc(var(--theme-nuance-color-3-lightness)  - 15%));

--button-primary-border-active:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 2%),
    calc(var(--theme-nuance-color-3-lightness)  + 10%));



/* ---------- SECONDARY BUTTONS -------------- */
/* these should NOT immediately catch the eye  */
--button-secondary-text:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 20%),
    calc(var(--theme-nuance-color-3-lightness)  - 50%));

--button-secondary-color:  var(--primary-color-3);
--button-secondary-border: var(--primary-color-3);


/* ---------hover---------- */
--button-secondary-text-hover:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 20%),
    calc(var(--theme-nuance-color-3-lightness)  - 80%));

--button-secondary-color-hover:  var(--primary-color-4);
--button-secondary-border-hover: var(--primary-color-4);


/* ---------active--------- */
--button-secondary-text-active:
    hsl(165.2,
    calc(var(--theme-nuance-color-3-saturation) - 20%),
    calc(var(--theme-nuance-color-3-lightness)  - 80%));

--button-secondary-color-active:
    hsl(0,
    calc(var(--primary-color-4-saturation) - 30%),
    calc(var(--primary-color-4-lightness)  - 15%));

--button-secondary-border-active:
    hsl(0,
    calc(var(--primary-color-4-saturation) - 30%),
    calc(var(--primary-color-4-lightness)  - 15%));



/* ---------- TERTIARY BUTTONS --------------- */
/* ---------- disabled buttons --------------- */
--button-tertiary-text:   var(--primary-color-4);
--button-tertiary-color:  var(--primary-color-2);
--button-tertiary-border: var(--primary-color-2);


/* ---------hover---------- */
--button-tertiary-text:   var(--primary-color-4);
--button-tertiary-color:  var(--primary-color-2);
--button-tertiary-border: var(--primary-color-2);

}