Add typography for headers

thesis · Dec 7, 2023 · 086398d · 086398d
1 parent f2a74e7
commit 086398d
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 8 deletions.
diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
@@ -2,6 +2,78 @@
 import React from "react"
 import { Text, TextProps } from "@chakra-ui/react"
 
+export function Header2Xl(props: TextProps) {
+  return (
+    <Text
+      as="h1"
+      fontWeight="medium"
+      fontSize="h2Xl"
+      lineHeight="h2Xl"
+      {...props}
+    />
+  )
+}
+
+export function HeaderXl(props: TextProps) {
+  return (
+    <Text
+      as="h2"
+      fontWeight="medium"
+      fontSize="hXl"
+      lineHeight="hXl"
+      {...props}
+    />
+  )
+}
+
+export function HeaderLg(props: TextProps) {
+  return (
+    <Text
+      as="h3"
+      fontWeight="medium"
+      fontSize="hLg"
+      lineHeight="hLg"
+      {...props}
+    />
+  )
+}
+
+export function HeaderMd(props: TextProps) {
+  return (
+    <Text
+      as="h4"
+      fontWeight="medium"
+      fontSize="hMd"
+      lineHeight="hMd"
+      {...props}
+    />
+  )
+}
+
+export function HeaderSm(props: TextProps) {
+  return (
+    <Text
+      as="h5"
+      fontWeight="medium"
+      fontSize="hSm"
+      lineHeight="hSm"
+      {...props}
+    />
+  )
+}
+
+export function HeaderXs(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
@@ -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 = {