How to implement font linear scaling with Panda?

[Qocotzxin]

Hi! I'm trying to implement font linear scaling using the clamp function. I've done this in the past with SCSS using some calculations but getting this to work in Panda it's getting really complex. Is there a recommended way to do this?

The main problem I'm encountering is calculating values. Even if I declare min/max widths as pixels, I use them via tokens. So I need to retrieve the value, make some math and return the clamp function with the calculated values.

So far I've tried implementing it via patterns, but I can't access the token value at that point (I'm assuming this is because tokens are not yet resolved when running patterns?). I then tried using utilities, but it doesn't seem to be the proper way to go.

Ideally what I would like to do is something like this:

export const scaleFont = definePattern({
  description: "Apply font linear scaling between a min and a max value.",
  properties: {
    minFontSize: { type: "token", value: "fontSizes" },
    maxFontSize: { type: "token", value: "fontSizes" },
  },
  transform: ({ minFontSize, maxFontSize, ...rest }) => {
    // Make some math here with computed token values....
    const fontSize = "clamp(...);

    return {
      fontSize,
    };
  },
});

Appreciate any help!

[Qocotzxin]

Found the answer here #1170