Simplify styles for the headings

thesis · Dec 12, 2023 · d9e7161 · d9e7161
1 parent 5322d63
commit d9e7161
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 92 deletions.
diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
@@ -1,76 +1,28 @@
 import React from "react"
-import { Text, TextProps } from "@chakra-ui/react"
+import { Heading, Text, TextProps } from "@chakra-ui/react"
 
-export function H2Xl(props: TextProps) {
-  return (
-    <Text
-      as="h1"
-      fontWeight="medium"
-      fontSize="h2Xl"
-      lineHeight="h2Xl"
-      {...props}
-    />
-  )
+export function H1(props: TextProps) {
+  return <Heading as="h1" size={{ base: "6xl", md: "7xl" }} {...props} />
 }
 
-export function HXl(props: TextProps) {
-  return (
-    <Text
-      as="h2"
-      fontWeight="medium"
-      fontSize="hXl"
-      lineHeight="hXl"
-      {...props}
-    />
-  )
+export function H2(props: TextProps) {
+  return <Heading as="h2" size={{ base: "5xl", md: "6xl" }} {...props} />
 }
 
-export function HLg(props: TextProps) {
-  return (
-    <Text
-      as="h3"
-      fontWeight="medium"
-      fontSize="hLg"
-      lineHeight="hLg"
-      {...props}
-    />
-  )
+export function H3(props: TextProps) {
+  return <Heading as="h3" size={{ base: "4xl", md: "5xl" }} {...props} />
 }
 
-export function HMd(props: TextProps) {
-  return (
-    <Text
-      as="h4"
-      fontWeight="medium"
-      fontSize="hMd"
-      lineHeight="hMd"
-      {...props}
-    />
-  )
+export function H4(props: TextProps) {
+  return <Heading as="h4" size={{ base: "3xl", md: "4xl" }} {...props} />
 }
 
-export function HSm(props: TextProps) {
-  return (
-    <Text
-      as="h5"
-      fontWeight="medium"
-      fontSize="hSm"
-      lineHeight="hSm"
-      {...props}
-    />
-  )
+export function H5(props: TextProps) {
+  return <Heading as="h5" size={{ base: "2xl", md: "3xl" }} {...props} />
 }
 
-export function HXs(props: TextProps) {
-  return (
-    <Text
-      as="h6"
-      fontWeight="medium"
-      fontSize="hXs"
-      lineHeight="hXs"
-      {...props}
-    />
-  )
+export function H6(props: TextProps) {
+  return <Heading as="h6" size={{ base: "xl", md: "2xl" }} {...props} />
 }
 
 export function TextXl(props: TextProps) {

diff --git a/dapp/src/theme/Heading.ts b/dapp/src/theme/Heading.ts
@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Heading: ComponentSingleStyleConfig = {
+  sizes: {
+    "7xl": {
+      fontSize: "4.5rem",
+      lineHeight: "5.625rem",
+    },
+    "6xl": {
+      fontSize: "3.75rem",
+      lineHeight: "4.5rem",
+    },
+    "5xl": {
+      fontSize: "3rem",
+      lineHeight: "3.75rem",
+    },
+    "4xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+    },
+    "3xl": {
+      fontSize: "1.875rem",
+      lineHeight: "2.375rem",
+    },
+    "2xl": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+}
+
+export default Heading
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
@@ -2,7 +2,8 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fontSizes, fontWeights, fonts, lineHeights } from "./utils"
+import { colors, fonts, lineHeights } from "./utils"
+import Heading from "./Heading"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -11,8 +12,6 @@ Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 const defaultTheme = {
   colors,
   fonts,
-  fontSizes,
-  fontWeights,
   lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
@@ -26,6 +25,7 @@ const defaultTheme = {
   components: {
     Button,
     Switch,
+    Heading,
   },
 }
 

diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
@@ -1,32 +1,4 @@
-export const fontSizes = {
-  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 = {
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  black: 900,
-}
-
 export const lineHeights = {
-  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",