Adjust the checkbox design for the categories sidebar to the Drupal Design system

Created on 27 July 2022, over 2 years ago

Updated 13 October 2023, about 1 year ago

Problem/Motivation

Currently the design of the checkboxes components differs between the one used in Project Browser and the one outlined in the Drupal Design system.

Explanation to the first screenshot. the first checkbox is unchecked in both windows the second is set to :hover in the devtools, the third is checked and the fourth checked and set to :hover. the four available states. In project browser the hover states are missing. then the checkboxes are too small and the markup differs as well. semantically the variant used for claro seems more clear by having an input element (checkbox) with a corresponding label. in the current project browser iteration the input element is wrapped in its label. and in claro the checkmark is created by a svg, how it is done in project browser i am not sure but haven't digged.

Drupal Design system:

Proposed resolution

- unchecked checkboxes should have a width and height of 1.125rem (18px) with a border radius of 2px
- the border of unchecked checkboxes is 1px solid #919297 the color on hover is #232429
- with a boxshadow of 0 0 0 4px transparent while on hover inset 0 0 0 1px #232429

- checked checkboxes should have a width and height of 1.125rem (18px) as well with a border radius of 2px
- the icons should have a width and height of 0.75rem (12px) - the svg icon has 1rem
- the border and background color is #003ecc on hover it becomes #232429

- labels should have a fontsize of 0.889em

not sure if i was able to distill everything necessary to provide actionable items. still not sure how to get exact specs out of the figma files. if an account is necessary or how to deal with things.