Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a dark theme for the tablereport #1166

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add a dark theme for the tablereport #1166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 120 additions & 22 deletions skrub/_reporting/_data/templates/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,110 @@
--radius: var(--space-s);
--line-height: 1.5;

--blue: #3584e4;
--darkblue: #0f4e9b;
--lightgreen: #eafaea;
--mediumgreen: #d6f5d6;
--darkgreen: #c1f0c1;
--verydarkgreen: #84e184;
--shadowgreen: #9fce9f;

--lightyellow: #ffffaa;

--darkg: #555555;
--mediumg: #d0d0d0;
--lightg: #f0f0f0;

--darkred: #a32929;
--red: #dd0000;

--color-background: white;
--color-text: black;
--color-shadow: 0deg 0% 63%;
--color-muted-text: var(--darkg);
--color-keyboard-text: #444444;
--color-keyboard-border: #cccccc;
--color-keyboard-shadow: #bbbbbb;
--color-ok: green;
--color-warning: #ff6600;
--color-critical: var(--red);
--color-critical-muted: var(--darkred);
--color-important-note-background: var(--lightgreen);
--color-strong-border: #aaa;
--color-table-border: #cbcbcb;
--color-table-head-bg: #e0e0e0;
--color-table-head-text: black;
--color-table-stripe-1: #f2f2f2;
--color-button: #e0e0e0;
--color-button-hover: #eee;
--color-button-active: #ccc;
--color-toggletip-button-bg: var(--blue);
--color-toggletip-button-border: var(--darkblue);
--color-toggletip-button-text: white;
--color-card-header: var(--lightg);

--color-active-column-1: var(--lightgreen);
--color-active-column-2: var(--mediumgreen);
--color-active-column-3: var(--darkgreen);
--color-active-cell: var(--lightyellow);


--color-sample-tab-card-header: var(--verydarkgreen);
--color-sample-tab-card-button: var(--darkgreen);
--color-sample-tab-card-button-hover: var(--verydarkgreen);
--color-sample-tab-card-button-active: var(--shadowgreen);
--color-sample-tab-card-border: var(--shadowgreen);
--color-selected-tab: var(--color-background);

--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
}

@media (prefers-color-scheme: dark)
{
:host {
--color-background: #222233;
--color-text: #fcfcfc;
--color-muted-text: #f0f0f6;
--color-keyboard-text: var(--color-muted-text);
--color-keyboard-border: var(--color-muted-text);
--color-keyboard-shadow: var(--color-muted-text);
--color-shadow: transparent;
--color-ok: var(--mediumgreen);
--color-warning: #ff6600;
--color-critical: var(--red);
--color-important-note-background: var(--color-active-column-2);
--color-strong-border: var(--color-text);
--color-table-border: #a0a0a6;
--color-table-head-bg: #444455;
--color-table-head-text: var(--color-text);
--color-table-stripe-1: #333344;
--color-button: #444455;
--color-button-hover: #333344;
--color-button-active: #555566;
--color-toggletip-button-bg: var(--blue);
--color-toggletip-button-border: var(--darkblue);
--color-toggletip-button-text: white;
--color-card-header: var(--color-table-head-bg);

--color-active-column-3: #634675;
--color-active-column-2: #7d5f9f;
--color-active-column-1: #9979bd;
--color-active-cell: #004e55;

--color-sample-tab-card-header: #634675;
--color-sample-tab-card-button: #7d5f9f;
--color-sample-tab-card-button-hover: #7d5f9f;
--color-sample-tab-card-button-active: #7d5f9f;
--color-sample-tab-card-border: #9979bd;
--color-selected-tab: var(--color-background);
}


}

svg {
/* filter: invert(); */
fill: var(--color-text);
}


:host {
font-size: var(--text-m);
line-height: var(--line-height);
Expand All @@ -56,29 +142,42 @@
box-sizing: border-box;
}

/* The report is in a shadow DOM so outside selectors don't reach it but properties */
/* can still be inherited from a parent element. We make sure it has black text on */
/* a white background otherwise eg a dark mode in the page could make parts of it */
/* unreadable. */

#report {
background: white;
color: black;
color-scheme: only light;
background: var(--color-background);
color: var(--color-text);
color-scheme: light dark;
border-radius: var(--radius, 0);
max-width: max-content;
}



h1 {
font-size: var(--text-xl);
}

button {
background: var(--color-button);
border: 1px solid var(--color-text);
border-radius: var(--radius);
padding: var(--space-s) var(--space-m);
}

button:hover {
background: var(--color-button-hover);
}

button:active {
background: var(--color-button-active);
}

button > * {
pointer-events: none;
}

select {
background: var(--color-button);
}

input[type="checkbox"] {
height: var(--checkbox-size);
width: var(--checkbox-size);
Expand Down Expand Up @@ -220,7 +319,7 @@ dd {
}

.shrinkable-text {
flex-basis: 20rem;
flex-basis: 20em;
flex-grow: 1;
}

Expand Down Expand Up @@ -274,25 +373,24 @@ dd {
}

.ok {
color: green;
color: var(--color-ok);
}

.warning {
color: #ff6600;
color: var(--color-warning);
}

.critical {
color: var(--red);
color: var(--color-critical);
}

.box-shadow {
--shadow-color: 0deg 0% 63%;

box-shadow:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
0.3px 0.5px 0.7px hsl(var(--color-shadow) / 0.36),
0.8px 1.6px 2px -0.8px hsl(var(--color-shadow) / 0.36),
2.1px 4.1px 5.2px -1.7px hsl(var(--color-shadow) / 0.36),
5px 10px 12.6px -2.5px hsl(var(--color-shadow) / 0.36);
}

/* Misc tweaks */
Expand All @@ -319,7 +417,7 @@ dd {
}

.important-note {
background-color: var(--lightgreen);
background-color: var(--color-important-note-background);
padding: var(--space-m);
border-radius: var(--radius);
}
16 changes: 10 additions & 6 deletions skrub/_reporting/_data/templates/column-summaries.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@

padding: var(--space-m);
margin-block-end: var(--space-m);
background-color: var(--header-color, var(--lightg));
background-color: var(--color-card-header);
border-block-end: var(--border-s) solid var(--mediumg);
}

