Made Design Tokens for VS Code

Effortlessly find the correct tokens and get autocomplete suggestions right inside your code editor.

Here's what you can expect:

• 🕵️‍♂️ New Linter Functionality: Identify hard-coded CSS values and get suggestions for design tokens to replace them, promoting consistency and maintainability in your codebase.
• 🗄️ Automatic functionality: Our Design Token Autocomplete feature intuitively integrates with your CSS and Sass files, saving you valuable time and effort.
• 🔍 Enhanced previews: Explore design token values right within the autocomplete description, giving you a glimpse of how they will impact your design.
• 🎨 Color previews: Allowing you to make informed decisions when selecting the correct token or theming.
• 🥇 Tailored completions: Benefit from relevant code completions that align with your current line of code, providing you with the most appropriate suggestions for a seamless coding experience.

Installation

Install via the Visual Studio Code Marketplace

Features

Linter

Identify hard-coded CSS values and receive suggestions for corresponding design tokens. This feature helps ensure your codebase is using standardized tokens, making it easier to maintain and update designs consistently.

Autocomplete

Utilize Autocomplete suggestions for Made design tokens.

Hover preview

See the exact value of the Made Design Token’s CSS custom properties on hover.

Switch between Made Tokens versions

Useful when working on multiple projects and wishing to quickly switch between different versions of our Made Tokens. Simply go to "Extensions > Made Design Tokens > Extension Settings" to switch between versions.

Supported Made Design Tokens versions: 2.1.1, 2.2.0 and 2.3.0

How to use

1. Install via the VS code marketplace and enable the extension in VScode.
2. Open a CSS or Sass file.
3. Start typing the CSS property you want to set (e.g., color:).
4. Type the trigger character --.
5. The autocomplete token suggestions associated with the typed CSS property will be shown.
6. Select the token and it will be inserted along with the var() function.
7. To use the linter, simply save your file, and any hard-coded values will be highlighted with suggestions for design tokens.

Design Tokens Integration

Made Design Tokens are the common building blocks of visual design decisions (like color, type scale, and spacing units) that all Mastercard projects share. By using design tokens, designers and developers spend more time solving problems and less time fussing over pixels, hex codes, and redlining.

• Getting Started with Made Design Tokens (Mastercard users only)
• External Teams: https://github.com/Mastercard/made

Questions, issues, feature requests, and contributions

• If you have a question about how to accomplish something with the extension, please ask on our Made Working Group.
• Any and all feedback is appreciated and welcome! If you come across a problem or bug with the extension, please file an issue on our Made Working Group.