MDS

VSCode extension that provides utilities for better DX using Maersk Design System.

Features

• Autocompletion for MDS grid classes
• Autocompletion for MDS design tokens

Autocompletion for MDS grid classes

You can trigger the autocompletion by pressing ctrl + space on Windows or option + ESC on Mac inside class/className attributes. It also pops up after you press space to concatenate multiple classes.

Inside class/className attributes:

<!-- In HTML -->
<div class=""></div>
<!-- ctrl + space or option + ESC Triggers autocompletion -->

<!-- In React/JSX -->
<div className=""></div>
<!-- ctrl + space or option + ESC Triggers autocompletion -->

Autocompletion for MDS design tokens

The extension provides autocompletion for MDS design tokens in CSS, SCSS, and other style files(also in framework specific files). It triggers when you start typing a CSS variable with var( or by pressing ctrl + space on Windows or option + ESC on Mac when the cursor is inside a var()

/* In CSS/SCSS */
.my-class {
  color: var(; /* Triggers autocompletion for design tokens */
}

/* In JSX/TSX style attribute */
<div style={{ color: "var(" }}></div>

The autocompletion will show all available MDS design tokens with their values(currently for Maersk light theme only, theme picker coming soon).

You can also hover over any MDS design token to see its current value in a tooltip.

Installation

You can install the extension from the VSCode marketplace.