Theming component 🎨

[yinonov]

Develop a wrapper component to apply theming to inner components
Apply css variables only to define theming context
note that any css styling props will not apply to tags deeper than 1st level nesting

this has been in plan in the past but was dropped due to the barriers mentioned above.

the updated plan is to only provide the theming exactly as scheme does but in a component modular practice

<vwc-theme dark alternate>
  <form>
    <vwc-textfield></vwc-textfield>
    <vwc-button></vwc-button>
  </form>
</vwc-theme>

Note: Fast components (Microsoft's), Spectrum (Adobe) provide that same practice

This is a 1 stop shop for

• color scheme
• scale (sizing, typography, block-size, shaping)

[YonatanKra]

It is a missing feature and I think can be very useful.
Then again - do we have a use case for it?
If we go open source, we'd probably tackle this - but inside Vonage? Dunno...

[yinonov]

It will provide the same output as scheme. Only in an encapsulated modular fashion

[gullerya]

I'd put the following cases as a validational:

• will we allow / enforce more than one vwc-theme in the whole app? given that it is including alternate, probably yes, but can we / shall we ensure that dark is not mixed with light within it?
• even when not parent child case - will we allow sibling-like vwc-theme in the whole app? can we / shall we ensure that the theme is the same for all of them?
• how do we see integration flow from the consumer perspective: is it spread all of it around HTML and later on move them all up till the body is last wrapped?

[yinonov]

good point on light/dark, we dont want this to stir. initializing a theme in a session should be idempotent.
as for integration, I'm saying ATM let's steer away from context as it feels like meddling in LOBs apps is too challenging while trying to hold the rope at its both ends. so yes, expand the region of wrapping gradually.

the vision is to later on provide more identities such

• <vwc-typography>
• <vwc-spacing dense>
• <vwc-shape>
• etc'...

[tveinfeld]

Interesting concept 👍 what is the advantage over using CSS classes defining variables?

[yinonov]

#856 (reply in thread)

[tveinfeld]

why is encapsulation important?

in the example above, would the css vars applied on vwc-textfield by vwc-theme pierce through its shadow dom? if so, how does the encapsulation quality manifests?

[yinonov]

this might help illustrate it.

I feel it makes a more declarative code in the html.

consumers would be able to easily grasp and implements UI regions. well, the plan is to provide only vvd prefixed css variables so encapsulation isn't a big issue and might not affect any style incidentally. but it will still keep a pristine DOM structure

[yinonov]

Introducing an idea to provide design system identities as components rather than esm that apply styles (css variables only) on the html scope.
This should be referred to as a concept on how to bind components styles to predefined variants of choice.

<!-- theme ideally would be integrated only once in an app -->
<vwc-theme theme="light">
   <!-- typography ideally would be integrated only once in an app -->
   <vwc-typography>
      <vwc-sizing>
         <main>
            <vwc-top-app-bar>
               <!-- theme toggle button would set the closest vwc-theme ancestor (if exist) -->
               <vwc-theme-toggle-button slot="action"></vwc-theme-toggle-button>
            </vwc-top-app-bar>
            <h1>Welcome to our app</h1>
            <!-- notice this deeper scope and second usage of sizing to apply large size on button instead of the current button API 'enlarged' button as a low level component can drop support of dense / enlarged properties, rather would refer its block-size value to a css variable provided by `vwc - sizing` (it can obviously default to some hardcoded value of choice) -->
            <vwc-sizing size="large">
               <vwc-button>Click me</vwc-button>
            </vwc-sizing>
         </main>
         <aside>
            <vwc-alternate>
               <!-- aside content -->
            </vwc-alternate>
         </aside>
      </vwc-sizing>
   </vwc-typography>
</vwc-theme>

disadvantages:

• Extra html for consumers to handle
• Might result in breaking changes (unless able to precedence the theme component's specificity over affected components)

[yinonov]

challenging use case

buttons can have various shapes by default

<vwc-button>Click me</vwc-button>
<vwc-icon-button icon="profile"></vwc-icon-button>

The above default button is rounded in corners while icon-button is circled
how will <vwc-shape> affect the 2 if has a default of rounded? how can we apply 2 shapes in same context?