Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pixel values #5

Open
ignaciogiri opened this issue Oct 4, 2024 · 1 comment
Open

Pixel values #5

ignaciogiri opened this issue Oct 4, 2024 · 1 comment
Assignees
Labels
enhancement New feature or request

Comments

@ignaciogiri
Copy link

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 johnchourajr added the enhancement New feature or request label Oct 9, 2024
@johnchourajr johnchourajr self-assigned this Oct 9, 2024
@johnchourajr
Copy link
Owner

johnchourajr commented Oct 9, 2024

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

2 participants