DOP-4731: Toggle dark mode for ListTable

[rayangler]

Stories/Links:

DOP-4731

Current Behavior:

Server docs - tables that include zebra striping
Server docs - tables that include stub columns
Server docs - tables that include stub columns and zebra striping (zebra stripe styles take precedence)
Server docs - tables that are also in callouts

Staging Links:

Server docs - tables that include zebra striping
Server docs - tables that include stub columns
Server docs - tables that include stub columns and zebra striping (zebra stripe styles should take precedence, like in prod)
Server docs - tables that are also in callouts

Notes:

As discussed in planning, upgrading the LG Table is out of scope for this ticket due to a lot of breaking changes and restructuring we'd need to do to accommodate the latest version of the table component. For this reason, I went ahead and overwrote the dark mode colors for just the rows for the table, and it matches the site theme well now. Otherwise, the style would not match the current dark mode theme:

We should consider upgrading the component as part of DOP-3614 relatively soon though.

README updates

• • This PR introduces changes that should be reflected in the README, and I have made those updates.
• • This PR does not introduce changes that should be reflected in the README

[mayaraman19]

Thank you for doing this, the zebra stripes look great! I have a couple comments:

• we probably should have given this more visibility, but offline we decided that our convention for changing CSS styles in dark mode would be to use CSS variables that are passed in via the style attribute - check out this change in one of Caesar's PRs, hopefully that makes the convention more clear or also reach out if you have questions ofc
• Also, maybe this is out of the scope of this PR, but the font for some tables/parts of tables changes in Dark Mode? The table under this section for example

[seungpark]

looks great! just a minor question below concerning alternating rows

[rayangler]

we probably should have given this more visibility, but offline we decided that our convention for changing CSS styles in dark mode would be to use CSS variables that are passed in via the style attribute - check out this change in one of Caesar's PRs, hopefully that makes the convention more clear or also reach out if you have questions ofc

Thanks for the heads up! Since we're overriding an internal LG style rather than a CSS style of our own, this might lead to us needing to redefine LG's light mode colors as well with this pattern. I can give it a try though

Also, maybe this is out of the scope of this PR, but the font for some tables/parts of tables changes in Dark Mode? The table under this section for example

Thanks for flagging this! I hadn't even realized it was a different font. Seems like "Euclid Circular A" isn't included in the font family for some reason for dark mode... I'll look into this.

[rayangler]

Also wanted to flag that I just noticed really awkward styling with stub columns (see the 2nd and 3rd tables in this page). I'll spend some time looking into this

[rayangler]

@mayaraman19 I've gone ahead and addressed the 2 things you mentioned. The style prop does make it a bit awkward with needing to redefine certain default styles we're overriding, but hopefully it still looks sane. Let me know what you think!

I've also gone ahead and updated staging links with a couple more examples as well

[seungpark]

LGTM ! great catches on the stub and font families!

[mayaraman19]

👍 thank you for doing this!