Merge pull request #382 from irihitech/issue/381

Button new Theme & Typography colors
2026-03-22 09:26:35 +08:00 · 2024-07-15 18:04:17 +08:00
parent e6541b4741 ccc25b4801
commit c46e6b9cf9
18 changed files with 294 additions and 70 deletions
--- a/src/Semi.Avalonia/Controls/Button.axaml
+++ b/src/Semi.Avalonia/Controls/Button.axaml
@@ -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">
@@ -48,7 +48,7 @@
        <Style Selector="^:pressed">
            <Setter Property="RenderTransform" Value="scale(0.98)" />
        </Style>
-        
+
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
            <Setter Property="Background" Value="{TemplateBinding Background}" />
@@ -85,7 +85,6 @@

        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>

@@ -104,9 +103,9 @@
        BasedOn="{StaticResource {x:Type Button}}"
        TargetType="Button">
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
        </Style>

        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
@@ -211,7 +210,39 @@

        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <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">
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>
    </ControlTheme>
@@ -254,4 +285,4 @@
            <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
        </Style>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Controls/DropDownButton.axaml
@@ -110,7 +110,6 @@
        </Style>
        <Style Selector="^:disabled /template/ Border#RootBorder">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
        </Style>

        <Style Selector="^.Large">
@@ -232,7 +231,41 @@
        </Style>
        <Style Selector="^:disabled /template/ Border#RootBorder">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="OutlineDropDownButton"
+        BasedOn="{StaticResource {x:Type DropDownButton}}"
+        TargetType="DropDownButton">
+        <Style Selector="^ /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
        </Style>
        <Style Selector="^:disabled">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
@@ -244,12 +277,12 @@
        BasedOn="{StaticResource {x:Type DropDownButton}}"
        TargetType="DropDownButton">
        <Style Selector="^ /template/ Border#RootBorder">
-            <Setter Property="DropDownButton.Background" Value="Transparent" />
-            <Setter Property="DropDownButton.BorderBrush" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        <Style Selector="^:disabled /template/ Border#RootBorder">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/RepeatButton.axaml
+++ b/src/Semi.Avalonia/Controls/RepeatButton.axaml
@@ -4,17 +4,17 @@
    x:CompileBindings="True">
    <ControlTheme x:Key="{x:Type RepeatButton}" TargetType="RepeatButton">
        <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
        <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
-        <Setter Property="RenderTransform" Value="none" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="RenderTransform" Value="none" />
        <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
        <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@@ -22,7 +22,7 @@
        <Setter Property="Template">
            <ControlTemplate TargetType="RepeatButton">
                <ContentPresenter
-                    Name="PART_ContentPresenter"
+                    x:Name="PART_ContentPresenter"
                    Padding="{TemplateBinding Padding}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
@@ -43,7 +43,7 @@
        <Style Selector="^:pressed">
            <Setter Property="RenderTransform" Value="scale(0.98)" />
        </Style>
-        
+
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
            <Setter Property="Background" Value="{TemplateBinding Background}" />
@@ -80,17 +80,16 @@

        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>

        <Style Selector="^.Large">
-            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
            <Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
        </Style>
        <Style Selector="^.Small">
-            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
        </Style>
    </ControlTheme>

@@ -103,6 +102,16 @@
            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
        </Style>
+
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
+        </Style>
+
        <Style Selector="^.Primary">
            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
@@ -196,7 +205,39 @@

        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <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">
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>
    </ControlTheme>
@@ -206,8 +247,8 @@
        BasedOn="{StaticResource {x:Type RepeatButton}}"
        TargetType="RepeatButton">
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="RepeatButton.Background" Value="Transparent" />
-            <Setter Property="RepeatButton.BorderBrush" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="Transparent" />
--- a/src/Semi.Avalonia/Controls/SelectableTextBlock.axaml
+++ b/src/Semi.Avalonia/Controls/SelectableTextBlock.axaml
@@ -17,6 +17,7 @@
        <Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
        <Setter Property="SelectableTextBlock.Cursor" Value="Ibeam" />
        <Setter Property="SelectableTextBlock.SelectionBrush" Value="{DynamicResource TextBlockSelectionBackground}" />
+        <Setter Property="SelectableTextBlock.SelectionForegroundBrush" Value="{DynamicResource TextBlockSelectionForeground}" />
        <Style Selector="^.Secondary">
            <Setter Property="Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
        </Style>
--- a/src/Semi.Avalonia/Controls/SplitButton.axaml
+++ b/src/Semi.Avalonia/Controls/SplitButton.axaml
@@ -116,7 +116,7 @@
                </Border>
            </ControlTemplate>
        </Setter>
-        
+
        <Style Selector="^ /template/ Button">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
@@ -130,7 +130,7 @@
                <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
            </Style>
        </Style>
-        
+

        <Style Selector="^.Secondary /template/ Button">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