Expand Down Expand Up @@ -124,13 +124,13 @@

.columns-in-sample-tab .card-header {
position: relative;
background-color: var(--darkgreen);
border-block-end: var(--border-s) solid var(--shadowgreen);
background-color: var(--color-sample-tab-card-header);
border-block-end: var(--border-s) solid var(--color-sample-tab-card-border);
padding-right: calc(var(--button-s) + var(--space-m));
}

.columns-in-sample-tab .card {
border-color: var(--shadowgreen);
border-color: var(--color-sample-tab-card-border);
}

/* Button for closing the card / deselecting the column in the table */
Expand All @@ -142,13 +142,17 @@
padding: var(--space-s);
border: none;
border-radius: var(--radius);
background: var(--darkgreen);
background: var(--color-sample-tab-card-button);

position: absolute;
top: var(--space-m);
right: var(--space-s);
}

.card .close-card-button:hover {
background: var(--verydarkgreen);
background: var(--color-sample-tab-card-button-hover);
}

.card .close-card-button:active {
background: var(--color-sample-tab-card-button-active);
}
12 changes: 6 additions & 6 deletions skrub/_reporting/_data/templates/copybutton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@
}

.copybutton {
background: #e0e0e0;
background: var(--color-button);
}

.copybutton:hover {
background: #eee;
background: var(--color-button-hover);
}

.copybutton:active {
background: #cccccc;
background: var(--color-button-active);
}

.copybutton:not([data-show-checkmark]) > :not(:first-child) {
Expand All @@ -67,8 +67,8 @@

.copied-message {
font-size: var(--text-s);
background-color: black;
color: white;
background-color: var(--color-text);
color: var(--color-background);
padding: var(--space-s);
border-radius: var(--radius);
position: absolute;
Expand All @@ -83,7 +83,7 @@
}

[data-shows-placeholder] {
color: #777777;
color: var(--color-muted-text);
}

.table-bar .box {
Expand Down
28 changes: 12 additions & 16 deletions skrub/_reporting/_data/templates/dataframe-sample.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@
}

tbody tr {
--active-column-color: var(--lightgreen);
--active-column-color: var(--color-active-column-1);
}

tbody tr:nth-child(2n -1) {
--active-column-color: var(--mediumgreen);
--active-column-color: var(--color-active-column-2);
}

thead {
--active-column-color: var(--darkgreen);
--active-column-color: var(--color-active-column-3);
}

.table-with-selectable-cells th[data-role="padding"]{
background-color: white;
background-color: var(--color-background);
border: none;
}

Expand Down Expand Up @@ -68,33 +68,29 @@ thead {

.table-with-selectable-cells th[data-role="index-level-name"],
.table-with-selectable-cells th[data-role="index-level-value"]{
background-color: white;
border: 1px solid var(--mediumg);
background-color: var(--color-background);
border: 1px solid var(--color-table-border);
text-align: right;
}

.table-with-selectable-cells th[data-role="dataframe-data"]{}

.table-cell[data-is-active] {
--active-column-color: var(--lightyellow);
--active-column-color: var(--color-active-cell);
}

table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
outline: var(--border-m) dotted black;
outline: var(--border-m) dotted;
}

.table-cell[data-is-active]:focus {
outline-width: var(--border-m);
outline-style: solid;
outline-color: Highlight;
outline-color: -webkit-focus-ring-color;
}

#report .table-cell[data-is-active][data-just-copied]:focus {
outline-width: var(--border-m);
outline-style: dashed;
outline-color: Highlight;
outline-color: -webkit-focus-ring-color;
}


Expand Down Expand Up @@ -166,10 +162,10 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
font-family: var(--fontStack-monospace);
padding: 0 var(--space-m);
line-height: 1.8;
color: #444444;
border: var(--border-s) solid #cccccc;
border-bottom: var(--border-s) solid #bbbbbb;
box-shadow: inset 0 calc(-1 * var(--border-s)) 0 #bbbbbb;
color: var(--color-keyboard-text);
border: var(--border-s) solid var(--color-keyboard-border);
border-bottom: var(--border-s) solid var(--color-keyboard-shadow);
box-shadow: inset 0 calc(-1 * var(--border-s)) 0 var(--color-keyboard-shadow);
border-radius: 0.2em;
min-width: 1em;
text-align: center;
Expand Down
7 changes: 0 additions & 7 deletions skrub/_reporting/_data/templates/pure-3.0.0/tables-min.css
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion skrub/_reporting/_data/templates/report.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% include "pure-3.0.0/base-min.css" %}
{% include "pure-3.0.0/tables-min.css" %}

{% include "base.css" %}
{% include "tables.css" %}
{% include "copybutton.css" %}
{% include "column-summaries.css" %}
{% include "dataframe-sample.css" %}
Expand Down
Loading