Fix Karla fonts

Lessons: - Don't apply conflicting tailwind classes, never try to let them overwrite and fall back to precedence rules. It's the Tailwind recommendation and the nativewind behaviour differs a bit between iOS and web. As such delete the `hhh-text-base` class. - On iOS Karla at weight 700 looks medium not bold. So there's a special case for iOS using the `ios:` class prefix. The same might be needed for Android.
haohao-how · Feb 5, 2025 · 6538284 · 6538284
1 parent 0dc610e
commit 6538284
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 30 deletions.
diff --git a/projects/app/package.json b/projects/app/package.json
@@ -80,8 +80,8 @@
     "react-responsive": "^10.0.0",
     "replicache": "patch:replicache@patch%3Areplicache@npm%253A15.0.1%23~/.yarn/patches/replicache-npm-15.0.1-daaa5044ba.patch%3A%3Aversion=15.0.1&hash=c643a4#~/.yarn/patches/replicache-patch-1cf70e7f66.patch",
     "replicache-react": "^5.0.1",
-    "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.14",
+    "tailwind-variants": "^0.3.1",
+    "tailwindcss": "^3.4.17",
     "usehooks-ts": "^3.1.0",
     "ws": "^8.17.1",
     "zod": "^3.23.8",

diff --git a/projects/app/src/app/(sidenav)/learn/index.tsx b/projects/app/src/app/(sidenav)/learn/index.tsx
@@ -92,7 +92,7 @@ export default function IndexPage() {
           <Animated.View entering={FadeIn} style={{ alignSelf: `stretch` }}>
             <View className="items-stretch self-stretch">
               <View className="flex-row items-center justify-between">
-                <Text className={boxTitleClass()}>
+                <Text className="hhh-text-title mb-1">
                   {recentCharacters.data.length > 0
                     ? `Continue learning`
                     : `Start learning`}
@@ -154,7 +154,7 @@ export default function IndexPage() {
       </View>
 
       <View className={boxClass()}>
-        <Text className={boxTitleClass()}>Connections</Text>
+        <Text className="hhh-text-title mb-1">Connections</Text>
         <Text className="hhh-text-caption mb-4">
           Strengthen your understanding through this interactive game that
           challenges you to make the right connections!
@@ -173,7 +173,7 @@ export default function IndexPage() {
       </View>
 
       <View className={boxClass()}>
-        <Text className={boxTitleClass()}>Radicals</Text>
+        <Text className="hhh-text-title mb-1">Radicals</Text>
         <Text className="hhh-text-caption mb-4">
           Radicals are the key to recognizing and understanding characters.
           Learn them with memorable stories to boost your reading and recall.
@@ -192,7 +192,7 @@ export default function IndexPage() {
       </View>
 
       <View className={boxClass()}>
-        <Text className={boxTitleClass()}>HSK1</Text>
+        <Text className="hhh-text-title mb-1">HSK1</Text>
         <Text className="hhh-text-caption mb-4">
           Test your knowledge with interactive exercises designed to help you
           prepare for the HSK 1 exam with confidence.
@@ -211,7 +211,7 @@ export default function IndexPage() {
       </View>
 
       <View className={boxClass()}>
-        <Text className={boxTitleClass()}>History</Text>
+        <Text className="hhh-text-title mb-1">History</Text>
         <Text className="hhh-text-caption mb-4">
           See your past studies, review characters and words, and reinforce your
           knowledge with spaced repetition.
@@ -235,7 +235,3 @@ export default function IndexPage() {
 const boxClass = tv({
   base: `max-w-[400px] w-full rounded-xl bg-primary-3 px-4 py-4 overflow-hidden`,
 });
-
-const boxTitleClass = tv({
-  base: `hhh-text-title mb-1`,
-});
diff --git a/projects/app/src/global.css b/projects/app/src/global.css
@@ -8,58 +8,73 @@
   TEXT STYLES
   
   */
-  .hhh-text-base {
-    @apply font-karla leading-normal text-primary-12;
-  }
-
   .hhh-text-button {
-    @apply hhh-text-base font-sans font-bold uppercase;
+    @apply font-sans font-bold uppercase text-primary-12;
   }
 
   .hhh-text-title {
-    @apply hhh-text-base text-2xl font-bold tracking-tight;
+    @apply font-karla text-2xl leading-normal tracking-tight text-primary-12;
+  }
+  /*
+  Karla on iOS font-bold looks like font-medium, so we have to bump it up to
+  800, normally we could use the nativewind variants `native:` or `ios:`, but
+  using these causes tailwind to hang.
+  */
+  /* web */
+  @media (display-mode: browser) {
+    .hhh-text-title {
+      @apply font-bold;
+    }
+  }
+
+  @media not (display-mode: browser) {
+    /* native */
+    .hhh-text-title {
+      @apply font-[800];
+    }
   }
+  /* end .hhh-text-title */
 
   .hhh-text-body {
-    @apply hhh-text-base font-sans;
+    @apply font-sans text-primary-12;
   }
 
   .hhh-text-caption {
-    @apply hhh-text-base text-primary-11;
+    @apply font-karla text-sm leading-normal text-primary-11;
   }
 
   /* www */
   .www-text-hero {
-    @apply hhh-text-base text-5xl font-bold leading-tight tracking-tighter transition-all md:text-6xl md:leading-tight;
+    @apply font-karla text-5xl font-bold leading-tight tracking-tighter text-primary-12 transition-all md:text-6xl md:leading-tight;
   }
 
   .www-text-title {
-    @apply hhh-text-base text-3xl font-bold tracking-tighter transition-all md:text-4xl;
+    @apply font-karla text-3xl font-bold leading-normal tracking-tighter text-primary-12 transition-all md:text-4xl md:leading-normal;
   }
 
   .www-text-subtitle {
-    @apply hhh-text-base text-base uppercase text-accent-10;
+    @apply font-karla text-base uppercase text-accent-10;
   }
 
   .www-text-body {
-    @apply hhh-text-base;
+    @apply font-karla text-primary-12;
     @apply text-[17px]/[24px];
   }
 
   .www-text-button {
-    @apply hhh-text-base px-2 py-1 text-center font-sans text-base font-bold uppercase leading-normal;
+    @apply px-2 py-1 text-center font-sans text-base font-bold uppercase leading-normal text-primary-12;
   }
 
   .www-px-comfortable {
     @apply px-safe-or-4 md:px-safe-or-8;
   }
 
   .www-text-footer-title {
-    @apply hhh-text-base text-[19px] font-medium leading-normal;
+    @apply font-karla text-[19px] font-medium leading-normal text-primary-12;
   }
 
   .www-text-footer-link {
-    @apply hhh-text-base text-[15px] font-medium leading-normal text-accent-10 antialiased;
+    @apply font-karla text-[15px] font-medium leading-normal text-primary-12 antialiased;
   }
 
   /* 

diff --git a/yarn.lock b/yarn.lock
@@ -2666,8 +2666,8 @@ __metadata:
     react-responsive: "npm:^10.0.0"
     replicache: "patch:replicache@patch%3Areplicache@npm%253A15.0.1%23~/.yarn/patches/replicache-npm-15.0.1-daaa5044ba.patch%3A%3Aversion=15.0.1&hash=c643a4#~/.yarn/patches/replicache-patch-1cf70e7f66.patch"
     replicache-react: "npm:^5.0.1"
-    tailwind-variants: "npm:^0.3.0"
-    tailwindcss: "npm:^3.4.14"
+    tailwind-variants: "npm:^0.3.1"
+    tailwindcss: "npm:^3.4.17"
     ts-essentials: "npm:^10.0.3"
     tsx: "npm:^4.15.7"
     typescript: "patch:typescript@npm%3A5.7.2#~/.yarn/patches/typescript-npm-5.7.2-b1f84a8b28.patch"
@@ -15692,7 +15692,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-variants@npm:^0.3.0":
+"tailwind-variants@npm:^0.3.1":
   version: 0.3.1
   resolution: "tailwind-variants@npm:0.3.1"
   dependencies:
@@ -15703,7 +15703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.4.14":
+"tailwindcss@npm:^3.4.17":
   version: 3.4.17
   resolution: "tailwindcss@npm:3.4.17"
   dependencies: