Use if/else instead of contrast()

[simurai]

... to detect if a Syntax theme is light or dark.

@braver Ohh.. snap! That's how you do if/else in Less. I think I tried something like

& when (luma(@syntax-background-color) < 50%) {
  @base-background-color: @syntax-background-color;
}
& when (luma(@syntax-background-color) >= 50%) {
  @base-background-color: #333;
}

but didn't seem to work with variables. Then (mis)used the contrast() function instead.

btw. I also like the foreground/background naming and the modular scales. Saw modularscale.com the other day which is a nice tool.

[simurai]

Note to self: This should work

@ui-a:       hsl(252, 11%, 18%); // fallback
@ui-a:       @syntax-background-color;
@ui-a-h:     hue(@ui-a);
@ui-a-s:     min( saturation(@ui-a), 12%);

.ui-a-color() when (luma(@ui-a) <= 50%) {
  @ui-a-color: @ui-a;
}
.ui-a-color() when (luma(@ui-a) > 50%) {
  @ui-a-color: hsl(@ui-a-h, @ui-a-s, 24%);
}
.ui-a-color();

[braver]

Yeah, if/else in Less is totally backwards. I'm more used to SCSS which uses a more common syntax, and I'm still not sure I really get why it has to be so complicated.

Re: modularscale.com I see they finally updated that site, I tend to use type-scale.com a lot which is the same but used to have the better GUI. You should really watch https://vimeo.com/17079380. Tim Brown has a number of talks about using modular scales to create harmonious layouts with type. I don't have much formal background in graphic design, so I like guidelines like this that really help control a layout. I intended for the scale to be user configurable, because for some fonts 1.25 (or 1.414) works better than 1.33, and it's a neat way of making the layout more or less compact. But I really need configurable Less variables for that, so, perhaps one day.

Re: foreground/background. Thanks. I do sometimes use a background color as a foreground color though, so it's not a perfect system. And I have too many brightness levels and too many steps in the scale... ah well :)

[simurai]

I'm still not sure I really get why it has to be so complicated.

I read Less's philosophy is that it wants to stay as close to CSS as possible. if/else would already be too much "programming". It's a good goal, but I think it also makes things more complicated than it could be.

[braver]

Yeah, it's weird. Never met anyone who didn't understand the if/else construct. As a syntax I never really like Less, but I'll take it over plain CSS any day ;)