WildDragonLLC/teamsiso
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 1 Packages Wiki Activity Actions
teamsiso/src/TeamsISO.App/Themes/WildDragonTheme.xaml
Zac Gaetano 0e2927e42c
Some checks failed
CI / build-and-test (push) Failing after 31s
Details
Add keyboard focus rings to themed buttons 
All Wd.Button.* styles set FocusVisualStyle=x:Null which suppresses WPF's default dotted focus rectangle. With no replacement IsKeyboardFocused trigger, tab-navigating gave NO visual cue — accessibility regression.

Match the keyboard-focus visual to the hover visual so mouse and keyboard land on the same affordance:

- Ghost: cyan border on focus (same as hover, minus the bg fill change so focus + hover compound visibly)

- Caption: lifts to Wd.Button.HoverBg

- RailIcon: lifts to Wd.Button.HoverBg + cyan icon

- IsoToggle: 2px cyan border (same as hover; status bg preserved)

Verified building cleanly. Tab-cycle through the IN-CALL bar / header pills / settings tabs now lights the focused control.
2026-05-10 13:30:56 -04:00

834 lines
44 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 system — Wild Dragon brand × Microsoft Teams layout.
Brand reference: wilddragon.net
Primary canvas: #0a0a0a
Accent cyan: #97EDF0
Secondary blue: #9AE0FD
Coral (errors): #FB819C
Earth (warnings): #423825
Fonts: Inter (primary), JetBrains Mono
Layout reference: Microsoft Teams desktop
- Left rail (72px) for app icon + primary nav
- Top header inside content area
- Card-based main panel with rounded corners (8-12px)
- Subtle elevation through tone, not heavy shadows
- Avatar circles for participants
Inter is not a Windows system font; we list it first and fall back to
Segoe UI Variable Display (Windows 11) and Segoe UI. JetBrains Mono
falls back to Cascadia Mono.
-->
<!-- ════ Spacing (8px grid) ════ -->
<sys:Double x:Key="Space.XS">4</sys:Double>
<sys:Double x:Key="Space.S">8</sys:Double>
<sys:Double x:Key="Space.M">12</sys:Double>
<sys:Double x:Key="Space.L">16</sys:Double>
<sys:Double x:Key="Space.XL">24</sys:Double>
<sys:Double x:Key="Space.XXL">32</sys:Double>
<!-- ════ Radii (Teams uses 6/8/12) ════ -->
<CornerRadius x:Key="Radius.S">6</CornerRadius>
<CornerRadius x:Key="Radius.M">8</CornerRadius>
<CornerRadius x:Key="Radius.L">12</CornerRadius>
<CornerRadius x:Key="Radius.XL">16</CornerRadius>
<!-- ════ Wild Dragon palette (dark) ════ -->
<SolidColorBrush x:Key="Wd.Canvas" Color="#0A0A0A"/>
<SolidColorBrush x:Key="Wd.Rail" Color="#080808"/>
<SolidColorBrush x:Key="Wd.Surface" Color="#141414"/>
<SolidColorBrush x:Key="Wd.SurfaceElevated" Color="#1C1C1C"/>
<SolidColorBrush x:Key="Wd.SurfaceHover" Color="#2A2A2A"/>
<SolidColorBrush x:Key="Wd.SurfaceActive" Color="#363636"/>
<SolidColorBrush x:Key="Wd.Border" Color="#262626"/>
<SolidColorBrush x:Key="Wd.BorderStrong" Color="#383838"/>
<!--
Dedicated stronger hover background for buttons, used when the default
SurfaceHover doesn't read clearly enough on the dark cards. Combined
with a cyan accent border on hover this gives every interactive
button an unmistakable affordance regardless of what surface it
sits on (canvas, card, or rail).
-->
<SolidColorBrush x:Key="Wd.Button.HoverBg" Color="#33333A"/>
<SolidColorBrush x:Key="Wd.Button.PressBg" Color="#3F3F47"/>
<SolidColorBrush x:Key="Wd.Text.Primary" Color="#F5F5F5"/>
<SolidColorBrush x:Key="Wd.Text.Secondary" Color="#A3A3A3"/>
<SolidColorBrush x:Key="Wd.Text.Tertiary" Color="#6B6B6B"/>
<SolidColorBrush x:Key="Wd.Text.Disabled" Color="#404040"/>
<!-- Accents from wilddragon.net -->
<SolidColorBrush x:Key="Wd.Accent.Cyan" Color="#97EDF0"/>
<SolidColorBrush x:Key="Wd.Accent.CyanHover" Color="#B5F2F4"/>
<SolidColorBrush x:Key="Wd.Accent.CyanMuted" Color="#1B3537"/>
<SolidColorBrush x:Key="Wd.Accent.Blue" Color="#9AE0FD"/>
<SolidColorBrush x:Key="Wd.Accent.Coral" Color="#FB819C"/>
<SolidColorBrush x:Key="Wd.Accent.CoralBg" Color="#3A1922"/>
<SolidColorBrush x:Key="Wd.Status.Live" Color="#4ADE80"/>
<SolidColorBrush x:Key="Wd.Status.LiveBg" Color="#13261A"/>
<SolidColorBrush x:Key="Wd.Status.Warn" Color="#FBBF24"/>
<SolidColorBrush x:Key="Wd.Status.Error" Color="#FB819C"/>
<!-- ════ Typography ════ -->
<!--
Inter is bundled as Assets\Fonts\Inter.ttf (Variable, OFL — rsms/inter v3.19).
The pack URI loads it from this assembly's resources at runtime so we don't
depend on the user having Inter installed system-wide. Fallback chain to
Segoe UI if the resource is somehow missing.
-->
<FontFamily x:Key="Wd.Font.Sans">pack://application:,,,/Assets/Fonts/#Inter, Inter, Segoe UI Variable Display, Segoe UI, sans-serif</FontFamily>
<FontFamily x:Key="Wd.Font.Mono">pack://application:,,,/Assets/Fonts/#JetBrains Mono, JetBrains Mono, Cascadia Mono, Consolas, monospace</FontFamily>
<Style x:Key="Wd.Text.Title" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
</Style>
<Style x:Key="Wd.Text.Heading" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
</Style>
<Style x:Key="Wd.Text.Body" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
</Style>
<Style x:Key="Wd.Text.Subtle" TargetType="TextBlock" BasedOn="{StaticResource Wd.Text.Body}">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
</Style>
<Style x:Key="Wd.Text.Caption" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
<Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
</Style>
<Style x:Key="Wd.Text.Mono" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Mono}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource Wd.Text.Body}"/>
<!-- ════ Buttons ════ -->
<!-- Ghost: bordered, transparent fill -->
<Style x:Key="Wd.Button.Ghost" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="14,8"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<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>
<!--
Hover: strong fill change PLUS a cyan accent border.
The dual-cue (lighter surface + bright border) is
what gives the affordance an unmistakable read on
the dark canvas — a background-only change in this
palette is too subtle to spot at a glance.
-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
<!--
Keyboard focus ring (Tab-navigation). FocusVisualStyle
is x:Null on all themed buttons — without this trigger
you'd have NO visual cue when tab-cycling through.
Match the hover treatment so mouse + keyboard land
on the same affordance.
-->
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Disabled}"/>
<Setter TargetName="Bd" Property="Opacity" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Primary: cyan-on-black for the brand action -->
<Style x:Key="Wd.Button.Primary" TargetType="Button" BasedOn="{StaticResource Wd.Button.Ghost}">
<Setter Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter Property="Foreground" Value="#0A0A0A"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<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}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.CyanHover}"/>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--
Window-caption buttons: minimize / maximize / close. Match the Windows 11
Teams look — slim 46x32, hover-tinted, Close turns red on hover.
-->
<Style x:Key="Wd.Button.Caption" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="46"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<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}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Wd.Button.CaptionClose" TargetType="Button" BasedOn="{StaticResource Wd.Button.Caption}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Bd" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#C42B1C"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#A52A1F"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Rail-icon button: square 48x48, used on the Teams-style left rail -->
<Style x:Key="Wd.Button.RailIcon" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
<Setter Property="Width" Value="48"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Margin" Value="0,4"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<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}"
CornerRadius="{StaticResource Radius.M}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<!-- Rail icons sit on Wd.Rail (#080808) — a darker
surface than Wd.Canvas. Use Wd.Button.HoverBg so
the affordance reads clearly. -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ISO toggle: pill, status-coded -->
<Style x:Key="Wd.Button.IsoToggle" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="14,6"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="84"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="999">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<!--
IsoToggle has a status-coded background (LIVE cyan,
ERROR coral, NO SIGNAL amber) set inline by the row
template. Hover *keeps* that background color (so
the at-a-glance status read is preserved) and adds
a thicker cyan-tinted border so the affordance is
unmistakable. We don't override Background here so
the data-trigger setter wins.
-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
<Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
<Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
<Setter TargetName="Bd" Property="Opacity" Value="0.85"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ════ TextBox ════ -->
<Style x:Key="Wd.TextBox.Default" TargetType="TextBox">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
<Setter Property="CaretBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter Property="SelectionBrush" Value="{StaticResource Wd.Accent.CyanMuted}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="12,9"/>
<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}">
<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 Wd.Accent.Cyan}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource Wd.TextBox.Default}"/>
<!-- ════ ComboBox ════ -->
<Style x:Key="Wd.ComboToggle" 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">
<Path HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,14,0"
Data="M 0,0 L 4,4 L 8,0 Z"
Fill="{StaticResource Wd.Text.Secondary}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ComboBox">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="12,9"/>
<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}"/>
<ToggleButton Style="{StaticResource Wd.ComboToggle}"
IsChecked="{Binding IsDropDownOpen,
RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
<ContentPresenter Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
VerticalAlignment="Center"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"/>
<Popup IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="None">
<Border Background="{StaticResource Wd.SurfaceElevated}"
BorderBrush="{StaticResource Wd.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 Wd.BorderStrong}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Padding" Value="12,9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="Bd"
Background="Transparent"
CornerRadius="{StaticResource Radius.S}"
Margin="4,2"
Padding="{TemplateBinding Padding}">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ════ CheckBox ════ -->
<Style TargetType="CheckBox">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Padding" Value="10,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<StackPanel Orientation="Horizontal">
<Border x:Name="Box"
Width="18" Height="18"
BorderBrush="{StaticResource Wd.BorderStrong}"
BorderThickness="1"
Background="{StaticResource Wd.Surface}"
CornerRadius="4"
VerticalAlignment="Center">
<Path x:Name="Tick"
Data="M 4,9 L 7.5,12.5 L 14,5"
Stroke="#0A0A0A" 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 Wd.Accent.Cyan}"/>
<Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ════ TabControl (settings panel) ════ -->
<!--
Lightweight, flush tabs that match the dark surface. Underline-on-active
rather than the WPF default raised-border, so the tab strip reads as a
section header rather than a separate widget.
-->
<Style TargetType="TabControl" x:Key="Wd.TabControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0"
BorderBrush="{StaticResource Wd.Border}"
BorderThickness="0,0,0,1">
<TabPanel x:Name="HeaderPanel"
IsItemsHost="True"
Background="Transparent"/>
</Border>
<ContentPresenter Grid.Row="1"
ContentSource="SelectedContent"
Margin="0,16,0,0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem" x:Key="Wd.TabItem">
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0,8,0,10"/>
<Setter Property="Margin" Value="0,0,20,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="Content"
Grid.Row="0"
ContentSource="Header"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextBlock.FontFamily="{TemplateBinding FontFamily}"
TextBlock.FontSize="{TemplateBinding FontSize}"
TextBlock.FontWeight="{TemplateBinding FontWeight}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="Underline"
Grid.Row="1"
Height="2"
Fill="{StaticResource Wd.Accent.Cyan}"
Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Underline" Property="Visibility" Value="Visible"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ════ Card ════ -->
<Style x:Key="Wd.Card" TargetType="Border">
<Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="{StaticResource Radius.L}"/>
<Setter Property="Padding" Value="16"/>
</Style>
<!-- ════ DataGrid (re-skinned, Teams-style) ════ -->
<Style TargetType="DataGrid">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="GridLinesVisibility" Value="None"/>
<Setter Property="HeadersVisibility" Value="Column"/>
<Setter Property="RowHeight" Value="56"/>
<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 Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="Padding" Value="14,12"/>
<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 Wd.Border}"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="14,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="{StaticResource Wd.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, dark-theme-native) ════ -->
<!--
The default WPF ScrollBar template is a chunky Win9x affair (line-up
/ line-down arrow buttons + a 3D thumb) that clashes hard with the
dark canvas. Replace with a slim, transparent track + thumb pattern
like Edge / VS Code / GitHub use: thumb is barely visible at rest,
pops a tone brighter on hover/drag. Track-clicks still page-scroll
(the RepeatButton does the work) but render as invisible hit zones.
-->
<Style x:Key="Wd.ScrollBar.Thumb" TargetType="Thumb">
<Setter Property="Background" Value="{StaticResource Wd.BorderStrong}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
CornerRadius="4"
Margin="2"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Text.Tertiary}"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Invisible page-scroll RepeatButton (clicks above/below thumb still page-scroll). -->
<Style x:Key="Wd.ScrollBar.PageButton" TargetType="RepeatButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="10"/>
<Setter Property="MinWidth" Value="10"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Bg" Background="{TemplateBinding Background}">
<Track x:Name="PART_Track" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Height" Value="10"/>
<Setter Property="MinHeight" Value="10"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Bg" Background="{TemplateBinding Background}">
<Track x:Name="PART_Track" IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageLeftCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- ════ Avatar (28px circle with initials) ════ -->
<Style x:Key="Wd.Avatar" TargetType="Border">
<Setter Property="Width" Value="32"/>
<Setter Property="Height" Value="32"/>
<Setter Property="CornerRadius" Value="16"/>
<Setter Property="Background" Value="{StaticResource Wd.Accent.CyanMuted}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<!-- ════ Status pill ════ -->
<Style x:Key="Wd.Pill" TargetType="Border">
<Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>
<Setter Property="CornerRadius" Value="999"/>
<Setter Property="Padding" Value="10,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
</ResourceDictionary>
Reference in a new issue View git blame Copy permalink