Speckle.Material.Avalonia/Material.Styles/Button.xaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:assists="clr-namespace:Material.Styles.Assists"
        xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
        xmlns:system="clr-namespace:System;assembly=netstandard"
        xmlns:naming="clr-namespace:Material.Styles.Resources.Naming" >
    <Styles.Resources>
        <system:Double x:Key="ButtonHoveredOpacity" >0.12</system:Double>
        <system:Double x:Key="ButtonDisabledOpacity" >0.38</system:Double>
        <system:Double x:Key="ButtonPressedOpacity" >0.26</system:Double>
    </Styles.Resources>

    <Style Selector="Button" >
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Padding" Value="16 8" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth1" />
        <Setter Property="assists:ButtonAssist.HoverColor"
                Value="{Binding Foreground,
                      Converter={StaticResource BrushRoundConverter}, RelativeSource={RelativeSource Self}}" />
        <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="#000000" />
        <Setter Property="TextBlock.FontWeight" Value="Medium" />
        <Setter Property="TextBlock.FontSize" Value="14" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ClipToBounds" Value="False" />
        <Setter Property="Template" >
            <ControlTemplate>
                <Border Name="{x:Static naming:PartNames.PartRootBorder}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        assists:ShadowAssist.ShadowDepth="{TemplateBinding assists:ShadowAssist.ShadowDepth}" >
                    <Panel Name="{x:Static naming:PartNames.PartRootPanel}">
                        <Border Name="{x:Static naming:PartNames.PartHoverEffect}"
                                Background="{TemplateBinding assists:ButtonAssist.HoverColor}"
                                CornerRadius="{TemplateBinding CornerRadius}" />
                        <Border CornerRadius="{TemplateBinding CornerRadius}"
                                ClipToBounds="True" >
                            <ripple:RippleEffect Name="{x:Static naming:PartNames.PartRipple}"
                                                 RippleFill="{TemplateBinding assists:ButtonAssist.ClickFeedbackColor}"
                                                 RippleOpacity="{StaticResource ButtonPressedOpacity}" >
                                <ContentPresenter Name="{x:Static naming:PartNames.PartContentPresenter}"
                                                  Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Padding="{TemplateBinding Padding}"
                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </ripple:RippleEffect>
                        </Border>
                    </Panel>
                </Border>
            </ControlTemplate>
        </Setter>
    </Style>
    
    <!-- Feedbacks -->

    <Style Selector="Button:not(:disabled):pointerover /template/ Border#PART_HoverEffect" >
        <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
    </Style>

    <Style Selector="Button:not(.flat):pointerover:not(.no-material) /template/ Border#PART_RootBorder" >
        <Setter Property="assists:ShadowAssist.Darken" Value="True" />
    </Style>
    
    
    <Style Selector="Button.light:not(.outline)" >
        <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" />
    </Style>
    
    <Style Selector="Button.dark:not(.outline)" >
        <Setter Property="Background" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
    </Style>
    
    <Style Selector="Button.accent:not(.outline)" >
        <Setter Property="Background" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
    </Style>
    
    <Style Selector="Button.flat" >
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="16 6" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
        <Setter Property="assists:ButtonAssist.HoverColor" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{Binding $self.Foreground}" />
    </Style>

    <!-- Default state -->

    <Style Selector="Button.accent.flat:not(.outline)" >
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
    </Style>
    
    <Style Selector="Button.flat:not(.outline):disabled">
        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    </Style>
    
    
    <Style Selector="Button.icon" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="12" />
        <Setter Property="Height" Value="32" />
        <Setter Property="Width" Value="32" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
        <Setter Property="CornerRadius" Value="100000"/>
    </Style>

    <!-- Outlined buttons -->

    <Style Selector="Button.outline" >
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="16 6" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
    </Style>

    <Style Selector="Button.outline.accent" >
        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
    </Style>

    <Style Selector="Button.outline.light" >
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightBrush}" />
    </Style>
    
    <Style Selector="Button.outline.dark" >
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}" />
    </Style>
    
    <Style Selector="Button.outline:disabled">
        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    </Style>
    
    <!-- Compatibility -->

    <!-- Transitions -->
    
    <Style Selector="Button:not(.no-transitions) /template/ Border#PART_RootBorder" >
        <Setter Property="Transitions" >
            <Transitions>
                <BrushTransition Duration="0.25" Property="Background" Easing="CircularEaseOut"/>
                <BrushTransition Duration="0.25" Property="BorderBrush" Easing="CircularEaseOut"/>
            </Transitions>
        </Setter>
    </Style>

    <Style Selector="Button:not(.no-transitions) /template/ Border#PART_HoverEffect" >
        <Setter Property="Transitions" >
            <Transitions>
                <DoubleTransition Duration="0:0:0.25" Property="Opacity" Easing="LinearEasing" />
            </Transitions>
        </Setter>
    </Style>

    <!-- Default state -->

    <Style Selector="Button /template/ Border#PART_HoverEffect" >
        <Setter Property="Opacity" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
    </Style>

    <Style Selector="Button:disabled:not(.no-material)" >
        <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
    </Style>

    <!-- Feedbacks -->

    <Style Selector="Button:not(:disabled):pointerover /template/ Border#PART_HoverEffect" >
        <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
    </Style>

    <Style Selector="Button:not(.Flat):pointerover:not(.no-material) /template/ Border#PART_RootBorder" >
        <Setter Property="assists:ShadowAssist.Darken" Value="True" />
    </Style>
    
    
    <Style Selector="Button.Light:not(.Outline)" >
        <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" />
    </Style>
    
    <Style Selector="Button.Dark:not(.Outline)" >
        <Setter Property="Background" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
    </Style>
    
    <Style Selector="Button.Accent:not(.Outline)" >
        <Setter Property="Background" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
    </Style>

    
    <Style Selector="Button:disabled">
        <Setter Property="Background" Value="{DynamicResource MaterialDesignBody}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    </Style>
    
    <Style Selector="Button.Flat" >
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="16 6" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
        <Setter Property="assists:ButtonAssist.HoverColor" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{Binding $self.Foreground}" />
    </Style>

    <!-- Default state -->

    <Style Selector="Button.Accent.Flat:not(.Outline)" >
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
    </Style>
    
    <Style Selector="Button.Flat:not(.Outline):disabled">
        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    </Style>
    
    
    <Style Selector="Button.Icon" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="12" />
        <Setter Property="Height" Value="32" />
        <Setter Property="Width" Value="32" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
        <Setter Property="CornerRadius" Value="100000"/>
    </Style>

    <!-- Outlined buttons -->

    <Style Selector="Button.Outline" >
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
        <Setter Property="Padding" Value="16 6" />
        <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
    </Style>

    <Style Selector="Button.Outline.Accent" >
        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryHueMidBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
    </Style>

    <Style Selector="Button.Outline.Light" >
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueLightBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightBrush}" />
    </Style>
    
    <Style Selector="Button.Outline.Dark" >
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueDarkBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}" />
    </Style>
    
    <Style Selector="Button.Outline:disabled">
        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignBody}" />
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    </Style>
</Styles>