Functions

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: (
    radius: (
        small: 2px,
        medium: 4px,
        base: 6px,
        large: 8px,
        huge: 12px
    ),
    icon: (
        12: 12px,
        14: 14px,
        16: 16px,
        20: 20px,
        24: 24px,
        32: 32px,
        48: 48px,
        64: 64px
    )
);

Example

$icon-scale: scale(icon);
$radius-value: scale(radius, small);