Fix dark theme text/richeditbox regressions

[marcelwgn]

Description

Fixes some regression regarding dark mode on editable ComboBox and placeholder text upon focus.

Motivation and Context

Fixes some regressions as noted by @Kinnara here:
c0fb694#commitcomment-38010035

How Has This Been Tested?

Visited all control pages and checked whether they work or have rendering issues in dark mode.

Screenshots (if appropriate):

Placeholder text (previously not visible):

Combobox chevron (previously not visible):

[StephenLPeters]

@chingucoding any chance you could provide some of your awesome screenshots or a link to the regression?

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[marcelwgn]

@StephenLPeters Sure, I've updated the PR description with gifs and a link to the comment.

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[StephenLPeters]

[kmahone]

@chingucoding, please merge the latest from master into this branch to resolve the blocking test failures.

[marcelwgn]

This branch contains your latest fix for the test failures.

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[chigy]

@chingucoding , I have a favor to ask. We are putting together release note for WinUI2.4 and would like to show a before/after gif file along with the description of change. Would you be kind enough to create gif file of before/after (two files would be great so we can put them in the format that match other features)

[marcelwgn]

Sure @chigy !

Before:

After:

Are those what you had in mind or are there any other gifs you would like?

[mdtauk]

Do you want them on a pure black background? Windows 10X I think is using a dark grey for it's apps, and it would demonstrate the background opacity and it turning 100% Opaque black on focus.

[chigy]

Do you want them on a pure black background? Windows 10X I think is using a dark grey for it's apps, and it would demonstrate the background opacity and it turning 100% Opaque black on focus.

@mdtauk , thank you for your suggest. BTW, who are they? As far as the guidance goes, we have not changed the default background from being pure black.

That said, Having different background like image might be good to demonstrate here?

+@chingucoding

[chigy]

@chingucoding , thanks! Would you mind seeing the feedback from @mdtauk above?

[mdtauk]

@mdtauk , thank you for your suggest. BTW, who are they? As far as the guidance goes, we have not changed the default background from being pure black.

That said, Having different background like image might be good to demonstrate here?

The latest Insider flight blog post mentions Your Phone UI updates...

UI updates

We recently introduced a number of UI changes to improve the overall look and feel of the Your Phone app. Updates include:

• The option to match your app’s background with your phone’s wallpaper. This not only complements the look and feel of the app, but it makes it more personal.
• The app background color in dark mode is now lighter tone of gray.
• Typography of headers is more modern and prominent.
• Improvements to app-wide padding and responsiveness to work better for different sizes of the app window as you navigate across nodes.

[marcelwgn]

@chigy Do you want me to create gifs for the whole range (TextBox, PasswordBox and AutoSuggestBox) infront of a dark gray instead of black and an image?
Was the size and "setting" of the gifs good?

[chigy]

@chingucoding , if these gifs can be combined in one with single solid pure black background, I think it would look nicer. If you could create one with image background that'll be great.

[chigy]

@chingucoding , this is unrelated to the release note but can you confirm or correct if these specification is what's in the textbox? (background changed to gray so the difference in color is shown but this is not my indication that the gifs should use gray background)

Rest: 40%
Hover: 60%
Focus/Pressed: 100%

[marcelwgn]

@chingucoding , if these gifs can be combined in one with single solid pure black background, I think it would look nicer. If you could create one with image background that'll be great.

So one gif showing all three controls at once? Should I do the image version also for the "before" gif or only for the "after" gif?

@chingucoding , this is unrelated to the release note but can you confirm or correct if these specification is what's in the textbox? (background changed to gray so the difference in color is shown but this is not my indication that the gifs should use gray background)

Rest: 40%
Hover: 60%
Focus/Pressed: 100%

What colors are we talking about here exactly? 😅

Edit: Should I also use a different accent color for the gifs?

[chigy]

@chingucoding ,

So one gif showing all three controls at once? Should I do the image version also for the "before" gif or only for the "after" gif?

Thanks and nevermind. I think what I am asking probably is not easy or possible. What we have is good. If you could create one with image background. Same as black one, just duplicated with image background.

What colors are we talking about here exactly?

Are the transparency of the textbox background these %?

Edit: Should I also use a different accent color for the gifs?

Yes, please use default blue. That's the color we always use for our examples as it is our brand blue.

[marcelwgn]

Thanks and nevermind. I think what I am asking probably is not easy or possible. What we have is good. If you could create one with image background. Same as black one, just duplicated with image background.

I could create a long gif where I first type into textbox, then password box and the auto suggest box if that would work.

Are the transparency of the textbox background these %?

Since we didn't touch the hover and default background brushes, those values should have that values.

Yes, please use default blue. That's the color we always use for our examples as it is our brand blue.

Just to clarify, is this the correct color hex code: #0078D7 ?

[chigy]

@chingucoding ,

I could create a long gif where I first type into textbox, then password box and the auto suggest box if that would work.

If you don't mind creating that, that'll work as well. Trying to not cause you to do too much work. :)

Since we didn't touch the hover and default background brushes, those values should have that values.

Thanks!

Just to clarify, is this the correct color hex code: #0078D7 ?

Please use this accent color.

[marcelwgn]

Before

After

@chigy Hope those are fine, if there are adjustments to make or if there's you want me to change, please tell me :)

[chigy]

@chingucoding , they look great! Thanks!