From 0275e30103636278073e490342068fe07b323efe Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Fri, 30 Oct 2026 07:56:02 -0700
Subject: [PATCH] =?UTF-8?q?design:=20shell=20to=20tokens=20=E2=80=94=20top?=
 =?UTF-8?q?=20bar,=20window,=20scene=20strip=20(surface=202=20of=20the=20s?=
 =?UTF-8?q?weep)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Telemetry readouts (bitrate, FPS, dropped, live duration) now wear JetBrains Mono, so the
  tabular digits stop shifting width as values change — the first place the bundled mono face
  is actually visible.
- Scene tiles: staged = blue (selection), live/program = red. Both were orange, which meant the
  same colour marked two different states and neither was the live colour.
- EDIT toggle: "on" is the interactive accent, not orange. Orange now means warning only.
- Wordmark's two-tone accent, avatar chrome, readout panel, tile borders and the program badge
  all resolve from tokens.

Guard list extended: MainWindow.xaml, Controls/TopBar.xaml, Controls/SceneThumbnailStrip.xaml —
these three can no longer regress to a hardcoded colour.
---
 Controls/SceneThumbnailStrip.xaml | 14 +++++++-------
 Controls/TopBar.xaml              | 20 ++++++++++----------
 MainWindow.xaml                   | 24 ++++++++++++------------
 ytLive.Tests/DesignTokensTests.cs |  5 +++--
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/Controls/SceneThumbnailStrip.xaml b/Controls/SceneThumbnailStrip.xaml
index f0295c9..7b16a35 100644
--- a/Controls/SceneThumbnailStrip.xaml
+++ b/Controls/SceneThumbnailStrip.xaml
@@ -1,7 +1,7 @@
 <UserControl x:Class="ytLive.Controls.SceneThumbnailStrip"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Border Background="#0d1117" CornerRadius="4" Padding="4">
+    <Border Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="4" Padding="4">
         <ItemsControl ItemsSource="{Binding Scenes}" HorizontalAlignment="Center" VerticalAlignment="Center">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
@@ -16,26 +16,26 @@
                             MouseLeftButtonDown="Thumbnail_MouseLeftButtonDown">
                         <Border.Style>
                             <Style TargetType="Border">
-                                <Setter Property="BorderBrush" Value="#333344"/>
+                                <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
                                 <Style.Triggers>
                                     <DataTrigger Binding="{Binding IsStaged}" Value="True">
-                                        <Setter Property="BorderBrush" Value="#ff8c3a"/>
+                                        <Setter Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
                                     </DataTrigger>
                                     <DataTrigger Binding="{Binding IsLive}" Value="True">
-                                        <Setter Property="BorderBrush" Value="#ff8c3a"/>
+                                        <Setter Property="BorderBrush" Value="{StaticResource Brush.Primary}"/>
                                     </DataTrigger>
                                 </Style.Triggers>
                             </Style>
                         </Border.Style>
                         <Grid>
-                            <Border CornerRadius="3" Background="#0a0a1a" ClipToBounds="True">
+                            <Border CornerRadius="3" Background="{StaticResource Brush.SurfaceContainerLowest}" ClipToBounds="True">
                                 <Image Source="{Binding Snapshot}"
                                        Stretch="UniformToFill"
                                        RenderOptions.BitmapScalingMode="LowQuality"/>
                             </Border>
 
                             <Border HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6" Padding="8,3"
-                                    CornerRadius="3" Background="#ff8c3a">
+                                    CornerRadius="3" Background="{StaticResource Brush.Primary}">
                                 <Border.Style>
                                     <Style TargetType="Border">
                                         <Setter Property="Visibility" Value="Collapsed"/>
@@ -47,7 +47,7 @@
                                     </Style>
                                 </Border.Style>
                                 <StackPanel Orientation="Horizontal">
-                                    <Ellipse Width="8" Height="8" Fill="#ff5451" VerticalAlignment="Center" Margin="0,0,5,0">
+                                    <Ellipse Width="8" Height="8" Fill="{StaticResource Brush.Primary}" VerticalAlignment="Center" Margin="0,0,5,0">
                                         <Ellipse.Triggers>
                                             <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                                 <BeginStoryboard>
diff --git a/Controls/TopBar.xaml b/Controls/TopBar.xaml
index cbaac03..1d4fb0b 100644
--- a/Controls/TopBar.xaml
+++ b/Controls/TopBar.xaml
@@ -23,9 +23,9 @@
                     </ControlTemplate>
                 </Button.Template>
                 <TextBlock FontSize="22" FontWeight="Bold" VerticalAlignment="Center">
-                    <Run Text="LlamaCas" Foreground="#e0e0e0"/><Run Text="ty" Foreground="#e94560"/><Run
+                    <Run Text="LlamaCas" Foreground="{StaticResource Brush.OnSurface}"/><Run Text="ty" Foreground="{StaticResource Brush.Tertiary}"/><Run
                         x:Name="BuildIdStamp" Text="{x:Static helpers:BuildStamp.Label}" FontSize="9"
-                        BaselineAlignment="Superscript" Foreground="#8888aa"
+                        BaselineAlignment="Superscript" Foreground="{StaticResource Brush.OnSurfaceVariant}"
                         ToolTipService.ToolTip="{x:Static helpers:BuildStamp.Label}"/><Run Text=" " FontSize="4"/>
                 </TextBlock>
             </Button>
@@ -44,7 +44,7 @@
                     </ContextMenu>
                 </Button.ContextMenu>
                 <Path Data="M19.43,12.98c0.04,-0.32 0.07,-0.65 0.07,-0.98c0,-0.33 -0.03,-0.66 -0.07,-0.98l2.11,-1.65c0.19,-0.15 0.24,-0.42 0.12,-0.64l-2,-3.46c-0.12,-0.22 -0.38,-0.31 -0.61,-0.22l-2.49,1c-0.52,-0.4 -1.08,-0.73 -1.69,-0.98l-0.38,-2.65C14.46,2.18 14.25,2 14,2h-4c-0.25,0 -0.46,0.18 -0.49,0.42l-0.38,2.65c-0.61,0.25 -1.17,0.59 -1.69,0.98l-2.49,-1c-0.23,-0.09 -0.49,0 -0.61,0.22l-2,3.46c-0.13,0.22 -0.07,0.49 0.12,0.64l2.11,1.65c-0.04,0.32 -0.07,0.65 -0.07,0.98c0,0.33 0.03,0.66 0.07,0.98l-2.11,1.65c-0.19,0.15 -0.24,0.42 -0.12,0.64l2,3.46c0.12,0.22 0.38,0.31 0.61,0.22l2.49,-1c0.52,0.4 1.08,0.73 1.69,0.98l0.38,2.65c0.03,0.24 0.24,0.42 0.49,0.42h4c0.25,0 0.46,-0.18 0.49,-0.42l0.38,-2.65c0.61,-0.25 1.17,-0.59 1.69,-0.98l2.49,1c0.23,0.09 0.49,0 0.61,-0.22l2,-3.46c0.12,-0.22 0.07,-0.49 -0.12,-0.64L19.43,12.98zM12,15.5c-1.93,0 -3.5,-1.57 -3.5,-3.5c0,-1.93 1.57,-3.5 3.5,-3.5c1.93,0 3.5,1.57 3.5,3.5C15.5,13.93 13.93,15.5 12,15.5z"
-                      Fill="#a0a0b0" Width="18" Height="18" Stretch="Uniform"/>
+                      Fill="{StaticResource Brush.OnSurfaceVariant}" Width="18" Height="18" Stretch="Uniform"/>
             </Button>
         </StackPanel>
 
@@ -57,15 +57,15 @@
             <!-- EDIT: explicit toggle. Blue = off (chat), orange = on (layers/properties). -->
             <ToggleButton IsChecked="{Binding EditingActive, Mode=TwoWay}" Content="EDIT"
                           Cursor="Hand" Height="32" Padding="14,0" Margin="0,0,24,0" VerticalAlignment="Center"
-                          FontWeight="Bold" FontSize="12" Foreground="#0b1326" BorderThickness="0">
+                          FontWeight="Bold" FontSize="12" Foreground="{StaticResource Brush.OnTertiary}" BorderThickness="0">
                 <ToggleButton.Template>
                     <ControlTemplate TargetType="ToggleButton">
-                        <Border x:Name="EditBody" Background="#38bdf8" CornerRadius="4" Padding="{TemplateBinding Padding}">
+                        <Border x:Name="EditBody" Background="{StaticResource Brush.Tertiary}" CornerRadius="4" Padding="{TemplateBinding Padding}">
                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsChecked" Value="True">
