Align FX token contract with Figma

[devin-ai-integration]

Summary

• Aligns FX semantics with Figma Variables: Glow canonical slots are Neutral/Inverted/Brand/Danger/Warning, Focus-ring is split by Neutral/Brand/Danger/Warning, and Skeleton is split into Base/Highlight.
• Adds static-skeleton-mid as an auditable system-mid-gray primitive, then derives skeleton and shadow values from small opacity recipes instead of collapsed hardcoded FX cells.
• Keeps legacy --fx-glow-success, --fx-glow-info, --fx-focus-ring, and --fx-skeleton through the 0.2.x deprecation window with 0.3.0 removal metadata.
• Adds FX contract tests, regenerates CSS/ESM/DTS/Tailwind snapshots, and updates the generated test catalog required by CI.

Review & Testing Checklist for Human

• Check the FX token naming against current Figma Variables, especially legacy aliases vs canonical slots.
• Verify --fx-focus-ring legacy mapping to Brand is acceptable for existing consumers.
• Review skeleton/shadow opacity sectors against current screenshots/Figma Variables.

Notes

Local checks run:

• pnpm --dir /home/ubuntu/repos/labui --filter @lab-ui/tokens lint
• pnpm --dir /home/ubuntu/repos/labui --filter @lab-ui/tokens test
• pnpm --dir /home/ubuntu/repos/labui build
• pnpm --dir /home/ubuntu/repos/labui lint

CI initially failed because packages/tokens/docs/test-catalog.md was stale after adding the FX contract test; the catalog is now regenerated and committed.

Link to Devin session: https://app.devin.ai/sessions/658befcbfc6d43678af8c40886b974df
Requested by: @lemone112

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 potential issue.

View 4 additional findings in Devin Review.

[devin-ai-integration]

🔴 Legacy --fx-focus-ring lost opacity_stop during deprecation window, changing alpha from 0.4 to 1.0

The deprecated --fx-focus-ring token's value changed from semi-transparent (alpha=0.4) to fully opaque (alpha=1.0) during its deprecation grace period. The old config at packages/tokens/config/tokens.config.ts:625 (pre-PR) had ref: { family: 'accent', id: 'brand', opacity_stop: 40 }, producing CSS like oklch(0.603 0.218 257.4 / 0.4). The new focus_ring_legacy at line 680 drops opacity_stop, producing oklch(0.603 0.218 257.4) (alpha=1). Any consumer relying on --fx-focus-ring during the grace period (before removed_in: '0.3.0') will see their focus rings go from 40% transparent to fully opaque — a visually breaking change that defeats the purpose of the deprecation window.

Suggested change

	focus_ring_legacy: {
	kind: 'direct',
	ref: { family: 'accent', id: 'brand', opacity_stop: 40 },
	ref: { family: 'accent', id: 'brand' },
	},
	focus_ring_legacy: {
	kind: 'direct',
	ref: { family: 'accent', id: 'brand', opacity_stop: 40 },
	},

---

Was this helpful? React with 👍 or 👎 to provide feedback.