0

I have this SCSS: background-color: lighten($baseColor, 15%);

And we're converting our codebase to styled-components using inline CSS:

export const animateLoading = ({ baseColor, speed = "700ms" }) => css`
  &:after {
    background-color: lighten(${baseColor}, 15%);
    // etc
  }
`;

But styled-components uses CSS not SASS so the lighten function doesn't work. Does anyone know what that function does, like mathematically or something, such that I can write a JS function to get the same result?

Update:

Thanks to commenters I've written this, but it's not working. I'm not seeing any color at all:

export const animateLoading = ({ baseColor, speed = "700ms" }) => css`
  &:after {
    --color: ${baseColor};
    background-color: hsl(var(--color), 15%);
    // ...
  }
`;
Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
  • 2
    related: https://stackoverflow.com/a/55330103/8620333 – Temani Afif Jun 22 '21 at 20:44
  • @TemaniAfif I'd mark your answer as a dupe for this question, since the `lighten` (which has been advised against using in favor of `color.scale`) uses `hsl()` to do this: https://sass-lang.com/documentation/modules/color#scale – disinfor Jun 22 '21 at 20:48
  • Here's the `hsl()` spec: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl() – disinfor Jun 23 '21 at 00:06

0 Answers0