zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Button Outline theme & colors.

Browse Source 
* add Outline Theme to Button.
* :disabled, Tertiary Classes Button color.
This commit is contained in:
Zhang Dian 2024-07-22 20:48:04 +08:00
parent d41d1ff9d4
commit 2b37df580f
12 changed files with 434 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
View File

@ -4,114 +4,176 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">Primary</Button>
<Button Classes="Secondary">Secondary</Button>
<Button Classes="Tertiary">Tertiary</Button>
<Button Classes="Success">Success</Button>
<Button Classes="Warning">Warning</Button>
<Button Classes="Danger">Danger</Button>
<Button Classes="Primary" IsEnabled="False">Danger</Button>
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel.Styles>
<Style Selector="SplitButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
<Style Selector="DropDownButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
<Style Selector="ToggleSplitButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
</StackPanel.Styles>
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">Primary</Button>
<Button Classes="Secondary">Secondary</Button>
<Button Classes="Tertiary">Tertiary</Button>
<Button Classes="Success">Success</Button>
<Button Classes="Warning">Warning</Button>
<Button Classes="Danger">Danger</Button>
<Button Classes="Danger" IsEnabled="False">Disabled</Button>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
<Button
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource SolidButton}">
Disabled
</Button>
</StackPanel>
<TextBlock>Outline</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
<Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
<Button
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource BorderlessButton}">
Disabled
</Button>
</StackPanel>
<TextBlock>Disabled</TextBlock>
<StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
<Button IsEnabled="False">Light</Button>
<Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
<Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
<Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
</StackPanel>
<TextBlock>Size Classes</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary Small">Small</Button>
<Button Classes="Primary">Default</Button>
<Button Classes="Primary Large">Large</Button>
</StackPanel>
<TextBlock>DropDownButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Primary" />
<DropDownButton Classes="Secondary" Content="Secondary" />
<DropDownButton Classes="Tertiary" Content="Tertiary" />
<DropDownButton Classes="Success" Content="Success" />
<DropDownButton Classes="Warning" Content="Warning" />
<DropDownButton Classes="Danger" Content="Danger" />
<DropDownButton
Classes="Danger"
Content="Disabled"
IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Default" Classes="Success"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
<DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
<DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Classes="Small" Content="Small" />
<DropDownButton Content="Default" />
<DropDownButton Classes="Large" Content="Large" />
</StackPanel>
<TextBlock>SplitButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Primary" />
<SplitButton Classes="Secondary" Content="Secondary" />
<SplitButton Classes="Tertiary" Content="Tertiary" />
<SplitButton Classes="Success" Content="Success" />
<SplitButton Classes="Warning" Content="Warning" />
<SplitButton Classes="Danger" Content="Danger" />
<SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Default" Classes="Success" />
<SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" />
<SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
<SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
<SplitButton Content="Default" Classes="Success" IsEnabled="False" />
<SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
<SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
<SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Classes="Small" Content="Small" />
<SplitButton Content="Default" />
<SplitButton Classes="Large" Content="Large" />
</StackPanel>
<TextBlock>ToggleSplitButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Content="Primary" />
<ToggleSplitButton Classes="Secondary" Content="Secondary" />
<ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
<ToggleSplitButton Classes="Success" Content="Success" />
<ToggleSplitButton Classes="Warning" Content="Warning" />
<ToggleSplitButton Classes="Danger" Content="Danger" />
<ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Content="Default" Classes="Success" />
<ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" />
<ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
<ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Classes="Small" Content="Small" />
<ToggleSplitButton Content="Default" />
<ToggleSplitButton Classes="Large" Content="Large" />
</StackPanel>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
<Button
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource SolidButton}">
Danger
</Button>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
<Button
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource BorderlessButton}">
Danger
</Button>
</StackPanel>
<TextBlock>DropDownButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Submit">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
<DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
<DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Submit">
<SplitButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
<SplitButton Classes="Secondary" Content="Submit" />
<SplitButton Classes="Tertiary" Content="Submit" />
<SplitButton Classes="Success" Content="Submit" />
<SplitButton Classes="Warning" Content="Submit" />
<SplitButton Classes="Danger" Content="Submit" />
<SplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Content="Submit">
<ToggleSplitButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>
<ToggleSplitButton Classes="Secondary" Content="Submit" />
<ToggleSplitButton Classes="Tertiary" Content="Submit" />
<ToggleSplitButton Classes="Success" Content="Submit" />
<ToggleSplitButton Classes="Warning" Content="Submit" />
<ToggleSplitButton Classes="Danger" Content="Submit" />
<ToggleSplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>

38
demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
View File

