Testing compass contrast-color() function on sassmeister.com

SassMeister-input-HTML.html

<div class="btn-dark">Hello dark</div>
<div class="btn-light">Hello light</div>

<div class="btn-dark-contrast">Hello dark</div>
<div class="btn-light-contrast">Hello light</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

@import "compass";

%btn {
    float: left;
    margin: 1em;
    padding: 1em;
}

//===========================================
// Testing color contrast functions
//===========================================
$color-dark: #000;
$text-light: #fff;

$color-light: #ddd;
$text-dark: #000;

$threshold: 100%;

.btn-dark {
    @extend %btn;
    background-color: $color-dark;
    color: contrast-color($color-dark, $text-dark, $text-light, $threshold);   
}

.btn-light {
    @extend %btn;
    background-color: $color-light;
    color: contrast-color($color-light, $text-dark, $text-light, $threshold);   
}

//===========================================

$contrasted-dark-default: #000;
$contrasted-light-default: #fff;

.btn-dark-contrast {
    @extend %btn;
    @include contrasted(#9dc82a);
}

.btn-light-contrast {
    @extend %btn;
    @include contrasted(#f1f1f1);
}

SassMeister-output.css

.btn-dark, .btn-light, .btn-dark-contrast, .btn-light-contrast {
  float: left;
  margin: 1em;
  padding: 1em;
}

.btn-dark {
  background-color: black;
  color: white;
}

.btn-light {
  background-color: #dddddd;
  color: black;
}

.btn-dark-contrast {
  background-color: #9dc82a;
  color: black;
}

.btn-light-contrast {
  background-color: #f1f1f1;
  color: black;
}

SassMeister-rendered.html

<div class="btn-dark">Hello dark</div>
<div class="btn-light">Hello light</div>

<div class="btn-dark-contrast">Hello dark</div>
<div class="btn-light-contrast">Hello light</div>