Overview Version History Q & A Rating & Review
Atlaskit Tokens Extension
Stop guessing what your design tokens look like! 🎨
A VS Code compatible editor extension that visualizes @atlaskit/tokens values directly in your IDE. See actual colors, spacing values, and design properties instantly as you code - no more switching between files or looking up documentation!
✨ What It Does
Transform your coding experience with instant visual feedback! The extension automatically detects Atlaskit tokens in your code and shows you exactly what they look like:
🎨 Color tokens (color.*, elevation.*): See actual color swatches right next to token names📏 Spacing tokens (space.*): View pixel values inline (e.g., space.100 → 8px)🔲 Border tokens (border.*): Display border width values📝 Typography tokens (font.*): Show font properties and sizes
💡 Pro tip : Hover over color tokens to quickly switch between light and dark themes!
Requirements
VS Code compatible editor (1.99.3 or higher)
🚀 Quick Start
Installation
This extension works with VS Code compatible editors and can be installed from:
VSX - For VS Code compatible editors (Cursor, Zed, etc.)VS Code Marketplace - For Visual Studio Code
Get Started
Install the extension
Open any file with Atlaskit tokens
That's it! Tokens are automatically highlighted as you type
⚡ Zero configuration required - the extension activates automatically and starts working immediately!
🌟 Key Features
🎨 Instant Visual Feedback
Color tokens (color.*, elevation.*): See actual color swatches next to token namesSpacing tokens (space.*): View pixel values inline as you typeBorder tokens (border.*): Display border width valuesTypography tokens (font.*): Show font properties and sizes
🌓 Smart Theme Support
Switch between light and dark themes
Preview how tokens look across different Atlaskit themes
⚡ Seamless Integration
Tokens update automatically as you type
Works across all file types
Zero configuration required
🎯 Interactive Experience
Hover support : Hover over color tokens to see theme information and quick theme switchingCommand palette integration : Toggle extension and switch themes via commands
📋 Supported Token Types
Token Pattern
Example
What You'll See
color.*color.text🎨 Colored swatch
elevation.*elevation.surface🎨 Colored swatch
space.*space.100📏 Pixel value (e.g., 8px)
border.*border.width🔲 Border value
font.*font.size📝 Typography value
🎮 Commands
Access these commands via your editor's command palette:
Atlaskit Tokens: Toggle ExtensionAtlaskit Tokens: Select @atlaskit/tokens theme
🌈 Theme Switching
Quick toggle : Use your editor's command palette to switch between light/dark themesTheme selection : Choose from all available Atlaskit themesHover interaction : Hover over color tokens for quick theme switching options
⚙️ Configuration
The extension adds the following editor setting:
atlaskit-tokens.enabledtrue) - Enable or disable token detection and decorations
📚 Learn More About Atlaskit Tokens
For a complete reference of all available tokens, visit the Atlaskit Tokens Documentation .
