Blackness and Lightness API Symmetry

[oleersoy]

Hi,

I'm working with the lightness and blackness functions ATM. Blackness works the way I expect. For example if I do:

  --color-primary-700: color(var(--color-primary) blackness(15%));

The resulting color is slightly darker. The higher the percentage the darker the color. I specify 0%, the color is the same.

On the other hand the lightness functions seems to start at 50%, instead of 0%. So if I specify 50% I get approximately the same color. If I specify a value greater than 50%, I get a lighter color. Less than 50% yields a darker color.

It would be nice if both lightness and darkness were symmetrical with respect to how output corresponds to input. I'm put a test below:

:root {
  --color-primary:         #0275d8;
  --color-primary-100: color(var(--color-primary) lightness(30%));
  --color-primary-300: color(var(--color-primary) lightness(15%));
  --color-primary-500: var(--color-primary);
  --color-primary-700: color(var(--color-primary) blackness(15%));
  --color-primary-900: color(var(--color-primary) blackness(30%));
}

/* 4 */
@each $variation in 100, 300, 500, 700, 900 {
  @each $brand in primary {
    .u-color-background-$(brand)-$(variation) {background-color: var(--color-$(brand)-$(variation));
    }
  }
}

When I run this I'm expecting the section:

  --color-primary-100: color(var(--color-primary) lightness(30%));
  --color-primary-300: color(var(--color-primary) lightness(15%));

To yield colors that are slightly lighter, but instead I get colors that are darker than the primary color, with the lightness(15%) one being darker than the lightness(30%) one.

Thoughts?

Cheers, Ole

[oleersoy]

Closing. I reran my tests using whiteness and blackness and now the behavior is as expected. I'll include some rough test code in case it's of interest for the examples (For a more complete example see superfly-css-colors:

:root {
  --color-primary:         #0275d8;
  --color-primary-100: color(var(--color-primary) whiteness(50%));
  --color-primary-300: color(var(--color-primary) whiteness(25%));
  --color-primary-500: var(--color-primary);
  --color-primary-700: color(var(--color-primary) blackness(25%));
  --color-primary-900: color(var(--color-primary) blackness(50%));
}

/* 4 */
@each $variation in 100, 300, 500, 700, 900 {
  @each $brand in primary {
    .u-color-background-$(brand)-$(variation) {background-color: var(--color-$(brand)-$(variation));
    }
  }
}

    <h2>u-color-background-primary-100</h2>
    <div class="u-color-background-primary-100">
    </div>
    <h2>u-color-background-primary-300</h2>
    <div class="u-color-background-primary-300">
    </div>
    <h2>u-color-background-primary-500</h2>
    <div class="u-color-background-primary-500">
    </div>
    <h2>u-color-background-primary-700</h2>
    <div class="u-color-background-primary-700">
    </div>
    <h2>u-color-background-primary-900</h2>
    <div class="u-color-background-primary-900">
    </div>