feat(www): Add gatsby-plugin-theme-ui, dark theme MVP

[fk]

Haaaaaacktooooobeeeer!
🍂⚗️📐🔦🧰🧹🔨🙃

This PR (draft) puts www on gatsby-plugin-theme-ui 🔌, adding a "dark mode" 🌙 along the way. It's fairly functional already (and builds ;-)), but not without a few rough edges —both visible, and below the surface.

Basic questions (IMO ;-)) …

• Do we even want .org on theme-ui? 😛
• If so, do we want to ship the initial version with or without dark mode?
  The current state of the dark theme is usable, but MVP.

… and a few 🙄 notes on where this is at:

• add gatsby-plugin-theme-ui using the sx prop along the custom pragma comment
  • ditch utils/presets in favor of src/gatsby-plugin-theme-ui, which now is our single (and currently pretty ugly) shadowed source of truth
  • no need for wrap-root-element anymore in www/gatsby-ssr.js—src/gatsby-plugin-theme-ui/components instead
  • refactor a lot of CSS to use sx, so most token imports (from the removed utils/presets) are gone
    • still importing a couple tokens here and there, now from src/gatsby-plugin-theme-ui—(mostly) mediaQueries
    • didn't opt in to the theme-ui responsive styles array for now; not against it, just a bit scared ;-)
• move global styles out of utils/typography to utils/styles/global and break those into chunks (Prism tokens, code block styles and language badges)—I'm not attached to the new location though; both things simply helped refactoring
• add a first shot at a dark theme
  • adjust styles and assets for dark mode
    • layer model component
    • algolia docsearch dropdown
    • homepage-logo-banner logo colors
    • feedback widget
    • homepage section
    • newsletter components
      • default
      • homepage
    • Showcase and Starters
      • modal
      • share menu (along the way/easier: ditch the share menu "themes" (orange for starter, purple for showcase items))
    • /features
    • mobile navigation icons — realigned all icons currently in use: 6950d67 .
      .
      
    • sidebars
      • docs
      • showcase (sites/starters)
      • plugin search
  • add that dark mode switch to the main navigation—kudos to our friends at narative.co and to and Aaron Iker
  • find out why using theme-ui's useCustomProperties errors edit: updating theme-ui helped
  • fix /guidelines/*.* pages
    • remove utils/guidelines/theme
    • remove utils/guidelines/theme-inverted (used in /guidelines/typography)—one dark mode is enough ;-)
  • remove emotion-theming
• extend tokens from gatsby-design-tokens to
  • provide default colors required by theme-ui:
    • text
      • fix conflict with gatsby-design-tokens' colors.text object
    • background
    • primary
    • secondary
    • accent
    • muted
  • fulfill theme-ui's typography conventions:
    • fontWeights
    • fonts
      • fonts.heading
      • fonts.body
    • lineHeights
      • lineHeights.body
      • lineHeights.heading
• refactor colors.ui
  • rename colors.ui.border.subtle -> colors.ui.border
• along the way…
  • consolidate various "screen-reader-only" CSS styles (clip: rect(0, 0, 0, 0)) in utils/styles — rule of three easy ;-)
  • consolidate 3️⃣ skip-nav-links + styles in component
  • tidy avatar component, use it in template-contributor-page
  • increase main navigation "social links" icon sizes, make them calmer
  • fiddle around with main navigation search form UI (WIP)—keep it expanded where possible for larger screens, and always expand it for mobile
  • make the blog post headers a little more interesting
  • increase whitespace below breadcrumbs path
  • remove a bunch of WebkitFontSmoothing: antialiased—we switched to using it on html some time ago
  • a11y improvements:
    • adjust token colors for (Prism) syntax highlighting to comply to WCAG 2.0 AA standard contrast ratios (tried to test quite a bit using random code from the docs, but didn't go the whole mile and set up proper examples to test)
    • fix "Edit this page on GitHub" link color contrast

Now and / or later…

• port theme changes and additions to gatsby-design-tokens, and give the new tokens (and their names) a good second look, consolidate
• if possible, switch our custom syntax highlighting implementation to the "theme-ui way" (cc @DSchau)
• improve showcase/starter sidebar and item/card styles—dark mode shows a lot of its issues
• maybe try to use Typography.js' styles only for the "main content"

Related Issues

#8789 — Documentation Dark Theme

[t2ca]

Wow!

[fk]

Preview (with a subset of "Showcase" sites): https://5d9b0aeb7cf4dd9d42c83261--relaxed-saha-83a4fd.netlify.com/ https://5d9bd6019fabeaa5113a7d66--relaxed-saha-83a4fd.netlify.com/

[jletey]

Preview (with a subset of "Showcase" sites): https://5d9b0aeb7cf4dd9d42c83261--relaxed-saha-83a4fd.netlify.com/

@fk If I may, I've noticed on the deployed site that the moon/sun icon isn't aligned with the other icons in the header

Light	Dark

I think it has something to do with varying sizes of the icons.

[fk]

@johnletey Sure you may! Thank you for taking the time! 🤗

the moon/sun icon isn't aligned with the other icons in the header

Thanks for calling that out, the switch button needs a little nudge indeed! 🙏
Will take care of that later today!

[m-allanson]

Dark mode 🎉🌃🌟 As you noted, there are some areas that need more work but overall I think this is looking excellent. Let's merge?

Looking on webpagetest (and ignoring the First Byte Time), it seems like this includes 15Kb less for Document Complete, and 1Kb extra for Fully Loaded.

• gatsbyjs.org

• dark mode preview

[fk]

Looking on webpagetest (and ignoring the First Byte Time), it seems like this includes 15Kb less for Document Complete, and 1Kb extra for Fully Loaded.

🎉 Unexpected good news?!
Lemme get that thing ready to

[gillkyle]

Can't wait to see this merged!

[fk]

🚨Almost mandatory YT link: https://www.youtube.com/watch?v=tm6x0q2INSs