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