Adding styles to p and small

apps/storybook/.storybook/main.js

@@ -3,6 +3,7 @@ const path = require("path");
 module.exports = {
   stories: [
     "../intro.stories.mdx",
+    "../text.stories.mdx",
     "../../../packages/ui/components/**/*.stories.mdx",
     "../../../packages/features/**/*.stories.mdx",
     "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",

apps/storybook/components/Title.tsx

@@ -11,7 +11,7 @@ export const Title = ({
 }) => {
   return (
     <div className={`story-title ${offset && "offset"}`}>
-      <h1>
+      <h1 className="story-heading-1">
         {title}
         {suffix && <span>{suffix}</span>}
       </h1>

apps/storybook/text.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  RowTitles,
+  CustomArgsTable,
+} from "@calcom/storybook/components";
+
+<Meta title="Typography" />
+
+<Title title="Typography" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
+
+## Definition
+
+Typography style guide for Cal.com applications. Please view the STORY of this to see correct styles. We override storybook headings in doc mode
+to create our template. Thus the headings in the story are not the correct styles while viewing in DOCS.
+
+<Canvas>
+  <Story name="Heading Stlyes">
+    <Example title="Heading One">
+      <h1>Heading One text</h1>
+    </Example>
+    <Example title="Heading Two">
+      <h2>Heading Two text</h2>
+    </Example>
+    <Example title="Heading Three">
+      <h3>Heading Three text</h3>
+    </Example>
+  </Story>
+  <Story name="Text Stlyes">
+    <Example title="Paragraph">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</p>
+    </Example>
+    <Example title="Small">
+      <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</small>
+    </Example>
+  </Story>
+</Canvas>

packages/config/tailwind-bases.js

@@ -1,19 +1,34 @@
 const plugin = require("tailwindcss/plugin");
 
-module.exports = plugin(function ({ addBase, theme, addComponents }) {
+module.exports = plugin(function ({ addBase, theme, addComponents, addUtilities }) {
   const h1Base = {
     fontSize: "28px",
     fontWeight: theme("fontWeight.semibold"),
+    lineHeight: "28px",
   };
 
   const h2Base = {
     fontSize: theme("fontSize.2xl"),
     fontWeight: theme("fontWeight.semibold"),
+    lineHeight: "24px",
   };
 
   const h3Base = {
     fontSize: theme("fontSize.xl"),
     fontWeight: theme("fontWeight.semibold"),
+    lineHeight: "20px",
+  };
+
+  const pBase = {
+    fontSize: theme("fontSize.sm"),
+    leading: theme("leading.none"),
+    fontWeight: theme("fontWeight.normal"),
+  };
+
+  const smallBase = {
+    fontSize: theme("fontSize.xs"),
+    leading: theme("leading.none"),
+    fontWeight: theme("fontWeight.normal"),
   };
 
   /** Base heading styles
@@ -28,13 +43,23 @@ module.exports = plugin(function ({ addBase, theme, addComponents }) {
       color: theme("colors.black"),
     },
 
+    "p, small": {
+      fontFamily: theme("fontFamily.sans"),
+      color: theme("colors.black"),
+    },
+
     //** Base heading styles */
     h1: h1Base,
     h2: h2Base,
     h3: h3Base,
 
+    //** Base paragraph & Small styles */
+    p: pBase,
+    small: smallBase,
+
+    //** Dark mode styles */
     ".dark": {
-      "h1, h2, h3, h4": {
+      "h1, h2, h3, h4,p , small": {
         color: theme("colors.darkgray.900"),
       },
     },
@@ -42,8 +67,8 @@ module.exports = plugin(function ({ addBase, theme, addComponents }) {
 
   //** Component heading styles - used if a heading needs to look like another varient*/
   addComponents({
-    ".title-1": h1Base,
-    ".title-2": h2Base,
-    ".title-3": h3Base,
+    ".title-1": { ...h1Base },
+    ".title-2": { ...h2Base },
+    ".title-3": { ...h3Base },
   });
 });

packages/ui/components/form/wizard/WizardForm.tsx

@@ -41,7 +41,7 @@ function WizardForm<T extends DefaultStep>(props: {
           props.containerClassname
         )}>
         <div className="px-4 py-5 sm:px-6">
-          <h1 className="font-cal text-2xl text-gray-900">{currentStep.title}</h1>
+          <h1>{currentStep.title}</h1>
           <p className="text-sm text-gray-500">{currentStep.description}</p>
         </div>