Skip to content

fix(a11y): use pixels for spacing to allow for better text zoom #980

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
danielroe merged 1 commit into from
Feb 5, 2026
+1 −0
Merged

fix(a11y): use pixels for spacing to allow for better text zoom #980

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default defineConfig({
].filter(Boolean),
transformers: [transformerDirectives(), transformerVariantGroup()],
theme: {
spacing: { DEFAULT: '4px' },
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

find . -name "uno.config.ts" -o -name "uno.config.js" | head -5

Repository: npmx-dev/npmx.dev

Length of output: 76

🏁 Script executed:

cat uno.config.ts

Repository: npmx-dev/npmx.dev

Length of output: 8459

🌐 Web query:

UnoCSS preset-wind4 spacing configuration theme override

💡 Result:

In preset-wind4, all the “size scale” utilities (including p-*, m-*, and also w-*, h-*, min/max-w/h, etc.) are unified to use theme.spacing. [1]

Override spacing via theme

// uno.config.ts
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [presetWind4()],
  theme: {
    spacing: {
      0: '0px',
      1: '0.25rem',
      2: '0.5rem',
      4: '1rem',
      6: '1.5rem',
      8: '2rem',
      18: '4.5rem', // custom step (enables p-18, w-18, h-18, etc.)
    },
  },
})

This is the standard UnoCSS way to change what e.g. p-4 (and w-4, h-4, …) resolve to. [2]

Override the generated CSS variable (optional)

preset-wind4 puts theme variables (including --spacing) in a dedicated theme layer specifically to make overriding easy. [1] You can override it in your own CSS loaded after UnoCSS:

:root { --spacing: 0.2rem; }

Sources: UnoCSS preset-wind4 docs [1], UnoCSS theme spacing tutorial [2].

Note that numeric spacing utilities will still use rem values with this change.

Setting spacing: { DEFAULT: '4px' } affects only non-numeric utilities (e.g. bare p, m). Numeric utilities like p-1, m-2, px-4 will still resolve to the preset-wind4 default scale (where 1 = 0.25rem, 2 = 0.5rem, etc.) since you're not defining those numeric keys.

To convert all spacing utilities to px, the numeric scale must be explicitly defined:

spacing: {
  DEFAULT: '4px',
  0: '0px',
  1: '0.25rem',  // or '4px' if switching to px
  2: '0.5rem',   // or '8px'
  // ... rest of scale
}

This is a valid concern only if the goal is complete conversion; if this is intentionally a first step as noted in the PR, this can be disregarded.

Copy link
Contributor Author

@knowler knowler Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, you’re wrong. The default value is used to set a custom property called --spacing. The relevant utilities use this custom property as a cascading variable which is multiplied by the step in the scale. For example, a partial sample of the output might look like this:

.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}

.pr-4 {
  padding-right: calc(var(--spacing) * 4);
}

Copy link
Contributor

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@knowler, you're absolutely right—thank you for the correction! I misunderstood how preset-wind4 handles the DEFAULT spacing value. Setting spacing: { DEFAULT: '4px' } creates the --spacing custom property that's then multiplied in the utility classes (e.g., pl-2 becomes calc(4px * 2)), so this change does indeed convert the numeric spacing utilities to pixels as intended. I appreciate the clarification!

✏️ Learnings added 
Learnt from: knowler
Repo: npmx-dev/npmx.dev PR: 980
File: uno.config.ts:38-38
Timestamp: 2026-02-05T01:30:40.024Z
Learning: In UnoCSS preset-wind4, setting `spacing: { DEFAULT: '4px' }` in the theme configuration creates a CSS custom property `--spacing: 4px`. Numeric spacing utilities like `pl-2` or `pr-4` generate CSS using `calc(var(--spacing) * N)` where N is the numeric value, so `pl-2` becomes `padding-left: calc(var(--spacing) * 2)`. This means changing the DEFAULT value from rem to px affects all numeric spacing utilities.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

font: {
mono: "'Geist Mono', monospace",
sans: "'Geist', system-ui, -apple-system, sans-serif",
Expand Down
Loading