tremorlabs / tremor

React components to build charts and dashboards

Home Page:https://tremor.so

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature]: Theme token for Subtitle font size

robtherobot12 opened this issue · comments

What problem does this feature solve?

Currently, it is possible to edit the font size in tailwind.config.js of all text elements except Subtitle for some reason, as shown in the docs - under "Subtitle", there is no theme token for font size.

This makes it difficult for users to create a consistent theme change when developing their app.

An example would be me - I am sizing down all the components, as I think the elements and font sizes are too large for my app. However, since I cannot scale the subtitle down, so I have to create my own subtitle element instead of using Tremor's one, causing inconsistencies and more difficult maintenance in the long run.

What does the proposed API look like?

tailwind.config.js:

// These are not default values, used for reference
...
fontSize: {
        "tremor-label": ["0.3rem", { lineHeight: "0.7rem" }],
        "tremor-default": ["0.5rem", { lineHeight: "0.9rem" }],
        "tremor-subtitle": ["0.75rem", { lineHeight: "1rem" }], // New entry
        "tremor-title": ["0.875rem", { lineHeight: "1.25rem" }],
        "tremor-metric": ["1.125rem", { lineHeight: "1.75rem" }],
},
...

Hi! Makes total sense right now. However, we'll completely overhaul our theming strategy with the release of Tailwind CSS v4.0. Also, all Typography elements will be deprecated soon.