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% );
}
}
}