Skip to content

[Bug]: Color rounding #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Xenossolitarius opened this issue Mar 5, 2025 · 1 comment
Open

[Bug]: Color rounding #342

Xenossolitarius opened this issue Mar 5, 2025 · 1 comment
Assignees
Labels
bug Something isn't working triage To be reproduced as bug

Comments

@Xenossolitarius
Copy link

What happened?

Colors got rounded wrong in a special usecase where there are too many color transformations and for
'ts/color/css/hexrgba' to work I need to enable format hex bcs that's the only output that gives usable css

  'ts/color/modifiers': {
    format: 'hex',
  },

I need this modifier to actually not get something unusable like:
-color-overlay-tooltip-default: rgba(hsl(240 11.1% 9%) , 0.8);

But this transformation it seems is doing Math.ciel() instead of Math.round()

And breaking my values.

Reproduction

No response

Expected output

No response

Version

latest

@Xenossolitarius Xenossolitarius added bug Something isn't working triage To be reproduced as bug labels Mar 5, 2025
@jorenbroekema
Copy link
Member

jorenbroekema commented Mar 14, 2025

Can you add a reproduction and the expected output vs actual output so it's a bit easier for me to verify that there is a color transformation rounding error?
When we transform colors in this library we use ColorJS.io which does allow you to pick the colorSpace to do the transformation in, so doing the color modifier transformation in SRGB space vs HSL space may give you different results, but this is customizable by changing the space value in the modifier:

{
  "$extensions": {
    "studio.tokens": {
      "modify": {
        "space": "srgb",
        "value": "0.4",
        "type": "lighten"
      }
    }
  }
}

https://docs.tokens.studio/token-types/token-type-color-modifiers-pro#how-to-use-color-modifiers

If the color space is not the problem and it's literally just an issue of ColorJS.io doing a Math.ceil vs Math.round, we may need to raise an issue in their repo since it might be a bug there rather than in SD-transforms, but in order for me to know where the problem is I'll need a bit more info

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage To be reproduced as bug
Projects
None yet
Development

No branches or pull requests

2 participants