windranger-io · abbylow · Aug 1, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/apps/bridge/src/app/layout.tsx b/apps/bridge/src/app/layout.tsx
@@ -2,13 +2,12 @@ import "./styles/globals.css";
 
 // Dummy components
 import {
-  GTWalsheimRegular,
-  GTWalsheimMedium,
   Header,
   SlimFooter,
   PageWrapper,
   PageBackroundImage,
   PageContainer,
+  GTWalsheim,
 } from "@mantle/ui";
 import LegalDisclaimer from "@components/LegalDisclaimer";
 
@@ -25,12 +24,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="en"
-      className={`${GTWalsheimRegular.variable} ${GTWalsheimMedium.variable}`}
-    >
+    <html lang="en" className={`${GTWalsheim.className}`}>
       <Head />
-      <body>
+      <body className="antialiased">
         {/* @ts-expect-error Server Component */}
         <Providers>
           <PageWrapper

diff --git a/apps/converter/src/app/layout.tsx b/apps/converter/src/app/layout.tsx
@@ -2,8 +2,7 @@ import "./styles/globals.css";
 
 // Dummy components
 import {
-  GTWalsheimRegular,
-  GTWalsheimMedium,
+  GTWalsheim,
   PageWrapper,
   PageBackroundImage,
   PageContainer,
@@ -25,12 +24,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="en"
-      className={`${GTWalsheimRegular.variable} ${GTWalsheimMedium.variable}`}
-    >
+    <html lang="en" className={`${GTWalsheim.className}`}>
       <Head />
-      <body>
+      <body className="antialiased">
         {/* @ts-expect-error Server Component */}
         <Providers>
           <PageWrapper

diff --git a/apps/converter/src/components/converter/Faq/index.tsx b/apps/converter/src/components/converter/Faq/index.tsx
@@ -8,7 +8,7 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
   {
     q: "Why should I migrate my $BIT tokens?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         As per{" "}
         <a
           href="https://snapshot.org/#/bitdao.eth/proposal/0xe81f852d90ba80929b1f19683da14b334d63b31cb94e53249b8caed715475693"
@@ -38,7 +38,7 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
   {
     q: "How do I migrate using multisig?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         Please see the &quot;For Advanced Users&quot; section of the{" "}
         <a
           href="https://www.mantle.xyz/blog/announcements/bit-to-mnt-user-guide"
@@ -55,7 +55,7 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
   {
     q: "Will gas be refunded?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         Yes, most users will be refunded their cost of migration in ETH. Users
         will not need to take any action and the ETH will be sent directly to
         the address used in the migration. The status of the rebate will be
@@ -78,23 +78,19 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
     q: "How do I add $MNT to my wallet?",
     a: (
       <div className="mx-4 mb-4">
-        <Typography className="text-type-secondary break-all">
+        <Typography variant="microBody14" className="break-all">
           Token address: 0x3c3a81e81dc49A522A592e7622A7E711c06bf354
         </Typography>
-        <Typography className="text-type-secondary">
-          Token symbol: MNT
-        </Typography>
-        <Typography className="text-type-secondary">
-          Token name: Mantle
-        </Typography>
-        <Typography className="text-type-secondary">Decimals: 18</Typography>
+        <Typography variant="microBody14">Token symbol: MNT</Typography>
+        <Typography variant="microBody14">Token name: Mantle</Typography>
+        <Typography variant="microBody14">Decimals: 18</Typography>
       </div>
     ),
   },
   {
     q: "How do I vote with $MNT after?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         $BIT delegation and voting works independently of $MNT due to the new
         token functionality. Visit{" "}
         <a
@@ -112,7 +108,7 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
   {
     q: "Why will the Migrator contract be halted?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         The contract is initially halted, then unhalted as the official
         migration period commences. The contract may be subsequenty halted in
         case there is a problem, or as instructed by Mantle Governance.
@@ -122,7 +118,7 @@ const faqList: Array<{ q: string; a: JSX.Element }> = [
   {
     q: "Why will the Migrator contract be out of funds?",
     a: (
-      <Typography className="text-type-secondary mx-4 mb-4">
+      <Typography variant="microBody14" className="mx-4 mb-4">
         For security purposes, the Migrator contract will hold a minimal amount
         of funds and will require top-up from the relevant Mantle Treasury.
         Excess tokens will be occasionally transferred to the relevant Mantle
@@ -149,7 +145,7 @@ function Accordion({
         className="flex flex-row justify-between items-center cursor-pointer p-4"
         onClick={togglePanel}
       >
-        <Typography className="text-type-primary text-left">
+        <Typography className="text-type-primary" variant="microBody14">
           {controlText}
         </Typography>
         {isExpanded ? (

diff --git a/apps/faucet/src/app/layout.tsx b/apps/faucet/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./styles/globals.css";
 
-import { GTWalsheimRegular, GTWalsheimMedium } from "@mantle/ui";
+import { GTWalsheim } from "@mantle/ui";
 import Providers from "./providers";
 
 export default async function RootLayout({
@@ -9,11 +9,8 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="en"
-      className={`${GTWalsheimRegular.variable} ${GTWalsheimMedium.variable}`}
-    >
-      <body>
+    <html lang="en" className={`${GTWalsheim.className}`}>
+      <body className="antialiased">
         {/* @ts-expect-error Server Component */}
         <Providers>{children}</Providers>
       </body>

diff --git a/apps/nft/src/app/[locale]/layout.tsx b/apps/nft/src/app/[locale]/layout.tsx
@@ -5,7 +5,7 @@ import {
   OG_DESC,
   OG_TITLE,
 } from "@config/constants";
-import { GTWalsheimMedium, GTWalsheimRegular } from "@mantle/ui";
+import { GTWalsheim } from "@mantle/ui";
 import { GoogleAnalytics } from "@src/components/GoogleAnalytics";
 import { Metadata } from "next";
 import { useLocale } from "next-intl";
@@ -35,16 +35,13 @@ export default function RootLayout({
 }) {
   const locale = useLocale();
   return (
-    <html
-      lang={locale}
-      className={`${GTWalsheimRegular.variable} ${GTWalsheimMedium.variable}`}
-    >
+    <html lang={locale} className={`${GTWalsheim.className}`}>
       <GoogleAnalytics GA_TRACKING_ID={GOOGLE_TAG} />
       <Cookies />
 
       {/* <Head /> */}
 
-      <body>{children}</body>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -1,17 +1,14 @@
 import './styles/globals.css'
-import { GTWalsheimRegular, GTWalsheimMedium } from '@mantle/ui'
+import { GTWalsheim } from '@mantle/ui'
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html
-      lang="en"
-      className={`${GTWalsheimRegular.variable} ${GTWalsheimMedium.variable}`}
-    >
-      <body>{children}</body>
+    <html lang="en" className={`${GTWalsheim.className}`}>
+      <body className="antialiased">{children}</body>
     </html>
   )
 }
diff --git a/packages/tailwind-config/index.js b/packages/tailwind-config/index.js
@@ -12,7 +12,7 @@ module.exports = {
       colors: mantleColors,
       fontFamily: {
         sans: ['var(--font-GTWalsheimRegular)', ...fontFamily.sans],
-        sansSemiBold: ['var(--font-GTWalsheimMedium)', ...fontFamily.sans],
+        sansSemiBold: ['var(--font-GTWalsheim-Medium)', ...fontFamily.sans],
       },
       zIndex: {
         pageBackgroundImage: '-100',

diff --git a/packages/ui/src/base/T.tsx b/packages/ui/src/base/T.tsx
@@ -14,6 +14,26 @@ type TypographyVariant =
   | 'transactionTableHeading'
   | 'modalHeadingSm'
   | 'footerColumnLabel'
+  // the variants below are typographies in mantle core style guide
+  | 'h1HeaderXXL'
+  | 'h2HeaderXL'
+  | 'h3Subheader'
+  | 'h4PageInfo'
+  | 'h5Title'
+  | 'h6TitleSmaller'
+  | 'h6TitleMini'
+  | 'body24'
+  | 'body22'
+  | 'body20'
+  | 'body20Medium'
+  | 'body18'
+  | 'smallTitle18'
+  | 'buttonLarge'
+  | 'smallWidget16'
+  | 'microBody14'
+  | 'buttonMedium'
+  | 'footerLink'
+  | 'textBtn12'
 
 type HTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
@@ -97,6 +117,98 @@ const typographyMap: {
       'text-[14px] leading-[20px] text-type-primary',
     ),
   },
+  // the variants below are typographies in mantle core style guide
+  h1HeaderXXL: {
+    tag: 'h1',
+    classNames:
+      'text-[100px] leading-none tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h2HeaderXL: {
+    tag: 'h2',
+    classNames:
+      'text-[80px] leading-none tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h3Subheader: {
+    tag: 'h3',
+    classNames:
+      'text-[68px] leading-[1.1] tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h4PageInfo: {
+    tag: 'h4',
+    classNames:
+      'text-[60px] leading-[1.1] tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h5Title: {
+    tag: 'h5',
+    classNames:
+      'text-[42px] leading-[1.1] tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h6TitleSmaller: {
+    tag: 'h6',
+    classNames:
+      'text-[32px] leading-[1.2] tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  h6TitleMini: {
+    tag: 'h6',
+    classNames:
+      'text-[28px] leading-[1.2] tracking-[-0.04em] text-type-primary font-medium text-left',
+  },
+  body24: {
+    tag: 'p',
+    classNames:
+      'text-[24px] leading-[1.4] tracking-[-0.02em] text-type-secondary text-left',
+  },
+  body22: {
+    tag: 'p',
+    classNames: 'text-[22px] leading-[1.4] text-type-secondary text-left',
+  },
+  body20: {
+    tag: 'p',
+    classNames: 'text-[20px] leading-[1.4] text-type-secondary text-left',
+  },
+  body20Medium: {
+    tag: 'p',
+    classNames:
+      'text-[20px] leading-[1.4] text-type-secondary font-medium text-left',
+  },
+  body18: {
+    tag: 'p',
+    classNames: 'text-[18px] leading-[1.4] text-type-secondary text-left',
+  },
+  smallTitle18: {
+    tag: 'p',
+    classNames:
+      'text-[18px] leading-[20px] tracking-[-0.02em] text-type-primary text-left',
+  },
+  buttonLarge: {
+    tag: 'p',
+    classNames:
+      'text-[16px] leading-[1.4] text-type-secondary font-medium text-left',
+  },
+  smallWidget16: {
+    tag: 'p',
+    classNames: 'text-[16px] leading-[1.4] text-type-secondary text-left',
+  },
+  microBody14: {
+    tag: 'p',
+    classNames:
+      'text-[14px] leading-[20px] tracking-[-0.02em] text-type-secondary text-left',
+  },
+  buttonMedium: {
+    tag: 'p',
+    classNames:
+      'text-[14px] leading-[1.3] text-type-secondary font-medium text-left',
+  },
+  footerLink: {
+    tag: 'p',
+    classNames:
+      'text-[14px] leading-[25px] tracking-[-0.01em] uppercase text-type-primary text-left',
+  },
+  textBtn12: {
+    tag: 'p',
+    classNames:
+      'text-[12px] leading-[20px] tracking-[-0.02em] text-type-secondary text-left',
+  },
 }
 
 export const Typography = ({

diff --git a/packages/ui/src/fonts/ThemeFonts.tsx b/packages/ui/src/fonts/ThemeFonts.tsx
@@ -10,4 +10,20 @@ const GTWalsheimMedium = localFont({
   variable: '--font-GTWalsheim-Medium',
 })
 
-export { GTWalsheimRegular, GTWalsheimMedium }
+const GTWalsheim = localFont({
+  src: [
+    {
+      path: './GT-Walsheim-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './GT-Walsheim-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-GTWalsheim',
+})
+
+export { GTWalsheimRegular, GTWalsheimMedium, GTWalsheim }