OpenSCD-Core theming

Context

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 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

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

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).