[v12] View + ContextView

[balzss]

INSTUI-4865

Summary

Migrates View and ContextView components to token-based theme system:

• Remove theme.ts files from View and ContextView
• Switch from withStyleRework to withStyle decorator
• Rename calcMarginFromShorthand → calcSpacingFromShorthand with support for hyphen-case tokens (e.g., 'medium-small')
• Add token conversion utilities: elevationTokenToBoxShadow, processBorderRadiusValue, processBorderWidthValue
• Add withFocusOutline parameter to calcFocusOutlineStyles
• Fix ContextView placement padding override
• Update consuming components (Avatar, ColorPicker, FormFieldLayout, Link, Spinner)

Test Plan

• [ ] Run unit tests: pnpm run test:vitest ui-view
• [ ] Verify View renders with various props (margin, padding, border, shadow)
• [ ] Test ContextView positioning and placement
• [ ] Confirm spacing tokens resolve (camelCase and hyphen-case: 'mediumSmall', 'medium-small')
• [ ] Check focus outline styles
• [ ] Run visual regression tests
• [ ] Verify consuming components work correctly
• [ ] Test documentation site: pnpm run dev → http://localhost:9090

[github-actions[bot]]

PR Preview Action v1.6.3 :---: |

:rocket: View preview at
https://instructure.design/pr-preview/pr-2282/

|

Built to branch gh-pages at 2025-12-23 13:57 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

[matyasf]

Also please fix test and add the token changes to the upgrade guide

[balzss]

@adamlobler the arrowBorderColor theme token for the contextview has a wrong contrast (reported by the axe a11y tool). can/should we change that?