PowerToys/src/common/Common.UI.Controls/Controls/KeyVisual/KeyVisual.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:commoncontrols="using:Microsoft.PowerToys.Common.UI.Controls">

    <Style BasedOn="{StaticResource DefaultKeyVisualStyle}" TargetType="commoncontrols:KeyVisual" />

    <Style x:Key="DefaultKeyVisualStyle" TargetType="commoncontrols:KeyVisual">
        <Setter Property="MinWidth" Value="16" />
        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="MinHeight" Value="16" />
        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="4,4,4,4" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="commoncontrols:KeyVisual">
                    <Grid
                        x:Name="KeyHolder"
                        MinWidth="{TemplateBinding MinWidth}"
                        MinHeight="{TemplateBinding MinHeight}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid.BackgroundTransition>
                            <BrushTransition Duration="0:0:0.083" />
                        </Grid.BackgroundTransition>
                        <commoncontrols:KeyCharPresenter
                            x:Name="KeyPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            AutomationProperties.AccessibilityView="Raw"
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
                            Foreground="{TemplateBinding Foreground}" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Invalid">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                        <Setter Target="KeyHolder.BorderThickness" Value="1" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Warning">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCautionBackgroundBrush}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCautionBrush}" />
                                        <Setter Target="KeyHolder.BorderThickness" Value="1" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCautionBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style
        x:Key="SubtleKeyVisualStyle"
        BasedOn="{StaticResource DefaultKeyVisualStyle}"
        TargetType="commoncontrols:KeyVisual">
        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="commoncontrols:KeyVisual">
                    <Grid
                        x:Name="KeyHolder"
                        MinWidth="{TemplateBinding MinWidth}"
                        MinHeight="{TemplateBinding MinHeight}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid.BackgroundTransition>
                            <BrushTransition Duration="0:0:0.083" />
                        </Grid.BackgroundTransition>
                        <commoncontrols:KeyCharPresenter
                            x:Name="KeyPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            AutomationProperties.AccessibilityView="Raw"
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
                            Foreground="{TemplateBinding Foreground}" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Invalid">
                                    <VisualState.Setters>
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Warning">
                                    <VisualState.Setters>
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCautionBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style
        x:Key="AccentKeyVisualStyle"
        BasedOn="{StaticResource DefaultKeyVisualStyle}"
        TargetType="commoncontrols:KeyVisual">
        <Setter Property="Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource AccentControlElevationBorderBrush}" />
        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="commoncontrols:KeyVisual">
                    <Grid
                        x:Name="KeyHolder"
                        MinWidth="{TemplateBinding MinWidth}"
                        MinHeight="{TemplateBinding MinHeight}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        AutomationProperties.AccessibilityView="Raw"
                        Background="{TemplateBinding Background}"
                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid.BackgroundTransition>
                            <BrushTransition Duration="0:0:0.083" />
                        </Grid.BackgroundTransition>
                        <commoncontrols:KeyCharPresenter
                            x:Name="KeyPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
                            Foreground="{TemplateBinding Foreground}" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource AccentButtonBackgroundDisabled}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Invalid">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                        <Setter Target="KeyHolder.BorderThickness" Value="1" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Warning">
                                    <VisualState.Setters>
                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCautionBackgroundBrush}" />
                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCautionBrush}" />
                                        <Setter Target="KeyHolder.BorderThickness" Value="1" />
                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCautionBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>