Element Global - Shape

Shape is a foundational, SASS only component. Shapes direct attention, identify components, communicate state, and express brand.

Currently shape system for web only supports rounded corners.

Basic usage

@use '@element/global/shape';
@use '@element/global/shape/mixins' as shape-mixins;
@use '@element/global/shape/functions' as shape-functions;

Style Customization

Sass Variables

Components are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding $medium-radius variable would apply shape to all components that belong to medium category.

Variable	Description
`$small-component-radius`	Rounded shape radius size for small components. Default value `2px`.
`$medium-component-radius`	Rounded shape radius size for medium components. Default value `4px`.
`$large-component-radius`	Rounded shape radius size for large components. Default value `4px`.

Please refer Material Design guidelines: Shape to learn about how components are categorized.

Sass Mixins

Mixin	Description
`radius($radius, $rtl-reflexive)`	Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.

Use resolve-percentage-radius sass function to resolve percentage unit value to absolute radius value.

Sass Functions

Function	Description
`flip-radius($radius)`	Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.
`resolve-percentage-radius($component-height, $radius)`	Calculates the absolute radius value based on its component height. Use this for fixed height components only.
`mask-radius($radius, $masked-corners)`	Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.
`prop-value($radius)`	Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.