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 .by the distributor of OpenSCD/CoMPAS
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
...
--oscd-color-primary
scale: -
Example 2
--oscd-dark-color-primary-100: #548ea6;
Namespace:
--oscd-dark-color-primary-100
...
--oscd-dark-color-primary-100
prefix: -
name:
--oscd-dark-color-primary-100
...
--oscd-dark-color-primary-100
scale:
--oscd-dark-color-primary-100
Alternatives
No theming/styling at all
Leave it up to the distributor
Framework specific solutions
Pro's
Easy to integrate for the framework used
Con's
Only useful when everyone uses the same framework
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).