[RFC] Design Systems + Theming

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Part of maintaining any website with some degree of UX consistency tends to require a bit of planning and implementation around a design system. A way of expressing and reusing styles across a website and its components, from things like fonts and icons, to color, to heading styles, and all sorts of readability and formatting related considerations that make any website a pleasure to use.

This RFC aims to start the discussion around how to manage these sorts of elements and how to implement them in a Web Components world, mostly when dealing with Shadow DOM.

Details

To dig into the details a bit more, some technologies / topics that should be evaluated and explored are:

1. Usage (pros / cons) of ShadowDOM vs LightDOM, and interop with features like CSS variables, nested selectors
2. Theming in general, like even just making some examples or boilerplates (Greenwood templates / themes could ultimately be its own RFC)
3. How technologies like CSS Modules and Styled Components fit into the story
4. Documentation vs implementation, e.g. what should be in greenwood itself vs what should be supported in a way the developers can (ideally) pick based on their own preferences?
5. How does this all fit into the publishing (to npm) story? Some context.
6. Are preprocessors like SASS / LESS still needed, or is PostCSS enough?

I'm sure there's more, but this should get the conversation going and we can use the website to create POC branches to try different things out. Ideally avoid picking winners / losers and hopefully being able to support multiple workflows instead. We might pick our own for the website, but it shouldn't necessarily be defacto for greenwood specifically, if that makes sense.

Related Articles

• https://css-tricks.com/styling-a-web-component/
• https://developers.google.com/web/fundamentals/web-components/shadowdom
• https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/

[thescientist13]

Gatsby Themes
https://www.gatsbyjs.org/blog/2019-07-03-customizing-styles-in-gatsby-themes-with-theme-ui/

[aholtzman]

My fist impression of Gatsby Themes is that it seems like an awful lot of complexity for a limited number of cases where it would truly be useful. Having CSS-in-JS as part of the mix makes sense, but I think our need should be served with something leaner and more open. I found this short article about using Emotion with Web Components - seems like a promising path to pursue.

https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/

I played around a bit with Styled-Components in the site build but with no success; I have not used Emotion yet but it looks easy enough and it not dependent on JSX.

[thescientist13]

Should also have some documentation practices around handling FOUC and things like loading fonts from the build and not from Google.

[thescientist13]

TIL LitElement recommends using the static styles property
https://lit-element.polymer-project.org/guide/styles#static-styles

Also be aware of unsafeCss
https://lit-element.polymer-project.org/guide/styles#static-styles

example usage, works nice with external files too + :host!
thegreenhouseio/www.thegreenhouse.io#123

[thescientist13]

Something worth documenting somewhere, or a good trick in general, but if you want to disable ShadowDOM for a LitElement, you can use

createRenderRoot() {
  return this;

[thescientist13]

An article on design systems when moving from stencil to lit
https://www.abeautifulsite.net/posts/moving-from-stencil-to-lit-element/

[thescientist13]

Got a pretty cool example of a project using Greenwood + Storybook + @web/test-runner working with Lit + CSS Custom properties, building a Single Page Application! 👀 🥳
AnalogStudiosRI/www.analogstudios.net#4

[thescientist13]

One suggestion I've seen to help with the FOUC and WCs is to use this trick

:not(:defined) {
  opacity: 0;
}

To help keep custom elements hidden until their respective customElements.define has been called and the browser has loaded it. Not sure if #576 alleviates this issue much, but still a good technique we can track and explore when the time comes.

[thescientist13]

I think with support for Import Attributes now in Greenwood, design system work is a lot more achievable, and so can close this one out.