Align highlight and hyperlink colours with design pattern guide #4847
Conversation
JeffreyCA
requested review from
wbreza,
vhvb1989,
hemarina and
weikanglim
as code owners
|
We have a few usages of magenta in a few places, which I didn't touch in this PR and am open to further discussion on:
I also left all the "UX v2" components introduced by #4696 under @wbreza / @SophCarp do you know if there are any plans to do so? Are they already consistent with the design guide? Or will there be a new colour scheme? |
Yes, they should be consistent and updated to leverage our pattern functions. Initially these might have shipped under a different module but they won't for now. This is what the colors look like on my windows terminal... |
There was a problem hiding this comment.
Looks good, i would just verify the colors show as intended. Blue tends to render much darker than the intended color from the screen shot in my opinion.
To me Cyan is better match for Blue and HiCyan a better match for Cyan.
This is what the colors look like on my windows terminal.
|
This is great, thank you Jeffrey! If we want a conversation about using Cyan over blue, we can. Currently the design we have states that Cyan is only for hyperlinks, and blue is for everything else. inconsistently using the colors is the main thing. I approve this work, and then we can take an action item to discuss the updating the color scheme designs |
|
I also don't know about the magenta. Will take a look |
|
Thanks for pointing that out, @wbreza! I can also confirm that the new blue is a bit darker in Windows Terminal and may be harder to read. I went back and gathered screenshots for different combinations for the highlight and hyperlink colours in VS Code and Windows Terminal. Here's an comparison of the before/after along with other combinations we could use: Personally, Bright Blue for highlights (commands, parameters, system inputs) and Bright Cyan for hyperlinks looks like a better combination that resembles the design guide the closest on out-of-the-box Windows Terminal and VS Code configurations. @SophCarp any thoughts? I'm also fine if we want to merge this with the current (non-bright) Blue / Cyan mapping. |
|
Love the comparison chart! Out of all of these, I think Bright Blue/Bright Cyan gives the best combo or readability and distinction. Can I get the updated PR to try out on my computer? |
JeffreyCA
force-pushed
the
jeffreyca/4846/colour-consistency
branch
from
73eab8b to
c2ccd67
Compare
|
Solarized light: Solarized Dark: Tango Dark: Ubuntu: Vintage: My main issue is that solarized themes grey out any high color. Also, apparently there is DevDiv design guidance for terminal coloring but the link is dead. I'm asking the design team where the resource got moved, and will get back to you! |
|
I'm not sure how common solarized themes are - I personally prefer them and use them, but I don't know how to check its popularity |
|
Okay, after looking at the popular themes (thanks Jeffrey for the Kusto query!) My design opinion:
This ensures that the colors are both visually distinct and the bright blue is easily legible in the most common themes Thanks for all the brainstorming! |
JeffreyCA
force-pushed
the
jeffreyca/4846/colour-consistency
branch
from
0f69f50 to
2de0efa
Compare
|
Thanks for your help looking into this @SophCarp! Pushed a fix so the prompt hints and responses are also bright blue:
|
JeffreyCA
changed the title
Azure Dev CLI Install InstructionsInstall scriptsMacOS/Linux
bash: pwsh: WindowsPowerShell install MSI install Standalone Binary
MSI
Documentationlearn.microsoft.com documentationtitle: Azure Developer CLI reference
|
Fixes #4846 to align with our design pattern guide:
This PR also replaces several instances of
color.XYZStringwith the appropriate wrapper functions from pkg/output/colors.go:azure-dev/cli/azd/pkg/output/colors.go
Lines 12 to 24 in fbe4819
Comparisons (left: without changes, right: with changes)
azd helpazd initazd addazd showDifference is minor - we were using Bright Blue instead of Blue.