_palette_color.scss

_palette_color.scss

$_color-base-grey: rgb(229,231,234);

$palettes: (
    purple: (
        base:   rgb(42,40,80),
        light:  rgb(51,46,140),
        dark:   rgb(40,38,65)
    ),
    grey: (
        base:  $_color-base-grey,
        light: lighten($_color-base-grey, 10%),
        dark: darken($_color-base-grey, 10%)
    )
);

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}

a {
    color: palette(gray, dark);
    &:hover {
        color: palette(purple, light);
    }
}