feat: replace Atyp font with Roboto Flex

oxen-io · Sep 25, 2024 · d4413ef · d4413ef
1 parent a1c6abf
commit d4413ef
Show file tree

Hide file tree

Showing 28 changed files with 14 additions and 130 deletions.
diff --git a/apps/staking/app/layout.tsx b/apps/staking/app/layout.tsx
@@ -1,7 +1,7 @@
 import { isProduction, NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID } from '@/lib/env';
 import { getLocalizationData } from '@/lib/locale-server';
 import { Toaster } from '@session/ui/components/ui/sonner';
-import { AtypDisplay, AtypText, MonumentExtended } from '@session/ui/fonts';
+import { MonumentExtended, RobotoFlex } from '@session/ui/fonts';
 
 import { DevSheet } from '@/components/DevSheet';
 import { siteMetadata, wagmiMetadata } from '@/lib/metadata';
@@ -17,6 +17,7 @@ import { FeatureFlagProvider } from '@/lib/feature-flags-client';
 import RemoteBanner from '@/components/RemoteBanner';
 import Header from '@/components/Header';
 import { Suspense } from 'react';
+import { cn } from '@session/ui/lib/utils';
 
 const wagmiConfig = createWagmiConfig({
   projectId: NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
@@ -37,7 +38,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html
       lang={locale}
       dir={direction}
-      className={`${AtypDisplay.variable} ${AtypText.variable} ${MonumentExtended.variable}`}
+      className={cn(RobotoFlex.variable, MonumentExtended.variable)}
     >
       <FeatureFlagProvider>
         <GlobalProvider
@@ -46,7 +47,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           initialState={initialWagmiState}
           wagmiMetadata={wagmiMetadata}
         >
-          <body className="bg-session-black text-session-text font-atyp-text overflow-x-hidden">
+          <body className="bg-session-black font-roboto-flex text-session-text overflow-x-hidden">
             <ChainBanner />
             <Suspense>
               <RemoteBanner />

diff --git a/packages/ui/components/ui/sonner.tsx b/packages/ui/components/ui/sonner.tsx
@@ -33,7 +33,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
         },
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-session-black group-[.toaster]:shadow-lg group-[.toaster]:font-atyp-display group-[.toaster]:text-[15px] group-[.toaster]:px-8 group-[.toaster]:py-5 group-[.toast-action]:bg-session-green',
+            'group toast group-[.toaster]:bg-session-black group-[.toaster]:shadow-lg group-[.toaster]:font-roboto-flex group-[.toaster]:text-[15px] group-[.toaster]:px-8 group-[.toaster]:py-5 group-[.toast-action]:bg-session-green',
           description: 'text-muted-foreground',
           icon: 'inline w-6 h-6 *:w-6 *:h-6',
           success: 'toast-success bg-session-black text-session-green border border-session-green',

diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Bold.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Bold.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-BoldItalic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-BoldItalic.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Italic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Italic.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Light.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Light.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-LightItalic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-LightItalic.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Medium.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Medium.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-MediumItalic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-MediumItalic.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Regular.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Regular.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-SemiBold.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-SemiBold.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-SemiBoldItalic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-SemiBoldItalic.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-Thin.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-Thin.ttf
diff --git a/packages/ui/fonts/AtypDisplay/AtypDisplay-ThinItalic.ttf b/packages/ui/fonts/AtypDisplay/AtypDisplay-ThinItalic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Bold.ttf b/packages/ui/fonts/AtypText/AtypText-Bold.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-BoldItalic.ttf b/packages/ui/fonts/AtypText/AtypText-BoldItalic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Italic.ttf b/packages/ui/fonts/AtypText/AtypText-Italic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Light.ttf b/packages/ui/fonts/AtypText/AtypText-Light.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-LightItalic.ttf b/packages/ui/fonts/AtypText/AtypText-LightItalic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Medium.ttf b/packages/ui/fonts/AtypText/AtypText-Medium.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-MediumItalic.ttf b/packages/ui/fonts/AtypText/AtypText-MediumItalic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Regular.ttf b/packages/ui/fonts/AtypText/AtypText-Regular.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-SemiBold.ttf b/packages/ui/fonts/AtypText/AtypText-SemiBold.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-SemiBoldItalic.ttf b/packages/ui/fonts/AtypText/AtypText-SemiBoldItalic.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-Thin.ttf b/packages/ui/fonts/AtypText/AtypText-Thin.ttf
diff --git a/packages/ui/fonts/AtypText/AtypText-ThinItalic.ttf b/packages/ui/fonts/AtypText/AtypText-ThinItalic.ttf
diff --git a/packages/ui/fonts/fonts.ts b/packages/ui/fonts/fonts.ts
@@ -1,4 +1,5 @@
 import localFont from 'next/font/local';
+import { Roboto_Flex } from 'next/font/google';
 
 type FontWeight =
   | 'Thin'
@@ -14,144 +15,27 @@ type FontWeight =
   | 'SemiBoldItalic'
   | 'BoldItalic';
 
-type FontPath = `${string}-${FontWeight}.ttf`;
-
+type FontPath = `${string}-${FontWeight}.${'ttf' | 'woff2'}`;
 type FontSrc = Array<{
   path: FontPath;
-  weight: string;
+  weight?: string;
   style?: string;
 }>;
 
-const AtypDisplay = localFont({
-  src: [
-    {
-      path: './AtypDisplay/AtypDisplay-Thin.ttf',
-      weight: '100',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-Light.ttf',
-      weight: '300',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-Regular.ttf',
-      weight: '400',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-Medium.ttf',
-      weight: '500',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-SemiBold.ttf',
-      weight: '600',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-Bold.ttf',
-      weight: '700',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-ThinItalic.ttf',
-      weight: '100',
-      style: 'italic',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-LightItalic.ttf',
-      weight: '300',
-      style: 'italic',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-Italic.ttf',
-      weight: '400',
-      style: 'italic',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-MediumItalic.ttf',
-      weight: '500',
-      style: 'italic',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-SemiBoldItalic.ttf',
-      weight: '600',
-      style: 'italic',
-    },
-    {
-      path: './AtypDisplay/AtypDisplay-BoldItalic.ttf',
-      weight: '700',
-      style: 'italic',
-    },
-  ] satisfies FontSrc,
-  variable: '--font-atyp-display',
-  display: 'swap',
-});
-
-const AtypText = localFont({
-  src: [
-    {
-      path: './AtypText/AtypText-Thin.ttf',
-      weight: '100',
-    },
-    {
-      path: './AtypText/AtypText-Light.ttf',
-      weight: '300',
-    },
-    {
-      path: './AtypText/AtypText-Regular.ttf',
-      weight: '400',
-    },
-    {
-      path: './AtypText/AtypText-Medium.ttf',
-      weight: '500',
-    },
-    {
-      path: './AtypText/AtypText-SemiBold.ttf',
-      weight: '600',
-    },
-    {
-      path: './AtypText/AtypText-Bold.ttf',
-      weight: '700',
-    },
-    {
-      path: './AtypText/AtypText-ThinItalic.ttf',
-      weight: '100',
-      style: 'italic',
-    },
-    {
-      path: './AtypText/AtypText-LightItalic.ttf',
-      weight: '300',
-      style: 'italic',
-    },
-    {
-      path: './AtypText/AtypText-Italic.ttf',
-      weight: '400',
-      style: 'italic',
-    },
-    {
-      path: './AtypText/AtypText-MediumItalic.ttf',
-      weight: '500',
-      style: 'italic',
-    },
-    {
-      path: './AtypText/AtypText-SemiBoldItalic.ttf',
-      weight: '600',
-      style: 'italic',
-    },
-    {
-      path: './AtypText/AtypText-BoldItalic.ttf',
-      weight: '700',
-      style: 'italic',
-    },
-  ] satisfies FontSrc,
-  variable: '--font-atyp-text',
+const RobotoFlex = Roboto_Flex({
   display: 'swap',
+  subsets: ['latin-ext', 'cyrillic-ext', 'greek', 'vietnamese'],
+  variable: '--font-roboto-flex',
 });
 
 const MonumentExtended = localFont({
   src: [
     {
       path: './MonumentExtended/MonumentExtended-Regular.woff2',
     },
-  ],
+  ] satisfies FontSrc,
   variable: '--font-monument-extended',
   display: 'swap',
 });
 
-export { AtypDisplay, AtypText, MonumentExtended };
+export { RobotoFlex, MonumentExtended };
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -26,8 +26,7 @@ export default {
       '3xl': '1920px',
     },
     fontFamily: {
-      'atyp-display': ['var(--font-atyp-display)'],
-      'atyp-text': ['var(--font-atyp-text)'],
+      'roboto-flex': ['var(--font-roboto-flex)'],
       'monument-extended': ['var(--font-monument-extended)'],
     },
     extend: {