leafo / lessphp

LESS compiler written in PHP
http://leafo.net/lessphp
Other
2.2k stars 528 forks source link

No luma function (example) [title edited] #533

Closed that0n3guy closed 10 years ago

that0n3guy commented 10 years ago

Im trying to use http://rriepe.github.io/1pxdeep/ scheme.less and its not working w/ lessphp.

See this example:

/////////////////////////////////////////////////
/////////////////////////////////////////////////
//// SchemeLESS v1.0
////
//// Copyright 2013 Rex Riepe
//// Licensed under the Apache License v2.0
//// http://www.apache.org/licenses/LICENSE-2.0
////
/////////////////////////////////////////////////
/////////////////////////////////////////////////

///////////////////////////
////Customizable values
///////////////////////////

// This color is used to generate the scheme
@seed-color:#578562;

//// Color wheel positions
///////////////////////////

// Uncomment the color wheel you want to use

// Accented analogue (default)
@wheel_pos1:45; @wheel_pos2:315; @wheel_pos3:180;

// Tetrad
//@wheel_pos1:30; @wheel_pos2:180; @wheel_pos3:210;

// Triad
//@wheel_pos1:120; @wheel_pos2:240; @wheel_pos3:0;

// Compliment
//@wheel_pos1:180; @wheel_pos2:0; @wheel_pos3:180;

// Monochrome
//@wheel_pos1:8; @wheel_pos2:352; @wheel_pos3:0;

//// Luma breaks
///////////////////////////

// Change these for different contrast cutoff points

@luma-upper-break:80%;
@luma-lower-break:16%;

//// Relative changes to subcolors (lightness, saturation)
///////////////////////////

// Customize these for different relative a, b and c colors

@contrast:1;

@color-a-sat:8%*@contrast;
@color-a-lit:-15%*@contrast;

@color-b-sat:7%*@contrast;
@color-b-lit:-5%*@contrast;

@color-c-sat:-3%*@contrast;
@color-c-lit:8%*@contrast;

///////////////////////////
////Scheme building
///////////////////////////

//// Beginning color values
///////////////////////////

@sat:saturation(@seed-color);
@luma:luma(@seed-color);
@lit:lightness(@seed-color);
@tone:desaturate(@seed-color,100%);

//// Color creation
///////////////////////////

//This makes the scheme's colors using the wheel positions

@l-factor:@luma; // what we'll use for the L in HSL

@color1:@seed-color;
@color1theme:hsl(hue(spin(@seed-color,0)),@sat,@l-factor); // a color 1 alternate, to keep a, b and c colors consistent

@color1a:lighten(saturate(@color1theme,@color-a-sat), @color-a-lit);
@color1b:lighten(saturate(@color1theme,@color-b-sat), @color-b-lit);
@color1c:lighten(saturate(@color1theme,@color-c-sat), @color-c-lit);

@color2:hsl(hue(spin(@seed-color,@wheel_pos1)),@sat,@l-factor);

@color2a:lighten(saturate(@color2,@color-a-sat), @color-a-lit);
@color2b:lighten(saturate(@color2,@color-b-sat), @color-b-lit);
@color2c:lighten(saturate(@color2,@color-c-sat), @color-c-lit);

@color3:hsl(hue(spin(@seed-color,@wheel_pos2)),@sat,@l-factor);

@color3a:lighten(saturate(@color3,@color-a-sat), @color-a-lit);
@color3b:lighten(saturate(@color3,@color-b-sat), @color-b-lit);
@color3c:lighten(saturate(@color3,@color-c-sat), @color-c-lit);

@color4:hsl(hue(spin(@seed-color,@wheel_pos3)),@sat,@l-factor);

@color4a:lighten(saturate(@color4,@color-a-sat), @color-a-lit);
@color4b:lighten(saturate(@color4,@color-b-sat), @color-b-lit);
@color4c:lighten(saturate(@color4,@color-c-sat), @color-c-lit);

///////////////////////////
//// Mix-ins
///////////////////////////

//// Contrast
///////////////////////////

// contrasts text against a given background color

.contrast(@color) when (luma(@color) >= @luma-upper-break) {
    //darker text for lighter backgrounds
    color:average(darken(@color,30%),#222);
}

.contrast(@color) when (luma(@color) < @luma-upper-break) {
    //white text for everything else
    color:#ffffff;
}

//// Schemify
///////////////////////////

// brings outside colors more in line with the current scheme

.schemify(@color) { //schemifies a background color
    @mix-weight:60%;
    @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight);
    background:@new-color;
    .contrast(@new-color);
}

.schemify-text(@color) {
    @mix-weight:60%;
    @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight);
    color:@new-color;
    .contrast(@color);
}

/*!
 * instituttion
 */
#institution-step1bold {
  background-color: @color1;
  .contrast (@color1);
}

.upper-wrapper {
  background-color: @color1;
  .contrast (@color1);
}

#institution-info {
  background-color: @color1;
  .contrast (@color1);
  padding-bottom: 20px;
}

Contrast doesn't work. This works on http://less2css.org/ (less.js) though.

that0n3guy commented 10 years ago

I updated to master and I see there is luma function now. Sorry if I wasted anyone's time.