SASS loops

For more information, see Gutenberg Color Palette and Button Styling

// Brand Colors
$blue: #93DDDC;
$blue_dark: #1873C2;
$pink: #F079A1;
$green: #A0CA00;
$yellow: #FFD12A;
$teal: #45C9B5;
$teal_dark: #269B89;
$pinterest: #CD1A19;

$colors: (
	'teal' : $teal,
	'blue' : $blue,
	'dark-blue' : $blue_dark,
	'pink' : $pink,
	'green' : $green,
	'yellow' : $yellow,
);

.wp-block-button__link {

	@each $name, $color in $colors {

		&.has-#{$name}-color:hover,
		&.has-#{$name}-color:focus {
			color: $color;
		}

		&.has-#{$name}-background-color:hover,
		&.has-#{$name}-background-color:focus {
			background-color: darken( $color, 20% );
		}
	}
}