fix(ui-buttons): fix ai-secondary button size diff

[git-nandor]

INSTUI-5061

Summary

An ai-secondary button was 2px taller (and, for icon-only buttons, 2px wider) than the same button in any other color.

ai-secondary removes the real border and renders its gradient "border" as a ::before ring whose space is reserved by padding. That padding is additive to the content's full minHeight, adding 2px to the outer size.

The fix shrinks the ai-secondary content box by 2 × borderWidth (height, plus width for icon-only buttons), so the reserved padding is compensated and the outer size is identical regardless of color.

Test:

Verify that the buttons have the same size.

<div>
  <IconButton screenReaderLabel="Add" color="ai-secondary"><IconAddLine /></IconButton>
  <IconButton screenReaderLabel="Add"><IconAddLine /></IconButton>
</div>

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2617/
Built to branch gh-pages at 2026-07-01 11:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	31
Changed	1
New	0
Removed	0

📊 View full report

Diff images (1)

button-and-derivatives.png — 3500 pixels differ

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}