Custom properties

[receter]

The general idea is that there is a curated set of custom properties that can be set to define the look and feel of the components.

All custom properties are unset per default and there are no default values defined inside component styles. But there is a default-custom-properties.css file containing all variables with a default configuration.

The default-custom-properties.css file can be imported and overridden by taking advantage of the CSS order of appearance rule. It could also be copied and modified but in this case it should be advised to always check for new variables/defaults when upgrading the library.

Naming

The naming of the variables is a act of balance between readability and keeping the names short.

All variables should have a library suffix, like --sys42- to help avoid global namespace issues.

Without abbreviations names are quite long:

--sys42-button-padding-horizontal
--sys42-button-border-radius

My first idea was to use Emmet syntax and abbreviations like:

--sys42-button-p-h
--sys42-button-bdrs

But this syntax is hard to read and not everyone might know that bdrs is short for border-radius.

My current approach is to write it out like, but use some abbreviations. The rules for this are yet to be defined:

--sys42-button-padding-horiz
--sys42-button-padding-vert
--sys42-button-background
--sys42-button-background--hover

The general pattern is PREFIX-NAME-PROPERTY--STATE

Using the variables

All variables can be used by any component. For example a SpecialButton can use --sys42-button-border-radius to be in sync the the radius of buttons.

It is not wanted that everything can be configured, there should be unstyled versions of all components that can be used to change a design more drastically if needed.