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.

Typography

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

PropertyValuesExample

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);

Colors

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

ColorValues

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

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

Styles

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

ColorValuesExample

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);

Sizing and Spacing

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

PropertySizeDirection

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

  1. // Using class names
  2. component.addClassNames(
  3.   LumoStyles.Margin.Left.S,
  4.   LumoStyles.Padding.Vertical.XL,
  5.   LumoStyles.Spacing.Bottom.M
  6. );
  8. // FlexBoxLayout API
  9. flexBoxLayout.setMargin(Left.S);
  10. flexBoxLayout.setPadding(Vertical.XL);
  11. flexBoxLayout.setSpacing(Bottom.S);

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.

Buttons

The methods below accept String and/or VaadinIcon.

VariantUIUtils 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

  1. // Primary button (text only)
  2. UIUtils.createPrimaryButton("Primary");
  4. // Success button (icon only)
  5. UIUtils.createSuccessButton(VaadinIcon.CHECK);
  7. // Error button (text and icon)
  8. UIUtils.createErrorButton("Error", VaadinIcon.WARNING);
  10. // Small tertiary button (text and icon)
  11. UIUtils.createButton(
  12.   "Small tertiary",
  13.   VaadinIcon.HOME,
  14.   ButtonVariant.LUMO_SMALL,
  15.   ButtonVariant.LUMO_TERTIARY
  16. );

Labels

TypeUIUtils 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)

Icons

VariantUIUtils 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).

Numbers

UIUtils methodDescription

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.

Dates

UIUtils methodDescription

formatDate(LocalDate)

Formats a LocalDate according to the format defined in UIUtils.

Misc

UIUtils methodDescription

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.

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.