Merge pull request #472 from jxnblk/update-components

Upgrade to @rebass/components, @rebass/grid, and styled-system 3

.babelrc

@@ -12,16 +12,16 @@
           {
             "replacements": [
               {
-                "original": "^system-components$",
-                "replacement": "system-components/emotion"
+                "original": "^@rebass/components$",
+                "replacement": "@rebass/components/emotion"
               },
               {
                 "original": "^styled-components$",
                 "replacement": "emotion-theming"
               },
               {
-                "original": "^grid-styled$",
-                "replacement": "grid-styled/emotion"
+                "original": "^@rebass/grid$",
+                "replacement": "@rebass/grid/emotion"
               }
             ]
           }

CHANGELOG.md

@@ -1,6 +1,24 @@
 
 # Changelog
 
+## [2.2.0] 2018-09-08
+
+- Use `polished` for color manipulation instead of `chroma-js`
+
+## [2.1.1] 2018-09-08
+
+- Support `width` prop on Card
+- Update docs
+
+## [2.1.0] 2018-08-14
+
+- Add Hide component
+
+## [2.0.1] 2018-06-30
+
+- Add `fontFamily` to Heading and Text components
+- Update docs
+
 ## [2.0.0] 2018-06-24
 
 ### Added

README.md

@@ -58,7 +58,7 @@ import * as Rebass from 'rebass/emotion'
 
 - Kickstart your own React component library
 - Responsive style props from [styled-system][system]
-- Flexbox grid with [grid-styled][gs]
+- Flexbox grid with [Rebass Grid][]
 - Support for [styled-components][sc] & [emotion][emotion]
 - Functional stateless UI components
 - Configurable theming
@@ -115,12 +115,12 @@ for more on some of the thought behind Rebass.
 ### Related
 
 - [styled-system][system]
-- [grid-styled][gs]
+- [Rebass Grid][]
 - [styled-components][sc]
 - [emotion][emotion]
 
 [system]: https://github.com/jxnblk/styled-system
-[gs]: https://github.com/jxnblk/grid-styled
+[Rebass Grid]: https://github.com/rebassjs/grid
 [sc]: https://github.com/styled-components/styled-components
 [emotion]: https://github.com/emotion-js/emotion
 

docs/components/Absolute.md

@@ -6,6 +6,4 @@
     Hello
   </Absolute>
 </Relative>
-```
-
-Extends: [Position](/components/Position)
+```

docs/components/Avatar.md

@@ -9,8 +9,7 @@
 
 prop | default | theme key | style type
 ---|---|---|---
-size | 48 | N/A | responsive
-borderRadius | 99999px | radii | default
+borderRadius | 99999px | radii | responsive
 m |  | space | responsive
 mt |  | space | responsive
 mr |  | space | responsive
@@ -26,4 +25,5 @@ pl |  | space | responsive
 px |  | space | responsive
 py |  | space | responsive
 color |  | colors | responsive
-bg |  | colors | responsive
+bg |  | colors | responsive
+size | 48 | N/A | responsive

docs/components/BackgroundImage.md

@@ -9,10 +9,11 @@
 
 prop | default | theme key | style type
 ---|---|---|---
+image |  | N/A | responsive
 width | 1 | N/A | responsive
-ratio | 0.75 | N/A | default
-backgroundSize | cover | N/A | default
-backgroundPosition | center | N/A | default
+ratio | 0.75 | N/A | responsive
+backgroundSize | cover | N/A | responsive
+backgroundPosition | center | N/A | responsive
 m |  | space | responsive
 mt |  | space | responsive
 mr |  | space | responsive

docs/components/Badge.md

@@ -11,7 +11,6 @@
 
 prop | default | theme key | style type
 ---|---|---|---
-fontSize |  | fontSizes | responsive
 m |  | space | responsive
 mt |  | space | responsive
 mr |  | space | responsive
@@ -28,5 +27,6 @@ px | 2 | space | responsive
 py | 1 | space | responsive
 color | white | colors | responsive
 bg | blue | colors | responsive
-fontWeight | bold | fontWeights | default
-borderRadius | 2 | radii | default
+fontSize |  | fontSizes | responsive
+fontWeight | bold | fontWeights | responsive
+borderRadius | 2 | radii | responsive

docs/components/Banner.md

