Heading styles changed in Vaadin 24

Hello, for some reason all my heading styles (h1 - h6) changed since upgrading to Vaadin 24. I found the following definition in the dev bundle:

    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    margin: 0;
  }```

This is messing up all my forms. Why is this definition in the bundle?

It’s the new default mentioned on the migrations guide

Oh thanks, didn’t see that

But there is still a problem

The suggested code which should revert the styles does not work for me h1,h2,h3,h4,h5,h6 { margin-top: 1.25em; } h1 { margin-bottom: 0.75em; } h2, h3, h4 { margin-bottom: 0.5em; } h5 { margin-bottom: 0.25em; }

In the form layout, margin-left and margin-right are still set to 0

Which leads to a wrong alignment in the form:
image.png

How do you load your css?

i have a main styles.css in the theme folder and include several other stylesheets with @import

I just happen to be looking at https://github.com/vaadin/flow/issues/16231 which could explain the problem

But im not using CssImport anymore since upgrading to Vaadin 24

Then you should look in the browser inspector so see why your css is not applied as you want

Yeah it is because of this definition in the bundle :where(h1, h2, h3, h4, h5, h6) { font-weight: 600; line-height: var(--lumo-line-height-xs); margin: 0; }

The suggested code which should revert the code does not include left and right margins h1,h2,h3,h4,h5,h6 { margin-top: 1.25em; } h1 { margin-bottom: 0.75em; } h2, h3, h4 { margin-bottom: 0.5em; } h5 { margin-bottom: 0.25em; }

Ah, ok, I slightly misread your problem

But there never were left and right margins on the headings, so there is nothing to revert.

Interesting, normally where has less precision and shouldn’t interfere it… could this be related to the ordering - e.g. is the dev bundle loaded after the styles.css? There was such problems in early beta versions but that was fixed to 24.0.0 as far as I know

If you had applied custom left and right margins on them, those should still apply since the new defaults use :where and thus should have lower specificity than your own styles

But there should be margins when using them in a FormLayout

Every component gets left or right margins (or both) depending on the position within the form. But for the headings margin:0 overrides them