[UX] Settings UI refinements #19001
[UX] Settings UI refinements #19001
Conversation
This comment has been minimized.
This comment has been minimized.
| 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}" /> |
There was a problem hiding this comment.
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.
| <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" /> |
There was a problem hiding this comment.
Hmm... I'm concerned these look a bit too much like buttons now:
before:
after:
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
microsoft-github-policy-service
bot
added
the
Needs-Author-Feedback
|
Quick gut check: Terminal runs on Windows 10 still. This doesn't change that, right? |
Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>
microsoft-github-policy-service
bot
removed
the
Needs-Author-Feedback
Nope. all resources that are used are part of WinUI (2/3). |
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:
A few before vs after screenshots: