refactor!: Base checkbox styles

[anezthes]

New Checkbox base style

Supported custom properties

Property	Description
--vaadin-checkbox-background	Background color of the checkbox.
--vaadin-checkbox-border-color	Border color of the checkbox.
--vaadin-checkbox-border-radius	Border radius of the checkbox.
--vaadin-checkbox-border-width	Border width of the checkbox.
--vaadin-checkbox-color	Color used for the checkmark or indeterminate icon.
--vaadin-checkbox-gap	Gap between the checkbox and the label.
--vaadin-checkbox-label-color	Text color of the checkbox label.
--vaadin-checkbox-label-font-size	Font size of the checkbox label.
--vaadin-checkbox-label-font-weight	Font weight of the checkbox label.
--vaadin-checkbox-label-line-height	Line height of the checkbox label.
--vaadin-checkbox-label-padding	Padding around the checkbox label.
--vaadin-checkbox-size	Size (width and height) of the checkbox.

General concerns

1. Some of the properties listed at Checkbox Properties are not used:

• --vaadin-checkbox-background-hover
• --vaadin-checkbox-disabled-background
• --vaadin-checkbox-checkmark-char
• --vaadin-checkbox-checkmark-char-indeterminate
• --vaadin-checkbox-checkmark-color
• --vaadin-checkbox-disabled-checkmark-color
• --vaadin-checkbox-checkmark-size

2. To use or not to use field-shared-styles.js?

Pros: Provides styling for the required-indicator, helper-text, and error-message parts.
Cons: If we need --vaadin-checkbox-label-* properties, we’ll have to override the label part styles from field-shared-styles.js.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud