genindex.html, Hlists (and possibly more table-based items) become funky after 0.15.3 upgrade

[abjarna]

This page uses version 0.15.3:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/genindex.html

This page uses version 0.15.2:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.2/genindex.html

The style in genindex.html is as expected in version 0.15.2, but in version 0.15.3 the indextable has dark grey color and purple color when hovering.

See attached screenshots:

[trallard]

Thanks for raising this @abjarna.
This was introduced in #1757, when the table styling was improved. So while not a bug it is an unexpected result from this PR.

Adding a screenshot of the dark version:

I do not think the grey background is an issue since this is a table (albeit a special case of a table), but perhaps the hover colour (purple) could be removed as the focus item for interaction will be the links inside a given cell.

Thoughts @gabalafou @smeragoel

[abjarna]

Ok, thank you! I wasn't aware of #1757, but in my opinion this makes the genindex.html look really bad. In addition, the genindex.html now looks totally different from previous versions, which was probably not the intention of #1757.

Also, the grey background either overlaps between left and right column, or creates a thin table border. This results in a thin line in front of the right column in the genindex.html. See attachment.

I haven't yet tried to fix this in my custom.css, but it's probably an easy fix.

However, I recommend a more permanent fix to prevent the above changes to genindex.html.

[abjarna]

I also found similar issues when using Hlists.

This page uses version 0.15.3:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/examples/kitchen-sink/lists.html

This page uses version 0.15.2:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.2/examples/kitchen-sink/lists.html

Are you @trallard aware of any ways to disable these grey colors and purple color when hovering, besides using custom CSS?

[trallard]

Aha! Another item we did not realise was a table.

Edit the correct PR that introduced this is #1757

Are you @trallard aware of any ways to disable these grey colors and purple color when hovering, besides using custom CSS?

Unfortunately, right now, you'd need to add custom styles specifically to override these lines

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss

Lines 44 to 55 in 97e60ba

	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);

tough this would affect all tables on your site.
However, it seems we'd need to make some further improvements to these at the theme level anyway.

[abjarna]

Thank you for the quick response @trallard !

And also thanks for all your hard work on the PyData theme. Best Sphinx theme out there by far! 🙏

[trallard]

Thank you for reporting these style mishaps 🙏🏽

I am tagging @gabalafou and @smeragoel here as they were the main folks working on tables restyling: folks let's chat about this and scope any further improvements needed

[gabalafou]

Quick fix: #1864.

Ideally, we would change the output for both hlists and the index page to not use tables. These are using tables only for layout, not semantically to actually communicate tabular data.

[drammock]

Ideally, we would change the output for both hlists and the index page to not use tables.

Are you suggesting we do that in the theme? Or as an upstream change to sphinx?