Skip to content

feat: rework fontsize classes with pixels to rem #1116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexdln merged 8 commits into from
Feb 7, 2026
Merged

feat: rework fontsize classes with pixels to rem #1116

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3d3ee2f
feat: add extra text size xxs to uno theme
carwack Feb 6, 2026
c190a85
refactor: change text xxs fontsize to 0.625rem - 10px since more used
carwack Feb 6, 2026
452e5a5
refactor: replace all pixel sized text font size 8px-11px classes to …
carwack Feb 6, 2026
6eed543
Merge branch 'main' into feat/rework-text-size-in-pixels-to-rem
carwack Feb 7, 2026
6d08562
feat: update text fontsize classes with 2xs (10px) 3xs (9px) and 4xs …
carwack Feb 7, 2026
3f63647
refactor: update to have also 11px as 2xs now
carwack Feb 7, 2026
18d6dfc
refactor: use new xs text fontsize classes
carwack Feb 7, 2026
c95c9b0
Merge branch 'main' into feat/rework-text-size-in-pixels-to-rem
alexdln Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/components/Compare/FacetSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs 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-xxs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
:class="
isCategoryAllSelected(category)
? 'text-fg-muted'
Expand All @@ -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-xxs 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-xxs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
:class="
isCategoryNoneSelected(category)
? 'text-fg-muted'
Expand Down Expand Up @@ -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-xxs"
>({{ $t('compare.facets.coming_soon') }})</span
>
</button>
Expand Down
2 changes: 1 addition & 1 deletion app/components/DependencyPathPopup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs 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"
>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header/AccountMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs rounded-full"
:class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
aria-hidden="true"
>
Expand Down
2 changes: 1 addition & 1 deletion app/components/LicenseDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
{{ token.value }}
</a>
<span v-else-if="token.type === 'license'">{{ token.value }}</span>
<span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
<span v-else-if="token.type === 'operator'" class="text-xxs">{{ token.value }}</span>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</template>
<span
v-if="hasAnyValidLicense"
Expand Down
2 changes: 1 addition & 1 deletion app/components/Org/OperationsQueue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs"
>{{ op.result.stderr }}</pre
>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/Dependencies.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,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-xxs text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
:title="$t('package.dependencies.optional')"
>
{{ $t('package.dependencies.optional') }}
Expand Down
11 changes: 4 additions & 7 deletions app/components/Package/DownloadAnalytics.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -911,7 +911,7 @@ const chartConfig = computed(() => {
</svg>
</div>

<span class="text-[10px] uppercase tracking-wide text-[var(--fg)]/70 truncate">
<span class="text-xxs uppercase tracking-wide text-[var(--fg)]/70 truncate">
${label}
</span>

Expand Down Expand Up @@ -958,7 +958,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-xxs font-mono text-fg-subtle tracking-wide uppercase"
>
{{ $t('package.downloads.granularity') }}
</label>
Expand All @@ -984,7 +984,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-xxs font-mono text-fg-subtle tracking-wide uppercase"
>
{{ $t('package.downloads.start_date') }}
</label>
Expand All @@ -1003,10 +1003,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-xxs font-mono text-fg-subtle tracking-wide uppercase">
{{ $t('package.downloads.end_date') }}
</label>
<div
Expand Down
22 changes: 11 additions & 11 deletions app/components/Package/Versions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,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-xxs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
:title="tag"
>
{{ tag }}
Expand Down Expand Up @@ -447,7 +447,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<DateTime
v-if="v.time"
:datetime="v.time"
class="text-[10px] text-fg-subtle"
class="text-xxs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
Expand All @@ -467,7 +467,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-xxs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
:title="tag"
>
{{ tag }}
Expand Down Expand Up @@ -554,7 +554,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<DateTime
v-if="row.primaryVersion.time"
:datetime="row.primaryVersion.time"
class="text-[10px] text-fg-subtle"
class="text-xxs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
Expand All @@ -565,7 +565,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-xxs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
:title="tag"
>
{{ tag }}
Expand Down Expand Up @@ -633,7 +633,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-xxs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
Expand All @@ -653,7 +653,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-xxs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
:title="tag"
>
{{ tag }}
Expand Down Expand Up @@ -696,7 +696,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-xxs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
Expand All @@ -713,7 +713,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-xxs font-semibold text-fg-subtle uppercase tracking-wide"
>
{{ tag }}
</span>
Expand Down Expand Up @@ -754,7 +754,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<DateTime
v-if="v.time"
:datetime="v.time"
class="text-[10px] text-fg-subtle"
class="text-xxs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
Expand All @@ -771,7 +771,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-xxs font-semibold text-fg-subtle uppercase tracking-wide"
Comment thread
alexdln marked this conversation as resolved.
Outdated
>
{{ tag }}
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/VulnerabilityTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs font-mono rounded border"
:class="SEVERITY_COLORS[s]"
>
{{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}
Expand Down
2 changes: 1 addition & 1 deletion app/components/VersionSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-xxs px-1 py-0.5 rounded font-sans font-medium"
Comment thread
carwack marked this conversation as resolved.
Outdated
:class="
tag === 'latest'
? 'bg-emerald-500/10 text-emerald-400'
Expand Down
6 changes: 3 additions & 3 deletions app/pages/compare.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,18 +168,18 @@ useSeoMeta({
</h2>
<button
type="button"
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
class="text-xxs 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-xxs 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-xxs 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')"
Expand Down
4 changes: 4 additions & 0 deletions uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export default defineConfig({
mono: "'Geist Mono', monospace",
sans: "'Geist', system-ui, -apple-system, sans-serif",
},
text: {
// This should add to the existing Wind4 preset text sizes
Comment thread
alexdln marked this conversation as resolved.
Outdated
xxs: { fontSize: '0.625rem' },
Comment thread
alexdln marked this conversation as resolved.
Outdated
},
colors: {
// Minimal black & white palette with subtle grays
bg: {
Expand Down
Loading