Functions

type-size #

Returns a text size value from $scales.

// =Scales
$scales: (
    type: (
        text: (
            small: 12px 1.5,
            medium: 14px 1.5,
            regular: 16px 1.5,
            large: 21px 1.5
        ),
        heading: (
            small: 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 a line spacing value from $scales.

// =Scales
$scales: (
    type: (
        text: (
            small: 12px 1.5,
            medium: 14px 1.5,
            regular: 16px 1.5,
            large: 21px 1.5
        ),
        heading: (
            small: 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 an alternative line spacing value from $scales.

// =Scales
$scales: (
    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 a type spacing value from $scales.

// =Scales
$scales: (
    type-space: (
        h1-to-tag: 3rem,
        h2-to-tag: 3rem,
        h3-to-tag: 3rem,
        h4-to-tag: 2rem,
        h5-to-tag: 1rem,
        h6-to-tag: 1rem,
        tag-to-tag: 5rem,
        tag-to-h2: 8rem,
        tag-to-h3: 8rem,
        tag-to-h4: 8rem,
        tag-to-h5: 8rem,
        tag-to-h6: 8rem,
        form-item-to-item: 5rem,
        form-buttons-to-item: 6rem
    )
);

Example

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

Output

margin-top: 5rem;

palette #

Returns a color value from $palette.

// =Palette
$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)
);

palette-dark #

Returns a color value from $palette-dark.

// =Palette
$palette-dark: (
    black: #1F2023,
    surface: (
        base: #27292D,
        depth-5: #53575E,
        depth-10: #43464C,
        depth-20: #3E4147,
        depth-30: #383B40,
        depth-40: #2D2F34
    )
);

Example

$colors-dark: (
    alpha: palette(black),
    bravo: palette(surface, base)
);

color #

Returns a color value from $colors.

$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: palette(black-o, 60)
        )
    )
    ...
);

Example

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

level #

Returns a z-index value from the $scales.

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

Example

z-index: level(content);

Output

z-index: 100;

radius #

Returns a border-radius value from the $scales.

// =Scales
$scales: (
    radius: (
        small: 2px,
        base: 4px,
        large: 8px,
        huge: 16px
    )
);

Example

border-radius: radius(base);

Output

border-radius: 4px;

shadow #

Returns a box-shadow value generated from $colors and $scales.

// =Colors
$colors: (
    shadow: (
        default: (
            100: palette(black-o, 10),
            150: palette(black-o, 10),
            200: palette(black-o, 10),
            250: palette(black-o, 10),
            300: palette(black-o, 10),
            350: palette(black-o, 25)
        )
    )
);

// =Scales
$scales: (
    shadow: (
        100: 0 1px 2px,
        150: 0 2px 4px,
        200: 0 4px 6px,
        250: 0 6px 8px,
        300: 0 20px 25px,
        350: 0 25px 50px
    )
);

Example

box-shadow: shadow(default, 100);
box-shadow: shadow(default, 300);

scale #

Returns a value from $scales.

// =Scales
$scales: (
    border: (
        2: 2px,
        4: 4px
    ),
    icon: (
        12: 12px,
        14: 14px,
        16: 16px,
        20: 20px,
        24: 24px,
        32: 32px,
        48: 48px,
        64: 64px
    )
);

Example

$icon-scale: scale(icon);
border-width: scale(border, 4);

variant #

Returns a value from $variants.

// =Variants
$variants: (
    alert: (
        default: (
            padding: 4rem 5rem,
            border-radius: radius(base),
            border: 1px solid transparent
        )
    ),
    line: (
        default: (
            margin-top: 1.5em,
            margin-bottom: 1.5em,
            color: color(line, default),
            height: 1px,
            width: 100%,
            align: left,
            style: solid
        )
    )
);

Example

$alert: variant(alert, default);
$line-color: variant(line, default, color);