Useful Functions

Determine Contrast Color

TIP

Determine whether to use dark or light text on top of given color. Returns black for dark text and white for light text.

@function choose-contrast-color($color) {
  $light-contrast: contrast($color, $white);
  $dark-contrast: contrast($color, $font-color);

  @if ($light-contrast > $dark-contrast) {
    @return $white;
  }
  @else {
    @return $font-color;
  }
}

Z-Index

TIP

z-index helper: so you'll never have a "z-index: 99999999;" headache again.

• Usage: z-index: z('site-header'); or via mixin: @include z-index("modal")

$z-index: (
  modal              : 2000,
  backdrop           : 1500,
  navigation         : 100,
  trigger            : 100,
  footer             : 90,
  site-header        : 60,
  page-clickable     : 41,
  bg-image           : 40,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}