Shape

How to use the shape system.

Usage

sass

@use "~@iraiser/biscuit-design-components/components/shape/styles";

See the "Theming" section on theme documentation for more customization options.

Set custom styles on global...

sass

:root {
    --bdc-shape-radius: 20px;
}

...or on a specific element:

sass

.foo-button {
    --bdc-shape-radius: 20px;
}

Set global theme shape in your Sass file:

sass

@use "~@iraiser/biscuit-design-components/components/shape" with (
    $filled: 20px   
);

The variable {style} in the documentation correspond with the list of styles, do not hesitate to check it for more examples!

CSS Custom property	Description
`--bdc-shape-radius`	Set the selected style.

Variable	Description
`${style}`	Set the selected style value.

Mixin	Description
`radius($radius)`	Set CSS `border-radius` property with native custom property. "filled", "shaped", "small" (default), "sharped" or custom radius.

sass

@use "~@iraiser/biscuit-design-components/components/shape";

.foo-button {
    @include shape.radius(shaped);
}