From c297b3fb0f2c46f920d0903be0c16f5fe3f7f8d0 Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Sun, 1 Nov 2026 15:53:40 -0800
Subject: [PATCH] =?UTF-8?q?ui(properties):=20answer=20the=20visual=20revie?=
 =?UTF-8?q?w=20=E2=80=94=20quiet=20actions,=20real=20hint=20tone,=20divide?=
 =?UTF-8?q?rs,=20legible=20disabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review findings from a screenshot of the Stream Alerts panel, each addressed:

- "Reset to built-in" and "Browse…" were YtButton-derived (white, semi-bold, 13px), so a reset
  action outranked the section header. Property-panel actions now use PropertyButton: bordered,
  11px, normal weight, OnSurface text.
- Explanation text and field labels were the same muted blue-gray. PropertyHint is now
  OnSurfaceDisabled, one clear step below a label.
- Groups inside a category ran together. PropertyDivider (1px OutlineVariant) separates Video,
  Sound byte and Message ticker.
- The disabled loop switch was near-invisible. Disabled now keeps the label at OnSurfaceVariant
  and dims the whole control to 0.55 — readable, obviously inactive.
- Switch "on" was full-strength accent, shouting about static state. The track now sits at 0.6
  opacity when on, which also stops it competing with the slider's accent fill.

No new palette entries: every change uses an existing token, so DESIGN.md stays the one colour
source. Release 0 warnings; token and typography tests pass.
---
 Controls/LeftPanel.xaml | 73 +++++++++++++++++++++--------------------
 Themes/Controls.xaml    | 50 ++++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 39 deletions(-)

diff --git a/Controls/LeftPanel.xaml b/Controls/LeftPanel.xaml
index ad78bd4..e55a8ea 100644
--- a/Controls/LeftPanel.xaml
+++ b/Controls/LeftPanel.xaml
@@ -291,7 +291,7 @@
                             <TextBlock Text="{Binding WebcamLockAlert}" Foreground="{StaticResource Brush.OnError}" FontSize="11"
                                        TextWrapping="Wrap"/>
                             <Button Content="Retry" Command="{Binding RetryWebcamLockCommand}"
-                                    Style="{StaticResource YtButtonSecondary}" Padding="10,2"
+                                    Style="{StaticResource PropertyButton}" Padding="10,2"
                                     HorizontalAlignment="Right" Margin="0,6,0,0"/>
                         </StackPanel>
                     </Border>
@@ -333,7 +333,7 @@
                                     <TextBlock Text="Shape" Style="{StaticResource PropertyHeader}"/>
                                     <StackPanel Orientation="Horizontal" Margin="10,0,0,4">
                                         <Button Content="{Binding SelectedElement.MirrorButtonText}"
-                                                Style="{StaticResource YtButtonSecondary}" Padding="10,4"
+                                                Style="{StaticResource PropertyButton}" Padding="10,4"
                                                 Click="MirrorButton_Click"/>
                                         <ToggleButton Style="{StaticResource SegmentToggle}" Padding="10,4" Margin="8,0,0,0"
                                                       IsChecked="{Binding SelectedElement.IsRectShape, Mode=TwoWay}">
@@ -369,8 +369,7 @@
                                                 Value="{Binding SelectedElement.BlurAmount, Mode=TwoWay}"
                                                 VerticalAlignment="Center"/>
                                     </DockPanel>
-                                    <TextBlock Text="Strongest blur wins where they overlap — layers cannot add up."
-                                               Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="10,2,0,0"/>
+                                    <TextBlock Text="Strongest blur wins where they overlap — layers cannot add up." Style="{StaticResource PropertyHint}"/>
                                 </StackPanel>
 
                                 <!-- The drag hint sits under the shape row — indented, so the
@@ -758,45 +757,24 @@
                             <!-- Stream Alerts config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsAlertBox, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
                                 <TextBlock Text="Stream Alerts" Style="{StaticResource PropertyHeader}"/>
-                                <TextBlock Text="The built-in clip plays on every alert (Super Chat, membership…) unless a custom video is picked."
-                                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="0,0,0,6"/>
+                                <TextBlock Text="The built-in clip plays on every alert (Super Chat, membership…) unless a custom video is picked." Style="{StaticResource PropertyHint}"/>
 
