@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. |
core.create-var()
Color with The following Sass...
@use "@magnesium/core";
.foo {
color: core.create-var(foo, #2674a2);
}
...will produce the following CSS...
.foo {
color: var(--mg-foo, #2674a2);
}