Re: [w3c/webcomponents] Theming options for shadow roots (#864)

Let me illustrate our needs, described by https://github.com/w3c/webcomponents/issues/864#issuecomment-586752811, with possible syntax.

## Small preset

Our components provide a "small" theme preset, which is distributed as bunch of styles that can be applied by app developers. These styles could look like this (based on [real styles](https://github.com/vaadin/vaadin-text-field/blob/1bc33a2d065206177372763db2bd9ed1c5126ea0/theme/lumo/vaadin-text-field-styles.html#L226-L233)):

```css
@media (theme-name: 'vaadin') {
  :is(vaadin-text-field, vaadin-select) {
    font-size: var(--font-size-s);
  }

  :is(vaadin-text-field, vaadin-select):state(has-label)::part(label) {
    font-size: var(--font-size-xs);
  }
}
```

Then, in the next version, we change label to use `--font-size-xxs`. So we add another file:

```css
@media (theme-name: 'vaadin') and (theme-version: '2.0') {
  :is(vaadin-text-field, vaadin-select):state(has-label)::part(label) {
    font-size: var(--font-size-xxs);
  }
}
```

## RTL preset

Another [real example](https://github.com/vaadin/vaadin-text-field/blob/8edd5fdd348475982c51378a032efd283c9d2a58/theme/lumo/vaadin-text-field-styles.html#L345-L347) of such a preset is a separate file with RTL styles:

```css
@media (theme-name: 'vaadin') {
  ::is(vaadin-text-field, vaadin-select):dir(rtl)::part(input-field)::after {
    transform-origin: 0% 0;
  }
}
```

## Possible API

```js
this.attachShadow({ mode: 'open', theme: { name: 'vaadin', version: '1.0' }}); 
```

## Expected benefits

### For library developers

- expose components to a certain "theme registry" to enable sharing styles
- create separate CSS files with "theme presets", do not pollute core styles

### For add-ons developers

- create 3rd party components (add-ons) that get styles from a certain theme
- explicitly depend on specific version of a theme, and upgrade when needed

### For application developers

- using different versions of components with [scoped CE registries](https://github.com/w3c/webcomponents/pull/865)
- update individual components to newer versions without rewriting all CSS
- load (and unload, which is also important) theme presets dynamically

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/864#issuecomment-591484810