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.

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

High Contrast themes have the same border color for focused and unfocused active tabs #145563

Closed
Z-E-D opened this issue Mar 21, 2022 · 4 comments · Fixed by #155776
Closed

High Contrast themes have the same border color for focused and unfocused active tabs #145563

Z-E-D opened this issue Mar 21, 2022 · 4 comments · Fixed by #155776
Assignees
Labels
accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues insiders-released Patch has been released in VS Code Insiders themes Color theme issues
Milestone

Comments

@Z-E-D
Copy link

Z-E-D commented Mar 21, 2022

High Contrast themes have "focusBorder" color that is the same for the active and unfocusedActive tabs, i.e. the active tabs in different groups:

Tabs
:

Because of that it is somewhat harder to distinguish which group currently has the focus. It would be better if the border line of the active tab in unfocused group is dotted (to be different than the hovered tabs that have dashed border line). Or, even better, it would be nice if you add one new color setting available to themes, e.g. "unfocusBorder", or something like that.

@daviddossett daviddossett added this to the April 2022 milestone Mar 21, 2022
@daviddossett daviddossett added themes Color theme issues accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues labels Mar 21, 2022
@daviddossett
Copy link
Contributor

@bpasero I see we're drawing the outline for any active tab in a high contrast theme. It doesn't look like we're checking for the active editor group if I'm reading the code correctly:

// Styling with Outline color (e.g. high contrast theme)
const activeContrastBorderColor = theme.getColor(activeContrastBorder);
if (activeContrastBorderColor) {
collector.addRule(`
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active,
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover {
outline: 1px solid;
outline-offset: -5px;
}

We already used the dashed border for hover on inactive tabs, which I think makes sense. One thought here would be use a less prominent color that somehow conveys "inactive" without dimming the text like we do for many other normal light/dark themes. This is just using an unrelated token to get the point across:

CleanShot 2022-03-30 at 14 50 53@2x

I'd agree that it would be useful to have this theme token exposed for themes to configure.

@bpasero
Copy link
Member

bpasero commented Mar 31, 2022

💯 for using a different contrast color for active vs. inactive group 👍

@Z-E-D
Copy link
Author

Z-E-D commented Mar 31, 2022

I am glad that you are taking this onto the consideration.

I just want to mention again my suggestion with the dotted line, because I think it has its analogy with the items in the primary side bar. For example, if you have displayed Open Editors and Folders at the same time; there we have a solid line for active item in focused panel (e.g. Open Editors), a dashed line for hovered item and a dotted line for the active item in unfocused panel (e.g. Folders).

@Z-E-D
Copy link
Author

Z-E-D commented Mar 31, 2022

Now when I think more about this issue, I want to add one more suggestion, if you don't mind. If I have e.g. opened two groups, I think that both active tabs in these two groups should have dotted lines when they both lose focus, e.g. if user activate side panel or Terminal or whatever else.

Here is again the analogy with the side bar. If I have opened two panels, e.g. Open Editors and Folders, and if one of them is focused, its active item will have solid line while the active item in the unfocused panel will have dotted line. However, if you give focus to editor, they both (Open Editors and Folders) will have active items with the dotted line, because neither of them has focus anymore.

I think that the same thing should be applied to the border line of the tabs, i.e. none tab should have solid border line when none editor has focus.

EDIT: I just created a new issue for this new suggestion.

@aeschli aeschli removed their assignment Apr 25, 2022
@daviddossett daviddossett modified the milestones: April 2022, Backlog Apr 27, 2022
@daviddossett daviddossett modified the milestones: Backlog, July 2022 Jul 20, 2022
daviddossett added a commit that referenced this issue Jul 20, 2022
#145563) (#155776)

* Show only one active & focused tab across editor groups in hc themes

* Use dotted line for active, dashed for hover
@VSCodeTriageBot VSCodeTriageBot added unreleased Patch has not yet been released in VS Code Insiders insiders-released Patch has been released in VS Code Insiders and removed unreleased Patch has not yet been released in VS Code Insiders labels Jul 20, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Sep 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues insiders-released Patch has been released in VS Code Insiders themes Color theme issues
Projects
Status: 💻 In Development
Development

Successfully merging a pull request may close this issue.

5 participants