[UX] Settings UI refinements

[niels9001]

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).

A few before vs after screenshots:

[github-actions[bot]]

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (1)

breadcrumbbar

These words are not needed and should be removed

abcd ABCDEFGHIJ abcdefghijk ABCDEFGHIJKLMNOPQRS ABCDEFGHIJKLMNOPQRST ABCDEFGHIJKLMNOPQRSTUVWXY allocs appium Argb asan autocrlf backported bytebuffer cac CLE codenav codepath commandline COMMITID componentization constness dealloc deserializers DISPATCHNOTIFY DTest entrypoints EVENTID FINDUP foob fuzzer fuzzyfinder hlocal hstring IInput Interner keyscan lstrcmpi Munged numlock offboarded oob pids positionals Productize pseudoterminal remoting renamer roadmap ruleset SELECTALL somefile Stringable tearoff TODOs touchpad TREX Unregistering USERDATA vectorize viewports wsl

To accept these unrecognized words as correct and remove the previously acknowledged and now absent words, you could run the following commands

... in a clone of the [email protected]:niels9001/terminal.git repository on the niels9001/ux-pass branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/v0.0.24/apply.pl' |
perl - 'https://github.com/microsoft/terminal/actions/runs/15438234392/attempts/1'

Errors (1)

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

:x: Errors	Count
:x: ignored-expect-variant	3

See :x: Event descriptions for more information.

:pencil2: Contributor please read this

By default the command suggestion will generate a file named based on your commit. That's generally ok as long as you add the file to your commit. Someone can reorganize it later.

If the listed items are:

• ... misspelled, then please correct them instead of using the command.
• ... names, please add them to .github/actions/spelling/allow/names.txt.
• ... APIs, you can add them to a file in .github/actions/spelling/allow/.
• ... just things you're using, please add them to an appropriate file in .github/actions/spelling/expect/.
• ... tokens you only need in one place and shouldn't generally be used, you can add an item in an appropriate file in .github/actions/spelling/patterns/.

See the README.md in each directory for more information.

:microscope: You can test your commits without appending to a PR by creating a new branch with that extra change and pushing it to your fork. The check-spelling action will run in response to your push -- it doesn't require an open pull request. By using such a branch, you can limit the number of typos your peers see you make. :wink:

If the flagged items are :exploding_head: false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it, try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[DHowett]

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

[niels9001]

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]

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: