Added primary and secondary colors

AvaloniaCommunity · Jul 31, 2023 · 3ce2c1b · 3ce2c1b
1 parent 60f2bb1
commit 3ce2c1b
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 79 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -2,7 +2,7 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
-    <AvaloniaVersion>11.0.0</AvaloniaVersion>
+    <AvaloniaVersion>11.0.1</AvaloniaVersion>
     <ShowMeTheXamlVersion>1.3.0</ShowMeTheXamlVersion>
   </PropertyGroup>
   <ItemGroup>

diff --git a/Material.Colors/SwatchHelper.cs b/Material.Colors/SwatchHelper.cs
@@ -13,6 +13,7 @@ public static class SwatchHelper
             new PinkSwatch(),
             new PurpleSwatch(),
             new DeepPurpleSwatch(),
+            new IndigoSwatch(),
             new BlueSwatch(),
             new LightBlueSwatch(),
             new CyanSwatch(),

diff --git a/Material.Demo/Extensions/MaterialColorExt.cs b/Material.Demo/Extensions/MaterialColorExt.cs
diff --git a/Material.Demo/Extensions/PrimaryColorExt.cs b/Material.Demo/Extensions/PrimaryColorExt.cs
@@ -0,0 +1,25 @@
+using System;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using Material.Colors;
+
+namespace Material.Demo.Extensions;
+
+public class PrimaryColorExt : MarkupExtension
+{
+    public PrimaryColorExt()
+    {
+    }
+
+    public PrimaryColorExt(PrimaryColor color)
+    {
+        Color = color;
+    }
+
+    [ConstructorArgument("color")] public PrimaryColor Color { get; set; }
+
+    public override object ProvideValue(IServiceProvider serviceProvider)
+    {
+        return new SolidColorBrush(SwatchHelper.Lookup[(MaterialColor)Color]);
+    }
+}
diff --git a/Material.Demo/Extensions/SecondaryColorExt.cs b/Material.Demo/Extensions/SecondaryColorExt.cs
@@ -0,0 +1,25 @@
+using System;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using Material.Colors;
+
+namespace Material.Demo.Extensions;
+
+public class SecondaryColorExt : MarkupExtension
+{
+    public SecondaryColorExt()
+    {
+    }
+
+    public SecondaryColorExt(SecondaryColor color)
+    {
+        Color = color;
+    }
+
+    [ConstructorArgument("color")] public SecondaryColor Color { get; set; }
+
+    public override object ProvideValue(IServiceProvider serviceProvider)
+    {
+        return new SolidColorBrush(SwatchHelper.Lookup[(MaterialColor)Color]);
+    }
+}
diff --git a/Material.Demo/Pages/ColorsDemo.axaml b/Material.Demo/Pages/ColorsDemo.axaml
@@ -1,81 +1,137 @@
 <UserControl x:Class="Material.Demo.Pages.ColorsDemo"
              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"
-             mc:Ignorable="d"
              xmlns:controls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:extensions="clr-namespace:Material.Demo.Extensions"
              xmlns:icons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
              d:DesignHeight="450"
