Functions

type-size #

Returns the text size value from $type map by group and type name. The third parameter is breakpoint, if these values are specified in the corresponding map: $type-md, $type-lg, $type-sm.

For example, such map is specified in variables vars/type:

$type: (
    text: (
        small: 12px 1.5,
        medium: 14px 1.5,
        regular: 16px 1.5,
        large: 21px 1.5
    ),
    heading: (
        regular: 16px 1.5,
        large: 40px 1.3,
        huge: 60px 1.1
    )
);

$type-sm: (
    heading: (
        huge: 50px 1.2
    )
);

Example

font-size: type-size(text, regular);
font-size: type-size(heading, large);
font-size: type-size(heading, huge, sm);

Output

font-size: 16px;
font-size: 40px;
font-size: 50px;

type-line #

Returns line spacing values from $type map by group and type name. The third parameter is to specify a breakpoint if these values are specified in the corresponding map: $type-md, $type-lg, $type-sm.

For example, such map is specified in variables vars/type:

$type: (
    text: (
        small: 12px 1.5,
        medium: 14px 1.5,
        regular: 16px 1.5,
        large: 21px 1.5
    ),
    heading: (
        regular: 16px 1.5,
        large: 40px 1.3,
        huge: 60px 1.1
    )
);

$type-sm: (
    heading: (
        huge: 50px 1.2
    )
);

Example

line-height: type-line(text, regular);
line-height: type-line(heading, large);
line-height: type-line(heading, huge, sm);

Output

line-height: 1.5;
line-height: 1.3;
line-height: 1.2;

type-line-alt #

Returns values of alternative line spacing from $type map by group and type name. The third parameter is to specify a breakpoint if these values are specified in the corresponding map: $type-md, $type-lg, $type-sm.

For example, such map is specified in variables vars/type:

$type: (
    text: (
        small: 12px 1.5,
        medium: 14px 1.5,
        regular: 16px 1.5,
        large: 21px 1.5 1.3
    )
);

$type-sm: (
    text: (
        large: 18px 1.5 1.4
    )
);

Example

line-height: type-line-alt(text, large);
line-height: type-line-alt(text, large, sm);

Output

line-height: 1.3;
line-height: 1.4;

type-space #

Returns type spacing values from $type-space map. By default it looks like this:

$type-space: (
    h1-to-tag: 1rem,
    h2-to-tag: 1rem,
    h3-to-tag: 1rem,
    h4-to-tag: 1rem,
    h5-to-tag: 1rem,
    h6-to-tag: 1rem,
    tag-to-tag: 5rem,
    tag-to-h2: 6rem,
    tag-to-h3: 6rem,
    tag-to-h4: 6rem,
    tag-to-h5: 6rem,
    tag-to-h6: 6rem,
    form-item-to-item: 5rem,
    form-buttons-to-item: 6rem
);

Example

margin-top: type-space(tag-to-tag);

Output

margin-top: 5rem;

palette #

Returns the palette value from the corresponding map.

For example, such map is specified in variables:

$palette: (
    black: #000B1D,
    neutral: (
        darker: #262F3F,
        dark: #4C5460,
        base: #7F858E,
        light: #D9DBDD,
        lighter: #F5F5F6
    ),
    negative: (
        darker: #4D1F3A,
        dark: #BF3D66,
        base: #FF4F7F,
        light: #FFCAD8,
        lighter: #FFF3F6
    )
);

Example

$colors: (
    alpha: palette(black),
    bravo: palette(neutral, base),
    negative: palette(negative, dark)
);

color #

Returns color values from $colors map. For example, if you have a map like this:

$colors: (
    ...
    text: (
        default: palette(neutral, darker),
        success: palette(positive, dark),
        error: palette(negative, dark)
    ),
    link: (
        default: (
            base: palette(active, dark),
            hover: palette(negative, base)
        ),
        dark: (
            base: palette(black),
            hover: rgba(palette(black), 0.6)
        )
    )
    ...
);

Example

color: color(text, default);
color: color(text, success);
color: color(link, default, base);
color: color(link, default, hover);

level #

Returns z-index from the $levels map.

$levels: (
    content: 100, // overlays
    page: 200, // modals/offcanvas
    control: 300, // popups
    all: 400 // messages
);

Example

z-index: level(content);

Output

z-index: 100;

radius #

Returns the border-radius value from the $radius map.

$radius: (
    small: 3px,
    base: 4px,
    large: 12px
);

Example

border-radius: radius(base);

Output

border-radius: 4px;

shadow #

Returns the box-shadow value generated from the $colors and $shadows maps.

// Color map
$colors: (
    ...
    shadow: (
        neutral: palette(black),
        negative: palette(negative, base)
    )
    ...
)

// Shadow map
$shadows: (
    100: (
        1: 0 1px 3px 0.15,
        2: 0 1px 2px 0.06
    ),
    200: (
        1: 0 10px 15px -3px 0.12,
        2: 0 4px 6px -2px 0.06
    ),
    300: 0 20px 50px -12px 0.2
);

Example

box-shadow: shadow(neutral, 100);
box-shadow: shadow(negative, 300);