@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);
}