Checkbox - fix focus ring sizes and remove gap to the left

[thrbnhrtmnn]

Description / User story

When comparing design and code of the Checkbox a few misalignments can be seen:

• In Code the checkbox seems to have a gap left to the control, which is not there in design. The gap to the left should be removed
• The focus ring in design and code seem to have different values, but they look the same. In sizeVariant=MD the container is 24x24px in design but 16x16px in code. Also the border-radius of the focus ring seems to not be defined by a token in design, but just is 5px, whereas in code we apparently use the token for the checkbox control to calculate the border radius of the focus ring. I am afraid this approach would not work anymore when the control should not have a radius but the focus ring should have one.

Requirements / Prerequisites

• none

Acceptance Criteria

• The checkbox does not have a gap left of the control on code
• The focus ring in design is fully tokenized
• The focus ring in code uses all tokens that are defined in design to look the same as in design

Additional information

• ...

Code of Conduct

• I agree to follow this project's Code of Conduct

[thrbnhrtmnn]

As decided today, the tokenizing of the focus layer in the checkbox component should be done separately and at a later point. This requires some design research.