Usage

The edit-on component is a small inline link used in site chrome. Start with:

--edit-on-font-size and --edit-on-icon-size for density

--edit-on-color and --edit-on-color-hover for link states

Tokens

:root {
  --edit-on-font-size: var(--font-size-3xs);
  --edit-on-icon-size: 0.9em;
}

:root {
  --edit-on-color-hover: var(--color-accent);
}

Keep it subtle: Use muted colors so edit links stay supportive rather than primary.

Inline alignment: Match --edit-on-font-size to other small utility links like copy buttons.