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
...
themeable 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
prefixPrefix: -
nameName:
--oscd-dark-color-primary-100
suffixSuffix:
--oscd-dark-color-primary-100
scaleScale:
--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).