Skip to content

Commit 281877c

Browse files
carwackalexdln
carwack
and
alexdln
authored
feat: rework fontsize classes with pixels to rem (#1116)
Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
1 parent a0ea788 commit 281877c

File tree

10 files changed

+34
-31
lines changed

10 files changed

+34
-31
lines changed

‎app/components/Compare/FacetSelector.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ function isCategoryNoneSelected(category: string): boolean {
2929
<div v-for="category in categoryOrder" :key="category">
3030
<!-- Category header with all/none buttons -->
3131
<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">
3333
{{ getCategoryLabel(category) }}
3434
</span>
3535
<button
3636
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"
3838
:class="
3939
isCategoryAllSelected(category)
4040
? 'text-fg-muted'
@@ -48,10 +48,10 @@ function isCategoryNoneSelected(category: string): boolean {
4848
>
4949
{{ $t('compare.facets.all') }}
5050
</button>
51-
<span class="text-[10px] text-fg-muted/40">/</span>
51+
<span class="text-2xs text-fg-muted/40">/</span>
5252
<button
5353
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"
5555
:class="
5656
isCategoryNoneSelected(category)
5757
? 'text-fg-muted'
@@ -94,7 +94,7 @@ function isCategoryNoneSelected(category: string): boolean {
9494
aria-hidden="true"
9595
/>
9696
{{ facet.label }}
97-
<span v-if="facet.comingSoon" class="text-[9px]"
97+
<span v-if="facet.comingSoon" class="text-4xs"
9898
>({{ $t('compare.facets.coming_soon') }})</span
9999
>
100100
</button>

‎app/components/DependencyPathPopup.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
6868
<!-- Path badge button -->
6969
<button
7070
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"
7272
:aria-expanded="isOpen"
7373
@click.stop="togglePopup"
7474
>

‎app/components/Header/AccountMenu.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ function openAuthModal() {
120120
<!-- Operation count badge (when npm connected with pending ops) -->
121121
<span
122122
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"
124124
:class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
125125
aria-hidden="true"
126126
>

‎app/components/Org/OperationsQueue.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ watch(isExecuting, executing => {
321321
<!-- Show error output for failed operations -->
322322
<pre
323323
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"
325325
>{{ op.result.stderr }}</pre
326326
>
327327
</div>

‎app/components/Package/DownloadAnalytics.vue‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1429,7 +1429,7 @@ const chartConfig = computed(() => {
14291429
</svg>
14301430
</div>
14311431
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">
14331433
${label}
14341434
</span>
14351435
@@ -1476,7 +1476,7 @@ const chartConfig = computed(() => {
14761476
<div class="flex flex-col gap-1 sm:shrink-0">
14771477
<label
14781478
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"
14801480
>
14811481
{{ $t('package.downloads.granularity') }}
14821482
</label>
@@ -1502,7 +1502,7 @@ const chartConfig = computed(() => {
15021502
<div class="flex flex-col gap-1">
15031503
<label
15041504
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"
15061506
>
15071507
{{ $t('package.downloads.start_date') }}
15081508
</label>
@@ -1521,10 +1521,7 @@ const chartConfig = computed(() => {
15211521
</div>
15221522

15231523
<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">
15281525
{{ $t('package.downloads.end_date') }}
15291526
</label>
15301527
<div

‎app/components/Package/Versions.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
379379
<span
380380
v-for="tag in row.tags"
381381
: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]"
383383
:title="tag"
384384
>
385385
{{ tag }}
@@ -431,7 +431,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
431431
<DateTime
432432
v-if="v.time"
433433
:datetime="v.time"
434-
class="text-[10px] text-fg-subtle"
434+
class="text-3xs text-fg-subtle"
435435
year="numeric"
436436
month="short"
437437
day="numeric"
@@ -451,7 +451,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
451451
<span
452452
v-for="tag in filterExcludedTags(v.tags, row.tags)"
453453
: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]"
455455
:title="tag"
456456
>
457457
{{ tag }}
@@ -532,7 +532,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
532532
<DateTime
533533
v-if="row.primaryVersion.time"
534534
:datetime="row.primaryVersion.time"
535-
class="text-[10px] text-fg-subtle"
535+
class="text-3xs text-fg-subtle"
536536
year="numeric"
537537
month="short"
538538
day="numeric"
@@ -543,7 +543,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
543543
<span
544544
v-for="tag in row.tags"
545545
: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]"
547547
:title="tag"
548548
>
549549
{{ tag }}
@@ -609,7 +609,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
609609
<DateTime
610610
v-if="group.versions[0]?.time"
611611
:datetime="group.versions[0]?.time"
612-
class="text-[10px] text-fg-subtle"
612+
class="text-3xs text-fg-subtle"
613613
year="numeric"
614614
month="short"
615615
day="numeric"
@@ -629,7 +629,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
629629
<span
630630
v-for="tag in group.versions[0].tags"
631631
: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]"
633633
:title="tag"
634634
>
635635
{{ tag }}
@@ -670,7 +670,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
670670
<DateTime
671671
v-if="group.versions[0]?.time"
672672
:datetime="group.versions[0]?.time"
673-
class="text-[10px] text-fg-subtle"
673+
class="text-3xs text-fg-subtle"
674674
year="numeric"
675675
month="short"
676676
day="numeric"
@@ -687,7 +687,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
687687
<span
688688
v-for="tag in group.versions[0].tags"
689689
: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"
691691
>
692692
{{ tag }}
693693
</span>
@@ -720,7 +720,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
720720
<DateTime
721721
v-if="v.time"
722722
:datetime="v.time"
723-
class="text-[10px] text-fg-subtle"
723+
class="text-3xs text-fg-subtle"
724724
year="numeric"
725725
month="short"
726726
day="numeric"
@@ -737,7 +737,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
737737
<span
738738
v-for="tag in v.tags"
739739
: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"
741741
>
742742
{{ tag }}
743743
</span>

‎app/components/Package/VulnerabilityTree.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function getDepthStyle(depth: string | undefined) {
135135
<span
136136
v-for="s in SEVERITY_LEVELS.filter(s => pkg.counts[s] > 0)"
137137
: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"
139139
:class="SEVERITY_COLORS[s]"
140140
>
141141
{{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}

‎app/components/VersionSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -604,7 +604,7 @@ watch(
604604
<span
605605
v-for="tag in v.tags"
606606
:key="tag"
607-
class="text-[9px] px-1 py-0.5 rounded font-sans font-medium"
607+
class="text-4xs px-1 py-0.5 rounded font-sans font-medium"
608608
:class="
609609
tag === 'latest'
610610
? 'bg-emerald-500/10 text-emerald-400'

‎app/pages/compare.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,18 +169,18 @@ useSeoMeta({
169169
</h2>
170170
<button
171171
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"
173173
:class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
174174
:disabled="isAllSelected"
175175
:aria-label="$t('compare.facets.select_all')"
176176
@click="selectAll"
177177
>
178178
{{ $t('compare.facets.all') }}
179179
</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>
181181
<button
182182
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"
184184
:class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
185185
:disabled="isNoneSelected"
186186
:aria-label="$t('compare.facets.deselect_all')"

‎uno.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ export default defineConfig({
4040
mono: "'Geist Mono', monospace",
4141
sans: "'Geist', system-ui, -apple-system, sans-serif",
4242
},
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+
},
4349
colors: {
4450
// Minimal black & white palette with subtle grays
4551
bg: {

0 commit comments

Comments
 (0)