feat: support fontStyle in props

Closes #91

Author: gregberge

packages/system/src/styles/typography.js

@@ -52,6 +52,10 @@ export const fontWeight = style({
   themeGet: getFontWeight,
 })
 
+export const fontStyle = style({
+  prop: 'fontStyle',
+})
+
 export const textAlign = style({
   prop: 'textAlign',
 })
@@ -73,6 +77,7 @@ export const textTransform = style({
 export const typography = compose(
   fontFamily,
   fontSize,
+  fontStyle,
   lineHeight,
   fontWeight,
   textAlign,

packages/system/tests/styled-components/styles.test.js

@@ -71,6 +71,16 @@ describe('styles', () => {
         ],
       },
     ],
+    [
+      'fontStyle',
+      {
+        styleRule: 'font-style',
+        expectations: [
+          ['normal', 'normal'],
+          ['italic', 'italic'],
+        ],
+      },
+    ],
     [
       'textAlign',
       {

website/src/pages/docs/style-props.mdx

@@ -110,6 +110,7 @@ Available typography utilities:
 - `fontSize`
 - `lineHeight`
 - `fontWeight`
+- `fontStyle`
 - `textAlign`
 - `letterSpacing`
 - `color`