gramps/LlamaCasty
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design: convert Themes/Controls.xaml to tokens (surface 1 of the sweep)

Browse Source 
The theme file that every control inherits is now token-driven: 73 hardcoded colours became
Brush.* references, and the two role changes the standard requires landed here first.

- Red leaves the chrome. The seven #e94560 sites (base button, focus borders, checked box and
  segment backgrounds, the selected-layer accent strip) were all interactive/selection roles,
  so they are blue now. Red stays for live/record only.
- The slider was green: its fill and gloss knob are blue now, with the track on
  SurfaceContainerLowest. The old green fill predated the standard.
- The pill toggle was ON = green, OFF = red — a settings control using the live colour. It is
  now OFF = neutral surface, ON = blue.
- Added scrim-soft/scrim-strong tokens (#22FFFFFF/#26FFFFFF) for the existing white washes, and
  Color.* resources for the two gradients (a GradientStop needs a Color, not a Brush).

Guard: DesignTokensTests gains Converted_surfaces_carry_no_raw_colour — a declared list of
converted files, so each sweep commit is guarded as it lands instead of waiting for one global
grep at the end. Pure white/black highlights are the only allowed literals.

No layout, spacing or behaviour change: this unit is colour only.
This commit is contained in:
gramps
2026-10-30 07:47:00 -07:00
parent 84c335a929
commit 4ef84f2a97
4 changed files with 96 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+2
View File
@@ -25,6 +25,8 @@
| `surface-bright` | `#31394d` | Lightest surface, rare use (strong hover) | | `surface-bright` | `#31394d` | Lightest surface, rare use (strong hover) |
| `outline` | `#334155` | Borders, dividers | | `outline` | `#334155` | Borders, dividers |
| `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments | | `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments |
| `scrim-soft` | `#22FFFFFF` | Hover/press wash over a surface (13% white) |
| `scrim-strong` | `#26FFFFFF` | Stronger wash — selected icon, dimmed image (15% white) |
### Text ### Text
Themes/Controls.xaml
+62 -82
View File
@@ -4,7 +4,7 @@
<!-- Base button style --> <!-- Base button style -->
<Style x:Key="YtButton" TargetType="Button"> <Style x:Key="YtButton" TargetType="Button">
<Setter Property="Background" Value="#e94560"/> <Setter Property="Background" Value="{StaticResource Brush.Tertiary}"/>
<Setter Property="Foreground" Value="White"/> <Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="13"/> <Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="FontWeight" Value="SemiBold"/>
@@ -39,12 +39,12 @@
</Style> </Style>
<Style x:Key="YtButtonSecondary" TargetType="Button" BasedOn="{StaticResource YtButton}"> <Style x:Key="YtButtonSecondary" TargetType="Button" BasedOn="{StaticResource YtButton}">
<Setter Property="Background" Value="#16213e"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainer}"/>
</Style> </Style>
<Style x:Key="IconButton" TargetType="Button"> <Style x:Key="IconButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#d0d0d0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="BorderThickness" Value="0"/> <Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="4"/> <Setter Property="Padding" Value="4"/>
<Setter Property="Cursor" Value="Hand"/> <Setter Property="Cursor" Value="Hand"/>
@@ -61,7 +61,7 @@
</Setter> </Setter>
<Style.Triggers> <Style.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#26ffffff"/> <Setter Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
</Trigger> </Trigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
@@ -90,9 +90,9 @@
</Style> </Style>
<Style x:Key="YtTextBox" TargetType="TextBox"> <Style x:Key="YtTextBox" TargetType="TextBox">
<Setter Property="Background" Value="#0f3460"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="BorderBrush" Value="#2a3a5e"/> <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="8,6"/> <Setter Property="Padding" Value="8,6"/>
<Setter Property="FontSize" Value="13"/> <Setter Property="FontSize" Value="13"/>
@@ -108,10 +108,10 @@
</Border> </Border>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#3d5076"/> <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Brush.SurfaceBright}"/>
</Trigger> </Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True"> <Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#e94560"/> <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
</Trigger> </Trigger>
<Trigger Property="IsEnabled" Value="False"> <Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Bd" Property="Opacity" Value="0.45"/> <Setter TargetName="Bd" Property="Opacity" Value="0.45"/>
@@ -136,7 +136,7 @@
sticks out of the dark panels, so every check box carries this style sticks out of the dark panels, so every check box carries this style
(the guard test in ytLive.Tests/PropertiesStyleTests.cs enforces it). --> (the guard test in ytLive.Tests/PropertiesStyleTests.cs enforces it). -->
<Style x:Key="YtCheckBox" TargetType="CheckBox"> <Style x:Key="YtCheckBox" TargetType="CheckBox">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="FontSize" Value="11"/> <Setter Property="FontSize" Value="11"/>
<Setter Property="Cursor" Value="Hand"/> <Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -150,7 +150,7 @@
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Border x:Name="Box" Grid.Column="0" Width="14" Height="14" CornerRadius="3" <Border x:Name="Box" Grid.Column="0" Width="14" Height="14" CornerRadius="3"
Background="#0f3460" BorderBrush="#2a3a5e" BorderThickness="1" Background="{StaticResource Brush.SurfaceContainerHigh}" BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
VerticalAlignment="Center"> VerticalAlignment="Center">
<Path x:Name="Tick" Data="M2.5,7.2 L5.8,10.5 L11.5,3.8" <Path x:Name="Tick" Data="M2.5,7.2 L5.8,10.5 L11.5,3.8"
Stroke="#ffffff" StrokeThickness="2" Stroke="#ffffff" StrokeThickness="2"
@@ -162,14 +162,14 @@
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Box" Property="BorderBrush" Value="#3d5076"/> <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.SurfaceBright}"/>
</Trigger> </Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True"> <Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Box" Property="BorderBrush" Value="#e94560"/> <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
</Trigger> </Trigger>
<Trigger Property="IsChecked" Value="True"> <Trigger Property="IsChecked" Value="True">
<Setter TargetName="Box" Property="Background" Value="#e94560"/> <Setter TargetName="Box" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
<Setter TargetName="Box" Property="BorderBrush" Value="#e94560"/> <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
<Setter TargetName="Tick" Property="Visibility" Value="Visible"/> <Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
</Trigger> </Trigger>
<Trigger Property="IsEnabled" Value="False"> <Trigger Property="IsEnabled" Value="False">
@@ -182,10 +182,10 @@
</Style> </Style>
<Style x:Key="YtComboBox" TargetType="ComboBox"> <Style x:Key="YtComboBox" TargetType="ComboBox">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="FontSize" Value="13"/> <Setter Property="FontSize" Value="13"/>
<Setter Property="Background" Value="#0f3460"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
<Setter Property="BorderBrush" Value="#2a3a5e"/> <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="8,6"/> <Setter Property="Padding" Value="8,6"/>
<Setter Property="MinHeight" Value="30"/> <Setter Property="MinHeight" Value="30"/>
@@ -195,7 +195,7 @@
<Setter Property="ItemContainerStyle"> <Setter Property="ItemContainerStyle">
<Setter.Value> <Setter.Value>
<Style TargetType="ComboBoxItem"> <Style TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="FontSize" Value="13"/> <Setter Property="FontSize" Value="13"/>
<Setter Property="Padding" Value="10,7"/> <Setter Property="Padding" Value="10,7"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -209,10 +209,10 @@
</Border> </Border>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True"> <Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#26ffffff"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
</Trigger> </Trigger>
<Trigger Property="IsSelected" Value="True"> <Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#1a3a66"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
<Setter Property="Foreground" Value="White"/> <Setter Property="Foreground" Value="White"/>
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
@@ -243,13 +243,13 @@
<ToggleButton.Template> <ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton"> <ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent"> <Grid Background="Transparent">
<Path x:Name="Chevron" Data="M0,0 L4,4 L8,0" Stroke="#8a93a8" <Path x:Name="Chevron" Data="M0,0 L4,4 L8,0" Stroke="{StaticResource Brush.OnSurfaceVariant}"
StrokeThickness="1.5" HorizontalAlignment="Right" StrokeThickness="1.5" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="0,0,10,0"/> VerticalAlignment="Center" Margin="0,0,10,0"/>
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Chevron" Property="Stroke" Value="#c8d0e0"/> <Setter TargetName="Chevron" Property="Stroke" Value="{StaticResource Brush.OnSurface}"/>
</Trigger> </Trigger>
<Trigger Property="IsEnabled" Value="False"> <Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.45"/> <Setter Property="Opacity" Value="0.45"/>
@@ -261,7 +261,7 @@
<Popup x:Name="PART_Popup" Placement="Bottom" AllowsTransparency="True" <Popup x:Name="PART_Popup" Placement="Bottom" AllowsTransparency="True"
PopupAnimation="Fade" StaysOpen="False" PopupAnimation="Fade" StaysOpen="False"
IsOpen="{TemplateBinding IsDropDownOpen}"> IsOpen="{TemplateBinding IsDropDownOpen}">
<Border Background="#16213e" BorderBrush="#2a3a5e" BorderThickness="1" <Border Background="{StaticResource Brush.SurfaceContainer}" BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
CornerRadius="5" Padding="2" Margin="0,4,0,0" CornerRadius="5" Padding="2" Margin="0,4,0,0"
SnapsToDevicePixels="True"> SnapsToDevicePixels="True">
<ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}" <ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}"
@@ -273,10 +273,10 @@
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Chrome" Property="Background" Value="#163a6b"/> <Setter TargetName="Chrome" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
</Trigger> </Trigger>
<Trigger Property="IsDropDownOpen" Value="True"> <Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="Chrome" Property="Background" Value="#163a6b"/> <Setter TargetName="Chrome" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
</Trigger> </Trigger>
<Trigger Property="IsEnabled" Value="False"> <Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Chrome" Property="Opacity" Value="0.45"/> <Setter TargetName="Chrome" Property="Opacity" Value="0.45"/>
@@ -304,13 +304,13 @@
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="Thumb"> <ControlTemplate TargetType="Thumb">
<Border x:Name="ThumbBd" Background="#2c3c5e" CornerRadius="4" Margin="2"/> <Border x:Name="ThumbBd" Background="{StaticResource Brush.SurfaceBright}" CornerRadius="4" Margin="2"/>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ThumbBd" Property="Background" Value="#3d5076"/> <Setter TargetName="ThumbBd" Property="Background" Value="{StaticResource Brush.SurfaceBright}"/>
</Trigger> </Trigger>
<Trigger Property="IsDragging" Value="True"> <Trigger Property="IsDragging" Value="True">
<Setter TargetName="ThumbBd" Property="Background" Value="#4a5f8a"/> <Setter TargetName="ThumbBd" Property="Background" Value="{StaticResource Brush.SurfaceBright}"/>
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>
@@ -352,32 +352,11 @@
</Style.Triggers> </Style.Triggers>
</Style> </Style>
<!-- Slider: slim and dimensional — gradient track, beveled fill, gloss-sphere <!-- Slider: slim track, solid interactive fill. Blue is the only interactive accent
thumb. The filled side sits on a 5px pill aligned with the track; the (DESIGN.md); the pre-standard green fill is gone. -->
click target stays the full track height. -->
<LinearGradientBrush x:Key="YtSliderTrackBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0f1b33" Offset="0"/>
<GradientStop Color="#283b60" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="YtSliderFillBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#4fe097" Offset="0"/>
<GradientStop Color="#2dbd7a" Offset="0.5"/>
<GradientStop Color="#1a9e63" Offset="1"/>
</LinearGradientBrush>
<RadialGradientBrush x:Key="YtSliderKnobBrush" Center="0.35,0.3" GradientOrigin="0.35,0.3"> <RadialGradientBrush x:Key="YtSliderKnobBrush" Center="0.35,0.3" GradientOrigin="0.35,0.3">
<GradientStop Color="#ffffff" Offset="0"/> <GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#d7f5e6" Offset="0.22"/> <GradientStop Color="{StaticResource Color.Tertiary}" Offset="1"/>
<GradientStop Color="#3ed588" Offset="0.72"/>
<GradientStop Color="#137a4d" Offset="1"/>
</RadialGradientBrush>
<RadialGradientBrush x:Key="YtSliderKnobHoverBrush" Center="0.35,0.3" GradientOrigin="0.35,0.3">
<GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#e6faef" Offset="0.22"/>
<GradientStop Color="#57e9a1" Offset="0.72"/>
<GradientStop Color="#1b9a63" Offset="1"/>
</RadialGradientBrush> </RadialGradientBrush>
<Style x:Key="YtSliderTrackButton" TargetType="RepeatButton"> <Style x:Key="YtSliderTrackButton" TargetType="RepeatButton">
@@ -398,8 +377,8 @@
<ControlTemplate TargetType="RepeatButton"> <ControlTemplate TargetType="RepeatButton">
<Grid> <Grid>
<Border Height="5" VerticalAlignment="Center" <Border Height="5" VerticalAlignment="Center"
Background="{StaticResource YtSliderFillBrush}" Background="{StaticResource Brush.Tertiary}"
BorderBrush="#0f7a4e" BorderThickness="1" CornerRadius="2.5"/> BorderThickness="1" CornerRadius="2.5"/>
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
@@ -413,7 +392,7 @@
<ControlTemplate TargetType="Thumb"> <ControlTemplate TargetType="Thumb">
<Grid Width="13" Height="13"> <Grid Width="13" Height="13">
<Ellipse x:Name="Knob" Fill="{StaticResource YtSliderKnobBrush}" <Ellipse x:Name="Knob" Fill="{StaticResource YtSliderKnobBrush}"
Stroke="#0b1626" StrokeThickness="1"> Stroke="{StaticResource Brush.Background}" StrokeThickness="1">
<Ellipse.Effect> <Ellipse.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="1" Opacity="0.55"/> <DropShadowEffect BlurRadius="3" ShadowDepth="1" Opacity="0.55"/>
</Ellipse.Effect> </Ellipse.Effect>
@@ -441,8 +420,8 @@
<ControlTemplate TargetType="Slider"> <ControlTemplate TargetType="Slider">
<Grid VerticalAlignment="Center"> <Grid VerticalAlignment="Center">
<Border Height="5" CornerRadius="2.5" VerticalAlignment="Center" <Border Height="5" CornerRadius="2.5" VerticalAlignment="Center"
Background="{StaticResource YtSliderTrackBrush}" Background="{StaticResource Brush.SurfaceContainerLowest}"
BorderBrush="#0a1424" BorderThickness="1"/> BorderBrush="{StaticResource Brush.Background}" BorderThickness="1"/>
<Track x:Name="PART_Track" Height="18"> <Track x:Name="PART_Track" Height="18">
<Track.DecreaseRepeatButton> <Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
@@ -464,9 +443,9 @@
<!-- Dark tooltip --> <!-- Dark tooltip -->
<Style TargetType="ToolTip"> <Style TargetType="ToolTip">
<Setter Property="Background" Value="#1a1a2e"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerLow}"/>
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="BorderBrush" Value="#2a3a5e"/> <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="8,6"/> <Setter Property="Padding" Value="8,6"/>
<Setter Property="FontSize" Value="12"/> <Setter Property="FontSize" Value="12"/>
@@ -486,7 +465,7 @@
<Setter.Value> <Setter.Value>
<DataTemplate> <DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap" MaxWidth="320" <TextBlock Text="{Binding}" TextWrapping="Wrap" MaxWidth="320"
Foreground="#e0e0e0" FontSize="12"/> Foreground="{StaticResource Brush.OnSurface}" FontSize="12"/>
</DataTemplate> </DataTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
@@ -494,9 +473,9 @@
<!-- Dark context menu --> <!-- Dark context menu -->
<Style TargetType="ContextMenu"> <Style TargetType="ContextMenu">
<Setter Property="Background" Value="#16213e"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainer}"/>
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="BorderBrush" Value="#2a3a5e"/> <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="3"/> <Setter Property="Padding" Value="3"/>
<Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="SnapsToDevicePixels" Value="True"/>
@@ -517,7 +496,7 @@
</Style> </Style>
<Style TargetType="MenuItem"> <Style TargetType="MenuItem">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="10,6"/> <Setter Property="Padding" Value="10,6"/>
<Setter Property="Template"> <Setter Property="Template">
@@ -550,7 +529,7 @@
AllowsTransparency="True" AllowsTransparency="True"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
Focusable="False"> Focusable="False">
<Border Background="#16213e" BorderBrush="#2a3a5e" <Border Background="{StaticResource Brush.SurfaceContainer}" BorderBrush="{StaticResource Brush.Outline}"
BorderThickness="1" CornerRadius="5" Padding="3"> BorderThickness="1" CornerRadius="5" Padding="3">
<Grid IsSharedSizeScope="True"> <Grid IsSharedSizeScope="True">
<ScrollViewer VerticalScrollBarVisibility="Auto"> <ScrollViewer VerticalScrollBarVisibility="Auto">
@@ -562,10 +541,10 @@
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True"> <Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#26ffffff"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
</Trigger> </Trigger>
<Trigger Property="IsSubmenuOpen" Value="True"> <Trigger Property="IsSubmenuOpen" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#26ffffff"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
</Trigger> </Trigger>
<Trigger Property="IsChecked" Value="True"> <Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckGlyph" Property="Visibility" Value="Visible"/> <Setter TargetName="CheckGlyph" Property="Visibility" Value="Visible"/>
@@ -588,7 +567,7 @@
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="Separator"> <ControlTemplate TargetType="Separator">
<Border Height="1" Background="#2a3a5e" Margin="8,4"/> <Border Height="1" Background="{StaticResource Brush.Outline}" Margin="8,4"/>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
@@ -596,7 +575,7 @@
<!-- Dark list item (used by all list boxes) --> <!-- Dark list item (used by all list boxes) -->
<Style x:Key="YtListBoxItem" TargetType="ListBoxItem"> <Style x:Key="YtListBoxItem" TargetType="ListBoxItem">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="Padding" Value="4,2"/> <Setter Property="Padding" Value="4,2"/>
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -605,7 +584,7 @@
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Grid> <Grid>
<Border x:Name="Accent" Width="3" HorizontalAlignment="Left" CornerRadius="1" <Border x:Name="Accent" Width="3" HorizontalAlignment="Left" CornerRadius="1"
Background="#e94560" Margin="0,2" Opacity="0" Background="{StaticResource Brush.Tertiary}" Margin="0,2" Opacity="0"
VerticalAlignment="Stretch"/> VerticalAlignment="Stretch"/>
<Border x:Name="Bd" Background="{TemplateBinding Background}" <Border x:Name="Bd" Background="{TemplateBinding Background}"
CornerRadius="3" Padding="{TemplateBinding Padding}" Margin="0,1"> CornerRadius="3" Padding="{TemplateBinding Padding}" Margin="0,1">
@@ -615,10 +594,10 @@
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#22ffffff"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimSoft}"/>
</Trigger> </Trigger>
<Trigger Property="IsSelected" Value="True"> <Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#1a3a66"/> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
<Setter TargetName="Accent" Property="Opacity" Value="1"/> <Setter TargetName="Accent" Property="Opacity" Value="1"/>
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
@@ -628,19 +607,19 @@
</Style> </Style>
<Style x:Key="YtLabel" TargetType="TextBlock"> <Style x:Key="YtLabel" TargetType="TextBlock">
<Setter Property="Foreground" Value="#a0a0b0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
<Setter Property="FontSize" Value="12"/> <Setter Property="FontSize" Value="12"/>
</Style> </Style>
<Style x:Key="SectionHeader" TargetType="TextBlock"> <Style x:Key="SectionHeader" TargetType="TextBlock">
<Setter Property="Foreground" Value="#e0e0e0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
<Setter Property="FontSize" Value="14"/> <Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Margin" Value="0,0,0,8"/> <Setter Property="Margin" Value="0,0,0,8"/>
</Style> </Style>
<Style x:Key="SubHeader" TargetType="TextBlock"> <Style x:Key="SubHeader" TargetType="TextBlock">
<Setter Property="Foreground" Value="#a0a0b0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
<Setter Property="FontSize" Value="11"/> <Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Margin" Value="4,0,0,4"/> <Setter Property="Margin" Value="4,0,0,4"/>
@@ -655,12 +634,13 @@
<Setter Property="Margin" Value="8,0,0,0"/> <Setter Property="Margin" Value="8,0,0,0"/>
</Style> </Style>
<!-- Sliding pill toggle: ON = green, OFF = red (#ef4444) --> <!-- Sliding pill toggle: OFF = neutral, ON = blue. Red is reserved for live/record
(DESIGN.md), so a settings toggle can never use it. -->
<Style x:Key="PillToggle" TargetType="ToggleButton"> <Style x:Key="PillToggle" TargetType="ToggleButton">
<Setter Property="Width" Value="36"/> <Setter Property="Width" Value="36"/>
<Setter Property="Height" Value="18"/> <Setter Property="Height" Value="18"/>
<Setter Property="Cursor" Value="Hand"/> <Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="#ef4444"/> <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="ToggleButton"> <ControlTemplate TargetType="ToggleButton">
@@ -680,7 +660,7 @@
</Grid> </Grid>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True"> <Trigger Property="IsChecked" Value="True">
<Setter TargetName="Track" Property="Background" Value="#22c55e"/> <Setter TargetName="Track" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
<Trigger.EnterActions> <Trigger.EnterActions>
<BeginStoryboard> <BeginStoryboard>
<Storyboard> <Storyboard>
@@ -729,7 +709,7 @@
</Border> </Border>
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True"> <Trigger Property="IsChecked" Value="True">
<Setter TargetName="Seg" Property="Background" Value="#e94560"/> <Setter TargetName="Seg" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
</Trigger> </Trigger>
</ControlTemplate.Triggers> </ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>
@@ -738,7 +718,7 @@
</Style> </Style>
<Style x:Key="SegmentLabel" TargetType="TextBlock"> <Style x:Key="SegmentLabel" TargetType="TextBlock">
<Setter Property="Foreground" Value="#a0a0b0"/> <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
<Setter Property="FontSize" Value="12"/> <Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/> <Setter Property="FontWeight" Value="Bold"/>
<Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/>
Themes/Tokens.xaml
+7
View File
@@ -21,6 +21,8 @@
<SolidColorBrush x:Key="Brush.SurfaceBright" Color="#31394d"/> <SolidColorBrush x:Key="Brush.SurfaceBright" Color="#31394d"/>
<SolidColorBrush x:Key="Brush.Outline" Color="#334155"/> <SolidColorBrush x:Key="Brush.Outline" Color="#334155"/>
<SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/> <SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/>
<SolidColorBrush x:Key="Brush.ScrimSoft" Color="#22FFFFFF"/>
<SolidColorBrush x:Key="Brush.ScrimStrong" Color="#26FFFFFF"/>
<!-- Text --> <!-- Text -->
<SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/> <SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/>
@@ -39,6 +41,11 @@
<SolidColorBrush x:Key="Brush.ErrorContainer" Color="#93000a"/> <SolidColorBrush x:Key="Brush.ErrorContainer" Color="#93000a"/>
<SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/> <SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/>
<!-- Colours (for gradients that cannot take a brush) -->
<Color x:Key="Color.Background">#0b1326</Color>
<Color x:Key="Color.Tertiary">#38bdf8</Color>
<Color x:Key="Color.SurfaceContainerLowest">#060e20</Color>
<!-- Meter bands (measured levels, never gain settings) --> <!-- Meter bands (measured levels, never gain settings) -->
<SolidColorBrush x:Key="Brush.Meter.Nominal" Color="#38bdf8"/> <SolidColorBrush x:Key="Brush.Meter.Nominal" Color="#38bdf8"/>
<SolidColorBrush x:Key="Brush.Meter.Caution" Color="#ffb95f"/> <SolidColorBrush x:Key="Brush.Meter.Caution" Color="#ffb95f"/>
ytLive.Tests/DesignTokensTests.cs
+25 -1
View File
@@ -2,6 +2,7 @@ using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.IO; using System.IO;
using System.Linq; using System.Linq;
using System.Text.RegularExpressions;
using System.Xml.Linq; using System.Xml.Linq;
using Xunit; using Xunit;
@@ -67,6 +68,28 @@ public class DesignTokensTests
"Themes/Tokens.xaml must merge BEFORE Themes/Controls.xaml, or styles cannot resolve a token"); "Themes/Tokens.xaml must merge BEFORE Themes/Controls.xaml, or styles cannot resolve a token");
} }
[Fact]
public void Converted_surfaces_carry_no_raw_colour()
{
// 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" };
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")
.Distinct(StringComparer.OrdinalIgnoreCase)
.ToList();
Assert.True(raw.Count == 0,
$"{file} still hardcodes {string.Join(", ", raw)} — resolve a Brush.* token instead");
}
}
[Fact] [Fact]
public void The_retired_brand_red_is_not_a_token() public void The_retired_brand_red_is_not_a_token()
{ {
@@ -100,7 +123,8 @@ public class DesignTokensTests
// The token cell may carry a note after the backticked name("`tertiary` (electric blue)"). // The token cell may carry a note after the backticked name("`tertiary` (electric blue)").
var token = Backticked(cells[0]); var token = Backticked(cells[0]);
var hex = Backticked(cells[1]); var hex = Backticked(cells[1]);
if (!hex.StartsWith("#", StringComparison.Ordinal) || hex.Length != 7) continue; // 6-digit RGB or 8-digit ARGB (the scrim washes carry alpha).
if (!hex.StartsWith("#", StringComparison.Ordinal) || hex.Length is not (7 or 9)) continue;
result[token] = hex; result[token] = hex;
} }