Improve theme and WelcomeDemo page

Author: xoofx

samples/ControlsDemo/ControlsDemoApp.cs

@@ -49,6 +49,8 @@ public static Visual Build(out Func<TerminalLoopResult> onUpdate)
                 sidebarList)
             .Spacing(1);
 
+        var themeState = new State<Theme>(Theme.Default);
+
         var page = new ComputedVisual(() =>
         {
             var id = selectedDemoId.Value;
@@ -64,13 +66,13 @@ public static Visual Build(out Func<TerminalLoopResult> onUpdate)
 
             return demo is null
                 ? new Center().Content("No demos found.")
-                : DemoPage.Build(demo, new DemoContext { NavigateToDemoId = NavigateToId, Log = _ => { }, Runtime = runtime });
+                : DemoPage.Build(demo, new DemoContext { NavigateToDemoId = NavigateToId, Log = _ => { }, Runtime = runtime, Theme = themeState });
         }).Pad(1).HorizontalAlignment(HorizontalAlignment.Stretch).VerticalAlignment(VerticalAlignment.Stretch);
 
         return new DockLayout()
             .Content(new HSplitter(sidebar, page).Ratio(0.16))
             .Bottom(new Footer().Left("Tab focus | Mouse | Resize").Right("F12 debug | Ctrl+Q quit"))
-            .Style(DemoThemes.Dark);
+            .Update(x => x.Set(Theme.Key, themeState.Value));
     }
 
     private static Visual BuildSidebarList(IReadOnlyList<IControlsDemo> demos, State<string> selectedDemoId, string query)

samples/ControlsDemo/DemoContext.cs

@@ -1,3 +1,5 @@
+using XenoAtom.Terminal.UI.Styling;
+
 namespace XenoAtom.Terminal.UI.ControlsDemo;
 
 public sealed class DemoContext
@@ -7,4 +9,6 @@ public sealed class DemoContext
     public required Action<string> NavigateToDemoId { get; init; }
 
     public required DemoRuntime Runtime { get; init; }
+
+    public required State<Theme> Theme { get; init; }
 }

samples/ControlsDemo/DemoPage.cs

@@ -20,6 +20,7 @@ public static Visual Build(IControlsDemo demo, DemoContext context)
             Log = log.Add,
             NavigateToDemoId = context.NavigateToDemoId,
             Runtime = context.Runtime,
+            Theme = context.Theme
         });
 
         var link = BuildSourceLink(meta, log);

samples/ControlsDemo/Demos/WelcomeDemo.cs

@@ -18,26 +18,12 @@ public override Visual Build(DemoContext context)
     {
         _ = context;
 
-        var banner = new TextFiglet("Welcome")
-            .Font(FigletPredefinedFont.Slant)
-            .LetterSpacing(1)
-            .TextAlignment(TextAlignment.Left);
-
-        var title = new Markup("[bold]XenoAtom.Terminal.UI[/]") { Wrap = false };
-
-        var hints = new Markup("""
-            [bold]Tips[/]
-            - Use the [bold]Search[/] box to filter controls and demos.
-            - Use [bold]Tab[/] to move focus and [bold]Mouse wheel[/] to scroll lists.
-            - Use [bold]Ctrl+Q[/] to quit.
-            """)
-        { Wrap = true };
+        var theme = context.Theme.Value;
 
         var spectrum = new Canvas()
             .MinHeight(6)
             .Painter(ctx =>
             {
-                var theme = DemoThemes.Dark;
                 var baseStyle = theme.BaseTextStyle();
                 var width = Math.Max(1, ctx.Bounds.Width);
                 var height = Math.Max(1, ctx.Bounds.Height);
@@ -63,18 +49,31 @@ public override Visual Build(DemoContext context)
                 }
             }).HorizontalAlignment(HorizontalAlignment.Stretch).VerticalAlignment(VerticalAlignment.Stretch);
 
+        var banner = new TextFiglet("Welcome")
+            .Font(FigletPredefinedFont.Slant)
+            .LetterSpacing(1)
+            .TextAlignment(TextAlignment.Left);
+            //.Style(new TextFigletStyle { TextStyle = Style.None.WithForeground(theme.Scheme?.Black ?? Colors.Black) | TextStyle.Bold });
+
+        var title = new Markup("[bold]XenoAtom.Terminal.UI[/]") { Wrap = false };
+
+        var hints = new Markup("""
+            [bold]Tips[/]
+            - Use the [bold]Search[/] box to filter controls and demos.
+            - Use [bold]Tab[/] to move focus and [bold]Mouse wheel[/] to scroll lists.
+            - Use [bold]Ctrl+Q[/] to quit.
+            """)
+        { Wrap = true };
+
+
         var schemePanel = BuildSchemePanel(DemoThemes.Dark);
 
         return new VStack(
-                banner,
+                new ZStack(spectrum, banner),
                 title,
                 new Rule(),
                 hints,
                 new Rule(),
-                new Group()
-                    .TopLeftText("Spectrum")
-                    .Padding(1)
-                    .Content(spectrum).VerticalAlignment(VerticalAlignment.Stretch).HorizontalAlignment(HorizontalAlignment.Stretch),
                 schemePanel)
             .Spacing(1);
     }
@@ -84,7 +83,7 @@ private static Visual BuildSchemePanel(Theme theme)
         var scheme = theme.Scheme;
         if (scheme is null)
         {
-            return (Visual)"[dim]No ColorScheme available for this theme.[/]";
+            return "[dim]No ColorScheme available for this theme.[/]";
         }
 
         var table = new Table()
@@ -126,29 +125,7 @@ void Add(string name, Color? color)
     private static Visual CreateSwatch(Theme theme, Color? color)
     {
         const int width = 10;
-        const int height = 1;
-
-        return new Canvas()
-            .MinWidth(width)
-            .MaxWidth(width)
-            .MinHeight(height)
-            .MaxHeight(height)
-            .Painter(ctx =>
-            {
-                var style = theme.BaseTextStyle();
-                if (color is { } c && c.Kind != ColorKind.Default)
-                {
-                    style = style.WithBackground(c);
-                }
-
-                for (var y = 0; y < ctx.Bounds.Height; y++)
-                {
-                    for (var x = 0; x < ctx.Bounds.Width; x++)
-                    {
-                        ctx.SetPixel(x, y, new Rune(' '), style);
-                    }
-                }
-            });
+        return new TextBlock(new string(' ', width)).Style(TextBlockStyle.Default with { Background = color });
     }
 
     private static string FormatColor(Color? color)

src/XenoAtom.Terminal.UI/Styling/Theme.cs

@@ -203,7 +203,7 @@ public static Theme FromScheme(ColorScheme scheme, ThemeSchemeBrightness brightn
             inputFill = Color.RgbA(128, 128, 128, 0x04);
             inputFillFocused = Color.RgbA(0, 0, 0, 0x28);
 
-            borderStroke = Color.RgbA(255, 255, 255, 0x26);
+            borderStroke = Color.RgbA(255, 255, 255, 0x80);
             focusBorderStroke = accentColor;
 
             selectionFill = accentColor.WithAlpha(0x3A);