social media colors: google, youtube, facebook, twitter, instagram (including gradient)

colors.scss

// vendor color defs
$google: #db4437;
$youtube: #f00;
$facebook: #3b5998;
$twitter: #1da1f2;
$instagram: #231f20;
$instagramGrad: linear-gradient(45deg, #ffd521 24%, #f50000 50%, #b900b4 76%);

// vendor link classes
.google { color: $google; }
.google-bg { color: $baseWhite; background-color: $google; }
a.google { &:hover, &:focus { color: $baseWhite; background-color: $google; } }
a.google-bg { &:hover, &:focus { color: $baseWhite; background-color: darken($google, 6%); } }

.youtube { color: $youtube; }
.youtube-bg { color: $baseWhite; background-color: $youtube; }
a.youtube { &:hover, &:focus { color: $baseWhite; background-color: $youtube; } }
a.youtube-bg { &:hover, &:focus { color: $baseWhite; background-color: darken($youtube, 6%); } }

.facebook { color: $facebook; }
.facebook-bg { color: $baseWhite; background-color: $facebook; }
a.facebook { &:hover, &:focus { color: $baseWhite; background-color: $facebook; } }
a.facebook-bg { &:hover, &:focus { color: $baseWhite; background-color: darken($facebook, 6%); } }

.twitter { color: $twitter; }
.twitter-bg { color: $baseWhite; background-color: $twitter; }
a.twitter { &:hover, &:focus { color: $baseWhite; background-color: $twitter; } }
a.twitter-bg { &:hover, &:focus { color: $baseWhite; background-color: darken($twitter, 6%); } }

.instagram { color: $instagram; }
.instagram-bg { color: $baseWhite; background-image: $instagramGrad; }
a.instagram { &:hover, &:focus { color: $baseWhite; background-image: $instagramGrad; } }
a.instagram-bg { &:hover, &:focus { color: $baseWhite; background-image: $instagramGrad; } }