Lumo styles in custom component: howto

Flow
1

On my main view I use

@Theme(value = Lumo.class, variant = Lumo.LIGHT)

I created a component as in the documentation https://vaadin.com/docs/v14/flow/creating-components/tutorial-component-many-elements.html
Then when I start my app the style of the two html components label and input is different from the Lumo design.
Could you please complement the tutorial with information how to add the Lumo style to custom components and if it is possible?

I found that something like this is possible:

	private void style() {
		// Note: The same as addThemeVariants
		label.getElement().setAttribute("theme", "icon");
		input.getElement().setAttribute("theme", "icon");
	}

But I am unsure what the value of “theme” might be and where to find the information.

Thanks.

2

Yes, there is no good documentation about this yet. Not atleast with this angle. The best source of information is currently this site:

https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/colors.html#error

I studied the matter while ago when I did a custom component for generic use. This example is purely a serverside composition, but it really does not matter whether you use html tempalte or server side composition.

If you want the component to be following Lumo conventions, it of course should use styles and especially Lumo defined custom properties in similar fashion as our stock component use. I did my approach in “cargo cult” way, i.e. just inspected how some selected stock components (in this case fields) were styled and I used the same styles in mine when applicable, e.g. error styles example here

https://github.com/TatuLund/TwinColSelect/blob/master/src/main/java/org/vaadin/tatu/TwinColSelect.java#L309

Idea here is that if someone now customizess the application theme so that he changes the error colors, my component adapts to that change in the same way as the other components would (at least mostly).