Merge pull request #489 from irihitech/backport

upgrade to 11.1.0.5

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: semiavalonia
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/deploy.yml

@@ -4,7 +4,10 @@ env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
   OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
 on:
-  workflow_dispatch:
+  push:
+    branches: [ "action/deploy" ]
+  pull_request:
+    branches: [ "action/deploy" ]
 
 jobs:
   deploy-to-github-pages:
@@ -25,7 +28,7 @@ jobs:
         run: dotnet publish $PROJECT_PATH -c Release --nologo
 
       - name: Change base-tag in index.html
-        run: sed -i 's#<base href="/" />#<base href="/Semi.Avalonia/" />#g' $OUTPUT_PATH/index.html
+        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
 
       - name: copy index.html to 404.html
         run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
@@ -36,7 +39,6 @@ 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 }}
-          single-commit: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: ${{ env.OUTPUT_PATH }}

.github/workflows/pack-nightly.yml

@@ -1,73 +0,0 @@
-name: Pack Nightly
-
-on:
-  workflow_dispatch:
-    inputs:
-      Version_Prefix:
-        description: 'Version Prefix'
-        required: true
-        default: '11.2.999'
-        type: string
-      Semi_Avalonia:
-        description: 'Pack Semi.Avalonia'
-        required: true
-        default: 'true'
-        type: boolean
-      Semi_Avalonia_ColorPicker:
-        description: 'Pack Semi.Avalonia.ColorPicker'
-        required: true
-        default: 'true'
-        type: boolean
-      Semi_Avalonia_DataGrid:
-        description: 'Pack Semi.Avalonia.DataGrid'
-        required: true
-        default: 'false'
-        type: boolean
-      Semi_Avalonia_TreeDataGrid:
-        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        required: true
-        default: 'false'
-        type: boolean
-
-jobs:
-  Pack_Nightly:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: Get Version
-        run: |
-          VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
-          VERSION="${{ github.event.inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
-          echo "VERSION=$VERSION" >> $GITHUB_ENV
-
-      - name: Pack Semi.Avalonia
-        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets /p:Version=${{ env.VERSION }}
-
-      - name: Add NuGet Source
-        run: dotnet nuget add source ${{ secrets.IRIHI_NUGET_NIGHTLY_FEED }} -n irihi.tech -u ${{ secrets.IRIHI_NUGET_USERNAME }} -p ${{ secrets.IRIHI_NUGET_PASSWORD }} --store-password-in-clear-text
-
-      - name: Publish Nightly Package
-        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
-        with:
-          name: nugets
-          path: ./nugets
-        if: always()

.github/workflows/pack-tree.yml

@@ -0,0 +1,26 @@
+name: Pack TreeDataGrid Nuget
+
+on:
+  push:
+    branches: [ "action/pack-tree" ]
+  pull_request:
+    branches: [ "action/pack-tree" ]
+
+jobs:
+  nuget:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Nuget Semi.Avalonia.TreeDataGrid
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+
+      - name: Publish NuGet package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: nugets
+          path: ./nugets

.github/workflows/pack.yml

@@ -1,52 +1,26 @@
-name: Pack to NuGet
+name: Pack Nuget
 
 on:
-  workflow_dispatch:
-    inputs:
-      Semi_Avalonia:
-        description: 'Pack Semi.Avalonia'
-        required: true
-        default: 'true'
-        type: boolean
-      Semi_Avalonia_ColorPicker:
-        description: 'Pack Semi.Avalonia.ColorPicker'
-        required: true
-        default: 'true'
-        type: boolean
-      Semi_Avalonia_DataGrid:
-        description: 'Pack Semi.Avalonia.DataGrid'
-        required: true
-        default: 'false'
-        type: boolean
-      Semi_Avalonia_TreeDataGrid:
-        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        required: true
-        default: 'false'
-        type: boolean
+  push:
+    branches: [ "action/pack" ]
+  pull_request:
+    branches: [ "action/pack" ]
 
 jobs:
-  Pack_to_NuGet:
+  nuget:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout
         uses: actions/checkout@v4.1.1
 
-      - name: Pack Semi.Avalonia
-        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
+      - name: Nuget Semi.Avalonia
         run: dotnet pack ./src/Semi.Avalonia -o ./nugets
 
-      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
+      - name: Nuget Semi.Avalonia.ColorPicker
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
 
-      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
-
-      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets
+      - name: Nuget Semi.Avalonia.DataGrid
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
 
       - name: Publish NuGet package
         run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
@@ -56,4 +30,3 @@ jobs:
         with:
           name: nugets
           path: ./nugets
-        if: always()

.github/workflows/publish.yml

@@ -1,32 +1,13 @@
 name: Publish Demo
 
 on:
-  workflow_dispatch:
-    inputs:
-      platform:
-        description: 'Platform to publish'
-        required: true
-        default: 'all'
-        type: choice
-        options:
-          - 'windows'
-          - 'linux'
-          - 'android'
-          - 'all'
-      include_aot:
-        description: 'Include Windows AOT packaging'
-        required: true
-        default: true
-        type: boolean
-      include_drm:
-        description: 'Include Linux DRM packaging'
-        required: true
-        default: true
-        type: boolean
+  push:
+    branches: [ "action/publish" ]
+  pull_request:
+    branches: [ "action/publish" ]
 
 jobs:
   windows:
-    if: ${{ github.event.inputs.platform == 'windows' || github.event.inputs.platform == 'all' }}
     runs-on: windows-latest
     steps:
       - name: Checkout
@@ -44,17 +25,14 @@ 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' }}
         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' }}
         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' }}
         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
@@ -66,7 +44,6 @@ jobs:
           path: ./upload
 
   linux:
-    if: ${{ github.event.inputs.platform == 'linux' || github.event.inputs.platform == 'all' }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -82,11 +59,9 @@ 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' }}
         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' }}
         run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
 
       - name: Upload a Build Artifact
@@ -96,7 +71,6 @@ jobs:
           path: ./upload
 
   android:
-    if: ${{ github.event.inputs.platform == 'android' || github.event.inputs.platform == 'all' }}
     runs-on: windows-latest
     steps:
       - name: Checkout
@@ -109,7 +83,7 @@ jobs:
         run: dotnet restore
 
       - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o ./publish -p:RuntimeIdentifier=android-arm64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o ./publish
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1

.github/workflows/release-tag.yml

@@ -1,146 +0,0 @@
-name: Release Tag
-
-on:
-  push:
-    tags:
-      - "v[0-9]+.[0-9]+.[0-9]+.[0-9]+"
-  workflow_dispatch:
-
-jobs:
-  pack:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Pack Semi.Avalonia
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
-
-      - name: Pack Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: nugets
-          path: ./nugets
-
-  publish-windows:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Make upload directory
-        run: mkdir upload
-
-      - name: Publish win-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/win64
-
-      - name: Zip win-x64
-        run: |
-          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
-
-      - name: Enable Native AOT in .csproj
-        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
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot
-
-      - name: Zip win-x64 AOT
-        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
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: windows
-          path: ./upload
-
-  publish-linux:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Make upload directory
-        run: mkdir upload
-
-      - name: Publish linux-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/linux64
-
-      - name: Zip linux-x64
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
-
-      - name: Publish linux-x64 DRM
-        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
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: linux
-          path: ./upload
-
-  publish-android:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.Android
-
-      - name: Restore Dependencies
-        run: dotnet restore
-
-      - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o ./publish -p:RuntimeIdentifier=android-arm64
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: android
-          path: ./publish/*Signed.apk
-
-  draft-release:
-    needs: [ pack, publish-windows, publish-linux, publish-android ]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Download nugets Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: nugets
-
-      - name: Download windows Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: windows
-
-      - name: Download linux Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: linux
-
-      - name: Download android Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: android
-
-      - name: Release
-        uses: softprops/action-gh-release@v2
-        if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
-        with:
-          generate_release_notes: true
-          draft: true
-          files: |
-            *.nupkg
-            *.zip
-            *.apk

README.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [中文](./README_CN.md)
 
@@ -69,8 +68,6 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

README_CN.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [English](./README.md)
 
@@ -57,6 +56,7 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
+
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -65,12 +65,11 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ![FeiShu](./docs/community-support.png)
 
+
 ## 版本兼容性
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

Semi.Avalonia.sln

@@ -16,9 +16,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Act
 	ProjectSection(SolutionItems) = preProject
 		.github\workflows\deploy.yml = .github\workflows\deploy.yml
 		.github\workflows\pack.yml = .github\workflows\pack.yml
-		.github\workflows\pack-nightly.yml = .github\workflows\pack-nightly.yml
+		.github\workflows\pack-tree.yml = .github\workflows\pack-tree.yml
 		.github\workflows\publish.yml = .github\workflows\publish.yml
-		.github\workflows\release-tag.yml = .github\workflows\release-tag.yml
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"

demo/Directory.Build.props

@@ -1,7 +1,7 @@
 <Project>
-    <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
-        <DataGridVersion>11.2.5</DataGridVersion>
-        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
-    </PropertyGroup>
+  <PropertyGroup>
+    <Nullable>enable</Nullable>
+    <AvaloniaVersion>11.1.5</AvaloniaVersion>
+    <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
+  </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Desktop/Program.cs

@@ -1,11 +1,13 @@
-using System;
-using Avalonia;
+using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;
 
 namespace Semi.Avalonia.Demo.Desktop;
 
-sealed class Program
+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
@@ -31,4 +33,4 @@ sealed class Program
             .UsePlatformDetect()
             .With(new Win32PlatformOptions())
             .LogToTrace();
-}
+}

demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj

@@ -19,14 +19,16 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" 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)" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Drm/Program.cs

@@ -7,7 +7,7 @@ using Avalonia.Dialogs;
 
 namespace Semi.Avalonia.Demo.Drm;
 
-sealed class Program
+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

demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj

@@ -19,15 +19,17 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.LinuxFramebuffer" 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="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>

demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj

@@ -3,7 +3,6 @@
         <TargetFramework>net8.0-browser</TargetFramework>
         <OutputType>Exe</OutputType>
         <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
-        <Nullable>enable</Nullable>
     </PropertyGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo.Web/wwwroot/index.html

@@ -6,7 +6,6 @@
     <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">

demo/Semi.Avalonia.Demo/App.axaml

@@ -2,35 +2,12 @@
     x:Class="Semi.Avalonia.Demo.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ApplicationViewModel"
-    xmlns:semi="https://irihi.tech/semi"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:semi="https://irihi.tech/semi">
     <Application.Styles>
         <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
-        <semi:SemiTheme Locale="zh-CN" />
-        <semi:SemiPopupAnimations />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+        <semi:SemiTheme Locale="zh-cn" />
         <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>

demo/Semi.Avalonia.Demo/App.axaml.cs

@@ -2,7 +2,6 @@ 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;
@@ -12,7 +11,6 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
-        this.DataContext = new ApplicationViewModel();
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -30,7 +28,6 @@ public partial class App : Application
                 break;
         }
 
-        this.RegisterFollowSystemTheme();
         base.OnFrameworkInitializationCompleted();
     }
 }

demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs

@@ -1,143 +0,0 @@
-using System;
-using System.Collections.Generic;
-
-namespace Semi.Avalonia.Demo.Constant;
-
-public static class ColorTokens
-{
-    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorPrimary", "Primary"),
-        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new("SemiColorPrimaryActive", "Primary Active"),
-        new("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new("SemiColorPrimaryLight", "Primary Light"),
-        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new("SemiColorPrimaryLightActive", "Primary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorSecondary", "Secondary"),
-        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new("SemiColorSecondaryActive", "Secondary Active"),
-        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new("SemiColorSecondaryLight", "Secondary Light"),
-        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorTertiary", "Tertiary"),
-        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new("SemiColorTertiaryActive", "Tertiary Active"),
-        new("SemiColorTertiaryLight", "Tertiary Light"),
-        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorInformation", "Information"),
-        new("SemiColorInformationPointerover", "Information Pointerover"),
-        new("SemiColorInformationActive", "Information Active"),
-        new("SemiColorInformationDisabled", "Information Disabled"),
-        new("SemiColorInformationLight", "Information Light"),
-        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorSuccess", "Success"),
-        new("SemiColorSuccessPointerover", "Success Pointerover"),
-        new("SemiColorSuccessActive", "Success Active"),
-        new("SemiColorSuccessDisabled", "Success Disabled"),
-        new("SemiColorSuccessLight", "Success Light"),
-        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorWarning", "Warning"),
-        new("SemiColorWarningPointerover", "Warning Pointerover"),
-        new("SemiColorWarningActive", "Warning Active"),
-        new("SemiColorWarningLight", "Warning Light"),
-        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorDanger", "Danger"),
-        new("SemiColorDangerPointerover", "Danger Pointerover"),
-        new("SemiColorDangerActive", "Danger Active"),
-        new("SemiColorDangerLight", "Danger Light"),
-        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorText0", "Text 0"),
-        new("SemiColorText1", "Text 1"),
-        new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorLink", "Link"),
-        new("SemiColorLinkPointerover", "Link Pointerover"),
-        new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorBackground0", "Background 0"),
-        new("SemiColorBackground1", "Background 1"),
-        new("SemiColorBackground2", "Background 2"),
-        new("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorFill0", "Fill 0"),
-        new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorDisabledText", "Disabled Text"),
-        new("SemiColorDisabledBorder", "Disabled Border"),
-        new("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorWhite", "White"),
-        new("SemiColorBlack", "Black"),
-        new("SemiColorNavBackground", "Navigation Background"),
-        new("SemiColorOverlayBackground", "Overlay Background"),
-        new("SemiColorHighlightBackground", "Highlight Background"),
-        new("SemiColorHighlight", "Highlight Text"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated"),
-    };
-}

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml

@@ -2,9 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ColorItemViewModel">
+    <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
     <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
-        <Setter Property="Template">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:ColorDetailControl.Template">
             <ControlTemplate TargetType="controls:ColorDetailControl">
                 <StackPanel>
                     <TextBlock
@@ -17,7 +21,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"
@@ -34,26 +38,38 @@
                         <Button
                             Grid.Row="1"
                             Grid.Column="1"
+                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
                         <SelectableTextBlock
                             Grid.Row="2"
                             Grid.Column="0"
                             VerticalAlignment="Center"
-                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                             Text="{TemplateBinding ColorResourceKey}" />
                         <Button
                             Grid.Row="2"
                             Grid.Column="1"
+                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
-                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
 
-                        <!--  Row 3-4-5 HEX  -->
+                        <!--  Row 3-4 HEX  -->
                         <TextBlock
                             Grid.Row="3"
                             Grid.Column="0"
@@ -61,7 +77,7 @@
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
-                            Text="Hex" />
+                            Text="ARGB" />
                         <SelectableTextBlock
                             Grid.Row="4"
                             Grid.Column="0"
@@ -70,26 +86,20 @@
                         <Button
                             Grid.Row="4"
                             Grid.Column="1"
+                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
-                            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}" />
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
 
-                        <!--  Row 6-7 Opacity  -->
+                        <!--  Row 5-6 Opacity  -->
                         <TextBlock
-                            Grid.Row="6"
+                            Grid.Row="5"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
@@ -97,21 +107,26 @@
                             Classes="Tertiary"
                             Text="Opacity" />
                         <SelectableTextBlock
-                            Grid.Row="7"
+                            Grid.Row="6"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding OpacityNumber}" />
                         <Button
-                            Grid.Row="7"
+                            Grid.Row="6"
                             Grid.Column="1"
+                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
-
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
                     </Grid>
                 </StackPanel>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs

@@ -1,32 +1,30 @@
 using System.Globalization;
-using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Media;
-using Semi.Avalonia.Demo.Converters;
+using Avalonia.Media.Immutable;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class ColorDetailControl : TemplatedControl
+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";
-
-    public static readonly StyledProperty<string?> ResourceKeyProperty =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
-
+    
+    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceKey));
     public string? ResourceKey
     {
         get => GetValue(ResourceKeyProperty);
         set => SetValue(ResourceKeyProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ResourceNameProperty =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
+    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceName));
 
     public string? ResourceName
     {
@@ -34,8 +32,8 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ColorResourceKeyProperty =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ColorResourceKey));
 
     public string? ColorResourceKey
     {
@@ -43,39 +41,27 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ColorResourceKeyProperty, value);
     }
 
-    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
-
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(Hex), o => o.Hex);
     private string? _hex;
-
     public string? Hex
     {
         get => _hex;
         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);
-
+    
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(OpacityNumber), o => o.OpacityNumber);
     private string? _opacityNumber;
-
     public string? OpacityNumber
     {
         get => _opacityNumber;
         private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
     }
-
+    
+    
+    
+    
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -84,36 +70,38 @@ public class ColorDetailControl : TemplatedControl
     private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
     {
         var color = args.GetNewValue<IBrush>();
-        if (color is ISolidColorBrush brush)
+        if (color is ISolidColorBrush b)
         {
-            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);
+            Hex = b.Color.ToString().ToUpperInvariant();
+            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
         }
     }
 
-    public async Task Copy(object o)
+    public async void Copy(object o)
     {
         string? text = null;
         if (o is string s)
         {
-            text = s switch
+            switch (s)
             {
-                KEY_ResourceKey => ResourceKey,
-                KEY_Hex => Hex,
-                KEY_Hex2 => Hex2,
-                KEY_Opacity => OpacityNumber,
-                KEY_ColorResourceKey => ColorResourceKey,
-                _ => string.Empty
-            };
+                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;
+            }
         }
 
         var toplevel = TopLevel.GetTopLevel(this);
         if (toplevel?.Clipboard is { } c)
         {
-            await c.SetTextAsync(text ?? string.Empty);
+            await c.SetTextAsync(text??string.Empty);
         }
+
     }
+    
 }

demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml

@@ -2,23 +2,24 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ColorItemViewModel">
     <Design.PreviewWith>
         <controls:ColorItemControl />
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
-        <Setter Property="Width" Value="120" />
-        <Setter Property="Height" Value="60" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="controls:ColorItemControl.Width" Value="120" />
+        <Setter Property="controls:ColorItemControl.Height" Value="60" />
+        <Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
+        <Setter Property="controls:ColorItemControl.Template">
             <ControlTemplate TargetType="controls:ColorItemControl">
+                <!--    -->
                 <Border
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Panel>
                         <TextBlock
@@ -41,7 +42,7 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
-            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="TextBlock.IsVisible" Value="True" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs

@@ -1,4 +1,5 @@
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using CommunityToolkit.Mvvm.Messaging;
@@ -8,8 +9,8 @@ namespace Semi.Avalonia.Demo.Controls;
 
 public class ColorItemControl : TemplatedControl
 {
-    public static readonly StyledProperty<string?> ColorNameProperty =
-        AvaloniaProperty.Register<ColorItemControl, string?>(nameof(ColorName));
+    public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        nameof(ColorName));
 
     public string? ColorName
     {
@@ -25,18 +26,14 @@ public class ColorItemControl : TemplatedControl
         get => GetValue(HexProperty);
         set => SetValue(HexProperty, value);
     }
-
+    
     protected override void OnPointerPressed(PointerPressedEventArgs e)
     {
         base.OnPointerPressed(e);
-        switch (this.DataContext)
+        if (this.DataContext is ColorItemViewModel v)
         {
-            case ColorItemViewModel colorItemViewModel:
-                WeakReferenceMessenger.Default.Send(colorItemViewModel);
-                break;
-            case ColorResource colorResource:
-                WeakReferenceMessenger.Default.Send(colorResource);
-                break;
+            WeakReferenceMessenger.Default.Send(v);
         }
+        
     }
 }

demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
@@ -31,21 +30,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -55,29 +60,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>
@@ -95,21 +84,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -119,29 +114,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>

demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     x:CompileBindings="True"
     x:DataType="viewModels:ShadowGroupViewModel">
     <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
@@ -20,40 +19,29 @@
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ShadowItemViewModel"
                                         Binding="{Binding ShadowDisplayName}"
                                         CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
@@ -63,40 +51,29 @@
                         <TabItem Header="Dark">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ShadowItemViewModel"
                                         Binding="{Binding ShadowDisplayName}"
                                         CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>

demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs

@@ -1,22 +0,0 @@
-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
-                }
-        );
-}

demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml

@@ -2,7 +2,8 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -10,15 +11,18 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel Orientation="Horizontal" Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal">
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(180,80%,70%)"
+                    HsvColor="hsv(120,11%,10%)"
                     IsAlphaVisible="True"
                     Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
@@ -26,55 +30,63 @@
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker ColorSpectrumShape="Ring">
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <FlatHalfColorPalette />
+                        <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
+                        <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
+
                 <ColorPicker
-                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box">
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
+                        <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button" />
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
                 <ColorPicker
                     Margin="8"
-                    MinWidth="32"
-                    HsvColor="hsv(180,80%,70%)">
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
                     <ColorPicker.Content>
                         <Border
                             Margin="1"
-                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
                             CornerRadius="1" />
                     </ColorPicker.Content>
                     <ColorPicker.Styles>
                         <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0" />
+                            <Setter Property="Padding" Value="0"/>
                             <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False" />
+                                <Setter Property="IsVisible" Value="False"/>
                             </Style>
                         </Style>
                     </ColorPicker.Styles>
                 </ColorPicker>
-            </StackPanel>
 
-            <StackPanel Orientation="Horizontal" Spacing="8">
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker
-                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource SimpleColorPicker}" />
                 <ColorPicker
-                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml

@@ -3,6 +3,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
@@ -14,9 +15,8 @@
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                   <ToggleSwitch Content="Inset Content" Name="inset" />
-                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
                </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
@@ -25,9 +25,8 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                         Classes.InsetContent="{Binding #inset.IsChecked}"
-                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
-                         IsEnabled="{Binding #enable.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn

demo/Semi.Avalonia.Demo/Pages/GridSplitterDemo.axaml

@@ -14,13 +14,13 @@
             RowDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Row="1" ShowsPreview="True" />
             <Border
                 Grid.Row="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
         </Grid>
         <Grid
@@ -29,13 +29,13 @@
             ColumnDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Column="1" ShowsPreview="True" />
             <Border
                 Grid.Column="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
         </Grid>
     </StackPanel>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml

@@ -1,328 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             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>
-    <SplitView
-        Name="splitView"
-        CompactPaneLength="50"
-        DisplayMode="CompactInline"
-        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
-        OpenPaneLength="300"
-        PanePlacement="Right">
-        <SplitView.Pane>
-            <StackPanel>
-                <ToggleSwitch
-                    Name="toggle"
-                    HorizontalAlignment="Right"
-                    IsChecked="True"
-                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                    Content="{StaticResource SemiIconSidebar}" />
-                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
-                    <Panel>
-                        <TextBlock
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
-                            Text="Click on Color to Check Details"
-                            TextWrapping="Wrap" />
-                        <controls:ColorDetailControl
-                            Background="{Binding SelectedColorResource.Brush}"
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
-                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
-                    </Panel>
-                </Border>
-            </StackPanel>
-        </SplitView.Pane>
-        <SplitView.Content>
-            <ScrollViewer>
-                <StackPanel Spacing="10">
-                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
-                    <ListBox
-                        Theme="{StaticResource PureCardRadioGroupListBox}"
-                        ItemsSource="{Binding ThemeVariants}"
-                        SelectedItem="{Binding SelectedThemeVariant}">
-                        <ListBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel Orientation="Horizontal" />
-                            </ItemsPanelTemplate>
-                        </ListBox.ItemsPanel>
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
-                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
-                                        <Border
-                                            Padding="5 25 5 5"
-                                            HorizontalAlignment="Left"
-                                            Background="{DynamicResource WindowColor}"
-                                            BorderBrush="{DynamicResource WindowTextColor}"
-                                            BorderThickness="1"
-                                            CornerRadius="3">
-                                            <StackPanel Spacing="10">
-                                                <StackPanel Orientation="Horizontal" Spacing="50">
-                                                    <StackPanel Spacing="5">
-                                                        <TextBlock
-                                                            FontSize="50"
-                                                            Text="Aa" />
-                                                        <StackPanel Orientation="Horizontal" Spacing="3">
-                                                            <StackPanel.Styles>
-                                                                <Style Selector="Border">
-                                                                    <Setter Property="BorderThickness" Value="1" />
-                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                                                    <Setter Property="CornerRadius" Value="5" />
-                                                                    <Setter Property="Width" Value="10" />
-                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
-                                                                </Style>
-                                                            </StackPanel.Styles>
-                                                            <Border Background="{DynamicResource WindowColor}" />
-                                                            <Border Background="{DynamicResource HotlightColor}" />
-                                                            <Border Background="{DynamicResource GrayTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightColor}" />
-                                                        </StackPanel>
-                                                    </StackPanel>
-                                                    <Border
-                                                        BorderThickness="1"
-                                                        BorderBrush="{DynamicResource WindowTextColor}"
-                                                        CornerRadius="3"
-                                                        Padding="8">
-                                                        <Panel>
-                                                            <StackPanel Spacing="5">
-                                                                <Border
-                                                                    Width="50"
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                            </StackPanel>
-                                                            <StackPanel
-                                                                HorizontalAlignment="Right"
-                                                                VerticalAlignment="Bottom"
-                                                                Orientation="Horizontal"
-                                                                Spacing="2">
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    Background="{DynamicResource HighlightColor}"
-                                                                    CornerRadius="1" />
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    BorderThickness="1"
-                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
-                                                                    CornerRadius="1" />
-                                                            </StackPanel>
-                                                        </Panel>
-                                                    </Border>
-                                                </StackPanel>
-                                                <Border
-                                                    Height="1"
-                                                    Background="{DynamicResource WindowTextColor}" />
-                                            </StackPanel>
-                                        </Border>
-                                    </ThemeVariantScope>
-                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                    </ListBox>
-
-                    <ThemeVariantScope
-                        MinWidth="400"
-                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
-                        <Border Padding="10" Background="{DynamicResource WindowColor}">
-                            <StackPanel Spacing="16">
-                                <StackPanel.Styles>
-                                    <Style Selector="TextBlock">
-                                        <Setter Property="HorizontalAlignment" Value="Left" />
-                                        <Setter Property="VerticalAlignment" Value="Center" />
-                                        <Setter Property="FontWeight" Value="SemiBold" />
-                                    </Style>
-                                    <Style Selector="controls|ColorItemControl.ColorBlock">
-                                        <Setter Property="Width" Value="44" />
-                                        <Setter Property="Height" Value="{Binding $self.Width}" />
-                                        <Setter Property="HorizontalAlignment" Value="Right" />
-                                        <Setter Property="BorderThickness" Value="1" />
-                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                        <Setter Property="CornerRadius" Value="3" />
-                                    </Style>
-                                </StackPanel.Styles>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Background" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[0]}"
-                                        Background="{DynamicResource  WindowColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[1]}"
-                                        Background="{DynamicResource  WindowTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HotlightColor}"
-                                        TextDecorations="Underline"
-                                        Text="Hyperlink" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[2]}"
-                                        Background="{DynamicResource  HotlightColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource GrayTextColor}"
-                                        Text="Inactive Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[3]}"
-                                        Background="{DynamicResource  GrayTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HighlightTextColor}"
-                                        Background="{DynamicResource HighlightColor}"
-                                        Text="Selected text" />
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[4]}"
-                                            Background="{DynamicResource  HighlightTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[5]}"
-                                            Background="{DynamicResource  HighlightColor}" />
-                                    </StackPanel>
-                                </Panel>
-                                <Panel>
-                                    <Border
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Center"
-                                        BorderBrush="{DynamicResource ButtonTextColor}"
-                                        Background="{DynamicResource ButtonFaceColor}"
-                                        BorderThickness="2"
-                                        CornerRadius="3">
-                                        <TextBlock
-                                            Foreground="{DynamicResource ButtonTextColor}"
-                                            Padding="16 6"
-                                            Text="Button text" />
-                                    </Border>
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[6]}"
-                                            Background="{DynamicResource  ButtonTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[7]}"
-                                            Background="{DynamicResource  ButtonFaceColor}" />
-                                    </StackPanel>
-                                </Panel>
-                            </StackPanel>
-                        </Border>
-                    </ThemeVariantScope>
-
-                    <DataGrid
-                        HorizontalAlignment="Left"
-                        CanUserSortColumns="False"
-                        AutoGenerateColumns="False"
-                        ItemsSource="{Binding ColorResources}"
-                        GridLinesVisibility="All"
-                        BorderBrush="{DynamicResource SemiColorBorder}"
-                        BorderThickness="1"
-                        Padding="5">
-                        <DataGrid.Columns>
-                            <DataGridTemplateColumn Header="Color">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <controls:ColorItemControl
-                                            Width="40"
-                                            Height="20"
-                                            CornerRadius="3"
-                                            Background="{Binding Brush}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="ResourceKey">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding ResourceKey}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Hex">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Brush,
-                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Description">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Description}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Pair With">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding PairWith}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Width="100" Header="CopyText">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate DataType="vm:ColorResource">
-                                        <Button
-                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
-                                            CommandParameter="{Binding CopyText}"
-                                            Theme="{DynamicResource  IconBorderlessButton}"
-                                            Content="{StaticResource SemiIconCopy}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-                        </DataGrid.Columns>
-                    </DataGrid>
-                </StackPanel>
-            </ScrollViewer>
-        </SplitView.Content>
-    </SplitView>
-</UserControl>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs

@@ -1,24 +0,0 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class HighContrastDemo : UserControl
-{
-    public HighContrastDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new HighContrastDemoViewModel();
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
-}

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml

@@ -1,95 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:DataType="vm:IconDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.IconDemo">
-    <Design.DataContext>
-        <vm:IconDemoViewModel />
-    </Design.DataContext>
-    <Grid RowDefinitions="Auto, *">
-        <TextBox
-            Grid.Row="0"
-            Width="600"
-            Margin="8"
-            Classes="ClearButton"
-            Text="{Binding SearchText}"
-            Watermark="Input Icon Name" />
-
-        <TabControl Grid.Row="1">
-            <TabItem Header="Filled Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredFilledIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
-
-            <TabItem Header="Stroked Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredStrokedIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
-        </TabControl>
-    </Grid>
-</UserControl>

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml.cs

@@ -1,47 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Controls.Notifications;
-using Avalonia.Controls.Primitives;
-using Avalonia.Input.Platform;
-using Avalonia.Interactivity;
-using Avalonia.Threading;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class IconDemo : UserControl
-{
-    private IClipboard? _clipboard;
-    private WindowNotificationManager? _windowNotificationManager;
-
-    public IconDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new IconDemoViewModel();
-    }
-
-    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
-    {
-        base.OnApplyTemplate(e);
-        var vm = this.DataContext as IconDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
-    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
-    {
-        base.OnAttachedToVisualTree(e);
-        var topLevel = TopLevel.GetTopLevel(this);
-        _windowNotificationManager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
-        _clipboard = topLevel?.Clipboard;
-    }
-
-    private async void Button_Clicked(object sender, RoutedEventArgs e)
-    {
-        if (_clipboard is null) return;
-        if (sender is not Button { DataContext: IconItem s }) return;
-        await _clipboard.SetTextAsync(s.ResourceKey);
-        _windowNotificationManager?.Show(
-            new Notification("Copied", s.ResourceKey),
-            NotificationType.Success);
-    }
-}

demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml

@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem>Avalonia</ListBoxItem>
                             <ListBoxItem IsSelected="True">WPF</ListBoxItem>

demo/Semi.Avalonia.Demo/Pages/Overview.axaml

@@ -31,19 +31,19 @@
                 <PathIcon
                     Width="32"
                     Height="32"
-                    Data="{StaticResource SemiIconSemiLogo}" />
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
                 <PathIcon
                     Width="10"
                     Height="10"
                     Margin="20,0"
-                    Data="{StaticResource SemiIconPlus}" />
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
                 <Image Width="32" Height="32">
                     <Image.Source>
                         <DrawingImage>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#0D6EFD" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
-                                <GeometryDrawing Brush="White" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
-                                <GeometryDrawing Brush="White" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#0D6EFD" />
+                            Color="#8B44AC" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider

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.6";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.1.0";
 
     public string MainStyle { get; set; } =
         """
         <Application.Styles>
         <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
-            <semi:SemiTheme Locale="zh-CN" />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+            <semi:SemiTheme Locale="zh-cn" />
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.6";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.1.0";
 
     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.6";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.1.0";
 
     public string DataGridStyle { get; set; } =
         """
@@ -38,7 +38,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.2";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.1.0";
 
     public string TreeDataGridStyle { get; set; } =
         """

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml

@@ -14,6 +14,17 @@
     <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"
@@ -27,8 +38,7 @@
                     Name="toggle"
                     HorizontalAlignment="Right"
                     IsChecked="True"
-                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                    Content="{StaticResource SemiIconSidebar}" />
+                    Theme="{DynamicResource SplitViewToggleSwitch}" />
                 <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                     <Panel>
                         <TextBlock

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs

@@ -1,6 +1,8 @@
 using System.Threading.Tasks;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 
@@ -14,20 +16,13 @@ public partial class PaletteDemo : UserControl
         this.DataContext = new PaletteDemoViewModel();
     }
 
-    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
+    protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
         PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
+        await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            await c.SetTextAsync(o.ToString());
-        }
+            vm?.InitializeResources();
+        });
     }
 }

demo/Semi.Avalonia.Demo/Pages/PathIconDemo.axaml

@@ -12,7 +12,7 @@
             <StackPanel.Styles>
                 <Style Selector="PathIcon">
                     <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
-                    <Setter Property="Data" Value="{StaticResource SemiIconSearch}" />
+                    <Setter Property="Data" Value="M10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19C12.3054 19 13.9794 18.4371 15.356 17.4773L19.4393 21.5606C20.0251 22.1464 20.9749 22.1464 21.5606 21.5606C22.1464 20.9749 22.1464 20.0251 21.5606 19.4393L17.4773 15.356C18.4371 13.9794 19 12.3054 19 10.5C19 5.80558 15.1944 2 10.5 2ZM5 10.5C5 7.46243 7.46243 5 10.5 5C13.5376 5 16 7.46243 16 10.5C16 13.5376 13.5376 16 10.5 16C7.46243 16 5 13.5376 5 10.5Z" />
                 </Style>
             </StackPanel.Styles>
             <PathIcon Classes="ExtraSmall" />
@@ -31,6 +31,6 @@
             Height="{Binding #width.Value}"
             Foreground="{DynamicResource SemiBlue6}"
             BorderBrush="{DynamicResource SemiRed6}"
-            Data="{StaticResource SemiIconHome}" />
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z" />
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml

@@ -9,22 +9,66 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <ToggleSwitch Name="inset" Content="Inset Content" />
-            <ToggleSwitch Name="autohide" Content="Allow AutoHide" />
             <ScrollViewer
+                Width="200"
+                Height="200"
                 Margin="10"
-                Width="200" Height="200"
-                AllowAutoHide="{Binding #autohide.IsChecked}"
-                Classes.InsetContent="{Binding #inset.IsChecked}"
                 HorizontalScrollBarVisibility="Auto">
-                <UniformGrid
-                    Rows="2" Columns="2"
-                    Width="300" Height="300">
-                    <Rectangle Fill="{DynamicResource SemiYellow2}" />
-                    <Rectangle Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle Fill="{DynamicResource SemiGreen2}" />
-                </UniformGrid>
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto"
+                Theme="{DynamicResource StaticScrollViewer}">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
             </ScrollViewer>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml

@@ -11,6 +11,11 @@
     <Design.DataContext>
         <pages:SplitViewDemoViewModel />
     </Design.DataContext>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">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</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <Border>
         <Grid ColumnDefinitions="*,400">
             <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
@@ -109,8 +114,7 @@
                                 ItemsSource="{Binding Songs}" />
                             <ToggleSwitch
                                 Grid.Row="2"
-                                Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                Content="{StaticResource SemiIconSidebar}"
+                                Theme="{DynamicResource SplitViewToggleSwitch}"
                                 HorizontalAlignment="Left"
                                 IsChecked="{Binding #SplitView.IsPaneOpen}">
                             </ToggleSwitch>

demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml

@@ -4,56 +4,80 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:system="clr-namespace:System;assembly=netstandard"
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
             <TextBox Width="300" />
-            <TextBox Width="300" InnerLeftContent="https://" InnerRightContent=".com" />
-            <TextBox Width="300" Classes="clearButton" Text="click to clear" />
-            <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
+            <TextBox Width="300" Classes="Large" />
+            <TextBox Width="300" Classes="Small" />
+            <TextBox Width="300" Watermark="Please use this" />
+            <TextBox Width="300" InnerLeftContent="http://" />
+            <TextBox Width="300" InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox Width="300" Classes="clearButton" />
+            <TextBox Width="300" PasswordChar="*" />
             <TextBox
                 Width="300"
                 Classes="ClearButton RevealPasswordButton"
-                InnerLeftContent="https://"
-                InnerRightContent=".com"
+                PasswordChar="*"
                 Text="123456" />
+            <TextBox
+                Width="500"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Large"
                     Watermark="Large" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Watermark="Default" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Small"
                     Watermark="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     IsEnabled="False"
                     Watermark="Disabled" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     Watermark="Bordered" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
+            <TextBox Width="300" Classes="TextArea" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
                 Watermark="Lookless TextBox"
-                InnerLeftContent="https://"
+                InnerLeftContent="http://"
                 InnerRightContent=".com" />
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml

@@ -4,36 +4,18 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:DataType="vm:ThemeVariantDemoViewModel"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <Design.DataContext>
-        <vm:ThemeVariantDemoViewModel />
-    </Design.DataContext>
-    <StackPanel>
-        <Border Theme="{StaticResource CardBorder}">
-            <StackPanel>
-                <ListBox
-                    Theme="{StaticResource CardRadioGroupListBox}"
-                    ItemsSource="{Binding ThemeVariants}"
-                    SelectedItem="{Binding SelectedThemeVariant}" />
-                <DatePicker />
-                <CalendarDatePicker />
-            </StackPanel>
-        </Border>
-        <ThemeVariantScope RequestedThemeVariant="{Binding SelectedThemeVariant}">
+    <Grid>
+        <ThemeVariantScope Name="scope">
             <Border Theme="{StaticResource CardBorder}">
                 <StackPanel>
-                    <ListBox
-                        Theme="{StaticResource CardRadioGroupListBox}"
-                        ItemsSource="{Binding ThemeVariants}"
-                        SelectedItem="{Binding SelectedThemeVariant}" />
                     <DatePicker />
                     <CalendarDatePicker />
+                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
                 </StackPanel>
             </Border>
         </ThemeVariantScope>
-    </StackPanel>
-</UserControl>
+    </Grid>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs

@@ -1,7 +1,8 @@
-using System.Collections.Generic;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
 using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,22 +11,10 @@ public partial class ThemeVariantDemo : UserControl
     public ThemeVariantDemo()
     {
         InitializeComponent();
-        this.DataContext = new ThemeVariantDemoViewModel();
     }
-}
 
-public partial class ThemeVariantDemoViewModel : ObservableObject
-{
-    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
-
-    public IEnumerable<ThemeVariant> ThemeVariants =>
-    [
-        ThemeVariant.Default,
-        ThemeVariant.Light,
-        ThemeVariant.Dark,
-        SemiTheme.Aquatic,
-        SemiTheme.Desert,
-        SemiTheme.Dusk,
-        SemiTheme.NightSky,
-    ];
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+    }
 }

demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml

@@ -9,7 +9,6 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
-        <TimePicker UseSeconds="True" />
         <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml

@@ -20,7 +20,7 @@
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
         </StackPanel>
@@ -64,33 +64,29 @@
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="{StaticResource SemiThicknessTight}"
-                Width="{StaticResource SemiSpacingExtraLoose}"
-                Height="{StaticResource SemiSpacingExtraLoose}"
+                Padding="8"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.Content>
                     <PathIcon
                         Theme="{DynamicResource InnerPathIcon}"
-                        Data="{StaticResource SemiIconSidebar}" />
+                        Data="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" />
                 </ToggleSwitch.Content>
             </ToggleSwitch>
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="{StaticResource SemiThicknessTight}"
-                Width="{StaticResource SemiSpacingExtraLoose}"
-                Height="{StaticResource SemiSpacingExtraLoose}"
+                Padding="8"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.OnContent>
                     <PathIcon
                         Theme="{DynamicResource InnerPathIcon}"
-                        Data="{StaticResource SemiIconSun}" />
+                        Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" />
                 </ToggleSwitch.OnContent>
                 <ToggleSwitch.OffContent>
                     <PathIcon
                         Theme="{DynamicResource InnerPathIcon}"
-                        Data="{StaticResource SemiIconMoon}" />
+                        Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
                 </ToggleSwitch.OffContent>
             </ToggleSwitch>
         </StackPanel>

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml

@@ -1,94 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
-             x:DataType="vm:VariablesDemoViewModel"
-             x:CompileBindings="True">
-    <Design.DataContext>
-        <vm:VariablesDemoViewModel />
-    </Design.DataContext>
-    <DataGrid
-        Margin="8"
-        CanUserReorderColumns="True"
-        CanUserResizeColumns="True"
-        CanUserSortColumns="True"
-        HeadersVisibility="All"
-        IsReadOnly="True"
-        ItemsSource="{Binding GridData}">
-        <DataGrid.Columns>
-            <DataGridTemplateColumn
-                Width="300"
-                x:DataType="vm:VariableItem"
-                Header="ResourceKey">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding ResourceKey}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="200"
-                x:DataType="vm:VariableItem"
-                Header="Type">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Type.Name}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="200"
-                x:DataType="vm:VariableItem"
-                Header="Value">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Value}"
-                            TextWrapping="Wrap" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="*"
-                x:DataType="vm:VariableItem"
-                Header="Description">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Description}"
-                            TextWrapping="Wrap" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="100"
-                x:DataType="vm:VariableItem"
-                Header="CopyText"
-                SortMemberPath="Duration">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <Button
-                            Command="{Binding $parent[pages:VariablesDemo].Copy}"
-                            CommandParameter="{Binding CopyText}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-        </DataGrid.Columns>
-    </DataGrid>
-</UserControl>

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs

@@ -1,24 +0,0 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class VariablesDemo : UserControl
-{
-    public VariablesDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new VariablesDemoViewModel();
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
-}

demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj

@@ -4,26 +4,22 @@
         <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.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+        <PackageReference Include="Avalonia" 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 Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
-            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
-            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
-        </PackageReference>
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
     </ItemGroup>
 
     <ItemGroup>
-        <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.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>

demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml

@@ -1,46 +1,31 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <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"
+    <ControlTheme x:Key="ThemeToggleSwitch"
                   BasedOn="{StaticResource ButtonToggleSwitch}"
                   TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
-        <Setter Property="Width" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Height" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        <Setter Property="Padding" Value="8" />
+        <Setter Property="OnContent" Value="{Binding $self.Content}" />
         <Setter Property="OnContentTemplate">
-            <StaticResource ResourceKey="GeometryDataTemplate" />
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
         </Setter>
+        <Setter Property="OffContent" Value="{Binding $self.Content}" />
         <Setter Property="OffContentTemplate">
-            <StaticResource ResourceKey="GeometryDataTemplate" />
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
         </Setter>
         <Setter Property="ContentTemplate">
-            <StaticResource ResourceKey="GeometryDataTemplate" />
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
         </Setter>
     </ControlTheme>
 
-    <ControlTheme x:Key="IconBorderlessButton"
-                  BasedOn="{StaticResource BorderlessButton}"
-                  TargetType="Button">
-        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
-        <Setter Property="Width" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Height" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
-        <Setter Property="ContentTemplate">
-            <StaticResource ResourceKey="GeometryDataTemplate" />
-        </Setter>
+    <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>
-
-    <DataTemplate x:Key="GeometryDataTemplate" DataType="Geometry">
-        <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-    </DataTemplate>
 </ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/_index.axaml

@@ -1,10 +0,0 @@
-<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>

demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs

@@ -1,19 +0,0 @@
-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();
-        }
-    }
-}

demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs

@@ -8,14 +8,14 @@ using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class DataGridDemoViewModel : ObservableObject
+public class DataGridDemoViewModel: ObservableObject
 {
     public ObservableCollection<Song> GridData1 { get; set; }
-
+    
     public DataGridCollectionView GridData2 { get; set; }
-
+    
     public ObservableCollection<SongViewModel> GridData3 { get; set; }
-
+    
     public RelayCommand AddCommand { get; set; }
 
     public DataGridDemoViewModel()
@@ -23,7 +23,7 @@ public class DataGridDemoViewModel : ObservableObject
         GridData1 = new ObservableCollection<Song>(Song.Songs);
         GridData2 = new DataGridCollectionView(Song.Songs);
         GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
-        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a => new SongViewModel()
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a=>new SongViewModel()
         {
             Title = a.Title,
             Artist = a.Artist,
@@ -57,10 +57,11 @@ public class Song
         Album = album;
         CountOfComment = countOfComment;
         Url = $"https://music.163.com/song?id={netEaseId}";
+        
     }
 
-    public static List<Song> Songs =>
-    [
+    public static List<Song> Songs { get; set; } = new List<Song>()
+    {
         new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
         new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
         new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
@@ -121,15 +122,41 @@ public class Song
         new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
         new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
         new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
-        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775)
-    ];
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
+    };
 }
 
-public partial class SongViewModel : ObservableObject
+public class SongViewModel: ObservableObject
 {
-    [ObservableProperty] private string? _title;
-    [ObservableProperty] private string? _artist;
-    [ObservableProperty] private string? _album;
-    [ObservableProperty] private int _countOfComment;
-    [ObservableProperty] private bool? _isSelected;
+    private string? _title;
+    private string? _artist;
+    private string? _album;
+    private int _countOfComment;
+    private bool? _isSelected;
+    public string? Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+    public string? Artist
+    {
+        get => _artist;
+        set => SetProperty(ref _artist, value);
+    }
+    public string? Album
+    {
+        get => _album;
+        set => SetProperty(ref _album, value);
+    }
+    public int CountOfComment
+    {
+        get => _countOfComment;
+        set => SetProperty(ref _countOfComment, value);
+    }
+    public bool? IsSelected
+    {
+        get => _isSelected;
+        set => SetProperty(ref _isSelected, value);
+    }
+    
 }

demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs

@@ -1,133 +0,0 @@
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Media;
-using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Messaging;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public partial class HighContrastDemoViewModel : ObservableObject
-{
-    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
-    [ObservableProperty] private ColorResource _selectedColorResource = null!;
-
-    public IEnumerable<ThemeVariant> ThemeVariants { get; }
-    public ObservableCollection<ColorResource> ColorResources { get; set; }
-
-    public HighContrastDemoViewModel()
-    {
-        ThemeVariants =
-        [
-            SemiTheme.Aquatic,
-            SemiTheme.Desert,
-            SemiTheme.Dusk,
-            SemiTheme.NightSky,
-        ];
-        ColorResources =
-        [
-            new ColorResource
-            {
-                ResourceKey = "SemiColorWindow",
-                Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Description = "Background of pages, panes, popups, and windows.",
-                PairWith = "WindowTextColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorWindowText",
-                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Description = "Headings, body copy, lists, placeholder text, app and window borders.",
-                PairWith = "WindowColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorHotlight",
-                Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
-                Description = "Hyperlinks.",
-                PairWith = "WindowColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorGrayText",
-                Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
-                Description = "Inactive (disabled) UI.",
-                PairWith = "WindowColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorHighlightText",
-                Brush = new SolidColorBrush(Color.Parse("#263B50")),
-                Description =
-                    "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
-                PairWith = "HighlightColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorHighlight",
-                Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
-                Description =
-                    "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
-                PairWith = "HighlightTextColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorButtonText",
-                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Description = "Foreground color for buttons and any UI that can be interacted with.",
-                PairWith = "ButtonFaceColor"
-            },
-            new ColorResource
-            {
-                ResourceKey = "SemiColorButtonFace",
-                Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Description = "Background color for buttons and any UI that can be interacted with.",
-                PairWith = "ButtonTextColor"
-            },
-        ];
-        WeakReferenceMessenger.Default.Register<HighContrastDemoViewModel, ColorResource>
-            (this, (_, item) => SelectedColorResource = item);
-        SelectedThemeVariant = SemiTheme.Aquatic;
-    }
-
-    partial void OnSelectedThemeVariantChanged(ThemeVariant? value)
-    {
-        var topLevel = ResolveDefaultTopLevel();
-        if (value is null) return;
-        foreach (var colorResource in ColorResources)
-        {
-            if (colorResource.ResourceKey is null) continue;
-            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true
-                && o is ISolidColorBrush color)
-            {
-                colorResource.Brush = color;
-            }
-        }
-    }
-
-    private static TopLevel? ResolveDefaultTopLevel()
-    {
-        return Application.Current?.ApplicationLifetime switch
-        {
-            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
-            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
-            _ => null
-        };
-    }
-}
-
-public partial class ColorResource : ObservableObject
-{
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private ISolidColorBrush? _brush;
-    [ObservableProperty] private string? _description;
-    [ObservableProperty] private string? _pairWith;
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-}

demo/Semi.Avalonia.Demo/ViewModels/IconDemoViewModel.cs

@@ -1,71 +0,0 @@
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public partial class IconDemoViewModel : ObservableObject
-{
-    private readonly IResourceDictionary? _resources = new Icons();
-
-    private readonly Dictionary<string, IconItem> _filledIcons = new();
-    private readonly Dictionary<string, IconItem> _strokedIcons = new();
-
-    [ObservableProperty] private string? _searchText;
-
-    public ObservableCollection<IconItem> FilteredFilledIcons { get; set; } = [];
-    public ObservableCollection<IconItem> FilteredStrokedIcons { get; set; } = [];
-
-    public void InitializeResources()
-    {
-        if (_resources is null) return;
-
-        foreach (var provider in _resources.MergedDictionaries)
-        {
-            if (provider is not ResourceDictionary dic) continue;
-
-            foreach (var key in dic.Keys)
-            {
-                if (dic[key] is not Geometry geometry) continue;
-                var icon = new IconItem
-                {
-                    ResourceKey = key.ToString(),
-                    Geometry = geometry
-                };
-
-                if (key.ToString().EndsWith("Stroked"))
-                    _strokedIcons[key.ToString().ToLowerInvariant()] = icon;
-                else
-                    _filledIcons[key.ToString().ToLowerInvariant()] = icon;
-            }
-        }
-
-        OnSearchTextChanged(string.Empty);
-    }
-
-    partial void OnSearchTextChanged(string? value)
-    {
-        var search = value?.ToLowerInvariant() ?? string.Empty;
-
-        FilteredFilledIcons.Clear();
-        foreach (var pair in _filledIcons.Where(i => i.Key.Contains(search)))
-        {
-            FilteredFilledIcons.Add(pair.Value);
-        }
-
-        FilteredStrokedIcons.Clear();
-        foreach (var pair in _strokedIcons.Where(i => i.Key.Contains(search)))
-        {
-            FilteredStrokedIcons.Add(pair.Value);
-        }
-    }
-}
-
-public class IconItem
-{
-    public string? ResourceKey { get; set; }
-    public Geometry? Geometry { get; set; }
-}

demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs

@@ -1,18 +1,14 @@
 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.Demo.Constant;
-using Semi.Avalonia.Demo.Converters;
-using Semi.Avalonia.Tokens.Palette;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public partial class PaletteDemoViewModel : ObservableObject
+public class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
     [
@@ -25,18 +21,39 @@ public partial class PaletteDemoViewModel : ObservableObject
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
 
-    [ObservableProperty] private ColorItemViewModel? _selectedColor;
+    private ColorItemViewModel _selectedColor = null!;
+
+    public ColorItemViewModel SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+
+
+    private ObservableCollection<ColorListViewModel>? _lightLists;
+
+    public ObservableCollection<ColorListViewModel>? LightLists
+    {
+        get => _lightLists;
+        set => SetProperty(ref _lightLists, value);
+    }
+
+    private ObservableCollection<ColorListViewModel>? _darkLists;
+
+    public ObservableCollection<ColorListViewModel>? DarkLists
+    {
+        get => _darkLists;
+        set => SetProperty(ref _darkLists, value);
+    }
 
-    public ObservableCollection<ColorListViewModel> LightLists { get; set; } = [];
-    public ObservableCollection<ColorListViewModel> DarkLists { get; set; } = [];
     public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
     public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = new Light();
-        _darkResourceDictionary = new Dark();
-        WeakReferenceMessenger.Default.Register<ColorItemViewModel>(this, (_, item) => SelectedColor = item);
+        _lightResourceDictionary = new Light.Palette();
+        _darkResourceDictionary = new Dark.Palette();
+        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
     public void InitializeResources()
@@ -48,6 +65,7 @@ public partial class PaletteDemoViewModel : ObservableObject
 
     private void InitializePalette()
     {
+        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -55,6 +73,7 @@ public partial class PaletteDemoViewModel : ObservableObject
             LightLists.Add(s);
         }
 
+        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -65,82 +84,126 @@ public partial class PaletteDemoViewModel : ObservableObject
 
     private void InitializeFunctionalColors()
     {
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Others", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.OtherTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
 
     private void InitializeShadows()
     {
-        Shadows.Add(new ShadowGroupViewModel(
-            "Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+    }
+
+    private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
+    {
+        SelectedColor = item;
     }
 }
 
-public partial class ColorListViewModel : ObservableObject
+public class ColorListViewModel : ObservableObject
 {
-    public ObservableCollection<ColorItemViewModel> Color { get; set; } = [];
+    private ObservableCollection<ColorItemViewModel>? _colors;
 
-    [ObservableProperty] private string? _seriesName;
+    public ObservableCollection<ColorItemViewModel>? Color
+    {
+        get => _colors;
+        set => SetProperty(ref _colors, value);
+    }
+
+    private string? _seriesName;
+
+    public string? SeriesName
+    {
+        get => _seriesName;
+        set => SetProperty(ref _seriesName, value);
+    }
 
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
-        if (resourceDictionary is null) return;
+        if (resourceDictionary is null)
+        {
+            return;
+        }
 
         SeriesName = color;
+        Color = [];
 
         for (var i = 0; i < 10; i++)
         {
-            var key = $"Semi{color}{i}";
-            if (resourceDictionary.TryGetValue(key, out var value) && value is ISolidColorBrush brush)
+            var key = "Semi" + color + i;
+            if (resourceDictionary.TryGetValue(key, out var value))
             {
-                var name = $"{color} {i}";
-                var item = new ColorItemViewModel(name, brush, key, light, i);
-                item.ColorResourceKey = $"{item.ResourceKey}Color";
-                Color.Add(item);
+                if (value is ISolidColorBrush brush)
+                {
+                    string name = color + " " + i;
+                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                    item.ColorResourceKey = item.ResourceKey + "Color";
+                    Color.Add(item);
+                }
             }
         }
     }
 }
 
-public partial class ColorItemViewModel : ObservableObject
+public class ColorItemViewModel : ObservableObject
 {
-    [ObservableProperty] private IBrush? _brush;
-    [ObservableProperty] private IBrush? _textBrush;
-    [ObservableProperty] private string? _colorDisplayName;
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _colorResourceKey;
-    [ObservableProperty] private string? _hex;
+    private IBrush _brush = null!;
 
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
+    public IBrush Brush
+    {
+        get => _brush;
+        set => SetProperty(ref _brush, value);
+    }
+
+    private IBrush _textBrush = null!;
+
+    public IBrush TextBrush
+    {
+        get => _textBrush;
+        set => SetProperty(ref _textBrush, value);
+    }
+
+    private string _colorDisplayName = null!;
+
+    public string ColorDisplayName
+    {
+        get => _colorDisplayName;
+        set => SetProperty(ref _colorDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _colorResourceKey = null!;
+
+    public string ColorResourceKey
+    {
+        get => _colorResourceKey;
+        set => SetProperty(ref _colorResourceKey, value);
+    }
+
+    private string _hex = null!;
+
+    public string Hex
+    {
+        get => _hex;
+        set => SetProperty(ref _hex, value);
+    }
 
     public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
         int index)
@@ -148,8 +211,7 @@ public partial class ColorItemViewModel : ObservableObject
         ColorDisplayName = colorDisplayName;
         Brush = brush;
         ResourceKey = resourceKey;
-        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
-        Hex = hex as string ?? string.Empty;
+        Hex = brush.ToString().ToUpperInvariant();
         if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
@@ -161,9 +223,16 @@ public partial class ColorItemViewModel : ObservableObject
     }
 }
 
-public partial class FunctionalColorGroupViewModel : ObservableObject
+public class FunctionalColorGroupViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
     public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
     public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
@@ -192,16 +261,31 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
-public partial class ShadowItemViewModel : ObservableObject
+public class ShadowItemViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _shadowDisplayName;
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _boxShadowValue;
+    private string _shadowDisplayName = null!;
 
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
+    public string ShadowDisplayName
+    {
+        get => _shadowDisplayName;
+        set => SetProperty(ref _shadowDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _boxShadowValue = null!;
+
+    public string BoxShadowValue
+    {
+        get => _boxShadowValue;
+        set => SetProperty(ref _boxShadowValue, value);
+    }
 
     public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
     {
@@ -211,9 +295,16 @@ public partial class ShadowItemViewModel : ObservableObject
     }
 }
 
-public partial class ShadowGroupViewModel : ObservableObject
+public class ShadowGroupViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
     public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
     public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
 
@@ -241,4 +332,132 @@ public partial class ShadowGroupViewModel : ObservableObject
             }
         }
     }
+}
+
+public static class ColorTokens
+{
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorPrimary", "Primary"),
+        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new("SemiColorPrimaryActive", "Primary Active"),
+        new("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new("SemiColorPrimaryLight", "Primary Light"),
+        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new("SemiColorPrimaryLightActive", "Primary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorSecondary", "Secondary"),
+        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new("SemiColorSecondaryActive", "Secondary Active"),
+        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new("SemiColorSecondaryLight", "Secondary Light"),
+        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorTertiary", "Tertiary"),
+        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new("SemiColorTertiaryActive", "Tertiary Active"),
+        new("SemiColorTertiaryLight", "Tertiary Light"),
+        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorInformation", "Information"),
+        new("SemiColorInformationPointerover", "Information Pointerover"),
+        new("SemiColorInformationActive", "Information Active"),
+        new("SemiColorInformationDisabled", "Information Disabled"),
+        new("SemiColorInformationLight", "Information Light"),
+        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new("SemiColorInformationLightActive", "Information Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorSuccess", "Success"),
+        new("SemiColorSuccessPointerover", "Success Pointerover"),
+        new("SemiColorSuccessActive", "Success Active"),
+        new("SemiColorSuccessDisabled", "Success Disabled"),
+        new("SemiColorSuccessLight", "Success Light"),
+        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new("SemiColorSuccessLightActive", "Success Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorWarning", "Warning"),
+        new("SemiColorWarningPointerover", "Warning Pointerover"),
+        new("SemiColorWarningActive", "Warning Active"),
+        new("SemiColorWarningLight", "Warning Light"),
+        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new("SemiColorWarningLightActive", "Warning Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorDanger", "Danger"),
+        new("SemiColorDangerPointerover", "Danger Pointerover"),
+        new("SemiColorDangerActive", "Danger Active"),
+        new("SemiColorDangerLight", "Danger Light"),
+        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new("SemiColorDangerLightActive", "Danger Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorText0", "Text 0"),
+        new("SemiColorText1", "Text 1"),
+        new("SemiColorText2", "Text 2"),
+        new("SemiColorText3", "Text 3"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorLink", "Link"),
+        new("SemiColorLinkPointerover", "Link Pointerover"),
+        new("SemiColorLinkActive", "Link Active"),
+        new("SemiColorLinkVisited", "Link Visited"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorBackground0", "Background 0"),
+        new("SemiColorBackground1", "Background 1"),
+        new("SemiColorBackground2", "Background 2"),
+        new("SemiColorBackground3", "Background 3"),
+        new("SemiColorBackground4", "Background 4"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorFill0", "Fill 0"),
+        new("SemiColorFill1", "Fill 1"),
+        new("SemiColorFill2", "Fill 2"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorBorder", "Border"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorDisabledText", "Disabled Text"),
+        new("SemiColorDisabledBorder", "Disabled Border"),
+        new("SemiColorDisabledBackground", "Disabled Background"),
+        new("SemiColorDisabledFill", "Disabled Fill"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
+    };
 }

demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs

@@ -1,123 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
-using Semi.Avalonia.Tokens;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class VariablesDemoViewModel : ObservableObject
-{
-    public DataGridCollectionView GridData { get; set; }
-
-    public VariablesDemoViewModel()
-    {
-        IResourceDictionary dictionary = new Variables();
-        foreach (var token in Tokens)
-        {
-            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
-            {
-                token.Type = value?.GetType();
-                token.Value = GetValueString(value);
-            }
-        }
-
-        GridData = new DataGridCollectionView(Tokens);
-        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
-    }
-
-    private static string GetValueString(object? value)
-    {
-        if (value is null) return string.Empty;
-
-        return value switch
-        {
-            double d => d.ToString(CultureInfo.InvariantCulture),
-            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
-            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
-            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
-            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
-            _ => value.ToString()
-        };
-    }
-
-    private static List<VariableItem> Tokens { get; set; } =
-    [
-        new("Height", "SemiHeightControlSmall"),
-        new("Height", "SemiHeightControlDefault"),
-        new("Height", "SemiHeightControlLarge"),
-        new("Icon Size", "SemiWidthIconExtraSmall"),
-        new("Icon Size", "SemiWidthIconSmall"),
-        new("Icon Size", "SemiWidthIconMedium"),
-        new("Icon Size", "SemiWidthIconLarge"),
-        new("Icon Size", "SemiWidthIconExtraLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusMedium"),
-        new("Border CornerRadius", "SemiBorderRadiusLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusFull"),
-        new("Border Spacing", "SemiBorderSpacing"),
-        new("Border Spacing", "SemiBorderSpacingControl"),
-        new("Border Spacing", "SemiBorderSpacingControlFocus"),
-        new("Border Thickness", "SemiBorderThickness"),
-        new("Border Thickness", "SemiBorderThicknessControl"),
-        new("Border Thickness", "SemiBorderThicknessControlFocus"),
-        new("Spacing", "SemiSpacingNone"),
-        new("Spacing", "SemiSpacingSuperTight"),
-        new("Spacing", "SemiSpacingExtraTight"),
-        new("Spacing", "SemiSpacingTight"),
-        new("Spacing", "SemiSpacingBaseTight"),
-        new("Spacing", "SemiSpacingBase"),
-        new("Spacing", "SemiSpacingBaseLoose"),
-        new("Spacing", "SemiSpacingLoose"),
-        new("Spacing", "SemiSpacingExtraLoose"),
-        new("Spacing", "SemiSpacingSuperLoose"),
-        new("Thickness", "SemiThicknessNone"),
-        new("Thickness", "SemiThicknessSuperTight"),
-        new("Thickness", "SemiThicknessExtraTight"),
-        new("Thickness", "SemiThicknessTight"),
-        new("Thickness", "SemiThicknessBaseTight"),
-        new("Thickness", "SemiThicknessBase"),
-        new("Thickness", "SemiThicknessBaseLoose"),
-        new("Thickness", "SemiThicknessLoose"),
-        new("Thickness", "SemiThicknessExtraLoose"),
-        new("Thickness", "SemiThicknessSuperLoose"),
-        new("FontSize", "SemiFontSizeSmall"),
-        new("FontSize", "SemiFontSizeRegular"),
-        new("FontSize", "SemiFontSizeHeader6"),
-        new("FontSize", "SemiFontSizeHeader5"),
-        new("FontSize", "SemiFontSizeHeader4"),
-        new("FontSize", "SemiFontSizeHeader3"),
-        new("FontSize", "SemiFontSizeHeader2"),
-        new("FontSize", "SemiFontSizeHeader1"),
-        new("FontWeight", "SemiFontWeightLight"),
-        new("FontWeight", "SemiFontWeightRegular"),
-        new("FontWeight", "SemiFontWeightBold"),
-        new("FontFamily", "SemiFontFamilyRegular"),
-    ];
-}
-
-public class VariableItem()
-{
-    public string? Category { get; set; }
-    public string? ResourceKey { get; set; }
-    public Type? Type { get; set; }
-    public string? Value { get; set; }
-    public string? Description { get; set; }
-
-    public VariableItem(string category, string resourceKey, string description = "") : this()
-    {
-        Category = category;
-        ResourceKey = resourceKey;
-        Description = description;
-    }
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -11,6 +11,19 @@
     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>
+            <StreamGeometry x:Key="DocIcon">M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z</StreamGeometry>
+            <StreamGeometry x:Key="RepoIcon">M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z</StreamGeometry>
+            <StreamGeometry x:Key="DarkThemeIcon">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z</StreamGeometry>
+            <StreamGeometry x:Key="LightThemeIcon">M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13</StreamGeometry>
+            <StreamGeometry x:Key="MenuIcon">M2 19.5C2 18.6716 2.67157 18 3.5 18H20.5C21.3284 18 22 18.6716 22 19.5C22 20.3284 21.3284 21 20.5 21H3.5C2.67157 21 2 20.3284 2 19.5ZM2 12C2 11.1716 2.67157 10.5 3.5 10.5H20.5C21.3284 10.5 22 11.1716 22 12C22 12.8284 21.3284 13.5 20.5 13.5H3.5C2.67157 13.5 2 12.8284 2 12ZM2 4.5C2 3.67157 2.67157 3 3.5 3H20.5C21.3284 3 22 3.67157 22 4.5C22 5.32843 21.3284 6 20.5 6H3.5C2.67157 6 2 5.32843 2 4.5Z</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
             Grid.Row="0"
@@ -21,8 +34,7 @@
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <ToggleSwitch
                         Name="ExpandButton"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Content="{StaticResource SemiIconSidebar}" />
+                        Theme="{DynamicResource SplitViewToggleSwitch}" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
@@ -37,27 +49,36 @@
                         Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}" />
+                    <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 RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}" />
+                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding DocumentationUrl}">
+                        <PathIcon Data="{StaticResource DocIcon}" />
+                    </Button>
+
+                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding RepoUrl}">
+                        <PathIcon Data="{StaticResource RepoIcon}" />
+                    </Button>
 
                     <ToggleSwitch
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
                         Command="{Binding ToggleThemeCommand}"
-                        OnContent="{StaticResource SemiIconMoon}"
-                        OffContent="{StaticResource SemiIconSun}" />
+                        OnContent="{StaticResource DarkThemeIcon}"
+                        OffContent="{StaticResource LightThemeIcon}" />
 
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Content="{StaticResource SemiIconMenu}">
+                    <Button IsVisible="False">
+                        <PathIcon Data="{StaticResource MenuIcon}" />
                         <Button.Flyout>
                             <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
                         </Button.Flyout>
@@ -88,15 +109,6 @@
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
-            <TabItem Header="HighContrastTheme">
-                <pages:HighContrastDemo />
-            </TabItem>
-            <TabItem Header="Variables">
-                <pages:VariablesDemo />
-            </TabItem>
-            <TabItem Header="Icon">
-                <pages:IconDemo />
-            </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />
             </TabItem>

demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Globalization;
 using System.Threading.Tasks;
 using System.Windows.Input;
 using Avalonia;
@@ -29,106 +28,7 @@ public partial class MainViewModel : ObservableObject
 
     public MainViewModel()
     {
-        MenuItems =
-        [
-            new MenuItemViewModel
-            {
-                Header = "Theme",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "Auto",
-                        Command = FollowSystemThemeCommand
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Aquatic",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Aquatic
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Desert",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Desert
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Dusk",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Dusk
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "NightSky",
-                        Command = SelectThemeCommand,
-                        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")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Español",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-es")
-                    },
-                ]
-            }
-        ];
-    }
-
-    [RelayCommand]
-    private void FollowSystemTheme()
-    {
-        Application.Current?.RegisterFollowSystemTheme();
+        MenuItems = [];
     }
 
     [RelayCommand]
@@ -138,24 +38,16 @@ 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 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);
+        if (app is not null)
+        {
+            app.RequestedThemeVariant = obj as ThemeVariant;
+        }
     }
 
     [RelayCommand]

demo/Semi.Avalonia.Demo/Views/MainWindow.axaml

@@ -8,7 +8,7 @@
     Title="Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    Icon="/Assets/irihi.ico"
+    Icon="/Assets/avalonia-logo.ico"
     mc:Ignorable="d">
     <views:MainView />
 </Window>

demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml

@@ -2,10 +2,11 @@
     x:Class="Semi.Avalonia.TreeDataGrid.Demo.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    RequestedThemeVariant="Default">
+    <!--  "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options.  -->
 
     <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
+        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
         <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
     </Application.Styles>
 </Application>

demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs

@@ -3,13 +3,15 @@ using System.Collections.Generic;
 using System.Globalization;
 using Avalonia;
 using Avalonia.Data.Converters;
+using Avalonia.Media;
 using Avalonia.Metadata;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
 
-public class FileIconConverter : IMultiValueConverter
+public class FileIconConverter: IMultiValueConverter
 {
-    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
+    [Content] 
+    public Dictionary<string, PathGeometry> Items { get; set; } = new Dictionary<string, PathGeometry>();
 
     public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
@@ -19,10 +21,8 @@ public class FileIconConverter : IMultiValueConverter
             {
                 return Items["file"];
             }
-
             return isOpen ? Items["folderOpen"] : Items["folderClosed"];
         }
-
         return AvaloniaProperty.UnsetValue;
     }
 }

demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml

@@ -13,9 +13,9 @@
     mc:Ignorable="d">
     <Window.Resources>
         <converters:FileIconConverter x:Key="FileIconConverter">
-            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
-            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
-            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
+            <PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry>
+            <PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry>
+            <PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry>
         </converters:FileIconConverter>
     </Window.Resources>
     <Grid RowDefinitions="Auto, *">
@@ -58,7 +58,7 @@
                     </TreeDataGrid.Resources>
                     <TreeDataGrid.Styles>
                         <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
-                            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                            <Setter Property="Background" Value="#20808080" />
                         </Style>
                     </TreeDataGrid.Styles>
                 </TreeDataGrid>
@@ -86,8 +86,10 @@
                             <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
                                 <StackPanel Orientation="Horizontal">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
-                                        Margin="8,0">
+                                        Width="16"
+                                        Height="16"
+                                        Margin="8,0"
+                                        VerticalAlignment="Center">
                                         <PathIcon.Data>
                                             <MultiBinding Converter="{StaticResource FileIconConverter}">
                                                 <Binding Path="IsDirectory" />
@@ -125,7 +127,7 @@
                         </TreeDataGrid.Resources>
                         <TreeDataGrid.Styles>
                             <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
-                                <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                                <Setter Property="Background" Value="#20808080" />
                             </Style>
                         </TreeDataGrid.Styles>
                     </TreeDataGrid>
@@ -133,4 +135,4 @@
             </TabItem>
         </TabControl>
     </Grid>
-</Window>
+</Window>

demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs

@@ -1,10 +1,10 @@
-using System;
-using Avalonia;
+using Avalonia;
+using System;
 using Avalonia.Media;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo;
 
-sealed class Program
+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

demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj

@@ -12,21 +12,18 @@
         <!--<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 Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
-            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
-            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
-        </PackageReference>
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <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>

src/Package.props

@@ -1,16 +1,16 @@
 <Project>
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</Version>
+        <Version>11.1.0.5</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.2.1</AvaloniaVersion>
+        <AvaloniaVersion>11.1.0</AvaloniaVersion>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs

@@ -1,3 +0,0 @@
-using Avalonia.Metadata;
-
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -1,48 +1,63 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="64" />
         <Setter Property="MinWidth" Value="64" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        CornerRadius="{TemplateBinding CornerRadius,
+                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                     <Border
                         Margin="1,1,0,1"
-                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius,
+                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
             </Template>
         </Setter>
         <Setter Property="Palette">
-            <FluentColorPalette />
+            <controls:FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorPicker}">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    MinWidth="{TemplateBinding MinWidth}"
-                    MinHeight="{TemplateBinding MinHeight}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    ClipToBounds="True"
                     UseLayoutRounding="False">
                     <DropDownButton.Styles>
                         <Style Selector="FlyoutPresenter.nopadding">
@@ -62,6 +77,7 @@
                                 Width="300"
                                 Height="300"
                                 RowDefinitions="*,Auto">
+                                <Grid.Styles />
                                 <!--  Backgrounds  -->
                                 <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                 <Border
@@ -99,10 +115,13 @@
                                     <!--  Spectrum Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <Grid Margin="12" RowDefinitions="*">
                                             <Grid.ColumnDefinitions>
@@ -110,7 +129,7 @@
                                                 <ColumnDefinition Width="*" />
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
@@ -124,7 +143,7 @@
                                                 IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
-                                            <ColorSpectrum
+                                            <primitives:ColorSpectrum
                                                 Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -138,7 +157,7 @@
                                                 MinSaturation="{TemplateBinding MinSaturation}"
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
@@ -150,21 +169,24 @@
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <ColorSlider.IsVisible>
+                                                <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </ColorSlider.IsVisible>
-                                            </ColorSlider>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
                                         </Grid>
                                     </TabItem>
                                     <!--  Palette Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <ListBox
                                             Margin="12"
@@ -197,15 +219,18 @@
                                     <!--  Components Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <Grid
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
-                                            RowDefinitions="Auto,24,*,*,*,*,12"
+                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
@@ -249,13 +274,13 @@
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"
-                                                ColumnDefinitions="*,12,*">
+                                                ColumnDefinitions="1*,12,1*">
                                                 <!--  RadioButtonGroup  -->
                                                 <Border
                                                     Padding="2"
                                                     Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                                     CornerRadius="3">
-                                                    <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
                                                             Name="RgbRadioButton"
                                                             Grid.Column="0"
@@ -264,9 +289,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Rgba},
-                                                            Mode=TwoWay}"
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                                        Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -276,20 +301,21 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Hsva},
-                                                            Mode=TwoWay}"
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                                        Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
                                                     Name="PART_HexTextBox"
                                                     Grid.Column="2"
+                                                    Height="32"
                                                     HorizontalAlignment="Stretch"
                                                     AutomationProperties.Name="Hexadecimal Color"
                                                     InnerLeftContent="#"
                                                     IsVisible="{TemplateBinding IsHexInputVisible}"
-                                                    MaxLength="8" />
+                                                    MaxLength="9" />
                                             </Grid>
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
@@ -308,14 +334,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -338,14 +365,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -368,14 +396,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -405,33 +434,34 @@
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 Orientation="Horizontal"
                                                 TickFrequency="1">
-                                                <ColorSlider.IsVisible>
+                                                <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                         <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </ColorSlider.IsVisible>
-                                            </ColorSlider>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
                                         </Grid>
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
                                 <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                                <ColorPreviewer
+                                <primitives:ColorPreviewer
                                     Grid.Row="1"
                                     Margin="12,-5,12,7"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -443,9 +473,9 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-
+        
         <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0" />
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
         </Style>
     </ControlTheme>
 
@@ -453,7 +483,7 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Width" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -471,7 +501,8 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -496,12 +527,9 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    MinWidth="{TemplateBinding MinWidth}"
-                    MinHeight="{TemplateBinding MinHeight}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
@@ -531,7 +559,7 @@
                                     Grid.Row="0"
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
-                                    <ColorSpectrum
+                                    <primitives:ColorSpectrum
                                         Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
@@ -545,7 +573,7 @@
                                         MinValue="{TemplateBinding MinValue}"
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
@@ -557,7 +585,7 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
@@ -571,7 +599,8 @@
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     TickFrequency="1"
-                                    Orientation="Horizontal" />
+                                    Orientation="Horizontal">
+                                </primitives:ColorSlider>
                                 <StackPanel
                                     Grid.Row="3"
                                     HorizontalAlignment="Stretch"
@@ -648,7 +677,7 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Width" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -666,7 +695,8 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -681,4 +711,4 @@
         </Setter>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -4,6 +4,7 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
@@ -33,16 +34,17 @@
                                 Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='-1'}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-1'}"
                                 Tag="-1" />
                         </Grid>
                         <!--  Right accent colors  -->
@@ -62,16 +64,17 @@
                                 Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='1'}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
                                 Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->
@@ -83,13 +86,12 @@
                             BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
                             CornerRadius="{TemplateBinding CornerRadius}">
                             <Panel>
-                                <Border
-                                    Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
                                 <Border
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
-                                    Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                                    Background="{TemplateBinding HsvColor,
+                                                                 Converter={StaticResource ToBrushConverter}}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                             </Panel>
                         </Border>
@@ -99,15 +101,15 @@
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        IsVisible="{TemplateBinding IsAccentColorsVisible,Converter={x:Static BoolConverters.Not}}">
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,
+                                                    Converter={x:Static BoolConverters.Not}}">
                         <Panel>
-                            <Border
-                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
                             <Border
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
                                 CornerRadius="{TemplateBinding CornerRadius}" />
                         </Panel>
                     </Border>

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -3,6 +3,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
@@ -11,17 +13,19 @@
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
+        <Setter Property="CornerRadius" Value="999" />
         <Setter Property="Template">
-            <ControlTemplate>
-                <Border
-                    Margin="1"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    BoxShadow="{DynamicResource ColorSliderBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
-            </ControlTemplate>
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border
+                        Margin="1"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </ControlTemplate>
+            </Setter.Value>
         </Setter>
     </ControlTheme>
 
@@ -43,16 +47,20 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Height="12"
@@ -62,7 +70,8 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Horizontal"
-                                Value="{TemplateBinding Value,Mode=TwoWay}">
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -99,8 +108,10 @@
                                 </Track.IncreaseButton>
                                 <Thumb
                                     Name="ColorSliderThumb"
-                                    Width="{TemplateBinding Height}"
-                                    Height="{TemplateBinding Height}"
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0"
+                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -127,16 +138,20 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
@@ -146,7 +161,8 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Vertical"
-                                Value="{TemplateBinding Value,Mode=TwoWay}">
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -185,6 +201,8 @@
                                     Name="ColorSliderThumb"
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
+                                    Margin="0"
+                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -215,4 +233,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -1,115 +1,126 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
+
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
-                <Panel
-                    Name="PART_LayoutRoot"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        Name="PART_SizingPanel"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        ClipToBounds="True">
-                        <Rectangle
-                            Name="PART_SpectrumRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Rectangle
-                            Name="PART_SpectrumOverlayRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Ellipse
-                            Name="PART_SpectrumEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
-                        <Ellipse
-                            Name="PART_SpectrumOverlayEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
-                        <Canvas
-                            Name="PART_InputTarget"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            Background="Transparent">
-                            <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
-                            <Panel
-                                Name="PART_SelectionEllipsePanel"
-                                ToolTip.Placement="Top"
-                                ToolTip.VerticalOffset="-10">
-                                <Ellipse
-                                    Name="FocusEllipse"
-                                    Margin="-2"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    IsHitTestVisible="False"
-                                    StrokeThickness="2" />
-                                <Ellipse
-                                    Name="SelectionEllipse"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    IsHitTestVisible="False"
-                                    StrokeThickness="2" />
-                                <ToolTip.Tip>
-                                    <!--  Set in code-behind  -->
-                                </ToolTip.Tip>
-                            </Panel>
-                        </Canvas>
-                        <Rectangle
-                            Name="BorderRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Ellipse
-                            Name="BorderEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
+                        Name="PART_LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Panel
+                            Name="PART_SizingPanel"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            ClipToBounds="True">
+                            <Rectangle
+                                Name="PART_SpectrumRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                Name="PART_SpectrumOverlayRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                Name="PART_SpectrumEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Ellipse
+                                Name="PART_SpectrumOverlayEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Canvas
+                                Name="PART_InputTarget"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="Transparent">
+                                <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
+                                <Panel
+                                    Name="PART_SelectionEllipsePanel"
+                                    ToolTip.Placement="Top"
+                                    ToolTip.VerticalOffset="-10">
+                                    <Ellipse
+                                        Name="FocusEllipse"
+                                        Margin="-2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <Ellipse
+                                        Name="SelectionEllipse"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <ToolTip.Tip>
+                                        <!--  Set in code-behind  -->
+                                    </ToolTip.Tip>
+                                </Panel>
+                            </Canvas>
+                            <Rectangle
+                                Name="BorderRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                Name="BorderEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                        </Panel>
                     </Panel>
-                </Panel>
-            </ControlTemplate>
+                </ControlTemplate>
+            </Setter.Value>
         </Setter>
 
         <!--  Normal  -->
         <!--  Separating this allows easier customization in applications  -->
-        <Style Selector="^ /template/ Ellipse#BorderEllipse,^ /template/ Rectangle#BorderRectangle">
+        <Style Selector="^ /template/ Ellipse#BorderEllipse,                      ^ /template/ Rectangle#BorderRectangle">
             <Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
             <Setter Property="StrokeThickness" Value="1" />
         </Style>

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -1,9 +1,11 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
     xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -17,15 +19,6 @@
     <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
-    <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
-    </Design.PreviewWith>
-
     <VisualBrush
         x:Key="ColorControlCheckeredBackgroundBrush"
         DestinationRect="0,0,8,8"
@@ -123,12 +116,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
-        <Setter Property="Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
-        <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
-        <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
-        <Setter Property="Template">
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
@@ -170,10 +163,10 @@
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="Width" Value="300" />
-        <Setter Property="Height" Value="300" />
-        <Setter Property="Palette">
-            <FluentColorPalette />
+        <Setter Property="ColorView.Width" Value="300" />
+        <Setter Property="ColorView.Height" Value="300" />
+        <Setter Property="ColorView.Palette">
+            <controls:FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorView}">
@@ -215,10 +208,13 @@
                         <!--  Spectrum Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <Grid Margin="12" RowDefinitions="*">
                                 <Grid.ColumnDefinitions>
@@ -226,7 +222,7 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
@@ -240,7 +236,7 @@
                                     IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
-                                <ColorSpectrum
+                                <primitives:ColorSpectrum
                                     Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -254,7 +250,7 @@
                                     MinSaturation="{TemplateBinding MinSaturation}"
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
@@ -266,21 +262,24 @@
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <ColorSlider.IsVisible>
+                                    <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </ColorSlider.IsVisible>
-                                </ColorSlider>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
                             </Grid>
                         </TabItem>
                         <!--  Palette Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <ListBox
                                 Margin="12"
@@ -313,15 +312,18 @@
                         <!--  Components Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <Grid
                                 Margin="12"
                                 ColumnDefinitions="Auto,*"
-                                RowDefinitions="Auto,24,*,*,*,*,12"
+                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
@@ -337,13 +339,13 @@
                                     Grid.Row="0"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="2"
-                                    ColumnDefinitions="*,12,*">
+                                    ColumnDefinitions="1*,12,1*">
                                     <!--  RadioButtonGroup  -->
                                     <Border
                                         Padding="2"
                                         Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                         CornerRadius="3">
-                                        <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
                                                 Name="RgbRadioButton"
                                                 Grid.Column="0"
@@ -352,9 +354,9 @@
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                Mode=TwoWay}"
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                            Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
                                                 Name="HsvRadioButton"
@@ -364,15 +366,16 @@
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                Mode=TwoWay}"
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                            Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
                                     <TextBox
                                         Name="PART_HexTextBox"
                                         Grid.Column="2"
+                                        Height="32"
                                         HorizontalAlignment="Stretch"
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
@@ -396,14 +399,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -426,14 +430,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -456,14 +461,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -493,33 +499,34 @@
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     Orientation="Horizontal"
                                     TickFrequency="1">
-                                    <ColorSlider.IsVisible>
+                                    <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                             <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </ColorSlider.IsVisible>
-                                </ColorSlider>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
                             </Grid>
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
                     <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                    <ColorPreviewer
+                    <primitives:ColorPreviewer
                         Grid.Row="1"
                         Margin="12,-5,12,7"
                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -576,7 +583,7 @@
                         Grid.Row="0"
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
-                        <ColorSpectrum
+                        <primitives:ColorSpectrum
                             Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -590,7 +597,7 @@
                             MinValue="{TemplateBinding MinValue}"
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
-                    <ColorSlider
+                    <primitives:ColorSlider
                         Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
@@ -602,8 +609,8 @@
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
-                    <ColorSlider
-                        x:Name="ColorSpectrumAlphaSlider"
+                    <primitives:ColorSlider
+                        Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -616,7 +623,8 @@
                         IsRoundingEnabled="True"
                         IsSnapToTickEnabled="True"
                         TickFrequency="1"
-                        Orientation="Horizontal" />
+                        Orientation="Horizontal">
+                    </primitives:ColorSlider>
                     <StackPanel
                         Grid.Row="3"
                         HorizontalAlignment="Stretch"
@@ -685,4 +693,13 @@
             <Setter Property="Width" Value="176" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/_index.axaml

@@ -1,12 +0,0 @@
-<ResourceDictionary
-    x:CompileBindings="True"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -1,17 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
+
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -6,7 +6,7 @@
                 <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/_index.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,17 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
+
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
 </ResourceDictionary>

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.6</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.1.0.5</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -12,6 +12,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -1,31 +1,33 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
-    <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
-    <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
-    <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" />
+    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </StreamGeometry>
 
-    <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
-    <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
-    <StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
-    <StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 
     <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
     <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
-    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
-
-    <StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
-
-    <StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="ColorPickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
+    
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Dark.axaml

@@ -1,21 +1,29 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />
+
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />
+
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#E6E8EA" Opacity="0.04" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -3,6 +3,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="using:Avalonia.Collections"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -126,19 +127,21 @@
                             Name="HeaderBackground"
                             Grid.ColumnSpan="2"
                             Margin="4"
-                            CornerRadius="{DynamicResource DataGridColumnHeaderCornerRadius}" />
+                            CornerRadius="3" />
                         <Grid
-                            ColumnDefinitions="*,Auto"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                            <ContentPresenter
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                             <PathIcon
                                 Name="SortIcon"
                                 Grid.Column="1"
-                                Theme="{StaticResource InnerPathIcon}"
+                                Width="8"
+                                Height="8"
                                 Margin="0,0,8,0"
                                 Foreground="{TemplateBinding Foreground}" />
                         </Grid>
@@ -291,7 +294,7 @@
                             Grid.ColumnSpan="2"
                             Margin="{DynamicResource DataGridRowMargin}"
                             Background="{DynamicResource DataGridRowBackground}"
-                            CornerRadius="{DynamicResource DataGridRowCornerRadius}" />
+                            CornerRadius="3" />
                         <Rectangle
                             Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
@@ -356,7 +359,8 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
                 <PathIcon
-                    Theme="{StaticResource InnerPathIcon}"
+                    Width="12"
+                    Height="12"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Background="Transparent"
@@ -372,7 +376,7 @@
     <ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackground}" />
-        <Setter Property="MinHeight" Value="{DynamicResource DataGridRowGroupHeaderMinHeight}" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Template">
             <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup" TargetType="DataGridRowGroupHeader">
                 <DataGridFrozenGrid
@@ -397,18 +401,20 @@
                         Grid.Column="3"
                         Margin="12,0,0,0"
                         VerticalAlignment="Center"
-                        Orientation="Horizontal"
-                        Spacing="4">
+                        Orientation="Horizontal">
                         <TextBlock
                             Name="PART_PropertyNameElement"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
                         <ContentControl
                             Name="PART_GroupKeyContentControl"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsItemCountVisible}" />
                     </StackPanel>
@@ -525,7 +531,6 @@
                             Name="PART_VerticalScrollbar"
                             Grid.Row="1"
                             Grid.Column="2"
-                            AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                             Orientation="Vertical" />
 
                         <Grid
@@ -536,7 +541,6 @@
                             <ScrollBar
                                 Name="PART_HorizontalScrollbar"
                                 Grid.Column="1"
-                                AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                                 Height="{DynamicResource ScrollBarSize}"
                                 Orientation="Horizontal" />
                         </Grid>
@@ -549,7 +553,7 @@
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{DynamicResource DataGridDisabledBackground}"
-                            CornerRadius="{DynamicResource DataGridDisabledCornerRadius}"
+                            CornerRadius="2"
                             IsHitTestVisible="False"
                             IsVisible="{Binding !$parent[DataGrid].IsEnabled}" />
                     </Grid>
@@ -569,7 +573,7 @@
             </Style>
         </Style>
 
-        <Style Selector="^.InsetContent">
+        <Style Selector="^[(ScrollViewer.AllowAutoHide)=False]">
             <Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
                 <Setter Property="Grid.RowSpan" Value="1" />
                 <Setter Property="Grid.ColumnSpan" Value="2" />
@@ -579,4 +583,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -1,21 +1,29 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />
+
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#2E3238" Opacity="0.02" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -1,18 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
+    <Import Project="../Package.props"/>
+    
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
-        <Nullable>enable</Nullable>
-        <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.6</PackageReleaseNotes>
-        <Authors>IRIHI Technology Co., Ltd.</Authors>
-        <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <PackageLicenseExpression>MIT</PackageLicenseExpression>
-        <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
         <Title>Semi.Avalonia.DataGrid</Title>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.1.0.5</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -20,8 +12,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.1"/>
-        <None Include="irihi.png" Pack="true" PackagePath=""/>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -1,22 +1,20 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
-    <StaticResource x:Key="DataGridCellMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridCellVisualBorderThickness" ResourceKey="SemiBorderThicknessControl" />
-    <StaticResource x:Key="DataGridCellVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
+
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
 
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
-    <StaticResource x:Key="DataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconSmallTriangleTop" />
-    <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconSmallTriangleDown" />
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+
+    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</StreamGeometry>
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
-    <StaticResource x:Key="DataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="DataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
+    <Thickness x:Key="DataGridRowMargin">2</Thickness>
 
-    <StaticResource x:Key="DataGridRowGroupHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" />
-    <StaticResource x:Key="DataGridRowGroupHeaderVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
+    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</StreamGeometry>
 
-    <StaticResource x:Key="DataGridDisabledCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,11 +1,12 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Index.axaml

@@ -1,4 +1,5 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,11 +1,12 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,8 +4,8 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.0.10.2</Version>
-        <PackageReleaseNotes>Update to 11.0.10.2</PackageReleaseNotes>
+        <Version>11.0.10.1</Version>
+        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,11 +1,9 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconSmallTriangleTop" />
-    <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconSmallTriangleDown" />
-    <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight" />
-    <StaticResource x:Key="TreeDataGridItemCollapsedChevronWidth" ResourceKey="SemiWidthIconMedium" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="TreeDataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="TreeDataGridRowMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="TreeDataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
-</ResourceDictionary>
+    <!--  Add Resources Here  -->
+    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">
+        M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M9.65618 3.44015L18.6322 11.2454C19.0906 11.644 19.0906 12.356 18.6322 12.7546L9.65618 20.5598C9.00895 21.1226 8 20.6629 8 19.8052V4.19475C8 3.33705 9.00895 2.87734 9.65618 3.44015Z</StreamGeometry>
+    <Thickness x:Key="TreeDataGridRowMargin">2</Thickness>
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
+    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />
@@ -49,10 +50,10 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridColumnHeaderMinHeight}" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Padding" Value="8 2 0 2" />
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridColumnHeaderCornerRadius}" />
+        <Setter Property="CornerRadius" Value="4" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
@@ -87,8 +88,11 @@
                         </Panel>
                         <PathIcon
                             Name="SortIcon"
-                            Theme="{StaticResource InnerPathIcon}"
+                            Width="8"
+                            Height="8"
                             Margin="0,0,8,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
                             DockPanel.Dock="Right"
                             Foreground="{TemplateBinding Foreground}"
                             TabIndex="1" />
@@ -137,8 +141,8 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridRowCornerRadius}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridRowMinHeight}" />
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -189,17 +193,25 @@
     </ControlTheme>
 
     <ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Width" Value="8" />
+        <Setter Property="Height" Value="8" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <PathIcon
-                    Name="ChevronPath"
+                <Border
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Theme="{StaticResource InnerPathIcon}"
-                    Classes="Small"
-                    Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
-                    Foreground="{TemplateBinding Foreground}" />
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Background="Transparent">
+                    <PathIcon
+                        Name="ChevronPath"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon#ChevronPath">
@@ -212,16 +224,18 @@
             <ControlTemplate>
                 <Border
                     Name="CellBorder"
-                    Padding="{TemplateBinding Indent,Converter={x:Static conv:IndentConverter.Instance}}"
+                    Padding="{TemplateBinding Indent,
+                                              Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Border
-                            DockPanel.Dock="Left"
-                            Width="{DynamicResource TreeDataGridItemCollapsedChevronWidth}"
-                            Margin="4,0">
+                            Width="12"
+                            Height="12"
+                            Margin="4,0"
+                            DockPanel.Dock="Left">
                             <ToggleButton
                                 Focusable="False"
                                 IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
@@ -322,4 +336,4 @@
             </Setter>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Animations/SemiPopupAnimations.axaml

@@ -1,37 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        x:Class="Semi.Avalonia.SemiPopupAnimations"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
-    <Style Selector="Popup LayoutTransformControl#PART_LayoutTransform">
-        <Setter Property="RenderTransformOrigin" Value="{Binding $parent[Popup].Placement, Converter={x:Static converters:PlacementToRenderTransformOriginConverter.Instance}}" />
-    </Style>
-
-    <Style Selector="Popup[IsOpen=True] LayoutTransformControl#PART_LayoutTransform">
-        <Style.Animations>
-            <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseIn">
-                <KeyFrame Cue="0.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="0.98" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="0.98" />
-                </KeyFrame>
-                <KeyFrame Cue="1.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="1.0" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="1.0" />
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
-    <Style Selector="Popup[IsOpen=False] LayoutTransformControl#PART_LayoutTransform">
-        <Style.Animations>
-            <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
-                <KeyFrame Cue="0.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="1.0" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="1.0" />
-                </KeyFrame>
-                <KeyFrame Cue="1.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="0.98" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="0.98" />
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
-</Styles>

src/Semi.Avalonia/Animations/SemiPopupAnimations.axaml.cs

@@ -1,8 +0,0 @@
-using Avalonia.Styling;
-
-namespace Semi.Avalonia;
-
-public class SemiPopupAnimations: Styles
-{
-    
-}

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True">
+    x:ClassModifier="internal">
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -9,9 +9,9 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
-        <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
+        <Setter Property="AutoCompleteBox.VerticalAlignment" Value="Center" />
+        <Setter Property="AutoCompleteBox.MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
+        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
                 <DataValidationErrors>
@@ -79,12 +79,12 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
                             </Border>
                         </Popup>
                     </Panel>
@@ -98,4 +98,4 @@
             <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Border.axaml

@@ -31,4 +31,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Button.axaml

@@ -108,16 +108,17 @@
                         Classes="Solid" />
             </FocusAdornerTemplate>
         </Setter>
-        <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-        <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+        </Style>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
@@ -133,7 +134,6 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
@@ -215,9 +215,9 @@
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -258,20 +258,20 @@
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
     </ControlTheme>
 
     <ControlTheme x:Key="InnerIconButton" TargetType="Button">
-        <Setter Property="Width" Value="{DynamicResource SemiWidthIconMedium}" />
-        <Setter Property="Height" Value="{DynamicResource SemiWidthIconMedium}" />
+        <Setter Property="Width" Value="16"/>
+        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -8,9 +8,9 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
-        <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
+        <Setter Property="RepeatButton.Template">
             <ControlTemplate>
                 <ContentPresenter
                     Name="PART_ContentPresenter"
@@ -38,10 +38,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="MinWidth" Value="300" />
-        <Setter Property="Template">
+        <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
+        <Setter Property="ButtonSpinner.MinWidth" Value="300" />
+        <Setter Property="ButtonSpinner.Template">
             <ControlTemplate TargetType="ButtonSpinner">
                 <Grid ColumnDefinitions="Auto, *, Auto">
                     <Border
@@ -97,8 +97,5 @@
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
-        <Style Selector="^:pointerover /template/ Border#ButtonGroup">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
-        </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>