system-ui / theme-ui

Build consistent, themeable React apps based on constraint-based design principles

Home Page:https://theme-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

supports the theme on `clamp`

arantespp opened this issue · 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.

Ooh, love this idea!

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

Yes please!