@magnesium/framework

Introduction

Easily develop your Design System for the web, The Magnesium Sass Framework is here for that!

Installing

npm install @magnesium/framework

Theme

The theme component help you to easily manage theme styles with generate CSS custom properties declarations from user-provided theme's tokens map.

@use "@magnesium/framework/theme";

.foo {
    $theme: theme.create-theme-vars((
        "text-color": darkcyan
    ), "button");

    @include theme.emit-theme-vars($theme);
}

Output

.foo {
    --mg-button-text-color: darkcyan;
}