test fallback backdrop color

sumup-oss · Dec 10, 2024 · a1f2bf7 · a1f2bf7
1 parent 80a87ce
commit a1f2bf7
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css
@@ -78,7 +78,7 @@
 /* Native Backdrop */
 .dialog::backdrop {
   visibility: hidden;
-  background-color: var(--cui-bg-overlay);
+  background-color: var(--cui-bg-overlay, rgb(0 0 0 / 40%));
   opacity: 0;
   transition:
     opacity var(--cui-transitions-slow),
@@ -99,7 +99,7 @@
   bottom: 0;
   left: 0;
   visibility: hidden;
-  background-color: var(--cui-bg-overlay);
+  background-color: var(--cui-bg-overlay, rgb(0 0 0 / 40%));
   opacity: 0;
   transition:
     opacity var(--cui-transitions-slow),

diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
@@ -21,10 +21,7 @@ import { modes } from '../../../../.storybook/modes.js';
 import { Headline } from '../Headline/index.js';
 import { Body } from '../Body/index.js';
 import { Button } from '../Button/index.js';
-import {
-  FullViewport,
-  Stack,
-} from '../../../../.storybook/components/index.js';
+import { Stack } from '../../../../.storybook/components/index.js';
 
 import { Modal, type ModalProps, useModal } from './Modal.js';
 import { ModalProvider } from './ModalContext.js';
@@ -47,9 +44,9 @@ export default {
     },
     decorators: [
       (Story) => (
-        <FullViewport>
+        <div style={{ width: '1200px', height: '900px' }}>
           <Story />
-        </FullViewport>
+        </div>
       ),
     ] as Decorator[],
   },