Skip to end of metadata
Go to start of metadata

The bedrock of colour usage in the extensions are not hard-defined colours, but rather colour variables which VS Code offers to us. Our designs should be constructed out of those variables in Sketch, and then those variables should be used by developers as the extensions are coded.

The UI Kit we have in Abstract has two separate libraries for colours, for Dark+ and Light+ colour sets. 


Those colour libraries contain only the colours, and nothing else. Any of the designs we are creating should utilise the UI Kit itself, and either through the UI Kit, or separately if needed, we should utilise these colour libraries. The colours are available through the variable picker in Sketch.



Once extensions are live in VS Code, we can check the correct usage through Web Developer menu. Go to View → Command Palette, and in there search for "Open Webview Developer Tools". This will bring up an inspect tool which enables us to poke around developed extensions front end rendering.



These developer tools function like Chrome Developer Tools, and allow us to inspect details of HTML & CSS. During the inspection of elements, the variables should be plainly visible as they were used by the developers. Something like this:

Our extensions should, as a rule, never have directly hard-coded colour values.


  • No labels