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

Speaking about the user-land solutions: we can learn from framework component libraries. Even though they use CSS in JS and not web components, theming concept is mostly the same.

So, let me briefly explain this for those who are not in context, and potentially to get more ideas:

## Theming variables

### Use cases

- design tokens: palette colors, size, space, font settings, shadows etc
- light and dark, high and low contrast presets

### CSS in JS example

```js
import { colors } from '@material-ui/core';

const white = '#FFFFFF';
const black = '#000000';

export default {
  black,
  white,
  primary: {
    contrastText: white,
    dark: colors.indigo[900],
    main: colors.indigo[500],
    light: colors.indigo[100]
  },
}
```

Source: [react-material-dashboard](https://github.com/devias-io/react-material-dashboard/blob/5504efc3c28ce7f96878600acff9d8fd459ea115/src/theme/palette.js#L1-L14)

### Solution

In the web components world, this theming pattern perfectly maps to custom CSS properties:
- good example: [Duet Design System tokens](https://www.duetds.com/tokens/) by @viljamis
- naming standard proposal: [wc-theming-standards](https://github.com/castastrophe/wc-theming-standards) by @castastrophe
- dark / light and contrast presets: [NUDE Elements demo](https://numl.tenphi.now.sh/) by @tenphi

## Theme overrides

### Use cases

- adjusting components for specific brand / product needs, ideally - using only CSS.
- theme presets, e.g. in Vaadin we have "compact" theme that needs overrides

### CSS in JS example

```js
import palette from '../palette';

export default {
  root: {
    color: palette.icon,
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.03)'
    }
  }
};
```

Source: [react-material-dashboard/](https://github.com/devias-io/react-material-dashboard/blob/5504efc3c28ce7f96878600acff9d8fd459ea115/src/theme/overrides/MuiIconButton.js#L1-L10)

### Solution

- Extend a custom element base class and override its styles?
  - recommended in [Elix blog post](https://component.kitchen/blog/posts/our-current-best-answer-for-styling-reusable-components-subclassing) by @JanMiksovsky
  - doesn't handle nested elements in shadow DOM
  - workaround: replacing tag names for CSS shadow parts
  - not a CSS solution, not available in certain conditions

I hope now it should be more clear what exactly is missing from the web platform. At Vaadin we are very committed to "make web components a success" and this is one of our pain points.

But also it feels to me like we need more input, so I hope everyone tagged by this comment could dedicate a bit of their time to provide any feedback, especially regarding use cases.

-- 
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-591379240