theme-ui icon indicating copy to clipboard operation
theme-ui copied to clipboard

supports the theme on `clamp`

Open arantespp opened this issue 1 year ago • 3 comments

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.

arantespp avatar Mar 01 '23 21:03 arantespp

Ooh, love this idea!

lachlanjc avatar Mar 01 '23 23:03 lachlanjc

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

arantespp avatar Mar 07 '23 19:03 arantespp

Yes please!

lachlanjc avatar Mar 07 '23 22:03 lachlanjc