Add CSS theme engine

Styles a virtual DOM using CSS and applies supported styles to the
overlay.

1. Reads themes\custom.css using AngleSharp.CSS
2. Styles a virtual DOM template
3. Extracts styles using custom markup extension
4. Converts supported properties to WPF equivalents
5. Renders the result to the screeen

Author: veselink1

FancyWM.ThemeEngine.Tests/CssToWpfResourceConverterTest.cs

@@ -0,0 +1,161 @@
+using System.Linq;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Effects;
+
+using FancyWM.ThemeEngine.Wpf;
+
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace FancyWM.ThemeEngine.Tests
+{
+    [TestClass]
+    public class CssToWpfResourceConverterTest
+    {
+        [TestMethod]
+        public void TestSpecificity()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<a><button></button><button class='primary'></button></a>";
+            var cssText = @"
+                button { color: red; }
+                button.primary { color: blue; }
+                button:hover { color: lime; }
+            ";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+
+            Assert.AreEqual(Colors.Red, resources["button/color"].As<Color>());
+            Assert.AreEqual(Colors.Lime, resources["button:hover/color"].As<Color>());
+            Assert.AreEqual(Colors.Blue, resources["button.primary/color"].As<Color>());
+            Assert.AreEqual(Colors.Lime, resources["button.primary:hover/color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestPrecedence()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = @"
+                a, button { color: blue; }
+                button { color: red; }
+            ";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(Colors.Red, resources["button/color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestColorProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { color: #AABBCC; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(Color.FromRgb(0xAA, 0xBB, 0xCC), resources["button/color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestBackgroundColorProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { background-color: rgba(10, 20, 30, 0.5); }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(Color.FromArgb(128, 10, 20, 30), resources["button/background-color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestBackgroundImageProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { background-image: url('file:///C:/Windows/Web/Wallpaper/Windows/img0.jpg'); }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.IsInstanceOfType(resources["button/background-image"].As<Brush>(), typeof(ImageBrush));
+        }
+
+        [TestMethod]
+        public void TestBackgroundProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { background: rgba(10, 20, 30, 0.5); }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(Color.FromArgb(128, 10, 20, 30), resources["button/background-color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestBorderColorProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { border-color: red; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(Colors.Red, resources["button/border-top-color"].As<Color>());
+        }
+
+        [TestMethod]
+        public void TestBorderWidthProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { border-width: 1px 2px 3px 4px; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(new Thickness(4, 1, 2, 3), resources["button/border-width"].As<Thickness>());
+            Assert.AreEqual(1, resources["button/border-top-width"].As<double>());
+        }
+
+
+        [TestMethod]
+        public void TestBorderRadiusProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { border-radius: 1px 2px 3px 4px; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(new CornerRadius(1, 2, 3, 4), resources["button/border-radius"].As<CornerRadius>());
+        }
+
+        [TestMethod]
+        public void TestFilterDropShadowProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { filter: drop-shadow(2px 2px rgba(0,0,0,.2)); }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            var filter = resources["button/filter"].As<Effect>();
+            Assert.IsInstanceOfType(filter, typeof(DropShadowEffect));
+        }
+
+        [TestMethod]
+        public void TestFontWeightProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { font-weight: 800; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual(FontWeight.FromOpenTypeWeight(800), resources["button/font-weight"].As<FontWeight>());
+        }
+
+        [TestMethod]
+        public void TestFontFamilityProperty()
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<button></button>";
+            var cssText = "button { font-family: 'Segoe UI'; }";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            Assert.AreEqual("Segoe UI", (resources["button/font-family"].As<FontFamily>())?.FamilyNames.First().Value);
+        }
+    }
+}

FancyWM.ThemeEngine.Tests/FancyWM.ThemeEngine.Tests.csproj

@@ -0,0 +1,22 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0-windows10.0.18362.0</TargetFramework>
+
+    <IsPackable>false</IsPackable>
+    <CetCompat>false</CetCompat>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
+    <PackageReference Include="Moq" Version="4.16.1" />
+    <PackageReference Include="MSTest.TestAdapter" Version="2.1.1" />
+    <PackageReference Include="MSTest.TestFramework" Version="2.1.1" />
+    <PackageReference Include="coverlet.collector" Version="1.3.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\FancyWM.ThemeEngine\FancyWM.ThemeEngine.csproj" />
+  </ItemGroup>
+
+</Project>

FancyWM.ThemeEngine.Tests/WpfGradientTest.cs

@@ -0,0 +1,87 @@
+using System.Windows.Media;
+
+using FancyWM.ThemeEngine.Wpf;
+
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace FancyWM.ThemeEngine.Tests
+{
+    [TestClass]
+    public class WpfGradientTest
+    {
+        private static Brush Background(string cssValue)
+        {
+            var converter = new CssToWpfResourceConverter();
+            var htmlTemplate = "<a></a>";
+            var cssText = $"a {{ background-image: {cssValue}; }}";
+
+            var resources = converter.Convert(htmlTemplate, cssText);
+            return resources["a/background"].As<Brush>();
+        }
+
+        private static LinearGradientBrush LinearGradient(string cssValue)
+        {
+            var brush = Background(cssValue);
+            Assert.IsInstanceOfType(brush, typeof(DrawingBrush));
+            return GetInnerBrush(brush) as LinearGradientBrush;
+        }
+
+        private static RadialGradientBrush RadialGradient(string cssValue)
+        {
+            var brush = Background(cssValue);
+            return GetInnerBrush(brush) as RadialGradientBrush;
+        }
+
+        private static double GetAngle(LinearGradientBrush brush)
+        {
+            return (brush.RelativeTransform as RotateTransform).Angle;
+        }
+
+        private static Brush GetInnerBrush(Brush brush)
+        {
+            if (brush is DrawingBrush) 
+            {
+                return ((brush as DrawingBrush).Drawing as GeometryDrawing).Brush;
+            }
+            return brush;
+        }
+
+        [TestMethod]
+        public void TestSimpleLinearGradient()
+        {
+            var gradient = LinearGradient("linear-gradient(to right, blue, red)");
+            Assert.AreEqual(2, gradient.GradientStops.Count);
+            Assert.AreEqual(0.0, gradient.GradientStops[0].Offset);
+            Assert.AreEqual(1.0, gradient.GradientStops[1].Offset);
+            Assert.AreEqual(90, GetAngle(gradient));
+        }
+
+        [TestMethod]
+        public void TestAngle()
+        {
+            var gradient = LinearGradient("linear-gradient(45deg, blue, red)");
+            Assert.AreEqual(45, GetAngle(gradient));
+        }
+
+        [TestMethod]
+        public void TestIndeterminate()
+        {
+            var gradient = LinearGradient("linear-gradient(blue 10%, green, yellow, red 80%)");
+            Assert.AreEqual(4, gradient.GradientStops.Count);
+            Assert.AreEqual(0.1, gradient.GradientStops[0].Offset);
+            Assert.AreEqual(0.33, gradient.GradientStops[1].Offset, 0.01);
+            Assert.AreEqual(0.56, gradient.GradientStops[2].Offset, 0.01);
+            Assert.AreEqual(0.8, gradient.GradientStops[3].Offset);
+        }
+
+        [TestMethod]
+        public void TestSimpleRadialGradient()
+        {
+            var gradient = RadialGradient("radial-gradient(blue, red)");
+            Assert.AreEqual(2, gradient.GradientStops.Count);
+            Assert.AreEqual(0.0, gradient.GradientStops[0].Offset);
+            Assert.AreEqual(1.0, gradient.GradientStops[1].Offset);
+        }
+
+    }
+}

FancyWM.ThemeEngine/Extensions/CustomDeclarationFactory.cs

@@ -0,0 +1,36 @@
+using System.Diagnostics;
+
+using AngleSharp;
+using AngleSharp.Css;
+using AngleSharp.Css.Converters;
+using AngleSharp.Css.Values;
+
+namespace FancyWM.ThemeEngine.Extensions
+{
+    internal static class CustomDeclarationFactory
+    {
+        public static IConfiguration WithCustomDeclarationFactory(this IConfiguration config)
+        {
+            var factory = config.Services
+                       .OfType<DefaultDeclarationFactory>()
+                       .First();
+
+            try { factory.Unregister(PropertyNames.Filter); } catch { }
+
+            var converter = ValueConverters.Or(
+                new DropShadowConverter(),
+                new StandardValueConverter(new Constant<object>(CssKeywords.None, null!))
+            );
+
+            factory.Register(PropertyNames.Filter, new DeclarationInfo(
+                PropertyNames.Filter,
+                converter,
+                PropertyFlags.Animatable,
+                new Constant<object>(CssKeywords.None, null!)
+            ));
+
+            Debug.Assert(factory.Create(PropertyNames.Filter).Flags == PropertyFlags.Animatable);
+            return config;
+        }
+    }
+}

FancyWM.ThemeEngine/Extensions/DropShadowConverter.cs

@@ -0,0 +1,71 @@
+using AngleSharp.Css;
+using AngleSharp.Css.Dom;
+using AngleSharp.Css.Parser;
+using AngleSharp.Css.Values;
+using AngleSharp.Text;
+
+namespace FancyWM.ThemeEngine.Extensions
+{
+    public sealed class CssDropShadowFilterValue : ICssValue
+    {
+        public const string FunctionName = "drop-shadow";
+        public required string CssText { get; init; }
+        public ICssValue? OffsetX { get; init; }
+        public ICssValue? OffsetY { get; init; }
+        public ICssValue? BlurRadius { get; init; }
+        public Color? Color { get; init; }
+    }
+
+    public sealed class DropShadowConverter : IValueConverter
+    {
+        public ICssValue? Convert(StringSource source)
+        {
+            var pos = source.Index;
+
+            var ident = source.ParseIdent();
+            if (ident == null || !ident.Isi(CssDropShadowFilterValue.FunctionName) || source.Current != Symbols.RoundBracketOpen)
+            {
+                source.BackTo(pos);
+                return null;
+            }
+
+            source.SkipCurrentAndSpaces();
+
+            var offsetX = source.ParseLength();
+            if (offsetX == null) { source.BackTo(pos); return null; }
+            source.SkipSpacesAndComments();
+
+            var offsetY = source.ParseLength();
+            if (offsetY == null) { source.BackTo(pos); return null; }
+            source.SkipSpacesAndComments();
+
+            ICssValue? blur = source.ParseLength();
+            if (blur != null) source.SkipSpacesAndComments();
+
+            Color? color = null;
+            if (source.Current != Symbols.RoundBracketClose)
+            {
+                color = source.ParseColor();
+                source.SkipSpacesAndComments();
+            }
+
+            if (source.Current != Symbols.RoundBracketClose)
+            {
+                source.BackTo(pos);
+                return null;
+            }
+
+            source.SkipCurrentAndSpaces();
+            return new CssDropShadowFilterValue
+            {
+                CssText = source.Content,
+                OffsetX = offsetX,
+                OffsetY = offsetY,
+                BlurRadius = blur,
+                Color = color,
+            };
+        }
+
+        public ICssValue? Collect(IEnumerable<ICssProperty> properties) => null;
+    }
+}