Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Styling Your Application Using Lumo Design Tokens

Learn how to use Lumo design tokens to style your application and components.

The basic building blocks of the Lumo theme are a set of design tokens, which are essentially a set of CSS custom properties for things like colors, font sizes, and other typographic and layout settings.

The Lumo theme combines these design tokens to provide Vaadin applications and components with their default look and feel.

You can use Lumo design tokens to customize the style of your application. However, before doing so, you should consider using one of the available built-in Lumo variants, which are themselves built on top of Lumo design tokens. For example, you can use the Lumo dark mode variant to create a dark theme for your application.

You can use Lumo design tokens directly to customize the style of your application in two ways:

  1. By overriding the default values of the design tokens, thereby changing the look and feel of your application.

  2. Using the default design-token values as they are to style your application’s custom views and components.

Styling by Overriding the Default Values of Lumo Design Tokens

For example, suppose that you want to style an application that has a bunch of Text Field, Combo Box, Date Picker, and Button components. By default, they look as follows:

A Vaadin TextField, ComboBox, DatePicker, and Button with default look and feel

Suppose that you want to increase the roundness of their corners. By default, the Lumo theme provides these components with a small rounded corner whose value is defined in the --lumo-border-radius-m variable. To increase the roundness of the corners, you can override the default value of this variable. Specifically, you can add the following inside the styles.css file to increase the default roundness value:

html {
    --lumo-border-radius-m: 1em;
}

This style increases the corner roundness of many components at once, so that they look similar to the following screenshot:

A Vaadin TextField, ComboBox, DatePicker, and Button with extra rounded corners

But what if one wants to override the defaults for only a subset of components? No problem; use the name of the components as the CSS selector.

For example, if one wants to override the rounded corner defaults for only the Text Field and Combo Box components, then the following should be added inside the styles.css file:

vaadin-text-field, vaadin-combo-box {
    --lumo-border-radius-m: 1em;
}

This changes the defaults for the Text Field and Combo Box only, leaving other components, such as the Date Picker and Button, with their default Lumo values.

A Vaadin TextField and ComboBox with increased corner roundness

Styling Using the Default Values of Lumo Design Tokens

Lumo design tokens are also useful when you want to consistently style views and components. For example, you can use the design tokens for spacing as a standard measure for your application. You can, for instance, add a small margin around all views and components in your application by adding the following to a CSS style sheet:

* {
    margin: var(--lumo-space-xs);
}

You can also scope the styles to specific views and components by using specific CSS selectors. For example, you can scope the above styles to Button components only by adding the following to a CSS style sheet:

vaadin-button {
    margin: var(--lumo-space-xs);
}

C22768E4-9DFF-427A-B4FD-26F04C947806