@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. |
shape.radius()
Radius with 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);
}
shape.declaration()
Custom properties with 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.radius()
Shape with The following Sass...
@use "@magnesium/shape";
.foo {
border-radius: shape.radius(medium);
}
...will produce the following CSS...
.foo {
border-radius: 12px;
}