Home

Welcome to the community site for theming web components! We are working to create a unifying language for theming that allows us to build a set of Custom Properties (aka CSS Variables) that can then format a web component pulled in from any library that prescribes to this standard.

Getting started

Before jumping in, what do you need to know to contribute?

About the technologies

• What are web components?
• What are custom properties?

Design theory

• Design systems
• BEM naming conventions

What is a theme?

A theme is a layer of custom properties which abstractly describe design concepts which can be integrated into individual web components in a two-layer system. First layer is global theme variables. The second layer is the component-specific variables. Component-specific variables will first look to see if the global theme layer exists and then checks for it's component-specific variable (and/or a fallback value which can be hardcoded into the component).

Theme layers are powerful because they are opt-in. They allow you to hook into a web component and give it a flavor of your brand or design philosophy for your site or infrastructure of sites. A component is not forced to use these variables or told where to use these variables. They are available to use and abstractly named such that they can be used in new and creative ways.

Proposed naming conventions

1. All theme variables should be prefixed with --theme.
2. Variables should be named as abstractly as possible, describing how the color or concept is used but avoiding describing a one-off use-case. Example of an abstract name: --theme--spacing--internal versus a use-case name such as --theme--card-spacing.
   • Avoid using modifiers with limited scope, opting instead for abstract naming
   • If describing size specifically and intentionally limiting that scope, sm, md, and lg would be appropriate.
3. If the variable is for use with a specific property, use CamelCase to indicate that mapping. For example, if you want to store font-family as a theme value, that variable would be named --theme--general--FontFamily. What if you want a separate font just for headings? --theme--heading--FontFamily.