search

siddharthkp / react-ui

Customisable components and primitives based on design tokens
https://react-ui.dev/
418 stars 53 forks source link

Convert to rems during render #90

Open siddharthkp opened 4 years ago

siddharthkp commented 4 years ago

Authoring styles on a scale removes the need to think in units, but we should recommend folks to define their themes with rems instead of px (including the default themes) so that we make sure the result is accessible :)

ankibalyan commented 4 years ago

we can do it by converting our base font to 10px and with that calculation will also become easier for rem units. We can set body size as 10px in % so that it respects browser's zoom-in zoom-out functionality. to do so.

body {
  fontSize: 62.5%; // 10/16 = 0.625
}

so this will be conversion afterwards.

5px = 0.5rem
10px = 1rem
25px = 2.5rem

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

ankibalyan commented 4 years ago

Open for discussion, let me know if you've something else in mind.

ankibalyan commented 4 years ago

Another reference from Material-UI, they suggest this change from theme creation utility function. https://material-ui.com/customization/typography/#html-font-size

oliviertassinari commented 4 years ago

@ankibalyan you can look at the history of this MUI markdown, I think that we link an older article about the topic, maybe from 2011.

ankibalyan commented 4 years ago

@oliviertassinari sorry, I did't see any old article. can you please link it. I just checked this one, and here is the diff that you've committed link https://github.com/mui-org/material-ui/commit/d798533d2e18269a0776071678392f2d2e0b3ea0