-
-
Notifications
You must be signed in to change notification settings - Fork 49
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
Improve visual editor & tool window tab styles #185
Milestone
Comments
arcticicestudio
added a commit
that referenced
this issue
Oct 6, 2021
"Nord Jetbrains" is a project that exists for a long and therefore has code which reflects the history and changes made to the JetBrains products. This includes the editor scheme [1] which is responsible for language syntax highlighting, but before JetBrains officially supported UI themes [2] it also defined XML keys for some UI elements which were possible to be styled. Some of them are the `TAB_SELECTED` and `TAB_SELECTED_INACTIVE` keys [4] which, as the name suggests, were used for the visual appearance (back- and foreground color) of tabs, e.g. the ones for the editor. After official UI themes were introduced and this project added support for it [3] I thought that the XML keys from the editor scheme are not used anymore and I left them for some backwards compatibility. Anyway, it seems like these keys are still used even when a theme plugin provides a UI theme (JSON). This resulted in conflicts between the XML and JSON keys and caused me hours of unnecessary debugging the UI theme while the root cause was that the XML keys took precedence. Users also often reported issues, e.g. #99 [5], which I was not able to fix due to this mix of keys. After digging into the open sourced code of the JetBrains products I was finally able to get more insights about the logic how these are handled. Next to this the UI theme API also evolved a lot and supports all styles which were only supported by the XML keys before. Therefore the XML keys have finally been removed, starting with the ones for tabs (`TAB_*`). The scope is to... 1. improve the style of tool window tabs (the ones that are "merged" with the header of a pinned/docked panel/window) in a way that makes the active tab more distinguishable in active & inactive status. 1.1 The selected and active tab now use the special "brightened comment" color as background to stand out from the underlying header bar that uses the currently brightest color `nord3` from the "Polar Night" palette. 1.2 The bottom stripe of selected but inactive tabs now also use the special "brightened comment" color to distinguish itself from the tab background. 2. improve the style of editor tabs regarding the visual alignment with tool window tabs and element states, e.g. when being hovered. 2.1 Selected (active) and unselected tabs now use `nord3` as background color for better visibility. 2.2 The bottom stripe of selected but inactive tabs now use the special "brightened comment" color to distinguish itself from the tab background. 3. make use of the new `DefaultTabs` UI theme key group in order to unify the style of all tab elements across the UI. This allows to remove redundant keys from element specific keys, e.g. the ones from `EditorTabs` that are almost duplicates of the `HeaderTab` key group. 4. remove deprecated XML keys: 4.1 `TAB_SELECTED` - Replaced by the UI key `ui.DefaultTabs.background`. 4.2 `TAB_SELECTED_INACTIVE` - Replaced by the UI key `ui.DefaultTabs.inactiveUnderlineColor`. 4.3 `TAB_UNDERLINE` - Replaced by the UI key `ui.DefaultTabs.underlineColor`. 4.4 `TAB_UNDERLINE_INACTIVE` - Not styled anymore. [1]: https://plugins.jetbrains.com/docs/intellij/themes-extras.html?from=jetbrains.org [2]: https://blog.jetbrains.com/idea/2019/03/brighten-up-your-day-add-color-to-intellij-idea [3]: #43 [4]: https://github.com/arcticicestudio/nord-jetbrains/blob/ae716da0e52a512c3803fb4f42ab3b3c68370548/resources/themes/nord.xml#L5042-L5053 [5]: #99 Co-authored-by: Sven Greb <[email protected]> Closes GH-185
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
"Nord Jetbrains" is a project that exists for a long and therefore has code which reflects the history and changes made to the JetBrains products.
This includes the editor scheme which is responsible for language syntax highlighting, but before JetBrains officially supported UI themes it also defined XML keys for some UI elements which were possible to be styled. Some of them are the
TAB_SELECTED
andTAB_SELECTED_INACTIVE
keys which, as the name suggests, were used for the visual appearance (back- and foreground color) of tabs, e.g. the ones for the editor. After official UI themes were introduced and this project added support for it I thought that the XML keys from the editor scheme are not used anymore and I left them for some backwards compatibility. Anyway, it seems like these keys are still used even when a theme plugin provides a UI theme (JSON).This results in conflicts between the XML and JSON keys and caused me hours of unnecessary debugging the UI theme while the root cause was that the XML keys took precedence. Users also often reported issues, e.g. #99, which I was not able to fix due to this mix of keys.
After digging into the open sourced code of the JetBrains products I was finally able to get more insights about the logic how these are handled. Next to this the UI theme API also evolved a lot and supports all styles which were only supported by the XML keys before. Therefore the XML keys will finally be removed, starting with the ones for tabs (
TAB_*
).The scope of this issue is to…
1.1 The selected and active tab will use the special "brightened comment" color as background to stand out from the underlying header bar that uses the currently brightest color
nord3
from the "Polar Night" palette.1.2 The bottom stripe of selected but inactive tabs will also use the special "brightened comment" color to distinguish itself from the tab background.
2.1 Selected (active) and unselected tabs will use
nord3
as background color for better visibility.2.2 The bottom stripe of selected but inactive tabs will use the special "brightened comment" color to distinguish itself from the tab background.
DefaultTabs
UI theme key group in order to unify the style of all tab elements across the UI. This allows to remove redundant keys from element specific keys, e.g. the ones fromEditorTabs
that are almost duplicates of theHeaderTab
key group.4.1
TAB_SELECTED
— Replaced by the UI keyui.DefaultTabs.background
.4.2
TAB_SELECTED_INACTIVE
— Replaced by the UI keyui.DefaultTabs.inactiveUnderlineColor
.4.3
TAB_UNDERLINE
— Replaced by the UI keyui.DefaultTabs.underlineColor
.4.4
TAB_UNDERLINE_INACTIVE
— Not styled anymore.Related to #99
The text was updated successfully, but these errors were encountered: