refactor(Heading.stories): migrate to tailwind

Author: TylerAPfledderer

src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { Center, Stack } from "../flex"
+
+const meta = {
+  title: "Atoms / Typography / Heading",
+  parameters: {
+    layout: null,
+    chromatic: {
+      modes: {
+        md: {
+          viewport: "md",
+        },
+        "2xl": {
+          viewport: "2xl",
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Center className='flex-col min-h-[100vh]'>
+        <Story />
+      </Center>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const 
+
+export const Heading: Story = {
+  render: () => (
+    <>
+      <div>
+        Adjust the viewport to below &quot;md&quot; to see the font size and
+        line height change
+      </div>
+      <Stack>
+        {headings.map((Heading) => (
+            <Heading key={Heading}>
+              {`${Heading} base component`}
+            </Heading>
+        ))}
+      </Stack>
+    </>
+  ),
+}

src/components/ui/__stories__/Heading.stories.tsx

@@ -22,7 +22,7 @@ const Center = forwardRef<FlexElement, FlexProps>(
     return (
       <Flex
         ref={ref}
-        className={cn("items-center justify-center", className)}
+        className={cn("items-center justify-center gap-2", className)}
         {...props}
       />
     )

src/components/ui/flex.tsx

@@ -4,6 +4,10 @@
 
 @layer base {
   :root {
+
+    --font-inter: Inter, sans-serif;
+    --font-mono: "IBM Plex Mono", Courier, monospace;
+
     /* Primitive Color Scheme */
     --gray-100: #f7f7f7;
     --gray-150: #f2f2f2;
@@ -149,6 +153,34 @@
     @apply text-primary underline;
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold
+  }
+
+  h1 {
+    @apply text-4xl lg:text-5xl;
+  }
+
+  h2 {
+    @apply text-3xl lg:text-4xl;
+  }
+
+  h3 {
+    @apply text-2xl lg:text-3xl;
+  }
+
+  h4 {
+    @apply text-xl lg:text-2xl;
+  }
+
+  h5 {
+    @apply text-md lg:text-xl;
+  }
+
+  h6 {
+    @apply text-sm lg:text-md;
+  }
+
   /* TODO: to be replaced with list component styles */
   ul,
   ol {