Component Styling

Flow
1

image
why do all Vaadin elements have opacity != 1? how can this be fixed for all elements (I want to place elements on the background image, but they look very unpresentable) it is very difficult to search for 100 styles selectors for each component and change them for each, is there any small setting to change this behavior?

2

Pseudo code:

var wrapper = new Div();
wrapper.add(your components); 
wrapper.addClassname("your class name with a background property");
3

this will not help, you can check it yourself, all vaadin components are set to transparency by default

4

That’s why I said add them to a component with proper styling.

5

image
image625×815 96.1 KB

image
image
and result:
image
and for it to work correctly I have to apply 100 style selectors in the CSS file for everything to look normal, I showed that your method does not work

6

You are missing a background property.

7

image
image728×403 61.3 KB

image

8

I’m telling you, vaadin components have transparency as a standard, which is difficult to remove

9

please don’t answer if you haven’t encountered this, thanks

10

The transparency effect originates from the shade color variables having transparency. You can try changing the values to non-transparent to make the elements visible against background images.

These values will will fix your form, but might introduce styling issues in parts where transparency is expected (i.e. shadows)

html {
    --lumo-shade-5pct: hsl(0 0% 95%);
    --lumo-shade-10pct: hsl(214, 0%, 90%);
    --lumo-shade-20pct: hsl(214, 0%, 80%);
    --lumo-shade-30pct: hsl(214, 0%, 70%);
    --lumo-shade-40pct: hsl(214, 0%, 60%);
    --lumo-shade-50pct: hsl(214, 0%, 50%);
    --lumo-shade-60pct: hsl(214, 0%, 40%);
    --lumo-shade-70pct: hsl(214, 0%, 30%);
    --lumo-shade-80pct: hsl(214, 0%, 20%);
    --lumo-shade-90pct: hsl(214, 0%, 10%);
    --lumo-shade: hsl(214, 0%, 0%);
}
1 Like
11

It can be made safer by scoping these styles to only some parts of the UI.

.has-background-image {
    --lumo-shade-5pct: hsl(0 0% 95%);
   [...]
}
12

image
image312×521 24 KB

I solved the problem a long time ago in approximately this way: I went to figma → vaadin and copied all the colors (it turned out to be exactly the same color only without transparency)

13

thanks, but for my small application it is possible in an html tag