Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

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

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

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

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

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

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

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

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.

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…​).

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

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)

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

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.

Dates

UIUtils method Description

formatDate(LocalDate)

Formats a LocalDate according to the format defined in UIUtils.

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.

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