✨(react) introduce large and extra-large new modal sizes

We realized it was missing an in between medium and large existing
modal sizes. The old large now become extra-large.

Closes #313

.changeset/bright-lizards-hang.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+introduce large and extra-large new modal sizes

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

@@ -139,6 +139,22 @@
   &--large {
     width: var(--c--components--modal--width-large);
 
+    @include media(lg) {
+      width: calc(100vw - 4rem);
+    }
+
+    @include media(md) {
+      width: calc(100vw - 2rem);
+    }
+
+    .c__modal__title-icon {
+        --icon-size: 4rem;
+    }
+  }
+
+  &--extra-large {
+    width: var(--c--components--modal--width-extra-large);
+
     @include media(md) {
       width: calc(100vw - 1rem);
     }

packages/react/src/components/Modal/index.stories.tsx

@@ -56,6 +56,11 @@ export const Large: Story = {
     size: ModalSize.LARGE,
   },
 };
+export const ExtraLarge: Story = {
+  args: {
+    size: ModalSize.EXTRA_LARGE,
+  },
+};
 export const Full: Story = {
   args: {
     size: ModalSize.FULL,

packages/react/src/components/Modal/index.tsx

@@ -9,6 +9,7 @@ export enum ModalSize {
   SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",
+  EXTRA_LARGE = "extra-large",
   FULL = "full",
 }
 

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

@@ -15,6 +15,7 @@ export const tokens = (defaults: DefaultTokens) => {
     "content-color": defaults.theme.colors["greyscale-800"],
     "width-small": "300px",
     "width-medium": "600px",
-    "width-large": "75%",
+    "width-large": "800px",
+    "width-extra-large": "75%",
   };
 };

packages/react/src/cunningham-tokens.css

@@ -137,7 +137,8 @@
 	--c--components--modal--content-color: var(--c--theme--colors--greyscale-800);
 	--c--components--modal--width-small: 300px;
 	--c--components--modal--width-medium: 600px;
-	--c--components--modal--width-large: 75%;
+	--c--components--modal--width-large: 800px;
+	--c--components--modal--width-extra-large: 75%;
 	--c--components--forms-textarea--font-weight: var(--c--theme--font--weights--regular);
 	--c--components--forms-textarea--font-size: var(--c--theme--font--sizes--l);
 	--c--components--forms-textarea--border-radius: 8px;

packages/react/src/cunningham-tokens.scss

@@ -164,7 +164,8 @@ $themes: (
         'content-color': #303C4B,
         'width-small': 300px,
         'width-medium': 600px,
-        'width-large': 75%
+        'width-large': 800px,
+        'width-extra-large': 75%
       ),
       'forms-textarea': (
         'font-weight': 400,