@magnesium/shape v1.16.0

@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

Customization

CSS custom properties

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

CSS classes

API

Sass mixins

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

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