💄(react) adjust checkbox and radio borders and colors

Based on a QA feedback.

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

@@ -19,6 +19,7 @@
   box-sizing: border-box;
   border-style: solid;
   border-color: transparent;
+  border-width: 1px;
   // To automatically align the checkbox to the left side.
   margin-left: -1 * $padding;
   cursor: pointer;

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

@@ -8,6 +8,6 @@ export const tokens = (defaults: DefaultTokens) => ({
   color: defaults.theme.colors["greyscale-900"],
   "border-color": defaults.theme.colors["greyscale-300"],
   "border-radius": "2px",
-  "accent-color": defaults.theme.colors["success-700"],
+  "accent-color": defaults.theme.colors["success-600"],
   size: "1.5rem",
 });

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

@@ -2,6 +2,6 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   "border-color": defaults.theme.colors["greyscale-300"],
-  "accent-color": defaults.theme.colors["success-700"],
+  "accent-color": defaults.theme.colors["success-600"],
   "background-color": "white",
 });

packages/react/src/cunningham-tokens.css

@@ -137,7 +137,7 @@
 	--c--components--forms-select--multi-pill-border-radius: 2px;
 	--c--components--forms-select--multi-pill-max-width: 68%;
 	--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
-	--c--components--forms-radio--accent-color: var(--c--theme--colors--success-700);
+	--c--components--forms-radio--accent-color: var(--c--theme--colors--success-600);
 	--c--components--forms-radio--background-color: white;
 	--c--components--forms-labelledbox--label-color--small: var(--c--theme--colors--greyscale-600);
 	--c--components--forms-labelledbox--label-color--big: var(--c--theme--colors--greyscale-900);
@@ -211,7 +211,7 @@
 	--c--components--forms-checkbox--color: var(--c--theme--colors--greyscale-900);
 	--c--components--forms-checkbox--border-color: var(--c--theme--colors--greyscale-300);
 	--c--components--forms-checkbox--border-radius: 2px;
-	--c--components--forms-checkbox--accent-color: var(--c--theme--colors--success-700);
+	--c--components--forms-checkbox--accent-color: var(--c--theme--colors--success-600);
 	--c--components--forms-checkbox--size: 1.5rem;
 	--c--components--button--border-radius: 8px;
 	--c--components--button--border-radius--active: 2px;