Repository: microsoft/terminal (language: cpp)

Issue:
"No matching commands" overlaps Back button in nested command palette
Things get a little ugly if you "Type a command name" while in a dialog (for example, the "New Tab..." dialog).

![image](https://user-images.githubusercontent.com/61856645/164736654-2da37fef-1d6f-413b-b06c-3e768691b568.png)

And, when in a dialog, `Esc` closes the command palette (when returning to the command palette was expected).


Discussion / hints:

Fix patch:
diff --git a/src/cascadia/TerminalApp/App.xaml b/src/cascadia/TerminalApp/App.xaml
index 1ddf3e82b0b..6e51c5797ee 100644
--- a/src/cascadia/TerminalApp/App.xaml
+++ b/src/cascadia/TerminalApp/App.xaml
@@ -48,8 +48,8 @@
                     <!--  Suppress top padding  -->
                     <Thickness x:Key="TabViewHeaderPadding">9,0,8,0</Thickness>
 
-                    <!--  Remove when implementing WinUI 2.6  -->
-                    <Thickness x:Key="FlyoutContentPadding">12</Thickness>
+                    <!--  Shadow that can be used by any control.  -->
+                    <ThemeShadow x:Name="SharedShadow" />
 
                     <ResourceDictionary.ThemeDictionaries>
                         <ResourceDictionary x:Key="Dark">
diff --git a/src/cascadia/TerminalApp/CommandPalette.cpp b/src/cascadia/TerminalApp/CommandPalette.cpp
index 68a8a6c003c..52edb7a9ffd 100644
--- a/src/cascadia/TerminalApp/CommandPalette.cpp
+++ b/src/cascadia/TerminalApp/CommandPalette.cpp
@@ -39,17 +39,6 @@ namespace winrt::TerminalApp::implementation
 
         _switchToMode(CommandPaletteMode::ActionMode);
 
-        if (CommandPaletteShadow())
-        {
-            // Hook up the shadow on the command palette to the backdrop that
-            // will actually show it. This needs to be done at runtime, and only
-            // if the shadow actually exists. ThemeShadow isn't supported below
-            // version 18362.
-            CommandPaletteShadow().Receivers().Append(_shadowBackdrop());
-            // "raise" the command palette up by 16 units, so it will cast a shadow.
-            _backdrop().Translation({ 0, 0, 16 });
-        }
-
         // Whatever is hosting us will enable us by setting our visibility to
         // "Visible". When that happens, set focus to our search box.
         RegisterPropertyChangedCallback(UIElement::VisibilityProperty(), [this](auto&&, auto&&) {
diff --git a/src/cascadia/TerminalApp/CommandPalette.xaml b/src/cascadia/TerminalApp/CommandPalette.xaml
index 11fa61807c0..ce1581b3605 100644
--- a/src/cascadia/TerminalApp/CommandPalette.xaml
+++ b/src/cascadia/TerminalApp/CommandPalette.xaml
@@ -6,7 +6,6 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
-             xmlns:Windows10version1903="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:TerminalApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -24,13 +23,6 @@
 
     <UserControl.Resources>
         <ResourceDictionary>
-
-            <!--
-                ThemeShadow is only on 18362. This "Windows10version1903" bit
-                adds it conditionally
-            -->
-            <Windows10version1903:ThemeShadow x:Name="CommandPaletteShadow" />
-
             <!--  This creates an instance of our CommandKeyChordVisibilityConverter we can reference below  -->
             <local:EmptyStringVisibilityConverter x:Key="CommandKeyChordVisibilityConverter" />
             <local:EmptyStringVisibilityConverter x:Key="ParsedCommandLineTextVisibilityConverter" />
@@ -142,16 +134,11 @@
                                    Text="{x:Bind Item.KeyChordText, Mode=OneWay}" />
                     </Border>
 
-                    <!--  xE70E is ChevronUp. Rotated 90 degrees, it's _ChevronRight_  -->
                     <FontIcon Grid.Column="2"
                               HorizontalAlignment="Right"
                               FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                              Glyph="&#xE70E;">
-
-                        <FontIcon.RenderTransform>
-                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
-                        </FontIcon.RenderTransform>
-                    </FontIcon>
+                              FontSize="12"
+                              Glyph="&#xE76C;" />
 
                 </Grid>
             </DataTemplate>
@@ -228,48 +215,13 @@
 
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Dark">
-                    <Style x:Key="CommandPaletteBackground"
-                           TargetType="Grid">
-                        <Setter Property="Background" Value="#333333" />
-                    </Style>
-                    <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground"
-                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlForeground"
-                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground"
-                                     Color="#B5B5B5" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlForegroundPointerOver"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
-                                     Color="#FF4343" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlForegroundFocused"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
-                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
                     <Style x:Key="KeyChordBorderStyle"
                            TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
+                        <Setter Property="CornerRadius" Value="2" />
+                        <Setter Property="Background" Value="Transparent" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
                     <Style x:Key="KeyChordTextBlockStyle"
@@ -281,9 +233,9 @@
                     <Style x:Key="ParsedCommandLineBorderStyle"
                            TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
-                        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+                        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+                        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
                     </Style>
                     <Style x:Key="ParsedCommandLineTextBlockStyle"
                            TargetType="TextBlock">
@@ -291,42 +243,13 @@
                     </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
-                    <Style x:Key="CommandPaletteBackground"
-                           TargetType="Grid">
-                        <Setter Property="Background" Value="#CCCCCC" />
-                    </Style>
-                    <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground"
-                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground"
-                                     Color="#636363" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
-                                     Color="#FF4343" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
-                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
                     <Style x:Key="KeyChordBorderStyle"
                            TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
+                        <Setter Property="CornerRadius" Value="2" />
+                        <Setter Property="Background" Value="Transparent" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
                     <Style x:Key="KeyChordTextBlockStyle"
@@ -338,9 +261,9 @@
                     <Style x:Key="ParsedCommandLineBorderStyle"
                            TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
-                        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+                        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+                        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
                     </Style>
                     <Style x:Key="ParsedCommandLineTextBlockStyle"
                            TargetType="TextBlock">
@@ -348,10 +271,6 @@
                     </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
-                    <Style x:Key="CommandPaletteBackground"
-                           TargetType="Grid">
-                        <Setter Property="Background" Value="{ThemeResource SystemColorWindowColor}" />
-                    </Style>
 
                     <!--  KeyChordText styles (use XAML defaults for High Contrast theme)  -->
                     <Style x:Key="KeyChordBorderStyle"
@@ -381,37 +300,23 @@
             <RowDefinition Height="2*" />
         </Grid.RowDefinitions>
 
-        <!--
-            Setting the row/col span of this shadow backdrop is a bit of a hack. In
-            order to receive pointer events, an element needs to be _not_ transparent.
-            However, we want to be able to eat all the clicks outside the immediate
-            bounds of the command palette, and we don't want a semi-transparent overlay
-            over all of the UI. Fortunately, if we make this _shadowBackdrop the size of
-            the entire page, then it can be mostly transparent, and cause the root grid
-            to receive clicks _anywhere_ in its bounds.
-        -->
-
-        <Grid x:Name="_shadowBackdrop"
-              Grid.Row="0"
-              Grid.RowSpan="2"
-              Grid.Column="0"
-              Grid.ColumnSpan="3"
-              HorizontalAlignment="Stretch"
-              VerticalAlignment="Stretch"
-              Background="Transparent" />
-
         <Grid x:Name="_backdrop"
               Grid.Row="0"
               Grid.Column="1"
               Margin="8"
+              Padding="0,8,0,0"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Top"
-              Windows10version1903:Shadow="{StaticResource CommandPaletteShadow}"
+              Background="{ThemeResource FlyoutPresenterBackground}"
+              BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
+              BorderThickness="{ThemeResource FlyoutBorderThemeThickness}"
               CornerRadius="{ThemeResource OverlayCornerRadius}"
               PointerPressed="_backdropPointerPressed"
-              Style="{ThemeResource CommandPaletteBackground}">
+              Shadow="{StaticResource SharedShadow}"
+              Translation="0,0,32">
 
             <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
@@ -419,7 +324,7 @@
 
             <TextBox x:Name="_searchBox"
                      Grid.Row="0"
-                     Margin="8"
+                     Margin="8,0,8,8"
                      Padding="18,8,8,8"
                      IsSpellCheckEnabled="False"
                      PlaceholderText="{x:Bind SearchBoxPlaceholderText, Mode=OneWay}"
@@ -428,45 +333,39 @@
 
             <TextBlock x:Name="_prefixCharacter"
                        Grid.Row="0"
-                       Margin="16,16,0,-8"
+                       Margin="8,0,8,8"
+                       Padding="8,0,0,0"
                        HorizontalAlignment="Left"
+                       VerticalAlignment="Center"
                        FontSize="14"
                        Text="{x:Bind PrefixCharacter, Mode=OneWay}"
                        Visibility="{x:Bind PrefixCharacter, Mode=OneWay, Converter={StaticResource ParentCommandVisibilityConverter}}" />
 
             <StackPanel Grid.Row="1"
-                        Padding="16,0,16,4"
+                        Margin="8,0,8,8"
                         Orientation="Horizontal"
                         Visibility="{x:Bind ParentCommandName, Mode=OneWay, Converter={StaticResource ParentCommandVisibilityConverter}}">
 
                 <Button x:Name="_parentCommandBackButton"
                         x:Uid="ParentCommandBackButton"
                         VerticalAlignment="Center"
-                        Background="Transparent"
                         Click="_moveBackButtonClicked"
                         ClickMode="Press">
                     <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                              FontSize="12"
+                              FontSize="11"
                               Glyph="&#xE76b;" />
                 </Button>
 
                 <TextBlock x:Name="_parentCommandText"
-                           Grid.Row="1"
-                           Padding="16,0,16,4"
+                           Padding="16,4"
                            VerticalAlignment="Center"
                            FontStyle="Italic"
                            Text="{x:Bind ParentCommandName, Mode=OneWay}" />
             </StackPanel>
 
-            <TextBlock x:Name="_noMatchesText"
-                       Grid.Row="1"
-                       Padding="16"
-                       FontStyle="Italic"
-                       Text="{x:Bind NoMatchesText, Mode=OneWay}"
-                       Visibility="Collapsed" />
-
             <Border Grid.Row="1"
-                    Padding="16"
+                    Margin="8,0,8,8"
+                    Padding="16,12"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Center"
                     Style="{ThemeResource ParsedCommandLineBorderStyle}"
@@ -480,8 +379,20 @@
                 </ScrollViewer>
             </Border>
 
+            <Border x:Name="_noMatchesText"
+                    Grid.Row="3"
+                    Height="36"
+                    Margin="8,0,8,8"
+                    Visibility="Collapsed">
+                <TextBlock Padding="12,0"
+                           VerticalAlignment="Center"
+                           FontStyle="Italic"
+                           Text="{x:Bind NoMatchesText, Mode=OneWay}" />
+            </Border>
+
             <ListView x:Name="_filteredActionsView"
-                      Grid.Row="2"
+                      Grid.Row="3"
+                      Padding="4,-2,4,6"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       AllowDrop="False"
diff --git a/src/cascadia/TerminalControl/SearchBoxControl.xaml b/src/cascadia/TerminalControl/SearchBoxControl.xaml
index e61bfbd6453..c0716e39d44 100644
--- a/src/cascadia/TerminalControl/SearchBoxControl.xaml
+++ b/src/cascadia/TerminalControl/SearchBoxControl.xaml
@@ -14,255 +14,176 @@
 
     <UserControl.Resources>
         <ResourceDictionary>
-            <Style x:Key="ToggleButtonStyle"
-                   TargetType="ToggleButton">
-                <Setter Property="Width" Value="24" />
-                <Setter Property="Height" Value="24" />
-                <Setter Property="Background" Value="Transparent" />
-                <Setter Property="BorderBrush" Value="Transparent" />
-                <Setter Property="Padding" Value="0" />
-                <Setter Property="Margin" Value="2,0" />
-                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
-            </Style>
-            <Style x:Key="ButtonStyle"
-                   TargetType="Button">
-                <Setter Property="Width" Value="24" />
-                <Setter Property="Height" Value="24" />
-                <Setter Property="Background" Value="Transparent" />
-                <Setter Property="BorderBrush" Value="Transparent" />
-                <Setter Property="Padding" Value="0" />
-                <Setter Property="Margin" Value="6,0,0,0" />
-                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
-            </Style>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Dark">
                     <Style x:Key="FontIconStyle"
                            TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground"
-                           TargetType="StackPanel">
-                        <Setter Property="Background" Value="#333333" />
-                    </Style>
-                    <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground"
-                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlForeground"
-                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground"
-                                     Color="#B5B5B5" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlForegroundPointerOver"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
-                                     Color="#FF4343" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlForegroundFocused"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
-                                     Color="#FF4343" />
 
                     <!--  ToggleButton colors !  -->
-                    <SolidColorBrush x:Key="ToggleButtonForeground"
-                                     Color="#B5B5B5" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed"
-                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked"
-                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed"
-                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed"
-                                     Color="Transparent" />
+                    <StaticResource x:Key="ToggleButtonBackground"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundPointerOver"
+                                    ResourceKey="SubtleFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundPressed"
+                                    ResourceKey="SubtleFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBorderBrush"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushPointerOver"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushPressed"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+
+                    <StaticResource x:Key="ToggleButtonForegroundChecked"
+                                    ResourceKey="TextFillColorPrimaryBrush" />
+                    <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver"
+                                    ResourceKey="TextFillColorPrimaryBrush" />
+                    <StaticResource x:Key="ToggleButtonForegroundCheckedPressed"
+                                    ResourceKey="TextFillColorSecondaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBackgroundChecked"
+                                    ResourceKey="ControlFillColorDefaultBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver"
+                                    ResourceKey="ControlFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed"
+                                    ResourceKey="ControlFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBorderBrushChecked"
+                                    ResourceKey="ControlElevationBorderBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver"
+                                    ResourceKey="ControlElevationBorderBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed"
+                                    ResourceKey="ControlStrokeColorDefaultBrush" />
+
+                    <BackgroundSizing x:Key="ToggleButtonCheckedStateBackgroundSizing">InnerBorderEdge</BackgroundSizing>
 
                     <!--  Button color !  -->
-                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
-                                     Color="Transparent" />
+                    <StaticResource x:Key="ButtonBackground"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBackgroundPointerOver"
+                                    ResourceKey="SubtleFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ButtonBackgroundPressed"
+                                    ResourceKey="SubtleFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ButtonBorderBrush"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBorderBrushPointerOver"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBorderBrushPressed"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
 
-                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPressed"
-                                     Color="Transparent" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Style x:Key="FontIconStyle"
                            TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground"
-                           TargetType="StackPanel">
-                        <Setter Property="Background" Value="#CCCCCC" />
-                    </Style>
-                    <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground"
-                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground"
-                                     Color="#636363" />
-
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
-                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                                     Color="#636363" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
-                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
-                                     Color="#FF4343" />
                     <!--  ToggleButton colors !  -->
-                    <SolidColorBrush x:Key="ToggleButtonForeground"
-                                     Color="#636363" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver"
-                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed"
-                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked"
-                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver"
-                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver"
-                                     Color="Transparent" />
-
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed"
-                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed"
-                                     Color="Transparent" />
+                    <StaticResource x:Key="ToggleButtonBackground"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundPointerOver"
+                                    ResourceKey="SubtleFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundPressed"
+                                    ResourceKey="SubtleFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBorderBrush"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushPointerOver"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushPressed"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+
+                    <StaticResource x:Key="ToggleButtonForegroundChecked"
+                                    ResourceKey="TextFillColorPrimaryBrush" />
+                    <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver"
+                                    ResourceKey="TextFillColorPrimaryBrush" />
+                    <StaticResource x:Key="ToggleButtonForegroundCheckedPressed"
+                                    ResourceKey="TextFillColorSecondaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBackgroundChecked"
+                                    ResourceKey="ControlFillColorDefaultBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver"
+                                    ResourceKey="ControlFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed"
+                                    ResourceKey="ControlFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ToggleButtonBorderBrushChecked"
+                                    ResourceKey="ControlElevationBorderBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver"
+                                    ResourceKey="ControlElevationBorderBrush" />
+                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed"
+                                    ResourceKey="ControlStrokeColorDefaultBrush" />
+
+                    <BackgroundSizing x:Key="ToggleButtonCheckedStateBackgroundSizing">InnerBorderEdge</BackgroundSizing>
 
                     <!--  Button color !  -->
-                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
-                                     Color="Transparent" />
+                    <StaticResource x:Key="ButtonBackground"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBackgroundPointerOver"
+                                    ResourceKey="SubtleFillColorSecondaryBrush" />
+                    <StaticResource x:Key="ButtonBackgroundPressed"
+                                    ResourceKey="SubtleFillColorTertiaryBrush" />
+
+                    <StaticResource x:Key="ButtonBorderBrush"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBorderBrushPointerOver"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
+                    <StaticResource x:Key="ButtonBorderBrushPressed"
+                                    ResourceKey="SubtleFillColorTransparentBrush" />
 
-                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                     Color="#000000" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPressed"
-                                     Color="Transparent" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <Style x:Key="FontIconStyle"
                            TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground"
-                           TargetType="StackPanel">
-                        <Setter Property="Background" Value="{ThemeResource SystemColorWindowColor}" />
-                    </Style>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
 
     <StackPanel Margin="8"
-                Padding="8"
+                Padding="4,8"
+                Background="{ThemeResource FlyoutPresenterBackground}"
+                BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
+                BorderThickness="{ThemeResource FlyoutBorderThemeThickness}"
                 CornerRadius="{ThemeResource OverlayCornerRadius}"
                 Orientation="Horizontal"
-                Style="{ThemeResource SearchBoxBackground}">
+                Shadow="{StaticResource SharedShadow}"
+                Translation="0,0,16">
         <TextBox x:Name="TextBox"
                  x:Uid="SearchBox_TextBox"
                  Width="160"
-                 Margin="0,0,6,0"
+                 Margin="4,0"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Center"
-                 CornerRadius="2"
-                 FontSize="15"
                  IsSpellCheckEnabled="False"
-                 KeyDown="TextBoxKeyDown"
-                 PlaceholderForeground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" />
+                 KeyDown="TextBoxKeyDown" />
 
         <ToggleButton x:Name="GoBackwardButton"
                       x:Uid="SearchBox_SearchBackwards"
-                      HorizontalAlignment="Right"
+                      Width="32"
+                      Height="32"
+                      Margin="4,0"
+                      Padding="0"
+                      BackgroundSizing="OuterBorderEdge"
                       Click="GoBackwardClicked"
-                      IsChecked="True"
-                      Style="{StaticResource ToggleButtonStyle}">
+                      IsChecked="True">
             <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Glyph="&#xE74A;"
                       Style="{ThemeResource FontIconStyle}" />
         </ToggleButton>
         <ToggleButton x:Name="GoForwardButton"
                       x:Uid="SearchBox_SearchForwards"
-                      Click="GoForwardClicked"
-                      Style="{StaticResource ToggleButtonStyle}">
+                      Width="32"
+                      Height="32"
+                      Margin="4,0"
+                      Padding="0"
+                      BackgroundSizing="OuterBorderEdge"
+                      Click="GoForwardClicked">
             <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Glyph="&#xE74B;"
                       Style="{ThemeResource FontIconStyle}" />
@@ -270,14 +191,22 @@
 
         <ToggleButton x:Name="CaseSensitivityButton"
                       x:Uid="SearchBox_CaseSensitivity"
-                      Style="{StaticResource ToggleButtonStyle}">
+                      Width="32"
+                      Height="32"
+                      Margin="4,0"
+                      Padding="0"
+                      BackgroundSizing="OuterBorderEdge">
             <PathIcon Data="M8.87305 10H7.60156L6.5625 7.25195H2.40625L1.42871 10H0.150391L3.91016 0.197266H5.09961L8.87305 10ZM6.18652 6.21973L4.64844 2.04297C4.59831 1.90625 4.54818 1.6875 4.49805 1.38672H4.4707C4.42513 1.66471 4.37272 1.88346 4.31348 2.04297L2.78906 6.21973H6.18652ZM15.1826 10H14.0615V8.90625H14.0342C13.5465 9.74479 12.8288 10.1641 11.8809 10.1641C11.1836 10.1641 10.6367 9.97949 10.2402 9.61035C9.84831 9.24121 9.65234 8.7513 9.65234 8.14062C9.65234 6.83268 10.4225 6.07161 11.9629 5.85742L14.0615 5.56348C14.0615 4.37402 13.5807 3.7793 12.6191 3.7793C11.776 3.7793 11.015 4.06641 10.3359 4.64062V3.49219C11.0241 3.05469 11.8171 2.83594 12.7148 2.83594C14.36 2.83594 15.1826 3.70638 15.1826 5.44727V10ZM14.0615 6.45898L12.373 6.69141C11.8535 6.76432 11.4616 6.89421 11.1973 7.08105C10.9329 7.26335 10.8008 7.58919 10.8008 8.05859C10.8008 8.40039 10.9215 8.68066 11.1631 8.89941C11.4092 9.11361 11.735 9.2207 12.1406 9.2207C12.6966 9.2207 13.1546 9.02702 13.5146 8.63965C13.8792 8.24772 14.0615 7.75326 14.0615 7.15625V6.45898Z" />
         </ToggleButton>
 
         <Button x:Name="CloseButton"
                 x:Uid="SearchBox_Close"
-                Click="CloseClick"
-                Style="{ThemeResource ButtonStyle}">
+                Width="32"
+                Height="32"
+                Margin="4,0"
+                Padding="0"
+                BackgroundSizing="OuterBorderEdge"
+                Click="CloseClick">
             <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       FontSize="12"
                       Glyph="&#xE711;" />


Test patch: