Styling of Popovers in Vaadin25

Flow
1

I have a toolbar with inverted colors, with a cogwheel Button that opens a options Popover.
Before Vaadin 25, the popover was a global overlay and was not affected by the toolbar styling.
Now, it inherits the inverted text color from the toolbar, so I get white-on-white.

I tried to fix this with the following css, but it didn’t work.
If I move the vaadin-popover styling out of part(navbar), it does work, but I don’t understand why it doesn’t work inside.

vaadin-app-layout {
    
    &::part(navbar) {
        background-color: var(--system-blue-7);
        --lumo-header-text-color: white;
        --lumo-primary-text-color: white;

        /* (re)set popover colors, to prevent Options popover in navbar to get white text */
        
        vaadin-popover {
            --lumo-header-text-color: var(--lumo-body-text-color);
            --lumo-primary-text-color: var(--lumo-body-text-color);
        }

    }

}
2

::part() is a “terminal” selector: you can’t target any children they may have like that.

3

Also, instead of overriding the --lumo properties like that, which will indeed inherit to any child elements, including Popovers, it might be better to just target the buttons themselves e.g. with --vaadin-button-text-color

4

Try this:

vaadin-app-layout [slot="navbar"] vaadin-popover::part(overlay) {
  --lumo-header-text-color: var(--lumo-body-text-color);
  --lumo-primary-text-color: var(--lumo-body-text-color);
}
5

Using “slot” on vaadin-app-layout does indeed work.

vaadin-app-layout {
    
    [slot="navbar"] {
        background-color: var(--system-blue-7);
        --lumo-header-text-color: white;
        --lumo-primary-text-color: white;

        /* (re)set popover colors, to prevent Options popover in navbar to get white text  */
        
        vaadin-popover {
            --lumo-header-text-color: var(--lumo-body-text-color);
            --lumo-primary-text-color: var(--lumo-body-text-color);
        }

    }

}