Update remote statusbar item

[simurai]

This updates the statusBarItem.remoteForeground/Background to match the rest of the status bar:

Before	After

It's a combination of

• [x] https://github.com/primer/github-vscode-theme/pull/172
• [x] https://github.com/primer/github-vscode-theme/pull/237

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 6bc9e1a21f3251b1064683e8d8fce4172a56e2a5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------------------- | ----- | | github-vscode-theme | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

Colors changed

```diff --- base/themes/dark-colorblind.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/dark-colorblind.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#161b22", + "statusBarItem.remoteForeground": "#8b949e", + "statusBarItem.remoteBackground": "#0d1117", "editorGroupHeader.tabsBackground": "#010409", --- base/themes/dark-default.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/dark-default.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#161b22", + "statusBarItem.remoteForeground": "#8b949e", + "statusBarItem.remoteBackground": "#0d1117", "editorGroupHeader.tabsBackground": "#010409", --- base/themes/dark-dimmed.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/dark-dimmed.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#2d333b", + "statusBarItem.remoteForeground": "#768390", + "statusBarItem.remoteBackground": "#22272e", "editorGroupHeader.tabsBackground": "#1c2128", --- base/themes/dark-high-contrast.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/dark-high-contrast.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#272b33", + "statusBarItem.remoteForeground": "#f0f3f6", + "statusBarItem.remoteBackground": "#0a0c10", "editorGroupHeader.tabsBackground": "#010409", --- base/themes/dark.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/dark.json 2022-03-17 04:11:14.409274781 +0000 @@ -80,2 +80,4 @@ "statusBarItem.prominentBackground": "#282e34", + "statusBarItem.remoteForeground": "#d1d5da", + "statusBarItem.remoteBackground": "#24292e", "editorGroupHeader.tabsBackground": "#1f2428", --- base/themes/light-colorblind.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/light-colorblind.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#f6f8fa", + "statusBarItem.remoteForeground": "#57606a", + "statusBarItem.remoteBackground": "#ffffff", "editorGroupHeader.tabsBackground": "#f6f8fa", --- base/themes/light-default.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/light-default.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#f6f8fa", + "statusBarItem.remoteForeground": "#57606a", + "statusBarItem.remoteBackground": "#ffffff", "editorGroupHeader.tabsBackground": "#f6f8fa", --- base/themes/light-high-contrast.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/light-high-contrast.json 2022-03-17 04:11:14.409274781 +0000 @@ -82,2 +82,4 @@ "statusBarItem.prominentBackground": "#e7ecf0", + "statusBarItem.remoteForeground": "#24292f", + "statusBarItem.remoteBackground": "#ffffff", "editorGroupHeader.tabsBackground": "#ffffff", --- base/themes/light.json 2022-03-17 04:11:17.021492976 +0000 +++ themes/light.json 2022-03-17 04:11:14.409274781 +0000 @@ -80,2 +80,4 @@ "statusBarItem.prominentBackground": "#e8eaed", + "statusBarItem.remoteForeground": "#586069", + "statusBarItem.remoteBackground": "#fff", "editorGroupHeader.tabsBackground": "#f6f8fa", ```

[lukewiwa]

The remote part of the status bar is a different colour by design in all the stock themes. Can we differentiate it somehow from the rest of the status bar? This is inconsistent with all other themes.

[simurai]

Can we differentiate it somehow from the rest of the status bar?

I think the only two tokens we can change is statusBarItem.remoteForeground and statusBarItem.remoteBackground.

Personally I think a blue background is a bit too strong and looks like the remote connection is active/enabled. I wish there is a way to differentiate that. Also see related comment: https://github.com/primer/github-vscode-theme/discussions/301#discussioncomment-3168141

Maybe a compromise could be to make it light gray. Then it would be "separated" from the rest of the status bar, but doesn't look as strong as the blue counters for example. Also, people that never use that feature can disable it from the right-click menu if it bothers them:

/cc @cateiru @ZWhitey for thoughts 💭

[lukewiwa]

We can take inspiration from some of the stock themes. For example the Quiet Light theme uses a different shade rather than a different colour:

I definitely use the colour and size of the bar to quickly differentiate whether I'm in a container or not. I'm not sure how much other people care, however this definitely is inconsistent with other themes.

[fiqrisr]

We can take inspiration from some of the stock themes. For example the Quiet Light theme uses a different shade rather than a different colour:

I definitely use the colour and size of the bar to quickly differentiate whether I'm in a container or not. I'm not sure how much other people care, however this definitely is inconsistent with other themes.

Agree

[simurai]

For example the Quiet Light theme uses a different shade rather than a different colour:

Yeah, the GitHub theme (and some others) don't really have a specific color for the status bar. I guess keeping it subtle and less prominent. So to differentiate the remote button from the rest, we could make it a different shade (darken) with light gray. Here an example:

[lukewiwa]

@simurai I'm a fan