Merge pull request #539 from irihitech/variable

add Variable Demo & add copy button to PaletteDemo, HighContrastDemo

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

@@ -0,0 +1,132 @@
+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"),
+    };
+
+    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/Pages/HighContrastDemo.axaml

@@ -5,6 +5,7 @@
              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"
@@ -306,6 +307,18 @@
                                     </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>

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

@@ -1,4 +1,5 @@
-using Avalonia.Controls;
+using System.Threading.Tasks;
+using Avalonia.Controls;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -10,4 +11,14 @@ public partial class HighContrastDemo : UserControl
         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/PaletteDemo.axaml.cs

@@ -1,8 +1,6 @@
 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;
 
@@ -16,13 +14,20 @@ 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(() =>
+        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)
         {
-            vm?.InitializeResources();
+            await c.SetTextAsync(o.ToString());
-        });
+        }
     }
 }

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

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

@@ -0,0 +1,24 @@
+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/Themes/FunctionalColorGroupControl.axaml

@@ -3,6 +3,7 @@
     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">
@@ -30,27 +31,21 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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,12,0"
+                                                    Margin="12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -60,13 +55,29 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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>
@@ -84,27 +95,21 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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,12,0"
+                                                    Margin="12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -114,13 +119,29 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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/Themes/ShadowGroupControl.axaml

@@ -3,6 +3,7 @@
     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">
@@ -19,29 +20,40 @@
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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="Name" />
+                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
+                                                <Button
-                                                    Margin="12,0,12,0"
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    VerticalAlignment="Center"
+                                                    CommandParameter="{Binding CopyText}"
-                                                    Text="{Binding BoxShadowValue}" />
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
@@ -51,29 +63,40 @@
                         <TabItem Header="Dark">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0,12,0"
+                                                    Margin="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="Name" />
+                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
+                                                <Button
-                                                    Margin="12,0,12,0"
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    VerticalAlignment="Center"
+                                                    CommandParameter="{Binding CopyText}"
-                                                    Text="{Binding BoxShadowValue}" />
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>

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

@@ -8,7 +8,7 @@ using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class DataGridDemoViewModel: ObservableObject
+public class DataGridDemoViewModel : ObservableObject
 {
     public ObservableCollection<Song> GridData1 { get; set; }
 
@@ -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,11 +57,10 @@ public class Song
         Album = album;
         CountOfComment = countOfComment;
         Url = $"https://music.163.com/song?id={netEaseId}";
-        
     }
 
