Skip to content

Commit

Permalink
[TabView] Update high contrast colors | MicaAlt colors - update high …
Browse files Browse the repository at this point in the history 
…contrast colors (#6787)

* date pickers

* adding time picker and flyout theming

* update background smoke for hc

* tab view hc updates

* updating the rest of the hc old brushes to new references, also, a bug on press on tab vs press on close button - fixed now
  • Loading branch information
@tashatitova
tashatitova authored Mar 4, 2022
1 parent 397647e commit 6fb99c9
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 51 deletions.
8 changes: 4 additions & 4 deletions dev/CommonStyles/Common_themeresources_any.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,10 +604,10 @@
<SolidColorBrush x:Key="LayerOnAcrylicFillColorDefaultBrush" Color="{ThemeResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="LayerOnAccentAcrylicFillColorDefaultBrush" Color="{ThemeResource SystemColorWindowColor}"/>

<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorDefaultBrush" Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorSecondaryBrush" Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorTertiaryBrush" Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorTransparentBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorDefaultBrush" Color="{ThemeResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorSecondaryBrush" Color="{ThemeResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorTertiaryBrush" Color="{ThemeResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="LayerOnMicaBaseAltFillColorTransparentBrush" Color="{ThemeResource SystemColorWindowColor}" />

<SolidColorBrush x:Key="SolidBackgroundFillColorBaseBrush" Color="{ThemeResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="SolidBackgroundFillColorSecondaryBrush" Color="{ThemeResource SystemColorWindowColor}" />
Expand Down
19 changes: 17 additions & 2 deletions dev/TabView/TabView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,8 @@
<Setter Property="Height" Value="{ThemeResource TabViewItemHeaderCloseButtonHeight}"/>
<Setter Property="Background" Value="{ThemeResource TabViewItemHeaderCloseButtonBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource TabViewItemHeaderCloseButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource TabViewItemHeaderCloseButtonBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource TabViewItemHeaderCloseButtonBorderThickness}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
Expand All @@ -308,6 +310,8 @@
AutomationProperties.AccessibilityView="Raw"
contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
Expand All @@ -326,6 +330,9 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
Expand All @@ -336,6 +343,9 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonForegroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonBorderBrushPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
Expand Down Expand Up @@ -470,6 +480,7 @@
<Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}"/>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />

This comment has been minimized.

Sign in to view

Copy link
@yaira2

yaira2 Apr 21, 2022

Contributor

@tashatitova is this intended? It's causing an issue where there are two layers of mica. This is preventing us from correctly overriding the styles in our app since it has the wrong transparency.

This comment has been minimized.

Sign in to view

Copy link
@tashatitova

tashatitova Apr 22, 2022

Author Contributor

Oh I see. We should file this as a bug and use a separate brush here.
<Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}"/>
<Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}"/>
<Setter Target="TabContainer.BorderThickness" Value="{ThemeResource TabViewSelectedItemBorderThickness}"/>
Expand All @@ -490,6 +501,7 @@
<Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}"/>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}"/>
<Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}"/>
<Setter Target="TabContainer.BorderThickness" Value="{ThemeResource TabViewSelectedItemBorderThickness}"/>
Expand All @@ -498,6 +510,7 @@
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />

<Setter Target="LayoutRoot.Background" Value="Transparent"/>
<Setter Target="ContentPresenter.FontWeight" Value="SemiBold"/>
</VisualState.Setters>
Expand All @@ -510,6 +523,7 @@
<Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Visibility" Value="Visible"/>
<Setter Target="SelectedBackgroundPath.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}"/>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}"/>
<Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}"/>
<Setter Target="TabContainer.BorderThickness" Value="{ThemeResource TabViewSelectedItemBorderThickness}"/>
Expand All @@ -535,6 +549,7 @@
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonForeground}" />
<Setter Target="CloseButton.BorderBrush" Value="{ThemeResource TabViewItemHeaderCloseButtonBorderBrushDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down Expand Up @@ -708,7 +723,7 @@

<Path x:Name="LeftRadiusRenderArc"
x:Load="False"
Fill="{ThemeResource CardStrokeColorDefault}"
Fill="{ThemeResource TabViewBorderBrush}"
VerticalAlignment="Bottom"
Visibility="Collapsed"
Margin="-4,0,0,0"
Expand All @@ -720,7 +735,7 @@
x:Load="False"
Grid.Column="2"
Visibility="Collapsed"
Fill="{ThemeResource CardStrokeColorDefault}"
Fill="{ThemeResource TabViewBorderBrush}"
VerticalAlignment="Bottom"
Margin="0,0,-4,0"
Height="4"
Expand Down
Loading

0 comments on commit 6fb99c9

Please sign in to comment.