splitlayout with small theme cause all nested components to be rendered as small in aura theme

[davidef]

Description

splitlayout with small theme cause all nested components to be rendered as small in aura theme

Expected outcome

Nested component rendered with standard size

Minimal reproducible example

add(new TextField("Normal"));
TextField small = new TextField("Small");
small.addThemeVariants(TextFieldVariant.SMALL);
add(small);

TextField nestedSmall = new TextField("Small");
nestedSmall.addThemeVariants(TextFieldVariant.SMALL);

SplitLayout l = new SplitLayout(new TextField("Expected normal"), nestedSmall);
l.setThemeVariants(SplitLayoutVariant.SMALL);
add(l);

We workaround it with

vaadin-split-layout[theme~=small]{ 
  --aura-base-font-size: 12;
  --aura-base-size: 16;
}  

Steps to reproduce

Open the view

Environment

Vaadin version(s): 25.1.1

Browsers

No response

[jouni]

Thanks! This was an oversight on my part.

I wonder if we would need to rename the split-layout variant to something else, now that we introduced the global small variant. I don't really see any other way of avoiding this issue.

Or well, we could exclude vaadin-split-layout from the global small variant selector, but I wonder if that’s better:

[theme~="small"]:not(vaadin-split-layout) {
  --aura-base-size: var(--_base-size-s);
}