> Markdown version of [Overview](https://vaadin.com/docs/v14/flow/starters/business-app/theming). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Theming

Lumo uses CSS custom properties to define typography, colors, sizing, spacing etc. Most visual styles can be achieved by tweaking these properties. For the more intricate theming use [ThemableMixin](https://github.com/vaadin/vaadin-themable-mixin/wiki).

## <a id="typography"></a>Typography

<https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/typography.html>

| Property     | Values                                                                                                                                         | Example                                                                                  |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| `FontFamily` | `MONOSPACE`                                                                                                                                    | `component.addClassName(LumoStyles.FontFamily.MONOSPACE);`                               |
| `FontSize`   | `XXS`, `XS`, `S`, `M` (default), `L`, `XL`, `XXL`, `XXXL`                                                                                      | `UIUtils.setFontSize(FontSize.XL, component);`                                           |
| `FontWeight` | `BOLD`, `BOLDER`, `LIGHTER`, `NORMAL`, `_100`, `_200`, `_300`, `_400`, `_500`, `_600`, `_700`, `_800`, `_900`                                  | `UIUtils.setFontWeight(FontWeight.BOLD, component);`                                     |
| `Headings`   | `H1`, `H2`, `H3`, `H4`, `H5`, `H6`                                                                                                             | `component.addClassName(LumoStyles.Heading.H1);`                                         |
| `IconSize`   | `S`, `M`, `L`                                                                                                                                  | `UIUtils.createSmallIcon(VaadinIcon.HOME);`, `UIUtils.createLargeIcon(VaadinIcon.HOME);` |
| `TextColor`  | `HEADER`, `BODY`, `SECONDARY`, `TERTIARY`, `DISABLED`, `PRIMARY`, `PRIMARY_CONTRAST`, `ERROR`, `ERROR_CONTRAST`, `SUCCESS`, `SUCCESS_CONTRAST` | `UIUtils.setTextColor(TextColor.SUCCESS, component);`                                    |

## <a id="colors"></a>Colors

<https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/colors.html>

| Color      | Values                                                                      |
| ---------- | --------------------------------------------------------------------------- |
| `Base`     | `BASE_COLOR`                                                                |
| `Primary`  | `_10`, `_50`, `_100`                                                        |
| `Error`    | `_10`, `_50`, `_100`                                                        |
| `Success`  | `_10`, `_50`, `_100`                                                        |
| `Tint`     | `_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100` |
| `Shade`    | `_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100` |
| `Contrast` | `_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100` |

```java
UIUtils.setBackgroundColor(LumoStyles.Color.Contrast._20, component);
```

## <a id="styles"></a>Styles

<https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/styles.html>

| Color              | Values                           | Example                                               |
| ------------------ | -------------------------------- | ----------------------------------------------------- |
| `BorderRadius`     | `S`, `M`, `L`, `_50`             | `UIUtils.setBorderRadius(BorderRadius.L, component);` |
| `BoxShadowBorders` | `BOTTOM`, `LEFT`, `RIGHT`, `TOP` | `component.addClassName(BoxShadowBorders.BOTTOM);`    |
| `Shadow`           | `S`, `M`, `L`, `XL`              | `UIUtils.setShadow(Shadow.L, component);`             |

## <a id="sizing-and-spacing"></a>Sizing and Spacing

<https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/sizing-and-spacing.html>

| Property  | Size                                | Direction                                                                                       |
| --------- | ----------------------------------- | ----------------------------------------------------------------------------------------------- |
| `Margin`  | `XS`, `S`, `M` (default), `L`, `XL` | `BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE` |
| `Padding` | `XS`, `S`, `M` (default), `L`, `XL` | `BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE` |
| `Spacing` | `XS`, `S`, `M` (default), `L`, `XL` | `BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE` |

```java
// Using class names
component.addClassNames(
  LumoStyles.Margin.Left.S,
  LumoStyles.Padding.Vertical.XL,
  LumoStyles.Spacing.Bottom.M
);

// FlexBoxLayout API
flexBoxLayout.setMargin(Left.S);
flexBoxLayout.setPadding(Vertical.XL);
flexBoxLayout.setSpacing(Bottom.S);
```

## <a id="utility-classes"></a>Utility Classes

A number of utility classes, most importantly `UIUtils`, were introduced to make theming more consistent and efficient. `UIUtils` can be used to create common button variants, labels and icons of different colors and sizes etc.

### <a id="buttons"></a>Buttons

The methods below accept `String` and/or `VaadinIcon`.

| Variant  | UIUtils method                                        |
| -------- | ----------------------------------------------------- |
| Primary  | `createPrimaryButton`                                 |
| Tertiary | `createTertiaryButton`, `createTertiaryInlineButton`  |
| Success  | `createSuccessButton`, `createSuccessPrimaryButton`   |
| Error    | `createErrorButton`, `createErrorPrimaryButton`       |
| Contrast | `createContrastButton`, `createContrastPrimaryButton` |
| Size     | `createSmallButton`, `createLargeButton`              |

Combinations can be created with `createButton(String, ButtonVariant…​)`, `createButton(VaadinIcon, ButtonVariant…​)` and `createButton(String, VaadinIcon, ButtonVariant…​)`.

```java
// Primary button (text only)
UIUtils.createPrimaryButton("Primary");

// Success button (icon only)
UIUtils.createSuccessButton(VaadinIcon.CHECK);

// Error button (text and icon)
UIUtils.createErrorButton("Error", VaadinIcon.WARNING);

// Small tertiary button (text and icon)
UIUtils.createButton(
  "Small tertiary",
  VaadinIcon.HOME,
  ButtonVariant.LUMO_SMALL,
  ButtonVariant.LUMO_TERTIARY
);
```

### <a id="labels"></a>Labels

| Type         | UIUtils method                                                                                                                                       |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color        | `createLabel(TextColor, String)`                                                                                                                     |
| Size         | `createLabel(FontSize, String)`                                                                                                                      |
| Size & color | `createLabel(FontSize, TextColor, String)`                                                                                                           |
| Heading      | `createH1Label(String)`, `createH2Label(String)`, `createH3Label(String)`, `createH4Label(String)`, `createH5Label(String)`, `createH6Label(String)` |

### <a id="icons"></a>Icons

| Variant   | UIUtils method                    |
| --------- | --------------------------------- |
| Primary   | `createPrimaryIcon(VaadinIcon)`   |
| Secondary | `createSecondaryIcon(VaadinIcon)` |
| Tertiary  | `createTertiaryIcon(VaadinIcon)`  |
| Disabled  | `createDisabledIcon(VaadinIcon)`  |
| Success   | `createSuccessIcon(VaadinIcon)`   |
| Error     | `createErrorIcon(VaadinIcon)`     |
| Small     | `createSmallIcon(VaadinIcon)`     |
| Large     | `createLargeIcon(VaadinIcon)`     |

Combinations can be created with `createIcon(IconSize, TextColor, VaadinIcon)`.

### <a id="numbers"></a>Numbers

| UIUtils method              | Description                                                                  |
| --------------------------- | ---------------------------------------------------------------------------- |
| `formatAmount(Double)`      | Formats a decimal amount for improved legibility.                            |
| `createAmountLabel(Double)` | Initialises a monospaced H5 label for improved legibility of decimal values. |
| `formatUnits(Integer)`      | Formats an integer amount for improved legibility.                           |
| `createUnitsLabel(Integer)` | Initialises a monospaced H5 label for improved legibility of integer values. |

### <a id="dates"></a>Dates

| UIUtils method          | Description                                                         |
| ----------------------- | ------------------------------------------------------------------- |
| `formatDate(LocalDate)` | Formats a `LocalDate` according to the format defined in `UIUtils`. |

### <a id="misc"></a>Misc

| UIUtils method                           | Description                                                                                              |
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `setColSpan(Integer, Components…​)`      | Sets the column span for components in a `FormLayout`.                                                   |
| `createFloatingActionButton(VaadinIcon)` | Initialises a `Button` positioned in the bottom right corner of its container. Used for primary actions. |
| `createInitials(String)`                 | Creates an avatar with the given initials.                                                               |

### <a id="customise-the-utility-classes"></a>Customise the Utility Classes

It is advised to create and modify the utility classes according to your needs. Creating custom components and utility methods for reoccurring UI patterns will make the code more consistent and easier to maintain.

`09B466AD-BD2E-4B22-84B5-63FBA283A177`