Heading styles changed in Vaadin 24

Flow
1

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?
2

It’s the new default mentioned on the migrations guide

3

Oh thanks, didn’t see that

4

But there is still a problem

5

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; }

6

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

7

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

8

How do you load your css?

9

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

10

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

11

But im not using CssImport anymore since upgrading to Vaadin 24

12

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

13

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; }

14

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; }

15

Ah, ok, I slightly misread your problem

16

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

17

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

18

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

19

But there should be margins when using them in a FormLayout

20

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