forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: rework fontsize classes with pixels to rem (#1116)
Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
authored by
Sybren W
Alex Savelyev
and committed by
GitHub
281877c0
a0ea7889
+34
-31
+5
-5
app/components/Compare/FacetSelector.vue
+5
-5
app/components/Compare/FacetSelector.vue
···
29
29
<div v-for="category in categoryOrder" :key="category">
30
30
<!-- Category header with all/none buttons -->
31
31
<div class="flex items-center gap-2 mb-2">
32
-
<span class="text-[10px] text-fg-subtle uppercase tracking-wider">
32
+
<span class="text-3xs text-fg-subtle uppercase tracking-wider">
33
33
{{ getCategoryLabel(category) }}
34
34
</span>
35
35
<button
36
36
type="button"
37
-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
37
+
class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
38
38
:class="
39
39
isCategoryAllSelected(category)
40
40
? 'text-fg-muted'
···
48
48
>
49
49
{{ $t('compare.facets.all') }}
50
50
</button>
51
-
<span class="text-[10px] text-fg-muted/40">/</span>
51
+
<span class="text-2xs text-fg-muted/40">/</span>
52
52
<button
53
53
type="button"
54
-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
54
+
class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
55
55
:class="
56
56
isCategoryNoneSelected(category)
57
57
? 'text-fg-muted'
···
94
94
aria-hidden="true"
95
95
/>
96
96
{{ facet.label }}
97
-
<span v-if="facet.comingSoon" class="text-[9px]"
97
+
<span v-if="facet.comingSoon" class="text-4xs"
98
98
>({{ $t('compare.facets.coming_soon') }})</span
99
99
>
100
100
</button>
+1
-1
app/components/DependencyPathPopup.vue
+1
-1
app/components/DependencyPathPopup.vue
···
68
68
<!-- Path badge button -->
69
69
<button
70
70
type="button"
71
-
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"
71
+
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"
72
72
:aria-expanded="isOpen"
73
73
@click.stop="togglePopup"
74
74
>
+1
-1
app/components/Header/AccountMenu.client.vue
+1
-1
app/components/Header/AccountMenu.client.vue
···
120
120
<!-- Operation count badge (when npm connected with pending ops) -->
121
121
<span
122
122
v-if="isNpmConnected && operationCount > 0"
123
-
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"
123
+
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"
124
124
:class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
125
125
aria-hidden="true"
126
126
>
+1
-1
app/components/Org/OperationsQueue.vue
+1
-1
app/components/Org/OperationsQueue.vue
···
321
321
<!-- Show error output for failed operations -->
322
322
<pre
323
323
v-if="op.status === 'failed' && op.result?.stderr"
324
-
class="mt-1 text-red-400/70 whitespace-pre-wrap text-[11px]"
324
+
class="mt-1 text-red-400/70 whitespace-pre-wrap text-2xs"
325
325
>{{ op.result.stderr }}</pre
326
326
>
327
327
</div>
+4
-7
app/components/Package/DownloadAnalytics.vue
+4
-7
app/components/Package/DownloadAnalytics.vue
···
1429
1429
</svg>
1430
1430
</div>
1431
1431
1432
-
<span class="text-[10px] uppercase tracking-wide text-[var(--fg)]/70 truncate">
1432
+
<span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
1433
1433
${label}
1434
1434
</span>
1435
1435
···
1476
1476
<div class="flex flex-col gap-1 sm:shrink-0">
1477
1477
<label
1478
1478
for="granularity"
1479
-
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
1479
+
class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
1480
1480
>
1481
1481
{{ $t('package.downloads.granularity') }}
1482
1482
</label>
···
1502
1502
<div class="flex flex-col gap-1">
1503
1503
<label
1504
1504
for="startDate"
1505
-
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
1505
+
class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
1506
1506
>
1507
1507
{{ $t('package.downloads.start_date') }}
1508
1508
</label>
···
1521
1521
</div>
1522
1522
1523
1523
<div class="flex flex-col gap-1">
1524
-
<label
1525
-
for="endDate"
1526
-
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
1527
-
>
1524
+
<label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
1528
1525
{{ $t('package.downloads.end_date') }}
1529
1526
</label>
1530
1527
<div
+11
-11
app/components/Package/Versions.vue
+11
-11
app/components/Package/Versions.vue
···
379
379
<span
380
380
v-for="tag in row.tags"
381
381
:key="tag"
382
-
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
382
+
class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
383
383
:title="tag"
384
384
>
385
385
{{ tag }}
···
431
431
<DateTime
432
432
v-if="v.time"
433
433
:datetime="v.time"
434
-
class="text-[10px] text-fg-subtle"
434
+
class="text-3xs text-fg-subtle"
435
435
year="numeric"
436
436
month="short"
437
437
day="numeric"
···
451
451
<span
452
452
v-for="tag in filterExcludedTags(v.tags, row.tags)"
453
453
:key="tag"
454
-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
454
+
class="text-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
455
455
:title="tag"
456
456
>
457
457
{{ tag }}
···
532
532
<DateTime
533
533
v-if="row.primaryVersion.time"
534
534
:datetime="row.primaryVersion.time"
535
-
class="text-[10px] text-fg-subtle"
535
+
class="text-3xs text-fg-subtle"
536
536
year="numeric"
537
537
month="short"
538
538
day="numeric"
···
543
543
<span
544
544
v-for="tag in row.tags"
545
545
:key="tag"
546
-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
546
+
class="text-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
547
547
:title="tag"
548
548
>
549
549
{{ tag }}
···
609
609
<DateTime
610
610
v-if="group.versions[0]?.time"
611
611
:datetime="group.versions[0]?.time"
612
-
class="text-[10px] text-fg-subtle"
612
+
class="text-3xs text-fg-subtle"
613
613
year="numeric"
614
614
month="short"
615
615
day="numeric"
···
629
629
<span
630
630
v-for="tag in group.versions[0].tags"
631
631
:key="tag"
632
-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
632
+
class="text-5xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
633
633
:title="tag"
634
634
>
635
635
{{ tag }}
···
670
670
<DateTime
671
671
v-if="group.versions[0]?.time"
672
672
:datetime="group.versions[0]?.time"
673
-
class="text-[10px] text-fg-subtle"
673
+
class="text-3xs text-fg-subtle"
674
674
year="numeric"
675
675
month="short"
676
676
day="numeric"
···
687
687
<span
688
688
v-for="tag in group.versions[0].tags"
689
689
:key="tag"
690
-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
690
+
class="text-5xs font-semibold text-fg-subtle uppercase tracking-wide"
691
691
>
692
692
{{ tag }}
693
693
</span>
···
720
720
<DateTime
721
721
v-if="v.time"
722
722
:datetime="v.time"
723
-
class="text-[10px] text-fg-subtle"
723
+
class="text-3xs text-fg-subtle"
724
724
year="numeric"
725
725
month="short"
726
726
day="numeric"
···
737
737
<span
738
738
v-for="tag in v.tags"
739
739
:key="tag"
740
-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
740
+
class="text-5xs font-semibold text-fg-subtle uppercase tracking-wide"
741
741
>
742
742
{{ tag }}
743
743
</span>
+1
-1
app/components/Package/VulnerabilityTree.vue
+1
-1
app/components/Package/VulnerabilityTree.vue
···
135
135
<span
136
136
v-for="s in SEVERITY_LEVELS.filter(s => pkg.counts[s] > 0)"
137
137
:key="s"
138
-
class="px-1.5 py-0.5 text-[10px] font-mono rounded border"
138
+
class="px-1.5 py-0.5 text-3xs font-mono rounded border"
139
139
:class="SEVERITY_COLORS[s]"
140
140
>
141
141
{{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}
+1
-1
app/components/VersionSelector.vue
+1
-1
app/components/VersionSelector.vue
+3
-3
app/pages/compare.vue
+3
-3
app/pages/compare.vue
···
169
169
</h2>
170
170
<button
171
171
type="button"
172
-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
172
+
class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
173
173
:class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
174
174
:disabled="isAllSelected"
175
175
:aria-label="$t('compare.facets.select_all')"
···
177
177
>
178
178
{{ $t('compare.facets.all') }}
179
179
</button>
180
-
<span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
180
+
<span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
181
181
<button
182
182
type="button"
183
-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
183
+
class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
184
184
:class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
185
185
:disabled="isNoneSelected"
186
186
:aria-label="$t('compare.facets.deselect_all')"
+6
uno.config.ts
+6
uno.config.ts
···
40
40
mono: "'Geist Mono', monospace",
41
41
sans: "'Geist', system-ui, -apple-system, sans-serif",
42
42
},
43
+
text: {
44
+
'2xs': { fontSize: '0.6875rem' }, // 11px
45
+
'3xs': { fontSize: '0.625rem' }, // 10px
46
+
'4xs': { fontSize: '0.5625rem' }, // 9px
47
+
'5xs': { fontSize: '0.5rem' }, // 8px
48
+
},
43
49
colors: {
44
50
// Minimal black & white palette with subtle grays
45
51
bg: {