johnchourajr / buen-type

A utility library for managing typographic scales in Tailwind CSS.
https://type.muybuen.dev/
MIT License
2 stars 0 forks source link

Pixel values #5

Open ignaciogiri opened 1 month ago

ignaciogiri commented 1 month ago

I did this with the help of Claude and it works. What are your thoughts?

// Helper function to convert pixels to rem
function pxToRem(px: number): number {
  return px / 16 // Assuming base font size is 16px
}

const customHeadlines: Record<string, TypeDefinition> = {
  'text-display-xxl': {
    clamp: [pxToRem(64), pxToRem(264)],
    classAlias: ['text-display-xxl'],
  },
}
johnchourajr commented 1 month ago

Thanks for using the package!

I see what you're looking for, I can improve the API with options on the types of inputs for the clamping. Ideally you can pass REM or pixel units. I think your workaround works. You could also eliminate the function and just do:

const customHeadlines: Record<string, TypeDefinition> = {
  'text-display-xxl': {
    clamp: [64 / 16, 264 / 16],
    classAlias: ['text-display-xxl'],
  },
}

When you get around to it I'd love to see how your using the type system :)