Skip to content

Modify mix operation precision error #3862

@johnny-tran

Description

@johnny-tran

Describe the bug
While using the color Modify (Operation: mix) and mixing a transparent color into a solid color, the plugin displays the incorrect color output compared to what is produced after using sd-transform. The preview value in Token Studio does not match the output once our CSS tokens are built. Additionally, the exported hex value to Figma matches what was put through the transformer, but does not match Token Studio. Although hex is correct, the percentage is not precise.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new color token and set it to #000000a1
  2. Add a new modifier
  3. Set Operation to mix
  4. Set Space to srgb
  5. Set Ratio to 0.31
  6. Preview of final value is rgb(52.4% 52.4% 52.4% / 0.83)
  7. Exported values in Figma #4F4F4F 75%

Expected behavior
Preview value should match how sd-transform would output this Modify mix operation displaying rgb(31% 31% 31% / 0.7447) instead. rgb(31% 31% 31%) converts to hex #4F4F4F which is correctly exported to Figma.
In regards to the alpha percentage; the exported value in Figma should be 74.47%. This level of precision is supported by Figma variables.

Screenshots or Screencasts
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    📥 Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions