Add a basic typography (#61)

The style guide isn't yet ready. But let's standardize some texts to
avoid more mess. If the texts change, let us update them later. Updating
of tags already in use will be done in the next steps to avoid conflicts
on branches.

[Typography
designs](https://www.figma.com/file/OUdSfHsmgV8EJpWxAzXjl5/Design-Tasks?type=design&node-id=2391-1560&mode=design&t=NSREasNxHtDE02yS-0)

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"