Replace Bold with SemiBold; clean up new-tab tooltip typography#20237
Replace Bold with SemiBold; clean up new-tab tooltip typography#20237niels9001 wants to merge 3 commits into
Conversation
Bold and Italic are not part of the Fluent typography ramp. As a first pass: - Replace all FontWeight=Bold usages in TerminalApp with SemiBold (matches Fluent's BodyStrong). - SuggestionsControl description title - Default-profile flyout item in the new-tab dropdown - HighlightedTextControl fallback run style for matched text - Remove the italic styling on the new-tab '+' button tooltip and the per-profile dropdown tooltip; insert a blank line between the title and the shortcut hints; add spaces around '+' in the en-US shortcut strings (Alt + Click / Shift + Click / Ctrl + Click). Part of #20228 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
| TargetType="TextBlock"> | ||
| <Setter Property="FontStyle" Value="Italic" /> | ||
| </Style> | ||
|
|
| const auto conflictingCmdName{ conflictingCmd.Name() }; | ||
| TextBlock conflictingCommandNameTB{}; | ||
| conflictingCommandNameTB.Text(fmt::format(L"\"{}\"", conflictingCmdName.empty() ? RS_(L"Actions_UnnamedCommandName") : conflictingCmdName)); | ||
| conflictingCommandNameTB.FontStyle(Windows::UI::Text::FontStyle::Italic); |
There was a problem hiding this comment.
📝 Before:
This just removes the italic styling.
I'm ok with that
carlos-zamora
left a comment
There was a problem hiding this comment.
Some of the changes I agree with.
For others, I'm a bit concerned about removing the styling entirely. I think there's value to applying some kind of styling to key bindings or responses from the system.
That said, if there are good cases where the OS already follows this design pattern, I'm willing to set my thoughts aside for the sake of consistency.
| newTabRun.Text(RS_(L"NewTabRun/Text")); | ||
| auto newPaneRun = WUX::Documents::Run(); | ||
| newPaneRun.Text(RS_(L"NewPaneRun/Text")); | ||
| newPaneRun.FontStyle(FontStyle::Italic); | ||
| auto newWindowRun = WUX::Documents::Run(); | ||
| newWindowRun.Text(RS_(L"NewWindowRun/Text")); | ||
| newWindowRun.FontStyle(FontStyle::Italic); | ||
| auto elevatedRun = WUX::Documents::Run(); | ||
| elevatedRun.Text(RS_(L"ElevatedRun/Text")); | ||
| elevatedRun.FontStyle(FontStyle::Italic); |
There was a problem hiding this comment.
I'm ok with removing the italic formatting and adding a line break.
I think we should still have some kind of styling on the key chords though. Perhaps semi-bold so that the user's attention is drawn to the key chord? Or even just applying italic to the key chords?
Before:
After:
| <Run x:Uid="NewTabRun" /> <LineBreak /> | ||
| <Run x:Uid="NewPaneRun" | ||
| FontStyle="Italic" /> <LineBreak /> | ||
| <Run x:Uid="NewWindowRun" | ||
| FontStyle="Italic" /> | ||
| <Run x:Uid="NewTabRun" /> <LineBreak /><LineBreak /> | ||
| <Run x:Uid="NewPaneRun" /> <LineBreak /> | ||
| <Run x:Uid="NewWindowRun" /> |
There was a problem hiding this comment.
Same feedback as https://github.com/microsoft/terminal/pull/20237/changes#r3269347031
| auto keyChordRun = WUX::Documents::Run(); | ||
| keyChordRun.Text(_keyChord); | ||
| keyChordRun.FontStyle(winrt::Windows::UI::Text::FontStyle::Italic); | ||
| textBlock.Inlines().Append(WUX::Documents::LineBreak{}); |
There was a problem hiding this comment.
Similar feedback to https://github.com/microsoft/terminal/pull/20237/changes#r3269347031
Perhaps we can apply consistent styling to the key chords here that we use there? Like, what if we changed the foreground color to be TextFillColorSecondaryBrush like in the dropdown page? Or semi-bold?
I don't mind the left-alignment and the line break. It
Before:
After:
| <TextBlock Padding="12,0" | ||
| VerticalAlignment="Center" | ||
| FontStyle="Italic" | ||
| Text="{x:Bind NoMatchesText, Mode=OneWay}" /> |
There was a problem hiding this comment.
Mildly concerned that removing italic styling here would make it look like a regular option. I feel like we should still have some kind of styling applied on this to show that the system is alerting the user, no? Italic is lightweight and worked. Maybe semibold? Or TextFillColorSecondaryBrush foreground coloring?
| @@ -358,8 +358,8 @@ | |||
|
|
|||
| <ScrollViewer MaxHeight="200" | |||
| VerticalScrollBarVisibility="Auto"> | |||
| <TextBlock FontStyle="Italic" | |||
| Text="{x:Bind ParsedCommandLineText, Mode=OneWay}" | |||
| <TextBlock Text="{x:Bind ParsedCommandLineText, Mode=OneWay}" | |||
| TextAlignment="Left" | |||
| TextWrapping="Wrap" /> | |||
There was a problem hiding this comment.
Can we get a before/after of this?
Summary
A first pass at the issues raised in #20228 around non-Fluent
Bold/Italictypography in TerminalApp.Closes: #20228
Changes
Bold → SemiBold
Replace
FontWeight=BoldwithSemiBold(matches Fluent'sBodyStrongstyle):SuggestionsControl.xaml— the description title shown above a suggestion's body.TerminalPage.cpp— the default-profile entry in the new-tab dropdown flyout.HighlightedTextControl.cpp— fallback run style used to render matched characters (e.g. in the Command Palette / snippets list).New-tab
+button + per-profile dropdown tooltipFontStyle=Italicfrom the shortcut-hint runs in both tooltips (TabRowControl.xamland the dropdown tooltip built inTerminalPage.cpp).Open a new tab) and the shortcut hints.+in the en-US shortcut strings:Alt + Click to split the current windowShift + Click to open a new windowCtrl + Click to open as administratorOther locales will be updated by the localization team.
Validation
+button → tooltip has the new layout/spacing, no italics.showSuggestionson a snippet/task with a description → the description title is SemiBold.Before:
After:
Before:
After:
Before:
After:
Before:
After:
