💄(react) fix Button style

QA-based updates to the Button components. It includes global UI updates
to make the Button to match the sketches.

.changeset/four-badgers-wash.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix button style

packages/react/src/components/Button/index.scss

@@ -16,7 +16,8 @@
 
   &:focus-visible {
     border-color: #FFF;
-    box-shadow: 0 0 0 4px var(--c--theme--colors--primary-400);
+    border-radius: var(--c--components--button--border-radius--focus);
+    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
     outline: none;
   }
 
@@ -26,7 +27,7 @@
 
   &:disabled {
     background-color: var(--c--theme--colors--greyscale-200);
-    color: var(--c--theme--colors--greyscale-400);
+    color: var(--c--theme--colors--greyscale-600);
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -74,7 +75,7 @@
   }
 
   &--primary {
-    background-color: var(--c--theme--colors--primary-500);
+    background-color: var(--c--theme--colors--primary-400);
     color: var(--c--theme--colors--primary-text);
 
     &:hover, &:focus-visible {

packages/react/src/components/Button/tokens.ts

@@ -4,6 +4,7 @@ export const tokens = (defaults: DefaultTokens) => {
   return {
     "border-radius": "8px",
     "border-radius--active": "2px",
+    "border-radius--focus": "8px",
     "medium-height": "48px",
     "small-height": "32px",
     "medium-font-size": defaults.theme.font.sizes.l,

packages/react/src/cunningham-tokens.css

@@ -197,6 +197,7 @@
 	--c--components--forms-checkbox--size: 1.5rem;
 	--c--components--button--border-radius: 8px;
 	--c--components--button--border-radius--active: 2px;
+	--c--components--button--border-radius--focus: 8px;
 	--c--components--button--medium-height: 48px;
 	--c--components--button--small-height: 32px;
 	--c--components--button--medium-font-size: var(--c--theme--font--sizes--l);