vjpr / atom-webstorm-ui-theme

A port of the default UI theme for JetBrains' Webstorm/IntelliJ IDE.

JetBrains WebStorm Default Light UI Theme for Atom

A port of the default UI theme for JetBrains' Webstorm/IntelliJ IDE.

For those who are homesick after leaving JetBrains IDEs :)

Usage

Select Atom Webstorm in Settings > Themes > UI Theme.

Core

• tabs - Pixel perfect squared tabs, and exact UI colors.
• tree-view - Left panel font size, line spacing, and background color.
• File and folder icons. (Maybe a separate package?)
• Popups.
• Tool panel.

Community

• Wallaby
• Linter

See Also

• atom-webstorm-syntax-theme
• atom-webstorm-keymap

atom-webstorm-ui-theme's Issues

Improvements

• Shrink status bar
• Scroll bar appearance
• Use hide tool window icon
• tree-view tool window icons (This would require a plugin)
• Code inspection editor icon
• Make tab close icon exactly the same

Provide a gap to the right of the tabs for double-clicking to create new tab

It's not exactly WebStorm, but it is useful.

Tab style improvements

I forked Atom Light which had skewed Chrome-like tabs which had some crazy CSS.

I need to look into Atom One's styling because it uses squared tabs.

• The tab focus behaviour is different
• Text runs under the tab close icon - it should be faded like WS
• Left margin is wrong on some tabs

Highlight on .git folder is problematic

Create a plugin to automatically take screenshots of all files in the samples directory

This could be useful for all syntax plugins to quickly create previews

Tab top border color incorrect

When checking the pixel color of the top tab border color with an Colors.app it is different to what is set in the CSS.

Couldn't see any shadows covering it or opacity.

I had to change it to a lighter color in CSS than what WebStorm used to get it to render the right color.

Strange...

Deprecated selector in `atom-webstorm-ui-theme\index.less`

In atom-webstorm-ui-theme\index.less:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

• atom-text-editor[mini], atom-text-editor[mini]::shadow => atom-text-editor[mini], atom-text-editor[mini].editor

• atom-text-editor[mini] .cursor, atom-text-editor[mini]::shadow .cursor => atom-text-editor[mini] .cursor, atom-text-editor[mini].editor .cursor

• atom-text-editor[mini] .selection .region, atom-text-editor[mini]::shadow .selection .region => atom-text-editor[mini] .selection .region, atom-text-editor[mini].editor .selection .region

• atom-text-editor[mini] .placeholder-text, atom-text-editor[mini]::shadow .placeholder-text => atom-text-editor[mini] .placeholder-text, atom-text-editor[mini].editor .placeholder-text

• atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused::shadow => atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused.editor

• atom-text-editor[mini].is-focused .placeholder-text, atom-text-editor[mini].is-focused::shadow .placeholder-text => atom-text-editor[mini].is-focused .placeholder-text, atom-text-editor[mini].is-focused.editor .placeholder-text

• atom-text-editor[mini].is-focused .selection .region, atom-text-editor[mini].is-focused::shadow .selection .region => atom-text-editor[mini].is-focused .selection .region, atom-text-editor[mini].is-focused.editor .selection .region

• atom-text-editor .gutter.drop-shadow, atom-text-editor::shadow .gutter.drop-shadow => atom-text-editor .gutter.drop-shadow, atom-text-editor.editor .gutter.syntax--drop-shadow

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

Deprecated selector in `atom-webstorm-ui-theme/index.less`

In atom-webstorm-ui-theme/index.less:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

• atom-text-editor[mini], atom-text-editor[mini]::shadow => atom-text-editor[mini], atom-text-editor[mini].editor

• atom-text-editor[mini] .cursor, atom-text-editor[mini]::shadow .cursor => atom-text-editor[mini] .cursor, atom-text-editor[mini].editor .cursor

• atom-text-editor[mini] .selection .region, atom-text-editor[mini]::shadow .selection .region => atom-text-editor[mini] .selection .region, atom-text-editor[mini].editor .selection .region

• atom-text-editor[mini] .placeholder-text, atom-text-editor[mini]::shadow .placeholder-text => atom-text-editor[mini] .placeholder-text, atom-text-editor[mini].editor .placeholder-text

• atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused::shadow => atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused.editor

• atom-text-editor[mini].is-focused .placeholder-text, atom-text-editor[mini].is-focused::shadow .placeholder-text => atom-text-editor[mini].is-focused .placeholder-text, atom-text-editor[mini].is-focused.editor .placeholder-text

• atom-text-editor[mini].is-focused .selection .region, atom-text-editor[mini].is-focused::shadow .selection .region => atom-text-editor[mini].is-focused .selection .region, atom-text-editor[mini].is-focused.editor .selection .region

• atom-text-editor .gutter.drop-shadow, atom-text-editor::shadow .gutter.drop-shadow => atom-text-editor .gutter.drop-shadow, atom-text-editor.editor .gutter.syntax--drop-shadow

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.