Magnesium
Introduction

Getting Started ​

Requirements ​

DependencyVersion
Node.js^20.19.0 || >= 22.12.0
Sass>= 1.97.1

Browser support ​

Magnesium outputs plain CSS custom properties, supported by every modern browser. The optional $layer parameter relies on cascade layers: Chrome and Edge 99, Firefox 97, Safari 15.4 and later.

Installation ​

bash
npm install @magnesium/theme

Playground ​

Try it live on StackBlitz:

Open in StackBlitz

Usage ​

scss
@use "@magnesium/theme" with ($prefix: "ds");

$tokens: (
    "text-color": darkcyan,
    "font-size": 1rem
);

:root {
    @include theme.emit($tokens, "button");
}
css
:root {
    --ds-button-text-color: darkcyan;
    --ds-button-font-size: 1rem;
}

pkg: importer ​

If your toolchain uses the Sass pkg: importer (Vite, modern bundlers), use the package name directly:

scss
@use "pkg:@magnesium/theme" with ($prefix: "ds");

Both forms are equivalent — use whichever your setup requires.

Sass command line ​

The Sass CLI does not look inside node_modules on its own. Point it there with --load-path:

bash
sass --load-path=node_modules src/styles.scss dist/styles.css

Without it, compilation fails with Can't find stylesheet to import. See Troubleshooting.

Coming from v4? ​

See the migration guide for a complete mapping of the old API to v5.