VSCodex Design Tokens for VS Code

Codex Design Tokens Autocomplete & Replacement

Bring the power of Wikimedia's Codex Design Tokens into your development workflow with this VS Code extension. This extension provides an intuitive and efficient way to work with Codex design tokens by offering autocomplete, color swatch previews, and hover tooltips. Additionally, it allows you to replace hardcoded values with corresponding design tokens in CSS and Less format for clean, consistent, and scalable code.

Note: This extension is currently in beta, under active development and may have some limitations. Please refer to the Known Issues section for more information.

Features

Autocomplete with Color Swatches 🎨

Autocomplete for Codex design tokens as you type.
Visual color swatch previews next to color tokens for instant recognition.

Hover over a Codex design token to see its:
- Name
- Value (e.g., color code, spacing unit)
- Description (if available).

Replace Hardcoded Values with Tokens 🔄

Automatically replace hardcoded color values (e.g., #fff) or spacing units (e.g., 16px or 1em) with the appropriate Codex design token in CSS or Less format.
Ensures your code stays aligned with Wikimedia’s design system Codex.

Supported Token Types 📚

All of latest Codex design token categories are supported, including:

Colors
Spacing
Typography
Borders
Shadows
And more!

Installation

Open Extensions in VS Code.
Search for VSCodex Design Tokens for VS Code.
Click Install.

Usage

Autocomplete

Begin typing a CSS custom property prefix -- or a Less variable prefix @ to see a list of available tokens.
Select a token to insert it into your code.

Hover over a token to see detailed information about it.

Commands

Codex: Replace Hardcoded Values Replace hardcoded color, spacing, or other values with Codex tokens in CSS or Less format.

Example

Before:

background-color: #fff;
padding: 16px;

After:

background-color: @background-color-base;
padding: @spacing-100;

Known Issues

VSCodex is currently only supporting CSS and Less formats. But we are working on adding support for other formats like SCSS, and ES6 Variables.
Codex: Insert Token command
Manually search and insert Codex tokens command isn't working yet.

Release Notes

See the full changelog in CHANGELOG.md.

License

This extension is licensed under the MIT License.

Feedback & Contribution

We’d love to hear your feedback! Report bugs or request features on our GitLab repository. Contributions are welcome!

Start using Codex design tokens today to build consistent and scalable designs in your projects! 🎉

Let us know if you’d like to adjust anything!

For more information

Enjoy!

VSCodex Wikimedia

Wikimedia Foundation