Skip to content

P1 UI: unify premium cool-blue inputs, dropdowns, dialogs and empty states (#730) #732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
masarray wants to merge 6 commits into from
Closed

P1 UI: unify premium cool-blue inputs, dropdowns, dialogs and empty states (#730) #732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fab10ec
P1 UI: canonical textbox, dropdown, editable safety, empty state and …
masarray Oct 24, 2026
e2d1666
P1 UX: consolidate cool-blue reusable input, empty state and dialog c…
masarray Oct 24, 2026
88acf87
P1 UX: consolidate cool-blue reusable input, empty state and dialog c…
masarray Oct 24, 2026
82a6ab4
P1 UX: consolidate cool-blue reusable input, empty state and dialog c…
masarray Oct 24, 2026
420ca77
test(P1 UX): lock shared input, editable command, dropdown, empty sta…
masarray Oct 24, 2026
c47a622
test(P1 UX): resolve canonical dynamic dialog colors before WCAG cont…
masarray Oct 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ControlCommandWindow.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
HorizontalScrollBarVisibility="Disabled" MinHeight="0">
<StackPanel Margin="1,0,6,1">
<TextBlock Text="Command value" Style="{StaticResource ControlFieldLabel}"/>
<ComboBox x:Name="CommandValueBox" Height="34"
<ComboBox x:Name="CommandValueBox" Style="{StaticResource WorkstationEditableComboBox}" Height="34"
ItemsSource="{Binding ValueOptions}"
Text="{Binding SelectedValue, UpdateSourceTrigger=PropertyChanged}"
IsEditable="{Binding AllowCustomValue}" IsEnabled="{Binding CanEdit}"
Expand Down
182 changes: 162 additions & 20 deletions Resources/P2BlueSteelGreige.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@
<!-- Panels -->
<Style x:Key="Card" TargetType="Border">
<Setter Property="Background" Value="{StaticResource PremiumSurface}"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Padding" Value="13"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="Padding" Value="11"/>
<Setter Property="BorderBrush" Value="{StaticResource SteelDividerStrong}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Effect" Value="{StaticResource CardShadow}"/>
Expand Down Expand Up @@ -618,24 +618,166 @@
</Setter>
</Style>

<!-- Inputs also leave pure white behind so dialogs remain visually consistent. -->
<Style TargetType="TextBox">
<Setter Property="BorderBrush" Value="#D7E5F6"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="11,7"/>
<Setter Property="Background" Value="#EDF5FF"/>
<!-- P1: one compact input surface; retain PART_ContentHost, validation and keyboard focus. -->
<Style x:Key="WorkstationTextBox" TargetType="TextBox">
<Setter Property="Foreground" Value="{StaticResource Ink}"/>
<Setter Property="Background" Value="{StaticResource PanelSurface}"/>
<Setter Property="BorderBrush" Value="{StaticResource CoolDivider}"/>
<Setter Property="CaretBrush" Value="{StaticResource Accent}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,6"/>
<Setter Property="MinHeight" Value="34"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="36"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border x:Name="InputChrome" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="8" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="InputChrome" Property="BorderBrush" Value="#8FB9E8"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="InputChrome" Property="BorderBrush" Value="{StaticResource Accent}"/>
<Setter TargetName="InputChrome" Property="BorderThickness" Value="1.5"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter TargetName="InputChrome" Property="Background" Value="{StaticResource GridRowAlternate}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="InputChrome" Property="Opacity" Value="0.5"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="True">
<Setter TargetName="InputChrome" Property="BorderBrush" Value="{StaticResource Danger}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource WorkstationTextBox}"/>

<!-- P1: shared dropdown used by all non-editable engineering controls. -->
<Style x:Key="WorkstationComboBox" TargetType="ComboBox">
<Setter Property="Foreground" Value="{StaticResource Ink}"/>
<Setter Property="BorderBrush" Value="{StaticResource CoolDivider}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,6"/>
<Setter Property="Background" Value="{StaticResource PanelSurface}"/>
<Setter Property="MinHeight" Value="34"/>
<Setter Property="IsTextSearchEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Padding" Value="10,7"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Foreground" Value="{StaticResource Ink}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="ItemChrome" Background="Transparent" CornerRadius="7" Padding="{TemplateBinding Padding}">
<ContentPresenter VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="ItemChrome" Property="Background" Value="{StaticResource GridHoverSurface}"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ItemChrome" Property="Background" Value="{StaticResource GridSelectedSurface}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource AccentDeep}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False"><Setter Property="Opacity" Value="0.45"/></Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7">
<Grid>
<ContentPresenter Margin="10,0,32,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
TextElement.Foreground="{TemplateBinding Foreground}"/>
<Border Width="28" HorizontalAlignment="Right" Background="Transparent" IsHitTestVisible="False">
<Path Data="M 2 4 L 6 8 L 10 4" Stroke="#566F8F" StrokeThickness="1.7"
StrokeStartLineCap="Round" StrokeEndLineCap="Round" Stretch="None"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</Border>
<ToggleButton Background="Transparent" BorderThickness="0" Focusable="False" Cursor="Hand"
IsChecked="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border Background="Transparent"/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup x:Name="PART_Popup" IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom"
AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="PopupChrome" MinWidth="{Binding ActualWidth, ElementName=Chrome}" MaxHeight="{TemplateBinding MaxDropDownHeight}"
Background="#FFFFFF" BorderBrush="{StaticResource CoolDivider}" BorderThickness="1" CornerRadius="9" Padding="4" Margin="0,5,0,0">
<Border.Effect><DropShadowEffect BlurRadius="12" ShadowDepth="3" Opacity="0.12" Color="#24364F"/></Border.Effect>
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Chrome" Property="BorderBrush" Value="#8FB9E8"/></Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource Accent}"/>
<Setter TargetName="Chrome" Property="BorderThickness" Value="1.5"/>
</Trigger>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="Chrome" Property="Background" Value="{StaticResource PanelSurface}"/>
<Setter TargetName="Chrome" Property="BorderBrush" Value="#7FA5E4"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False"><Setter Property="Opacity" Value="0.48"/></Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ModernComboBox" TargetType="ComboBox" BasedOn="{StaticResource WorkstationComboBox}"/>
<Style TargetType="ComboBox" BasedOn="{StaticResource WorkstationComboBox}"/>

<!-- Command value may be free text: retain native editable ComboBox PART_EditableTextBox. -->
<Style x:Key="WorkstationEditableComboBox" TargetType="ComboBox">
<Setter Property="Foreground" Value="{StaticResource Ink}"/>
<Setter Property="Background" Value="{StaticResource PanelSurface}"/>
<Setter Property="BorderBrush" Value="{StaticResource CoolDivider}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="MinHeight" Value="34"/>
</Style>

<Style TargetType="ComboBox">
<Setter Property="BorderBrush" Value="#D7E5F6"/>
<!-- Empty states are calm reusable surfaces, independent of view-model visibility. -->
<Style x:Key="WorkstationEmptyState" TargetType="Border">
<Setter Property="Background" Value="{StaticResource PanelSurface}"/>
<Setter Property="BorderBrush" Value="{StaticResource CoolDivider}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,7"/>
<Setter Property="Background" Value="#EDF5FF"/>
<Setter Property="Foreground" Value="{StaticResource Ink}"/>
<Setter Property="MinHeight" Value="36"/>
<Setter Property="CornerRadius" Value="9"/>
<Setter Property="Padding" Value="14"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>

<Style x:Key="VerticalScrollBarThumb" TargetType="Thumb">
Expand All @@ -644,14 +786,14 @@
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border x:Name="ThumbBorder" Width="4" MinHeight="46" HorizontalAlignment="Center"
Background="#98A5AB" CornerRadius="3" Opacity="0.78"/>
Background="#9BB8DB" CornerRadius="3" Opacity="0.78"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ThumbBorder" Property="Width" Value="5"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#71838C"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#668FBD"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ThumbBorder" Property="Background" Value="#4F6570"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#346DAF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Expand All @@ -669,10 +811,10 @@
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ThumbBorder" Property="Height" Value="5"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#71838C"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#668FBD"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ThumbBorder" Property="Background" Value="#4F6570"/>
<Setter TargetName="ThumbBorder" Property="Background" Value="#346DAF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Expand Down
32 changes: 16 additions & 16 deletions Styles/IedTaskDialogStyles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Locally scoped, high-contrast task-dialog tokens. The main workspace,
reporting UI and protocol flows keep their original global styles. -->
<SolidColorBrush x:Key="TaskDialogCanvas" Color="#F2F6FC"/>
<SolidColorBrush x:Key="TaskDialogCard" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TaskDialogInk" Color="#14263D"/>
<SolidColorBrush x:Key="TaskDialogMuted" Color="#52657B"/>
<SolidColorBrush x:Key="TaskDialogBorder" Color="#D6E2F0"/>
<SolidColorBrush x:Key="TaskDialogHintSurface" Color="#EDF5FF"/>
<SolidColorBrush x:Key="TaskDialogHintBorder" Color="#CADFFD"/>
<SolidColorBrush x:Key="TaskDialogCanvas" Color="{DynamicResource CoolCanvasColor}"/>
<SolidColorBrush x:Key="TaskDialogCard" Color="{DynamicResource CoolRaisedColor}"/>
<SolidColorBrush x:Key="TaskDialogInk" Color="{DynamicResource InkColor}"/>
<SolidColorBrush x:Key="TaskDialogMuted" Color="{DynamicResource MutedColor}"/>
<SolidColorBrush x:Key="TaskDialogBorder" Color="{DynamicResource CoolBorderColor}"/>
<SolidColorBrush x:Key="TaskDialogHintSurface" Color="{DynamicResource CoolAlternateColor}"/>
<SolidColorBrush x:Key="TaskDialogHintBorder" Color="{DynamicResource CoolBorderColor}"/>

<Style x:Key="TaskDialogHeading" TargetType="TextBlock">
<Setter Property="FontSize" Value="22"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource TaskDialogInk}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
Expand All @@ -36,15 +36,15 @@
<Setter Property="Background" Value="{StaticResource TaskDialogCard}"/>
<Setter Property="BorderBrush" Value="{StaticResource TaskDialogBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="14"/>
<Setter Property="Padding" Value="16"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="Padding" Value="12"/>
</Style>
<!-- A standalone merged dictionary must not resolve BasedOn to App.xaml
while it is being constructed: the global PrimaryButton/SoftButton
styles are outside this dictionary's StaticResource parse scope. -->
<Style x:Key="TaskDialogButtonBase" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12.5"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
Expand All @@ -59,7 +59,7 @@
<Border x:Name="Chrome" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="10" SnapsToDevicePixels="True">
CornerRadius="8" SnapsToDevicePixels="True">
<ContentPresenter ContentSource="Content"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Expand All @@ -82,16 +82,16 @@
</Style>
<Style x:Key="TaskDialogPrimaryAction" TargetType="{x:Type Button}"
BasedOn="{StaticResource TaskDialogButtonBase}">
<Setter Property="Background" Value="#2563EB"/>
<Setter Property="Background" Value="{DynamicResource Accent}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="#2563EB"/>
<Setter Property="BorderBrush" Value="{DynamicResource Accent}"/>
<Setter Property="MinHeight" Value="64"/>
<Setter Property="Padding" Value="15,12"/>
</Style>
<Style x:Key="TaskDialogSecondaryAction" TargetType="{x:Type Button}"
BasedOn="{StaticResource TaskDialogButtonBase}">
<Setter Property="Background" Value="#F8FAFF"/>
<Setter Property="BorderBrush" Value="#C9D9EE"/>
<Setter Property="Background" Value="{DynamicResource PanelSurface}"/>
<Setter Property="BorderBrush" Value="{DynamicResource CoolDivider}"/>
<Setter Property="MinHeight" Value="64"/>
<Setter Property="Padding" Value="15,12"/>
</Style>
Expand Down
Loading
Loading