AX Tokens - Atlassian Design Token Viewer

AX Tokens (Admin Experience Tokens) is a Visual Studio Code extension designed to help Atlassian engineers quickly visualize and understand Atlassian Design Token values. This extension displays a hovering information box when your cursor is positioned over AtlasKit token values in your code.

Features

Token Value Preview: Hover over any Atlassian design token to see its actual value
Visual Representation:
- Color tokens display a color swatch preview
- Space tokens show a visual representation of the spacing size
Comprehensive Token Support: Currently supports:
- Color tokens (primary, secondary, success, etc.)
- Space tokens (from 0px to 80px)

Usage

Install the extension
Open any file containing Atlassian design tokens (e.g., color.primary, space.200)
Hover your cursor over a token name
A tooltip will appear showing the token's value and a visual representation

Supported Tokens

Color Tokens

The extension currently supports the following color tokens:

color.primary: #0066cc
color.secondary: #6c757d
color.success: #28a745
color.danger: #dc3545
color.warning: #ffc107
color.info: #17a2b8
And more neutral colors (gray.100 through gray.900)

Space Tokens

The extension supports spacing tokens from 0px to 80px:

space.0: 0rem / 0px
space.025: 0.125rem / 2px
space.050: 0.25rem / 4px
...
space.1000: 5rem / 80px

Requirements

Visual Studio Code version 1.96.2 or higher

Extension Settings

This extension does not contribute any settings yet.

Known Issues

No known issues at this time.

Release Notes

0.0.1

Initial release of AX Tokens with support for:

Basic color token previews
Space token visualization
Hover information display

Development

This extension is built using TypeScript and the VS Code Extension API. To contribute:

Clone the repository
Run npm install to install dependencies
Make your changes
Use npm run compile to build the extension
Press F5 in VS Code to launch a new window with the extension loaded

For more information

Enjoy!

AX Tokens

Mario Jimenez