Contrast Mixin to helper implement accessibility colors.

contrast-function.scss

// ----
// libsass (v3.5.4)
// ----

$contrasts: 'base', 'contrast-white', 'contrast-black';

$colors: (
  'primary': (
    'base': red,
    'contrast-white': white,
    'contrast-black': black
  ),
  'secondary': (
    'base': green,
    'contrast-white': purple,
    'contrast-black': gray
  )
);

@function get-color($color, $contrast: 'base') {
  $setColor: map-get(map-get($colors, $color),$contrast);
  @if $setColor {
    @return $setColor;
  } @else {
    // Libsass still doesn't seem to support @error
    @warn "=> ERROR: COLOR NOT FOUND! <= | Your $color-name, $contrast combination did not match any of the values in the $colors map.";
  }
};

@mixin set-contrast($color-name, $opacity: 1) {
  @for $i from 1 through length($contrasts){
    $contrast: nth($contrasts, $i);
    $color: rgba(get-color($color-name, $contrast), $opacity) !global;
    
    @if($contrast == 'base'){
      @content;
    } @else {
      .#{$contrast} & {
        @content;
      }
    }
  }
}

.app-header{
  display: flex;
  color: get-color('primary');
  
  @include set-contrast('secondary'){
    border: 1px solid $color;
  }
  @include set-contrast('primary'){
    background: $color;
  }
  
  label { 
    @include set-contrast('primary'){
      background: $color;
    }
    
  }
  
  color: rgba(#007fad, .5);
}