Better color shifting for less-css

colorshift.less

// Less color functions are absolute, i.e. if you lighten a really light color by 50%, you'll probably just get pure-white,
// because lighten works relative to the full scale from black -> white

// These functions shift a color relative to it's current value, (if you have a 50% grey, and shift it by 50%, you should end up with a 75% grey)
// Because less doesn't support functions as well as I would like, the solution is quite hacky.
// To set a property to a shifted value, call .color_shift, passing it in.

// For example:  .color_shift(background, blue, 70%); produces:  background: #b3b3ff;  (light-blue)


.shifted(@color, @by) when (@by < 0) {
	@temp_ave: lightness(@color) - (lightness(@color) * (abs(@by)/100));
	@shifted: hsl(hue(@color), saturation(@color), @temp_ave);
}

.shifted(@color, @by) when (@by > 0) {
	@temp_ave: lightness(@color) + ((100 - lightness(@color)) * (@by/100));
	@shifted: hsl(hue(@color), saturation(@color), @temp_ave);
}

.shifted(@color, @by) when (@by = 0) {
	@shifted: @color;
}

.color_shift(@prop, @color, @by) {
	.shifted(@color, @by);
	@{prop}: @shifted;
}


//Example:
.example {
  .color_shift(background, red, 50%);
  .color_shift(color, red, -50%);
}