Stroke alignment

[TravisSpomer]

Tokens for stroke alignment:

Inner

• The most common alignment, for solid and transparent borders
• The stroke is drawn inside the edge of the control on top of the control's fill
• Figma: Inner stroke alignment
• XAML: BackgroundSizing="OuterBorderEdge"
• CSS: background-clip: border-box (default)

Outer

• The stroke is drawn outside the control's fill on top of the content behind the control
• Figma: Outer stroke alignment
• XAML: BackgroundSizing="InnerBorderEdge" (default)
• CSS: background-clip: padding-box (default)

(Neither property actually affects sizing of the element, either in layout or just visually—that would be border-box in CSS, with no WinUI equivalent.)

Something like:

ButtonPrimary-Box-Stroke-Alignment = Outer or Inner (default)

[TravisSpomer]

This was implemented for both CSS and WinUI with this commit.