[checkbox] Base style props do not work in Aura

[sissbruecker]

Description

The --vaadin-checkbox-background base style prop doesn't seem to have any effect in Aura, the background is always white. Same for --vaadin-radio-button-background in radio button.

Expected outcome

The props should do something. Either override the background in all states, or at least in the unchecked state.

Minimal reproducible example

Add this to the dev pages:

vaadin-checkbox {
  --vaadin-checkbox-background: gray;
}

vaadin-radio-button {
  --vaadin-radio-button-background: gray;
}

Steps to reproduce

See above

Environment

Vaadin version(s): 25

Browsers

No response

[jouni]

These lines override those properties, so they can't be used on the global level:

web-components/packages/aura/src/components/checkbox-radio.css

Lines 10 to 11 in 1817ba2

	--vaadin-checkbox-background: var(--aura-surface-color);
	--vaadin-radio-button-background: var(--aura-surface-color);

Either we change how those native properties are set in Aura, or we state that those can't be used at the global level to override the colors.

For the former, here’s how we could change them:

vaadin-checkbox::part(checkbox) {
  background: var(--vaadin-checkbox-background, var(--aura-surface-color));
  transition: background-color 100ms;
}

vaadin-radio-button::part(radio) {
  background: var(--vaadin-radio-button-background, var(--aura-surface-color));
  transition: background-color 100ms;
}