-    public static List<Song> Songs { get; set; } = new List<Song>()
+    public static List<Song> Songs =>
-    {
+    [
         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),
@@ -122,41 +121,15 @@ 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 class SongViewModel: ObservableObject
+public partial class SongViewModel : ObservableObject
 {
-    private string? _title;
+    [ObservableProperty] private string? _title;
-    private string? _artist;
+    [ObservableProperty] private string? _artist;
-    private string? _album;
+    [ObservableProperty] private string? _album;
-    private int _countOfComment;
+    [ObservableProperty] private int _countOfComment;
-    private bool? _isSelected;
+    [ObservableProperty] 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

@@ -31,35 +31,35 @@ public partial class HighContrastDemoViewModel : ObservableObject
         [
             new ColorResource
             {
-                ResourceKey = "WindowColor",
+                ResourceKey = "SemiColorWindow",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
                 Description = "Background of pages, panes, popups, and windows.",
                 PairWith = "WindowTextColor"
             },
             new ColorResource
             {
-                ResourceKey = "WindowTextColor",
+                ResourceKey = "SemiColorWindowText",
                 Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
                 Description = "Headings, body copy, lists, placeholder text, app and window borders.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "HotlightColor",
+                ResourceKey = "SemiColorHotlight",
                 Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
                 Description = "Hyperlinks.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "GrayTextColor",
+                ResourceKey = "SemiColorGrayText",
                 Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
                 Description = "Inactive (disabled) UI.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "HighlightTextColor",
+                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.",
@@ -67,7 +67,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
             },
             new ColorResource
             {
-                ResourceKey = "HighlightColor",
+                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.",
@@ -75,14 +75,14 @@ public partial class HighContrastDemoViewModel : ObservableObject
             },
             new ColorResource
             {
-                ResourceKey = "ButtonTextColor",
+                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 = "ButtonFaceColor",
+                ResourceKey = "SemiColorButtonFace",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
                 Description = "Background color for buttons and any UI that can be interacted with.",
                 PairWith = "ButtonTextColor"
@@ -100,9 +100,10 @@ public partial class HighContrastDemoViewModel : ObservableObject
         foreach (var colorResource in ColorResources)
         {
             if (colorResource.ResourceKey is null) continue;
-            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
+            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true
+                && o is ISolidColorBrush color)
             {
-                colorResource.Brush = new SolidColorBrush(color);
+                colorResource.Brush = color;
             }
         }
     }
@@ -121,7 +122,12 @@ public partial class HighContrastDemoViewModel : ObservableObject
 public partial class ColorResource : ObservableObject
 {
     [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private SolidColorBrush? _brush;
+    [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/PaletteDemoViewModel.cs

@@ -6,12 +6,13 @@ using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
-using Semi.Avalonia.Tokens.Palette;
+using Semi.Avalonia.Demo.Constant;
 using Semi.Avalonia.Demo.Converters;
+using Semi.Avalonia.Tokens.Palette;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class PaletteDemoViewModel : ObservableObject
+public partial class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
     [
@@ -24,31 +25,10 @@ public class PaletteDemoViewModel : ObservableObject
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
 
-    private ColorItemViewModel _selectedColor = null!;
+    [ObservableProperty] private ColorItemViewModel? _selectedColor;
-
-    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; } = [];
 
@@ -56,7 +36,7 @@ public class PaletteDemoViewModel : ObservableObject
     {
         _lightResourceDictionary = new Light();
         _darkResourceDictionary = new Dark();
-        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
+        WeakReferenceMessenger.Default.Register<ColorItemViewModel>(this, (_, item) => SelectedColor = item);
     }
 
     public void InitializeResources()
@@ -68,7 +48,6 @@ public class PaletteDemoViewModel : ObservableObject
 
     private void InitializePalette()
     {
-        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -76,7 +55,6 @@ public class PaletteDemoViewModel : ObservableObject
             LightLists.Add(s);
         }
 
-        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -87,126 +65,80 @@ public class PaletteDemoViewModel : ObservableObject
 
     private void InitializeFunctionalColors()
     {
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+            "Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+            "Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+            "Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
+            "Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
+            "Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
+            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
+        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 class ColorListViewModel : ObservableObject
+public partial class ColorListViewModel : ObservableObject
 {
-    private ObservableCollection<ColorItemViewModel>? _colors;
+    public ObservableCollection<ColorItemViewModel> Color { get; set; } = [];
 
-    public ObservableCollection<ColorItemViewModel>? Color
+    [ObservableProperty] private string? _seriesName;
-    {
-        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)
+        if (resourceDictionary is null) return;
-        {
-            return;
-        }
 
         SeriesName = color;
-        Color = [];
 
         for (var i = 0; i < 10; i++)
         {
-            var key = "Semi" + color + i;
+            var key = $"Semi{color}{i}";
-            if (resourceDictionary.TryGetValue(key, out var value))
+            if (resourceDictionary.TryGetValue(key, out var value) && value is ISolidColorBrush brush)
             {
-                if (value is ISolidColorBrush brush)
+                var name = $"{color} {i}";
-                {
+                var item = new ColorItemViewModel(name, brush, key, light, i);
-                    string name = color + " " + i;
+                item.ColorResourceKey = $"{item.ResourceKey}Color";
-                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                Color.Add(item);
-                    item.ColorResourceKey = item.ResourceKey + "Color";
-                    Color.Add(item);
-                }
             }
         }
     }
 }
 
-public class ColorItemViewModel : ObservableObject
+public partial class ColorItemViewModel : ObservableObject
 {
-    private IBrush _brush = null!;
+    [ObservableProperty] private IBrush? _brush;
+    [ObservableProperty] private IBrush? _textBrush;
+    [ObservableProperty] private string? _colorDisplayName;
+    [ObservableProperty] private string? _resourceKey;
+    [ObservableProperty] private string? _colorResourceKey;
+    [ObservableProperty] private string? _hex;
 
-    public IBrush Brush
+    public string CopyText =>
-    {
+        $"""
-        get => _brush;
+         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-        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)
@@ -227,16 +159,9 @@ public class ColorItemViewModel : ObservableObject
     }
 }
 
-public class FunctionalColorGroupViewModel : ObservableObject
+public partial class FunctionalColorGroupViewModel : ObservableObject
 {
-    private string _title = null!;
+    [ObservableProperty] private string? _title;
-
-    public string Title
-    {
-        get => _title;
-        set => SetProperty(ref _title, value);
-    }
-
     public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
     public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
@@ -265,31 +190,16 @@ public class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
-public class ShadowItemViewModel : ObservableObject
+public partial class ShadowItemViewModel : ObservableObject
 {
-    private string _shadowDisplayName = null!;
+    [ObservableProperty] private string? _shadowDisplayName;
+    [ObservableProperty] private string? _resourceKey;
+    [ObservableProperty] private string? _boxShadowValue;
 
-    public string ShadowDisplayName
+    public string CopyText =>
-    {
+        $"""
-        get => _shadowDisplayName;
+         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-        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)
     {
@@ -299,16 +209,9 @@ public class ShadowItemViewModel : ObservableObject
     }
 }
 
-public class ShadowGroupViewModel : ObservableObject
+public partial class ShadowGroupViewModel : ObservableObject
 {
-    private string _title = null!;
+    [ObservableProperty] private string? _title;
-
-    public string Title
-    {
-        get => _title;
-        set => SetProperty(ref _title, value);
-    }
-
     public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
     public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
 
@@ -337,131 +240,3 @@ public 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

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

@@ -91,6 +91,9 @@
             <TabItem Header="HighContrastTheme">
                 <pages:HighContrastDemo />
             </TabItem>
+            <TabItem Header="Variables">
+                <pages:VariablesDemo />
+            </TabItem>
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>