@magnesium/shape

The Magnesium Design shape system help you to create a shape who reflects your design or style.

Installing

npm install @magnesium/shape

Usage

Styles

@use "@magnesium/shape/styles";

This will generate the default theme classes, see CSS Classes section for more.

Configuration

You can define the shape variables before importing any Magnesium components:

@use "@magnesium/shape" with (
    $shapes: (
        large: 24px,
        medium: 12px,
        small: 6px
    )
);

Options

Name	Default	Description
$shapes	()	Sets a list of theme shapes.

Customization

CSS custom properties

CSS custom property	Description
--mg-shape-radius	Global custom property. Override the selected style.
--mg-shape-{style}	Override the selected style.

The variable {style} correspond with each key on the $shapes config, see configuration.

CSS classes

CSS Class	Description
mg-shape--{style}	Sets the color to the selected style.

API

Sass mixins

Mixin	Description
radius($radius, $no-var)	Sets shape radius from $shapes or custom values. Set $no-var to true for generate only value without var().
declaration($property, $style, $important)	Sets CSS shape declaration, with optional !important. The value may be a standard CSS value or one of configured theme key.

Radius with shape.radius()

The following Sass...

@use "@magnesium/shape";

.foo {
    @include shape.radius(medium);
}

.bar {
    @include shape.radius(5px);
}

...will produce the following CSS...

.foo {
    border-radius: var(--mg-shape-medium, var(--mg-shape-radius, 12px));
}

.bar {
    border-radius: var(--mg-shape-radius, 5px);
}

Custom properties with shape.declaration()

The following Sass...

@use "@magnesium/shape";

.foo {
    @include shape.declaration(medium); // Will generate a CSS custom property with default shape.
    @include shape.declaration(medium, 16px); // Will generate a CSS custom property with new shape.
}

...will produce the following CSS...

.foo {
    --mg-shape-medium: 12px;
    --mg-shape-medium: 16px;
}

Sass functions

Function	Description
exist($radius)	Return true if shape radius key exist.
radius($radius)	Get CSS shape radius value, without custom property.

Shape with shape.radius()

The following Sass...

@use "@magnesium/shape";

.foo {
    border-radius: shape.radius(medium);
}

...will produce the following CSS...

.foo {
    border-radius: 12px;
}