Context
In the OpenSCD monolith architecture has limited global styling options. It only offers "normal" and dark theme.
This leads to a lot of work for distributors to change e.g. color scheme's and logo's. This will be hard to maintain.
Decision
If we want a theme able application where plugin authors can rely on a global style, we should make use of css variables. We can also make use of Design Tokens. With design tokens, we can generate css variables.
We can then override the Material css variables, so all the material components (mdc/mwc) will have the same look.
Background
Related links:
Naming
In order to make this work a global agreement of naming variables is needed. OpenSCD-core defines the following standard:
--{namespace}-[{tier}]-[{prefix}]-{name}-[{suffix}]-[{scale}]Implementation of this standard:
Example 1
--oscd-color-primary: #548ea6;
Namespace:
--oscd-color-primary
Tier: -
prefix: -
name:
--oscd-color-primary
suffix:
--oscd-color-primary
scale: -
Example 2
--oscd-dark-color-primary-100: #548ea6;
Namespace:
--oscd-dark-color-primary-100
Tier:
--oscd-dark-color-primary-100
prefix: -
name:
--oscd-dark-color-primary-100
suffix:
--oscd-dark-color-primary-100
scale:
--oscd-dark-color-primary-100
Consequences
This decision will mean that the current OSCD components will need some extra css styling to link OSCD css variables to internal styles (or mwc-variables).