-                                <DockPanel Margin="0,0,0,4">
+                                <TextBlock Text="Video" Style="{StaticResource PropertySubHeader}"/>
+                                <DockPanel Margin="10,0,0,4">
                                     <!-- Test alert (creator ruling 2026-11-01): plays the clip this box
                                          would play — custom if one is set, built-in otherwise. -->
                                     <Button DockPanel.Dock="Right" Content="▶  Test alert"
                                             Command="{Binding TestAlertCommand}"
-                                            Style="{StaticResource YtButtonSecondary}"
+                                            Style="{StaticResource PropertyButton}"
                                             Padding="8,2" FontSize="11" VerticalAlignment="Center"
                                             ToolTip="Play the alert here, exactly as a viewer would trigger it"/>
-                                    <TextBlock DockPanel.Dock="Left" Text="Built-in video" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Built-in" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
                                     <ToggleButton Style="{StaticResource PillToggle}"
                                                   IsChecked="{Binding SelectedElement.AlertUseDefaultVideo, Mode=TwoWay}"
                                                   HorizontalAlignment="Left"/>
                                 </DockPanel>
 
-                                <!-- Sound byte (creator ruling 2026-11-01): plays WITH the alert clip, on
-                                     the default device, so it is audible and shows in the desktop meter.
-                                     The video itself always plays once to completion. -->
-                                <TextBlock Text="Sound byte" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
-                                           FontWeight="SemiBold" Margin="0,6,0,2"/>
-                                <DockPanel Margin="0,0,0,2">
-                                    <Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding BrowseAlertAudioCommand}"
-                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
-                                            Padding="8,2" Margin="6,0,0,0" FontSize="11"/>
-                                    <Button DockPanel.Dock="Right" Content="✕" Command="{Binding ClearAlertAudioCommand}"
-                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
-                                            Padding="7,2" FontSize="11" ToolTip="Remove the sound byte"
-                                            Visibility="{Binding SelectedElement.HasAlertAudio, Converter={StaticResource BoolToVis}}"/>
-                                    <TextBox Text="{Binding SelectedElement.AlertAudioFileDisplay, Mode=OneWay}"
-                                             Style="{StaticResource YtTextBoxCompact}" IsReadOnly="True"
-                                             Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
-                                </DockPanel>
-                                <CheckBox Content="Loop the sound until the video ends" Style="{StaticResource PropertyPillCheck}" Margin="0,2,0,6"
-                                          IsChecked="{Binding SelectedElement.AlertAudioLoop, Mode=TwoWay}"
-                                          IsEnabled="{Binding SelectedElement.HasAlertAudio}"/>
-
-                                <Grid Margin="0,0,0,4"
+                                <Grid Margin="10,0,0,4"
                                       Visibility="{Binding SelectedElement.AlertUseDefaultVideo, Converter={StaticResource InverseBoolToVis}}">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="*"/>
@@ -806,16 +784,39 @@
                                              Style="{StaticResource YtTextBoxCompact}"
                                              IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                                     <Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseAlertVideoCommand}"
-                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
+                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
                                             Margin="4,0,0,0" Padding="8,2"/>
                                 </Grid>
 
                                 <Button Content="Reset to built-in" Command="{Binding ResetAlertVideoCommand}"
-                                        CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
-                                        HorizontalAlignment="Left" Padding="8,2" Margin="0,0,4,0"/>
+                                        CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
+                                        HorizontalAlignment="Left" Padding="8,2" Margin="10,0,0,0"/>
                                 <TextBlock Text="Custom clips are referenced from disk — never stored in the layout."
-                                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="0,4,0,6"/>
+                                           Style="{StaticResource PropertyHint}"/>
 