@ -16,7 +16,7 @@
<RepeatButton Classes="Success">Success</RepeatButton>
<RepeatButton Classes="Warning">Warning</RepeatButton>
<RepeatButton Classes="Danger">Danger</RepeatButton>
<RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
<RepeatButton Classes="Danger" IsEnabled="False">Disabled</RepeatButton>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
@ -27,10 +27,25 @@
<RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource SolidRepeatButton}">
Danger
Disabled
</RepeatButton>
</StackPanel>
<TextBlock>Outline</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
<RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
<RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
<RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
<RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource OutlineRepeatButton}">
Disabled
</RepeatButton>
</StackPanel>
<TextBlock>Borderless</TextBlock>
@ -42,11 +57,24 @@
<RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource BorderlessRepeatButton}">
Danger
Disabled
</RepeatButton>
</StackPanel>
<TextBlock>Disabled</TextBlock>
<StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
<Button IsEnabled="False">Light</Button>
<Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
<Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
<Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
</StackPanel>
<TextBlock>Size Classes</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Small">Small</RepeatButton>
<RepeatButton>Default</RepeatButton>
<RepeatButton Classes="Large">Large</RepeatButton>
</StackPanel>
</StackPanel>
</UserControl>

73
demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
View File

@ -17,7 +17,7 @@
<ToggleButton Classes="Success">Success</ToggleButton>
<ToggleButton Classes="Warning">Warning</ToggleButton>
<ToggleButton Classes="Danger">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Checked State" />
<StackPanel Orientation="Horizontal" Spacing="20">
@ -28,18 +28,71 @@
<ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
<ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="True"
IsEnabled="False">
Disabled
</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Three State" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
<ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
<ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
<ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
<ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
<ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
<ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
<ToggleButton
Classes="Primary"
IsChecked="{x:Null}"
IsThreeState="True">
Primary
</ToggleButton>
<ToggleButton
Classes="Secondary"
IsChecked="{x:Null}"
IsThreeState="True">
Secondary
</ToggleButton>
<ToggleButton
Classes="Tertiary"
IsChecked="{x:Null}"
IsThreeState="True">
Tertiary
</ToggleButton>
<ToggleButton
Classes="Success"
IsChecked="{x:Null}"
IsThreeState="True">
Success
</ToggleButton>
<ToggleButton
Classes="Warning"
IsChecked="{x:Null}"
IsThreeState="True">
Warning
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsThreeState="True">
Danger
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True">
Disabled
</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Disabled State" />
<StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
<ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
<ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
<ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Size" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
<ToggleButton IsThreeState="True">Default</ToggleButton>
<ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
</StackPanel>
</StackPanel>
</UserControl>

39
src/Semi.Avalonia/Controls/Button.axaml
View File

@ -2,9 +2,9 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<!-- Button Theme Key: Solid Light Border Borderless; Default is Light -->
<!-- Button Default Classes: Primary Secondary, Tertiary, Warning, Danger; Default is Primary -->
<!-- State： default pointerover pressed disabled -->
<!-- Button Theme Key: Light, Solid, Outline, Borderless; Default is Light -->
<!-- Button Default Classes: Primary, Secondary, Tertiary, Success, Warning, Danger; Default is Primary -->
<!-- State: default, pointerover, pressed, disabled -->
<!-- Button Light -->
<ControlTheme x:Key="{x:Type Button}" TargetType="Button">
@ -76,7 +76,6 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
@ -186,7 +185,37 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineButton"
BasedOn="{StaticResource {x:Type Button}}"
TargetType="Button">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>

33
src/Semi.Avalonia/Controls/DropDownButton.axaml
View File

@ -88,7 +88,6 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
@ -235,7 +234,37 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineDropDownButton"
BasedOn="{StaticResource {x:Type DropDownButton}}"
TargetType="DropDownButton">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>

33
src/Semi.Avalonia/Controls/RepeatButton.axaml
View File

@ -71,7 +71,6 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
@ -172,7 +171,37 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineRepeatButton"
BasedOn="{StaticResource {x:Type RepeatButton}}"
TargetType="RepeatButton">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>

37
src/Semi.Avalonia/Controls/SplitButton.axaml
View File

@ -124,9 +124,12 @@
<Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
</Style>
<Style Selector="^:disabled /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
<!-- only for ToggleSplitButton -->
<Style Selector="^:checked:disabled /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
</Style>
</ControlTheme>
<ControlTheme
@ -206,7 +209,37 @@
</Style>
<Style Selector="^:disabled /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineSplitButton"
BasedOn="{StaticResource {x:Type SplitButton}}"
TargetType="SplitButton">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Style Selector="^ /template/ Button">
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
</Style>
</Style>
<Style Selector="^.Success /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>

4
src/Semi.Avalonia/Controls/ToggleButton.axaml
View File

@ -67,6 +67,7 @@
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ToggleButtonDefaultBackground}" />
</Style>
<Style Selector="^.Primary">
@ -153,6 +154,7 @@
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ToggleButtonCheckedDisabledBackground}" />
</Style>
</Style>
@ -242,12 +244,12 @@
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonIndeterminateDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ToggleButtonDefaultBackground}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
<Setter Property="Background" Value="{DynamicResource ToggleButtonDefaultDisabledBackground}" />
</Style>
<Style Selector="^.Large">

15
src/Semi.Avalonia/Themes/Dark/Button.axaml
View File

