Merge pull request #423 from styled-system/typography-scoped

Typography scoped option
styled-system · Mar 12, 2019 · fbf6c91 · fbf6c91
2 parents 939d868 + 32d3976
commit fbf6c91
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/packages/typography/package-lock.json b/packages/typography/package-lock.json
diff --git a/packages/typography/package.json b/packages/typography/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@styled-system/typography",
-  "version": "1.0.0-4",
+  "version": "1.0.0-8",
   "description": "Add typographic styles to child elements using styled-system and themes",
   "main": "dist/index.js",
   "scripts": {

diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js
@@ -59,12 +59,18 @@ export const typographyStyles = compose(
 export const typography = props => {
   // handle emotion's Global and css props
   const theme = props.theme || props
+  theme.typography = theme.typography || {}
   const styles = {}
+  const scoped = theme.typography.scoped
   const elements = pick(theme.typography, tagNames)
   for (const key in elements) {
     const el = elements[key]
     const rules = typographyStyles({ theme, ...el })
     // flatten & merge??
+    if (scoped && key === 'body') {
+      styles['&'] = [ el, ...rules ]
+      continue
+    }
     styles[key] = [ el, ...rules ]
   }
 

diff --git a/packages/typography/src/reset.js b/packages/typography/src/reset.js
@@ -13,6 +13,7 @@ export const reset = {
   'pre code': {
     fontSize: 'inherit',
     color: 'inherit',
+    backgroundColor: 'inherit',
   },
   'li > p': {
     fontSize: 'inherit',

diff --git a/packages/typography/src/themes/modern.js b/packages/typography/src/themes/modern.js
@@ -18,8 +18,12 @@ export const modern = {
     lineHeight: 1.25,
   },
   pre: {
+    fontFamily: 'monospace',
     p: [2, 3],
   },
+  code: {
+    fontFamily: 'monospace',
+  }
 }
 
 export default modern