+                                <!-- Sound byte: plays WITH the clip, on the default device, so it is both
+                                     audible and visible in the desktop meter. -->
+                                <Border Style="{StaticResource PropertyDivider}"/>
+                                <TextBlock Text="Sound byte" Style="{StaticResource PropertySubHeader}"/>
+                                <DockPanel Margin="10,0,0,2">
+                                    <Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding BrowseAlertAudioCommand}"
+                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
+                                            Padding="8,2" Margin="6,0,0,0" FontSize="11"/>
+                                    <Button DockPanel.Dock="Right" Content="✕" Command="{Binding ClearAlertAudioCommand}"
+                                            CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
+                                            Padding="7,2" FontSize="11" ToolTip="Remove the sound byte"
+                                            Visibility="{Binding SelectedElement.HasAlertAudio, Converter={StaticResource BoolToVis}}"/>
+                                    <TextBox Text="{Binding SelectedElement.AlertAudioFileDisplay, Mode=OneWay}"
+                                             Style="{StaticResource YtTextBoxCompact}" IsReadOnly="True"
+                                             Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
+                                </DockPanel>
+                                <CheckBox Content="Loop until the video ends" Style="{StaticResource PropertyPillCheck}" Margin="10,4,0,2"
+                                          IsChecked="{Binding SelectedElement.AlertAudioLoop, Mode=TwoWay}"
+                                          IsEnabled="{Binding SelectedElement.HasAlertAudio}"/>
+                                <TextBlock Text="The video always plays once, to completion. The sound may loop under it."
+                                           Style="{StaticResource PropertyHint}"/>
+
+                                <Border Style="{StaticResource PropertyDivider}"/>
                                 <DockPanel Margin="0,0,0,4">
                                     <TextBlock DockPanel.Dock="Left" Text="Message ticker" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
                                     <ToggleButton Style="{StaticResource PillToggle}"
@@ -868,7 +869,7 @@
                                                   Style="{StaticResource YtTextBoxCompact}"
                                                   IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                                         <Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseBackgroundCommand}"
-                                                Style="{StaticResource YtButtonSecondary}" Margin="4,0,0,0" Padding="8,2"/>
+                                                Style="{StaticResource PropertyButton}" Margin="4,0,0,0" Padding="8,2"/>
                                     </Grid>
                                     <TextBlock Text="{Binding BackgroundSizeMismatchText}"
                                                Foreground="{StaticResource Brush.Error}" FontSize="11" TextWrapping="Wrap"
diff --git a/Themes/Controls.xaml b/Themes/Controls.xaml
index 3aa4fdc..fd2412b 100644
--- a/Themes/Controls.xaml
+++ b/Themes/Controls.xaml
@@ -177,12 +177,52 @@
     </Style>
 
     <Style x:Key="PropertyHint" TargetType="TextBlock">
-        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
         <Setter Property="FontSize" Value="10"/>
         <Setter Property="TextWrapping" Value="Wrap"/>
         <Setter Property="Margin" Value="10,0,0,6"/>
     </Style>
 
+    <!-- A property-panel action: bordered, quiet, 11px normal weight. The accent-filled YtButton
+         (white semi-bold 13px) made secondary actions like "Reset to built-in" the loudest text in
+         the panel, which is backwards. -->
+    <Style x:Key="PropertyButton" TargetType="Button">
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="FontWeight" Value="Normal"/>
+        <Setter Property="Padding" Value="8,3"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
+                            CornerRadius="{StaticResource Radius.Sm}"
+                            Padding="{TemplateBinding Padding}">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
+                        </Trigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
+                            <Setter TargetName="Bd" Property="Opacity" Value="0.6"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- Hairline between groups inside one properties category. -->
+    <Style x:Key="PropertyDivider" TargetType="Border">
+        <Setter Property="Height" Value="1"/>
+        <Setter Property="Background" Value="{StaticResource Brush.OutlineVariant}"/>
+        <Setter Property="Margin" Value="0,10,0,8"/>
+    </Style>
+
     <!-- Checkboxes are pill switches (creator ruling 2026-11-01): a 14px box in a properties panel
          reads as a form, and a switch reads as a setting. IsChecked semantics are untouched, so
          every existing binding still works. -->
@@ -216,6 +256,8 @@
                         <Trigger Property="IsChecked" Value="True">
                             <Setter TargetName="Track" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
                             <Setter TargetName="Track" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
+                            <!-- 0.6 keeps the state readable without the neon fill the review flagged. -->
+                            <Setter TargetName="Track" Property="Opacity" Value="0.6"/>
                             <Setter TargetName="Thumb" Property="Fill" Value="{StaticResource Brush.OnAccent}"/>
                             <Trigger.EnterActions>
                                 <BeginStoryboard>
@@ -235,8 +277,10 @@
                             </Trigger.ExitActions>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
-                            <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
-                            <Setter TargetName="Track" Property="Opacity" Value="0.5"/>
+                            <!-- Legible-but-dim, not invisible: the label stays readable and the
+                                 track drops back so "disabled" reads as a state, not as a bug. -->
+                            <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
+                            <Setter Property="Opacity" Value="0.55"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>