nordtheme / jetbrains

An arctic, north-bluish clean and elegant JetBrains IDE UI and editor color theme.
https://www.nordtheme.com/ports/jetbrains
MIT License
351 stars 50 forks source link

Improve visual editor & tool window tab styles #185

Closed arcticicestudio closed 2 years ago

arcticicestudio commented 2 years ago

"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 and TAB_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. https://github.com/arcticicestudio/nord-jetbrains/issues/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. 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 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. 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 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.
  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.

Related to arcticicestudio/nord-jetbrains#99