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;

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)
);

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);

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);