feat: color & size.

demo/Ursa.Demo/Pages/AvatarDemo.axaml

@@ -12,24 +12,55 @@
     <UserControl.Resources>
         <StreamGeometry x:Key="IconCamera">M7.44721 3.10557C7.786 2.428 8.47852 2 9.23607 2H14.7639C15.5215 2 16.214 2.428 16.5528 3.10557L17.5 5H20C21.6569 5 23 6.34315 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V8C1 6.34315 2.34315 5 4 5H6.5L7.44721 3.10557ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13ZM12 8C9.23858 8 7 10.2386 7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8Z</StreamGeometry>
     </UserControl.Resources>
-    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
+    <UserControl.Styles>
-        <u:Avatar Content="{Binding Content}"
+        <Style Selector="u|Avatar">
-                  Command="{Binding ClickCommand}" />
+            <Setter Property="Content" Value="{Binding Content}" />
-        <u:Avatar Content="{Binding Content}"
+            <Setter Property="Command" Value="{Binding ClickCommand}" />
-                  Command="{Binding ClickCommand}">
+        </Style>
-            <u:Avatar.HoverMask>
+    </UserControl.Styles>
-                <Border Opacity="0.6">
+    <StackPanel>
-                    <Panel>
+        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
-                        <Ellipse Fill="#16161A"
+            <u:Avatar />
-                                 Width="{Binding $parent[u:Avatar].Width}"
+            <u:Avatar Classes="Red">
-                                 Height="{Binding $parent[u:Avatar].Height}" />
+                <u:Avatar.HoverMask>
-                        <PathIcon Width="16" Height="16" Data="{StaticResource IconCamera}" />
+                    <Border Opacity="0.6">
-                    </Panel>
+                        <Panel>
-                </Border>
+                            <Ellipse Fill="#16161A"
-            </u:Avatar.HoverMask>
+                                     Width="{Binding $parent[u:Avatar].Width}"
-        </u:Avatar>
+                                     Height="{Binding $parent[u:Avatar].Height}" />
-        <u:Avatar Content="{Binding Content}"
+                            <PathIcon Width="16" Height="16" Data="{StaticResource IconCamera}" />
-                  Command="{Binding ClickCommand}"
+                        </Panel>
-                  Source="../Assets/Ursa.ico" />
+                    </Border>
+                </u:Avatar.HoverMask>
+            </u:Avatar>
+            <u:Avatar Source="../Assets/Ursa.ico" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <u:Avatar Classes="Red" />
+            <u:Avatar Classes="Pink" />
+            <u:Avatar Classes="Purple" />
+            <u:Avatar Classes="Violet" />
+            <u:Avatar Classes="Indigo" />
+            <u:Avatar Classes="Blue" />
+            <u:Avatar Classes="LightBlue" />
+            <u:Avatar Classes="Cyan" />
+            <u:Avatar Classes="Teal" />
+            <u:Avatar Classes="Green" />
+            <u:Avatar Classes="LightGreen" />
+            <u:Avatar Classes="Lime" />
+            <u:Avatar Classes="Yellow" />
+            <u:Avatar Classes="Amber" />
+            <u:Avatar Classes="Orange" />
+            <u:Avatar Classes="Grey" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <u:Avatar Classes="ExtraExtraSmall" />
+            <u:Avatar Classes="ExtraSmall" />
+            <u:Avatar Classes="Small" />
+            <u:Avatar Classes="Default" />
+            <u:Avatar Classes="Medium" />
+            <u:Avatar Classes="Large" />
+            <u:Avatar Classes="ExtraLarge" />
+        </StackPanel>
     </StackPanel>
 </UserControl>

src/Ursa.Themes.Semi/Controls/Avatar.axaml

@@ -4,10 +4,11 @@
     xmlns:u="https://irihi.tech/ursa">
     <ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
         <Setter Property="Foreground" Value="White" />
-        <Setter Property="Background" Value="{DynamicResource SemiGrey3Color}" />
+        <Setter Property="Background" Value="{DynamicResource SemiGrey3}" />
         <Setter Property="FontSize" Value="20" />
-        <Setter Property="Height" Value="48" />
+        <Setter Property="FontWeight" Value="Bold" />
         <Setter Property="Width" Value="48" />
+        <Setter Property="Height" Value="{Binding $self.Width}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type u:Avatar}">
@@ -38,7 +39,85 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask">
-            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="IsVisible"
+                    Value="{Binding HoverMask,RelativeSource={RelativeSource TemplatedParent},
+                        Converter={x:Static ObjectConverters.IsNotNull}}" />
+        </Style>
+        <Style Selector="^.Red">
+            <Setter Property="Background" Value="{DynamicResource SemiRed3}" />
+        </Style>
+        <Style Selector="^.Pink">
+            <Setter Property="Background" Value="{DynamicResource SemiPink3}" />
+        </Style>
+        <Style Selector="^.Purple">
+            <Setter Property="Background" Value="{DynamicResource SemiPurple3}" />
+        </Style>
+        <Style Selector="^.Violet">
+            <Setter Property="Background" Value="{DynamicResource SemiViolet3}" />
+        </Style>
+        <Style Selector="^.Indigo">
+            <Setter Property="Background" Value="{DynamicResource SemiIndigo3}" />
+        </Style>
+        <Style Selector="^.Blue">
+            <Setter Property="Background" Value="{DynamicResource SemiBlue3}" />
+        </Style>
+        <Style Selector="^.LightBlue">
+            <Setter Property="Background" Value="{DynamicResource SemiLightBlue3}" />
+        </Style>
+        <Style Selector="^.Cyan">
+            <Setter Property="Background" Value="{DynamicResource SemiCyan3}" />
+        </Style>
+        <Style Selector="^.Teal">
+            <Setter Property="Background" Value="{DynamicResource SemiTeal3}" />
+        </Style>
+        <Style Selector="^.Green">
+            <Setter Property="Background" Value="{DynamicResource SemiGreen3}" />
+        </Style>
+        <Style Selector="^.LightGreen">
+            <Setter Property="Background" Value="{DynamicResource SemiLightGreen3}" />
+        </Style>
+        <Style Selector="^.Lime">
+            <Setter Property="Background" Value="{DynamicResource SemiLime3}" />
+        </Style>
+        <Style Selector="^.Yellow">
+            <Setter Property="Background" Value="{DynamicResource SemiYellow3}" />
+        </Style>
+        <Style Selector="^.Amber">
+            <Setter Property="Background" Value="{DynamicResource SemiAmber3}" />
+        </Style>
+        <Style Selector="^.Orange">
+            <Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
+        </Style>
+        <Style Selector="^.Grey">
+            <Setter Property="Background" Value="{DynamicResource SemiGrey3}" />
+        </Style>
+        <Style Selector="^.ExtraExtraSmall">
+            <Setter Property="Width" Value="20" />
+            <Setter Property="FontSize" Value="10" />
+        </Style>
+        <Style Selector="^.ExtraSmall">
+            <Setter Property="Width" Value="24" />
+            <Setter Property="FontSize" Value="10" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="Width" Value="32" />
+            <Setter Property="FontSize" Value="12" />
+        </Style>
+        <Style Selector="^.Default">
+            <Setter Property="Width" Value="40" />
+            <Setter Property="FontSize" Value="18" />
+        </Style>
+        <Style Selector="^.Medium">
+            <Setter Property="Width" Value="48" />
+            <Setter Property="FontSize" Value="20" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="Width" Value="72" />
+            <Setter Property="FontSize" Value="32" />
+        </Style>
+        <Style Selector="^.ExtraLarge">
+            <Setter Property="Width" Value="128" />
+            <Setter Property="FontSize" Value="64" />
         </Style>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type u:AvatarGroup}" TargetType="{x:Type u:AvatarGroup}" />