[UX] Settings UI refinements #19001

niels9001 · 2025-06-04T09:05:08Z

This PR is a (first) design pass on the Terminal settings UX to bring consistency and alignment with the rest of the OS and other settings surfaces.

High-level changes include:

Using WinUI brushes vs. UWP/OS brushes. See brushes overview in the WinUI 3 Gallery:.
Updating pixel values for margins, fontsizes, paddings etc. using units of 4. See the design guidelines for more info.
Adding rounded corners on various elements to be consistent with the Windows 11 look and feel (using the ControlCornerRadius or OverlayCornerRadius WinUI resources as much as possible).
Decreasing the page header titles / breadcrumb so it feels a bit less cramped.
Fixing a bug where the title of the page was not aligned with the content when resizing the window (note to self: should fix this in PowerToys too):
Ensuring the subheader texts for settings categories are inline with the rest of the OS (== decreasing the fontsize).

carlos-zamora

Love all the changes you've made. Thank you so much!

There's just a few changes that I'm uncertain of. Added a comment and my thoughts. Let me know what you think. I'm excited to see this land soon!

src/cascadia/TerminalSettingsEditor/MainPage.xaml

src/cascadia/TerminalSettingsEditor/Extensions.xaml

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

carlos-zamora · 2025-06-04T22:30:21Z

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml

-                                Margin="10,0,0,0"
-                                Padding="2,0,2,0"
+                                Margin="12,0,0,0"
+                                Padding="8,4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
-                                Background="{ThemeResource SystemAltMediumLowColor}"
-                                BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
+                                Background="{ThemeResource SubtleFillColorSecondaryBrush}"
+                                BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}"
                                BorderThickness="1"
-                                CornerRadius="1"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
                                Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
                            <TextBlock x:Uid="ColorScheme_DefaultTag"
                                       Grid.Column="1"
                                       AutomationProperties.AccessibilityView="Raw"
-                                       Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}" />


📝
before:

after:

Was the existing token style by design? In WinUI we use 4px as a minimum margin around text so it's legible. The brushes that were previously used are not part of WinUI but OS.

carlos-zamora · 2025-06-04T22:35:41Z

src/cascadia/TerminalSettingsEditor/Actions.xaml

-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
-                        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+                        <Setter Property="Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
+                        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+                        <Setter Property="Padding" Value="4,4,4,4" />


Hmm... I'm concerned these look a bit too much like buttons now:

before:

after:

Why does it need to be a different color anyway? Couldn't it just be a regular label / text?
If I had to pick between the two images though, I'd prefer the button style.

We are actually working with the design team to figure this out; we have shortcut visualizations across PowerToys, Terminal and Windows itself - and things are a bit all over the place.

Once we have better specs for this, we can implement it here too? Shall I revert for now?

Once we have better specs for this, we can implement it here too? Shall I revert for now?

I support this, revert for now and return to it once the design team has finalized what it should look like

so did we revert it? I notice it's still in the "after" screenshots...

src/cascadia/TerminalSettingsEditor/Actions.xaml

carlos-zamora · 2025-06-04T22:41:02Z

src/cascadia/TerminalSettingsEditor/Actions.xaml

FYI @PankajBhojwani is actively working on this page over in #18917. We should make sure some of this styling is carried over in the new subpage.

src/cascadia/TerminalSettingsEditor/MainPage.xaml

DHowett · 2025-06-04T23:18:07Z

Quick gut check: Terminal runs on Windows 10 still. This doesn't change that, right?

Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>

niels9001 · 2025-06-17T15:16:21Z

Quick gut check: Terminal runs on Windows 10 still. This doesn't change that, right?

Nope. all resources that are used are part of WinUI (2/3).

carlos-zamora

Tested the branch locally and went through some of the pages (i.e. Extensions, Profile > Appearance) and controls (i.e. nullable color picker settings) comparing them to what's in Canary. Looks good to me. Thank you so much for doing this 😊

carlos-zamora · 2025-07-16T17:45:59Z

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

    <!--  Used to stack a group of settings  -->
    <Style x:Key="SettingsStackStyle"
           TargetType="StackPanel">
-        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
    </Style>

    <!--  Used to stack a group of settings inside a pivot  -->
    <Style x:Key="PivotStackStyle"
           TargetType="StackPanel">
-        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
    </Style>


Huh, looks like we can merge the two and just keep SettingsStackStyle around. PivotStackStyle was probably introduced back when we had a Pivot control ages ago.

If you're interested, feel free to do this as a part of this PR. Not a requirement though. More just something I took note of 😊

carlos-zamora · 2025-07-22T23:46:16Z

Demo

These were originally in the PR body. Moved the images out into their own thread.

Fixing a bug where the title of the page was not aligned with the content when resizing the window (note to self: should fix this in PowerToys too):
Ensuring the subheader texts for settings categories are inline with the rest of the OS (== decreasing the fontsize).

A few before vs after screenshots:

Reverts most of the styling changes done in #19001 to the key chords displayed in the SUI's Actions page. The `CornerRadius` was kept at the updated value of `ControlCornerRadius` for consistency. The only other changes in #19001 that were kept for this page include: - `EditButtonIconSize`: 15 --> 14 - `AccentEditButtonStyle` > `Padding`: 3 --> 4 - Command name's `FontWeight` reduced to `Normal` - `AddNewButton` > `Margin` added (set to `0,12,0,0` to provide spacing between breadcrumb header and button)

niels9001 added 5 commits June 3, 2025 20:03

UX tweaks

182c079

Merge remote-tracking branch 'upstream/main' into niels9001/ux-pass

3d4293d

XAML formatting

c93f315

Update MainPage.xaml

788db03

Fixes

e255aa7

This comment has been minimized.

Sign in to view

carlos-zamora requested changes Jun 4, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback label Jun 4, 2025

carlos-zamora reviewed Jun 4, 2025

View reviewed changes

src/cascadia/TerminalSettingsEditor/MainPage.xaml Outdated Show resolved Hide resolved

Update src/cascadia/TerminalSettingsEditor/MainPage.xaml

7519db9

Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>

microsoft-github-policy-service bot removed the Needs-Author-Feedback label Jun 5, 2025

Update Extensions.xaml

ac54d0a

Update CommonResources.xaml

abdd847

carlos-zamora approved these changes Jul 16, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into niels9001/ux-pass

aeef0ce

carlos-zamora merged commit 48b796f into microsoft:main Jul 23, 2025
15 checks passed

carlos-zamora mentioned this pull request Jul 23, 2025

Update key chord styling in actions page #19164

Merged

[UX] Settings UI refinements #19001

[UX] Settings UI refinements #19001

Uh oh!

Conversation

niels9001 commented Jun 4, 2025 • edited by carlos-zamora Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

carlos-zamora left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

carlos-zamora Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

niels9001 Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

lhecker Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

niels9001 Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

PankajBhojwani Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

DHowett Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

carlos-zamora Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DHowett commented Jun 4, 2025

Uh oh!

niels9001 commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carlos-zamora left a comment

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

carlos-zamora commented Jul 22, 2025

Demo

Uh oh!

Uh oh!

Uh oh!

niels9001 commented Jun 4, 2025 •

edited by carlos-zamora

Loading

niels9001 Jun 17, 2025 •

edited

Loading

lhecker Jun 17, 2025 •

edited

Loading

niels9001 commented Jun 17, 2025 •

edited

Loading