Better colour names with palettes & SASS maps

palette.scss

// Declare colours
$_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%)
    )
);

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


// Use fn in module styles
a {
    color: palette(purple);
    &:hover {
        color: palette(purple, light);
    }
}