Skip to content
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

Fixes #5622 #5624

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fixes #5622 #5624

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
25093fc
added foreground colors to the package.json
pouyakary Jan 16, 2024
923c07e
added foreground colors to status badges of pr requests
pouyakary Jan 16, 2024
1428cd8
fixed the colors
pouyakary Jan 16, 2024
d90a5c2
Applied the changed requested by @alexr00
pouyakary Jan 18, 2024
8dbd6c2
Fix light vs dark, fix var color references
alexr00 Jan 19, 2024
94aaa22
Revert "Fix light vs dark, fix var color references"
alexr00 Jan 19, 2024
decdb2d
Fix merge commit mistake
alexr00 Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2644,6 +2644,16 @@
},
"description": "The color used for indicating that a pull request is merged."
},
{
"id": "pullRequests.merged.foreground",
"defaults": {
"dark": "#FFD9FE",
"light": "#FFD9FE",
"highContrast": "editor.foreground",
"highContrastLight": "editor.foreground"
Copy link
Member

Choose a reason for hiding this comment

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

I'm happy for these to be customizable, but in general it's good to make the colors derive from an existing color. In this case, I think all 4 options here (and for the other new colors) should derive from the current color: button.foreground. This will create the least amount of disruption for users, and give an opportunity to for the color to be automatically configured to something that makes sense with their theme.

Copy link
Member

Choose a reason for hiding this comment

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

If it's better in your theme, I would also be fine with button.secondaryForeground.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the review, and great point! I'll make them as such!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was thinking, and what about using the original GitHub colors to look exactly like the website? Background colors refer to them, so why not the foregrounds?

Copy link
Member

Choose a reason for hiding this comment

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

If you're referring to the open, merged, and draft background colors then matching the website is fine if we don't already do it. I would have to double check and make sure that the colors don't look odd in the default VS Code dark and light themes.

For the foreground, I think it's just black or white on github.com, isn't it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah and I thought we could default to white/black instead of button foreground since the background color is fixed, it would be dangerous to let the foreground be what the theme says (it will break everywhere)

Copy link
Member

Choose a reason for hiding this comment

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

I see now, thanks for elaborating! Yes, this makes sense. I would suggest just one new color to use for all three status badges then: pullRequests.statusForeground.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can we please have the option to customize all of them (because it would make at least my theme much more pretty) and have all of them default to this color?

Copy link
Member

Choose a reason for hiding this comment

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

Sure, that's fine for me. Let's have pullRequests.statusOpenForeground, then have the other pullRequests.status*Foreground values default to pullRequests.statusOpenForeground.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure thing, I'll apply it now

},
"description": "The badge foreground color used for indicating that a pull request is merged."
},
{
"id": "pullRequests.draft",
"defaults": {
Expand All @@ -2654,6 +2664,16 @@
},
"description": "The color used for indicating that a pull request is a draft."
},
{
"id": "pullRequests.draft.foreground",
"defaults": {
"dark": "#EEEEEE",
"light": "#EEEEEE",
"highContrast": "editor.foreground",
"highContrastLight": "editor.foreground"
},
"description": "The badge foreground color used for indicating that a pull request is draft."
},
{
"id": "pullRequests.open",
"defaults": {
Expand All @@ -2664,6 +2684,16 @@
},
"description": "The color used for indicating that a pull request is open."
},
{
"id": "pullRequests.open.foreground",
"defaults": {
"dark": "#E1FFD9",
"light": "#E1FFD9",
"highContrast": "editor.background",
"highContrastLight": "editor.background"
},
"description": "The foreground color of badges used for indicating that an pull request is open."
},
{
"id": "pullRequests.closed",
"defaults": {
Expand All @@ -2674,6 +2704,16 @@
},
"description": "The color used for indicating that a pull request is closed."
},
{
"id": "pullRequests.closed.foreground",
"defaults": {
"dark": "#FFD9D9",
"light": "#FFD9D9",
"highContrast": "editor.background",
"highContrastLight": "editor.background"
},
"description": "The foreground color of badges used for indicating that an pull requests is closed."
},
{
"id": "pullRequests.notification",
"defaults": {
Expand Down
4 changes: 4 additions & 0 deletions webviews/editorWebview/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,18 +488,22 @@ body button .icon {

.status-badge-merged {
background-color: var(--vscode-pullRequests-merged);
color: var(--vscode-pullRequests-merged-foreground)
}

.status-badge-open {
background-color: var(--vscode-pullRequests-open);
pouyakary marked this conversation as resolved.
Show resolved Hide resolved
color: var(--vscode-pullRequests-open-foreground)
}

.status-badge-closed {
background-color: var(--vscode-pullRequests-closed);
color: var(--vscode-pullRequests-closed-foreground)
}

.status-badge-draft {
background-color: var(--vscode-pullRequests-draft);
color: var(--vscode-pullRequests-draft-foreground)
}

.section {
Expand Down