MDS

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

Features

• Autocompletion for MDS foundations CSS classes
• Autocompletion for MDS design tokens
• Autocompletion for MDS icons in components
• Autocompletion for MDS component tags and attributes

Note: The same autocompletion data that powers this extension is also used in the Storybook Code Sandbox, providing identical IntelliSense inside the Monaco editor there. If you add or regenerate an asset file, it will automatically be picked up by both.

Autocompletion for MDS foundations CSS 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.

The extension provides intelligent suggestions for MDS foundations CSS classes including:

• Grid
• Breadcrumb
• Color
• Gap
• Link
• Table
• Typography

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.

Autocompletion for MDS icons

The extension provides autocompletion for MDS icons in components. It triggers when you start typing inside an icon-related attribute or by pressing ctrl + space on Windows or option + ESC on Mac.

The extension supports icon completion in the following components and attributes:

<!-- In mc-icon component -->
<mc-icon icon=""></mc-icon>
<!-- Start typing or ctrl + space triggers autocompletion -->

<!-- In mc-button component -->
<mc-button icon=""></mc-button>
<!-- Icon autocompletion -->

<mc-button trailingicon=""></mc-button>
<!-- Trailing icon autocompletion -->

Autocompletion for MDS component tags and attributes

The extension provides autocompletion for all mc-* component tag names. It triggers when you type <mc in any supported HTML-like file.

<!-- Start typing to trigger tag completion -->
<mc
<!-- Suggests mc-button, mc-input, mc-modal, etc. -->

<!-- Selecting a tag inserts it with a closing tag -->
<mc-button $cursor></mc-button>

Once a tag is open, attribute completions are available after a space. Boolean attributes are inserted as-is; all others include ="" with the cursor inside.

<mc-button 
<!-- Suggests label, variant, appearance, icon, disabled, etc. -->

<mc-button variant="filled" appearance="primary"></mc-button>

Tag and attribute data is sourced from each component's Custom Elements Manifest and regenerated automatically as part of the extension build (extract-components target).

Code Sandbox integration

The generated asset files in assets/ (design-tokens.ts, icons.ts, css-classes.ts, components.ts) are shared with the Storybook Code Sandbox. The sandbox registers equivalent Monaco language providers so developers get the same IntelliSense when writing HTML/CSS in the browser-based editor:

Installation

You can install the extension from the VSCode marketplace.