Skip to content

Adds typography, breakpoints, icons, adjusts dark mode colors

Compare
Choose a tag to compare
@jonsamp jonsamp released this 09 Jan 04:19

This release includes styles for typography and more.

First up is typography. We standardized our typography and put the styles in this package. Our headers are now based on a major-third scale. Our body text now stays the same size across large, medium, and small screens, so that text never gets too small to read.

typography

We also added breakpoints: small, medium, and large.

Our icon set is now larger than before and includes icons from some Expo-specific things, like our plan icons.

icons

Finally, we added support for switching between palettes automatically with our theme switching CSS variables. We now expose theme colors like theme.palette.blue[200]. When in light mode, this will display theme.light.blue[200] and when in dark mode it will present theme.dark.blue[200]. This is possible because lowered the saturation on our dark mode colors. These are great for illustrations and decorative elements.

dark-theme

We also added theme.background.screen, which will show as a light gray color in light mode, and nearly black in dark mode. It's great when used as the background "screen" color in a layout.