Hue parameter in lch() output in radians about sass-planifolia

[xi]

I didn't know lab/lch made it into the CSS Color 4 draft. Nice!

About this issue: Can you give some more context?

The current situation is this:

• lch() does not handle angle conversion itself. It simply passes hue to the underlying math functions (e.g. sin())
• The math functions in this library can handle angle units (3.41rad, 180deg, .5turn, …). If the input does not have a unit, it is expected to be radian.

So if you are using the math functions from this library, passing in degrees (with a unit) works fine.
If you are using a different math library there may be issues.

What exactly are you proposing to change about this?

[imkremen]

I just want to say that when somebody work with cylindrical representation of color he expect that hue will be presented as a range of positive values from 0 to 360 degree.
Cylindrical representation (HSL, LCHab ect.) was designed as "human understandable" format and all of source that I found use degree for defining hue.

Wiki:
https://en.wikipedia.org/wiki/Hue

Hue is one of the main properties (called color appearance parameters) of a color, defined technically (in the CIECAM02 model), as "the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow",

https://en.wikipedia.org/wiki/Lab_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC

The conversion of a* and b* to C* and h° is done using the following formulas:

https://en.wikipedia.org/wiki/Cylindrical_coordinate_system

As in polar coordinates, the same point with cylindrical coordinates (ρ, φ, z) has infinitely many equivalent coordinates, namely (ρ, φ ± n×360°, z) and (−ρ, φ ± (2n + 1)×180°, z), where n is any integer. Moreover, if the radius ρ is zero, the azimuth is arbitrary.

In situations where someone wants a unique set of coordinates for each point, one may restrict the radius to be non-negative (ρ ≥ 0) and the azimuth φ to lie in a specific interval spanning 360°, such as (−180°,+180°] or [0,360°)

Use-case:
When user want increase hue by some function he will expect (by his previous experience of working with LCHab model) that by default hue is set in degree (from 0 to 360):

@function foo ($color) {
  $h: pf-hue($color);
  $h: $h + 10;
  $points: (0 $h, 0.25 342, 0.75 18, 1 360);
  @return bezier($points, .5);
}

//foo(#2196f3) => 0.5 181.0583835051rad

So for now user need to do the next:

// Convert string to number
@function number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }
  
  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
  
  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);
    
    @if not (index(map-keys($numbers), $character) or $character == '.') {
      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
    }
    
    @if $character == '.' {
      $digits: 1; 
    } @else if $digits == 0 {
      $result: $result * 10 + map-get($numbers, $character);  
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }
  
  @return if($minus, -$result, $result);;
}

// Convert from radians to degrees.
@function radToDeg ($radians) {
  @return $radians * 180 / pi();
}

@function angleTrim ($angle) {
  $angle: inspect($angle);
  $radIndex: str-index($angle, rad);
  $degIndex: str-index($angle, deg);
  @if $radIndex != null {
    @return number(str-slice($angle, 1, $radIndex - 1));
  } @else if $degIndex != null {
    @return number(str-slice($angle, 1, $degIndex - 1));
  } 
}

@function foo ($color) {
  $h: pf-hue($color);
  $h: radToDeg($h);
  $h: angleTrim($h);
  $h: $h + 10;
  $points: (0 $h, 0.25 342, 0.75 18, 1 360);
  @return bezier($points, .5);
}

//foo(#2196f3) => 0.5 170.2711835564

[imkremen]

As a conclusion, to be in sync with definition of lch() function in specification we need use "deg" as a canonical unit instead of "rad"

All units are compatible, and deg is their canonical unit.
https://www.w3.org/TR/css-values/#angle-value

I understand that it will be breaking change, but if we do it now we prevent future problems (some day, planifolia's lch() will break default behavior of css lch() function).

[xi]

Fixed in fb68b37. I will try to resolve #4 before doing a new release though.

[xi]

0.6.0 is now available on npm.