From 23e6a4668532f5d015ba1043719237fe0a4f6dee Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 25 Nov 2024 21:21:53 -0300
Subject: [PATCH] Improve fonts and remove "family" prop

---
 src/components/ui/text.tsx                       | 9 ---------
 src/features/developers/developers-challenge.tsx | 2 +-
 src/init/soapbox-head.tsx                        | 6 ++----
 tailwind.config.ts                               | 6 ++++++
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/text.tsx b/src/components/ui/text.tsx
index 1e31c90f4..91abe4284 100644
--- a/src/components/ui/text.tsx
+++ b/src/components/ui/text.tsx
@@ -45,11 +45,6 @@ const transformProperties = {
   uppercase: 'uppercase',
 };
 
-const families = {
-  sans: 'font-sans',
-  mono: 'font-mono',
-};
-
 export type Sizes = keyof typeof sizes
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div' | 'blockquote'
 type Directions = 'ltr' | 'rtl'
@@ -63,8 +58,6 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   className?: string;
   /** Text direction. */
   direction?: Directions;
-  /** Typeface of the text. */
-  family?: keyof typeof families;
   /** The "for" attribute specifies which form element a label is bound to. */
   htmlFor?: string;
   /** Font size of the text. */
@@ -92,7 +85,6 @@ const Text = forwardRef<any, IText>(
       align,
       className,
       direction,
-      family = 'sans',
       size = 'md',
       tag = 'p',
       theme = 'default',
@@ -122,7 +114,6 @@ const Text = forwardRef<any, IText>(
           [themes[theme]]: true,
           [weights[weight]]: true,
           [trackingSizes[tracking]]: true,
-          [families[family]]: true,
           [alignmentClass]: typeof align !== 'undefined',
           [transformProperties[transform]]: typeof transform !== 'undefined',
         }, className)}
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index ea2010389..656287979 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -56,7 +56,7 @@ const DevelopersChallenge = () => {
           {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
 
-        <Text tag='pre' family='mono' theme='muted'>
+        <Text tag='pre' className='font-mono' theme='muted'>
           {challenge}
         </Text>
 
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index ef562a928..e9729221b 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -29,6 +29,8 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
     'demetricator': demetricator,
+    'font-arabic': ['ar', 'fa'].includes(locale),
+    'font-javanese': locale === 'jv',
   });
 
   useEffect(() => {
@@ -48,10 +50,6 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
         {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-        <style type='text/css'>{`
-        html[lang='ar'] *, html[lang='fa'] * { font-family: 'Vazirmatn'; }
-        html[lang='jv'] * { font-family: 'Noto Sans Javanese'; }
-        `}</style>
         {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 977af52b1..7071c6741 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -27,6 +27,12 @@ const config: Config = {
         base: '0.9375rem',
       },
       fontFamily: {
+        arabic: [
+          'Vazirmatn',
+        ],
+        javanese: [
+          'Noto Sans Javanese',
+        ],
         sans: [
           'Inter',
           'ui-sans-serif',