feat(modal): add modal component

src/packages/core/src/modal/modal.css

@@ -0,0 +1,35 @@
+._e_modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+._e_modal__backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background-color: var(--N800);
+  opacity: 0.64;
+}
+
+._e_modal__window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  padding: var(--S32);
+  border-radius: var(--S4);
+  background-color: var(--N0);
+}
+
+._e_modal__heading {
+  margin-bottom: var(--S24);
+  font: var(--H1);
+  color: var(--N800);
+}

src/packages/core/src/modal/modal.html

@@ -0,0 +1,7 @@
+<div class="_e_modal">
+  <div class="_e_modal__backdrop"></div>
+  <div class="_e_modal__window">
+    <h1 class="_e_modal__heading">Modal Dialog</h1>
+    <button class="_e_button">Close Modal</button>
+  </div>
+</div>

src/packages/core/src/modal/modal.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import pretty from 'pretty';
+
+import modal from './modal.html';
+
+<Meta title='Core/Modal' />
+
+# Modal
+
+<Preview>
+  <Story name="default" height="240px" parameters={{ docs: { source: { code: pretty(modal) } } }}>
+    { () => modal }
+  </Story>
+</Preview>