csslesscss-variables

Convert LESS lighten and darken to CSS color-mix

I'm trying to convert some LESS color functions (lighten/darken) to use the CSS color-mix function instead so that I can make use of CSS variables.

I have a dependency that uses these internally and have written an NPM post-install script that automatically converts them. The conversion is working fine, however the issue I'm facing is that the output is off.

Here is an example of the output:

enter image description here

For the color-mix, I'm using:

color-mix(in srgb, white 5%, var(--my-color)); // lighten(@mycolor, 5%);
color-mix(in srgb, white 50%, var(--my-color)); // lighten(@mycolor, 50%);

Any idea how can I more closely match what I'm seeing from LESS?

Solution

  • This will be possible once CSS Relative Colors (part of CSS Color Module 5) - currently only supported in Safari.

    background: hsl(from var(--color) h s calc(l + 5%));


    .colors {
  display: flex;
}

.colors > div {
  --color: #22b8cf;
  --color-lighten-5: #2ec5dd;
  width: 100px;
  height: 100px;

  &:nth-child(1) {
    background: var(--color);
  }

  &:nth-child(2) {
    background: var(--color-lighten-5);
  }
  
  &:nth-child(3) {
    background: hsl(from var(--color) h s calc(l + 5%));
  }
}
    <div class="colors">
  <div>Base</div>
  <div>Less Lighten 5%</div>
  <div>CSS Lighten 5%</div>
</div>