feat: enhance MenuItem icon.

Add TrayIcon demo (#529 )
* feat: add tray demo, change icon. * feat: include favicon.
2026-03-03 00:00:55 +08:00 · 2025-01-13 16:29:16 +08:00 · 2025-01-13 12:37:55 +08:00 · 2025-01-07 15:08:11 +08:00 · 2025-01-07 12:45:14 +08:00 · 2025-01-06 22:37:00 +08:00
99 changed files with 796 additions and 542 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -36,6 +36,7 @@ jobs:
      - name: Commit wwwroot to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4.5.0
        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages
-          FOLDER: ${{ env.OUTPUT_PATH }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+          folder: ${{ env.OUTPUT_PATH }}
+          single-commit: true
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -44,17 +44,17 @@ jobs:
          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip

      - name: Enable Native AOT in .csproj
-        if: ${{ github.event.inputs.include_aot == true }}
+        if: ${{ github.event.inputs.include_aot == 'true' }}
        run: |
          sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
          sed -i 's#<!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->#<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj

      - name: Publish win-x64 AOT
-        if: ${{ github.event.inputs.include_aot == true }}
+        if: ${{ github.event.inputs.include_aot == 'true' }}
        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot

      - name: Zip win-x64 AOT
-        if: ${{ github.event.inputs.include_aot == true }}
+        if: ${{ github.event.inputs.include_aot == 'true' }}
        run: |
          $files = Get-ChildItem -Path ./publish/win64-aot/* -Recurse -Exclude *.pdb
          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
@@ -82,11 +82,11 @@ jobs:
        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"

      - name: Publish linux-x64 DRM
-        if: ${{ github.event.inputs.include_drm == true }}
+        if: ${{ github.event.inputs.include_drm == 'true' }}
        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm

      - name: Zip linux-x64 DRM
-        if: ${{ github.event.inputs.include_drm == true }}
+        if: ${{ github.event.inputs.include_drm == 'true' }}
        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"

      - name: Upload a Build Artifact
--- a/demo/Directory.Build.props
+++ b/demo/Directory.Build.props
@@ -1,7 +1,6 @@
 <Project>
-  <PropertyGroup>
-    <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.2.2</AvaloniaVersion>
-    <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
-  </PropertyGroup>
+    <PropertyGroup>
+        <AvaloniaVersion>11.2.3</AvaloniaVersion>
+        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
+    </PropertyGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo.Desktop/Program.cs
+++ b/demo/Semi.Avalonia.Demo.Desktop/Program.cs
@@ -1,13 +1,11 @@
-using Avalonia;
+using System;
+using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
-using System;
-using System.Linq;
-using System.Threading;

 namespace Semi.Avalonia.Demo.Desktop;

-class Program
+sealed class Program
 {
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
@@ -33,4 +31,4 @@ class Program
            .UsePlatformDetect()
            .With(new Win32PlatformOptions())
            .LogToTrace();
-}
+}
--- a/demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+++ b/demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
@@ -19,16 +19,14 @@
    </PropertyGroup>

    <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml" />
+        <TrimmerRootDescriptor Include="Roots.xml"/>
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
    </ItemGroup>

    <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
    </ItemGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo.Drm/Program.cs
+++ b/demo/Semi.Avalonia.Demo.Drm/Program.cs
@@ -7,7 +7,7 @@ using Avalonia.Dialogs;

 namespace Semi.Avalonia.Demo.Drm;

-class Program
+sealed class Program
 {
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
--- a/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
+++ b/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
@@ -19,17 +19,15 @@
    </PropertyGroup>

    <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml" />
+        <TrimmerRootDescriptor Include="Roots.xml"/>
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
    </ItemGroup>

    <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
    </ItemGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+++ b/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
@@ -3,6 +3,7 @@
        <TargetFramework>net8.0-browser</TargetFramework>
        <OutputType>Exe</OutputType>
        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+        <Nullable>enable</Nullable>
    </PropertyGroup>

    <ItemGroup>
--- a/demo/Semi.Avalonia.Demo.Web/wwwroot/favicon.ico
+++ b/demo/Semi.Avalonia.Demo.Web/wwwroot/favicon.ico
--- a/demo/Semi.Avalonia.Demo.Web/wwwroot/index.html
+++ b/demo/Semi.Avalonia.Demo.Web/wwwroot/index.html
@@ -6,6 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./app.css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>

 <body style="margin: 0; overflow: hidden">
--- a/demo/Semi.Avalonia.Demo/App.axaml
+++ b/demo/Semi.Avalonia.Demo/App.axaml
@@ -2,13 +2,35 @@
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    x:CompileBindings="True"
+    x:DataType="viewModels:ApplicationViewModel"
+    xmlns:semi="https://irihi.tech/semi"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
    <Application.Styles>
        <!-- You can still reference in old way.  -->
        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
        <semi:SemiTheme Locale="zh-CN" />
-        <semi:SemiPopupAnimations/>
+        <semi:SemiPopupAnimations />
        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
    </Application.Styles>
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude
+                    Source="Themes/_index.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+    <TrayIcon.Icons>
+        <TrayIcons>
+            <TrayIcon Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+                <TrayIcon.Menu>
+                    <NativeMenu>
+                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                    </NativeMenu>
+                </TrayIcon.Menu>
+            </TrayIcon>
+        </TrayIcons>
+    </TrayIcon.Icons>
 </Application>
--- a/demo/Semi.Avalonia.Demo/App.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/App.axaml.cs
@@ -2,6 +2,7 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 using Semi.Avalonia.Demo.Views;

 namespace Semi.Avalonia.Demo;
@@ -11,6 +12,7 @@ public partial class App : Application
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
+        this.DataContext = new ApplicationViewModel();
    }

    public override void OnFrameworkInitializationCompleted()
@@ -28,6 +30,7 @@ public partial class App : Application
                break;
        }

+        this.RegisterFollowSystemTheme();
        base.OnFrameworkInitializationCompleted();
    }
 }
--- a/demo/Semi.Avalonia.Demo/Assets/avalonia-logo.ico
+++ b/demo/Semi.Avalonia.Demo/Assets/avalonia-logo.ico
--- a/demo/Semi.Avalonia.Demo/Assets/irihi.ico
+++ b/demo/Semi.Avalonia.Demo/Assets/irihi.ico
--- a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
@@ -1,8 +1,10 @@
 using System.Globalization;
+using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Media;
+using Semi.Avalonia.Demo.Converters;

 namespace Semi.Avalonia.Demo.Controls;

@@ -10,6 +12,7 @@ public class ColorDetailControl : TemplatedControl
 {
    public const string KEY_ResourceKey = "ResourceKey";
    public const string KEY_Hex = "Hex";
+    public const string KEY_Hex2 = "Hex2";
    public const string KEY_Opacity = "Opacity";
    public const string KEY_ColorResourceKey = "ColorResourceKey";

@@ -51,6 +54,17 @@ public class ColorDetailControl : TemplatedControl
        private set => SetAndRaise(HexProperty, ref _hex, value);
    }

+    private string? _hex2;
+
+    public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
+        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
+
+    public string? Hex2
+    {
+        get => _hex2;
+        set => SetAndRaise(Hex2Property, ref _hex2, value);
+    }
+
    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);

@@ -70,34 +84,30 @@ public class ColorDetailControl : TemplatedControl
    private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
    {
        var color = args.GetNewValue<IBrush>();
-        if (color is ISolidColorBrush b)
+        if (color is ISolidColorBrush brush)
        {
-            Hex = b.Color.ToString().ToUpperInvariant();
-            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
+            var hex1 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
+            Hex = hex1 as string;
+            Hex2 = hex2 as string;
+            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
        }
    }

-    public async void Copy(object o)
+    public async Task Copy(object o)
    {
        string? text = null;
        if (o is string s)
        {
-            switch (s)
+            text = s switch
            {
-                case KEY_ResourceKey:
-                    text = ResourceKey;
-                    break;
-                case KEY_Hex:
-                    text = Hex;
-                    break;
-                case KEY_Opacity:
-                    text = OpacityNumber;
-                    break;
-                case KEY_ColorResourceKey:
-                    text = ColorResourceKey;
-                    break;
-                default: text = string.Empty; break;
-            }
+                KEY_ResourceKey => ResourceKey,
+                KEY_Hex => Hex,
+                KEY_Hex2 => Hex2,
+                KEY_Opacity => OpacityNumber,
+                KEY_ColorResourceKey => ColorResourceKey,
+                _ => string.Empty
+            };
        }

        var toplevel = TopLevel.GetTopLevel(this);
--- a/demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs
+++ b/demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs
@@ -0,0 +1,22 @@
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Converters;
+
+public static class ColorConverter
+{
+    public static readonly IValueConverter ToHex =
+        new FuncValueConverter<object, bool, string>(
+            (obj, withAlpha) =>
+                obj switch
+                {
+                    Color color => withAlpha
+                        ? $"#{color.A:X2}{color.R:X2}{color.G:X2}{color.B:X2}"
+                        : $"#{color.R:X2}{color.G:X2}{color.B:X2}",
+                    ISolidColorBrush brush => withAlpha
+                        ? $"#{brush.Color.A:X2}{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}"
+                        : $"#{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}",
+                    _ => string.Empty
+                }
+        );
+}
--- a/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
@@ -4,21 +4,14 @@
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
             x:DataType="vm:HighContrastDemoViewModel"
+             x:CompileBindings="True"
             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
    <Design.DataContext>
        <vm:HighContrastDemoViewModel />
    </Design.DataContext>
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
-                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
-                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
    <SplitView
        Name="splitView"
        CompactPaneLength="50"
@@ -32,7 +25,8 @@
                    Name="toggle"
                    HorizontalAlignment="Right"
                    IsChecked="True"
-                    Theme="{DynamicResource SplitViewToggleSwitch}" />
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                    <Panel>
                        <TextBlock
@@ -285,7 +279,8 @@
                                        <SelectableTextBlock
                                            Margin="12 0"
                                            VerticalAlignment="Center"
-                                            Text="{Binding Hex}" />
+                                            Text="{Binding Brush,
+                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -50,6 +50,22 @@
                    <MenuItem Header="Radio 5" ToggleType="Radio" />
                </MenuItem>
            </MenuItem>
+            <MenuItem Header="_Icon">
+                <MenuItem Header="Nothing" Icon="🐼" />
+                <MenuItem Header="TextBlock">
+                    <MenuItem.Icon>
+                        <TextBlock Text="🐼" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <MenuItem Header="Geometry" Icon="{StaticResource SemiIconSemiLogo}" />
+                <MenuItem Header="PathIcon">
+                    <MenuItem.Icon>
+                        <PathIcon
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{DynamicResource SemiIconSemiLogo}" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </MenuItem>
            <MenuItem Header="Parent">
                <MenuItem Header="Child 1" />
                <MenuItem Header="Child 2" />
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
@@ -9,18 +9,18 @@ public partial class Overview : UserControl
        InitializeComponent();
    }

-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.2";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.3";

    public string MainStyle { get; set; } =
        """
        <Application.Styles>
        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-            <semi:SemiTheme Locale="zh-cn" />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
+            <semi:SemiTheme Locale="zh-CN" />
        </Application.Styles>
        """;

-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.2";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.3";

    public string ColorPickerStyle { get; set; } =
        """
@@ -29,7 +29,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.2";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.3";

    public string DataGridStyle { get; set; } =
        """
--- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
@@ -14,17 +14,6 @@
    <Design.DataContext>
        <viewModels:PaletteDemoViewModel />
    </Design.DataContext>
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
-                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
-                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
-                <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
-                <ResourceInclude Source="../Controls/ShadowGroupControl.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
    <SplitView
        Name="splitView"
        CompactPaneLength="50"
@@ -38,7 +27,8 @@
                    Name="toggle"
                    HorizontalAlignment="Right"
                    IsChecked="True"
-                    Theme="{DynamicResource SplitViewToggleSwitch}" />
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                    <Panel>
                        <TextBlock
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -109,7 +109,8 @@
                                ItemsSource="{Binding Songs}" />
                            <ToggleSwitch
                                Grid.Row="2"
-                                Theme="{DynamicResource SplitViewToggleSwitch}"
+                                Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                Content="{StaticResource SemiIconSidebar}"
                                HorizontalAlignment="Left"
                                IsChecked="{Binding #SplitView.IsPaneOpen}">
                            </ToggleSwitch>
--- a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
+++ b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
@@ -4,22 +4,26 @@
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
    </PropertyGroup>
-    
+
    <ItemGroup>
-        <AvaloniaResource Include="Assets\**" />
+        <AvaloniaResource Include="Assets\**"/>
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
+        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
    </ItemGroup>

    <ItemGroup>
-      <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
    </ItemGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
@@ -1,7 +1,8 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    x:CompileBindings="True">
    <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
        <Setter Property="Template">
            <ControlTemplate TargetType="controls:ColorDetailControl">
@@ -16,7 +17,7 @@
                        HorizontalAlignment="Stretch"
                        Background="{TemplateBinding Background}"
                        CornerRadius="6" />
-                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *, *">
                        <!--  Row 0-1-2 ResourceKey  -->
                        <TextBlock
                            Grid.Column="0"
@@ -33,38 +34,26 @@
                        <Button
                            Grid.Row="1"
                            Grid.Column="1"
-                            Classes="Tertiary"
-                            Padding="8"
                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{StaticResource SemiIconCopy}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
                        <SelectableTextBlock
                            Grid.Row="2"
                            Grid.Column="0"
                            VerticalAlignment="Center"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                            Text="{TemplateBinding ColorResourceKey}" />
                        <Button
                            Grid.Row="2"
                            Grid.Column="1"
-                            Classes="Tertiary"
-                            Padding="8"
                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{StaticResource SemiIconCopy}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />

-                        <!--  Row 3-4 HEX  -->
+                        <!--  Row 3-4-5 HEX  -->
                        <TextBlock
                            Grid.Row="3"
                            Grid.Column="0"
@@ -72,7 +61,7 @@
                            Margin="4,8,0,0"
                            VerticalAlignment="Center"
                            Classes="Tertiary"
-                            Text="ARGB" />
+                            Text="Hex" />
                        <SelectableTextBlock
                            Grid.Row="4"
                            Grid.Column="0"
@@ -81,47 +70,48 @@
                        <Button
                            Grid.Row="4"
                            Grid.Column="1"
-                            Classes="Tertiary"
-                            Padding="8"
                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{StaticResource SemiIconCopy}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
-
-                        <!--  Row 5-6 Opacity  -->
-                        <TextBlock
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+                        <SelectableTextBlock
                            Grid.Row="5"
                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex2}" />
+                        <Button
+                            Grid.Row="5"
+                            Grid.Column="1"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+
+                        <!--  Row 6-7 Opacity  -->
+                        <TextBlock
+                            Grid.Row="6"
+                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Margin="4,8,0,0"
                            VerticalAlignment="Center"
                            Classes="Tertiary"
                            Text="Opacity" />
                        <SelectableTextBlock
-                            Grid.Row="6"
+                            Grid.Row="7"
                            Grid.Column="0"
                            VerticalAlignment="Center"
                            Text="{TemplateBinding OpacityNumber}" />
                        <Button
-                            Grid.Row="6"
+                            Grid.Row="7"
                            Grid.Column="1"
-                            Classes="Tertiary"
-                            Padding="8"
                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{StaticResource SemiIconCopy}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+
                    </Grid>
                </StackPanel>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
@@ -1,7 +1,8 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Semi.Avalonia.Demo.Controls">
+    xmlns:controls="using:Semi.Avalonia.Demo.Controls"
+    x:CompileBindings="True">
    <Design.PreviewWith>
        <controls:ColorItemControl />
    </Design.PreviewWith>
--- a/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
--- a/demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml
--- a/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
@@ -1,31 +1,42 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="ThemeToggleSwitch"
+    <Design.PreviewWith>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch
+                Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                Content="{StaticResource SemiIconStar}" />
+            <Button
+                Theme="{DynamicResource IconBorderlessButton}"
+                Content="{StaticResource SemiIconStar}" />
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="IconBorderlessToggleSwitch"
                  BasedOn="{StaticResource ButtonToggleSwitch}"
                  TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="OnContent" Value="{Binding $self.Content}" />
+        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
+        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
        <Setter Property="OnContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
+            <StaticResource ResourceKey="GeometryDataTemplate" />
        </Setter>
-        <Setter Property="OffContent" Value="{Binding $self.Content}" />
        <Setter Property="OffContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
+            <StaticResource ResourceKey="GeometryDataTemplate" />
        </Setter>
        <Setter Property="ContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
+            <StaticResource ResourceKey="GeometryDataTemplate" />
        </Setter>
    </ControlTheme>

-    <ControlTheme x:Key="SplitViewToggleSwitch"
-                  BasedOn="{StaticResource ThemeToggleSwitch}"
-                  TargetType="ToggleSwitch">
-        <Setter Property="Content"
-                Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
+    <ControlTheme x:Key="IconBorderlessButton"
+                  BasedOn="{StaticResource BorderlessButton}"
+                  TargetType="Button">
+        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
+        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        <Setter Property="ContentTemplate">
+            <StaticResource ResourceKey="GeometryDataTemplate" />
+        </Setter>
    </ControlTheme>
+
+    <DataTemplate x:Key="GeometryDataTemplate" DataType="Geometry">
+        <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+    </DataTemplate>
 </ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/Themes/_index.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/_index.axaml
@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="ColorDetailControl.axaml" />
+        <ResourceInclude Source="ColorItemControl.axaml" />
+        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
+        <ResourceInclude Source="ShadowGroupControl.axaml" />
+        <ResourceInclude Source="TabMenu.axaml" />
+        <ResourceInclude Source="ToggleSwitch.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs
@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Semi.Avalonia.Demo.Views;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class ApplicationViewModel: ObservableObject
+{
+    [RelayCommand]
+    private void Exit()
+    {
+        if (Application.Current?.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+        {
+            desktop.Shutdown();
+        }
+    }
+}
--- a/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
@@ -33,7 +33,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "WindowColor",
                Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Hex = "#FF202020",
                Description = "Background of pages, panes, popups, and windows.",
                PairWith = "WindowTextColor"
            },
@@ -41,7 +40,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "WindowTextColor",
                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Hex = "WHITE",
                Description = "Headings, body copy, lists, placeholder text, app and window borders.",
                PairWith = "WindowColor"
            },
@@ -49,7 +47,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "HotlightColor",
                Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
-                Hex = "#FF75E9FC",
                Description = "Hyperlinks.",
                PairWith = "WindowColor"
            },
@@ -57,7 +54,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "GrayTextColor",
                Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
-                Hex = "#FFA6A6A6",
                Description = "Inactive (disabled) UI.",
                PairWith = "WindowColor"
            },
@@ -65,7 +61,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "HighlightTextColor",
                Brush = new SolidColorBrush(Color.Parse("#263B50")),
-                Hex = "#FF263B50",
                Description =
                    "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
                PairWith = "HighlightColor"
@@ -74,7 +69,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "HighlightColor",
                Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
-                Hex = "#FF8EE3F0",
                Description =
                    "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
                PairWith = "HighlightTextColor"
@@ -83,7 +77,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "ButtonTextColor",
                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Hex = "WHITE",
                Description = "Foreground color for buttons and any UI that can be interacted with.",
                PairWith = "ButtonFaceColor"
            },
@@ -91,7 +84,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            {
                ResourceKey = "ButtonFaceColor",
                Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Hex = "#FF202020",
                Description = "Background color for buttons and any UI that can be interacted with.",
                PairWith = "ButtonTextColor"
            },
@@ -111,7 +103,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
            {
                colorResource.Brush = new SolidColorBrush(color);
-                colorResource.Hex = color.ToString().ToUpperInvariant();
            }
        }
    }
@@ -131,7 +122,6 @@ public partial class ColorResource : ObservableObject
 {
    [ObservableProperty] private string? _resourceKey;
    [ObservableProperty] private SolidColorBrush? _brush;
-    [ObservableProperty] private string? _hex;
    [ObservableProperty] private string? _description;
    [ObservableProperty] private string? _pairWith;
 }
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -1,11 +1,13 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.Globalization;
 using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
 using Semi.Avalonia.Tokens.Palette;
+using Semi.Avalonia.Demo.Converters;

 namespace Semi.Avalonia.Demo.ViewModels;

@@ -212,7 +214,8 @@ public class ColorItemViewModel : ObservableObject
        ColorDisplayName = colorDisplayName;
        Brush = brush;
        ResourceKey = resourceKey;
-        Hex = brush.ToString().ToUpperInvariant();
+        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+        Hex = hex as string ?? string.Empty;
        if ((light && index < 5) || (!light && index >= 5))
        {
            TextBrush = Brushes.Black;
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -11,14 +11,6 @@
    x:CompileBindings="True"
    x:DataType="views:MainViewModel"
    mc:Ignorable="d">
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/TabMenu.axaml" />
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
    <Grid RowDefinitions="Auto, *">
        <Border
            Grid.Row="0"
@@ -29,7 +21,8 @@
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <ToggleSwitch
                        Name="ExpandButton"
-                        Theme="{DynamicResource SplitViewToggleSwitch}" />
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                        Content="{StaticResource SemiIconSidebar}" />
                    <SelectableTextBlock
                        VerticalAlignment="Center"
                        Classes="H6"
@@ -44,36 +37,27 @@
                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                    <StackPanel.Styles>
-                        <Style Selector="Button">
-                            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
-                            <Setter Property="Padding" Value="8" />
-                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </Style>
-                        <Style Selector="ToggleSwitch">
-                            <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
-                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </Style>
-                        <Style Selector="PathIcon">
-                            <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
-                        </Style>
-                    </StackPanel.Styles>
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Command="{Binding OpenUrlCommand}"
+                        CommandParameter="{Binding DocumentationUrl}"
+                        Content="{StaticResource SemiIconGlobe}" />

-                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding DocumentationUrl}">
-                        <PathIcon Data="{StaticResource SemiIconGlobe}" />
-                    </Button>
-
-                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding RepoUrl}">
-                        <PathIcon Data="{StaticResource SemiIconGithubLogo}" />
-                    </Button>
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Command="{Binding OpenUrlCommand}"
+                        CommandParameter="{Binding RepoUrl}"
+                        Content="{StaticResource SemiIconGithubLogo}" />

                    <ToggleSwitch
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
                        Command="{Binding ToggleThemeCommand}"
                        OnContent="{StaticResource SemiIconMoon}"
                        OffContent="{StaticResource SemiIconSun}" />

-                    <Button>
-                        <PathIcon Data="{StaticResource SemiIconMenu}" />
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Content="{StaticResource SemiIconMenu}">
                        <Button.Flyout>
                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
                        </Button.Flyout>
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Threading.Tasks;
 using System.Windows.Input;
 using Avalonia;
@@ -32,9 +33,14 @@ public partial class MainViewModel : ObservableObject
        [
            new MenuItemViewModel
            {
-                Header = "High Contrast Theme",
+                Header = "Theme",
                Items =
                [
+                    new MenuItemViewModel
+                    {
+                        Header = "Auto",
+                        Command = FollowSystemThemeCommand
+                    },
                    new MenuItemViewModel
                    {
                        Header = "Aquatic",
@@ -60,10 +66,65 @@ public partial class MainViewModel : ObservableObject
                        CommandParameter = SemiTheme.NightSky
                    },
                ]
+            },
+            new MenuItemViewModel
+            {
+                Header = "Locale",
+                Items =
+                [
+                    new MenuItemViewModel
+                    {
+                        Header = "简体中文",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("zh-cn")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "English",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("en-us")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "日本語",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ja-jp")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Українська",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("uk-ua")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Русский",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ru-ru")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "繁體中文",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("zh-tw")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Deutsch",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("de-de")
+                    },
+                ]
            }
        ];
    }

+    [RelayCommand]
+    private void FollowSystemTheme()
+    {
+        Application.Current?.RegisterFollowSystemTheme();
+    }
+
    [RelayCommand]
    private void ToggleTheme()
    {
@@ -71,16 +132,24 @@ public partial class MainViewModel : ObservableObject
        if (app is null) return;
        var theme = app.ActualThemeVariant;
        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        app.UnregisterFollowSystemTheme();
    }

    [RelayCommand]
    private void SelectTheme(object? obj)
    {
        var app = Application.Current;
-        if (app is not null)
-        {
-            app.RequestedThemeVariant = obj as ThemeVariant;
-        }
+        if (app is null) return;
+        app.RequestedThemeVariant = obj as ThemeVariant;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectLocale(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
    }

    [RelayCommand]
--- a/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml
@@ -8,7 +8,7 @@
    Title="Semi.Avalonia.Demo"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    Icon="/Assets/avalonia-logo.ico"
+    Icon="/Assets/irihi.ico"
    mc:Ignorable="d">
    <views:MainView />
 </Window>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml
@@ -2,11 +2,10 @@
    x:Class="Semi.Avalonia.TreeDataGrid.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    RequestedThemeVariant="Default">
-    <!--  "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options.  -->
+    xmlns:semi="https://irihi.tech/semi">

    <Application.Styles>
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+        <semi:SemiTheme Locale="zh-CN" />
        <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
    </Application.Styles>
 </Application>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs
@@ -1,10 +1,10 @@
-using Avalonia;
-using System;
+using System;
+using Avalonia;
 using Avalonia.Media;

 namespace Semi.Avalonia.TreeDataGrid.Demo;

-class Program
+sealed class Program
 {
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj
@@ -12,18 +12,21 @@
        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
    </PropertyGroup>

-    <Import Project="../Directory.Build.props" />
+    <Import Project="../Directory.Build.props"/>

    <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
+        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
    </ItemGroup>

    <ItemGroup>
-        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
-        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
    </ItemGroup>
 </Project>
--- a/src/Package.props
+++ b/src/Package.props
@@ -3,7 +3,7 @@
        <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
-        <Version>11.2.1.2</Version>
+        <Version>11.2.1.3</Version>
        <Authors>IRIHI Technology Co., Ltd.</Authors>
        <Description>Avalonia Theme inspired by Semi Design.</Description>
        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -76,7 +76,6 @@
                                Width="300"
                                Height="300"
                                RowDefinitions="*,Auto">
-                                <Grid.Styles />
                                <!--  Backgrounds  -->
                                <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                <Border
@@ -143,7 +142,7 @@
                                                IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                Orientation="Vertical" />
                                            <primitives:ColorSpectrum
-                                                Name="ColorSpectrum"
+                                                x:Name="ColorSpectrum"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
@@ -334,7 +333,7 @@
                                                ShowButtonSpinner="False"
                                                Value="{Binding Value, ElementName=Component1Slider}" />
                                            <primitives:ColorSlider
-                                                Name="Component1Slider"
+                                                x:Name="Component1Slider"
                                                Grid.Row="2"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
@@ -365,7 +364,7 @@
                                                ShowButtonSpinner="False"
                                                Value="{Binding Value, ElementName=Component2Slider}" />
                                            <primitives:ColorSlider
-                                                Name="Component2Slider"
+                                                x:Name="Component2Slider"
                                                Grid.Row="3"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
@@ -396,7 +395,7 @@
                                                ShowButtonSpinner="False"
                                                Value="{Binding Value, ElementName=Component3Slider}" />
                                            <primitives:ColorSlider
-                                                Name="Component3Slider"
+                                                x:Name="Component3Slider"
                                                Grid.Row="4"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
@@ -434,7 +433,7 @@
                                                </NumericUpDown.IsVisible>
                                            </NumericUpDown>
                                            <primitives:ColorSlider
-                                                Name="AlphaComponentSlider"
+                                                x:Name="AlphaComponentSlider"
                                                Grid.Row="5"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
@@ -559,7 +558,7 @@
                                    CornerRadius="8 8 0 0"
                                    ClipToBounds="True">
                                    <primitives:ColorSpectrum
-                                        Name="ColorSpectrum"
+                                        x:Name="ColorSpectrum"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Components="{TemplateBinding ColorSpectrumComponents}"
@@ -585,7 +584,7 @@
                                    Orientation="Horizontal" />

                                <primitives:ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                    x:Name="ColorSpectrumAlphaSlider"
                                    Grid.Row="2"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Center"
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -237,7 +237,7 @@
                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                    Orientation="Vertical" />
                                <primitives:ColorSpectrum
-                                    Name="ColorSpectrum"
+                                    x:Name="ColorSpectrum"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
@@ -251,7 +251,7 @@
                                    MinValue="{TemplateBinding MinValue}"
                                    Shape="{TemplateBinding ColorSpectrumShape}" />
                                <primitives:ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                    x:Name="ColorSpectrumAlphaSlider"
                                    Grid.Column="2"
                                    Margin="12,0,0,0"
                                    HorizontalAlignment="Center"
@@ -347,7 +347,7 @@
                                        CornerRadius="3">
                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                            <RadioButton
-                                                Name="RgbRadioButton"
+                                                x:Name="RgbRadioButton"
                                                Grid.Column="0"
                                                HorizontalContentAlignment="Center"
                                                VerticalContentAlignment="Center"
@@ -359,7 +359,7 @@
                                                                            Mode=TwoWay}"
                                                Theme="{DynamicResource ColorViewRadioButton}" />
                                            <RadioButton
-                                                Name="HsvRadioButton"
+                                                x:Name="HsvRadioButton"
                                                Grid.Column="1"
                                                HorizontalContentAlignment="Center"
                                                VerticalContentAlignment="Center"
@@ -373,7 +373,7 @@
                                        </Grid>
                                    </Border>
                                    <TextBox
-                                        Name="PART_HexTextBox"
+                                        x:Name="PART_HexTextBox"
                                        Grid.Column="2"
                                        Height="32"
                                        HorizontalAlignment="Stretch"
@@ -400,7 +400,7 @@
                                    ShowButtonSpinner="False"
                                    Value="{Binding Value, ElementName=Component1Slider}" />
                                <primitives:ColorSlider
-                                    Name="Component1Slider"
+                                    x:Name="Component1Slider"
                                    Grid.Row="2"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
@@ -431,7 +431,7 @@
                                    ShowButtonSpinner="False"
                                    Value="{Binding Value, ElementName=Component2Slider}" />
                                <primitives:ColorSlider
-                                    Name="Component2Slider"
+                                    x:Name="Component2Slider"
                                    Grid.Row="3"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
@@ -462,7 +462,7 @@
                                    ShowButtonSpinner="False"
                                    Value="{Binding Value, ElementName=Component3Slider}" />
                                <primitives:ColorSlider
-                                    Name="Component3Slider"
+                                    x:Name="Component3Slider"
                                    Grid.Row="4"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
@@ -500,7 +500,7 @@
                                    </NumericUpDown.IsVisible>
                                </NumericUpDown>
                                <primitives:ColorSlider
-                                    Name="AlphaComponentSlider"
+                                    x:Name="AlphaComponentSlider"
                                    Grid.Row="5"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
@@ -584,7 +584,7 @@
                        CornerRadius="8 8 0 0"
                        ClipToBounds="True">
                        <primitives:ColorSpectrum
-                            Name="ColorSpectrum"
+                            x:Name="ColorSpectrum"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Components="{TemplateBinding ColorSpectrumComponents}"
@@ -610,7 +610,7 @@
                        Orientation="Horizontal" />

                    <primitives:ColorSlider
-                        Name="ColorSpectrumAlphaSlider"
+                        x:Name="ColorSpectrumAlphaSlider"
                        Grid.Row="2"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
--- a/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
+++ b/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
@@ -4,7 +4,7 @@

    <PropertyGroup>
        <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.2</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.3</PackageReleaseNotes>
    </PropertyGroup>

    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
--- a/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
+++ b/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">

    <Import Project="../Package.props"/>
-    
+
    <PropertyGroup>
        <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.2</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.3</PackageReleaseNotes>
    </PropertyGroup>

    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -3,6 +3,28 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:Avalonia.Controls.Converters"
    x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Width="300" Height="300" Margin="10">
+            <Menu>
+                <MenuItem Header="_Icon">
+                    <MenuItem Header="Nothing" Icon="🐼" />
+                    <MenuItem Header="TextBlock">
+                        <MenuItem.Icon>
+                            <TextBlock Text="🐼" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                    <MenuItem Header="Geometry" Icon="{StaticResource SemiIconSemiLogo}" />
+                    <MenuItem Header="PathIcon">
+                        <MenuItem.Icon>
+                            <PathIcon
+                                Theme="{StaticResource InnerPathIcon}"
+                                Data="{DynamicResource SemiIconSemiLogo}" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                </MenuItem>
+            </Menu>
+        </StackPanel>
+    </Design.PreviewWith>

    <converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />

@@ -23,21 +45,22 @@
                        BorderThickness="0"
                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
                        CornerRadius="0"
+                        MinHeight="0"
                        DockPanel.Dock="Top"
                        RenderTransform="{x:Null}">
                        <RepeatButton.IsVisible>
                            <MultiBinding
                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
                                ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility"
-                                         RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </RepeatButton.IsVisible>
                        <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="8"
+                            Height="8"
                            Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                    </RepeatButton>
@@ -49,20 +72,21 @@
                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
                        CornerRadius="0"
                        DockPanel.Dock="Bottom"
+                        MinHeight="0"
                        RenderTransform="{x:Null}">
                        <RepeatButton.IsVisible>
                            <MultiBinding
                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
                                ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility"
-                                         RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </RepeatButton.IsVisible>
                        <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="8"
+                            Height="8"
                            Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                    </RepeatButton>
@@ -134,28 +158,23 @@
                            <ContentControl
                                Name="PART_ToggleIconPresenter"
                                Grid.Column="0"
-                                Width="16"
-                                Height="16"
                                Margin="{DynamicResource MenuItemIconMargin}"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
                                IsVisible="False" />

-                            <Viewbox
+                            <ContentControl
                                Name="PART_IconPresenter"
                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
                                Margin="{DynamicResource MenuItemIconMargin}"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                IsVisible="False"
-                                Stretch="Uniform">
-                                <ContentPresenter
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    Content="{TemplateBinding Icon}" />
-                            </Viewbox>
+                                Content="{TemplateBinding Icon}"
+                                IsVisible="{TemplateBinding Icon, Converter={x:Static ObjectConverters.IsNotNull}}">
+                                <ContentControl.DataTemplates>
+                                    <DataTemplate DataType="Geometry">
+                                        <PathIcon
+                                            Theme="{StaticResource InnerPathIcon}"
+                                            Data="{Binding}" />
+                                    </DataTemplate>
+                                </ContentControl.DataTemplates>
+                            </ContentControl>

                            <ContentPresenter
                                Name="PART_HeaderPresenter"
@@ -218,9 +237,6 @@
            </ControlTemplate>
        </Setter>

-        <Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>

        <Style Selector="^:selected">
            <Style Selector="^ /template/ Border#PART_LayoutRoot">
@@ -287,7 +303,7 @@
            <Setter Property="Content">
                <Template>
                    <Ellipse Fill="{Binding $parent[MenuItem].Foreground}"
-                             Margin="4" Width="8" Height="8" />
+                             Margin="4" Width="6" Height="6" />
                </Template>
            </Setter>
        </Style>
@@ -297,7 +313,7 @@
        <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}"/>
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
        <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
        <Setter Property="Template">
@@ -396,4 +412,4 @@
            </ControlTemplate>
        </Setter>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -377,9 +377,10 @@
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
-        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
        <Setter Property="Cursor" Value="Hand" />
@@ -404,15 +405,18 @@
                        <ContentPresenter
                            Name="PART_OnContentPresenter"
                            IsVisible="{TemplateBinding IsChecked}"
+                            Foreground="{TemplateBinding Foreground}"
                            Content="{TemplateBinding OnContent}"
                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
                        <ContentPresenter
                            Name="PART_OffContentPresenter"
                            IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
+                            Foreground="{TemplateBinding Foreground}"
                            Content="{TemplateBinding OffContent}"
                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
                        <ContentPresenter
                            Name="PART_ContentPresenter"
+                            Foreground="{TemplateBinding Foreground}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}">
                            <ContentPresenter.IsVisible>
@@ -432,24 +436,20 @@
            <Setter Property="RenderTransform" Value="scale(0.98)" />
        </Style>

-        <Style Selector="^ /template/ Border#Background">
-            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
-            <Setter Property="Background" Value="{TemplateBinding Background}" />
-        </Style>
-
-        <Style Selector="^:pointerover /template/ Border#Background">
+        <Style Selector="^:pointerover">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
        </Style>

-        <Style Selector="^:pressed /template/ Border#Background">
+        <Style Selector="^:pressed">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
        </Style>

-        <Style Selector="^:disabled /template/ Border#Background">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
+        <Style Selector="^:disabled">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>

        <Style Selector="^.Large">
@@ -460,15 +460,5 @@
            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
        </Style>
-
-        <Style Selector="^ /template/ Border#Background">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
-        </Style>
-        <Style Selector="^:disabled /template/ Border#Background">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
-            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
-        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/Window.axaml
+++ b/src/Semi.Avalonia/Controls/Window.axaml
@@ -29,19 +29,5 @@
                </Panel>
            </ControlTemplate>
        </Setter>
-        <Style Selector="^.Borderless">
-            <Setter Property="ExtendClientAreaTitleBarHeightHint" Value="40"/>
-            <Setter Property="ExtendClientAreaToDecorationsHint" Value="True"/>
-            <Setter Property="SystemDecorations">
-                <OnPlatform>
-                    <On Options="Default, Windows, macOS">
-                        <SystemDecorations>Full</SystemDecorations>
-                    </On>
-                    <On Options="Linux">
-                        <SystemDecorations>None</SystemDecorations>
-                    </On>
-                </OnPlatform>
-            </Setter>
-        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Extensions/ApplicationExtension.cs
+++ b/src/Semi.Avalonia/Extensions/ApplicationExtension.cs
@@ -0,0 +1,59 @@
+using System.Collections.Generic;
+using System.Runtime.InteropServices;
+using Avalonia;
+using Avalonia.Media;
+using Avalonia.Platform;
+using Avalonia.Styling;
+
+namespace Semi.Avalonia;
+
+public static class ApplicationExtension
+{
+    private static Application _app = null!;
+
+    private static readonly Dictionary<Color, ThemeVariant> ColorThemeMap = new()
+    {
+        [Color.Parse("#8EE3F0")] = SemiTheme.Aquatic,
+        [Color.Parse("#903909")] = SemiTheme.Desert,
+        [Color.Parse("#A1BFDE")] = SemiTheme.Dusk,
+        [Color.Parse("#D6B4FD")] = SemiTheme.NightSky
+    };
+
+    public static void RegisterFollowSystemTheme(this Application app)
+    {
+        _app = app;
+        if (!RuntimeInformation.IsOSPlatform(OSPlatform.Windows)) return;
+        if (app.PlatformSettings is null) return;
+        app.PlatformSettings.ColorValuesChanged -= OnColorValuesChanged;
+        app.PlatformSettings.ColorValuesChanged += OnColorValuesChanged;
+        OnColorValuesChanged(null, app.PlatformSettings?.GetColorValues());
+    }
+
+    public static void UnregisterFollowSystemTheme(this Application app)
+    {
+        _app = app;
+        if (!RuntimeInformation.IsOSPlatform(OSPlatform.Windows)) return;
+        if (app.PlatformSettings is null) return;
+        app.PlatformSettings.ColorValuesChanged -= OnColorValuesChanged;
+    }
+
+    private static void OnColorValuesChanged(object? _, PlatformColorValues? args)
+    {
+        ThemeVariant result;
+        if (args?.ContrastPreference is ColorContrastPreference.High)
+        {
+            result = ColorThemeMap.TryGetValue(args.AccentColor1, out var theme) ? theme : ThemeVariant.Default;
+        }
+        else
+        {
+            result = args?.ThemeVariant switch
+            {
+                PlatformThemeVariant.Light => ThemeVariant.Light,
+                PlatformThemeVariant.Dark => ThemeVariant.Dark,
+                _ => ThemeVariant.Default
+            };
+        }
+
+        _app.RequestedThemeVariant = result;
+    }
+}
--- a/src/Semi.Avalonia/Index.axaml
+++ b/src/Semi.Avalonia/Index.axaml
@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:semi="https://irihi.tech/semi">
    <Styles.Resources>
        <ResourceDictionary>
@@ -12,8 +13,8 @@
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://Semi.Avalonia/Controls/_index.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Shared/_index.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia/Tokens/Variables.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Locale/zh-cn.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Icons/_index.axaml" />
            </ResourceDictionary.MergedDictionaries>
--- a/src/Semi.Avalonia/Locale/de-de.axaml
+++ b/src/Semi.Avalonia/Locale/de-de.axaml
@@ -0,0 +1,26 @@
+<ResourceDictionary x:Class="Semi.Avalonia.Locale.de_de"
+                    xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DatePicker  -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">Tag</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">Monat</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">Jahr</x:String>
+    <!--  TimePicker  -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">Stunde</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">Minute</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">Sekunde</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Ausschneiden</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Kopieren</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Einfügen</x:String>
+    <!--  ManagedFileChooser  -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">Dateiname</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Ausgeblendete Elemente anzeigen</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Abbrechen</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Name</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Änderungsdatum</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Typ</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Größe</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">Die Datei {0} existiert bereits. Möchten Sie sie ersetzen?</x:String>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Locale/de-de.axaml.cs
+++ b/src/Semi.Avalonia/Locale/de-de.axaml.cs
@@ -0,0 +1,8 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Locale;
+
+public class de_de : ResourceDictionary
+{
+    
+}
--- a/src/Semi.Avalonia/Locale/en-us.axaml
+++ b/src/Semi.Avalonia/Locale/en-us.axaml
@@ -16,7 +16,7 @@
    <x:String x:Key="STRING_MENU_PASTE">Paste</x:String>
    <!--  ManagedFileChooser  -->
    <x:String x:Key="STRING_CHOOSER_FILE_NAME">File name</x:String>
-    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Show hidden flies</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Show hidden files</x:String>
    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Cancel</x:String>
    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Name</x:String>
--- a/src/Semi.Avalonia/Semi.Avalonia.csproj
+++ b/src/Semi.Avalonia/Semi.Avalonia.csproj
@@ -4,7 +4,7 @@

    <PropertyGroup>
        <Title>Semi.Avalonia</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.2</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.3</PackageReleaseNotes>
    </PropertyGroup>

    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
--- a/src/Semi.Avalonia/SemiTheme.axaml
+++ b/src/Semi.Avalonia/SemiTheme.axaml
@@ -1,4 +1,6 @@
-<Styles x:Class="Semi.Avalonia.SemiTheme" xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+<Styles x:Class="Semi.Avalonia.SemiTheme"
+        xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:semi="https://irihi.tech/semi">
    <Styles.Resources>
        <ResourceDictionary>
@@ -12,8 +14,8 @@
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://Semi.Avalonia/Controls/_index.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Shared/_index.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia/Tokens/Variables.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Locale/zh-cn.axaml" />
                <ResourceInclude Source="avares://Semi.Avalonia/Icons/_index.axaml" />
            </ResourceDictionary.MergedDictionaries>
--- a/src/Semi.Avalonia/SemiTheme.axaml.cs
+++ b/src/Semi.Avalonia/SemiTheme.axaml.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Globalization;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 using Avalonia.Styling;
@@ -23,6 +24,7 @@ public class SemiTheme : Styles
        { new CultureInfo("uk-ua"), new uk_ua() },
        { new CultureInfo("ru-ru"), new ru_ru() },
        { new CultureInfo("zh-tw"), new zh_tw() },
+        { new CultureInfo("de-de"), new de_de() },
    };

    private readonly IServiceProvider? sp;
@@ -60,4 +62,24 @@ public class SemiTheme : Styles
        }
        return _localeToResource[new CultureInfo("zh-cn")];
    }
+
+    public static void OverrideLocaleResources(Application application, CultureInfo? culture)
+    {
+        if (culture is null) return;
+        if (!_localeToResource.TryGetValue(culture, out var resources)) return;
+        foreach (var kv in resources)
+        {
+            application.Resources[kv.Key] = kv.Value;
+        }
+    }
+    
+    public static void OverrideLocaleResources(StyledElement element, CultureInfo? culture)
+    {
+        if (culture is null) return;
+        if (!_localeToResource.TryGetValue(culture, out var resources)) return;
+        foreach (var kv in resources)
+        {
+            element.Resources[kv.Key] = kv.Value;
+        }
+    }
 }
--- a/src/Semi.Avalonia/Themes/Base.axaml
+++ b/src/Semi.Avalonia/Themes/Base.axaml
@@ -1,13 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.ThemeDictionaries>
-        <ResourceDictionary x:Key="Default">
-            <SolidColorBrush x:Key="DefaultForeground" Color="#1C1F23" />
-        </ResourceDictionary>
-        <ResourceDictionary x:Key="Dark">
-            <SolidColorBrush x:Key="DefaultForeground" Color="#F9F9F9" />
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-    <x:Double x:Key="DefaultFontSize">14</x:Double>
-    <FontFamily x:Key="DefaultFontFamily">Inter, -apple-system,BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
-    <FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>
-</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Window.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Window.axaml
@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StaticResource x:Key="WindowDefaultBackground" ResourceKey="SemiColorBackground0" />
    <StaticResource x:Key="WindowDefaultForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="DefaultForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Light/Window.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Window.axaml
@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StaticResource x:Key="WindowDefaultBackground" ResourceKey="SemiColorBackground0" />
    <StaticResource x:Key="WindowDefaultForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="DefaultForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Thickness x:Key="AdornerLayerBorderThickness">2</Thickness>
-    <CornerRadius x:Key="AdornerLayerCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="AdornerLayerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Thickness x:Key="AutoCompleteBoxPopupBorderThickness">1</Thickness>
-    <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
+    <StaticResource x:Key="AutoCompleteBoxPopupBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="AutoCompleteBoxPopupMargin" ResourceKey="SemiThicknessExtraTight" />
    <Thickness x:Key="AutoCompleteBoxPopupPadding">0 4</Thickness>
-    <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
-    <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>
-    <x:Double x:Key="AutoCompleteBoxLargeHeight">40</x:Double>
+    <StaticResource x:Key="AutoCompleteBoxPopupCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="AutoCompleteBoxDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="AutoCompleteBoxSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="AutoCompleteBoxLargeHeight" ResourceKey="SemiHeightControlLarge" />
    <x:Double x:Key="AutoCompleteMaxDropdownHeight">600</x:Double>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Border.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Border.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="RadiusCardCornerRadius">4</CornerRadius>
-    <Thickness x:Key="ThicknessCardPadding">20</Thickness>
-    <Thickness x:Key="ThicknessCardMargin">4</Thickness>
-    <Thickness x:Key="ThicknessCardBorderThickness">1</Thickness>
+    <StaticResource x:Key="RadiusCardCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="ThicknessCardPadding" ResourceKey="SemiThicknessBaseLoose" />
+    <StaticResource x:Key="ThicknessCardMargin" ResourceKey="SemiThicknessExtraTight" />
+    <StaticResource x:Key="ThicknessCardBorderThickness" ResourceKey="SemiBorderThicknessControl" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Button.axaml
@@ -1,18 +1,13 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="ButtonDefaultFontSize">14</x:Double>
-    <FontWeight x:Key="ButtonDefaultFontWeight">600</FontWeight>
-
+    <StaticResource x:Key="ButtonDefaultFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="ButtonDefaultFontWeight" ResourceKey="SemiFontWeightBold" />
    <Thickness x:Key="ButtonDefaultPadding">12 6</Thickness>
    <Thickness x:Key="ButtonLargePadding">16 10</Thickness>
    <Thickness x:Key="ButtonSmallPadding">6 2</Thickness>
-
-    <x:Double x:Key="ButtonDefaultHeight">32</x:Double>
-    <x:Double x:Key="ButtonSmallHeight">24</x:Double>
-    <x:Double x:Key="ButtonLargeHeight">40</x:Double>
-
-    <Thickness x:Key="ButtonBorderThickness">1</Thickness>
-
-    <CornerRadius x:Key="ButtonCornerRadius">3</CornerRadius>
-
+    <StaticResource x:Key="ButtonDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="ButtonSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="ButtonLargeHeight" ResourceKey="SemiHeightControlLarge" />
+    <StaticResource x:Key="ButtonBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="ButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
    <StaticResource x:Key="IconButtonClearData" ResourceKey="SemiIconClear" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml
@@ -1,7 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ButtonSpinnerIncreaseButtonGlyph" ResourceKey="SemiIconChevronUp"/>
-    <StaticResource x:Key="ButtonSpinnerDecreaseButtonGlyph" ResourceKey="SemiIconChevronDown"/>
-
-    <CornerRadius x:Key="ButtonSpinnerButtonGroupCornerRadius">3</CornerRadius>
-    <Thickness x:Key="ButtonSpinnerButtonGroupBorderThickness">1</Thickness>
+    <StaticResource x:Key="ButtonSpinnerIncreaseButtonGlyph" ResourceKey="SemiIconChevronUp" />
+    <StaticResource x:Key="ButtonSpinnerDecreaseButtonGlyph" ResourceKey="SemiIconChevronDown" />
+    <StaticResource x:Key="ButtonSpinnerButtonGroupCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="ButtonSpinnerButtonGroupBorderThickness" ResourceKey="SemiBorderThicknessControl" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Calendar.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Calendar.axaml
@@ -1,14 +1,12 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Thickness x:Key="CalendarBorderThickness">1</Thickness>
-    <CornerRadius x:Key="CalendarCornerRadius">6</CornerRadius>
+    <StaticResource x:Key="CalendarBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="CalendarCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
    <GridLength x:Key="CalendarItemWeekDayNameHeight">40</GridLength>
-    <StaticResource x:Key="CalendarItemPreviousIconGlyph" ResourceKey="SemiIconChevronLeft"/>
-    <StaticResource x:Key="CalendarItemNextIconGlyph" ResourceKey="SemiIconChevronRight"/>
-
-    <FontWeight x:Key="CalendarItemCalendarButtonSelectedFontWeight">600</FontWeight>
-    <CornerRadius x:Key="CalendarItemCalendarButtonCornerRadius">3</CornerRadius>
-    <CornerRadius x:Key="CalendarItemCalendarDayButtonCornerRadius">3</CornerRadius>
-
+    <StaticResource x:Key="CalendarItemPreviousIconGlyph" ResourceKey="SemiIconChevronLeft" />
+    <StaticResource x:Key="CalendarItemNextIconGlyph" ResourceKey="SemiIconChevronRight" />
+    <StaticResource x:Key="CalendarItemCalendarButtonSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="CalendarItemCalendarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="CalendarItemCalendarDayButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
    <x:Double x:Key="CalendarMinWidth">240</x:Double>
    <x:Double x:Key="CalendarMinHeight">250</x:Double>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/CalendarDatePicker.axaml
@@ -1,8 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="CalendarDatePickerIconGlyph" ResourceKey="SemiIconCalendar"/>
-    <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
-    <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
-    <x:Double x:Key="CalendarDatePickerDefaultHeight">32</x:Double>
-    <x:Double x:Key="CalendarDatePickerSmallHeight">24</x:Double>
-    <x:Double x:Key="CalendarDatePickerLargeHeight">40</x:Double>
+    <StaticResource x:Key="CalendarDatePickerIconGlyph" ResourceKey="SemiIconCalendar" />
+    <StaticResource x:Key="CalendarDatePickerBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="CalendarDatePickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="CalendarDatePickerDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="CalendarDatePickerSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="CalendarDatePickerLargeHeight" ResourceKey="SemiHeightControlLarge" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -1,14 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="CarouselButtonGlyph" ResourceKey="SemiIconChevronLeft"/>
-
+    <StaticResource x:Key="CarouselButtonGlyph" ResourceKey="SemiIconChevronLeft" />
    <x:Double x:Key="CarouselIndicatorDotWidth">8</x:Double>
    <x:Double x:Key="CarouselIndicatorDotHeight">8</x:Double>
-
    <x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double>
-
    <x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
    <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
    <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
-
    <Thickness x:Key="CarouselButtonMargin">20</Thickness>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/CheckBox.axaml
@@ -1,20 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="CheckBoxFontSize">14</x:Double>
+    <StaticResource x:Key="CheckBoxFontSize" ResourceKey="SemiFontSizeRegular" />
    <x:Double x:Key="CheckBoxBoxWidth">16</x:Double>
    <x:Double x:Key="CheckBoxBoxHeight">16</x:Double>
    <Thickness x:Key="CheckBoxBoxMargin">0 2 0 0</Thickness>
    <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
-
    <x:Double x:Key="CheckBoxBoxGlyphWidth">16</x:Double>
    <x:Double x:Key="CheckBoxBoxGlyphHeight">16</x:Double>
-
-    <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
-    <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>
-
-    <StaticResource x:Key="CheckBoxCheckGlyph" ResourceKey="SemiIconCheckBoxTick"/>
-    <StaticResource x:Key="CheckBoxIndeterminateGlyph" ResourceKey="SemiIconCheckBoxIndeterminate"/>
-
-    <Thickness x:Key="CheckBoxCardBorderThickness">1</Thickness>
+    <StaticResource x:Key="CheckBoxBoxCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="CheckBoxBoxBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="CheckBoxCheckGlyph" ResourceKey="SemiIconCheckBoxTick" />
+    <StaticResource x:Key="CheckBoxIndeterminateGlyph" ResourceKey="SemiIconCheckBoxIndeterminate" />
+    <StaticResource x:Key="CheckBoxCardBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="CheckBoxCardPadding">16 12</Thickness>
-    <CornerRadius x:Key="CheckBoxCardCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="CheckBoxCardCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
@@ -1,21 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
-    <Thickness x:Key="ComboBoxSelectorThickness">1</Thickness>
-
+    <StaticResource x:Key="ComboBoxSelectorCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="ComboBoxSelectorThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="ComboBoxItemDefaultPadding">12 8</Thickness>
    <Thickness x:Key="ComboBoxSelectorDefaultPadding">12 0 0 0</Thickness>
-
    <x:Double x:Key="ComboBoxPopupMaxDropDownHeight">504</x:Double>
-    <Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>
-    <CornerRadius x:Key="ComboBoxPopupBoxCornerRadius">6</CornerRadius>
-
+    <StaticResource x:Key="ComboBoxPopupBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="ComboBoxPopupBoxCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
    <x:Double x:Key="ComboBoxIconWidth">32</x:Double>
-    <StaticResource x:Key="ComboBoxIcon" ResourceKey="SemiIconChevronDown"/>
-
-    <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
+    <StaticResource x:Key="ComboBoxIcon" ResourceKey="SemiIconChevronDown" />
+    <StaticResource x:Key="ComboBoxPopupBorderMargin" ResourceKey="SemiThicknessExtraTight" />
    <Thickness x:Key="ComboBoxPopupBorderPadding">0 4</Thickness>
-
-    <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>
-    <x:Double x:Key="ComboBoxLargeHeight">40</x:Double>
+    <StaticResource x:Key="ComboBoxDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="ComboBoxSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="ComboBoxLargeHeight" ResourceKey="SemiHeightControlLarge" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/DataValidationErrors.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/DataValidationErrors.axaml
@@ -1,2 +1,2 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/DatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/DatePicker.axaml
@@ -1,3 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DatePickerIconGlyph" ResourceKey="SemiIconCalendar"/>
+    <StaticResource x:Key="DatePickerIconGlyph" ResourceKey="SemiIconCalendar" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/DateTimePickerShared.axaml
@@ -3,17 +3,12 @@
    <StaticResource x:Key="DateTimePickerButtonDownGlyph" ResourceKey="SemiIconCaretDown" />
    <StaticResource x:Key="DateTimePickerAcceptGlyph" ResourceKey="SemiIconTick" />
    <StaticResource x:Key="DateTimePickerDismissGlyph" ResourceKey="SemiIconClose" />
-
    <x:Double x:Key="DateTimePickerListBoxItemHeight">36</x:Double>
-
-
-    <Thickness x:Key="DateTimePickerFlyoutPadding">0</Thickness>
-    <Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
-
-    <x:Double x:Key="DateTimePickerButtonSmallHeight">24</x:Double>
-    <x:Double x:Key="DateTimePickerButtonDefaultHeight">32</x:Double>
-    <x:Double x:Key="DateTimePickerButtonLargeHeight">40</x:Double>
-
-    <Thickness x:Key="DateTimePickerButtonBorderThickness">1</Thickness>
-    <CornerRadius x:Key="DateTimePickerButtonCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="DateTimePickerFlyoutPadding" ResourceKey="SemiThicknessNone" />
+    <StaticResource x:Key="DateTimePickerFlyoutBorderMargin" ResourceKey="SemiThicknessTight" />
+    <StaticResource x:Key="DateTimePickerButtonSmallHeight" ResourceKey="SemiFontSizeHeader3" />
+    <StaticResource x:Key="DateTimePickerButtonDefaultHeight" ResourceKey="SemiFontSizeHeader1" />
+    <StaticResource x:Key="DateTimePickerButtonLargeHeight" ResourceKey="SemiHeightControlLarge" />
+    <StaticResource x:Key="DateTimePickerButtonBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="DateTimePickerButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/DropDownButton.axaml
@@ -1,3 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DropDownButtonIconGlyph" ResourceKey="SemiIconChevronDown"/>
+    <StaticResource x:Key="DropDownButtonIconGlyph" ResourceKey="SemiIconChevronDown" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Expander.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Expander.axaml
@@ -1,11 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <FontWeight x:Key="ExpanderHeaderFontWeight">600</FontWeight>
-    <x:Double x:Key="ExpanderIconSize">8</x:Double>
+    <StaticResource x:Key="ExpanderHeaderFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="ExpanderIconSize" ResourceKey="SemiWidthIconExtraSmall" />
    <Thickness x:Key="ExpanderIconMargin">8 0 0 0</Thickness>
-    <StaticResource x:Key="ExpanderIcon" ResourceKey="SemiIconChevronDown"/>
-
+    <StaticResource x:Key="ExpanderIcon" ResourceKey="SemiIconChevronDown" />
    <Thickness x:Key="ExpanderHeaderMargin">8 4</Thickness>
-    <Thickness x:Key="ExpanderHeaderPadding">8</Thickness>
+    <StaticResource x:Key="ExpanderHeaderPadding" ResourceKey="SemiThicknessTight" />
    <Thickness x:Key="ExpanderContentMargin">16 4 16 8</Thickness>
    <Thickness x:Key="ExpanderDownContentBorderThickness">0 0 0 1</Thickness>
    <Thickness x:Key="ExpanderUpContentBorderThickness">0 1 0 0</Thickness>
--- a/src/Semi.Avalonia/Themes/Shared/Flyout.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Flyout.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <FontWeight x:Key="FlyoutFontWeight">400</FontWeight>
-    <Thickness x:Key="FlyoutBorderThickness">1</Thickness>
+    <StaticResource x:Key="FlyoutFontWeight" ResourceKey="SemiFontWeightRegular" />
+    <StaticResource x:Key="FlyoutBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <x:Double x:Key="FlyoutMinHeight">100</x:Double>
    <x:Double x:Key="FlyoutMinWidth">100</x:Double>
    <x:Double x:Key="FlyoutMaxHeight">600</x:Double>
    <x:Double x:Key="FlyoutMaxWidth">600</x:Double>
-    <CornerRadius x:Key="FlyoutCornerRadius">6</CornerRadius>
-    <Thickness x:Key="FlyoutPadding">8</Thickness>
+    <StaticResource x:Key="FlyoutCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="FlyoutPadding" ResourceKey="SemiThicknessTight" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/GridSplitter.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/GridSplitter.axaml
@@ -1,2 +1,2 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
@@ -1,7 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="HeaderedContentControlCornerRadius">6</CornerRadius>
-    <Thickness x:Key="HeaderedContentControlBorderThickness">1</Thickness>
-    <FontWeight x:Key="HeaderedContentControlHeaderFontWeight">600</FontWeight>
-    <Thickness x:Key="HeaderedContentControlHeaderPadding">20</Thickness>
-    <Thickness x:Key="HeaderedContentControlContentPadding">20</Thickness>
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="HeaderedContentControlCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="HeaderedContentControlBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="HeaderedContentControlHeaderFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="HeaderedContentControlHeaderPadding" ResourceKey="SemiThicknessBaseLoose" />
+    <StaticResource x:Key="HeaderedContentControlContentPadding" ResourceKey="SemiThicknessBaseLoose" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/HyperlinkButton.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/HyperlinkButton.axaml
@@ -1,9 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="HyperlinkButtonFontSize">14</x:Double>
-    <FontWeight x:Key="HyperlinkButtonFontWeight">600</FontWeight>
+    <StaticResource x:Key="HyperlinkButtonFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="HyperlinkButtonFontWeight" ResourceKey="SemiFontWeightBold" />
    <x:Double x:Key="HyperlinkButtonLinkGlyphWidth">16</x:Double>
    <x:Double x:Key="HyperlinkButtonLinkGlyphHeight">16</x:Double>
    <Thickness x:Key="HyperlinkButtonLinkGlyphMargin">0 0 4 0</Thickness>
-
    <StaticResource x:Key="HyperlinkButtonLinkGlyph" ResourceKey="SemiIconLink" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Label.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Label.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Thickness x:Key="LabelTagBorderThickness">1</Thickness>
+    <StaticResource x:Key="LabelTagBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="LabelTagSmallPadding">8 2</Thickness>
    <Thickness x:Key="LabelTagLargePadding">8 4</Thickness>
    <x:Double x:Key="LabelTagSmallHeight">20</x:Double>
    <x:Double x:Key="LabelTagLargeHeight">24</x:Double>
-    <x:Double x:Key="LabelTagFontSize">12</x:Double>
-    <CornerRadius x:Key="LabelTagSquareCornerRadius">3</CornerRadius>
-    <CornerRadius x:Key="LabelTagCircleCornerRadius">9999</CornerRadius>
+    <StaticResource x:Key="LabelTagFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="LabelTagSquareCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="LabelTagCircleCornerRadius" ResourceKey="SemiBorderRadiusFull" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ListBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ListBox.axaml
@@ -2,5 +2,4 @@
    <!-- ListBox -->
    <Thickness x:Key="ListBoxItemDefaultPadding">12 8</Thickness>
    <CornerRadius x:Key="ListBoxItemCornerRadius">0</CornerRadius>
-
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ManagedFileChooser.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ManagedFileChooser.axaml
@@ -1,3 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ManagedFileChooserUpButtonGlyph" ResourceKey="SemiIconArrowUp"/>
+    <StaticResource x:Key="ManagedFileChooserUpButtonGlyph" ResourceKey="SemiIconArrowUp" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Menu.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Menu.axaml
@@ -1,28 +1,22 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="MenuScrollViewerUpButtonGlyph" ResourceKey="SemiIconChevronUp"/>
-    <StaticResource x:Key="MenuScrollViewerDownButtonGlyph" ResourceKey="SemiIconChevronDown"/>
-
-    <StaticResource x:Key="MenuItemExpandIconGlyph" ResourceKey="SemiIconChevronRight"/>
-    <StaticResource x:Key="MenuCheckGlyph" ResourceKey="SemiIconCheckBoxTick"/>
-
+    <StaticResource x:Key="MenuScrollViewerUpButtonGlyph" ResourceKey="SemiIconCaretUp" />
+    <StaticResource x:Key="MenuScrollViewerDownButtonGlyph" ResourceKey="SemiIconCaretDown" />
+    <StaticResource x:Key="MenuItemExpandIconGlyph" ResourceKey="SemiIconChevronRight" />
+    <StaticResource x:Key="MenuCheckGlyph" ResourceKey="SemiIconTick" />
    <!--  MenuFlyout  -->
-    <Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
+    <StaticResource x:Key="MenuFlyoutBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="MenuFlyoutPadding">0 4</Thickness>
-    <CornerRadius x:Key="MenuFlyoutCornerRadius">6</CornerRadius>
+    <StaticResource x:Key="MenuFlyoutCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
    <x:Double x:Key="MenuFlyoutMinHeight">16</x:Double>
    <x:Double x:Key="MenuFlyoutMinWidth">100</x:Double>
    <x:Double x:Key="MenuFlyoutMaxHeight">400</x:Double>
    <x:Double x:Key="MenuFlyoutMaxWidth">600</x:Double>
-
    <!--  MenuItem  -->
    <Thickness x:Key="MenuItemPadding">16 8</Thickness>
-    
-    <CornerRadius x:Key="MenuItemCornerRadius">3</CornerRadius>
-
+    <StaticResource x:Key="MenuItemCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
    <x:Double x:Key="MenuItemSeparatorHeight">1</x:Double>
-    <Thickness x:Key="MenuItemSeparatorMargin">2</Thickness>
-    <Thickness x:Key="MenuItemIconMargin">0 0 12 0</Thickness>
+    <StaticResource x:Key="MenuItemSeparatorMargin" ResourceKey="SemiThicknessSuperTight" />
+    <Thickness x:Key="MenuItemIconMargin">0 0 8 0</Thickness>
    <Thickness x:Key="MenuItemInputGestureTextMargin">4 0</Thickness>
-
    <Thickness x:Key="MenuItemExpandIconMargin">4 0</Thickness>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/NotificationCard.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/NotificationCard.axaml
@@ -1,22 +1,19 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <x:Double x:Key="NotificationCardMinWidth">320</x:Double>
-    <Thickness x:Key="NotificationCardBorderThickness">1</Thickness>
-    <CornerRadius x:Key="NotificationCardCornerRadius">6</CornerRadius>
-    <Thickness x:Key="NotificationCardMargin">8</Thickness>
+    <StaticResource x:Key="NotificationCardBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="NotificationCardCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="NotificationCardMargin" ResourceKey="SemiThicknessTight" />
    <Thickness x:Key="NotificationCardPadding">20 16 12 16</Thickness>
-
-    <x:Double x:Key="NotificationCardIconWidth">20</x:Double>
-    <x:Double x:Key="NotificationCardIconHeight">20</x:Double>
+    <StaticResource x:Key="NotificationCardIconWidth" ResourceKey="SemiFontSizeHeader4" />
+    <StaticResource x:Key="NotificationCardIconHeight" ResourceKey="SemiFontSizeHeader4" />
    <Thickness x:Key="NotificationCardIconMargin">0 0 12 0</Thickness>
-    <StaticResource x:Key="NotificationCardInformationIconPathData" ResourceKey="SemiIconInfoCircle"/>
-    <StaticResource x:Key="NotificationCardSuccessIconPathData" ResourceKey="SemiIconTickCircle"/>
-    <StaticResource x:Key="NotificationCardWarningIconPathData" ResourceKey="SemiIconAlertTriangle"/>
-    <StaticResource x:Key="NotificationCardErrorIconPathData" ResourceKey="SemiIconAlertCircle"/>
-
-    <x:Double x:Key="NotificationCardTitleSpacing">4</x:Double>
-
-    <x:Double x:Key="NotificationCardTitleFontSize">16</x:Double>
-    <FontWeight x:Key="NotificationCardTitleFontWeight">600</FontWeight>
-    <x:Double x:Key="NotificationCardMessageFontSize">14</x:Double>
-    <FontWeight x:Key="NotificationCardMessageFontWeight">400</FontWeight>
+    <StaticResource x:Key="NotificationCardInformationIconPathData" ResourceKey="SemiIconInfoCircle" />
+    <StaticResource x:Key="NotificationCardSuccessIconPathData" ResourceKey="SemiIconTickCircle" />
+    <StaticResource x:Key="NotificationCardWarningIconPathData" ResourceKey="SemiIconAlertTriangle" />
+    <StaticResource x:Key="NotificationCardErrorIconPathData" ResourceKey="SemiIconAlertCircle" />
+    <StaticResource x:Key="NotificationCardTitleSpacing" ResourceKey="SemiSpacingExtraTight" />
+    <StaticResource x:Key="NotificationCardTitleFontSize" ResourceKey="SemiFontSizeHeader6" />
+    <StaticResource x:Key="NotificationCardTitleFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="NotificationCardMessageFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="NotificationCardMessageFontWeight" ResourceKey="SemiFontWeightRegular" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/NumericUpDown.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/NumericUpDown.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
-    <x:Double x:Key="NumericUpDownDefaultHeight">32</x:Double>
-    <x:Double x:Key="NumericUpDownSmallHeight">24</x:Double>
-    <x:Double x:Key="NumericUpDownLargeHeight">40</x:Double>
+    <StaticResource x:Key="NumericUpDownCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="NumericUpDownDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="NumericUpDownSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="NumericUpDownLargeHeight" ResourceKey="SemiHeightControlLarge" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ProgressBar.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ProgressBar.axaml
@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="ProgressBarBackgroundCornerRadius">3</CornerRadius>
-    <FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight>
+    <StaticResource x:Key="ProgressBarBackgroundCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="ProgressBarTextFontWeight" ResourceKey="SemiFontWeightBold" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/RadioButton.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/RadioButton.axaml
@@ -2,29 +2,23 @@
    <!-- RadioButton -->
    <x:Double x:Key="RadioButtonIconRadius">16</x:Double>
    <x:Double x:Key="RadioButtonGlyphRadius">6</x:Double>
-    <x:Double x:Key="RadioButtonFontSize">14</x:Double>
+    <StaticResource x:Key="RadioButtonFontSize" ResourceKey="SemiFontSizeRegular" />
    <Thickness x:Key="RadioButtonIconMargin">0 2 0 0</Thickness>
-
-    <x:Double x:Key="RadioButtonUncheckIconDefaultThickness">1</x:Double>
+    <StaticResource x:Key="RadioButtonUncheckIconDefaultThickness" ResourceKey="SemiBorderSpacingControl" />
    <Thickness x:Key="RadioButtonContentMargin">8 0 0 0</Thickness>
-
    <!-- ButtonRadioButton -->
-    <CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
-
-    <CornerRadius x:Key="RadioButtonGroupCornerRadius">3</CornerRadius>
-    <CornerRadius x:Key="RadioButtonButtonCornerRadius">3</CornerRadius>
-
-    <FontWeight x:Key="RadioButtonButtonFontWeight">600</FontWeight>
+    <StaticResource x:Key="RadioButtonBoxCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="RadioButtonGroupCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="RadioButtonButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="RadioButtonButtonFontWeight" ResourceKey="SemiFontWeightBold" />
    <Thickness x:Key="RadioButtonButtonSmallPadding">16 2</Thickness>
    <Thickness x:Key="RadioButtonButtonDefaultPadding">16 4</Thickness>
    <Thickness x:Key="RadioButtonButtonLargePadding">24 6</Thickness>
-
-    <x:Double x:Key="RadioButtonButtonSmallFontSize">12</x:Double>
-    <x:Double x:Key="RadioButtonButtonDefaultFontSize">12</x:Double>
-    <x:Double x:Key="RadioButtonButtonLargeFontSize">14</x:Double>
-
+    <StaticResource x:Key="RadioButtonButtonSmallFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="RadioButtonButtonDefaultFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="RadioButtonButtonLargeFontSize" ResourceKey="SemiFontSizeRegular" />
    <!-- CardRadioButton -->
-    <Thickness x:Key="RadioButtonBorderThickness">1</Thickness>
+    <StaticResource x:Key="RadioButtonBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="RadioButtonCardPadding">16 12</Thickness>
-    <CornerRadius x:Key="RadioButtonCardCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="RadioButtonCardCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
@@ -1,5 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="ScrollBarThickness">14</x:Double>
+    <StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiFontSizeRegular" />
    <x:Double x:Key="ScrollBarThumbThickness">10</x:Double>
    <StaticResource x:Key="ScrollBarUpGlyph" ResourceKey="SemiIconSmallTriangleTop" />
    <StaticResource x:Key="ScrollBarDownGlyph" ResourceKey="SemiIconSmallTriangleDown" />
--- a/src/Semi.Avalonia/Themes/Shared/Slider.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Slider.axaml
@@ -1,12 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <x:Double x:Key="SliderTrackWidth">4</x:Double>
-    <CornerRadius x:Key="SliderTrackCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="SliderTrackCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
    <x:Double x:Key="SliderThumbWidth">16</x:Double>
    <x:Double x:Key="SliderThumbHeight">16</x:Double>
    <CornerRadius x:Key="SliderThumbCornerRadius">24</CornerRadius>
-    <Thickness x:Key="SliderBorderThickness">0</Thickness>
-
+    <StaticResource x:Key="SliderBorderThickness" ResourceKey="SemiThicknessNone" />
    <x:Double x:Key="SliderTickHorizontalHeight">4</x:Double>
    <x:Double x:Key="SliderTickVerticalWidth">4</x:Double>
-    <Thickness x:Key="SliderThumbBorderThickness">2</Thickness>
+    <StaticResource x:Key="SliderThumbBorderThickness" ResourceKey="SemiThicknessSuperTight" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/SplitView.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/SplitView.axaml
@@ -1,10 +1,7 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="using:System">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="using:System">
    <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
    <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
-    <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
-    <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+    <x:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</x:TimeSpan>
+    <x:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</x:TimeSpan>
    <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/TabControl.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TabControl.axaml
@@ -1,2 +1,2 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
@@ -1,3 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <FontWeight x:Key="TabItemSelectedFontWeight">600</FontWeight>
+    <StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/TextBlock.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TextBlock.axaml
@@ -1,15 +1,14 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="TextBlockCodeFontSize">12</x:Double>
-
-    <x:Double x:Key="TextBlockFontSize">14</x:Double>
-    <x:Double x:Key="TextBlockTitleH1FontSize">32</x:Double>
-    <x:Double x:Key="TextBlockTitleH2FontSize">28</x:Double>
-    <x:Double x:Key="TextBlockTitleH3FontSize">24</x:Double>
-    <x:Double x:Key="TextBlockTitleH4FontSize">20</x:Double>
-    <x:Double x:Key="TextBlockTitleH5FontSize">18</x:Double>
-    <x:Double x:Key="TextBlockTitleH6FontSize">16</x:Double>
-    <FontWeight x:Key="TextBlockFontWeight">400</FontWeight>
-    <FontWeight x:Key="TextBlockTitleFontWeight">600</FontWeight>
-
+    <StaticResource x:Key="TextBlockCodeFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="TextBlockFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="TextBlockTitleH1FontSize" ResourceKey="SemiFontSizeHeader1" />
+    <StaticResource x:Key="TextBlockTitleH2FontSize" ResourceKey="SemiFontSizeHeader2" />
+    <StaticResource x:Key="TextBlockTitleH3FontSize" ResourceKey="SemiFontSizeHeader3" />
+    <StaticResource x:Key="TextBlockTitleH4FontSize" ResourceKey="SemiFontSizeHeader4" />
+    <StaticResource x:Key="TextBlockTitleH5FontSize" ResourceKey="SemiFontSizeHeader5" />
+    <StaticResource x:Key="TextBlockTitleH6FontSize" ResourceKey="SemiFontSizeHeader6" />
+    <StaticResource x:Key="TextBlockFontWeight" ResourceKey="SemiFontWeightRegular" />
+    <StaticResource x:Key="TextBlockTitleFontWeight" ResourceKey="SemiFontWeightBold" />
    <CornerRadius x:Key="TextBlockCodeCornerRadius">2</CornerRadius>
+    <FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/TextBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TextBox.axaml
@@ -1,18 +1,14 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="TextBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="TextBoxSmallHeight">24</x:Double>
-    <x:Double x:Key="TextBoxLargeHeight">40</x:Double>
-
-    <CornerRadius x:Key="TextBoxDefaultCornerRadius">3</CornerRadius>
-
+    <StaticResource x:Key="TextBoxDefaultHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="TextBoxSmallHeight" ResourceKey="SemiHeightControlSmall" />
+    <StaticResource x:Key="TextBoxLargeHeight" ResourceKey="SemiHeightControlLarge" />
+    <StaticResource x:Key="TextBoxDefaultCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
    <Thickness x:Key="TextBoxInnerRightContentPadding">8 0 0 0</Thickness>
    <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
-    <Thickness x:Key="TextBoxBorderThickness">1</Thickness>
-
+    <StaticResource x:Key="TextBoxBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <Thickness x:Key="TextBoxTextAreaContentPadding">12 5</Thickness>
    <x:Double x:Key="TextBoxTextAreaHeight">90</x:Double>
-
    <StaticResource x:Key="PasswordBoxRevealButtonData" ResourceKey="SemiIconEyeClosedSolid" />
    <StaticResource x:Key="PasswordBoxHideButtonData" ResourceKey="SemiIconEyeOpened" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleButton.axaml
@@ -1,7 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <x:Double x:Key="ToggleButtonDefaultFontSize">14</x:Double>
-    <FontWeight x:Key="ToggleButtonDefaultFontWeight">600</FontWeight>
-
-    <Thickness x:Key="ToggleButtonBorderThickness">1</Thickness>
-    <CornerRadius x:Key="ToggleButtonCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="ToggleButtonDefaultFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="ToggleButtonDefaultFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="ToggleButtonBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+    <StaticResource x:Key="ToggleButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@@ -5,7 +5,7 @@
    <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
    <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
    <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
-    <Thickness x:Key="ToggleSwitchDefaultBorderThickness">1</Thickness>
+    <StaticResource x:Key="ToggleSwitchDefaultBorderThickness" ResourceKey="SemiBorderThicknessControl" />
    <CornerRadius x:Key="ToggleSwitchDefaultCornerRadius">12</CornerRadius>
    <CornerRadius x:Key="ToggleSwitchSmallCornerRadius">8</CornerRadius>
    <CornerRadius x:Key="ToggleSwitchLargeCornerRadius">16</CornerRadius>
@@ -19,12 +19,9 @@
    <x:Double x:Key="ToggleSwitchLoadingIndicatorDefaultStrokeThickness">2</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>
-
-    <x:Double x:Key="ToggleSwitchDefaultFontSize">12</x:Double>
-    <x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double>
-
+    <StaticResource x:Key="ToggleSwitchDefaultFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="ToggleSwitchLargeFontSize" ResourceKey="SemiFontSizeRegular" />
    <Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
    <Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
-
-    <x:Double x:Key="SimpleToggleSwitchFontSize">14</x:Double>
+    <StaticResource x:Key="SimpleToggleSwitchFontSize" ResourceKey="SemiFontSizeRegular" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Tooltip.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Tooltip.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="ToolTipCornerRadius">6</CornerRadius>
+    <StaticResource x:Key="ToolTipCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
    <Thickness x:Key="ToolTipPadding">12 8</Thickness>
    <x:Double x:Key="ToolTipMaxWidth">320</x:Double>
-    <Thickness x:Key="ToolTipBorderThickness">1</Thickness>
+    <StaticResource x:Key="ToolTipBorderThickness" ResourceKey="SemiBorderThicknessControl" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/TreeView.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TreeView.axaml
@@ -1,9 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <x:Double x:Key="TreeViewItemIndent">20</x:Double>
    <x:Double x:Key="TreeViewItemIconSize">8</x:Double>
-
-    <StaticResource x:Key="ExpanderIconData" ResourceKey="SemiIconTreeTriangleRight"/>
-
+    <StaticResource x:Key="ExpanderIconData" ResourceKey="SemiIconTreeTriangleRight" />
    <Thickness x:Key="TreeViewItemIconMargin">8 0</Thickness>
    <Thickness x:Key="TreeViewItemPadding">0 4 8 4</Thickness>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Window.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Window.axaml
@@ -1,2 +1,4 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="DefaultFontSize" ResourceKey="SemiFontSizeRegular" />
+    <StaticResource x:Key="DefaultFontFamily" ResourceKey="SemiFontFamilyRegular" />
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/_index.axaml
@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Shared/AdornerLayer.axaml" />
        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml" />
--- a/src/Semi.Avalonia/Tokens/Palette/Dark.axaml
+++ b/src/Semi.Avalonia/Tokens/Palette/Dark.axaml
@@ -170,6 +170,7 @@

    <SolidColorBrush x:Key="SemiWhite" Color="{StaticResource SemiWhiteColor}" />
    <SolidColorBrush x:Key="SemiBlack" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="SemiRed0" Color="{StaticResource SemiRed0Color}" />
    <SolidColorBrush x:Key="SemiRed1" Color="{StaticResource SemiRed1Color}" />
    <SolidColorBrush x:Key="SemiRed2" Color="{StaticResource SemiRed2Color}" />
    <SolidColorBrush x:Key="SemiRed3" Color="{StaticResource SemiRed3Color}" />
--- a/src/Semi.Avalonia/Tokens/Variables.axaml
+++ b/src/Semi.Avalonia/Tokens/Variables.axaml
@@ -0,0 +1,69 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Tokens.Variables"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- Sizing -->
+    <x:Double x:Key="SemiHeightControlSmall">24</x:Double> <!-- 表单项高度 - 小尺寸 -->
+    <x:Double x:Key="SemiHeightControlDefault">32</x:Double> <!-- 表单项高度 - 默认尺寸 -->
+    <x:Double x:Key="SemiHeightControlLarge">40</x:Double> <!-- 表单项高度 - 大尺寸 -->
+    <x:Double x:Key="SemiWidthIconExtraSmall">8</x:Double> <!-- 图标尺寸 - 超小 -->
+    <x:Double x:Key="SemiWidthIconSmall">12</x:Double> <!-- 图标尺寸 - 小 -->
+    <x:Double x:Key="SemiWidthIconMedium">16</x:Double> <!-- 图标尺寸 - 中 -->
+    <x:Double x:Key="SemiWidthIconLarge">20</x:Double> <!-- 图标尺寸 - 大 -->
+    <x:Double x:Key="SemiWidthIconExtraLarge">24</x:Double> <!-- 图标尺寸 - 超大 -->
+
+    <!-- Border -->
+    <x:Double x:Key="SemiBorderSpacing">0</x:Double> <!-- 描边间距 - 零 -->
+    <x:Double x:Key="SemiBorderSpacingControl">1</x:Double> <!-- 描边间距 - 默认状态 -->
+    <x:Double x:Key="SemiBorderSpacingControlFocus">1</x:Double> <!-- 描边间距 - focus 状态 -->
+    <Thickness x:Key="SemiBorderThickness">0</Thickness> <!-- 描边宽度 - 零 -->
+    <Thickness x:Key="SemiBorderThicknessControl">1</Thickness> <!-- 描边宽度 - 默认状态 -->
+    <Thickness x:Key="SemiBorderThicknessControlFocus">1</Thickness> <!-- 描边宽度 - focus 状态 -->
+    <CornerRadius x:Key="SemiBorderRadiusExtraSmall">3</CornerRadius> <!-- 圆角 - 超小 -->
+    <CornerRadius x:Key="SemiBorderRadiusSmall">3</CornerRadius> <!-- 圆角 - 小 -->
+    <CornerRadius x:Key="SemiBorderRadiusMedium">6</CornerRadius> <!-- 圆角 - 中 -->
+    <CornerRadius x:Key="SemiBorderRadiusLarge">12</CornerRadius> <!-- 圆角 - 大 -->
+    <CornerRadius x:Key="SemiBorderRadiusFull">999</CornerRadius> <!-- 圆角 - 全圆 -->
+
+    <!-- Spacing -->
+    <x:Double x:Key="SemiSpacingNone">0</x:Double> <!-- 间距 - 零 -->
+    <x:Double x:Key="SemiSpacingSuperTight">2</x:Double> <!-- 间距 - 极紧凑 -->
+    <x:Double x:Key="SemiSpacingExtraTight">4</x:Double> <!-- 间距 - 超紧凑 -->
+    <x:Double x:Key="SemiSpacingTight">8</x:Double> <!-- 间距 - 紧凑 -->
+    <x:Double x:Key="SemiSpacingBaseTight">12</x:Double> <!-- 间距 - 偏紧凑 -->
+    <x:Double x:Key="SemiSpacingBase">16</x:Double> <!-- 间距 - 默认 -->
+    <x:Double x:Key="SemiSpacingBaseLoose">20</x:Double> <!-- 间距 - 偏宽松 -->
+    <x:Double x:Key="SemiSpacingLoose">24</x:Double> <!-- 间距 - 宽松 -->
+    <x:Double x:Key="SemiSpacingExtraLoose">32</x:Double> <!-- 间距 - 超宽松 -->
+    <x:Double x:Key="SemiSpacingSuperLoose">40</x:Double> <!-- 间距 - 极宽松 -->
+
+    <!-- Thickness -->
+    <Thickness x:Key="SemiThicknessNone">0</Thickness> <!-- 宽度 - 零 -->
+    <Thickness x:Key="SemiThicknessSuperTight">2</Thickness> <!-- 宽度 - 极紧凑 -->
+    <Thickness x:Key="SemiThicknessExtraTight">4</Thickness> <!-- 宽度 - 超紧凑 -->
+    <Thickness x:Key="SemiThicknessTight">8</Thickness> <!-- 宽度 - 紧凑 -->
+    <Thickness x:Key="SemiThicknessBaseTight">12</Thickness> <!-- 宽度 - 偏紧凑 -->
+    <Thickness x:Key="SemiThicknessBase">16</Thickness> <!-- 宽度 - 默认 -->
+    <Thickness x:Key="SemiThicknessBaseLoose">20</Thickness> <!-- 宽度 - 偏宽松 -->
+    <Thickness x:Key="SemiThicknessLoose">24</Thickness> <!-- 宽度 - 宽松 -->
+    <Thickness x:Key="SemiThicknessExtraLoose">32</Thickness> <!-- 宽度 - 超宽松 -->
+    <Thickness x:Key="SemiThicknessSuperLoose">40</Thickness> <!-- 宽度 - 极宽松 -->
+
+    <!-- Font -->
+    <x:Double x:Key="SemiFontSizeSmall">12</x:Double> <!-- 小文本字号 -->
+    <x:Double x:Key="SemiFontSizeRegular">14</x:Double> <!-- 常规文本字号 -->
+    <x:Double x:Key="SemiFontSizeHeader6">16</x:Double> <!-- 六级标题字号 -->
+    <x:Double x:Key="SemiFontSizeHeader5">18</x:Double> <!-- 五级标题字号 -->
+    <x:Double x:Key="SemiFontSizeHeader4">20</x:Double> <!-- 四级标题字号 -->
+    <x:Double x:Key="SemiFontSizeHeader3">24</x:Double> <!-- 三级标题字号 -->
+    <x:Double x:Key="SemiFontSizeHeader2">28</x:Double> <!-- 二级标题字号 -->
+    <x:Double x:Key="SemiFontSizeHeader1">32</x:Double> <!-- 一级标题字号 -->
+    <FontWeight x:Key="SemiFontWeightLight">200</FontWeight> <!-- 字重 - 轻 -->
+    <FontWeight x:Key="SemiFontWeightRegular">400</FontWeight> <!-- 字重 - 常规 -->
+    <FontWeight x:Key="SemiFontWeightBold">600</FontWeight> <!-- 字重 - 粗 -->
+    <FontFamily x:Key="SemiFontFamilyRegular">
+        Inter, -apple-system, BlinkMacSystemFont, PingFang SC,
+        Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue,
+        Helvetica, Arial, sans-serif
+    </FontFamily>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Tokens/Variables.axaml.cs
+++ b/src/Semi.Avalonia/Tokens/Variables.axaml.cs
@@ -0,0 +1,5 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Tokens;
+
+public class Variables : ResourceDictionary;
Author	SHA1	Message	Date
Zhang Dian	92ad70194a	feat: enhance MenuItem icon.	2025-01-13 16:29:16 +08:00
Dong Bin	c253154e8f	Add TrayIcon demo (#529 ) * feat: add tray demo, change icon. * feat: include favicon.	2025-01-13 12:37:55 +08:00
Dong Bin	8955c83fd9	Merge pull request #528 from irihitech/sync Add RegisterFollowSystemTheme extension to Application	2025-01-07 15:08:11 +08:00
Zhang Dian	ea51867f0f	feat: add RegisterFollowSystemTheme extension.	2025-01-07 12:45:14 +08:00
Dong Bin	8bb314984e	Merge pull request #527 from irihitech/sync Sync high-contrast themes under the Windows OS.	2025-01-06 22:37:00 +08:00
Zhang Dian	af6c52660d	feat: sync high-contrast themes under the Windows OS.	2025-01-06 22:14:06 +08:00
Ruben	f6962657fa	add german language support (#526 ) added german culture support	2025-01-06 22:10:12 +08:00
Dong Bin	8df91270b1	Merge pull request #525 from irihitech/iconbutton Enhance Icon related Button in demo	2025-01-04 20:34:54 +08:00
Zhang Dian	22f61cd836	fix: fix Menu RepeatButton MaxHeight value.	2025-01-04 12:49:10 +08:00
Zhang Dian	86848b548f	feat: enhance Icon related Button in demo.	2025-01-04 12:48:45 +08:00
Zhang Dian	67fd0c4ca3	Merge pull request #520 from irihitech/locale Add locale switch helper method	2025-01-03 17:18:43 +08:00
Dong Bin	263c65dd18	feat: simplify menu.	2025-01-03 15:51:51 +08:00
Dong Bin	26bb251d1e	misc: reduce menu level.	2025-01-03 15:34:38 +08:00
Dong Bin	609dfbb5f0	feat: add simple locale switch.	2025-01-03 15:19:32 +08:00
Dong Bin	ad4bead1bd	feat: add helper method to set locale resources.	2025-01-03 15:02:26 +08:00
Dong Bin	02444f7f16	Merge pull request #519 from irihitech/token add `Variables` tokens and replace resources with them	2025-01-02 18:44:40 +08:00
Zhang Dian	06d9e35add	misc: delete Base.axaml file.	2025-01-02 17:44:28 +08:00
Zhang Dian	1200c9a1c9	feat: index RadiusCardCornerRadius.	2025-01-02 16:58:12 +08:00
Zhang Dian	7600b187f4	feat: replace most resources in Shared folder with basic design tokens.	2025-01-02 14:31:47 +08:00
Zhang Dian	c55efe8835	misc: format shared codes.	2025-01-02 14:18:43 +08:00
Zhang Dian	1fe4df3716	feat: add basic Variables.	2025-01-02 14:18:43 +08:00
Zhang Dian	c22211df24	misc: using single-commit mode for gh-pages branch.	2025-01-01 16:39:24 +08:00
Zhang Dian	6459863395	misc: bump version.	2024-12-31 14:18:23 +08:00
Dong Bin	ab824fbcd2	Merge pull request #516 from irihitech/detail fix Hex Color code in demo	2024-12-31 14:09:16 +08:00
Zhang Dian	e4adde26d2	fix: fix AOT issue.	2024-12-31 13:59:30 +08:00
Zhang Dian	057c31a311	feat: Color.ToString() -> real Hex.	2024-12-31 13:22:06 +08:00
Zhang Dian	ef8531d25d	misc: rearrange demo theme resources.	2024-12-31 13:22:05 +08:00
Zhang Dian	c44b9a0173	fix: fix debug crash issue.	2024-12-31 13:22:05 +08:00
Zhang Dian	5715bba345	fix: add the missing basic color.	2024-12-31 13:21:30 +08:00
Zhang Dian	96b0999db1	fix: fix AOT issue.	2024-12-30 23:54:15 +08:00
Zhang Dian	ffd9b08acc	fix: fix the issue of input value invalid.	2024-12-30 16:50:59 +08:00
Zhang Dian	64fd8a787a	misc: enhance .csproj files.	2024-12-30 16:19:30 +08:00
Zhang Dian	4087b685e8	misc: resolve IDE problems.	2024-12-30 15:16:14 +08:00
Zhang Dian	70669406b2	misc: fix missing reference issue.	2024-12-30 14:06:19 +08:00