@magnesium/core

The Magnesium Design core system.

Installing

npm install @magnesium/core

Usage

@use "@magnesium/core";

Configuration

You can extend default options before importing any Magnesium components:

@use "@magnesium/core" with (
    $extend: (
        // ...
    )
);

Options

Name	Default	Description
screens	()	Sets a map of token rules for media queries.
core	("responsive": true, "states": true)	Sets a map of token rules for core rules.

Screens

@use "@magnesium/core" with (
    $extend: (
        "screens": (
            "lg": 1024px
        )
    )
);

Core

@use "@magnesium/core" with (
    $extend: (
        "core": (
            "responsive": false
        )
    )
);

API

Sass functions

Function	Description
create-var($name, $fallback)	Sets new CSS custom property, with optional fallback.

Color with core.create-var()

The following Sass...

@use "@magnesium/core";

.foo {
    color: core.create-var(foo, #2674a2);
}

...will produce the following CSS...

.foo {
    color: var(--mg-foo, #2674a2);
}