-                                <Setter TargetName="EditBody" Property="Background" Value="#ff8c3a"/>
+                                <Setter TargetName="EditBody" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
@@ -76,7 +76,7 @@
                  family — segments host, Start/Go Live, and Test all sit at 32. -->
             <StackPanel Orientation="Horizontal"
                         Visibility="{Binding ShowIdleWorld, Converter={StaticResource BoolToVis}}">
-                <Border Background="#0f1622" CornerRadius="4" Padding="2" Height="32" VerticalAlignment="Center">
+                <Border Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="4" Padding="2" Height="32" VerticalAlignment="Center">
                     <StackPanel Orientation="Horizontal">
                         <ToggleButton Style="{StaticResource SegmentToggle}"
                                       IsChecked="{Binding RecordPillOn}">
@@ -135,11 +135,11 @@
                         <MenuItem Header="Logout" Command="{Binding LogoutCommand}"/>
                     </ContextMenu>
                 </Button.ContextMenu>
-                <Border Width="40" Height="40" CornerRadius="20" Background="#16213e"
-                        ClipToBounds="True" BorderBrush="#3a4a66" BorderThickness="1">
+                <Border Width="40" Height="40" CornerRadius="20" Background="{StaticResource Brush.SurfaceContainer}"
+                        ClipToBounds="True" BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1">
                     <Grid>
                         <Image x:Name="AvatarImage" Stretch="UniformToFill"/>
-                        <TextBlock x:Name="AvatarInitial" Foreground="#e0e0e0" FontSize="20"
+                        <TextBlock x:Name="AvatarInitial" Foreground="{StaticResource Brush.OnSurface}" FontSize="20"
                                    FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"
                                    Visibility="Collapsed"/>
                     </Grid>
diff --git a/MainWindow.xaml b/MainWindow.xaml
index c8edca6..a5959a7 100644
--- a/MainWindow.xaml
+++ b/MainWindow.xaml
@@ -12,7 +12,7 @@
         Title="{Binding WindowTitle}" Height="1040" Width="1920"
         MinWidth="1366" MinHeight="768"
         Icon="/ytLive;component/Assets/llamacasty-icon.png"
-        Background="#1a1a2e"
+        Background="{StaticResource Brush.Background}"
         FontFamily="{StaticResource FontFamily.Sans}"
         WindowStartupLocation="Manual"
         Closing="MainWindow_Closing"
@@ -39,7 +39,7 @@
         <DrawingImage x:Key="LiveOverlay">
             <DrawingImage.Drawing>
                 <DrawingGroup>
-                    <GeometryDrawing Brush="#e94560">
+                    <GeometryDrawing Brush="{StaticResource Brush.Tertiary}">
                         <GeometryDrawing.Geometry>
                             <EllipseGeometry Center="8,8" RadiusX="8" RadiusY="8"/>
                         </GeometryDrawing.Geometry>
@@ -82,7 +82,7 @@
             </Grid.ColumnDefinitions>
 
             <!-- STREAM READOUTS (top-left cell, above the layers) + resolution -->
-            <Border Grid.Row="0" Grid.Column="0" Background="#0d1117" CornerRadius="4" Padding="10,8" Margin="0,0,8,0">
+            <Border Grid.Row="0" Grid.Column="0" Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="4" Padding="10,8" Margin="0,0,8,0">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto"/>
@@ -97,17 +97,17 @@
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
 
-                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Bitrate" Foreground="#94a3b8" FontSize="12" Margin="0,0,12,2"/>
-                    <TextBlock Grid.Row="0" Grid.Column="1" Foreground="#dae2fd" FontSize="13" HorizontalAlignment="Right" Margin="0,0,0,2">
+                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Bitrate" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" Margin="0,0,12,2"/>
+                    <TextBlock Grid.Row="0" Grid.Column="1" Foreground="{StaticResource Brush.OnSurface}" FontSize="13" FontFamily="{StaticResource FontFamily.Mono}" HorizontalAlignment="Right" Margin="0,0,0,2">
                         <Run Text="{Binding CurrentHealth.CurrentBitrate, Mode=OneWay, StringFormat={}{0:0.0}}"/><Run Text=" Mbps"/>
                     </TextBlock>
 
