Implement @smeragoel's table designs

[gabalafou]

Designs at Quansight-Labs/czi-scientific-python-mgmt#50

Some preview URLs with <table> elements to check:

• https://pydata-sphinx-theme--1757.org.readthedocs.build/en/1757/examples/pydata.html
• https://pydata-sphinx-theme--1757.org.readthedocs.build/en/1757/examples/kitchen-sink/tables.html
• https://pydata-sphinx-theme--1757.org.readthedocs.build/en/1757/examples/kitchen-sink/api.html
• https://pydata-sphinx-theme--1757.org.readthedocs.build/en/1757/api/pydata_sphinx_theme/index.html

[gabalafou]

The preview build has been checked by @smeragoel. This PR is now ready for review.

[gabalafou]

self review

[gabalafou]

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.

[trallard]

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.

[gabalafou]

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.

[trallard]

Had a quick nosey and I have a couple questions

1. Non-data tables will be styled in a separate PR correct?
2. Since the tables in widgets seem to inherit/use the same style was it intentional that the div/tabbed component in which these are embedded remain light grey in dark mode? Or is this an unintended thing?

[gabalafou]

Replies to above questions:

1. I think that's a good plan to keep this PR moving along.
2. I think you're referring to when the Pandas data table is put inside the example tabbed ipywidget. We get a set of layers that goes (back to front) black > gray > white > black, as shown in the following screenshot:
   .

I admit it doesn't look great but it is intentional. I applied the cell-output-background mixin to the ipywidget container (.widget-subarea) for the same reason it is applied to other notebook outputs—namely, neither those outputs nor ipywidgets have been styled for dark themes.

If you don't apply the cell-output-background mixin with the light gray background, then you're not going to see the black text "Hello" because ipywidgets isn't styled for dark mode—it assumes a light background.

There's really no way around this. If we want to follow the existing dark/light mode conventions in the stylesheets and we want to apply these new styles to Pandas data tables that appear inside of ipywidgets, then we are going to end up with this dark-light-dark layering in dark mode. There are only three ways I see around it:

1. Don't apply the data tables mixin to ipywidgets, which would mean our new styles would not get applied to Pandas data tables inside of ipywidgets
2. Write two versions of the mixin, one light, one dark, rather than relying on CSS vars that vary on mode. This is possible I think but it goes against the pattern of how dark mode is implemented in other places in our stylesheet code.
3. Try to add our own styles to ipywidgets so they look good in dark mode. My guess is we could write a set of rules that work in most but not all cases. This would be a band-aid solution until ipywidgets supports dark mode. If ipywidgets supported dark mode, we wouldn't have this dark-light-dark layering issue at all.

[gabalafou]

Failed checks unrelated, see #1772

[gabalafou]

Not sure about the failing codecov/project check...

[trallard]

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.

[trallard]

I think you're referring to when the Pandas data table is put inside the example tabbed ipywidget.

Yes, that is what I was referring to. While this does not look as nice or polished as the other tables, reading the alternatives for aligning the style makes them seem more hacky/problematic than the current style mismatch, so we can leave them as they are for now (they are already much better than they were before, anyway).

Try to add our own styles to ipywidgets so they look good in dark mode. My guess is we could write a set of rules that work in most but not all cases. This would be a band-aid solution jupyter-widgets/ipywidgets#3675. If ipywidgets supported dark mode, we wouldn't have this dark-light-dark layering issue at all.

This would be perhaps the best solution. The linked issue does not have any follow-ups or responses, so perhaps we should discuss it internally and see if we can offer some time/capacity to make this move forward WDYT @gabalafou?