https://github.com/magnesiumlabs/magnesium
The Sass Framework for Web Design System.
https://github.com/magnesiumlabs/magnesium
design-system framework sass theme
Last synced: 7 months ago
JSON representation
The Sass Framework for Web Design System.
- Host: GitHub
- URL: https://github.com/magnesiumlabs/magnesium
- Owner: magnesiumlabs
- License: mit
- Created: 2021-11-09T08:36:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-08-23T22:51:08.000Z (7 months ago)
- Last Synced: 2025-08-24T22:06:49.930Z (7 months ago)
- Topics: design-system, framework, sass, theme
- Language: SCSS
- Homepage: https://magnesium.design
- Size: 3.19 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@magnesium/theme)
[](https://www.npmjs.com/package/@magnesium/theme)
[](https://www.npmjs.com/package/@magnesium/theme)
## Introduction
The Magnesium Sass Framework helps you easily develop your Web Design System.
## Installing
```shell
npm install @magnesium/theme
```
## Usage
The theme component help you to easily manage theme styles with generate CSS custom properties declarations from
user-provided theme's tokens map.
## Options
| Option | Description |
|-----------|--------------------------------------------------------------------------------------------|
| `$prefix` | Add global prefix name on any custom properties. Default `mg`. Set to `false` for disable. |
```scss
@use "@magnesium/theme" with (
$prefix: "foo" // Set to `false` for disabled.
);
```
## Mixins
### `emit-custom-props($tokens, $prefix)`
Emits CSS custom properties declarations from a user-provided theme's.
```scss
@use "@magnesium/theme";
$tokens: (
"text-color": darkcyan
);
.foo {
@include theme.emit-custom-props($tokens, "button");
}
```
### Result
```scss
.foo {
--mg-button-text-color: darkcyan;
}
```
## Functions
### `emit-variable($tokens, $token, $fallback, $prefix)`
Emits CSS variable declaration from a user-provided theme's.
```scss
@use "@magnesium/theme";
$tokens: (
"text-color": darkcyan
);
.foo {
color: theme.emit-variable($tokens, "text-color", false, "button");
}
```
### Result
```css
.foo {
color: var(--mg-button-text-color);
}
```
### `validation($reference, $tokens)`
Validates a user-provided theme's token and throws an error if tokens are invalid.
```scss
@use "@magnesium/theme";
$reference: (
"text-color": darkcyan
);
$tokens: (
"text-color": darkorange
);
$tokens: theme.validation($reference, $tokens); // Return `$tokens` map if true or error if false.
```
## Top-level config override
If variables are already configured on top-level using `@use ... with`, by another dependency for example, you can't use
this solution anymore, because the module can only be setup once, this is a Sass restriction with **Module System**, but
another solution exist for override the main configuration, with a mixin!
See [official documentation](https://sass-lang.com/documentation/at-rules/use#with-mixins) about override configuration
with mixins.
| Mixin | Description |
|-------------------|:-------------------------------------------|
| `config($prefix)` | Override top-level `prefix` configuration. |
#### Configuration rule with `theme.config()`
The following Sass will configure new parameters:
```scss
@use "@magnesium/theme";
@include theme.config("fr");
```