feat(checkbox): complete checkbox refinements

[didimmova]

Closes #14107

Additional information (check all that apply):

• [ ] Bug fix
• [ ] New functionality
• [ ] Documentation
• [ ] Demos
• [ ] CI/CD

Checklist:

• [ ] All relevant tags have been applied to this PR
• [ ] This PR includes unit tests covering all the new code (test guidelines)
• [ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
• [ ] This PR includes feature/README.MD updates for the feature docs
• [ ] This PR includes general feature table updates in the root README.MD
• [ ] This PR includes CHANGELOG.MD updates for newly added functionality
• [ ] This PR contains breaking changes
• [ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
• [ ] This PR includes behavioral changes and the feature specification has been updated with them

[SisIvanova]

Bootstrap Theme:

• Wrong font-style
• Check the empty invalid checkbox on focus both light and dark variant (the border color is wrong)
• The tick mark looks bigger than the UI kit but I will leave this to the design team

[imincheva]

All themes

• Tick isn't properly aligned to the center of the checkbox (both for checked and indeterminate state)

Bootstrap

• Tick SVG needs to be updated, in order to match the most recent changes in the UI kit (it has been updated, in order to match the official Bootstrap component)*
• Tick in all themes (both for checked and indeterminate state) isn't properly aligned to the center of the checkbox
• Invalid unchecked state: when in hover and focused state, the border color isn't linked to the proper variable (--error-color-hover)

*EDIT: Since the new SVG will be implemented later on, the comment here should be considered as irrelevant

[imincheva]

Fluent

• Invalid unchecked: the tick color on hover and focused & hover state should be error.500

[AnjiManova]

Material

The Active state of the unchecked checkbox (ripple) in light and dark should be changed. Let's try with the --empty-color and the current opacity.

Everything else looks good.

[desig9stein]

@didimmova make sure that this is working correctly in all browsers.

@if $variant == 'material' {
    inset-inline-start: -.5px;
}

half-pixel values may have rendering problems in different browsers.