salesforce-ux / theo

Theo is a an abstraction for transforming and formatting Design Tokens

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom Transforms / Value Transforms needs clear documentation

chidexebere opened this issue · comments

The documentation for Custom Transforms / Value Transforms is not clear.
I am trying to create a custom transform to HSL colors.

/*
{
  CUSTOM_EASING: {
    type: 'easing',
    value: [1,2,3,4]
  }
}
*/

theo.registerValueTransform(
  // Name to be used with registerTransform()
  "easing/web",
  // Determine if the value transform
  // should be run on the specified prop
  prop => prop.get("type") === "easing",
  // Return the new value
  prop => {
    const [x1, y1, x2, y2] = prop.get("value").toArray();
    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
  }
);

// Override the default "web" transform
theo.registerTransform("web", ["color/rgb", "easing/web"]);