feat(ui-codemods): update tokens and move theme.componentOverrides to…

[ToMESSKa]

… themeOverride.components

INSTUI-4840

1. Renames and removes theme tokens.

• Renames or drops theme variables that changed in the new theming (e.g. background → backgroundColor, color → textColor).
• Finds them in themeOverride props and in InstUISettingsProvider overrides and rewrites them to the new names.
• Removes tokens that no longer exist.
• Leaves a warning wherever it can't safely decide.

2. Updates how overrides are set on InstUISettingsProvider.

• Relocates overrides from the old theme={{ componentOverrides: { Checkbox: {...} } }} to the new themeOverride={{ components: { Checkbox: {...} } }}.
• Always migrates, since it can't tell which version the components inside the InstUISettingsProvider are.
• Warns you to bump anything still on v11.6-or-earlier to v11.7/latest so its overrides keep working.
• Runs in the same pass as 1., so the token rewrites and this relocation boht happen together

3. Revises the token list in the upgrade guide.

• Double-checks every existing entry against the actual styles.ts files of the v1 and v2 components.
• Corrects entries that were wrong (bad renames, tokens listed that don't actually change) so the guide matches what the codemod does.

4. Ships with a full test suite.

• Adds ~60 before/after fixtures covering both token renames and override relocation, including the tricky cases (mixed v1/v2 imports, quoted keys, spreads, unmergeable conflicting overrides, providers that end up empty).
• Pairs every transform fixture with a warning fixture so the exact warning text is locked down.

TEST PLAN:

1. Confirm the tests actually catch mistakes

• Edit a fixture output (e.g. test1.output.tsx) — change one expected token, e.g. backgroundColor → bogusColor.
• Run pnpm run test:vitest ui-codemods → that fixture fails.

2. Come up with new edge cases the fixtures don't cover

• Think of tricky cases especially cases where it might transform something it shouldn't or cases it should

[github-actions]

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

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	30
Changed	2
New	0
Removed	0

📊 View full report

Diff images (2)

avatar.png — 1193 pixels differ

tooltip.png — 19 pixels differ

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

[ToMESSKa]

From the codemod's point of view Checkbox is tricky because the same old token maps to different new tokens depending on the variant (simple vs toggle), so it can't do a straight one-to-one rename — and when the variant can't be determined statically it has to leave those tokens alone and warn. On top of that it has separate facade keys (Checkbox/CheckboxFacade/ToggleFacade) that each keep their own tokens, so they can't be merged.

[matyasf]

This variable still exists in 11.7

[ToMESSKa]

No, it is in Avatar/v1/styles.ts but not in Avatar/v2/styles.ts

[matyasf]

nice work! The test caught a bug too (INSTUI-5103)