8000 Descriptive color names for css variables. · scikit-learn/scikit-learn@f0c5238 · GitHub
[go: up one dir, main page]
Skip to content

Commit f0c5238

Browse files
9Y59Y5
committed
Descriptive color names for css variables.
Signed-off-by: Goh Yisheng <mail.yisheng@gmail.com>
1 parent 383c3c7 commit f0c5238

File tree

1 file changed

+38
-34
lines changed

1 file changed

+38
-34
lines changed

‎sklearn/utils/_estimator_html_repr.py

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -190,31 +190,35 @@ def _write_estimator_html(
190190

191191
_STYLE = """
192192
#$id {
193-
--sklearn-color-1: black;
194-
--sklearn-color-2: #f0f8ff;
195-
--sklearn-color-3: #696969;
196-
--sklearn-color-4: white;
197-
--sklearn-color-5: #d4ebff;
198-
--sklearn-color-6: gray;
193+
--sklearn-color-text: black;
194+
--sklearn-color-border: black;
195+
--sklearn-color-background: white;
196+
--sklearn-color-background-box: #f0f8ff;
197+
--sklearn-color-icon: #696969;
198+
--sklearn-color-active: #d4ebff;
199+
--sklearn-color-highlight: #d4ebff;
200+
--sklearn-color-border: gray;
199201
200202
@media (prefers-color-scheme: dark) {
201-
--sklearn-color-1: white;
202-
--sklearn-color-2: #424242;
203-
--sklearn-color-3: #696969;
204-
--sklearn-color-4: black;
205-
--sklearn-color-5: #616161;
206-
--sklearn-color-6: #616161;
203+
--sklearn-color-text: white;
204+
--sklearn-color-border: white;
205+
--sklearn-color-background: black;
206+
--sklearn-color-background-box: #424242;
207+
--sklearn-color-icon: #696969;
208+
--sklearn-color-active: #616161;
209+
--sklearn-color-highlight: #616161;
210+
--sklearn-color-border: #616161;
207211
}
208212
}
209213
210214
#$id {
211-
color: var(--sklearn-color-1);
215+
color: var(--sklearn-color-text);
212216
}
213217
#$id pre{
214218
padding: 0;
215219
}
216220
#$id div.sk-toggleable {
217-
background-color: var(--sklearn-color-4);
221+
background-color: var(--sklearn-color-background);
218222
}
219223
#$id label.sk-toggleable__label {
220224
cursor: pointer;
@@ -229,26 +233,26 @@ def _write_estimator_html(
229233
content: "▸";
230234
float: left;
231235
margin-right: 0.25em;
232-
color: var(--sklearn-color-3);
236+
color: var(--sklearn-color-icon);
233237
}
234238
#$id label.sk-toggleable__label-arrow:hover:before {
235-
color: var(--sklearn-color-1);
239+
color: var(--sklearn-color-text);
236240
}
237241
#$id div.sk-estimator:hover label.sk-toggleable__label-arrow:before {
238-
color: var(--sklearn-color-1);
242+
color: var(--sklearn-color-text);
239243
}
240244
#$id div.sk-toggleable__content {
241245
max-height: 0;
242246
max-width: 0;
243247
overflow: hidden;
244248
text-align: left;
245-
background-color: var(--sklearn-color-2);
249+
background-color: var(--sklearn-color-background-box);
246250
}
247251
#$id div.sk-toggleable__content pre {
248252
margin: 0.2em;
249-
color: var(--sklearn-color-1);
253+
color: var(--sklearn-color-text);
250254
border-radius: 0.25em;
251-
background-color: var(--sklearn-color-2);
255+
background-color: var(--sklearn-color-background-box);
252256
}
253257
#$id input.sk-toggleable__control:checked~div.sk-toggleable__content {
254258
max-height: 200px;
@@ -259,10 +263,10 @@ def _write_estimator_html(
259263
content: "▾";
260264
}
261265
#$id div.sk-estimator input.sk-toggleable__control:checked~label.sk-toggleable__label {
262-
background-color: var(--sklearn-color-5);
266+
background-color: var(--sklearn-color-active);
263267
}
264268
#$id div.sk-label input.sk-toggleable__control:checked~label.sk-toggleable__label {
265-
background-color: var(--sklearn-color-5);
269+
background-color: var(--sklearn-color-active);
266270
}
267271
#$id input.sk-hidden--visually {
268272
border: 0;
@@ -277,28 +281,28 @@ def _write_estimator_html(
277281
}
278282
#$id div.sk-estimator {
279283
font-family: monospace;
280-
background-color: var(--sklearn-color-2);
281-
border: 1px dotted var(--sklearn-color-1);
284+
background-color: var(--sklearn-color-background-box);
285+
border: 1px dotted var(--sklearn-color-border);
282286
border-radius: 0.25em;
283287
box-sizing: border-box;
284288
margin-bottom: 0.5em;
285289
}
286290
#$id div.sk-estimator:hover {
287-
background-color: var(--sklearn-color-5);
291+
background-color: var(--sklearn-color-highlight);
288292
}
289293
#$id div.sk-parallel-item::after {
290294
content: "";
291295
width: 100%;
292-
border-bottom: 1px solid var(--sklearn-color-6);
296+
border-bottom: 1px solid var(--sklearn-color-border);
293297
flex-grow: 1;
294298
}
295299
#$id div.sk-label:hover label.sk-toggleable__label {
296-
background-color: var(--sklearn-color-5);
300+
background-color: var(--sklearn-color-highlight);
297301
}
298302
#$id div.sk-serial::before {
299303
content: "";
300304
position: absolute;
301-
border-left: 1px solid var(--sklearn-color-6);
305+
border-left: 1px solid var(--sklearn-color-border);
302306
box-sizing: border-box;
303307
top: 0;
304308
bottom: 0;
@@ -309,7 +313,7 @@ def _write_estimator_html(
309313
display: flex;
310314
flex-direction: column;
311315
align-items: center;
312-
background-color: var(--sklearn-color-4);
316+
background-color: var(--sklearn-color-background);
313317
padding-right: 0.2em;
314318
padding-left: 0.2em;
315319
position: relative;
@@ -322,13 +326,13 @@ def _write_estimator_html(
322326
display: flex;
323327
align-items: stretch;
324328
justify-content: center;
325-
background-color: var(--sklearn-color-4);
329+
background-color: var(--sklearn-color-background);
326330
position: relative;
327331
}
328332
#$id div.sk-item::before, #$id div.sk-parallel-item::before {
329333
content: "";
330334
position: absolute;
331-
border-left: 1px solid var(--sklearn-color-6);
335+
border-left: 1px solid var(--sklearn-color-border);
332336
box-sizing: border-box;
333337
top: 0;
334338
bottom: 0;
@@ -340,7 +344,7 @@ def _write_estimator_html(
340344
flex-direction: column;
341345
z-index: 1;
342346
position: relative;
343-
background-color: var(--sklearn-color-4);
347+
background-color: var(--sklearn-color-background);
344348
}
345349
#$id div.sk-parallel-item:first-child::after {
346350
align-self: flex-end;
@@ -354,11 +358,11 @@ def _write_estimator_html(
354358
width: 0;
355359
}
356360
#$id div.sk-dashed-wrapped {
357-
border: 1px dashed var(--sklearn-color-6);
361+
border: 1px dashed var(--sklearn-color-border);
358362
margin: 0 0.4em 0.5em 0.4em;
359363
box-sizing: border-box;
360364
padding-bottom: 0.4em;
361-
background-color: var(--sklearn-color-4);
365+
background-color: var(--sklearn-color-background);
362366
}
363367
#$id div.sk-label label {
364368
font-family: monospace;

0 commit comments

Comments
 (0)
0