Themes & Styling

@Target(ElementType.TYPE)
@interface Theme {
    String value() default "";
    String variant() default "";
}

class Lumo {
    static final String DARK = "dark";
    static final String LIGHT = "light";
}

@Theme(value = Lumo.class)
@PWA(name = "My App")
public class AppShell implements AppShellConfigurator {
}

// Dark theme
@Theme(value = Lumo.class, variant = Lumo.DARK)
public class AppShell implements AppShellConfigurator {
}

enum ButtonVariant implements ThemeVariant {
    LUMO_PRIMARY, LUMO_SECONDARY, LUMO_TERTIARY,
    LUMO_SUCCESS, LUMO_ERROR, LUMO_CONTRAST,
    LUMO_SMALL, LUMO_LARGE, LUMO_ICON
}

enum GridVariant implements ThemeVariant {
    LUMO_NO_BORDER, LUMO_NO_ROW_BORDERS,
    LUMO_ROW_STRIPES, LUMO_COMPACT, LUMO_WRAP_CELL_CONTENT
}

interface HasTheme {
    void addThemeVariants(ThemeVariant... variants);
    void removeThemeVariants(ThemeVariant... variants);
}

Button primary = new Button("Primary");
primary.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_LARGE);

Button danger = new Button("Delete");
danger.addThemeVariants(ButtonVariant.LUMO_ERROR, ButtonVariant.LUMO_PRIMARY);

Grid<Person> grid = new Grid<>();
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES, GridVariant.LUMO_COMPACT);

interface HasStyle {
    void addClassName(String className);
    void addClassNames(String... classNames);
    void removeClassName(String className);
    void setClassName(String className);
    void setClassName(String className, boolean set);
    Style getStyle();
    boolean hasClassName(String className);
}

interface Style {
    Style set(String name, String value);
    Style remove(String name);
    String get(String name);
}

@Target(ElementType.TYPE)
@interface CssImport {
    String value();
    String themeFor() default "";
    String include() default "";
}

// CSS classes
Div container = new Div();
container.addClassName("my-container");
container.addClassNames("highlighted", "active");

// Inline styles
Div box = new Div();
box.getStyle()
    .set("background-color", "#f0f0f0")
    .set("padding", "20px")
    .set("border-radius", "8px");

// Conditional styling
button.setClassName("active", isActive);

// Custom CSS import
@Route("styled")
@CssImport("./styles/custom.css")
public class StyledView extends VerticalLayout {
}

// Scoped CSS
@CssImport(value = "./styles/grid.css", themeFor = "vaadin-grid")
public class GridView extends VerticalLayout {
}

class LumoUtility {
    interface Spacing {
        String PADDING_SMALL = "padding-s";
        String PADDING = "padding";
        String PADDING_LARGE = "padding-l";
        String MARGIN_SMALL = "margin-s";
        String MARGIN = "margin";
        String MARGIN_LARGE = "margin-l";
    }

    interface Typography {
        String TEXT_SMALL = "text-s";
        String TEXT_MEDIUM = "text-m";
        String TEXT_LARGE = "text-l";
        String FONT_WEIGHT_BOLD = "font-weight-bold";
    }

    interface TextColor {
        String PRIMARY = "text-primary";
        String SECONDARY = "text-secondary";
        String SUCCESS = "text-success";
        String ERROR = "text-error";
    }

    interface Background {
        String BASE = "bg-base";
        String CONTRAST = "bg-contrast";
        String PRIMARY = "bg-primary";
        String SUCCESS = "bg-success";
        String ERROR = "bg-error";
    }
}

VerticalLayout layout = new VerticalLayout();
layout.addClassName(LumoUtility.Spacing.PADDING_LARGE);

H1 title = new H1("Welcome");
title.addClassName(LumoUtility.TextColor.PRIMARY);
title.addClassName(LumoUtility.Typography.FONT_WEIGHT_BOLD);

UI.getCurrent().getElement().executeJs(
    "document.documentElement.setAttribute('theme', $0)",
    darkMode ? Lumo.DARK : Lumo.LIGHT
);