foundation-sites icon indicating copy to clipboard operation
foundation-sites copied to clipboard

Possibility to setup the callout lightness as optional parameter of the mixin

Open zeleznypa opened this issue 3 years ago • 0 comments

Since the callouts are also used as "sections" (like footer in ecommerce template), it will be useful to have a possibility to have "lighter" version for alerts and "darker" version for the sections. Because of that, it will be useful to change the callout-style by adding second optional parameter with the $lightness value:

/// Generate quick styles for a callout using a single color as a baseline.
/// @param {Color} $color [$callout-background] - Color to use.
/// @param {Number} $lightness [$callout-background-fade] - Lightnes level percent.
@mixin callout-style($color: $callout-background, $lightness: $callout-background-fade) {
  $background: scale-color($color, $lightness);

  background-color: $background;
  color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
}

zeleznypa avatar Jul 24 '20 12:07 zeleznypa