Context
In the 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 schemes and logo's. This will be hard to maintain by the distributor of OpenSCD/CoMPAS.
Decision
If we want a theme able themeable application where plugin authors can rely on a global style, we should make use of css CSS variables. We can also make use of Design Tokens. With design tokens, we can generate css CSS variables.
We can then override the Material css 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:
...
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;
...
--oscd-dark-color-primary-100
Tier:
--oscd-dark-color-primary-100
prefixPrefix: -
nameName:
--oscd-dark-color-primary-100
suffixSuffix:
--oscd-dark-color-primary-100
scaleScale:
--oscd-dark-color-primary-100
Alternatives
...
Only useful when everyone uses the same framework
Consequences
This decision will mean that the current OSCD components will need some extra css CSS styling to link OSCD css CSS variables to internal styles (or mwc-variables).