Checkbox - fix misalignments/errors

[thrbnhrtmnn]

Description / User Story

The following differences were found when comparing the Checkbox in Storybook with the Checkbox in Design:

Label:

• Font Color for default and readonly state in light mode is wrong, currently it is hsl220 instead of hsl216 like in design > it is now always #17191c
• Font Color for disabled state is wrong in light and dark mode, currently it is hsl220 instead of hsl212 like in design for light mode and hsl220 instead of hsl219 like in design for dark mode > it is now c7cad1 in light and #5c6370 in dark mode
• Font Color for error state is wrong in light and dark mode, currently it is black (hsl220) instead of red (hsl350) like in design

Control:

• The border of the control is applied outside of the control element in code, but inside the control element in design, making the control bigger in code than in design, and also slightly misaligned with the label
• Hover state for unchecked control is missing in light and dark mode
• Control color is wrong when focusing the control while in the readonly state
• There is no focus ring when focusing the control while in the readonly state > part of Checkbox - component should be able to receive focus when in readonly state #752
• Focus ring already gets applied when pressing, but in design it is not there in pressed state > part of Focus - define when focus gets applied and update components #751 and follow up tasks
• Focus ring is much rounder than in design, especially on the inside (2px in design and 4px in code?) > part of Checkbox - component should be able to receive focus when in readonly state #752
• In dark mode rest state a border is displayed in code that is not there in design, the border is not there in other states (hover, pressed, focus state, readonly, disabled, error)
• In dark mode the focus ring is black and not white like in design (probably part of Focus State - global improvement #330 ?)
• The color of the checkmark is wrong in dark mode readonly and disabled state, in design it is black
• The control is not square anymore, when the label gets so long that it needs to break into another line > part of Checkbox - fix size issues #754

Behaviour:

• Readonly state is not working, input is still possible

---

Acceptance Criteria

• Acceptance criteria 1
• Props Excel has been updated / comments have been resolved and props changed from red to black font color > @thrbnhrtmnn or @angelicahoyss can support here

---

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? > fixed
  • 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 > fixed
  • Should the component not be clickable anymore, when it has an error state? > fixed

[thrbnhrtmnn]

All ACs are already fixed or are part of other tasks