Checkbox - fix control border (size and color), filled color and label color

[thrbnhrtmnn]

Description / User Story

In Figma the border of the checkbox control is 2px, but in Storybook it is only 1px. Also the border seems to be applied within the 16x16 control size in Figma and outside of the 16x16 control size in Storybook and it also seems to be the case, that the border in Figma is also only having a radius on the outside, but not on the inside, where it is a 90° angle, but in Storybook the radius is used inside and outside. Regarding coloring, the hover color seems to be missing in the unchecked Checkbox, and the hsla values for readonly and disabled state are not perfectly aligned in Figma and Storybook.

Furthermore the label in the error state has a red color in Figma but a black color in Storybook and also for the default state the hsla values in Figma and Storybook seem to differ.

---

Acceptance Criteria

• Size and shape of checkbox control is aligned in Figma and Storybook
  • Border of checkbox control is aligned in Figma and Storybook (probably 2px)
  • Size of checkbox control is aligned in Figma and Storybook (probably 16x16 incl. the border)
  • Border radius has the same shape in Storybook and Figma
• Add hover state to unchecked Checkbox
• Color of checkbox control is aligned in Figma and Storybook
  • The border color for the checked and intermediate checkbox is aligned in Figma and Storybook (probably transparent for all states)
  • The color of the readonly state is aligned in Figma and Storybook for border and for filled checkbox (border is different in dark mode than color for filled)
  • The color of the disabled state is aligned in Figma and Storybook for border and for filled checkbox (border is different in light mode than color for filled)
• Label color is aligned in Figma and Storybook for default state
• Label color is aligned in Figma and Storybook for error state
• IconColor in checked and intermediate checkbox for the readonly and disabled state in dark mode is aligned in Figma and Code

---

Background information

• Other things found in the checkbox:
  • There is an area between the control and the label where neither the hover nor pressed state get applied and it is not possible to check/uncheck the component. Is this intended by design?
  • The focus state initially only has a 1px border, which gets corrected to 2px after a short delay, also I assume the color in dark mode will be fixed with Focus State - global improvement #330
  • Should the component not be clickable anymore, when it has an error state?

[thrbnhrtmnn]

duplicate of #599