modals

configs/storybook/.storybook/global.css

@@ -0,0 +1,67 @@
+/* Remove list styles (bullets/numbers) */
+ol,
+ul {
+  list-style: none;
+}
+
+/* Preferred box-sizing value */
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+html {
+  font-size: 13px;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+html,
+body,
+fieldset,
+ul,
+ol,
+dd,
+dt {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+/* Remove spacing between cells in tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

configs/storybook/.storybook/preview.js

@@ -7,6 +7,8 @@ import {
   fontFamilies,
 } from '@mongodb-js/compass-components';
 
+import './global.css';
+
 const fontStyles = css`
   @font-face {
     font-family: 'Euclid Circular A';
@@ -69,79 +71,8 @@ const fontStyles = css`
   }
 `;
 
-const reset = css`
-  /* Remove list styles (bullets/numbers) */
-  ol,
-  ul {
-    list-style: none;
-  }
-
-  /* Preferred box-sizing value */
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-smoothing: antialiased;
-  }
-
-  html {
-    font-size: 13px;
-  }
-
-  input,
-  button,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    color: inherit;
-    font: inherit;
-    margin: 0;
-  }
-
-  html,
-  body,
-  fieldset,
-  ul,
-  ol,
-  dd,
-  dt {
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-
-  blockquote,
-  q {
-    quotes: none;
-  }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: '';
-    content: none;
-  }
-
-  /* Remove spacing between cells in tables */
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-`;
-
 const homeContainerStyles = css({
   padding: spacing[3],
-  zIndex: 0,
   fontFamily:
     "'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif",
   fontSize: 13,
@@ -193,7 +124,7 @@ export const decorators = [
     const isDarkMode = context.globals.theme === 'dark';
     return (
       <LeafyGreenProvider darkMode={isDarkMode}>
-        <div className={cx(reset, fontStyles)}>
+        <div className={fontStyles}>
           <div
             className={cx(
               homeContainerStyles,