Lumo defines a set of CSS custom properties you can use to apply consistent visual styles across your application.
style.html to use them.
The border radius values are defined as
em by default, so they scale with the font size.
If you want to set a border radius property to zero, you need to specify a unit for it as well (i.e.
0em), as it can be used in
calc functions which will be undefined if the border radius is a unitless value.
Shadows are used to indicate elements which are stacked on top of other elements in the UI.
Use this property for elements that are clickable, such as buttons. That way, an application
can easily decide which mouse cursor to use for them. Traditional web address links (anchors)
should always use the
pointer cursor (pointing hand).
By default, Lumo uses the
default cursor (arrow) for clickable elements.
calc(var(--lumo-size-m) / 2)
The shadows use various
--lumo-shade colors. Computed values are shown here instead of the declared values.