Various doc fixes following defaults refactor

docs/color/index.mdx

@@ -11,8 +11,6 @@ import { Color, Container, Box, Text } from './'
 ```js
 const Text = styled.h1`
   ${color.white}
-  ${border.solid}
-  ${border.blue}
   ${background.color.black}
 `
 ```

docs/layout/direction.mdx

@@ -21,7 +21,7 @@ const Container = styled.div`
 const Box = styled.div`
   ${size.height.medium}
   ${size.width.third}
-  ${({ light }) => (light ? background.red : background.black)}
+  ${({ light }) => (light ? background.color.red : background.color.black)}
 `
 ```
 

docs/props/emotion.js

@@ -5,15 +5,15 @@ import { background, color } from '../../src'
 
 export const Styled = styled.h1`
   ${props => props.invert && color.white}
-  ${props => (props.invert ? background.black : background.white)}
+  ${props => (props.invert ? background.color.black : background.color.white)}
 `
 
 export const CSSProp = ({ children, invert }) => {
   return (
     <h1
       css={css`
         ${invert && color.white}
-        ${invert ? background.black : background.white}
+        ${invert ? background.color.black : background.color.white}
       `}>
       {children}
     </h1>
@@ -22,12 +22,15 @@ export const CSSProp = ({ children, invert }) => {
 
 export const Array = ({ children, invert }) => (
   <h1
-    css={[invert && color.white, invert ? background.black : background.white]}>
+    css={[
+      invert && color.white,
+      invert ? background.color.black : background.color.white
+    ]}>
     {children}
   </h1>
 )
 
 export const ObjectLiteral = styled.h1(props => ({
   ...(props.invert && color.white),
-  ...(props.invert ? background.black : background.white)
+  ...(props.invert ? background.color.black : background.color.white)
 }))

docs/props/index.mdx

@@ -32,7 +32,7 @@ Styling based on props can be achieved in a variety of different ways depending
 ```jsx
 const Text = styled.h1`
   ${props => props.invert && color.white}
-  ${props => (props.invert ? background.black : background.white)}
+  ${props => (props.invert ? background.color.black : background.color.white)}
 `
 ```
 
@@ -52,7 +52,7 @@ const Text = ({ children, invert }) => {
     <h1
       css={css`
         ${invert && color.white}
-        ${invert ? background.black : background.white}
+        ${invert ? background.color.black : background.color.white}
       `}
     >
       {children}
@@ -74,7 +74,10 @@ const Text = ({ children, invert }) => {
 ```jsx
 const Text = ({ children, invert }) => (
   <h1
-    css={[invert && color.white, invert ? background.black : background.white]}
+    css={[
+      invert && color.white,
+      invert ? background.color.black : background.color.white
+    ]}
   >
     {children}
   </h1>
@@ -94,6 +97,6 @@ const Text = ({ children, invert }) => (
 ```jsx
 const Text = styled.h1(props => ({
   ...(props.invert && color.white),
-  ...(props.invert ? background.black : background.white)
+  ...(props.invert ? background.color.black : background.color.white)
 }))
 ```

docs/props/styled-components.js

@@ -4,15 +4,15 @@ import { background, color } from '../../src'
 
 export const Styled = styled.h1`
   ${props => props.invert && color.white}
-  ${props => (props.invert ? background.black : background.white)}
+  ${props => (props.invert ? background.color.black : background.color.white)}
 `
 
 export const CSSProp = ({ children, invert }) => {
   return (
     <h1
       css={css`
         ${invert && color.white}
-        ${invert ? background.black : background.white}
+        ${invert ? background.color.black : background.color.white}
       `}>
       {children}
     </h1>
@@ -21,12 +21,15 @@ export const CSSProp = ({ children, invert }) => {
 
 export const Array = ({ children, invert }) => (
   <h1
-    css={[invert && color.white, invert ? background.black : background.white]}>
+    css={[
+      invert && color.white,
+      invert ? background.color.black : background.color.white
+    ]}>
     {children}
   </h1>
 )
 
 export const ObjectLiteral = styled.h1(props => ({
   ...(props.invert && color.white),
-  ...(props.invert ? background.black : background.white)
+  ...(props.invert ? background.color.black : background.color.white)
 }))

docs/shadow/index.js

@@ -3,6 +3,6 @@ import { background, shadow, size } from '../../src'
 
 export const Shadow = styled.h1`
 ${size.height.medium}
-  ${background.black}
+  ${background.color.black}
   ${shadow.large}
 `

docs/shadow/index.mdx

@@ -11,7 +11,7 @@ import { Shadow } from './'
 ```js
 const Box = styled.h1`
   ${size.height.medium}
-  ${background.black}
+  ${background.color.black}
   ${shadow.large}
 `
 ```

docs/size/height.mdx

@@ -10,7 +10,7 @@ import { Height } from './'
 
 ```js
 const Box = styled.div`
-  ${size.height.large}
+  ${size.height.medium}
   ${background.color.black}
 `
 ```