teamsiso/src/TeamsISO.App/Themes/StoneTheme.xaml
Zac Gaetano b542d01835 feat(ui): rebuild MainWindow with Stone-theme design system
Adopts the design language from Dammyjay93/interface-design: warm Stone neutrals, accent orange (#EA580C), borders-only depth (no shadows), 8px spacing grid, all-caps section labels, mono typography for machine names and timecodes.

Themes/StoneTheme.xaml is the single source of truth for design tokens (color brushes, typography styles, spacing) plus restyled control templates (Button, TextBox, ComboBox, ComboBoxItem, CheckBox, DataGrid + DataGridColumnHeader / DataGridRow / DataGridCell, ScrollBar). MainWindow consumes the tokens and is laid out with a header (title + status pill), section-headed Settings sidebar (Output Format / NDI Network / Display), card-wrapped participant list, and a mono status footer.

Settings sidebar surfaces the new NDI group configuration (discovery + output) and a Hide-(Local) checkbox. The latter filters the user's own self-preview from the participants list at the MainViewModel layer (HideLocalSelf=true by default) so operators don't accidentally route their own preview as an ISO. Apply Changes round-trips both FrameProcessingSettings and NdiGroupSettings through the controller in one go.
2026-05-07 23:58:02 -04:00

491 lines
26 KiB
XML

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<!--
TeamsISO design tokens — adapted from the "interface-design" Stone aesthetic:
warm neutrals, borders-only depth (no shadows), accent orange, 8px spacing grid,
tight typography. Manrope is the reference font; we fall back to Segoe UI
Variable Display which ships with Windows 11 and reads similarly.
-->
<!-- ═════ Spacing (8px grid) ═════ -->
<sys:Double x:Key="Spacing.XS">4</sys:Double>
<sys:Double x:Key="Spacing.S">8</sys:Double>
<sys:Double x:Key="Spacing.M">12</sys:Double>
<sys:Double x:Key="Spacing.L">16</sys:Double>
<sys:Double x:Key="Spacing.XL">24</sys:Double>
<sys:Double x:Key="Spacing.XXL">32</sys:Double>
<!-- ═════ Radii ═════ -->
<CornerRadius x:Key="Radius.S">4</CornerRadius>
<CornerRadius x:Key="Radius.M">6</CornerRadius>
<CornerRadius x:Key="Radius.L">8</CornerRadius>
<!-- ═════ Stone palette (dark theme — primary look) ═════ -->
<SolidColorBrush x:Key="Stone.Canvas" Color="#1B1916"/>
<SolidColorBrush x:Key="Stone.Surface" Color="#26221F"/>
<SolidColorBrush x:Key="Stone.SurfaceElevated" Color="#2D2926"/>
<SolidColorBrush x:Key="Stone.SurfaceHover" Color="#34302D"/>
<SolidColorBrush x:Key="Stone.Border" Color="#3A3633"/>
<SolidColorBrush x:Key="Stone.BorderStrong" Color="#4D4742"/>
<SolidColorBrush x:Key="Text.Primary" Color="#F5F3F0"/>
<SolidColorBrush x:Key="Text.Secondary" Color="#B5AFA8"/>
<SolidColorBrush x:Key="Text.Tertiary" Color="#857F77"/>
<SolidColorBrush x:Key="Text.Disabled" Color="#5C5751"/>
<SolidColorBrush x:Key="Accent.Orange" Color="#EA580C"/>
<SolidColorBrush x:Key="Accent.OrangeHover" Color="#F97316"/>
<SolidColorBrush x:Key="Accent.OrangeMuted" Color="#7A2F0E"/>
<SolidColorBrush x:Key="Status.Good" Color="#84CC16"/>
<SolidColorBrush x:Key="Status.Warn" Color="#F59E0B"/>
<SolidColorBrush x:Key="Status.Bad" Color="#DC2626"/>
<SolidColorBrush x:Key="Status.Bad.Surface" Color="#3F1414"/>
<!-- ═════ Typography ═════ -->
<FontFamily x:Key="Font.Sans">Segoe UI Variable Display, Segoe UI, Manrope, sans-serif</FontFamily>
<FontFamily x:Key="Font.Mono">Cascadia Mono, Consolas, monospace</FontFamily>
<!-- Display: section headers, hero stats. -->
<Style x:Key="Text.Display" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal"/>
<Setter Property="TextOptions.TextRenderingMode" Value="ClearType"/>
</Style>
<Style x:Key="Text.Heading" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal"/>
</Style>
<Style x:Key="Text.Body" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal"/>
</Style>
<!-- Caption: labels above inputs, secondary metadata. -->
<Style x:Key="Text.Caption" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Text.Secondary}"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal"/>
<Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
<Setter Property="Margin" Value="0,0,0,4"/>
</Style>
<!-- Mono: machine names, hex IDs, timecodes. -->
<Style x:Key="Text.Mono" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font.Mono}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="{StaticResource Text.Secondary}"/>
</Style>
<!-- ═════ TextBlock default ═════ -->
<Style TargetType="TextBlock" BasedOn="{StaticResource Text.Body}"/>
<!-- ═════ Button: ghost/secondary (default) ═════ -->
<Style x:Key="Button.Ghost" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="12,7"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource Radius.M}"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Stone.SurfaceHover}"/>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Stone.BorderStrong}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Stone.SurfaceElevated}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource Text.Disabled}"/>
<Setter TargetName="Bd" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ═════ Button: primary (orange accent) ═════ -->
<Style x:Key="Button.Primary" TargetType="Button" BasedOn="{StaticResource Button.Ghost}">
<Setter Property="Background" Value="{StaticResource Accent.Orange}"/>
<Setter Property="BorderBrush" Value="{StaticResource Accent.Orange}"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Accent.OrangeHover}"/>
<Setter Property="BorderBrush" Value="{StaticResource Accent.OrangeHover}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- ═════ Button: ISO toggle (pill-shaped, status-coded) ═════ -->
<Style x:Key="Button.IsoToggle" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.BorderStrong}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="76"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="999"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Stone.SurfaceHover}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ═════ TextBox ═════ -->
<Style x:Key="TextBox.Default" TargetType="TextBox">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Background" Value="{StaticResource Stone.Surface}"/>
<Setter Property="CaretBrush" Value="{StaticResource Accent.Orange}"/>
<Setter Property="SelectionBrush" Value="{StaticResource Accent.OrangeMuted}"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource Radius.M}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Accent.Orange}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Stone.BorderStrong}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource TextBox.Default}"/>
<!-- ═════ ComboBox ═════ -->
<Style x:Key="ComboBoxToggleStripped" TargetType="ToggleButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="ClickMode" Value="Press"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Path x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,12,0"
Data="M 0,0 L 4,4 L 8,0 Z"
Fill="{StaticResource Text.Secondary}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBox.Default" TargetType="ComboBox">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Background" Value="{StaticResource Stone.Surface}"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,7"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource Radius.M}"
SnapsToDevicePixels="True"/>
<ToggleButton Style="{StaticResource ComboBoxToggleStripped}"
IsChecked="{Binding IsDropDownOpen,
RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
<ContentPresenter Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
VerticalAlignment="Center"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"/>
<Popup x:Name="PART_Popup"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="None">
<Border Background="{StaticResource Stone.SurfaceElevated}"
BorderBrush="{StaticResource Stone.BorderStrong}"
BorderThickness="1"
CornerRadius="{StaticResource Radius.M}"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="280"
Margin="0,4,0,0">
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Stone.BorderStrong}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Accent.Orange}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ComboBox" BasedOn="{StaticResource ComboBox.Default}"/>
<!-- ComboBoxItem -->
<Style TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Padding" Value="10,7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="Bd"
Background="Transparent"
CornerRadius="{StaticResource Radius.S}"
Margin="4,2"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Stone.SurfaceHover}"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Stone.SurfaceHover}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ═════ CheckBox (custom, square+orange-tick when checked) ═════ -->
<Style TargetType="CheckBox">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Padding" Value="8,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<StackPanel Orientation="Horizontal">
<Border x:Name="Box"
Width="16" Height="16"
BorderBrush="{StaticResource Stone.BorderStrong}"
BorderThickness="1"
Background="{StaticResource Stone.Surface}"
CornerRadius="3"
VerticalAlignment="Center">
<Path x:Name="Tick"
Data="M 3,8 L 6.5,11.5 L 13,4"
Stroke="#FFFFFF" StrokeThickness="2"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
Visibility="Collapsed"/>
</Border>
<ContentPresenter Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Box" Property="Background" Value="{StaticResource Accent.Orange}"/>
<Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Accent.Orange}"/>
<Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Accent.OrangeHover}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ═════ Card ═════ -->
<Style x:Key="Card" TargetType="Border">
<Setter Property="Background" Value="{StaticResource Stone.Surface}"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="{StaticResource Radius.L}"/>
<Setter Property="Padding" Value="{StaticResource Spacing.L}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<!-- ═════ DataGrid (re-skinned) ═════ -->
<Style TargetType="DataGrid">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="GridLinesVisibility" Value="None"/>
<Setter Property="HeadersVisibility" Value="Column"/>
<Setter Property="RowHeight" Value="48"/>
<Setter Property="RowBackground" Value="Transparent"/>
<Setter Property="AlternatingRowBackground" Value="Transparent"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="CanUserAddRows" Value="False"/>
<Setter Property="CanUserDeleteRows" Value="False"/>
<Setter Property="CanUserResizeRows" Value="False"/>
<Setter Property="SelectionMode" Value="Single"/>
<Setter Property="SelectionUnit" Value="FullRow"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="FontFamily" Value="{StaticResource Font.Sans}"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Text.Tertiary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="Padding" Value="12,10"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
</Style>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Stone.Border}"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Stone.SurfaceHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource Stone.SurfaceElevated}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="{StaticResource Text.Primary}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<ContentPresenter VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar (slim) -->
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="8"/>
<Setter Property="MinWidth" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Height" Value="8"/>
<Setter Property="MinHeight" Value="8"/>
<Setter Property="Width" Value="Auto"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- ═════ Status pill ═════ -->
<Style x:Key="Pill.Online" TargetType="Border">
<Setter Property="Background" Value="#1F3A1F"/>
<Setter Property="CornerRadius" Value="999"/>
<Setter Property="Padding" Value="10,3"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style x:Key="Pill.Offline" TargetType="Border">
<Setter Property="Background" Value="{StaticResource Status.Bad.Surface}"/>
<Setter Property="CornerRadius" Value="999"/>
<Setter Property="Padding" Value="10,3"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
</ResourceDictionary>