feat(scroll): add page scroll

components/Atoms/Scroll/Scroll.stories.js

@@ -0,0 +1,7 @@
+import Scroll from './Scroll.twig';
+
+export default {
+  title: 'Design System/Atoms/Scroll'
+};
+
+export const base = () => Scroll();

components/Atoms/Scroll/Scroll.twig

@@ -0,0 +1,12 @@
+<div class="flex gap-12">
+  <div class="flex grow flex-col gap-4">
+    <h1 class="h1 text-center mb-4">Page Scroll</h1>
+
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    </div>
+  </div>
+</div>

components/base.css

@@ -4,6 +4,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 body {
@@ -15,3 +16,22 @@ svg {
   width: 100%;
   height: 100%;
 }
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0px;
+  background-color: var(--grey-lighter);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+  background-color: var(--grey-dark);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--grey-dark) var(--grey-lighter);
+}