feat: rework fontsize classes with pixels to rem

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-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :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 focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :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-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
         </button>

app/components/DependencyPathPopup.vue

@@ -68,7 +68,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-3xs 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"
     >

app/components/Header/AccountMenu.client.vue

@@ -120,7 +120,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-3xs rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >

app/components/Org/OperationsQueue.vue

@@ -321,7 +321,7 @@ watch(isExecuting, executing => {
             <!-- Show error output for failed operations -->
             <pre
               v-if="op.status === 'failed' && op.result?.stderr"
-              class="mt-1 text-red-400/70 whitespace-pre-wrap text-[11px]"
+              class="mt-1 text-red-400/70 whitespace-pre-wrap text-2xs"
               >{{ op.result.stderr }}</pre
             >
           </div>

app/components/Package/DownloadAnalytics.vue

@@ -1429,7 +1429,7 @@ const chartConfig = computed(() => {
                   </svg>
                 </div>
 
-                <span class="text-[10px] uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
                   ${label}
                 </span>
 
@@ -1476,7 +1476,7 @@ const chartConfig = 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-3xs font-mono text-fg-subtle tracking-wide uppercase"
           >
             {{ $t('package.downloads.granularity') }}
           </label>
@@ -1502,7 +1502,7 @@ const chartConfig = computed(() => {
           <div class="flex flex-col gap-1">
             <label
               for="startDate"
-              class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
+              class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
             >
               {{ $t('package.downloads.start_date') }}
             </label>
@@ -1521,10 +1521,7 @@ const chartConfig = 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-3xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.downloads.end_date') }}
             </label>
             <div

app/components/Package/Versions.vue

@@ -379,7 +379,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-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
                   :title="tag"
                 >
                   {{ tag }}
@@ -431,7 +431,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <DateTime
                   v-if="v.time"
                   :datetime="v.time"
-                  class="text-[10px] text-fg-subtle"
+                  class="text-3xs text-fg-subtle"
                   year="numeric"
                   month="short"
                   day="numeric"
@@ -451,7 +451,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-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                 :title="tag"
               >
                 {{ tag }}
@@ -532,7 +532,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <DateTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
-                  class="text-[10px] text-fg-subtle"
+                  class="text-3xs text-fg-subtle"
                   year="numeric"
                   month="short"
                   day="numeric"
@@ -543,7 +543,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-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                 :title="tag"
               >
                 {{ tag }}
@@ -609,7 +609,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-3xs text-fg-subtle"
                       year="numeric"
                       month="short"
                       day="numeric"
@@ -629,7 +629,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-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
                     :title="tag"
                   >
                     {{ tag }}
@@ -670,7 +670,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-3xs text-fg-subtle"
                       year="numeric"
                       month="short"
                       day="numeric"
@@ -687,7 +687,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-5xs font-semibold text-fg-subtle uppercase tracking-wide"
                   >
                     {{ tag }}
                   </span>
@@ -720,7 +720,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       <DateTime
                         v-if="v.time"
                         :datetime="v.time"
-                        class="text-[10px] text-fg-subtle"
+                        class="text-3xs text-fg-subtle"
                         year="numeric"
                         month="short"
                         day="numeric"
@@ -737,7 +737,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-5xs font-semibold text-fg-subtle uppercase tracking-wide"
                     >
                       {{ tag }}
                     </span>

app/components/Package/VulnerabilityTree.vue

@@ -135,7 +135,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-3xs font-mono rounded border"
                   :class="SEVERITY_COLORS[s]"
                 >
                   {{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}

app/components/VersionSelector.vue

@@ -604,7 +604,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-4xs px-1 py-0.5 rounded font-sans font-medium"
                     :class="
                       tag === 'latest'
                         ? 'bg-emerald-500/10 text-emerald-400'

app/pages/compare.vue

@@ -169,18 +169,18 @@ useSeoMeta({
           </h2>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+            class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
             @click="selectAll"
           >
             {{ $t('compare.facets.all') }}
           </button>
-          <span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
+          <span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+            class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"

uno.config.ts

@@ -40,6 +40,12 @@ export default defineConfig({
       mono: "'Geist Mono', monospace",
       sans: "'Geist', system-ui, -apple-system, sans-serif",
     },
+    text: {
+      '2xs': { fontSize: '0.6875rem' }, // 11px
+      '3xs': { fontSize: '0.625rem' }, // 10px
+      '4xs': { fontSize: '0.5625rem' }, // 9px
+      '5xs': { fontSize: '0.5rem' }, // 8px
+    },
     colors: {
       // Minimal black & white palette with subtle grays
       bg: {