From 84815b79b523a41e168029cf065a867182d4e863 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 23:41:57 +0000
Subject: [PATCH 1/5] feat: implement font size picker

---
 app/assets/font-sizes.css                  | 167 +++++++++++++++++++++
 app/components/Settings/TextSizePicker.vue |  38 +++++
 app/composables/useColors.ts               |   2 +-
 app/composables/useSettings.ts             |  33 +++-
 app/pages/index.vue                        |   2 +-
 app/pages/settings.vue                     |   8 +
 app/utils/prehydrate.ts                    |   6 +
 i18n/locales/en.json                       |  10 +-
 lunaria/files/en-US.json                   |  10 +-
 nuxt.config.ts                             |   2 +-
 shared/utils/constants.ts                  |   8 +
 uno.config.ts                              |  66 ++++++++
 12 files changed, 345 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/font-sizes.css
 create mode 100644 app/components/Settings/TextSizePicker.vue

diff --git a/app/assets/font-sizes.css b/app/assets/font-sizes.css
new file mode 100644
index 000000000..e4b24ebda
--- /dev/null
+++ b/app/assets/font-sizes.css
@@ -0,0 +1,167 @@
+:root {
+  --text-9xl-font-size: 8rem;
+  --text-9xl-line-height: 1;
+  --text-8xl-font-size: 6rem;
+  --text-8xl-line-height: 1;
+  --text-7xl-font-size: 4.5rem;
+  --text-7xl-line-height: 1;
+  --text-6xl-font-size: 4rem;
+  --text-6xl-line-height: 1;
+  --text-5xl-font-size: 3rem;
+  --text-5xl-line-height: 1;
+  --text-4xl-font-size: 2.25rem;
+  --text-4xl-line-height: 2.5rem;
+  --text-3xl-font-size: 1.875rem;
+  --text-3xl-line-height: 2.25rem;
+  --text-2xl-font-size: 1.5rem;
+  --text-2xl-line-height: 2rem;
+  --text-xl-font-size: 1.25rem;
+  --text-xl-line-height: 1.75rem;
+  --text-lg-font-size: 1.125rem;
+  --text-lg-line-height: 1.75rem;
+  --text-base-font-size: 1rem;
+  --text-base-line-height: 1.5rem;
+  --text-sm-font-size: 0.875rem;
+  --text-sm-line-height: 1.25rem;
+  --text-xs-font-size: 0.75rem;
+  --text-xs-line-height: 1rem;
+  --text-2xs-font-size: 0.6875rem;
+  --text-2xs-line-height: 0.875rem;
+  --text-3xs-font-size: 0.625rem;
+  --text-3xs-line-height: 0.75rem;
+  --text-4xs-font-size: 0.5rem;
+  --text-4xs-line-height: 0.625rem;
+}
+
+html[data-text-size='largest'] {
+  --text-7xl-font-size: 6rem;
+  --text-7xl-line-height: 1;
+  --text-6xl-font-size: 6rem;
+  --text-6xl-line-height: 1;
+  --text-5xl-font-size: 4.5rem;
+  --text-5xl-line-height: 1;
+  --text-4xl-font-size: 4rem;
+  --text-4xl-line-height: 1;
+  --text-3xl-font-size: 3rem;
+  --text-3xl-line-height: 1;
+  --text-2xl-font-size: 2.25rem;
+  --text-2xl-line-height: 2.5rem;
+  --text-xl-font-size: 1.875rem;
+  --text-xl-line-height: 2.25rem;
+  --text-lg-font-size: 1.5rem;
+  --text-lg-line-height: 2rem;
+  --text-base-font-size: 1.25rem;
+  --text-base-line-height: 1.75rem;
+  --text-sm-font-size: 1.125rem;
+  --text-sm-line-height: 1.75rem;
+  --text-xs-font-size: 1rem;
+  --text-xs-line-height: 1.5rem;
+  --text-2xs-font-size: 0.875rem;
+  --text-2xs-line-height: 1.25rem;
+  --text-3xs-font-size: 0.75rem;
+  --text-3xs-line-height: 1rem;
+  --text-4xs-font-size: 0.6875rem;
+  --text-4xs-line-height: 0.875rem;
+}
+
+html[data-text-size='large'] {
+  --text-7xl-font-size: 6rem;
+  --text-7xl-line-height: 1;
+  --text-6xl-font-size: 4.5rem;
+  --text-6xl-line-height: 1;
+  --text-5xl-font-size: 4rem;
+  --text-5xl-line-height: 1;
+  --text-4xl-font-size: 3rem;
+  --text-4xl-line-height: 1;
+  --text-3xl-font-size: 2.25rem;
+  --text-3xl-line-height: 2.5rem;
+  --text-2xl-font-size: 1.875rem;
+  --text-2xl-line-height: 2.25rem;
+  --text-xl-font-size: 1.5rem;
+  --text-xl-line-height: 2rem;
+  --text-lg-font-size: 1.25rem;
+  --text-lg-line-height: 1.75rem;
+  --text-base-font-size: 1.125rem;
+  --text-base-line-height: 1.75rem;
+  --text-sm-font-size: 1rem;
+  --text-sm-line-height: 1.5rem;
+  --text-xs-font-size: 0.875rem;
+  --text-xs-line-height: 1.25rem;
+  --text-2xs-font-size: 0.75rem;
+  --text-2xs-line-height: 1rem;
+  --text-3xs-font-size: 0.6875rem;
+  --text-3xs-line-height: 0.875rem;
+  --text-4xs-font-size: 0.625rem;
+  --text-4xs-line-height: 0.75rem;
+}
+
+html[data-text-size='small'] {
+  --text-9xl-font-size: 6rem;
+  --text-9xl-line-height: 1;
+  --text-8xl-font-size: 4.5rem;
+  --text-8xl-line-height: 1;
+  --text-7xl-font-size: 4rem;
+  --text-7xl-line-height: 1;
+  --text-6xl-font-size: 3rem;
+  --text-6xl-line-height: 1;
+  --text-5xl-font-size: 2.25rem;
+  --text-5xl-line-height: 1;
+  --text-4xl-font-size: 1.875rem;
+  --text-4xl-line-height: 2.25rem;
+  --text-3xl-font-size: 1.5rem;
+  --text-3xl-line-height: 2rem;
+  --text-2xl-font-size: 1.25rem;
+  --text-2xl-line-height: 1.75rem;
+  --text-xl-font-size: 1.125rem;
+  --text-xl-line-height: 1.75rem;
+  --text-lg-font-size: 1rem;
+  --text-lg-line-height: 1.5rem;
+  --text-base-font-size: 0.875rem;
+  --text-base-line-height: 1.25rem;
+  --text-sm-font-size: 0.75rem;
+  --text-sm-line-height: 1rem;
+  --text-xs-font-size: 0.6875rem;
+  --text-xs-line-height: 0.875rem;
+  --text-2xs-font-size: 0.625rem;
+  --text-2xs-line-height: 0.75rem;
+  --text-3xs-font-size: 0.5rem;
+  --text-3xs-line-height: 0.625rem;
+}
+
+html[data-text-size='smallest'] {
+  --text-9xl-font-size: 4.5rem;
+  --text-9xl-line-height: 1;
+  --text-8xl-font-size: 4rem;
+  --text-8xl-line-height: 1;
+  --text-7xl-font-size: 3rem;
+  --text-7xl-line-height: 1;
+  --text-6xl-font-size: 2.25rem;
+  --text-6xl-line-height: 1;
+  --text-5xl-font-size: 1.875rem;
+  --text-5xl-line-height: 2.25rem;
+  --text-4xl-font-size: 1.5rem;
+  --text-4xl-line-height: 2rem;
+  --text-3xl-font-size: 1.25rem;
+  --text-3xl-line-height: 1.75rem;
+  --text-2xl-font-size: 1.125rem;
+  --text-2xl-line-height: 1.75rem;
+  --text-xl-font-size: 1rem;
+  --text-xl-line-height: 1.5rem;
+  --text-lg-font-size: 0.875rem;
+  --text-lg-line-height: 1.25rem;
+  --text-base-font-size: 0.75rem;
+  --text-base-line-height: 1rem;
+  --text-sm-font-size: 0.6875rem;
+  --text-sm-line-height: 0.875rem;
+  --text-xs-font-size: 0.625rem;
+  --text-xs-line-height: 0.75rem;
+  --text-2xs-font-size: 0.5625rem;
+  --text-2xs-line-height: 0.625rem;
+  --text-3xs-font-size: 0.5rem;
+  --text-3xs-line-height: 0.625rem;
+}
+
+body {
+  font-size: var(--text-base-font-size);
+  line-height: var(--text-base-line-height);
+}
diff --git a/app/components/Settings/TextSizePicker.vue b/app/components/Settings/TextSizePicker.vue
new file mode 100644
index 000000000..916525088
--- /dev/null
+++ b/app/components/Settings/TextSizePicker.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { textSizes, selectedTextSize, setTextSize } = useTextSize()
+
+onPrehydrate(el => {
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+
+  const id = settings.preferredTextSize
+  if (id) {
+    const input = el.querySelector<HTMLInputElement>(`input[value="${id || 'normal'}"]`)
+    if (input) {
+      input.checked = true
+    }
+  }
+})
+</script>
+
+<template>
+  <fieldset class="flex items-center gap-1 rounded-md border border-border p-1 w-fit">
+    <legend class="sr-only">{{ $t('settings.text_size') }}</legend>
+    <label
+      v-for="textSize in textSizes"
+      :key="textSize.id"
+      class="rounded-xs px-2 bg-bg-subtle border border-border-subtle transition-transform duration-150 motion-safe:hover:bg-bg-elevated cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      :style="{ backgroundColor: textSize.value }"
+    >
+      <input
+        type="radio"
+        name="text-size"
+        class="sr-only"
+        :value="textSize.id"
+        :checked="selectedTextSize === textSize.id"
+        :aria-label="textSize.name"
+        @change="setTextSize(textSize.id)"
+      />
+      <span>{{ $t(`settings.text_sizes.${textSize.id}`) }}</span>
+    </label>
+  </fieldset>
+</template>
diff --git a/app/composables/useColors.ts b/app/composables/useColors.ts
index 3b66e25fd..7dd9ec738 100644
--- a/app/composables/useColors.ts
+++ b/app/composables/useColors.ts
@@ -81,7 +81,7 @@ export function useCssVariables(
   if (options.watchHtmlAttributes && isClientSupported.value) {
     useMutationObserver(document.documentElement, () => void colors.value, {
       attributes: true,
-      attributeFilter: ['class', 'style', 'data-theme', 'data-bg-theme'],
+      attributeFilter: ['class', 'style', 'data-theme', 'data-bg-theme', 'data-text-size'],
     })
   }
 
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index b0c2f6ff6..2d2cec610 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -1,13 +1,14 @@
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
-import { ACCENT_COLORS } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
-import { BACKGROUND_THEMES } from '#shared/utils/constants'
+import { ACCENT_COLORS, BACKGROUND_THEMES, TEXT_SIZES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
 type AccentColorId = keyof typeof ACCENT_COLORS
 
+type TextSizeId = keyof typeof TEXT_SIZES
+
 /**
  * Application settings stored in localStorage
  */
@@ -20,6 +21,8 @@ export interface AppSettings {
   accentColorId: AccentColorId | null
   /** Preferred background shade */
   preferredBackgroundTheme: BackgroundThemeId | null
+  /** Preferred text size */
+  preferredTextSize: TextSizeId | null
   /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
   hidePlatformPackages: boolean
   /** User-selected locale */
@@ -36,6 +39,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   hidePlatformPackages: true,
   selectedLocale: null,
   preferredBackgroundTheme: null,
+  preferredTextSize: null,
   sidebar: {
     collapsed: [],
   },
@@ -124,3 +128,28 @@ export function useBackgroundTheme() {
     setBackgroundTheme,
   }
 }
+
+export function useTextSize() {
+  const textSizes = Object.entries(TEXT_SIZES).map(([id, value]) => ({
+    id: id as TextSizeId,
+    name: id,
+    value,
+  }))
+
+  const { settings } = useSettings()
+
+  function setTextSize(id: TextSizeId | null) {
+    if (id) {
+      document.documentElement.dataset.textSize = id
+    } else {
+      document.documentElement.removeAttribute('data-text-size')
+    }
+    settings.value.preferredTextSize = id
+  }
+
+  return {
+    textSizes,
+    selectedTextSize: computed(() => settings.value.preferredTextSize),
+    setTextSize,
+  }
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9bf506981..4b347ab23 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -66,7 +66,7 @@ defineOgImageComponent('Default', {
         </h1>
 
         <p
-          class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          class="text-fg-muted text-7xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.1s"
         >
           {{ $t('tagline') }}
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 38bba087b..52d1b9c41 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -105,6 +105,14 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               </span>
               <SettingsBgThemePicker />
             </div>
+
+            <!-- Text sizes -->
+            <div class="space-y-3">
+              <span class="block text-sm text-fg font-medium">
+                {{ $t('settings.text_size') }}
+              </span>
+              <SettingsTextSizePicker />
+            </div>
           </div>
         </section>
 
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index 562ef40b7..dd73461bb 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -41,6 +41,12 @@ export function initPreferencesOnPrehydrate() {
       document.documentElement.dataset.bgTheme = preferredBackgroundTheme
     }
 
+    // Apply text size
+    const preferredTextSize = settings.preferredTextSize
+    if (preferredTextSize) {
+      document.documentElement.dataset.textSize = preferredTextSize
+    }
+
     // Read and apply package manager preference
     const storedPM = localStorage.getItem('npmx-pm')
     // Parse the stored value (it's stored as a JSON string by useLocalStorage)
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 29826daab..410f2e4b5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -78,7 +78,15 @@
     "accent_colors": "Accent colors",
     "clear_accent": "Clear accent color",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade"
+    "background_themes": "Background shade",
+    "text_size": "Text size",
+    "text_sizes": {
+      "largest": "Largest",
+      "large": "Larger",
+      "normal": "Normal",
+      "small": "Smaller",
+      "smallest": "Smallest"
+    }
   },
   "i18n": {
     "missing_keys": "{count} missing translation | {count} missing translations",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 29826daab..410f2e4b5 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -78,7 +78,15 @@
     "accent_colors": "Accent colors",
     "clear_accent": "Clear accent color",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade"
+    "background_themes": "Background shade",
+    "text_size": "Text size",
+    "text_sizes": {
+      "largest": "Largest",
+      "large": "Larger",
+      "normal": "Normal",
+      "small": "Smaller",
+      "smallest": "Smallest"
+    }
   },
   "i18n": {
     "missing_keys": "{count} missing translation | {count} missing translations",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8ba28e7b4..282f3066c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     storageKey: 'npmx-color-mode',
   },
 
-  css: ['~/assets/main.css', 'vue-data-ui/style.css'],
+  css: ['~/assets/main.css', '~/assets/font-sizes.css', 'vue-data-ui/style.css'],
 
   $production: {
     debug: {
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index 582383508..f0930db98 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -47,3 +47,11 @@ export const BACKGROUND_THEMES = {
   slate: 'oklch(0.555 0.046 257.407)',
   black: 'oklch(0.4 0 0)',
 } as const
+
+export const TEXT_SIZES = {
+  smallest: 'smallest',
+  small: 'small',
+  normal: 'normal',
+  large: 'large',
+  largest: 'largest',
+} as const
diff --git a/uno.config.ts b/uno.config.ts
index 3e3c38e92..5f448b662 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -39,6 +39,72 @@ export default defineConfig({
       mono: "'Geist Mono', monospace",
       sans: "'Geist', system-ui, -apple-system, sans-serif",
     },
+    text: {
+      '9xl': {
+        fontSize: 'var(--text-9xl-font-size)',
+        lineHeight: 'var(--text-9xl-line-height)',
+      },
+      '8xl': {
+        fontSize: 'var(--text-8xl-font-size)',
+        lineHeight: 'var(--text-8xl-line-height)',
+      },
+      '7xl': {
+        fontSize: 'var(--text-7xl-font-size)',
+        lineHeight: 'var(--text-7xl-line-height)',
+      },
+      '6xl': {
+        fontSize: 'var(--text-6xl-font-size)',
+        lineHeight: 'var(--text-6xl-line-height)',
+      },
+      '5xl': {
+        fontSize: 'var(--text-5xl-font-size)',
+        lineHeight: 'var(--text-5xl-line-height)',
+      },
+      '4xl': {
+        fontSize: 'var(--text-4xl-font-size)',
+        lineHeight: 'var(--text-4xl-line-height)',
+      },
+      '3xl': {
+        fontSize: 'var(--text-3xl-font-size)',
+        lineHeight: 'var(--text-3xl-line-height)',
+      },
+      '2xl': {
+        fontSize: 'var(--text-2xl-font-size)',
+        lineHeight: 'var(--text-2xl-line-height)',
+      },
+      'xl': {
+        fontSize: 'var(--text-xl-font-size)',
+        lineHeight: 'var(--text-xl-line-height)',
+      },
+      'lg': {
+        fontSize: 'var(--text-lg-font-size)',
+        lineHeight: 'var(--text-lg-line-height)',
+      },
+      'base': {
+        fontSize: 'var(--text-base-font-size)',
+        lineHeight: 'var(--text-base-line-height)',
+      },
+      'sm': {
+        fontSize: 'var(--text-sm-font-size)',
+        lineHeight: 'var(--text-sm-line-height)',
+      },
+      'xs': {
+        fontSize: 'var(--text-xs-font-size)',
+        lineHeight: 'var(--text-xs-line-height)',
+      },
+      '2xs': {
+        fontSize: 'var(--text-2xs-font-size)',
+        lineHeight: 'var(--text-2xs-line-height)',
+      },
+      '3xs': {
+        fontSize: 'var(--text-3xs-font-size)',
+        lineHeight: 'var(--text-3xs-line-height)',
+      },
+      '4xs': {
+        fontSize: 'var(--text-4xs-font-size)',
+        lineHeight: 'var(--text-4xs-line-height)',
+      },
+    },
     colors: {
       // Minimal black & white palette with subtle grays
       bg: {

From e5a2df79bc6eb9bd204b286ee68947ad510b435a Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 23:57:22 +0000
Subject: [PATCH 2/5] feat: use font-size variables instead of fixed values

---
 app/app.vue                                  |  3 +-
 app/assets/main.css                          |  6 ++--
 app/components/Code/Viewer.vue               |  3 +-
 app/components/DependencyPathPopup.vue       |  2 +-
 app/components/Header/AccountMenu.client.vue |  2 +-
 app/components/Package/Dependencies.vue      |  2 +-
 app/components/Package/DownloadAnalytics.vue |  9 ++----
 app/components/Package/Versions.vue          | 22 +++++++-------
 app/components/Package/VulnerabilityTree.vue |  2 +-
 app/components/Readme.vue                    | 32 ++++++++++++++------
 app/components/VersionSelector.vue           |  2 +-
 app/components/compare/FacetSelector.vue     | 10 +++---
 app/pages/compare.vue                        |  6 ++--
 13 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 1e2fc1af2..07a71312d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -139,7 +139,8 @@ if (import.meta.client) {
   padding: 0.5rem 1rem;
   background: var(--fg);
   color: var(--bg);
-  font-size: 0.875rem;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
   z-index: 100;
   transition: top 0.2s ease;
 }
diff --git a/app/assets/main.css b/app/assets/main.css
index 85e8802a2..4b5f58772 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -270,7 +270,8 @@ html.light .shiki span {
 p > span > code,
 .line-clamp-2 code {
   @apply font-mono;
-  font-size: 0.85em;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
   background: var(--bg-muted);
   padding: 0.1em 0.3em;
   border-radius: 3px;
@@ -292,7 +293,8 @@ input[type='search'] {
   input,
   select,
   textarea {
-    font-size: 16px !important;
+    font-size: var(--text-base-font-size) !important;
+    line-height: var(--text-base-line-height) !important;
   }
 }
 
diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
index fb6b2a571..b696d5a8d 100644
--- a/app/components/Code/Viewer.vue
+++ b/app/components/Code/Viewer.vue
@@ -90,7 +90,8 @@ watch(
 
 <style scoped>
 .code-viewer {
-  font-size: 14px;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
 }
 
 .line-numbers {
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
index a0f2c7c7a..46ab0e037 100644
--- a/app/components/DependencyPathPopup.vue
+++ b/app/components/DependencyPathPopup.vue
@@ -62,7 +62,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-2xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index d2fd65476..c847a491f 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -110,7 +110,7 @@ function openAuthModal() {
       <!-- Operation count badge (when npm connected with pending ops) -->
       <span
         v-if="isNpmConnected && operationCount > 0"
-        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-2xs rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 7014b9570..43dc872dc 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -187,7 +187,7 @@ const sortedOptionalDependencies = computed(() => {
             </NuxtLink>
             <span
               v-if="peer.optional"
-              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
+              class="px-1 py-0.5 font-mono text-2xs text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
               :title="$t('package.dependencies.optional')"
             >
               {{ $t('package.dependencies.optional') }}
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 41d34df65..772dc3a96 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -632,7 +632,7 @@ const config = computed(() => {
         <div class="flex flex-col gap-1 sm:shrink-0">
           <label
             for="granularity"
-            class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
+            class="text-2xs font-mono text-fg-subtle tracking-wide uppercase"
           >
             {{ $t('package.downloads.granularity') }}
           </label>
@@ -658,7 +658,7 @@ const config = computed(() => {
           <div class="flex flex-col gap-1">
             <label
               for="startDate"
-              class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
+              class="text-2xs font-mono text-fg-subtle tracking-wide uppercase"
             >
               {{ $t('package.downloads.start_date') }}
             </label>
@@ -676,10 +676,7 @@ const config = computed(() => {
           </div>
 
           <div class="flex flex-col gap-1">
-            <label
-              for="endDate"
-              class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
-            >
+            <label for="endDate" class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.downloads.end_date') }}
             </label>
             <div
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 17c58e96f..d4ebdcac4 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -376,7 +376,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <span
                   v-for="tag in row.tags"
                   :key="tag"
-                  class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  class="text-3xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
                   :title="tag"
                 >
                   {{ tag }}
@@ -434,7 +434,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <DateTime
                   v-if="v.time"
                   :datetime="v.time"
-                  class="text-[10px] text-fg-subtle"
+                  class="text-2xs text-fg-subtle"
                   year="numeric"
                   month="short"
                   day="numeric"
@@ -454,7 +454,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <span
                 v-for="tag in filterExcludedTags(v.tags, row.tags)"
                 :key="tag"
-                class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                 :title="tag"
               >
                 {{ tag }}
@@ -539,7 +539,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <DateTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
-                  class="text-[10px] text-fg-subtle"
+                  class="text-2xs text-fg-subtle"
                   year="numeric"
                   month="short"
                   day="numeric"
@@ -550,7 +550,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <span
                 v-for="tag in row.tags"
                 :key="tag"
-                class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                 :title="tag"
               >
                 {{ tag }}
@@ -616,7 +616,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
-                      class="text-[10px] text-fg-subtle"
+                      class="text-2xs text-fg-subtle"
                       year="numeric"
                       month="short"
                       day="numeric"
@@ -636,7 +636,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
-                    class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                    class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                     :title="tag"
                   >
                     {{ tag }}
@@ -677,7 +677,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
-                      class="text-[10px] text-fg-subtle"
+                      class="text-2xs text-fg-subtle"
                       year="numeric"
                       month="short"
                       day="numeric"
@@ -694,7 +694,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
-                    class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                    class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide"
                   >
                     {{ tag }}
                   </span>
@@ -733,7 +733,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       <DateTime
                         v-if="v.time"
                         :datetime="v.time"
-                        class="text-[10px] text-fg-subtle"
+                        class="text-2xs text-fg-subtle"
                         year="numeric"
                         month="short"
                         day="numeric"
@@ -750,7 +750,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <span
                       v-for="tag in v.tags"
                       :key="tag"
-                      class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                      class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide"
                     >
                       {{ tag }}
                     </span>
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 0b5b2a429..66dac0d3c 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -127,7 +127,7 @@ function getDepthStyle(depth: string | undefined) {
                 <span
                   v-for="s in SEVERITY_LEVELS.filter(s => pkg.counts[s] > 0)"
                   :key="s"
-                  class="px-1.5 py-0.5 text-[10px] font-mono rounded border"
+                  class="px-1.5 py-0.5 text-2xs font-mono rounded border"
                   :class="SEVERITY_COLORS[s]"
                 >
                   {{ pkg.counts[s] }} {{ $t(`package.vulnerabilities.severity.${s}`) }}
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index efd400288..69ff97433 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -99,24 +99,32 @@ function handleClick(event: MouseEvent) {
 
 /* Visual styling based on original README heading level */
 .readme :deep([data-level='1']) {
-  font-size: 1.5rem;
+  font-size: var(--text-2xl-font-size);
+  line-height: var(--text-2xl-line-height);
 }
 .readme :deep([data-level='2']) {
-  font-size: 1.25rem;
+  font-size: var(--text-xl-font-size);
+  line-height: var(--text-xl-line-height);
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--border);
 }
 .readme :deep([data-level='3']) {
-  font-size: 1.125rem;
+  font-size: var(--text-lg-font-size);
+  line-height: var(--text-lg-line-height);
 }
 .readme :deep([data-level='4']) {
-  font-size: 1rem;
+  font-size: var(--text-base-font-size);
+  line-height: var(--text-base-line-height);
 }
 .readme :deep([data-level='5']) {
-  font-size: 0.925rem;
+  font-size: var(--text-base-font-size);
+  line-height: var(--text-base-line-height);
+  font-weight: 500;
 }
 .readme :deep([data-level='6']) {
-  font-size: 0.875rem;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
+  font-weight: 500;
 }
 
 .readme :deep(p) {
@@ -137,7 +145,8 @@ function handleClick(event: MouseEvent) {
 
 .readme :deep(code) {
   @apply font-mono;
-  font-size: 0.875em;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
   background: var(--bg-muted);
   padding: 0.2em 0.4em;
   border-radius: 4px;
@@ -247,7 +256,8 @@ function handleClick(event: MouseEvent) {
   border: none;
   padding: 0;
   @apply font-mono;
-  font-size: 0.875rem;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
   color: var(--fg);
   /* Prevent code from forcing width */
   white-space: pre;
@@ -303,7 +313,8 @@ function handleClick(event: MouseEvent) {
 .readme :deep(blockquote[data-callout]::before) {
   display: block;
   @apply font-mono;
-  font-size: 0.75rem;
+  font-size: var(--text-xs-font-size);
+  line-height: var(--text-xs-line-height);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -409,7 +420,8 @@ function handleClick(event: MouseEvent) {
   overflow-x: auto;
   border-collapse: collapse;
   margin: 1.5rem 0;
-  font-size: 0.875rem;
+  font-size: var(--text-sm-font-size);
+  line-height: var(--text-sm-line-height);
   word-break: keep-all;
 }
 
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index 0ea96652f..bd8013a22 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -602,7 +602,7 @@ watch(
                   <span
                     v-for="tag in v.tags"
                     :key="tag"
-                    class="text-[9px] px-1 py-0.5 rounded font-sans font-medium"
+                    class="text-3xs px-1 py-0.5 rounded font-sans font-medium"
                     :class="
                       tag === 'latest'
                         ? 'bg-emerald-500/10 text-emerald-400'
diff --git a/app/components/compare/FacetSelector.vue b/app/components/compare/FacetSelector.vue
index 40b1838a7..c2a9cf9b5 100644
--- a/app/components/compare/FacetSelector.vue
+++ b/app/components/compare/FacetSelector.vue
@@ -29,12 +29,12 @@ function isCategoryNoneSelected(category: string): boolean {
     <div v-for="category in categoryOrder" :key="category">
       <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-[10px] text-fg-subtle uppercase tracking-wider">
+        <span class="text-2xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-2xs transition-colors focus-visible:outline-none focus-visible:underline"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -48,10 +48,10 @@ function isCategoryNoneSelected(category: string): boolean {
         >
           {{ $t('compare.facets.all') }}
         </button>
-        <span class="text-[10px] text-fg-muted/40">/</span>
+        <span class="text-2xs text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-2xs transition-colors focus-visible:outline-none focus-visible:underline"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
@@ -94,7 +94,7 @@ function isCategoryNoneSelected(category: string): boolean {
             aria-hidden="true"
           />
           {{ facet.label }}
-          <span v-if="facet.comingSoon" class="text-[9px]"
+          <span v-if="facet.comingSoon" class="text-3xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
         </button>
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 0ac2a2e78..8ce0c8387 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -85,7 +85,7 @@ useSeoMeta({
           </h2>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-2xs transition-colors focus-visible:outline-none focus-visible:underline"
             :class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
@@ -93,10 +93,10 @@ useSeoMeta({
           >
             {{ $t('compare.facets.all') }}
           </button>
-          <span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
+          <span class="text-2xs text-fg-muted/40" aria-hidden="true">/</span>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-2xs transition-colors focus-visible:outline-none focus-visible:underline"
             :class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"

From a8de08daf01c029a9caf8f3e2238280b690a467a Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Tue, 3 Feb 2026 00:08:45 +0000
Subject: [PATCH 3/5] feat: restore tagline size

---
 app/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b347ab23..9bf506981 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -66,7 +66,7 @@ defineOgImageComponent('Default', {
         </h1>
 
         <p
-          class="text-fg-muted text-7xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.1s"
         >
           {{ $t('tagline') }}

From b60ee9a519fa94a3b6a1c5b8d2081ab72eed8d74 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Tue, 3 Feb 2026 09:09:22 +0000
Subject: [PATCH 4/5] feat: use select for text-size-picker

---
 app/components/Settings/TextSizePicker.vue | 29 +++++++++-------------
 app/composables/useSettings.ts             |  6 ++---
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/app/components/Settings/TextSizePicker.vue b/app/components/Settings/TextSizePicker.vue
index 916525088..55ba253a2 100644
--- a/app/components/Settings/TextSizePicker.vue
+++ b/app/components/Settings/TextSizePicker.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { TextSizeId } from '~/composables/useSettings'
+
 const { textSizes, selectedTextSize, setTextSize } = useTextSize()
 
 onPrehydrate(el => {
@@ -15,24 +17,17 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset class="flex items-center gap-1 rounded-md border border-border p-1 w-fit">
+  <fieldset>
     <legend class="sr-only">{{ $t('settings.text_size') }}</legend>
-    <label
-      v-for="textSize in textSizes"
-      :key="textSize.id"
-      class="rounded-xs px-2 bg-bg-subtle border border-border-subtle transition-transform duration-150 motion-safe:hover:bg-bg-elevated cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
-      :style="{ backgroundColor: textSize.value }"
+    <select
+      id="text-size-select"
+      :value="selectedTextSize"
+      class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+      @change="setTextSize(($event.target as HTMLSelectElement).value as TextSizeId)"
     >
-      <input
-        type="radio"
-        name="text-size"
-        class="sr-only"
-        :value="textSize.id"
-        :checked="selectedTextSize === textSize.id"
-        :aria-label="textSize.name"
-        @change="setTextSize(textSize.id)"
-      />
-      <span>{{ $t(`settings.text_sizes.${textSize.id}`) }}</span>
-    </label>
+      <option v-for="textSize in textSizes" :key="textSize.id" :value="textSize.id">
+        {{ $t(`settings.text_sizes.${textSize.id}`) }}
+      </option>
+    </select>
   </fieldset>
 </template>
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 2d2cec610..ddb60d260 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -3,11 +3,11 @@ import { useLocalStorage } from '@vueuse/core'
 import type { LocaleObject } from '@nuxtjs/i18n'
 import { ACCENT_COLORS, BACKGROUND_THEMES, TEXT_SIZES } from '#shared/utils/constants'
 
-type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
+export type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
-type AccentColorId = keyof typeof ACCENT_COLORS
+export type AccentColorId = keyof typeof ACCENT_COLORS
 
-type TextSizeId = keyof typeof TEXT_SIZES
+export type TextSizeId = keyof typeof TEXT_SIZES
 
 /**
  * Application settings stored in localStorage

From 1d14a8b861b5ecbab44ffabca70026edcbd89d78 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Tue, 3 Feb 2026 10:20:27 +0000
Subject: [PATCH 5/5] feat: add label for text-size select

---
 app/components/Settings/TextSizePicker.vue | 8 +++++---
 app/pages/settings.vue                     | 7 +------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/components/Settings/TextSizePicker.vue b/app/components/Settings/TextSizePicker.vue
index 55ba253a2..bb6246916 100644
--- a/app/components/Settings/TextSizePicker.vue
+++ b/app/components/Settings/TextSizePicker.vue
@@ -17,8 +17,10 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset>
-    <legend class="sr-only">{{ $t('settings.text_size') }}</legend>
+  <div class="space-y-3">
+    <label for="text-size-select" class="block text-sm text-fg font-medium">
+      {{ $t('settings.text_size') }}
+    </label>
     <select
       id="text-size-select"
       :value="selectedTextSize"
@@ -29,5 +31,5 @@ onPrehydrate(el => {
         {{ $t(`settings.text_sizes.${textSize.id}`) }}
       </option>
     </select>
-  </fieldset>
+  </div>
 </template>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 52d1b9c41..0d4219464 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -107,12 +107,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             </div>
 
             <!-- Text sizes -->
-            <div class="space-y-3">
-              <span class="block text-sm text-fg font-medium">
-                {{ $t('settings.text_size') }}
-              </span>
-              <SettingsTextSizePicker />
-            </div>
+            <SettingsTextSizePicker />
           </div>
         </section>