min and max clamp values reversed compared to utopia.fyi

[edimoldovan]

Hi!

I was playing a bit with the type scale generator in this repository and I noticed for some reason it generates a little different output than utopia.fyi, namely the one below:

clamp(2.92rem, calc(7.13rem + -4.68vw), 6.19rem)
clamp(6.19rem, calc(7.13rem + -4.68vw), 2.92rem)

Basically the min max are reversed. The top one is from utopia.fyi, bottom one is from this codebase. Anyone else seen anything like this?

[edimoldovan]

Oh, forgot to mention -- I'm also using the correction from the open PR.

[xesrevinu]

I use this code in my own fork to generate the same output as utopia.fyi

function clampValue(minValue, maxValue, minViewport, maxViewport, unit = "px", fractionDigits = 4) {
  const isRem = unit === "rem"
  const minValuePx = isRem ? toPx(minValue, fractionDigits) : minValue
  const maxValuePx = isRem ? toPx(maxValue, fractionDigits) : maxValue

  const variablePart = (maxValuePx - minValuePx) / (maxViewport - minViewport)
  const constant = parseFloat(((maxValuePx - maxViewport * variablePart) / 16).toFixed(fractionDigits))

  return `clamp(${toRem(minValuePx, fractionDigits)}rem,${constant ? ` ${constant}rem +` : ""} ${parseFloat(
    (100 * variablePart).toFixed(fractionDigits),
  )}vw, ${toRem(maxValuePx, fractionDigits)}rem)`
}

function clampSpacingValue(min, max, fractionDigits = 4) {
  return `clamp(${toRem(min, fractionDigits)}rem, 0vw, ${toRem(max, fractionDigits)}rem)`
}

[notflip]

@xesrevinu Where do you define this function to work with Tailwind? Thanks

[xesrevinu]

@notflip Like this in the tailwind plugin instead of manually copying CSS

[notflip]

@xesrevinu Thanks! How do you include the function? Are you using Tailwindv4 (with the @theme syntax?)

[xesrevinu]

Sorry, I'm still using Tailwind 3, just treat it as a plugin, you don't need to make any modifications to global.css.

[xesrevinu]

https://github.com/domchristie/tailwind-utopia You can take a look at this, it's ready to use out of the box. Any questions?