@@ -12,30 +12,9 @@
 </Banner>
 ```
 
-Extends: [Flex](/components/Flex) > [Box](/components/Box)
-
 prop | default | theme key | style type
 ---|---|---|---
-m |  | space | responsive
-mt |  | space | responsive
-mr |  | space | responsive
-mb |  | space | responsive
-ml |  | space | responsive
-mx |  | space | responsive
-my |  | space | responsive
-p | 3,4 | space | responsive
-pt |  | space | responsive
-pr |  | space | responsive
-pb |  | space | responsive
-pl |  | space | responsive
-px |  | space | responsive
-py |  | space | responsive
-flexDirection | column | N/A | responsive
-alignItems | center | N/A | responsive
-justifyContent | center | N/A | responsive
-backgroundSize | cover | N/A | default
-backgroundPosition | center | N/A | default
 minHeight | 80vh | minHeights | responsive
-color | white | colors | responsive
-bg | black | colors | responsive
-backgroundImage |  | N/A | default
+backgroundSize | cover | N/A | responsive
+backgroundPosition | center | N/A | responsive
+backgroundImage |  | N/A | responsive

docs/components/BlockLink.md

@@ -9,8 +9,6 @@
 
 prop | default | theme key | style type
 ---|---|---|---
-color | inherit | colors | responsive
-bg |  | colors | responsive
 m |  | space | responsive
 mt |  | space | responsive
 mr |  | space | responsive
@@ -25,4 +23,6 @@ pb |  | space | responsive
 pl |  | space | responsive
 px |  | space | responsive
 py |  | space | responsive
+color | inherit | colors | responsive
+bg |  | colors | responsive
 width |  | N/A | responsive

docs/components/Blockquote.md

@@ -4,24 +4,4 @@
 <Blockquote>
   “The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.”
 </Blockquote>
-```
-
-Extends: [Base](/components/Base)
-
-prop | default | theme key | style type
----|---|---|---
-fontSize | 3 | fontSizes | responsive
-m |  | space | responsive
-mt |  | space | responsive
-mr |  | space | responsive
-mb |  | space | responsive
-ml |  | space | responsive
-mx |  | space | responsive
-my |  | space | responsive
-p |  | space | responsive
-pt |  | space | responsive
-pr |  | space | responsive
-pb |  | space | responsive
-pl |  | space | responsive
-px |  | space | responsive
-py |  | space | responsive
+```

docs/components/Border.md

@@ -11,12 +11,6 @@
 
 prop | default | theme key | style type
 ---|---|---|---
-border | 1 | borders | responsive
-borderTop |  | borders | responsive
-borderRight |  | borders | responsive
-borderBottom |  | borders | responsive
-borderLeft |  | borders | responsive
-borderColor | gray | colors | default
 m |  | space | responsive
 mt |  | space | responsive
 mr |  | space | responsive
@@ -33,4 +27,10 @@ px |  | space | responsive
 py |  | space | responsive
 width |  | N/A | responsive
 color |  | colors | responsive
-bg |  | colors | responsive
+bg |  | colors | responsive
+border | 1 | borders | responsive
+borderTop |  | borders | responsive
+borderRight |  | borders | responsive
+borderBottom |  | borders | responsive
+borderLeft |  | borders | responsive
+borderColor | gray | colors | responsive

docs/components/Button.md

@@ -9,7 +9,7 @@
 prop | default | theme key | style type
 ---|---|---|---
 fontSize | 1 | fontSizes | responsive
-fontWeight | bold | fontWeights | default
+fontWeight | bold | fontWeights | responsive
 lineHeight | 1.1428571428571428 | lineHeights | responsive
 m |  | space | responsive
 mt |  | space | responsive
@@ -27,7 +27,7 @@ px | 3 | space | responsive
 py | 2 | space | responsive
 color | white | colors | responsive
 bg | blue | colors | responsive
-borderRadius | 2 | radii | default
+borderRadius | 2 | radii | responsive
 border |  | borders | responsive
 borderTop |  | borders | responsive
 borderRight |  | borders | responsive

docs/components/ButtonCircle.md

@@ -4,24 +4,4 @@
 <ButtonCircle
   children='Hello'
 />
-```
-
-Extends: [Button](/components/Button)
-
-prop | default | theme key | style type
----|---|---|---
-m |  | space | responsive
-mt |  | space | responsive
-mr |  | space | responsive
-mb |  | space | responsive
-ml |  | space | responsive
-mx |  | space | responsive
-my |  | space | responsive
-p |  | space | responsive
-pt |  | space | responsive
-pr |  | space | responsive
-pb |  | space | responsive
-pl |  | space | responsive
-px | 3 | space | responsive
-py | 2 | space | responsive
-borderRadius | 9999 | radii | default
+```

docs/components/ButtonOutline.md

@@ -4,12 +4,4 @@
 <ButtonOutline
   children='Hello'
 />
-```
-
-Extends: [Button](/components/Button)
-
-prop | default | theme key | style type
----|---|---|---
-color | blue | colors | responsive
-bg | transparent | colors | responsive
-hover | [object Object] | N/A | pseudo
+```

docs/components/ButtonTransparent.md

@@ -4,12 +4,4 @@
 <ButtonTransparent>
   Hello
 </ButtonTransparent>
-```
-
-Extends: [Button](/components/Button)
-
-prop | default | theme key | style type
----|---|---|---
-color | inherit | colors | responsive
-bg | transparent | colors | responsive
-focus | [object Object] | N/A | pseudo
+```