Skip to end of metadata
Go to start of metadata

Buttons

Buttons have been directly replicated to mimic VS Code native buttons. In addition, we have introduced second level button that's just built using main foreground colour as the foundation. 

Disabled buttons are simply faded out to 0.6 opacity.

Selects / Dropdowns

In order to keep in line with visual styling of VS Code, Selects have been custom made to look like this.

Inputs

Inputs follow VS Code default inputs with one small adjustment. In default Dark+ theme VS Code inputs do not have borders. They are just a grey rectangle. On the other hand, in Light+ theme they do have a border. Our thought were that this can be improved, so we have added a slight border even in the dark theme by using editorWidget-border variable.

When disabled, they are at 0.4 opacity.

Tabs

Small tiles

Note the active tile (Step 1), as it has brighter colours as the typography goes into inputOption-activeForeground. The blue emphasis line below is not the same colour as buttons, it's brighter, and of course a completely separate variable.

Interactive bits

This is a sample collection that has various small interactive bits. Clickable icons have the same colour as buttons. 

On hover, they change colour slightly.

Checkboxes

Checkboxes are deliberately made to be different than original VS Code checkboxes. Our checkboxes have border unlike VS Code ones to make them stand out more, and to make them be more in line with our input fields, which also have border. In addition, our checkboxes have to fit into a variety of backgrounds, not just the plain background of the page itself, but slightly different shades inside popups and drop down menus. Hence they are a bit "stronger" looking just so they universally fit into those scenarios.

Tables and table-like lists

There are quite a few flavours of tables, however they all run on the same base. Zebra lines, same fonts, same colours, etc.


  • No labels