From ab39ddcde3b9a8fecccc60c5149ad53a23975dff Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 8 Dec 2023 11:51:19 +0100
Subject: [PATCH] Add typography for headings

---
 .../components/shared/Typography/index.tsx    | 72 +++++++++++++++++++
 dapp/src/theme/utils/fonts.ts                 | 28 +++++---
 2 files changed, 92 insertions(+), 8 deletions(-)

diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
index 1ffbd9ff1..5ef3cfb50 100644
--- a/dapp/src/components/shared/Typography/index.tsx
+++ b/dapp/src/components/shared/Typography/index.tsx
@@ -1,6 +1,78 @@
 import React from "react"
 import { Text, TextProps } from "@chakra-ui/react"
 
+export function H2Xl(props: TextProps) {
+  return (
+    <Text
+      as="h1"
+      fontWeight="medium"
+      fontSize="h2Xl"
+      lineHeight="h2Xl"
+      {...props}
+    />
+  )
+}
+
+export function HXl(props: TextProps) {
+  return (
+    <Text
+      as="h2"
+      fontWeight="medium"
+      fontSize="hXl"
+      lineHeight="hXl"
+      {...props}
+    />
+  )
+}
+
+export function HLg(props: TextProps) {
+  return (
+    <Text
+      as="h3"
+      fontWeight="medium"
+      fontSize="hLg"
+      lineHeight="hLg"
+      {...props}
+    />
+  )
+}
+
+export function HMd(props: TextProps) {
+  return (
+    <Text
+      as="h4"
+      fontWeight="medium"
+      fontSize="hMd"
+      lineHeight="hMd"
+      {...props}
+    />
+  )
+}
+
+export function HSm(props: TextProps) {
+  return (
+    <Text
+      as="h5"
+      fontWeight="medium"
+      fontSize="hSm"
+      lineHeight="hSm"
+      {...props}
+    />
+  )
+}
+
+export function HXs(props: TextProps) {
+  return (
+    <Text
+      as="h6"
+      fontWeight="medium"
+      fontSize="hXs"
+      lineHeight="hXs"
+      {...props}
+    />
+  )
+}
+
 export function TextXl(props: TextProps) {
   return (
     <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
index 533af2b4e..efa338c48 100644
--- a/dapp/src/theme/utils/fonts.ts
+++ b/dapp/src/theme/utils/fonts.ts
@@ -1,9 +1,15 @@
 export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
+  h2Xl: "4.5rem",
+  hXl: "3.75rem",
+  hLg: "3rem",
+  hMd: "2.25rem",
+  hSm: "1.875rem",
+  hXs: "1.5rem",
   xl: "1.25rem",
+  lg: "1.125rem",
+  md: "1rem",
+  sm: "0.875rem",
+  xs: "0.75rem",
 }
 
 export const fontWeights = {
@@ -15,11 +21,17 @@ export const fontWeights = {
 }
 
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
+  h2Xl: "5.625rem",
+  hXl: "4.5rem",
+  hLg: "3.75rem",
+  hMd: "2.75rem",
+  hSm: "2.375rem",
+  hXs: "2rem",
   xl: "1.875rem",
+  lg: "1.75rem",
+  md: "1.5rem",
+  sm: "1.25rem",
+  xs: "1.125rem",
 }
 
 export const fonts = {