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

Implement @smeragoel's table designs #1757

Merged
merged 7 commits into from
May 13, 2024
Merged

Implement @smeragoel's table designs #1757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cbe365d
Implement @smeragoel's data table designs
gabalafou Apr 5, 2024
cdac6b0
Working for nbsphinx (plus inside ipywidget)
gabalafou Apr 11, 2024
d7bd7bc
Add outer and column borders to data table
gabalafou Apr 11, 2024
8fbe569
Rename color vars
gabalafou Apr 11, 2024
f4af604
Merge branch 'main' into data-tables
gabalafou Apr 15, 2024
f907229
Extend data-table styles to all tables
gabalafou Apr 18, 2024
8d8ac06
Apply suggestions from code review
gabalafou May 7, 2024
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
51 changes: 48 additions & 3 deletions docs/examples/pydata.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@
"\n",
"This theme has built-in support and special styling for several major visualization libraries in the PyData ecosystem.\n",
"This ensures that the images and output generated by these libraries looks good for both light and dark modes.\n",
"Below are examples of each that we use as a benchmark for reference.\n",
"\n",
"Below are examples of each that we use as a benchmark for reference."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Pandas"
]
},
Expand All @@ -30,6 +35,46 @@
"df"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## IPyWidget"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I edited this example notebook to add a pandas data table inside of an ipywidget to help us catch issues like #1740 in the future.

]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"import numpy as np\n",
"import ipywidgets as widgets\n",
"from IPython.display import display\n",
"\n",
"tab = widgets.Tab()\n",
"\n",
"descr_str = \"Hello\"\n",
"\n",
"title = widgets.HTML(descr_str)\n",
"\n",
"# create output widgets\n",
"widget_images = widgets.Output()\n",
"widget_annotations = widgets.Output()\n",
"\n",
"# render in output widgets\n",
"with widget_images:\n",
" display(pd.DataFrame(np.random.randn(10,10)))\n",
"with widget_annotations:\n",
" display(pd.DataFrame(np.random.randn(10,10)))\n",
"\n",
"tab.children = [widget_images, widget_annotations]\n",
"tab.titles = [\"Images\", \"Annotations\"]\n",
"\n",
"display(widgets.VBox([title, tab]))"
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand Down Expand Up @@ -143,7 +188,7 @@
},
"language_info": {
"name": "python",
"version": "3.10.8"
"version": "3.11.6"
}
},
"nbformat": 4,
Expand Down
34 changes: 34 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,37 @@
border-radius: 0.25rem;
padding: 0.5rem;
}

@mixin table-colors {
color: var(--pst-color-table);
border: 1px solid var(--pst-color-table-outer-border);

th,
td {
~ th,
~ td {
border-left: 1px solid var(--pst-color-table-inner-border);
}
}

thead {
tr {
background-color: var(--pst-color-table-heading-bg);
border-bottom: 2px solid var(--pst-color-primary);
}
}

tbody {
tr {
&:nth-child(odd) {
background-color: var(--pst-color-table-row-zebra-low-bg);
}
&:nth-child(even) {
background-color: var(--pst-color-table-row-zebra-high-bg);
}
&:hover {
background-color: var(--pst-color-table-row-hover-bg);
}
}
}
}
4 changes: 4 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/content/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

// ensure table will fit in the article width and make them y-scrollable
table {
@include table-colors;

display: table;
overflow: auto;

Expand Down Expand Up @@ -46,6 +48,8 @@ td {

// override bootstrap table colors
.table {
@include table-colors;

--bs-table-bg: transparent; //background
--bs-table-color: var(
--pst-color-text-base
Expand Down
40 changes: 29 additions & 11 deletions src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,27 @@ html .jp-RenderedHTMLCommon {
}
}

// Dark theme special-cases
html[data-theme="dark"] .bd-content {
.nboutput {
.output_area.rendered_html {
@include cell-output-background;
.bd-content .nboutput {
.output_area {
&.rendered_html,
.jp-RenderedHTMLCommon {
// pandas
table.dataframe {
@include table-colors;
}
}

.output_area.stderr {
background-color: var(--pst-color-danger);
// Dark theme special-cases
html[data-theme="dark"] & {
&.rendered_html:not(:has(table.dataframe)),
// ipywidgets
.widget-subarea {
gabalafou marked this conversation as resolved.
Show resolved Hide resolved
@include cell-output-background;
}

&.stderr {
background-color: var(--pst-color-danger);
}
}
}
}
Expand All @@ -44,11 +56,17 @@ div.cell_output .output {
overflow-x: auto;
}

// Dark theme special-cases
html[data-theme="dark"] .bd-content {
div.cell_output {
.bd-content div.cell_output {
// pandas
table.dataframe {
@include table-colors;
}

html[data-theme="dark"] & {
img,
.text_html {
.text_html:not(:has(table.dataframe)),
// ipywidgets
.widget-subarea {
gabalafou marked this conversation as resolved.
Show resolved Hide resolved
@include cell-output-background;
}
}
Expand Down
16 changes: 16 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/variables/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,18 @@ $pst-semantic-colors: (
"light": #f3cf95,
"dark": #675c04,
),
"table": (
"light": #{map-deep-get($color-palette, "foundation", "black")},
"dark": #{map-deep-get($color-palette, "foundation", "white")},
),
"table-row-hover": (
"bg-light": #{map-deep-get($color-palette, "violet", "300")},
"bg-dark": #{map-deep-get($color-palette, "violet", "600")},
),
"table-inner-border": (
"light": #{map-deep-get($color-palette, "gray", "200")},
"dark": #364150,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried using one of the theme colors, but none of them looked as good to me as the one that @smeragoel picked out, which is labeled in Figma as foreground/light/muted-old.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for me. IIRC, I had to slightly tweak a couple of colours as I worked on the implementation of the colour palette to meet contrast requirements here and there and this was one of the colours I ended up having to modify 👍🏽 as long as we have this as a global variable and not an ad hoc colour in a stylesheet I think this is good.

),
// DEPTH COLORS - you can see the elevation colours and shades
// in the Figma file https://www.figma.com/file/rUrrHGhUBBIAAjQ82x6pz9/PyData-Design-system---proposal-for-implementation-(2)?node-id=1492%3A922&t=sQeQZehkOzposYEg-1
// background: color of the canvas / the furthest back layer
Expand Down Expand Up @@ -265,6 +277,10 @@ $pst-semantic-colors: (
& {
--pst-color-link: var(--pst-color-primary);
--pst-color-link-hover: var(--pst-color-secondary);
--pst-color-table-outer-border: var(--pst-color-surface);
--pst-color-table-heading-bg: var(--pst-color-surface);
--pst-color-table-row-zebra-high-bg: var(--pst-color-on-background);
--pst-color-table-row-zebra-low-bg: var(--pst-color-surface);
}
// adapt to light/dark-specific content
@if $mode == "light" {
Expand Down
Loading