[Checkbox] Component specs

[aweell]

Checkbox documentation has been updated in 3.8.0

• The :hover color change on the input should be triggered by placing the mouse on the label also
• Fix check-mark (16px), input (18px) and focus border (24px) sizing
• Update component spacing

Component token	Element	Core token	Value
inputMargin	Checkbox input	spacing-03	0.5rem / 8px

• Change label size

Component token	Element	Core token	Value
fontSize	Label	font-scale-02	0.875rem / 14px

• Update color specs

On-light

Component token	Element	Core token	Value
selectedBackgroundColor	Fill	color-blue-800	#0067b3
selectedHoverBackgroundColor	Fill:hover	color-blue-900	#003c66
selectedDisabledBackgroundColor	Fill:disabled	color-grey-500	#999999
borderColor	Border	color-blue-800	#0067b3
hoverBorderColor	Border:hover	color-blue-900	#003c66
disabledBorderColor	Border:disabled	color-grey-500	#999999
checkColor	Check mark	color-white	#ffffff
disabledCheckColor	Check mark:disabled	color-white	#ffffff
fontColor	Label	color-black	#000000
disabledFontColor	Label:disabled	color-grey-500	#999999
focusColor	Outline:focus	color-blue-700	#0095ff

On-dark

Component token	Element	Core token	Value
selectedBackgroundColorOnDark	Fill	color-grey-200	#e6e6e6
selectedHoverBackgroundColorOnDark	Fill:hover	color-white	#ffffff
selectedDisabledBackgroundColorOnDark	Fill:disabled	color-grey-800	#4d4d4d
borderColorOnDark	Border	color-grey-200	#e6e6e6
hoverBorderColorOnDark	Border:hover	color-white	#ffffff
disabledBorderColorOnDark	Border:disabled	color-grey-800	#4d4d4d
checkColorOnDark	Check mark	color-black	#000000
disabledCheckOnDark	Check mark:disabled	color-grey-500	#999999
fontColorOnDark	Label	color-white	#ffffff
disabledFontColorOnDark	Label:disabled	color-grey-500	#999999
focusColorOnDark	Outline:focus	color-blue-600	#0095ff