formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Question about responsive titles #261

Closed vinizinmoraes closed 3 weeks ago

vinizinmoraes commented 3 weeks ago

Is your feature request related to a problem? Please describe. Is it possible to have different title sizes based on the viewport? I couldn't find how to do it in the documentation. I came across a GitHub question using "responsive," but it seems to be an old version.

blvdmitry commented 3 weeks ago

Hey, yes, I'm updating the docs with the information about all responsive properties being highlighted better. Text variant property supports a responsive object syntax like all other components layout properties:

{ s: "body-2", l: "body-1" }

vinizinmoraes commented 3 weeks ago

Sure, I will need to change the text component from body-1 to body-2 instead of modifying the reshaped.theme.js file. Is it not possible to set body-1 to be 14px on mobile and 20px on desktop in the theme file, for example?

blvdmitry commented 3 weeks ago

Theme only pre builds the css so we can't modify the jsx output from there right now. What you can do though is create a component in your project wrapping Text that implements the responsive styling automatically based on your product needs, would that cover your use cases?

vinizinmoraes commented 3 weeks ago

Thank you for confirming!