TabView Colours Update (#6573)

microsoft · Jan 28, 2022 · 2e162a9 · 2e162a9
1 parent 8d59449
commit 2e162a9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/dev/CommonStyles/Common_themeresources_any.xaml b/dev/CommonStyles/Common_themeresources_any.xaml
@@ -86,6 +86,11 @@
             <Color x:Key="LayerOnAcrylicFillColorDefault">#09FFFFFF</Color>
             <Color x:Key="LayerOnAccentAcrylicFillColorDefault">#09FFFFFF</Color>
 
+            <Color x:Key="LayerOnMicaAltFillColorDefault">#733A3A3A</Color>
+            <Color x:Key="LayerOnMicaAltFillColorSecondary">#0FFFFFFF</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTertiary">#2C2C2C</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTransparent">#00FFFFFF</Color>
+
             <Color x:Key="SolidBackgroundFillColorBase">#202020</Color>
             <Color x:Key="SolidBackgroundFillColorSecondary">#1C1C1C</Color>
             <Color x:Key="SolidBackgroundFillColorTertiary">#282828</Color>
@@ -193,6 +198,11 @@
             <SolidColorBrush x:Key="LayerOnAcrylicFillColorDefaultBrush" Color="{StaticResource LayerOnAcrylicFillColorDefault}" />
             <SolidColorBrush x:Key="LayerOnAccentAcrylicFillColorDefaultBrush" Color="{StaticResource LayerOnAccentAcrylicFillColorDefault}" />
 
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorDefaultBrush" Color="{StaticResource LayerOnMicaAltFillColorDefault}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorSecondaryBrush" Color="{StaticResource LayerOnMicaAltFillColorSecondary}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTertiaryBrush" Color="{StaticResource LayerOnMicaAltFillColorTertiary}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTransparentBrush" Color="{StaticResource LayerOnMicaAltFillColorTransparent}" />
+
             <SolidColorBrush x:Key="SolidBackgroundFillColorBaseBrush" Color="{StaticResource SolidBackgroundFillColorBase}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorSecondaryBrush" Color="{StaticResource SolidBackgroundFillColorSecondary}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorTertiaryBrush" Color="{StaticResource SolidBackgroundFillColorTertiary}" />
@@ -331,6 +341,11 @@
             <Color x:Key="LayerOnAcrylicFillColorDefault">#40FFFFFF</Color>
             <Color x:Key="LayerOnAccentAcrylicFillColorDefault">#40FFFFFF</Color>
 
+            <Color x:Key="LayerOnMicaAltFillColorDefault">#B3FFFFFF</Color>
+            <Color x:Key="LayerOnMicaAltFillColorSecondary">#0A000000</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTertiary">#F9F9F9</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTransparent">#00000000</Color>
+
             <Color x:Key="SolidBackgroundFillColorBase">#F3F3F3</Color>
             <Color x:Key="SolidBackgroundFillColorSecondary">#EEEEEE</Color>
             <Color x:Key="SolidBackgroundFillColorTertiary">#F9F9F9</Color>
@@ -438,6 +453,11 @@
             <SolidColorBrush x:Key="LayerOnAcrylicFillColorDefaultBrush" Color="{StaticResource LayerOnAcrylicFillColorDefault}" />
             <SolidColorBrush x:Key="LayerOnAccentAcrylicFillColorDefaultBrush" Color="{StaticResource LayerOnAccentAcrylicFillColorDefault}" />
 
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorDefaultBrush" Color="{StaticResource LayerOnMicaAltFillColorDefault}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorSecondaryBrush" Color="{StaticResource LayerOnMicaAltFillColorSecondary}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTertiaryBrush" Color="{StaticResource LayerOnMicaAltFillColorTertiary}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTransparentBrush" Color="{StaticResource LayerOnMicaAltFillColorTransparent}" />
+
             <SolidColorBrush x:Key="SolidBackgroundFillColorBaseBrush" Color="{StaticResource SolidBackgroundFillColorBase}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorSecondaryBrush" Color="{StaticResource SolidBackgroundFillColorSecondary}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorTertiaryBrush" Color="{StaticResource SolidBackgroundFillColorTertiary}" />
@@ -584,6 +604,11 @@
             <SolidColorBrush x:Key="LayerOnAcrylicFillColorDefaultBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="LayerOnAccentAcrylicFillColorDefaultBrush" Color="{ThemeResource SystemColorWindowColor}"/>
 
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorDefaultBrush" Color="{ThemeResource SystemControlHighlightChromeHighBrush}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorSecondaryBrush" Color="{ThemeResource SystemControlHighlightChromeHighBrush}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTertiaryBrush" Color="{ThemeResource SystemControlHighlightChromeHighBrush}" />
+            <SolidColorBrush x:Key="LayerOnMicaAltFillColorTransparentBrush" Color="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
+
             <SolidColorBrush x:Key="SolidBackgroundFillColorBaseBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorSecondaryBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SolidBackgroundFillColorTertiaryBrush" Color="{ThemeResource SystemColorWindowColor}" />
@@ -666,6 +691,10 @@
             <Color x:Key="LayerFillColorAlt">#FF0000</Color>
             <Color x:Key="LayerOnAcrylicFillColorDefault">#FF0000</Color>
             <Color x:Key="LayerOnAccentAcrylicFillColorDefault">#FF0000</Color>
+            <Color x:Key="LayerOnMicaAltFillColorDefault">#FF0000</Color>
+            <Color x:Key="LayerOnMicaAltFillColorSecondary">#FF0000</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTertiary">#FF0000</Color>
+            <Color x:Key="LayerOnMicaAltFillColorTransparent">#FF0000</Color>
             <Color x:Key="SolidBackgroundFillColorBase">#FF0000</Color>
             <Color x:Key="SolidBackgroundFillColorSecondary">#FF0000</Color>
             <Color x:Key="SolidBackgroundFillColorTertiary">#FF0000</Color>

diff --git a/dev/TabView/TabView.xaml b/dev/TabView/TabView.xaml
@@ -98,6 +98,7 @@
 
                         <ContentPresenter x:Name="TabContentPresenter"
                             Grid.Row="1"
+                            Background="{ThemeResource TabViewItemHeaderBackgroundSelected}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}" />
                     </Grid>

diff --git a/dev/TabView/TabView_themeresources.xaml b/dev/TabView/TabView_themeresources.xaml
@@ -7,11 +7,11 @@
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Light">
             <StaticResource x:Key="TabViewBackground"                                       ResourceKey="SubtleFillColorTransparentBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackground"                             ResourceKey="SubtleFillColorTransparentBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"                     ResourceKey="SolidBackgroundFillColorTertiaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"                  ResourceKey="SubtleFillColorSecondaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"                      ResourceKey="SubtleFillColorTertiaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundDisabled"                     ResourceKey="SubtleFillColorTransparentBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackground"                             ResourceKey="LayerOnMicaAltFillColorTransparentBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"                     ResourceKey="LayerOnMicaAltFillColorDefaultBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"                  ResourceKey="LayerOnMicaAltFillColorSecondaryBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"                      ResourceKey="LayerOnMicaAltFillColorDefaultBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundDisabled"                     ResourceKey="LayerOnMicaAltFillColorTransparentBrush" />
             <StaticResource x:Key="TabViewItemHeaderForeground"                             ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundPressed"                      ResourceKey="TextFillColorTertiaryBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundSelected"                     ResourceKey="TextFillColorPrimaryBrush" />
@@ -73,11 +73,11 @@
 
         <ResourceDictionary x:Key="Dark">
             <StaticResource x:Key="TabViewBackground"                                       ResourceKey="SubtleFillColorTransparentBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackground"                             ResourceKey="SubtleFillColorTransparentBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"                     ResourceKey="SolidBackgroundFillColorTertiaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"                  ResourceKey="SubtleFillColorSecondaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"                      ResourceKey="SubtleFillColorTertiaryBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundDisabled"                     ResourceKey="SubtleFillColorTransparentBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackground"                             ResourceKey="LayerOnMicaAltFillColorTransparentBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"                     ResourceKey="LayerOnMicaAltFillColorDefaultBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"                  ResourceKey="LayerOnMicaAltFillColorSecondaryBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"                      ResourceKey="LayerOnMicaAltFillColorDefaultBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundDisabled"                     ResourceKey="LayerOnMicaAltFillColorTransparentBrush" />
             <StaticResource x:Key="TabViewItemHeaderForeground"                             ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundPressed"                      ResourceKey="TextFillColorTertiaryBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundSelected"                     ResourceKey="TextFillColorPrimaryBrush" />
@@ -201,6 +201,7 @@
                     <GradientStop Offset="1.0" Color="{ThemeResource SystemColorHighlightColor}"/>
                 </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
+
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 

diff --git a/dev/TabView/TestUI/TabViewPage.xaml b/dev/TabView/TestUI/TabViewPage.xaml
@@ -135,7 +135,7 @@
 
                     <controls:TabView.Resources>
                         <ResourceDictionary>
-                            <SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="#88FFFFFF"/>
+                            <SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="AliceBlue"/>
                         </ResourceDictionary>
                     </controls:TabView.Resources>