Custom CSS property conflicts between Base and Lumo themes

[vursen]

Description

Related to https://github.com/vaadin/web-components/issues/9082

The refactored Lumo theme – which is based on CSS files – currently resets all standard CSS properties from the base layer to ensure base styles don't cause unintended side-effects when using Lumo:

https://github.com/vaadin/web-components/blob/bf7fb16bdf216c66388435a8b2ddf0cee89177f5/packages/vaadin-lumo-styles/src/mixins/base-layer-reset.css#L1-L7

However, it appears that only resetting standard CSS properties with revert-layer isn't enough. Both the Base and Lumo themes define custom CSS properties that may conflict. An example is --vaadin-input-field-border-color which is used by both themes but applied at different levels in the cascade.

The Base theme sets it on vaadin-input-container:

https://github.com/vaadin/web-components/blob/bf7fb16bdf216c66388435a8b2ddf0cee89177f5/packages/input-container/src/vaadin-input-container-base-styles.js#L102-L109

While the Lumo theme sets it on the parent field component, though still expecting it to apply to vaadin-input-container:

https://github.com/vaadin/web-components/blob/bf7fb16bdf216c66388435a8b2ddf0cee89177f5/packages/vaadin-lumo-styles/src/mixins/field-base.css#L108-L111

As a result, the Base theme's value takes precedence, since custom property values set directly override inherited values – even when defined in a lower CSS layer.

In this specific case, we could modify Lumo to set the property on the vaadin-input-container as well, but that would only solve the issue for this particular property.

Expected outcome

Custom CSS properties defined in the Base theme should not affect the Lumo theme.

Possible options

• Option 1: Reset all shared custom CSS properties using revert-layer in the same place where standard CSS properties are reverted

  • Cons: All properties have to be listed and maintained manually for each component

• Option 2: Generate the list of shared properties automatically using a script

  • Cons: Introduces an additional step in the development process

• Option 3: Rename custom CSS properties used by the Base theme e.g. by adding a prefix

  • Cons: Property names will differ between Lumo and Aura

[yuriy-fix]

@vursen , should this be moved to in progress?

[vursen]

FYI, we have decided to go ahead with Option 1 for now.

[vursen]

I'll look into a better alternative to reset-layer. Since this keyword is computed, its actual value isn't visible in DevTools, which makes it difficult to inspect style inheritance.