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.

Sign up for GitHub

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

Fix: Color > HighContrast theme toggle highlight #1680

Merged
merged 1 commit into from
Dec 8, 2024
Merged

Fix: Color > HighContrast theme toggle highlight #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions WinUIGallery/ControlPages/DesignGuidance/ColorPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:WinUIGallery.Controls"
xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
xmlns:core="using:WinUIGallery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Expand Down Expand Up @@ -53,8 +52,6 @@
<SelectorBarItem Text="Signal" />
<SelectorBarItem Text="High Contrast" />
</SelectorBar>
<controls1:SampleThemeListener Grid.Row="3">
<Frame x:Name="NavigationFrame" />
</controls1:SampleThemeListener>
<Frame x:Name="NavigationFrame" Grid.Row="3"/>
</Grid>
</Page>
756 changes: 379 additions & 377 deletions WinUIGallery/Controls/DesignGuidance/ColorSections/BackgroundSection.xaml
View file
Open in desktop

Large diffs are not rendered by default.

737 changes: 370 additions & 367 deletions WinUIGallery/Controls/DesignGuidance/ColorSections/FillSection.xaml
View file
Open in desktop

Large diffs are not rendered by default.

703 changes: 356 additions & 347 deletions WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml
View file
Open in desktop

Large diffs are not rendered by default.

302 changes: 152 additions & 150 deletions WinUIGallery/Controls/DesignGuidance/ColorSections/SignalSection.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,166 +7,168 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:designguidance="using:WinUIGallery.DesktopWap.Controls.DesignGuidance"
xmlns:wdc="using:WinUIGallery.DesktopWap.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<wdc:SampleThemeListener>
<StackPanel Spacing="{StaticResource ColorSectionSpacing}">
<!-- System -->
<designguidance:ColorPageExample
Title="System"
Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
Description="Used for accent fills on controls">
<InfoBar
Title="Title"
IsClosable="False"
IsOpen="True"
Message="This is body text. Windows 11 is faster and more intuitive."
Severity="Error" />
</designguidance:ColorPageExample>

<StackPanel Spacing="{StaticResource ColorSectionSpacing}">
<!-- System -->
<designguidance:ColorPageExample
Title="System"
Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
Description="Used for accent fills on controls">
<InfoBar
Title="Title"
IsClosable="False"
IsOpen="True"
Message="This is body text. Windows 11 is faster and more intuitive."
Severity="Error" />
</designguidance:ColorPageExample>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Background="{ThemeResource SystemFillColorSuccessBrush}"
ColorBrushName="SystemFillColorSuccessBrush"
ColorExplanation="Badge"
ColorName="System / Success"
ColorValue="#6CCB5F, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorCautionBrush}"
ColorBrushName="SystemFillColorCautionBrush"
ColorExplanation="Badge"
ColorName="System / Caution"
ColorValue="FCE100, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorCriticalBrush}"
ColorBrushName="SystemFillColorCriticalBrush"
ColorExplanation="Badge"
ColorName="System / Critical"
ColorValue="#FF99A4, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<designguidance:ColorTile
Background="{ThemeResource SystemFillColorSuccessBrush}"
ColorBrushName="SystemFillColorSuccessBrush"
ColorExplanation="Badge"
ColorName="System / Success"
ColorValue="#6CCB5F, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorCautionBrush}"
ColorBrushName="SystemFillColorCautionBrush"
ColorExplanation="Badge"
ColorName="System / Caution"
ColorValue="FCE100, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorCriticalBrush}"
ColorBrushName="SystemFillColorCriticalBrush"
ColorExplanation="Badge"
ColorName="System / Critical"
ColorValue="#FF99A4, 100%"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Grid.Column="0"
Background="{ThemeResource SystemFillColorSuccessBackgroundBrush}"
ColorBrushName="SystemFillColorSuccessBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Success Background"
ColorValue="#393D1B, 100%"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorCautionBackgroundBrush}"
ColorBrushName="SystemFillColorCautionBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Caution Background"
ColorValue="#433519, 100%"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
ColorBrushName="SystemFillColorCriticalBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Critical Background"
ColorValue="#442726, 100%"
ShowSeparator="False" />

