Feat(web): Introduce Drawer component #DS-1580

packages/web/src/scss/components/Drawer/README.md

@@ -0,0 +1 @@
+# Drawer

packages/web/src/scss/components/Drawer/_Drawer.scss

@@ -0,0 +1,53 @@
+@use 'theme';
+
+.Drawer {
+    --drawer-scale: #{theme.$transition-scale-ratio};
+
+    all: unset;
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    overflow-y: auto;
+    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color});
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    overscroll-behavior: contain;
+
+    &::backdrop {
+        background-color: transparent;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition-property: visibility, opacity;
+        transition-duration: theme.$transition-duration;
+    }
+}
+
+.Drawer:has(.DrawerDialog--scrollable) {
+    overflow: hidden;
+}
+
+.Drawer--center,
+.Drawer:not(.Drawer--left, .Drawer--right) {
+    justify-content: center;
+}
+
+.Drawer--left {
+    justify-content: start;
+}
+
+.Drawer--right {
+    justify-content: end;
+}
+
+.Drawer[open] {
+    --drawer-scale: 1;
+    --drawer-translate-y: 0;
+
+    visibility: visible;
+    opacity: 1;
+    user-select: text; // 6.
+    pointer-events: auto;
+}

packages/web/src/scss/components/Drawer/_DrawerDialog.scss

@@ -0,0 +1,37 @@
+// 1. Use ScrollView's backdoor to fix its height inside DrawerDialog in Safari.
+// 2. We need to set the box-sizing again because the parent element unsets styles using `all: unset`.
+// 3. Intentionally transition also the worse performing properties to smooth out the changes of viewport size around
+//    the tablet breakpoint. However, `top` and `bottom` are not transitioned when switching from and to `auto`.
+// 4. Override bottom padding of parent `.Drawer` in the docked variant.
+
+@use 'sass:map';
+@use '../../tools/breakpoint';
+@use '../../tools/typography';
+@use 'theme';
+
+.DrawerDialog {
+    @include typography.generate(theme.$typography);
+
+    --scroll-view-vertical-height: auto;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: theme.$dialog-width;
+    max-width: calc(100% - #{theme.$padding-x});
+    height: theme.$dialog-height;
+    max-height: theme.$dialog-max-height;
+    overflow-x: var(--drawer-body-overflow-x, visible);
+    overflow-y: var(--drawer-body-overflow-y, visible);
+    color: theme.$dialog-text-color;
+    background-color: theme.$dialog-background-color;
+    box-shadow: theme.$dialog-shadow;
+    transform: translateY(var(--drawer-translate-y)) scale(var(--drawer-scale));
+    transform-origin: var(--drawer-transform-origin);
+    overscroll-behavior: contain;
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition-property: width, height, max-height, border-radius, transform;
+        transition-duration: inherit;
+    }
+}

packages/web/src/scss/components/Drawer/_theme.scss

@@ -0,0 +1,25 @@
+@use '@tokens' as tokens;
+@use '../../settings/transitions';
+
+$breakpoints: tokens.$breakpoints;
+$padding-x: tokens.$space-900;
+$padding-x-tablet: tokens.$space-1400;
+$padding-y: tokens.$space-700;
+$typography: tokens.$body-medium-regular;
+$transition-duration: transitions.$duration-200;
+$transition-scale-ratio: transitions.$scale-ratio-large-objects;
+$transition-shift-distance: transitions.$shift-distance-medium;
+
+$backdrop-background-color: tokens.$background-backdrop;
+
+$common-padding-x: tokens.$space-900;
+$common-padding-x-tablet: tokens.$space-1000;
+
+// ModalDialog
+$dialog-width: 375px;
+$dialog-height: auto;
+$dialog-max-height: none;
+$dialog-text-color: tokens.$text-primary;
+$dialog-border-radius: tokens.$radius-300;
+$dialog-background-color: tokens.$background-primary;
+$dialog-shadow: tokens.$shadow-300;