Overview

The Figure 8 Token Helper is a VS Code extension that will help developers use Figure 8 theme and common tokens. The Figure 8 design tokens provide developers with a consistent set of colors and parameters that adhere to the Figure 8 Design System. The tokens are CSS custom variables and are used at run time. Therefore, there is no validation done before use. If the token does not exist, results are unpredictable. Therefore, we are providing some development time tools to assure that the tokens used are correct.

How does it work?

The extension loads all Figure 8 design tokens to provide auto-completion and existence checking. When Figure 8 tokens change, the extension will automatically reload the tokens, so the set you are working with is always up to date.

Whenever you are working with .scss, .css, or .html files, the Figure 8 Token Helper will underscore all non-existent Figure 8 tokens in red, underscore all hard coded colors and –core-* tokens in yellow. The extension will also provide mouse -over tips for why the items have been underscored. Most importantly, when its time to specify a color, padding, sizing, etc. simply enter “—” (two dashes) and the auto-completion feature will be activated. It will display the list of all –f8-theme and –f8-common tokens. Hit return and the proper syntax will be filled in. If you selected “—f8-theme-accent-color”, then the extension will output “var(--f8-theme-accent-color). For colors, the tokens will be annotated with the exact color. The mouse-over will also supply any color details. For numeric values, the mouse-over will display the value of the token, and if present, the formula the value is based upon.