✨(react) add a design token for checkbox hover background

This was based on recent feedbacks to provide more granularity for
customization.

Resolve #59

packages/react/src/components/Forms/Checkbox/index.mdx

@@ -95,6 +95,7 @@ Here are available custom design tokens.
 
 | Token        	| Description                 	|
 |---------------	|-----------------------------	|
+| background-color--hover | Background color of the component on mouse hover or focus |
 | font-size        	| Label font size ( shared with radio )       	|
 | font-weight 	| Label font weight ( shared with radio )	|
 | color   	| Label color ( shared with radio ) 	|

packages/react/src/components/Forms/Checkbox/index.scss

@@ -24,7 +24,7 @@
   cursor: pointer;
 
   &:hover, &:focus-within {
-    background-color: var(--c--theme--colors--greyscale-200);
+    background-color: var(--c--components--forms-checkbox--background-color--hover);
   }
 
   &:focus-within {

packages/react/src/components/Forms/Checkbox/tokens.ts

@@ -1,6 +1,7 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
+  "background-color--hover": defaults.theme.colors["greyscale-200"],
   "font-size": defaults.theme.font.sizes.m,
   "font-weight": defaults.theme.font.weights.medium,
   color: defaults.theme.colors["greyscale-900"],