-                    <TextBlock Grid.Row="1" Grid.Column="0" Text="FPS" Foreground="#94a3b8" FontSize="12" Margin="0,0,12,2"/>
+                    <TextBlock Grid.Row="1" Grid.Column="0" Text="FPS" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" Margin="0,0,12,2"/>
                     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding CurrentHealth.FPS, Mode=OneWay, StringFormat={}{0:0}}"
-                               Foreground="#dae2fd" FontSize="13" HorizontalAlignment="Right" Margin="0,0,0,2"/>
+                               Foreground="{StaticResource Brush.OnSurface}" FontSize="13" FontFamily="{StaticResource FontFamily.Mono}" HorizontalAlignment="Right" Margin="0,0,0,2"/>
 
-                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Dropped" Foreground="#94a3b8" FontSize="12" Margin="0,0,12,2"/>
-                    <TextBlock Grid.Row="2" Grid.Column="1" FontSize="13" HorizontalAlignment="Right" Margin="0,0,0,2"
+                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Dropped" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" Margin="0,0,12,2"/>
+                    <TextBlock Grid.Row="2" Grid.Column="1" FontSize="13" FontFamily="{StaticResource FontFamily.Mono}" HorizontalAlignment="Right" Margin="0,0,0,2"
                                Foreground="{Binding CurrentHealth.DroppedFrames, Converter={StaticResource DroppedToBrush}}">
                         <TextBlock.Text>
                             <MultiBinding Converter="{StaticResource DroppedPercent}">
@@ -118,12 +118,12 @@
                         </TextBlock.Text>
                     </TextBlock>
 
-                    <TextBlock Grid.Row="3" Grid.Column="0" Text="Live:" Foreground="#94a3b8" FontSize="12" Margin="0,0,12,2"/>
+                    <TextBlock Grid.Row="3" Grid.Column="0" Text="Live:" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" Margin="0,0,12,2"/>
                     <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding CurrentHealth.StreamDuration, Mode=OneWay, StringFormat={}{0:hh\:mm\:ss}}"
-                               Foreground="#ff8c3a" FontSize="13" FontWeight="SemiBold" HorizontalAlignment="Right" Margin="0,0,0,2"/>
+                               Foreground="{StaticResource Brush.Attention}" FontSize="13" FontFamily="{StaticResource FontFamily.Mono}" FontWeight="SemiBold" HorizontalAlignment="Right" Margin="0,0,0,2"/>
 
                     <TextBlock Grid.Row="4" Grid.ColumnSpan="2" Text="{Binding CurrentHealth.HealthMessage}"
-                               Foreground="#ff8c3a" FontSize="12" TextWrapping="Wrap" Margin="0,0,0,6"/>
+                               Foreground="{StaticResource Brush.Attention}" FontSize="12" TextWrapping="Wrap" Margin="0,0,0,6"/>
 
                     <ComboBox Grid.Row="5" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Style="{StaticResource YtComboBox}"
                               ItemsSource="{Binding QualityOptions}"
diff --git a/ytLive.Tests/DesignTokensTests.cs b/ytLive.Tests/DesignTokensTests.cs
index d87fb3d..1b5ea86 100644
--- a/ytLive.Tests/DesignTokensTests.cs
+++ b/ytLive.Tests/DesignTokensTests.cs
@@ -74,14 +74,15 @@ public class DesignTokensTests
         // The sweep converts one surface per commit; each adds its file here, so every step is
         // guarded on its own instead of waiting for a global grep at the end. Pure white and black
         // are allowed (gloss highlights, knockout masks) — everything else must be a token.
-        string[] converted = { "Themes/Controls.xaml" };
+        string[] converted = { "Themes/Controls.xaml", "MainWindow.xaml", "Controls/TopBar.xaml", "Controls/SceneThumbnailStrip.xaml" };
 
         foreach (var file in converted)
         {
             var text = SourceAssert.Text(file.Split('/'));
             var raw = Regex.Matches(text, @"#[0-9a-fA-F]{6,8}")
                 .Select(m => m.Value)
-                .Where(v => v is not "#ffffff" and not "#000000" and not "#FFFFFF" and not "#000000")
+                .Where(v => !v.Equals("#ffffff", StringComparison.OrdinalIgnoreCase)
+                         && !v.Equals("#000000", StringComparison.OrdinalIgnoreCase))
                 .Distinct(StringComparer.OrdinalIgnoreCase)
                 .ToList();