fix(Modal): fix flaky overlay opacity color issue happening in Chrome…

… browser

Here's a [reprod](https://codesandbox.io/s/eufemia-drawer-background-color-bug-ui417b?file=/src/App.tsx): (Shows a black overlay when opened)

Because it happen not on all Chrome browsers (all on latest) its hard to make a test that verifies the issue.

packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -1980,11 +1980,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2346,8 +2346,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2399,11 +2398,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -1916,11 +1916,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2282,8 +2282,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2335,11 +2334,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -1968,11 +1968,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2334,8 +2334,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2387,11 +2386,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

packages/dnb-eufemia/src/components/modal/style/_modal-mixins.scss

@@ -89,12 +89,12 @@
     opacity: 0;
   }
   to {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
 }
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
   to {
     opacity: 0;

packages/dnb-eufemia/src/components/modal/style/_modal.scss

@@ -8,8 +8,7 @@
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32;
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32);
 }
 
 html[data-dnb-modal-active] {
@@ -84,17 +83,17 @@ html[data-dnb-modal-active] {
   }
 
   &-root__inner &__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration)
-      ease-in-out forwards;
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out
+      forwards;
   }
 
   &-root__inner:last-of-type &__overlay {
     animation: show-modal-overlay var(--modal-animation-duration) ease-out
-      forwards 0ms;
+      forwards;
 
     &--hide {
       animation: hide-modal-overlay var(--modal-animation-duration)
-        ease-in-out forwards;
+        ease-out forwards;
     }
   }