Granite Design Tokens Extension

Granite is IFS's Design System created by their UX Team. Use this extension to enable the use of Granite Design Tokens in VS Code Intellisense.

Features

This extension retrieves the Granite Design Tokens available in your local project within the Design Token node module. Therefore this extension will always provide you with the locally available Design Tokens. Updating the Granite Design Token module to have the latest version is the Developers responsibility.

For Global Design Tokens, below is an example of how it would be shown for the user in AutoComplete facility:

Here the user will be able to see the Design Token name and the hex value in details.

For Theme Specific Design Tokens, below is an example of how it would be shown for the user in AutoComplete facility:

Here the user will be able to see the Design Token name and the respective Light and Dark theme hex values in the documentation.

Requirements

For this extension to function, it requires for the local project to have the Granite Design Tokens node module installed.

Extension Settings

Currently this extension does not contain any configurable settings or impact on VS Code settings.

Known Issues

A known issue in the v1.0.0 is that the error messages are shown through out the use of VS Code, this is because the extension is enabled globally. A feature will be added to better handle this in a future release.

Release Notes

Subsequent release of the Granite Design Tokens Extension of VS Code

1.0.0

• Global Design Tokens will be shown as colour entries in the Intellisense.
• Theme Specific Design Tokens will be shown as value entries in the Intellisense.

2.0.0

• Adhered to IFS Design Tokens v2.0.1

2.0.1

• Fixed: Bug where the theme specific colour previews were not being shown

2.0.2

• Fixed: Bug where the path for token retrieval was not updated according to new version of Design Token library

2.1.0

• Fixed: File retrieval logic is modified to facilitate support for different versions of IFS Design Tokens (v2.x.x and v3.x.x)