whatwg / whatwg.org

The WHATWG website and other static resources
https://whatwg.org/
Other
76 stars 50 forks source link

Add darkmode styles #429

Closed tabatkins closed 9 months ago

tabatkins commented 10 months ago

(Part 1 of the work for https://github.com/whatwg/meta/issues/222)

I manually checked the appearance of these styles against DOM, compat, webidl, and HTML itself. As far as I can tell, everything is handled well.

This'll need an accompanying PR for whatwg's boilerplate, I'll put that up momentarily.

tabatkins commented 10 months ago

An example of what they look like: Screenshot from 2023-12-19 15-03-11

domenic commented 10 months ago

This is exciting!

I sometimes drew from Bikeshed's existing darkmode colors, but mostly took the existing WHATWG color and just adapted it to fit better into darkmode.

Thank you especially for this attention to detail; keeping some of our individuality is very nice!

Currently I'm leaving the .wpt-test-margin styles, but I also can't find them anywhere. If they're not used we should remove these too.

Please feel free to remove!

The non-HTML whatwg specs all include Bikeshed's own dfn-panel styles, which were overriding what was in standard.css, so I went ahead and just made the standard.css dfn-panel styles only apply to HTML.

Ideally we would move these to HTML's styles.css, then.


I am a bit confused by the implications of the structure you have here for documents beyond the normal standards. Notably:

tabatkins commented 10 months ago

Please feel free to remove!

Cool.

Ideally we would move these to HTML's styles.css, then.

Makes sense, I can do so.

I am a bit confused by the implications of the structure you have here for documents beyond the normal standards.

To be fair, I was a bit confused too. It's not clear to me what subset of CSS files are used by any particular sort of document using this repo. We should probably document this in a README.

It looks like:

Inverting that mapping, we have:

This organization isn't workable for what we want to do here. There is no file shared by all four categories, but I need colors to be shared across all of them.

How about we add a whatwg.css that contains the color vars, and whatever styles are truly universal across all the spec categories (like .domTree)? Then one more just for non-RD specs for the Bikeshed-specific styles that RD doesn't use, so all four categories have their own specific stylesheet for whatever things only they need to care about.

In total, then, we'd have:

Sound reasonable?


Related, y'all vendor some of the Bikeshed styles, but not all of them. Do you have a general policy you'd like to set up, which we can capture in some documentation? Or is it best to leave it somewhat ad hoc, and you're okay with Bikeshed inlining some of its styles?

tabatkins commented 10 months ago

I just looked at a review draft and nm, all that the proposed whatwg.css needs is colors, honestly.

(Maybe call it base.css? common.css?)

tabatkins commented 10 months ago

Hm, do we want to consolidate the HTML and HTML-dev stylesheets into this repo as well? It would make future changes easier if they weren't spread across multiple repos.

domenic commented 10 months ago

The intent is that review drafts not support any niceties, so I don't think we need any new files. You can just locate everything common in the shared file, standard-shared-with-dev.css.

I think keeping HTML's CSS files in HTML is probably for the best, as more often we edit HTML's CSS files to do something HTML-specific, and coordinating that across two repositories is not great.

tabatkins commented 10 months ago

Okay, PR up to date!

Now I've checked these styles against HTML, HTML dev, DOM, and DOM RD. I think that's all the categories of things WHATWG produces?

tabatkins commented 10 months ago

Ping on final approval for this. A few other PRs need to be merged in concert: