Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update high contrast colors #4635

Merged

Conversation

marcelwgn
Copy link
Collaborator

Description

Updated brushes as per #4584 and #4585

Motivation and Context

Closes #4584, Closes #4585

How Has This Been Tested?

Screenshots (if appropriate):

Splitbutton in different visual states

Gif showing different states of button

Gif showing different states of ToggleButton

Gif showing different states of Checkbox

Gif showing different states of RadioButtons

Gif showing different states of ToggleSwitch

@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Mar 23, 2021
@ranjeshj ranjeshj requested review from marksfoster and YuliKl March 23, 2021 20:10
@ranjeshj ranjeshj added accessibility Narrator, keyboarding, UIA, etc area-Styling team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Mar 23, 2021
@alejo4000
Copy link
Contributor

Hi Marcel, Are the screenshots all "after" screenshots? Per the email thread, it looked like you added HighContrastAdjustment, can that be added for the button as well to remove the black backplate beneath the text on hover?

I'm also curious about the button text color, if you're using HC1 theme, they look like they're using WindowText instead of ButtonText? Is the hover state using ButtonText for the base?

I'm double checking with the designer of these, I just had a meeting with her and I want to make sure we're getting the right colors the first time... I'll update when I hear back from her. Thanks!

@marcelwgn
Copy link
Collaborator Author

All of the screenshots above were after the changes, here is a gif with the controls using HighContrastAdjustment="None":

Gif of mouse interactions with multiple different controls in high contrast theme

I updated the code for button so that the foreground brush is now using SystemColorButtonTextColor in rest state. The hover uses the colors indicated by @YuliKl in #4584. Hope that clarifies @alejo4000 and thank you for helping with reviewing this PR!

@@ -62,16 +62,16 @@
<StaticResource x:Key="AccentButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="AccentButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
<StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
<StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundBaseLowBrush" />
<StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
<StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColor" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ranjeshj @jevansaks I think I've asked this before, but to double-check: is it ok to use this kind of lookup from a SolidColorBrush to a Color directly?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I think it works in most cases that it's ok but I prefer to be explicit if we can. I feel like there is a corner case that I never remember where it causes us trouble.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So do you want me to change all of the references to brushes then?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like changing them to brushes would be safer.
Use these:

<SolidColorBrush x:Key="SystemColorWindowTextColorBrush" Color="{ThemeResource SystemColorWindowTextColor}" />

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@YuliKl Should we update the references to these colors holistically then just to be sure?

Copy link
Contributor

@marksfoster marksfoster Mar 29, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, all of these should point to the brush resource otherwise a SolidColorBrush is created for each one which will affect perf.

<StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush" />

These are newly introduced brush resources to WinUI 2.6. They have the same names (with "Brush" added to the end) as the HC API colors making it much easier to understand (no more asking yourself "what HC color does SystemControlBackgroundBaseMediumLowBrush resolve to again?!"):

SystemColorWindowTextColorBrush
SystemColorWindowColorBrush
SystemColorButtonFaceColorBrush
SystemColorButtonTextColorBrush
SystemColorHighlightColorBrush
SystemColorHighlightTextColorBrush
SystemColorHotlightColorBrush
SystemColorGrayTextColorBrush

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed now, @marksfoster @ranjeshj should I also update ALL other references?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chingucoding you mean update any other HC resources that point to the color instead of the brush?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, exactly @marksfoster .

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think check this PR in and I'll talk to Yulia about this extra refactor work and whether we want to take it on.

@alejo4000
Copy link
Contributor

All of the screenshots above were after the changes, here is a gif with the controls using HighContrastAdjustment="None":

Gif of mouse interactions with multiple different controls in high contrast theme

I updated the code for button so that the foreground brush is now using SystemColorButtonTextColor in rest state. The hover uses the colors indicated by @YuliKl in #4584. Hope that clarifies @alejo4000 and thank you for helping with reviewing this PR!

Thanks! The specs from the bug you linked are indeed correct, I was mistaken about the base color. Also, thanks for the update to the foreground color!

dev/CommonStyles/Button_themeresources.xaml Outdated Show resolved Hide resolved
dev/CommonStyles/Button_themeresources_v1.xaml Outdated Show resolved Hide resolved
dev/CommonStyles/CheckBox_themeresources.xaml Outdated Show resolved Hide resolved
@ranjeshj
Copy link
Contributor

looks like there is a merge conflict.

@ranjeshj
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ranjeshj
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ranjeshj
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ranjeshj
Copy link
Contributor

ranjeshj commented Apr 2, 2021

@chingucoding can you merge in master ? There were some fixes that were made for these test failures.

@marcelwgn
Copy link
Collaborator Author

Merged now @ranjeshj

@ranjeshj
Copy link
Contributor

ranjeshj commented Apr 2, 2021

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ranjeshj ranjeshj merged commit 2c1d714 into microsoft:master Apr 2, 2021
Kinnara added a commit to Kinnara/ModernWpf that referenced this pull request Dec 4, 2023
Kinnara added a commit to Kinnara/ModernWpf that referenced this pull request Dec 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Narrator, keyboarding, UIA, etc area-Styling team-Controls Issue for the Controls team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix High Contrast color mappings for toggleable controls Fix High Contrast color mappings for buttons
6 participants