From 5e4849885d07165bee4937eab2d3b1dcef8b3e2d Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 6 Dec 2023 10:17:28 +0100
Subject: [PATCH 1/2] Add a basic typography

---
 dapp/src/components/Typography/index.tsx | 33 ++++++++++++++++++++++++
 dapp/src/theme/index.ts                  |  4 +++
 dapp/src/theme/utils/fonts.ts            | 22 ++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 dapp/src/components/Typography/index.tsx
 create mode 100644 dapp/src/theme/utils/fonts.ts

diff --git a/dapp/src/components/Typography/index.tsx b/dapp/src/components/Typography/index.tsx
new file mode 100644
index 000000000..6e1231239
--- /dev/null
+++ b/dapp/src/components/Typography/index.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react"
+import { Text, TextProps } from "@chakra-ui/react"
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 980c42838..366e952a6 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -2,9 +2,13 @@ import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import { colors } from "./utils"
+import { fontSizes, fontWeights, lineHeights } from "./utils/fonts"
 
 const defaultTheme = {
   colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
new file mode 100644
index 000000000..18a482760
--- /dev/null
+++ b/dapp/src/theme/utils/fonts.ts
@@ -0,0 +1,22 @@
+export const fontSizes = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+}
+
+export const fontWeights = {
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  black: 900,
+}
+
+export const lineHeights = {
+  xs: "1.125rem",
+  sm: "1.25rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "1.875rem",
+}

From b037200f87be5a2715d2a61c50cc54ea6e68d643 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 6 Dec 2023 12:20:26 +0100
Subject: [PATCH 2/2] Fix for incorrect import

---
 dapp/src/theme/index.ts       | 3 +--
 dapp/src/theme/utils/index.ts | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 366e952a6..39ec6d51b 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -1,8 +1,7 @@
 import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
-import { colors } from "./utils"
-import { fontSizes, fontWeights, lineHeights } from "./utils/fonts"
+import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
 
 const defaultTheme = {
   colors,
diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts
index c0b5e2654..9f377b3e3 100644
--- a/dapp/src/theme/utils/index.ts
+++ b/dapp/src/theme/utils/index.ts
@@ -1 +1,2 @@
 export * from "./colors"
+export * from "./fonts"