Focus

Apply to the element — the mixin generates :focus and :focus-visible rules internally.

// ✅ correct — apply to the element
.button {
  @include focus-ring;
}

// ❌ wrong — mixin generates :focus-visible internally
.button:focus-visible {
  @include focus-ring;
}

focus-ring

Standard focus ring with positive offset — appears outside the element boundary. Use on most interactive elements.

@include focus-ring;
@include focus-ring(var(--color-accent));

Parameter	Default	Description
`$color`	`var(--color-interactive)`	Outline color

focus-ring-inset

Inset focus ring — appears inside the element boundary. Use on elements where an outer ring would be clipped, such as full-bleed images or elements flush with the viewport edge.

@include focus-ring-inset;
@include focus-ring-inset(var(--color-accent));

Parameter	Default	Description
`$color`	`var(--color-interactive)`	Outline color