@ -2,7 +2,7 @@
<!-- Light -->
<SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#888D92" />
<SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Opacity="0.8" Color="#F9F9F9" />
<SolidColorBrush x:Key="ButtonDefaultSuccessForeground" Color="#5DC264" />
<SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#FC725A" />
@ -11,7 +11,6 @@
<SolidColorBrush x:Key="ButtonDefaultBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="ButtonDefaultPointeroverBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="ButtonDefaultPressedBackground" Opacity="0.20" Color="White" />
<SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
<SolidColorBrush x:Key="ButtonDefaultBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ButtonDefaultPointeroverBorderBrush" Color="Transparent" />
@ -69,8 +68,20 @@
<SolidColorBrush x:Key="ButtonSolidDangerBorderBrush" Color="#FC725A" />
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
<SolidColorBrush x:Key="ButtonSolidDisabledBackground" Color="#2E3238" />
<!-- end Solid -->
<!-- Outline -->
<SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
<SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="White" />
<SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#5DC264" />
<SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FFAE43" />
<SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#FC725A" />
<!-- end Outline -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#888D92" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#C6CACD" />

4
src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
View File

@ -2,7 +2,6 @@
<SolidColorBrush x:Key="ToggleButtonDefaultBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="ToggleButtonDefaultPointeroverBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="ToggleButtonDefaultPressedBackground" Opacity="0.20" Color="White" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
@ -10,7 +9,7 @@
<SolidColorBrush x:Key="ToggleButtonDefaultPrimaryForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="ToggleButtonDefaultSecondaryForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="ToggleButtonDefaultTertiaryForeground" Color="#888D92" />
<SolidColorBrush x:Key="ToggleButtonDefaultTertiaryForeground" Opacity="0.8" Color="#F9F9F9" />
<SolidColorBrush x:Key="ToggleButtonDefaultSuccessForeground" Color="#5DC264" />
<SolidColorBrush x:Key="ToggleButtonDefaultWarningForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="ToggleButtonDefaultDangerForeground" Color="#FC725A" />
@ -37,6 +36,7 @@
<SolidColorBrush x:Key="ToggleButtonDangerCheckedPressedBackground" Color="#FDBEAC" />
<SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" />
<SolidColorBrush x:Key="ToggleButtonCheckedDisabledBackground" Color="#2E3238" />
<SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Color="#053170" />
<SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Color="#003761" />

15
src/Semi.Avalonia/Themes/Light/Button.axaml
View File

@ -2,7 +2,7 @@
<!-- Light -->
<SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#0077FA" />
<SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#0095EE" />
<SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Opacity="0.8" Color="#1C1F23" />
<SolidColorBrush x:Key="ButtonDefaultSuccessForeground" Color="#3BB346" />
<SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FC8800" />
<SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#F93920" />
@ -11,7 +11,6 @@
<SolidColorBrush x:Key="ButtonDefaultBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonDefaultPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonDefaultPressedBackground" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Color="#E6E8EA" />
<SolidColorBrush x:Key="ButtonDefaultBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ButtonDefaultPointeroverBorderBrush" Color="Transparent" />
@ -69,8 +68,20 @@
<SolidColorBrush x:Key="ButtonSolidDangerBorderBrush" Color="#F93920" />
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#D52515" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" />
<SolidColorBrush x:Key="ButtonSolidDisabledBackground" Color="#E6E8EA" />
<!-- end Solid -->
<!-- Outline -->
<SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
<SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="#1C1F23" />
<SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#3BB346" />
<SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FC8800" />
<SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#F93920" />
<!-- end Outline -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" />

4
src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
View File

@ -2,7 +2,6 @@
<SolidColorBrush x:Key="ToggleButtonDefaultBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ToggleButtonDefaultPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ToggleButtonDefaultPressedBackground" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledBackground" Color="#E6E8EA" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ToggleButtonDefaultDisabledForeground" Opacity="0.35" Color="#1C1F23" />
@ -10,7 +9,7 @@
<SolidColorBrush x:Key="ToggleButtonDefaultPrimaryForeground" Color="#0077FA" />
<SolidColorBrush x:Key="ToggleButtonDefaultSecondaryForeground" Color="#0095EE" />
<SolidColorBrush x:Key="ToggleButtonDefaultTertiaryForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ToggleButtonDefaultTertiaryForeground" Opacity="0.8" Color="#1C1F23" />
<SolidColorBrush x:Key="ToggleButtonDefaultSuccessForeground" Color="#3BB346" />
<SolidColorBrush x:Key="ToggleButtonDefaultWarningForeground" Color="#FC8800" />
<SolidColorBrush x:Key="ToggleButtonDefaultDangerForeground" Color="#F93920" />
@ -37,6 +36,7 @@
<SolidColorBrush x:Key="ToggleButtonDangerCheckedPressedBackground" Color="#B2140C" />
<SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" />
<SolidColorBrush x:Key="ToggleButtonCheckedDisabledBackground" Color="#E6E8EA" />
<SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Color="#E9F7FD" />