Skip to content

[Misc.] Define theme for Cloud Shell #17283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jiasli merged 1 commit into from
Apr 20, 2021
Merged

[Misc.] Define theme for Cloud Shell #17283

jiasli merged 1 commit into from
Apr 20, 2021

Conversation

@jiasli
Copy link
Member

@jiasli jiasli commented Mar 11, 2021 •
edited
Loading

Depends on microsoft/knack#238

Description

In Cloud Shell, SECONDARY test's color Bright Black (#555753) in the color palette violates the required Contrast Ratio of 4.5:1

  • In Bash, #555753 on #000000 background has Contrast Ratio of 2.87:1
  • In PowerShell, #555753 on #092457 background has Contrast Ratio of 2.05:1

Changes

  • Hardcoding RGB values of Cloud Shell-specific theme, as users can't change the color palette of Cloud Shell
  • Make SECONDARY text's Bight Black lighter
  • Refine other colors to make them more pleasing

Cloud Shell theme:

Style color
PRIMARY #ffffff
SECONDARY #bcbcbc
IMPORTANT #f887ff
ACTION #6cb0ff
HYPERLINK #72d7d8
ERROR #f55d5c
SUCCESS #70d784
WARNING #fbd682

Testing Guide

az demo style --theme cloud-shell

Before & After in Bash

Demo style - az demo style

1-1
image

Error handling - az group lsit

2-1
2-2

Before & After in PowerShell

Demo style - az demo style

image
image

Error handling - az group lsit

4-1
4-2

@yonzhan
Copy link
Collaborator

yonzhan commented Mar 11, 2021

Style

@yonzhan yonzhan added this to the S184 milestone Mar 11, 2021
@jiasli jiasli added the style label Mar 11, 2021
@jiasli
Copy link
Member Author

jiasli commented Mar 12, 2021 •
edited
Loading

Green #70d784, cyan #72d7d8 and blue #6cb0ff and are little bit close, but given the choices on Cloud Shell are very limited, this is the best we can get for both contrast and aesthetic.

image

This was referenced Mar 18, 2021
Closed
Merged
@yonzhan yonzhan modified the milestones: S184, S185 Mar 20, 2021
@yonzhan yonzhan modified the milestones: S185, S186 Apr 10, 2021
evelyn-ys
evelyn-ys approved these changes Apr 14, 2021
View reviewed changes
Copy link
Member

@evelyn-ys evelyn-ys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

щ(ʘ╻ʘ)щ

@jiasli jiasli force-pushed the theme-cloud-shell branch from c849b8e to ddaf2e5 Compare April 16, 2021 09:18
@jiasli jiasli merged commit 823b9c6 into Azure:dev Apr 20, 2021
@jiasli jiasli deleted the theme-cloud-shell branch April 20, 2021 05:57
@jiasli jiasli changed the title [Style] Define theme for Cloud Shell [Misc.] Define theme for Cloud Shell Apr 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@evelyn-ys evelyn-ys evelyn-ys approved these changes

@zhoxing-ms zhoxing-ms zhoxing-ms approved these changes

@fengzhou-msft fengzhou-msft Awaiting requested review from fengzhou-msft

@houk-ms houk-ms Awaiting requested review from houk-ms

@jsntcy jsntcy Awaiting requested review from jsntcy jsntcy is a code owner

@Juliehzl Juliehzl Awaiting requested review from Juliehzl

Assignees

@jiasli jiasli

Labels

style

Projects

None yet

Milestone

S186

Development

Successfully merging this pull request may close these issues.

4 participants

@jiasli @yonzhan @evelyn-ys @zhoxing-ms