-             d:DesignWidth="800">
-  <StackPanel Margin="16,0,16,32">
-    <StackPanel.Styles>
-      <!--  Icons are too small, use next style to let them bigger  -->
-      <Style Selector="icons|MaterialIcon">
-        <Setter Property="Width" Value="24" />
-        <Setter Property="Height" Value="24" />
-      </Style>
-    </StackPanel.Styles>
-    <TextBlock Classes="Headline4 Subheadline" Text="Colors" />
-    <StackPanel>
-      <TextBlock Classes="Headline6 Subheadline2" Text="Red" />
-      <Canvas Background="{extensions:MaterialColorExt Red}" Height="10" />
+             d:DesignWidth="800"
+             mc:Ignorable="d">
+    <StackPanel Margin="16,0,16,32">
+        <StackPanel.Styles>
+            <!--  Icons are too small, use next style to let them bigger  -->
+            <Style Selector="icons|MaterialIcon">
+                <Setter Property="Width" Value="24" />
+                <Setter Property="Height" Value="24" />
+            </Style>
+        </StackPanel.Styles>
+        <TextBlock Classes="Headline4 Subheadline" Text="Colors" />
+        <Grid ColumnDefinitions="*,15,*">
+            <StackPanel>
+                <TextBlock Classes="Headline5 Subheadline" Text="Primary colors" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Red" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Red}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Pink" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Pink}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Purple" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Purple}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="DeepPurple" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt DeepPurple}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Indigo" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Indigo}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Blue" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Blue}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="LightBlue" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt LightBlue}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Cyan" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Cyan}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Teal" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Teal}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Green" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Green}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="LightGreen" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt LightGreen}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Lime" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Lime}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Yellow" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Yellow}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Amber" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Amber}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Orange" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Orange}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="DeepOrange" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt DeepOrange}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Brown" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Brown}" />
+
+                <TextBlock Classes="Headline6 Subheadline2" Text="Grey" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt Grey}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Pink" />
-      <Canvas Background="{extensions:MaterialColorExt Pink}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="BlueGrey" />
+                <Canvas Height="10" Background="{extensions:PrimaryColorExt BlueGrey}" />
+            </StackPanel>
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Purple" />
-      <Canvas Background="{extensions:MaterialColorExt Purple}" Height="10" />
+            <StackPanel Grid.Column="2">
+                <TextBlock Classes="Headline5 Subheadline" Text="Secondary colors" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="DeepPurple" />
-      <Canvas Background="{extensions:MaterialColorExt DeepPurple}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Red" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Red}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Indigo" />
-      <Canvas Background="{extensions:MaterialColorExt Indigo}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Pink" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Pink}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Blue" />
-      <Canvas Background="{extensions:MaterialColorExt Blue}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Purple" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Purple}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="LightBlue" />
-      <Canvas Background="{extensions:MaterialColorExt LightBlue}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="DeepPurple" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt DeepPurple}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Cyan" />
-      <Canvas Background="{extensions:MaterialColorExt Cyan}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Indigo" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Indigo}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Teal" />
-      <Canvas Background="{extensions:MaterialColorExt Teal}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Blue" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Blue}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Green" />
-      <Canvas Background="{extensions:MaterialColorExt Green}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="LightBlue" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt LightBlue}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="LightGreen" />
-      <Canvas Background="{extensions:MaterialColorExt LightGreen}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Cyan" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Cyan}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Lime" />
-      <Canvas Background="{extensions:MaterialColorExt Lime}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Teal" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Teal}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Yellow" />
-      <Canvas Background="{extensions:MaterialColorExt Yellow}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Green" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Green}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Amber" />
-      <Canvas Background="{extensions:MaterialColorExt Amber}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="LightGreen" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt LightGreen}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Orange" />
-      <Canvas Background="{extensions:MaterialColorExt Orange}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Lime" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Lime}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="DeepOrange" />
-      <Canvas Background="{extensions:MaterialColorExt DeepOrange}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Yellow" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Yellow}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Brown" />
-      <Canvas Background="{extensions:MaterialColorExt Brown}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Amber" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Amber}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="Grey" />
-      <Canvas Background="{extensions:MaterialColorExt Grey}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="Orange" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt Orange}" />
 
-      <TextBlock Classes="Headline6 Subheadline2" Text="BlueGrey" />
-      <Canvas Background="{extensions:MaterialColorExt BlueGrey}" Height="10" />
+                <TextBlock Classes="Headline6 Subheadline2" Text="DeepOrange" />
+                <Canvas Height="10" Background="{extensions:SecondaryColorExt DeepOrange}" />
+            </StackPanel>
+        </Grid>
     </StackPanel>
-  </StackPanel>
 </UserControl>