@@ -158,7 +158,7 @@
                    <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                </Style>
            </Style>
-            
+
            <Style Selector="^.Secondary /template/ Button">
                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
                <Style Selector="^:pointerover">
@@ -218,9 +218,13 @@
            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
        </Style>
        <Style Selector="^:disabled /template/ Button">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
            <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
@@ -230,7 +234,7 @@
        <Style Selector="^ /template/ Button">
            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            
+
            <Style Selector="^:pointerover">
                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
            </Style>
@@ -301,7 +305,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">
+        <Style Selector="^ /template/ Button">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <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>
@@ -320,4 +354,4 @@
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleButton.axaml
@@ -73,6 +73,7 @@

        <Style Selector="^:disabled">
            <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ToggleButtonDefaultBackground}" />
        </Style>

        <Style Selector="^.Primary">
@@ -159,6 +160,7 @@
            </Style>
            <Style Selector="^:disabled">
                <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ToggleButtonCheckedDisabledBackground}" />
            </Style>
        </Style>

@@ -248,12 +250,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">
--- a/src/Semi.Avalonia/Themes/Dark/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Button.axaml
@@ -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" />
--- a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
@@ -9,7 +9,7 @@
    <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CheckBoxPointeroverBackground" Opacity="0.12" Color="White" />
    <SolidColorBrush x:Key="CheckBoxPointeroverBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxPressedBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#A9D7FF" />

    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#54A9FF" />
--- a/src/Semi.Avalonia/Themes/Dark/TextBlock.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TextBlock.axaml
@@ -7,10 +7,11 @@
    <SolidColorBrush x:Key="TextBlockWarningForeground" Color="#FFAE43" />
    <SolidColorBrush x:Key="TextBlockDangerForeground" Color="#FC725A" />
    <SolidColorBrush x:Key="TextBlockDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="TextBlockCodeForeground" Opacity="0.68" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="TextBlockMarkBackground" Color="#053170" />
-    <SolidColorBrush x:Key="TextBlockCodeBackground" Opacity="0.1" Color="#E6E8EA" />
-    <SolidColorBrush x:Key="TextBlockCodeBorderBrush" Opacity="0.2" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="TextBlockMarkBackground" Opacity="0.2" Color="#54A9FF" />
+    <SolidColorBrush x:Key="TextBlockCodeForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TextBlockCodeBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="TextBlockCodeBorderBrush" Opacity="0.08" Color="White" />

-    <SolidColorBrush x:Key="TextBlockSelectionBackground" Opacity="0.2" Color="#54A9FF" />
+    <SolidColorBrush x:Key="TextBlockSelectionBackground" Opacity="0.8" Color="#0041C5" />
+    <SolidColorBrush x:Key="TextBlockSelectionForeground" Color="White" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
@@ -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" />
--- a/src/Semi.Avalonia/Themes/Light/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Button.axaml
@@ -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" />
--- a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
@@ -11,7 +11,7 @@
    <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
    <SolidColorBrush x:Key="CheckBoxPointeroverBackground" Opacity="0.05" Color="#2E3238" />
    <SolidColorBrush x:Key="CheckBoxPointeroverBorderBrush" Color="#0077FA" />
-    <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#004FB3" />
+    <SolidColorBrush x:Key="CheckBoxPressedBackground" Opacity="0.09" Color="#2E3238" />
    <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#004FB3" />

    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#0077FA" />
--- a/src/Semi.Avalonia/Themes/Light/TextBlock.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TextBlock.axaml
@@ -7,10 +7,11 @@
    <SolidColorBrush x:Key="TextBlockWarningForeground" Color="#FC8800" />
    <SolidColorBrush x:Key="TextBlockDangerForeground" Color="#F93920" />
    <SolidColorBrush x:Key="TextBlockDisabledForeground" Opacity="0.35" Color="#1C1F23" />
-    <SolidColorBrush x:Key="TextBlockCodeForeground" Opacity="0.68" Color="#1C1F23" />
    <SolidColorBrush x:Key="TextBlockMarkBackground" Color="#EAF5FF" />
-    <SolidColorBrush x:Key="TextBlockCodeBackground" Opacity="0.1" Color="#2E3238" />
-    <SolidColorBrush x:Key="TextBlockCodeBorderBrush" Opacity="0.2" Color="#2E3238" />
+    <SolidColorBrush x:Key="TextBlockCodeForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TextBlockCodeBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="TextBlockCodeBorderBrush" Opacity="0.08" Color="#1C1F23" />

-    <SolidColorBrush x:Key="TextBlockSelectionBackground" Opacity="0.2" Color="#0077FA" />
+    <SolidColorBrush x:Key="TextBlockSelectionBackground" Opacity="0.8" Color="#0041C5" />
+    <SolidColorBrush x:Key="TextBlockSelectionForeground" Color="White" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
@@ -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" />