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

supports the theme on clamp #2404

Open
arantespp opened this issue Mar 1, 2023 · 3 comments
Open

supports the theme on clamp #2404

arantespp opened this issue Mar 1, 2023 · 3 comments

Comments

@arantespp
Copy link

arantespp commented Mar 1, 2023

Is your feature request related to a problem? Please describe.

We're using fluid typography in our projects with Theme UI, and we'd like to use a feature that supports the theme on clamp.

Describe the solution you'd like

It'd be nice to have something like this:

import { clamp } from 'theme-ui' // or something like "@theme-ui/fluid"

<Text sx={{
  fontSize: clamp(1, '4vw', 2) // if using array of font sizes
  fontSize: clamp('lg', '4vw', '2xl') // if using font sizes as object
}} />

Describe alternatives you've considered

Currently, we're using this way:

<Text sx={{
  fontSize: `clamp(${theme?.space?.lg}, '10vw', ${theme?.space?.xl)`
}} />

Additional context

I can implement this feature if it makes sense to Theme UI lib.

@lachlanjc
Copy link
Member

Ooh, love this idea!

@arantespp
Copy link
Author

@lachlanjc, can I send a PR to validate this idea?

@lachlanjc
Copy link
Member

Yes please!

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

No branches or pull requests

2 participants