Css vars as java constants

Hi,

Are the css variables like var(--lumo-space-s) available as a java constant somewhere ? I am often referring to these in getStyle().set(.....) , it would be nice to have these available in . I would have thought LumoUtility would contain them, but they are not.

There are not available because getStyle is more like a last resort. Styles should be applied (preferable) with class names and your theme’s styles.css.

The utility classes, however, are available as constants: https://vaadin.com/docs/latest/styling/lumo/utility-classes

(in most cases you might be able to apply one of those instead)

I agree about the preference to have css class names, but sometimes it makes the codebase easier to understand if i apply a few styling tweaks to the component directly in the java class.

For example, i am applying spacer divs here and there in forms when the general layout of the form appears too compact (in certain areas only, not the whole form):

    final Div spacerDiv = new Div();
    spacerDiv.setHeight("var(--lumo-space-s)");
    formLayout.add(spacerDiv, 2);

Sometimes I am using space-s , sometimes space-m etc . In this case having a css class for each space makes the code more difficult to understand and navigate - IMO.

I personally would create a class called “Spacer extends Div” with a method “withSizeS/M” for consistently if I’m using it in multiple places to ease maintenance

Sure, that’s totally valid. But still having then a separate css class with just the var(--... for each case feels a bit bloated. But maybe i’ll change my opinion on this later. Right now i find that having to navigate to styles.css disrupts my code flow :slightly_smiling_face:

In my case, are these equivalent then?

    div.setHeight(LumoUtility.Height.SMALL);
    div.setHeight("var(--lumo-space-s)");

should be --lumo-size-s

space and size are separate in Lumo

The doc says that size is for component sizing, whereas space is for inter-component spacing. I figured the latter applies more to what i’m doing.

if you want to use a div as a spacer, sure. But do consider using margins or paddings instead. There are dedicated utility classes for those: https://vaadin.com/docs/latest/styling/lumo/utility-classes#spacing

(or if you want constant spacing between items in a HL/VL, there’s of course setSpacing(true) and the gap utility classes https://vaadin.com/docs/latest/styling/lumo/utility-classes#gap)

Yes, if i wanted the spacing everywhere between all elements in a layout i would use those. But here it’s only needed in certain area’s. I tried to play around with specific margins and paddings for components on the the previous row but it did not work. The spacer approach was the simplest.
image.png

(above screenshot showing why the spacer is needed)

Div as a spacer is very bad approach. This will solve the problem on your browser, but will make hell in others. Meaning it will be different in different browsers . From what is looks from here is that you need 2 FlexLayout, one for checkbox and second for bar.
And important is check your entire layout, you probably played to much with margins and position relative & absolute.

Looking at the places where it’s needed, it’s almost only where a row in the formlayout contains ToggleButton components. This component does not behave at all like the standard Vaadin form components. I guess it’s because it’s a third-party add-on. I don’t see many alternatives, except for using standard checkboxes, but these appear a bit lost and small in the form, that’s why I chose the ToggleButtons instead. I may reconsider this given the amount of tweaking that’s needed to make them appear nice.

Try to wrap each toggle button with div , then you will have a more control on styling .