chore: remove custom text tokens

Author: NamesMT

apps/frontend/app/components/chat/LanguageDropdown.vue

@@ -6,7 +6,7 @@ const { locale, locales, setLocale } = useI18n()
   <DropdownMenu :modal="true">
     <DropdownMenuTrigger>
       <Button
-        class="font-medium px-2 py-1 h-fit w-11.5 uppercase text-h4!"
+        class="font-medium px-2 py-1 h-fit w-11.5 uppercase text-xl!"
         variant="ghost"
       >
         {{ locale.substring(0, 2) }}

apps/frontend/app/components/layouts/default/DefaultHeader.vue

@@ -6,9 +6,9 @@ const convexVueContext = inject<ConvexVueContext>('convex-vue')
 </script>
 
 <template>
-  <header class="text-h4 grid grid-cols-12 h-73px items-center view-transition-header xl:gap-10">
+  <header class="text-xl grid grid-cols-12 h-73px items-center view-transition-header xl:gap-10">
     <div class="text-xl py-4 flex gap-2 col-span-3 h-full items-center justify-start">
-      <NuxtLink to="https://github.com/NamesMT/starter-monorepo" external target="_blank" class="text-h3 font-black flex gap-3 h-full items-center">
+      <NuxtLink to="https://github.com/NamesMT/starter-monorepo" external target="_blank" class="text-2xl font-black flex gap-3 h-full items-center">
         <Logo class="text-surface-900 h-full dark:text-surface-0" />
         <h1 class="whitespace-nowrap max-sm:hidden">
           starter-monorepo
@@ -23,20 +23,20 @@ const convexVueContext = inject<ConvexVueContext>('convex-vue')
         to="/" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.home.title') }}</span>
+        <span class="transition-all group-hover:text-2xl group-hover:text-accent-foreground">{{ $t('pages.home.title') }}</span>
       </NuxtLink>
       <NuxtLink
         to="/test" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.test.title') }}</span>
+        <span class="transition-all group-hover:text-2xl group-hover:text-accent-foreground">{{ $t('pages.test.title') }}</span>
       </NuxtLink>
       <NuxtLink
         v-if="convexVueContext?.clientRef?.value"
         to="/chat" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.chat.title') }}</span>
+        <span class="transition-all group-hover:text-2xl group-hover:text-accent-foreground">{{ $t('pages.chat.title') }}</span>
       </NuxtLink>
     </div>
 

apps/frontend/uno.config.ts

@@ -49,40 +49,40 @@ function commonColorVarsGen(varName: string, additionalVars?: Array<string>) {
 export default defineConfig({
   outputToCssLayers: true,
   theme: {
-    text: {
-      h1: {
-        fontSize: '40px',
-        lineHeight: '48px',
-      },
-      h2: {
-        fontSize: '32px',
-        lineHeight: '40px',
-      },
-      h3: {
-        fontSize: '24px',
-        lineHeight: '32px',
-      },
-      h4: {
-        fontSize: '20px',
-        lineHeight: '28px',
-      },
-      body1: {
-        fontSize: '18px',
-        lineHeight: '26px',
-      },
-      body2: {
-        fontSize: '16px',
-        lineHeight: '24px',
-      },
-      body3: {
-        fontSize: '14px',
-        lineHeight: '20px',
-      },
-      body4: {
-        fontSize: '12px',
-        lineHeight: '16px',
-      },
-    },
+    // text: {
+    //   h1: {
+    //     fontSize: '40px',
+    //     lineHeight: '48px',
+    //   },
+    //   h2: {
+    //     fontSize: '32px',
+    //     lineHeight: '40px',
+    //   },
+    //   h3: {
+    //     fontSize: '24px',
+    //     lineHeight: '32px',
+    //   },
+    //   h4: {
+    //     fontSize: '20px',
+    //     lineHeight: '28px',
+    //   },
+    //   body1: {
+    //     fontSize: '18px',
+    //     lineHeight: '26px',
+    //   },
+    //   body2: {
+    //     fontSize: '16px',
+    //     lineHeight: '24px',
+    //   },
+    //   body3: {
+    //     fontSize: '14px',
+    //     lineHeight: '20px',
+    //   },
+    //   body4: {
+    //     fontSize: '12px',
+    //     lineHeight: '16px',
+    //   },
+    // },
     ringWidth: {
       DEFAULT: '3px',
     },