feat: add checkbox

[chosww]

To test, add a checkbox with the checkbox input on a template:

<input type="checkbox" id="id" name="name">

[greatislander]

A couple comments on the approach. Also there are significant visual differences; default state, hover state and focus state don't match border weight in the design, active design background colour does not match the design, check mark position and shape doesn't match the design.

[chosww]

A couple comments on the approach. Also there are significant visual differences; default state, hover state and focus state don't match border weight in the design, active design background colour does not match the design, check mark position and shape doesn't match the design.

Thanks for your review @greatislander. I asked Uttara earlier today about the active design background colour and checkmark colour and Uttara told me that they should be indigo-700. In regards to the check mark position and shape, I don't have control over how it is shown as it is rendered by css content property -- I tried to use the given SVG file for the checkmark using background-image properly, but then the position of the background-image isn't working exactly the way we want in Figma. I think making custom component would fix all the issues, so should I go ahead and create a custom component?

[greatislander]

A couple comments on the approach. Also there are significant visual differences; default state, hover state and focus state don't match border weight in the design, active design background colour does not match the design, check mark position and shape doesn't match the design.

Thanks for your review @greatislander. I asked Uttara earlier today about the active design background colour and checkmark colour and Uttara told me that they should be indigo-700. In regards to the check mark position and shape, I don't have control over how it is shown as it is rendered by css content property -- I tried to use the given SVG file for the checkmark using background-image properly, but then the position of the background-image isn't working exactly the way we want in Figma. I think making custom component would fix all the issues, so should I go ahead and create a custom component?

The best way to do this is to use the mask-image property with an SVG URL. Let's pair up to look at this when you have some time.

[greatislander]

@chosww In case I am not available to talk through this with you tomorrow, here is the example I put together: https://codepen.io/greatislander/pen/dPbwzjw

[cloudflare-workers-and-pages]

Deploying inclusive-standards with    Cloudflare Pages

Latest commit:	92bc8c9
Status:	✅  Deploy successful!
Preview URL:	https://df98e099.inclusive-standards.pages.dev
Branch Preview URL:	https://feat-checkbox.inclusive-standards.pages.dev

View logs

[greatislander]

• Update colours so that the checkboxes appear properly on indigo-200 backgrounds (waiting on @uttaraghodke to update the Figma design)
• Use inset box-shadow instead of outline for more consistent dimensions in inactive and hover states
• Set transparent outline for focus state to preserve Windows High Contrast Mode behaviour
• Style parent nodes of checkbox inputs to use flex display with align-items center and an appropriate gap