@magnesium/core

1.16.0 • Public • Published

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

/@magnesium/core/

    Package Sidebar

    Install

    npm i @magnesium/core

    Weekly Downloads

    3

    Version

    1.16.0

    License

    MIT

    Unpacked Size

    7.47 kB

    Total Files

    8

    Last publish

    Collaborators

    • bdamevin