Docs

Docs

Using CSS Variables

Hilla uses the Vaadin Lumo theme as a base for component and application styling. Lumo is based on a set of CSS custom properties (variables) that you can use to achieve a consistent look and feel across applications. You can find the properties in the Vaadin styling documentation:

You can use the variables in place of hard-coded units using var().

.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}