Lumo

Style

Lumo defines a set of CSS custom properties you can use to apply consistent visual styles across your application.

Import style.html to use them.

Border radius

The border radius values are defined as em by default, so they scale with the font size.

Removing border radius

If you want to set a border radius property to zero, you need to specify a unit for it as well (i.e. 0px or 0em), as it can be used in calc functions which will be undefined if the border radius is a unitless value.

Shadow

Shadows are used to indicate elements which are stacked on top of other elements in the UI.

Cursor for clickable elements

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.

Custom properties

Border radius

--lumo-border-radius-s: Use for small elements. To ensure they never turn into full circles, keep this value below 0.5em.
--lumo-border-radius-m: The most commonly used roundness. It’s recommended to keep the value between 0em and calc(var(--lumo-size-m) / 2)
--lumo-border-radius-l: Use for large containers, such as cards and dialogs. It’s recommended to keep the value between 0em and 0.5em
--lumo-border-radius: Deprecated. Use --lumo-border-radius-m instead.

Shadow

The shadows use various --lumo-shade colors. Computed values are shown here instead of the declared values.

--lumo-box-shadow-xs: Elements closest to the application background, for example cards.
--lumo-box-shadow-s: Tooltips, etc.
--lumo-box-shadow-m: Contextual popups, such as select menus.
--lumo-box-shadow-l: Elements that rise above above most elements in the UI, for example dialogs.
--lumo-box-shadow-xl: Elements highest in the stacking order, for example notifications, which should be above all other content.

Interaction

--lumo-clickable-cursor