Add darkmode styles

[tabatkins]

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

• Swapped out color usage with vars declared on root
  • 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.
• 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.
• I removed the legacy .mdn styles from -shared; I cannot find a single instance of them in all of whatwg nor in HTML. If they're actually used somewhere, we should update that location to the modern tooling.
• 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. (I haven't var()'d any of their colors yet, since I can't see what they'll look like in darkmode anyway.)

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]

An example of what they look like:

[domenic]

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:

• Review drafts (e.g. here) include spec.css and review-draft.css only. I think that means the var(--text) you've introduced to review-draft.css will not work.
• The HTML Standard Dev edition includes standard-shared-with-dev.css and styles.css from the HTML repo. I think it will also be missing lots of variables.

[tabatkins]

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:

• Bikeshedded WHATWG specs use spec.css, standard.css, and standard-shared-with-dev.css, from this repo. (Plus some inline styles per spec, sometimes.)
• HTML uses those three, plus its own styles.css from the HTML repo.
• RDs, apparently, use spec.css and review-draft.css from this repo.
• HTML dev uses standard-shared-with-dev.css from here, and dev/styles.css from the HTML repo.

Inverting that mapping, we have:

• spec.css used by Bikeshed WHATWG specs and Review Drafts
• standard.css used by Bikeshed WHATWG specs and HTML
• standard-shared-with-dev.css used by Bikeshed WHATWG specs, HTML, and HTML dev
• review-draft.css, used by Review Drafts
• [html]/styles.css, used by HTML
• [html]/dev/styles.css, used by HTML dev

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:

• whatwg.css for all four categories (normal, RD, HTML, HTML-dev)
• spec.css for all Bikeshedded specs (normal + RD)
• standard.css for all whatwg "standards" (normal + HTML)
• standard-shared-with-dev.css for styles that HTML-dev uses too (normal + HTML + HTML-dev)
• four individual css files, one for each category, for whatever specific needs they 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]

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]

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]

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]

Okay, PR up to date!

• Color definitions moved to the -shared stylesheet.
• HTML-dev now properly darkmoded as well. (in https://github.com/whatwg/html/pull/10017)
• Wattsi dfn-panel code moved to HTML's stylesheet.
• Stylesheet organization documented.

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]

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

• https://github.com/whatwg/html/pull/10017
• https://github.com/speced/bikeshed-boilerplate/pull/56