legend{ margin-bottom: 1.5rem; border-bottom: 1px solid #cdcdcd; padding-bottom: .5rem; color: $legend-color; } // Color contrast @function color-yiq-const($color) { $r: red($color); $g: green($color); $b: blue($color); $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >= 200) { @return #666666; } @else { @return #FFFFFF; } } .btn{ @each $color, $value in $theme-colors-custom{ &.btn-#{$color}{ background-color: $value; border-color: darken($value, 10%); color: color-yiq-const($value); &:hover{ background-color: darken($value, 10%); border-color: darken($value,15%) ; color: color-yiq-const($value); } } } @each $color, $value in $theme-colors-custom{ &.btn-outline-#{$color}{ font-size: 12px; background-color: $white; border-color: darken($value, 20%); color: darken($value,30%); &:hover{ background-color: darken($value, 10%); border-color: darken($value,15%) ; color: color-yiq-const($value); } } } }