span.grey{

color:$color-grey;

}

.text-one{

color: $color-one;
code.output:after{
  content: "#{$color-one}";
}

} .text-two{

color: $color-two;
code.output:after{
  content: "#{$color-two}";
}

} .text-three{

color: $color-three;
code.output:after{
  content: "#{$color-three}";
}

} .text-four{

color: $color-four;
code.output:after{
  content: "#{$color-four}";
}

} .text-grey{

color: $color-grey;
code.output:after{
  content: "#{$color-grey}";
}

}

.text-d10-one{

color: darken($color-one, 10%);
code.output:after{
  content: "#{darken($color-one, 10%) }";
}

} .text-d10-two{

color: darken($color-two, 10%);
code.output:after{
  content: "#{darken($color-two, 10%) }";
}

} .text-d10-three{

color: darken($color-three, 10%);
code.output:after{
  content: "#{darken($color-three, 10%) }";
}

} .text-d10-four{

color: darken($color-four, 10%);
code.output:after{
  content: "#{darken($color-four, 10%) }";
}

} .text-d10-grey{

color: darken($color-grey, 10%);
code.output:after{
  content: "#{darken($color-grey, 10%) }";
}

}

.text-d20-one{

color: darken($color-one, 20%);
code.output:after{
  content: "#{darken($color-one, 20%) }";
}

} .text-d20-two{

color: darken($color-two, 20%);
code.output:after{
  content: "#{darken($color-two, 20%) }";
}

} .text-d20-three{

color: darken($color-three, 20%);
code.output:after{
  content: "#{darken($color-three, 20%) }";
}

} .text-d20-four{

color: darken($color-four, 20%);
code.output:after{
  content: "#{darken($color-four, 20%) }";
}

} .text-d20-grey{

color: darken($color-grey, 20%);
code.output:after{
  content: "#{darken($color-grey, 20%) }";
}

}

.text-d30-one{

color: darken($color-one, 30%);
code.output:after{
  content: "#{darken($color-one, 30%) }";
}

} .text-d30-two{

color: darken($color-two, 30%);
code.output:after{
  content: "#{darken($color-two, 30%) }";
}

} .text-d30-three{

color: darken($color-three, 30%);
code.output:after{
  content: "#{darken($color-three, 30%) }";
}

} .text-d30-four{

color: darken($color-four, 30%);
code.output:after{
  content: "#{darken($color-four, 30%) }";
}

} .text-d30-grey{

color: darken($color-grey, 30%);
code.output:after{
  content: "#{darken($color-grey, 30%) }";
}

}

.text-l10-one{

color: lighten($color-one, 10%);
code.output:after{
  content: "#{lighten($color-one, 10%) }";
}

} .text-l10-two{

color: lighten($color-two, 10%);
code.output:after{
  content: "#{lighten($color-two, 10%) }";
}

} .text-l10-three{

color: lighten($color-three, 10%);
code.output:after{
  content: "#{lighten($color-three, 10%) }";
}

} .text-l10-four{

color: lighten($color-four, 10%);
code.output:after{
  content: "#{lighten($color-four, 10%) }";
}

} .text-l10-grey{

color: lighten($color-grey, 10%);
code.output:after{
  content: "#{lighten($color-grey, 10%) }";
}

}

.text-l20-one{

color: lighten($color-one, 20%);
code.output:after{
  content: "#{lighten($color-one, 20%) }";
}

} .text-l20-two{

color: lighten($color-two, 20%);
code.output:after{
  content: "#{lighten($color-two, 20%) }";
}

} .text-l20-three{

color: lighten($color-three, 20%);
code.output:after{
  content: "#{lighten($color-three, 20%) }";
}

} .text-l20-four{

color: lighten($color-four, 20%);
code.output:after{
  content: "#{lighten($color-four, 20%) }";
}

} .text-l20-grey{

color: lighten($color-grey, 20%);
code.output:after{
  content: "#{lighten($color-grey, 20%) }";
}

}

.text-l30-one{

color: lighten($color-one, 30%);
code.output:after{
  content: "#{lighten($color-one, 30%) }";
}

} .text-l30-two{

color: lighten($color-two, 30%);
code.output:after{
  content: "#{lighten($color-two, 30%) }";
}

} .text-l30-three{

color: lighten($color-three, 30%);
code.output:after{
  content: "#{lighten($color-three, 30%) }";
}

} .text-l30-four{

color: lighten($color-four, 30%);
code.output:after{
  content: "#{lighten($color-four, 30%) }";
}

} .text-l30-grey{

color: lighten($color-grey, 30%);
code.output:after{
  content: "#{lighten($color-grey, 30%) }";
}

}