Semantic Copilot Theme

[mltejera]

Created a new package & theme, following Kumo theme pattern.
Visually inspected button components and updated border radii to match Copilot Theme (as defined by the FAI implementation)
Checkout semanticStyleHooks.ts for more notes.

Notes:

• tokens in code are camel case, while tokens in browser are snake case. This adds friction is finding tokens between the two.
• In semantic theme, square avatars all point to the same token, ctrlAvatarCornerGroupRaw, so there is no differentiation on size. This will not match Copilot Theme where larger square avatars have larger radii and smaller square avatars will appear circular.

• Being able to hover over a token and see the full fallback mapping is a HUGE dev ex win.
  
• TreeItemLayout has a token to control the focus rect, but I did not see one to control focus back plate (which copilot theme wants to change)

Overall thoughts:
Copilot's Theme only changes border radii and a few paddings to accommodate the different radii. However, it also creates new ones (though these new ones were only used in FAI components, not FUI components, which feels smelly to me)

borderRadius2XL: '12px',
borderRadius3XL: '16px',
borderRadius4XL: '24px',
borderRadius5XL: '40px',

There were some places where copilot theme took small, medium and large variants of components and unified their border radii to 8px. So changing the 3 radii token values to 8px just 'happened' to work in these instances (button and text area). However I do think there will be other components that will need to maintain the smaller or larger radii to 'work' (avatar, tag, tooltip, card) and we may have lost the fidelity to do so.

Said more simply, this token implementation inherently and strictly enforces relationships from the original design language which may not/should not exist in other design languages.

[chrisdholt]

Thanks @mltejera - @davatron5000 let's make sure we get the naming/semantics correct here.

[github-actions]

Pull request demo site: URL