4.5.1 • Published 9 months ago

@magnesium/theme v4.5.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

Magnesium Design

Version Downloads License

Introduction

Easily develop your Design System for the web, The Magnesium Sass Framework is here for that!

Installing

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

OptionDescription
$prefixAdd global prefix name on any custom properties. Default mg. Set to false for disable.
@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.

@use "@magnesium/theme";

$theme: (
    "text-color": darkcyan
);

.foo {
    @include theme.emit-custom-props($theme, "button");
}

Result

.foo {
    --mg-button-text-color: darkcyan;
}

Functions

emit-variable($tokens, $token, $fallback, $prefix)

Emits CSS variable declaration from a user-provided theme's.

@use "@magnesium/theme";

$theme: (
    "text-color": darkcyan
);

.foo {
    color: theme.emit-variable($theme, "text-color", false, "button");
}

Result

.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.

@use "@magnesium/theme";

$reference: (
    "text-color": darkcyan
);

$theme: (
    "text-color": darkorange
);

$theme: theme.validation($reference, $theme); // Return `$theme` 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 about override configuration with mixins.

MixinDescription
config($prefix)Override top-level prefix configuration.

Configuration rule with theme.config()

The following Sass will configure new parameters:

@use "@magnesium/theme";

@include theme.config("fr");
4.5.0

9 months ago

4.5.1

9 months ago

4.4.0

1 year ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.0

1 year ago

4.1.0

1 year ago

4.1.1

1 year ago

4.0.0

2 years ago

4.0.0-beta.1

2 years ago

3.3.0-beta.2

2 years ago

3.3.0-beta.1

2 years ago

3.4.0

2 years ago

3.2.1

2 years ago

3.2.0

2 years ago

3.6.0

2 years ago

3.1.0-beta.4

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.1.0

2 years ago

3.5.1

2 years ago

3.5.0

2 years ago

1.15.0

3 years ago

1.14.0

3 years ago

1.16.0

3 years ago

1.13.2

3 years ago

1.13.1

3 years ago

1.13.0

3 years ago

1.12.1

3 years ago

1.11.2

3 years ago

1.12.0

3 years ago

1.11.1

3 years ago

1.12.0-beta.1

3 years ago

2.0.0-beta.1

3 years ago

1.11.0

3 years ago

1.10.0

3 years ago

1.9.1

3 years ago

1.9.0

3 years ago

1.9.0-beta.1

3 years ago

1.9.4

3 years ago

1.9.3

3 years ago

1.9.2

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.7.0

3 years ago

1.6.0

3 years ago

1.5.1

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago

1.5.0

3 years ago

1.4.1

3 years ago

1.3.2

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.0.0-alpha.8

3 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

1.0.0-alpha.1

4 years ago

1.0.0-alpha.0

4 years ago