💄(react) make modal backdrop color customisable

As we cannot user CSS vars into backdrop pseudo element, we decide to
create a dom element to simulate the modal backdrop.

Resolve #257

.changeset/stupid-bees-end.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+Make modal backdrop customisable

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

@@ -253,6 +253,7 @@ Here a the custom design tokens defined by the Toast.
 | Token        	| Description                 	|
 |---------------	|-----------------------------	|
 | background-color 	| Default background color 	|
+| backdrop-color 	| Default backdrop color 	|
 | border-radius 	| Border radius of the modal 	|
 | border-color 	| Border color of the modal 	|
 | box-shadow 	| Box shadow of the modal 	|

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

@@ -11,10 +11,26 @@
 
   &::backdrop {
     // ::backdrop does not inherit from its element so CSS vars does not work.
-    // ( https://stackoverflow.com/a/77393321 ) So we need to use the color directly.
+    // ( https://stackoverflow.com/a/77393321 )
-    // In the future we will maybe be able to use the following:
+    // So for now, we hide the backdrop element and use a dom element to create the backdrop.
-    // background: var(--c--components--modal--backdrop-color);
+    visibility: hidden;
-    background: #0C1A2B99;
+  }
+
+  &__backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--c--components--modal--backdrop-color);
+    opacity: 0;
+    animation: backdrop-fade-in 0.2s ease-out forwards;
+  }
+
+  @keyframes backdrop-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 
   &__title {

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

@@ -104,31 +104,36 @@ export const Modal = (props: ModalProps) => {
   return (
     <>
       {createPortal(
-        <dialog
+        <>
-          ref={ref}
+          <div aria-hidden={true} className="c__modal__backdrop" />
-          className={classNames("c__modal", "c__modal--" + props.size)}
+          <dialog
-        >
+            ref={ref}
-          {!props.hideCloseButton && !props.preventClose && (
+            className={classNames("c__modal", "c__modal--" + props.size)}
-            <div className="c__modal__close">
+          >
-              <Button
+            {!props.hideCloseButton && !props.preventClose && (
-                icon={<span className="material-icons">close</span>}
+              <div className="c__modal__close">
-                color="tertiary-text"
+                <Button
-                size="nano"
+                  icon={<span className="material-icons">close</span>}
-                onClick={() => props.onClose()}
+                  color="tertiary-text"
-              />
+                  size="nano"
-            </div>
+                  onClick={() => props.onClose()}
-          )}
+                />
-          {props.titleIcon && (
+              </div>
-            <div className="c__modal__title-icon">{props.titleIcon}</div>
+            )}
-          )}
+            {props.titleIcon && (
-          {props.title && <div className="c__modal__title">{props.title}</div>}
+              <div className="c__modal__title-icon">{props.titleIcon}</div>
+            )}
+            {props.title && (
+              <div className="c__modal__title">{props.title}</div>
+            )}
 
-          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-          <div className="c__modal__content" tabIndex={0}>
+            <div className="c__modal__content" tabIndex={0}>
-            {props.children}
+              {props.children}
-          </div>
+            </div>
-          <ModalFooter {...props} />
+            <ModalFooter {...props} />
-        </dialog>,
+          </dialog>
+        </>,
         document.getElementById("c__modals-portal")!,
       )}
     </>

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

@@ -3,6 +3,7 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 export const tokens = (defaults: DefaultTokens) => {
   return {
     "background-color": defaults.theme.colors["greyscale-000"],
+    "backdrop-color": "#0C1A2B99",
     "border-radius": "4px",
     "border-color": defaults.theme.colors["greyscale-300"],
     "box-shadow": "0px 1px 2px 0px #0C1A2B4D",

packages/react/src/cunningham-tokens.css

@@ -120,6 +120,7 @@
 	--c--components--toast--icon-size: 19px;
 	--c--components--toast--progress-bar-height: 3px;
 	--c--components--modal--background-color: var(--c--theme--colors--greyscale-000);
+	--c--components--modal--backdrop-color: #0C1A2B99;
 	--c--components--modal--border-radius: 4px;
 	--c--components--modal--border-color: var(--c--theme--colors--greyscale-300);
 	--c--components--modal--box-shadow: 0px 1px 2px 0px #0C1A2B4D;

packages/react/src/cunningham-tokens.scss

@@ -145,6 +145,7 @@ $themes: (
       ),
       'modal': (
         'background-color': #FFFFFF,
+        'backdrop-color': #0C1A2B99,
         'border-radius': 4px,
         'border-color': #E7E8EA,
         'box-shadow': 0px 1px 2px 0px #0C1A2B4D,