Material
Material is a theme inspired by the Material Design guidelines.
The core Material package defines the basic building blocks for component themes as CSS custom properties, also known as design tokens, such as colors, typography and other visual styles.
Getting Started
The Material theme comes bundled with Vaadin, including all individual components. If you need, you can also install the core Material package separately from npm.
npm i @vaadin/vaadin-material-stylesImport and Include Style Sheets
The global style sheets, which define the global custom properties (a.k.a. design tokens) and define basic color and typography rules, are automatically included in your Vaadin application when you are using Material as your theme.
You can import and include these style sheets manually if needed, for example if you are building a client-side only application.
In server-side views (Java), use the @Theme annotation, as described in Using Themes.
@Route(value = "")
@Theme(value = Material.class)
public class MaterialApplication extends Div {
}Customization
The Material theme can be customized to fit your visual style requirements by adjusting the CSS Custom Properties it exposes as its public API.
The custom properties are documented in the following sections:
0C45DB7B-2B5A-48BC-AB65-A0802F0A28F9