fix: fix typography settings of heading elements

packages/logos-docusaurus-theme/package.json

@@ -20,7 +20,7 @@
     "prepublishOnly": "yarn clean && yarn build"
   },
   "dependencies": {
-    "@acid-info/lsd-react": "^0.1.0-alpha.8",
+    "@acid-info/lsd-react": "^0.1.0-alpha.13",
     "@docusaurus/core": "^2.4.1",
     "@docusaurus/mdx-loader": "^2.4.1",
     "@docusaurus/module-type-aliases": "^2.4.1",

packages/logos-docusaurus-theme/src/client/lib/themes.ts

@@ -0,0 +1,77 @@
+import {
+  createTheme,
+  CreateThemeProps,
+  defaultThemes,
+} from '@acid-info/lsd-react'
+
+const typography: CreateThemeProps['typography'] = {
+  h1: {
+    fontSize: '2.875rem',
+    lineHeight: '3.25rem',
+  },
+  h2: {
+    fontSize: '2rem',
+    lineHeight: '2.5rem',
+  },
+  h3: {
+    fontSize: '1.5rem',
+    lineHeight: '2rem',
+  },
+  h4: {
+    fontSize: '1.375rem',
+    lineHeight: '1.75rem',
+  },
+}
+
+const typographyMobile: CreateThemeProps['typography'] = {
+  h1: {
+    fontSize: '2.25rem',
+    lineHeight: '2.75rem',
+  },
+  h2: {
+    fontSize: '1.75rem',
+    lineHeight: '2.25rem',
+  },
+}
+
+const breakpoints: CreateThemeProps['breakpoints'] = {
+  xs: {
+    width: 0,
+    typography: typographyMobile,
+  },
+  sm: {
+    width: 576,
+  },
+  md: {
+    width: 768,
+  },
+  lg: {
+    width: 997,
+    typography,
+  },
+  xl: {
+    width: 1200,
+  },
+}
+
+export const lightTheme = createTheme(
+  {
+    breakpoints,
+    palette: {},
+    typography,
+    typographyGlobal: {},
+    name: 'logos-docusaurus-theme-light',
+  },
+  defaultThemes.light,
+)
+
+export const darkTheme = createTheme(
+  {
+    breakpoints: breakpoints,
+    palette: {},
+    typography,
+    typographyGlobal: {},
+    name: 'logos-docusaurus-theme-light',
+  },
+  defaultThemes.dark,
+)

packages/logos-docusaurus-theme/src/client/theme/Root.tsx

@@ -6,6 +6,7 @@ import {
 import React from 'react'
 import { useDocThemeOptions } from '../lib/useThemeOptions'
 import styles from './style.module.css'
+import { lightTheme, darkTheme } from '../lib/themes'
 
 const Content = ({ children }) => {
   const colorMode = useColorMode()
@@ -15,11 +16,7 @@ const Content = ({ children }) => {
 
   return (
     <ThemeProvider
-      theme={
-        colorMode.colorMode === 'dark'
-          ? defaultThemes.dark
-          : defaultThemes.light
-      }
+      theme={colorMode.colorMode === 'dark' ? darkTheme : lightTheme}
     >
       <div className={styles.root} data-hidden-doc-sidebar={hideDocSidebar}>
         {children}

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@acid-info/lsd-react@^0.1.0-alpha.8":
-  version "0.1.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.11.tgz#7c40f72d55f777fd3c308796c6ba6673a8eedaf6"
-  integrity sha512-ctB78tWN6dKIx6MIY9O7i7CVYjU/tWevxcBS26Q/cxCdIpirULwn0QbKwXJhEyuyQlbUJqW5ylrnpORrA3IG4A==
+"@acid-info/lsd-react@^0.1.0-alpha.13":
+  version "0.1.0-alpha.13"
+  resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.13.tgz#83a947aef6bf0597bb94389382bce72eda9d262e"
+  integrity sha512-bEtCygGvEabxr7a/0s2n9LLbs7RUY5YXFIEzxKeDH52UNhzLODY6hpOELWfpDxfd2Q0yxnMKSaG+yI7/FqjnlA==
   dependencies:
     "@emotion/react" "^11.10.5"
     "@emotion/styled" "^11.10.5"