Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass color organization
@function vp-color($name, $variant: 'base', $alpha: 1) {
$color-spectrum: map-get($vp-colors, $name);
@if $color-spectrum {
$color: map-get($color-spectrum, $variant);
}
@if $alpha {
$color: rgba($color, $alpha);
}
@return $color;
}
$vp-colors: (
'white': (
'base': rgb(255, 255, 255)
),
'black': (
'base': rgb(0, 0, 0)
),
'warm-gray': (
'base': rgb(250, 248, 242),
'dark': rgb(245, 240, 228),
'darker': rgb(240, 233, 215),
'darkest': rgb(214, 208, 192)
),
'dark-gray': (
'base': rgb(20, 53, 66),
'light': rgb(32, 63, 75),
'lighter': rgb(43, 73, 85)
),
'yellow': (
'base': rgb(250, 180, 0),
'light': rgb(251, 191, 38),
'lighter': rgb(251, 199, 64)
),
'blue': (
'base': rgb(0, 170, 224),
'dark': rgb(0, 123, 180),
'darkest': rgb(0, 75, 135)
),
'teal': (
'base': rgb(0, 195, 174),
'dark': rgb(0, 120, 100)
),
'green': (
'base': rgb(132, 189, 0),
'dark': rgb(101, 141, 27)
),
'purple': (
'base': rgb(144, 99, 205),
'dark': rgb(88, 44, 131)
),
'magenta': (
'base': rgb(173, 26, 172),
'dark': rgb(114, 36, 108)
),
'orange': (
'base': rgb(255, 102, 0),
'dark': rgb(220, 71, 0)
),
'red': (
'base': rgb(245, 0, 60),
'dark': rgb(164, 33, 72)
)
);
/* Example use */
.example {
background-color: vp-color('blue', 'dark');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.