Add a basic typography

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} />
+  )
+}

dapp/src/theme/index.ts

@@ -1,10 +1,13 @@
 import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
-import { colors } from "./utils"
+import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
 
 const defaultTheme = {
   colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {

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",
+}

dapp/src/theme/utils/index.ts

@@ -1 +1,2 @@
 export * from "./colors"
+export * from "./fonts"