Proposal: Update the borderbrush for transient UIs in Dark mode

[Felix-Dev]

Proposal: Update the borderbrush for transient UI in Dark mode

Summary

Today, transient UIs such as flyouts and popups have a visible border in Light mode, however, in Dark mode, the border is not really visible at all:

Theme	MenuFlyout	NumberBox Popup (*)
Light
Dark

(*) The NumberBox popup UI shown here is the planned to be included in WinUI with PR #3130.

The border brush for transient UIs like these is set by the SystemControlTransientBorderBrush theme resource. In the 18362 SDK's generic.xml file, the SystemControlTransientBorderBrush, which defines the border for transient UIs, is specified as the following:

<SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.36" /> // Dark mode
<SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.14" /> // Light mode

The idea of this proposal is to update the SystemControlTransientBorderBrush theme resource in Dark mode to create a visible border for the default look for all transient UIs - matching the Light theme.

@mdtauk gave a suggestion how the borderbrush could be revised in Dark mode to become better visible:

I used a ColorPicker tool on @mdtauk's image and got a color value of #4C4C4C for the border color in the image. This might not be the color used by @mdtauk but I went ahead with it anyway and applied it to the NumberBox popup and did some first quick experiments with the opacity:

Control	Opacity 0.8	Opacity 1
MenuFlyout
NumberBox

Opacity 1 should not be an option as we probably want some transparency for our borderbrush. In that regard, opacity 0.8 doesn't look that bad.

An alternative could be to take the existing brush value in Light mode and "reverse" it for Dark mode:

<SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#FFFFFF" Opacity="0.14" /> // new value for Dark mode

NumberBox Popup	MenuFlyout

The NumberBox's Popup border is not so prominent here as it is for the MenuFlyout which could be a control template issue to be looked into.

Note

If it's decided to update the SystemControlTransientBorderBrush theme resource in Dark mode, this might not be possible in WinUI 2 currently. I went ahead and created an updated SystemControlTransientBorderBrush theme resource for Dark mode in WinUI's Common_themeresources.xml file (the file we introduce WinUI-wide resources with), yet that update wasn't being picked up by WinUI at all.

In order to create the test images of the NumberBox and MenuFlyout for this proposal, I had to create a new theme resource for now (like SystemControlTransientBorderBrush1) and had that referenced by both these controls. This is definitely not a viable implementation solution though. If we aren't able to properly update SystemControlTransientBorderBrush for now, we might have to wait until WinUI 3 until we can make this change.

Additional Context

@YuliKl @chigy @kikisaints @mdtauk FYI.

[mdtauk]

I used #ffffff with 14% Opacity. The WinUI figma used #000000 with 14%

The light theme equivalent uses black with 35% opacity

[Felix-Dev]

I used #ffffff with 14% Opacity

@mdtauk The second set of images show that color in use for the border ("An alternative").