---
url: "https://vueda.dev/v3/reference/theming/tokens/dpr-aware-hairline-focus-ring-widths.md"
title: "DPR-aware hairline + focus-ring widths tokens"
---

# DPR-aware hairline + focus-ring widths tokens

Painted edges step down from 2px to 1px across the DPR 1.0 to 2.0 range,
keyed by `@media (min-resolution: ...)` overrides further below. Two LCD
artifacts drive this:
  - Fractional DPR (e.g., Windows 4K @ 150% / 175% scaling): the
    browser's `border` code path snaps each side to the nearest device
    pixel inconsistently per scroll position, producing shimmer.
    Painting via inset `box-shadow` (the `hairline` utility) takes
    Skia's path-rendering path, which anti-aliases uniformly.
  - Integer DPR (e.g., 4K @ 100% scaling): a single device-pixel
    hairline gets colored by whichever subpixel column it lands on,
    producing red/blue chromatic fringing. A wider hairline forces
    Skia to distribute color across adjacent subpixels.
The scale is smooth (steps of 0.25px) and the three tokens move in
lockstep, so the visual proportions of "hairline thickness : focus-ring
gap : focus-ring thickness" stay constant when a window is dragged
between monitors at different scaling, or when the browser's zoom is
adjusted. This trades a tiny absolute size shift for stable proportions
across DPR transitions.

Steps (hairline / focus-ring-width / focus-ring-offset):
  DPR < 1.25  → 2px    / 4px    / 2px
  DPR ≥ 1.25  → 1.75px / 3.5px  / 1.75px
  DPR ≥ 1.5   → 1.5px  / 3px    / 1.5px
  DPR ≥ 1.75  → 1.25px / 2.5px  / 1.25px
  DPR ≥ 2.0   → 1px    / 2px    / 1px

Focus-ring-width is always 2x hairline-width, ensuring the 2px CSS
minimum required by WCAG 2.2 SC 2.4.13 (AAA) at all DPR values.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-focus-ring-gap-color` | `var(         --background     )` |  | gap colour between control edge and ring stroke when painting `focus-ring-shadow` (the inset-shadow variant of `focus-ring`). Must be opaque (a transparent gap would not mask the ring shadow behind it, collapsing the gap visually). Defaults to --background; scope-override per surface via `[--vueda-focus-ring-gap-color:var(--card)]`, `var(--popover)`, etc. |  |

## Tokens

<a id="css-token-vueda-focus-ring-gap-color"></a>

### --vueda-focus-ring-gap-color

| Field | Value |
| --- | --- |
| Light | `var(         --background     )` |
| Source | `client/lib/theme/vueda-tailwind/base.css:719` |

gap colour between control edge and ring stroke when painting `focus-ring-shadow` (the inset-shadow variant of `focus-ring`). Must be opaque (a transparent gap would not mask the ring shadow behind it, collapsing the gap visually). Defaults to --background; scope-override per surface via `[--vueda-focus-ring-gap-color:var(--card)]`, `var(--popover)`, etc.