search

kitschpatrol / svelte-tweakpane-ui

A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.
https:///kitschpatrol.com/svelte-tweakpane-ui
MIT License
105 stars 3 forks source link

Changing font size #11

Closed cristianvogel closed 3 months ago

cristianvogel commented 3 months ago

Hi,

my users are requesting larger fonts on the value readouts, I can't seem to change the size using the theme baseFontFamily: "sans-serif", setting. Should I be able to pass a font-size attribute somehow?

kitschpatrol commented 3 months ago

Svelte Tweakpane UI's theming system exposes the same variables that are used in Tweakpane's underlying theme customization implementation, which does not include font-size. There's a way to directly override the CSS in Tweakpane, discussed here, but I'm not sure how far it can be pushed before layouts start to break.

As an alternative, Svelte Tweakpane UI adds the scale prop on the <Pane> component, which makes it easy to increase the size of the entire pane using CSS transforms, and it looks great since Tweakpane is all vectors.

Also, I've also noticed that especially on Windows, the default monospace typeface looks very anemic and can be hard to read, swapping in a slightly heavier font can improve legibility even at the same size.

cristianvogel commented 3 months ago

ok, thanks!