Adds icons

Adds and edits icons

Adds icons and logos

Adds the following icons and logos:

Updating dark mode colors

After getting some feedback, I darkened the dark mode grays some, making the dark border color have less contrast. I also made sure that the grays all share the same hue, and fixed some of their brightnesses.

Light palette

• Tweaks a few gray values to have a standard hue (215)
• Text is now gray 1000
• Button secondary foreground is now gray 1000
• Button tertiary foreground is now gray 000
• Button tertiary background is now gray 1000
• Button transparent foreground is now gray 1000

Dark palette

• Updates all the grays. Most of them are slightly darker.
• Black is now gray 000
• Background overlay is now gray 200
• Button tertiary background is now gray 500
• Button tertiary foreground is now gray 1000
• Button secondary foreground is now gray 800
• Icon default is now gray 700
• Status default is now gray 500
• Text secondary is now gray 700
• Code before is now gray 500

Screenshots

Before

After

Updating dark mode colors

After getting some feedback, I darkened the dark mode grays some, making the dark border color have less contrast. I also made sure that the grays all share the same hue, and fixed some of their brightnesses.

Light palette

• Tweaks a few gray values to have a standard hue (215)
• Text is now gray 1000
• Button secondary foreground is now gray 1000
• Button tertiary foreground is now gray 000
• Button tertiary background is now gray 1000
• Button transparent foreground is now gray 1000

Dark palette

• Updates all the grays. Most of them are slightly darker.
• Black is now gray 000
• Background overlay is now gray 200
• Button tertiary background is now gray 500
• Button tertiary foreground is now gray 1000
• Button secondary foreground is now gray 800
• Icon default is now gray 700
• Status default is now gray 500
• Text secondary is now gray 700
• Code before is now gray 500

Screenshots

Before

After

Adds header sizes, removes canvas

Changes

This release adds header typography values to @expo/styleguide. It now exports two sets of headers.

headers

There are two sets of headers: xl and default. xl is preferable when using marketing screens, while default is appropriate for general-purpose UI. We can access them with headers.default.h1, for instance.

Fixes

• Fixes the small responsive style for <HUGE> elements under headers.xl.huge.

Breaking changes

• Removed the theme.background.canvas style. Replace it with theme.background.screen style.

Adds typography, removes canvas

This release adds typography values to @expo/styleguide-native. It exports headers and body text.

headers

There are two sets of headers: xl and default. xl is preferable when using marketing screens, while default is appropriate for general-purpose UI. Then, for each set of headers, there are three separate sizes: large, medium, and small. These sizes should match with breakpoints so that we can implement responsive typography across different sized devices.

body

The body text styles are appropriate for all situations and match the type sizes of @expo/styleguide.

Screenshots

Breaking changes

• This release removes the theme.background.canvas style. Replace it with theme.background.screen.

Adds typography, breakpoints, icons, adjusts dark mode colors

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.

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.

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.

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.

Adds shadows and icons

This release adds shadows consistent across web (@expo/styleguide), iOS, and Android (@expo/styleguide-native).

New shadow weights include shadows.micro and shadows.tiny. Also added the ability to use shadows styles on Android, which was previously not possible.

This release adds more icons, like "message", "megaphone", "arrow-left", and more. Here's all the icons as of this release:

Adds styleguide-native, iconSize to styleguide

Refactored this package to be a Lerna project with two packages:

• @expo/styleguide
• @expo/styleguide-native

@expo/styleguide is refactored, but outputs the same objects. Added an iconSize object for different icon sizes.

@expo/styleguide-native adds the same styles as @expo/styleguide, but configured for Expo projects.

v3.0.0

3.0.0 (2021-04-24)

Features

• adds new theme colors and more icons. Renames expo-colors.css to expo-theme.css (7fd4d5b)

BREAKING CHANGES

• This renames expo-colors.css to expo-theme.css.