<designguidance:ColorTile
Grid.Column="0"
Background="{ThemeResource SystemFillColorSuccessBackgroundBrush}"
ColorBrushName="SystemFillColorSuccessBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Success Background"
ColorValue="#393D1B, 100%"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorCautionBackgroundBrush}"
ColorBrushName="SystemFillColorCautionBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Caution Background"
ColorValue="#433519, 100%"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
ColorBrushName="SystemFillColorCriticalBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Critical Background"
ColorValue="#442726, 100%"
ShowSeparator="False" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Background="{ThemeResource SystemFillColorAttentionBrush}"
ColorBrushName="SystemFillColorAttentionBrush"
ColorExplanation="Badge"
ColorName="System / Attention"
ColorValue="#60CDFF (100%)"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />

</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Background="{ThemeResource SystemFillColorAttentionBrush}"
ColorBrushName="SystemFillColorAttentionBrush"
ColorExplanation="Badge"
ColorName="System / Attention"
ColorValue="#60CDFF (100%)"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorNeutralBrush}"
ColorBrushName="SystemFillColorNeutralBrush"
ColorExplanation="Badge"
ColorName="System / Neutral"
ColorValue="#FFFFFF (8B, 54,42%)"
Foreground="{ThemeResource TextFillColorInverseBrush}" />

<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorNeutralBrush}"
ColorBrushName="SystemFillColorNeutralBrush"
ColorExplanation="Badge"
ColorName="System / Neutral"
ColorValue="#FFFFFF (8B, 54,42%)"
Foreground="{ThemeResource TextFillColorInverseBrush}" />

<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidNeutralBrush}"
ColorBrushName="SystemFillColorSolidNeutralBrush"
ColorExplanation="Neutral badges over content"
ColorName="System / Solid Neutral"
ColorValue="#9D9D9D"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />

<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidNeutralBrush}"
ColorBrushName="SystemFillColorSolidNeutralBrush"
ColorExplanation="Neutral badges over content"
ColorName="System / Solid Neutral"
ColorValue="#9D9D9D"
Foreground="{ThemeResource TextFillColorInverseBrush}"
ShowSeparator="False" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Background="{ThemeResource SystemFillColorAttentionBackgroundBrush}"
ColorBrushName="SystemFillColorAttentionBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Attention Background"
ColorValue="#FFFFFF (0B, 3.26%)" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
ColorBrushName="SystemFillColorNeutralBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Neutral Background"
ColorValue="#FFFFFF (08, 3.26%)" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidNeutralBackgroundBrush}"
ColorBrushName="SystemFillColorSolidNeutralBackgroundBrush"
ColorExplanation="Neutral badges over content"
ColorName="System / Solid Neutral Background"
ColorValue="#2E2E2E" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidAttentionBackgroundBrush}"
ColorBrushName="SystemFillColorSolidAttentionBackgroundBrush"
ColorName="System / Solid Attention Background"
ColorValue="#2E2E2E"
ShowSeparator="False" />
</Grid>

</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Background="{ThemeResource SystemFillColorAttentionBackgroundBrush}"
ColorBrushName="SystemFillColorAttentionBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Attention Background"
ColorValue="#FFFFFF (0B, 3.26%)" />
<designguidance:ColorTile
Grid.Column="1"
Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
ColorBrushName="SystemFillColorNeutralBackgroundBrush"
ColorExplanation="Infobar Background"
ColorName="System / Neutral Background"
ColorValue="#FFFFFF (08, 3.26%)" />
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidNeutralBackgroundBrush}"
ColorBrushName="SystemFillColorSolidNeutralBackgroundBrush"
ColorExplanation="Neutral badges over content"
ColorName="System / Solid Neutral Background"
ColorValue="#2E2E2E" />
</Grid>
<Grid Style="{StaticResource GalleryTileGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<designguidance:ColorTile
Grid.Column="2"
Background="{ThemeResource SystemFillColorSolidAttentionBackgroundBrush}"
ColorBrushName="SystemFillColorSolidAttentionBackgroundBrush"
ColorName="System / Solid Attention Background"
ColorValue="#2E2E2E"
ShowSeparator="False" />
</Grid>

</StackPanel>
</StackPanel>
</wdc:SampleThemeListener>
</Page>
Loading