├── .babelrc ├── .eslintrc.js ├── .github ├── CONTRIBUTING.md └── LICENSE.md ├── .gitignore ├── .nojekyll ├── .npmignore ├── .npmrc ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── docs ├── _app.js ├── _constants.js ├── _scope.js ├── colors.js ├── components │ ├── Absolute.md │ ├── Arrow.md │ ├── Avatar.md │ ├── Badge.md │ ├── Banner.md │ ├── Blockquote.md │ ├── Border.md │ ├── Box.md │ ├── Button.md │ ├── ButtonCircle.md │ ├── ButtonOutline.md │ ├── ButtonTransparent.md │ ├── Caps.md │ ├── Card.md │ ├── Circle.md │ ├── Close.md │ ├── Code.md │ ├── Column.md │ ├── Container.md │ ├── Divider.md │ ├── Dot.md │ ├── Drawer.md │ ├── Flex.md │ ├── Heading.md │ ├── Hide.md │ ├── Image.md │ ├── Label.md │ ├── Lead.md │ ├── Measure.md │ ├── Message.md │ ├── Modal.md │ ├── Panel.md │ ├── Position.md │ ├── Pre.md │ ├── Progress.md │ ├── Provider.md │ ├── Relative.md │ ├── Row.md │ ├── Small.md │ ├── Subhead.md │ ├── Tab.md │ ├── Tabs.md │ ├── Text.md │ ├── Truncate.md │ └── list.md ├── extending.md ├── getting-started.md ├── index.js ├── props.md └── theming.md ├── examples ├── .DS_Store ├── app │ ├── .babelrc │ ├── .gitignore │ ├── .watchmanconfig │ ├── App.js │ ├── IndexScreen.js │ ├── RootStack.js │ ├── app.json │ ├── assets │ │ ├── fonts │ │ │ └── SpaceMono-Regular.ttf │ │ ├── icon.png │ │ └── splash.png │ ├── package.json │ └── screens │ │ ├── AbsoluteScreen.js │ │ ├── ArrowScreen.js │ │ ├── AvatarScreen.js │ │ ├── BadgeScreen.js │ │ ├── BannerScreen.js │ │ ├── BlockquoteScreen.js │ │ ├── BorderScreen.js │ │ ├── BoxScreen.js │ │ ├── ButtonCircleScreen.js │ │ ├── ButtonOutlineScreen.js │ │ ├── ButtonScreen.js │ │ ├── ButtonTransparentScreen.js │ │ ├── CapsScreen.js │ │ ├── CardScreen.js │ │ ├── CircleScreen.js │ │ ├── CloseScreen.js │ │ ├── CodeScreen.js │ │ ├── ColumnScreen.js │ │ ├── ContainerScreen.js │ │ ├── DividerScreen.js │ │ ├── DotScreen.js │ │ ├── DrawerScreen.js │ │ ├── FlexScreen.js │ │ ├── HeadingScreen.js │ │ ├── HideScreen.js │ │ ├── ImageScreen.js │ │ ├── LabelScreen.js │ │ ├── LeadScreen.js │ │ ├── MeasureScreen.js │ │ ├── MessageScreen.js │ │ ├── ModalScreen.js │ │ ├── PanelScreen.js │ │ ├── PositionScreen.js │ │ ├── PreScreen.js │ │ ├── ProgressScreen.js │ │ ├── ProviderScreen.js │ │ ├── RelativeScreen.js │ │ ├── RowScreen.js │ │ ├── SmallScreen.js │ │ ├── SubheadScreen.js │ │ ├── TabScreen.js │ │ ├── TabsScreen.js │ │ ├── TextScreen.js │ │ └── TruncateScreen.js └── jsx │ ├── .DS_Store │ ├── Absolute.jsx │ ├── Arrow.jsx │ ├── Avatar.jsx │ ├── Badge.jsx │ ├── Banner.jsx │ ├── Blockquote.jsx │ ├── Border.jsx │ ├── Box.jsx │ ├── Button.jsx │ ├── ButtonCircle.jsx │ ├── ButtonOutline.jsx │ ├── ButtonTransparent.jsx │ ├── Caps.jsx.js │ ├── Card.jsx │ ├── Circle.jsx │ ├── Close.jsx │ ├── Code.jsx │ ├── Column.jsx │ ├── Container.jsx │ ├── Divider.jsx │ ├── Donut.jsx │ ├── Dot.jsx │ ├── Drawer.jsx │ ├── Flex.jsx │ ├── Heading.jsx │ ├── Hide.jsx │ ├── Image.jsx │ ├── Label.jsx │ ├── Lead.jsx │ ├── Measure.jsx │ ├── Message.jsx │ ├── Modal.jsx │ ├── Panel.jsx │ ├── Position.jsx │ ├── Pre.jsx │ ├── Progress.jsx │ ├── Row.jsx │ ├── Small.jsx │ ├── Subhead.jsx │ ├── Tab.jsx │ ├── Tabs.jsx │ ├── Text.jsx │ └── Truncate.jsx ├── generate-examples.js ├── package.json └── src ├── Arrow.js ├── Avatar.js ├── Badge.js ├── Banner.js ├── Blockquote.js ├── Border.js ├── Box.js ├── Button.js ├── ButtonCircle.js ├── ButtonOutline.js ├── ButtonTransparent.js ├── Caps.js ├── Card.js ├── Circle.js ├── Close.js ├── Code.js ├── Column.js ├── Container.js ├── Divider.js ├── Dot.js ├── Drawer.js ├── Heading.js ├── Hide.js ├── Image.js ├── Label.js ├── Lead.js ├── Measure.js ├── Message.js ├── Modal.js ├── Panel.js ├── Position.js ├── Pre.js ├── Progress.js ├── Provider.js ├── Row.js ├── Small.js ├── Subhead.js ├── Tab.js ├── Tabs.js ├── Text.js ├── Truncate.js ├── colors.js ├── index.js └── theme.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "stage-0", 5 | "react" 6 | ], 7 | "env": { 8 | "emotion": { 9 | "plugins": [ 10 | [ 11 | "transform-rename-import", 12 | { 13 | "replacements": [ 14 | { 15 | "original": "^native-system-components$", 16 | "replacement": "native-system-components/emotion" 17 | }, 18 | { 19 | "original": "^styled-components$", 20 | "replacement": "emotion-theming" 21 | }, 22 | { 23 | "original": "^native-grid-styled$", 24 | "replacement": "native-grid-styled/emotion" 25 | } 26 | ] 27 | } 28 | ] 29 | ] 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": ["standard", "standard-react"] 3 | }; -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing 3 | 4 | Issues and pull requests are welcome. 5 | 6 | Please **be nice** and read the following before contributing. 7 | 8 | - Test before submitting pull requests - `npm test` 9 | 10 | ## Codebase Overview 11 | 12 | Folders: 13 | - `/src` source code 14 | - `/tests` tests, including snapshots 15 | - `/docs` source for the documentation/demo site 16 | 17 | ### Source Code 18 | 19 | All exports are handled in `src/index.js`. 20 | Each component is its own module in the `src/` folder. 21 | Be sure to familiarize yourself with 22 | [styled-system](https://github.com/jxnblk/styled-system) 23 | before making changes. 24 | 25 | 26 | ### Tests 27 | 28 | Tests are written using Ava. Please ensure to test any new code added, and update snapshots when relevant. 29 | -------------------------------------------------------------------------------- /.github/LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | Copyright (c) 2015 – 2018 Brent Jackson 4 | Copyright (c) 2018 Herman Starikov 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | dist 4 | coverage 5 | .nyc_output 6 | .site 7 | site 8 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/rebass-native/02bbda144120cff1cfcbc20dff5f5a4ac6ef8dec/.nojekyll -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | site 3 | test 4 | coverage 5 | .nyc_output 6 | .site 7 | create-rebass 8 | examples 9 | markdown 10 | mdx 11 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10 4 | after_success: 5 | - npm run cover 6 | before_deploy: 7 | - npm install 8 | - npm run build 9 | deploy: 10 | provider: pages 11 | skip_cleanup: true 12 | github_token: $GH_TOKEN 13 | local_dir: site 14 | on: 15 | branch: master 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # Changelog 3 | 4 | ## [2.0.0] 2018-06-24 5 | 6 | ### Added 7 | 8 | - Support for [emotion][emotion] 9 | 10 | ### Changed 11 | 12 | - [styled-system](https://github.com/jxnblk/styled-system) v2 13 | - [native-grid-styled](https://github.com/hermanya/native-grid-styled) v4 14 | - Moves components to separate modules 15 | - Uses [native-system-components](https://github.com/jxnblk/styled-system/tree/master/native-system-components) 16 | - Updates docs site 17 | 18 | #### Breaking 19 | 20 | - Renamed components 21 | - TabItem -> Tab 22 | - DotButton -> Dot 23 | - PanelHeader -> Panel.Header 24 | - PanelFooter -> Panel.Footer 25 | - Default theme (changed to match styled-system) 26 | - The `colors` object no longer uses Palx 27 | - Array color values have been removed 28 | - `radius` has been replaced with `radii` 29 | - `font` has been replaced with `fonts` 30 | - `monospace` has been removed 31 | - Theme fields are no longer exposed as exports 32 | - Props 33 | - `width` is only available on Flex and Box 34 | - `fontSize` is only available on typographic components 35 | - `direction` is now `flexDirection` 36 | - Flex `align` is now `alignItems` 37 | - Flex `justify` is now `justifyContent` 38 | - Flex `wrap` is now `flexWrap` 39 | - Arrow `up` is now `direction='up'` 40 | - `active` props have been removed in favor of custom styles 41 | - Border now uses [styled-system border props](https://github.com/jxnblk/styled-system#borders) 42 | - Banner `image` is now `backgroundImage` 43 | - Absolute, Fixed, Relative, and Sticky now require values for `top`, `right`, `bottom`, and `left` props 44 | - Drawer `position` prop has been renamed to `side` 45 | - Drawer `size` prop has been replaced with `width` and `height` props 46 | 47 | ### Removed 48 | 49 | - Custom HOC `hoc` 50 | - `createLibrary` function 51 | - `util` 52 | - `createComponent` 53 | - Palx dependency 54 | - ScrollCarousel component 55 | - CarouselSlide component 56 | - Star comonent 57 | 58 | 59 | [emotion]: https://github.com/emotion-js/emotion 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rebass-native 2 | 3 | Port of [Rebass](https://github.com/jxnblk/rebass) for react-native, a UI component library & design system, 4 | built with [styled-system][system], 5 | with support for 6 | [styled-components][sc]. 7 | 8 | [![Build Status][badge]][travis] 9 | [![Coverage][coverage-badge]][coverage] 10 | [![Downloads][downloads-badge]][npm] 11 | [![Version][version-badge]][npm] 12 | 13 | [badge]: https://img.shields.io/travis/Hermanya/rebass-native.svg?style=flat-square 14 | [travis]: https://travis-ci.org/Hermanya/rebass-native 15 | [coverage-badge]: https://img.shields.io/codecov/c/github/hermanya/rebass-native.svg?style=flat-square 16 | [coverage]: https://codecov.io/github/hermanya/rebass-native 17 | 18 | [downloads-badge]: https://img.shields.io/npm/dw/rebass-native.svg?style=flat-square 19 | [version-badge]: https://img.shields.io/npm/v/rebass-native.svg?style=flat-square 20 | [npm]: https://npmjs.com/package/rebass-native 21 | 22 | 23 | ```sh 24 | npm i rebass-native 25 | ``` 26 | 27 | [See Demo](https://snack.expo.io/@git/github.com/hermanya/rebass-native:examples/app) 28 | 29 | Rebass-native is a port of Rebass, a library of highly-composable, primitive UI components for React, 30 | built with styled-components to keep styles isolated and reduce the need to write custom Styles in your application. 31 | Based upon a configurable design system, 32 | Rebass‘s props API makes building consistent, responsive web apps simpler and faster. 33 | 34 | 35 | ## Getting Started 36 | 37 | ```jsx 38 | import React from 'react' 39 | import { Provider, Heading, Button } from 'rebass-native' 40 | 41 | const App = props => ( 42 | 43 | Hello 44 | 45 | 46 | ) 47 | ``` 48 | 49 | ## Features 50 | 51 | - Kickstart your own react-native component library 52 | - Responsive style props from [styled-system][system] 53 | - Flexbox grid with [native-grid-styled][gs] 54 | - Support for [styled-components][sc] 55 | - Functional stateless UI components 56 | - Configurable theming 57 | - Extensible base components 58 | - Design-system based consistency 59 | - Built for responsive web design 60 | 61 | ## Documentation 62 | 63 | - [Docs](https://hermanya.github.io/rebass-native) 64 | - [Getting Started](https://hermanya.github.io/rebass-native/getting-started) 65 | - [Props](https://hermanya.github.io/rebass-native/props) 66 | - [Grid System](https://hermanya.github.io/rebass-native/grid-system) 67 | - [Theming](https://hermanya.github.io/rebass-native/theming) 68 | - [Extending](https://hermanya.github.io/rebass-native/extending) 69 | - [Components](https://hermanya.github.io/rebass-native/components) 70 | 71 | ## CodeSandbox 72 | 73 | Try it out: 74 | 75 | https://snack.expo.io/@git/github.com/hermanya/rebass-native:examples/app 76 | 77 | ### Architectural Approach 78 | 79 | Rebass is built around a component architectural approach inspired by Dan Abramov’s 80 | [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963), 81 | where presentational components are the only ones that encapsulate styles and contain no application logic, 82 | and container components do not contain any styles or DOM markup and handle all the application logic. 83 | 84 | Rebass only contains presentational components, 85 | which means controlling things like progressive disclosure mechanisms 86 | or dropdown menus should be handled at a higher level in container components. 87 | Therefore, Rebass itself does not require any client-side JavaScript, 88 | is well suited to server-side rendering, 89 | and can fit into virtually any higher level application architecture. 90 | 91 | See [Patterns for Style Composition in React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/) 92 | for more on some of the thought behind Rebass. 93 | 94 | 95 | ### Related 96 | 97 | - [styled-system][system] 98 | - [native-grid-styled][gs] 99 | - [styled-components][sc] 100 | 101 | [system]: https://github.com/jxnblk/styled-system 102 | [gs]: https://github.com/hermanya/native-grid-styled 103 | [sc]: https://github.com/styled-components/styled-components 104 | 105 | --- 106 | 107 | [Contributing](.github/CONTRIBUTING.md) 108 | | 109 | [MIT License](.github/LICENSE.md) 110 | -------------------------------------------------------------------------------- /docs/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Provider as RefunkProvider } from 'refunk' 3 | import { 4 | SidebarLayout, 5 | ScopeProvider 6 | } from '@compositor/x0/components' 7 | import sortBy from 'lodash.sortby' 8 | import pkg from '../package.json' 9 | import * as Rebass from '../src' 10 | import { photo } from './_constants' 11 | 12 | const scope = { 13 | ...Rebass, 14 | photo 15 | } 16 | 17 | const navOrder = [ 18 | 'Rebass', 19 | 'getting-started', 20 | 'props', 21 | 'grid-system', 22 | 'theming', 23 | 'extending', 24 | 'server-side-rendering', 25 | 'colors', 26 | 'components' 27 | ] 28 | 29 | const createNav = routes => [ 30 | ...sortBy([...routes] 31 | .map(route => { 32 | if (route.name !== 'index') return route 33 | return { 34 | ...route, 35 | name: 'Components', 36 | path: '/components' 37 | } 38 | }), a => { 39 | const index = navOrder.indexOf(a.name) 40 | return index < 0 ? Infinity : index 41 | }), 42 | { 43 | key: 'github', 44 | name: 'GitHub', 45 | path: 'https://github.com/hermanya/rebass-native' 46 | }, 47 | { 48 | key: 'rebass', 49 | name: 'Rebass for web', 50 | path: 'https://github.com/jxnblk/rebass' 51 | }, 52 | { 53 | key: 'jxnblk', 54 | name: 'Based on work of Jxnblk', 55 | path: 'https://jxnblk.com' 56 | } 57 | ] 58 | 59 | export default class extends React.Component { 60 | render () { 61 | const { 62 | routes, 63 | route, 64 | children 65 | } = this.props 66 | const nav = createNav(routes) 67 | 68 | const disableLayout = route && route.props && route.props.layout === false 69 | 70 | return ( 71 | 72 | 73 | 74 | {disableLayout ? ( 75 | children 76 | ) : ( 77 | 82 | )} 83 | 84 | 85 | 86 | ) 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /docs/_constants.js: -------------------------------------------------------------------------------- 1 | export const photo = 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' 2 | export const docs = '/getting-started' 3 | export const install = 'npm i rebass-native' 4 | -------------------------------------------------------------------------------- /docs/_scope.js: -------------------------------------------------------------------------------- 1 | export * from '../src' 2 | -------------------------------------------------------------------------------- /docs/colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { scope } from '@compositor/x0/components' 3 | import { 4 | Box, 5 | Flex, 6 | Heading, 7 | Text, 8 | Code, 9 | Pre, 10 | colors 11 | } from 'rebass' 12 | 13 | const { 14 | h1: Title, 15 | p: P, 16 | a: Link 17 | } = scope 18 | 19 | const keys = Object.keys(colors) 20 | 21 | export default props => 22 | 23 | 24 | Built-in Colors 25 | 26 |

27 | The default theme in Rebass includes {keys.length} colors to help get you started. 28 | Theming can be completely customized using the Provider component. 29 |

30 | 34 | {keys.map(key => ( 35 | 36 | 41 | 42 | {key} 43 | 44 | 
{colors[key]}
45 | 46 | ))} 47 | 48 | 49 | -------------------------------------------------------------------------------- /docs/components/Absolute.md: -------------------------------------------------------------------------------- 1 | # Absolute 2 | 3 | ```.jsx 4 | 5 | 6 | Hello 7 | 8 | 9 | 10 | ``` 11 | 12 | 13 | 14 | Extends: [Position](/components/Position) > [Box](/components/Box) > [Box](/components/Box) -------------------------------------------------------------------------------- /docs/components/Arrow.md: -------------------------------------------------------------------------------- 1 | # Arrow 2 | 3 | ```.jsx 4 | 5 | 6 | ``` 7 | 8 | 9 | 10 | prop | default | theme key 11 | ---|---|--- 12 | m | | space 13 | mt | | space 14 | mr | | space 15 | mb | | space 16 | ml | | space 17 | mx | | space 18 | my | | space 19 | p | | space 20 | pt | | space 21 | pr | | space 22 | pb | | space 23 | pl | | space 24 | px | | space 25 | py | | space 26 | color | | colors 27 | bg | | colors -------------------------------------------------------------------------------- /docs/components/Avatar.md: -------------------------------------------------------------------------------- 1 | # Avatar 2 | 3 | ```.jsx 4 | 8 | 9 | ``` 10 | 11 | 12 | 13 | Extends: [Image](/components/Image) > [Image](/components/Image) 14 | 15 | prop | default | theme key 16 | ---|---|--- 17 | size | 48 | N/A 18 | borderRadius | 99999px | radii 19 | m | | space 20 | mt | | space 21 | mr | | space 22 | mb | | space 23 | ml | | space 24 | mx | | space 25 | my | | space 26 | p | | space 27 | pt | | space 28 | pr | | space 29 | pb | | space 30 | pl | | space 31 | px | | space 32 | py | | space 33 | color | | colors 34 | bg | | colors -------------------------------------------------------------------------------- /docs/components/Badge.md: -------------------------------------------------------------------------------- 1 | # Badge 2 | 3 | ```.jsx 4 | 5 | Hello 6 | 7 | Beep 8 | 9 | 10 | 11 | ``` 12 | 13 | 14 | 15 | Extends: [Box](/components/Box) > [Box](/components/Box) 16 | 17 | prop | default | theme key 18 | ---|---|--- 19 | m | | space 20 | mt | | space 21 | mr | | space 22 | mb | | space 23 | ml | | space 24 | mx | 1 | space 25 | my | | space 26 | p | | space 27 | pt | | space 28 | pr | | space 29 | pb | | space 30 | pl | | space 31 | px | 2 | space 32 | py | 1 | space 33 | color | | colors 34 | bg | blue | colors 35 | borderRadius | 2 | radii -------------------------------------------------------------------------------- /docs/components/Banner.md: -------------------------------------------------------------------------------- 1 | # Banner 2 | 3 | ```.jsx 4 | 7 | 9 | Hello 10 | 11 | 12 | 13 | ``` 14 | 15 | 16 | 17 | Extends: [Flex](/components/Flex) > [Box](/components/Box) 18 | 19 | prop | default | theme key 20 | ---|---|--- 21 | m | | space 22 | mt | | space 23 | mr | | space 24 | mb | | space 25 | ml | | space 26 | mx | | space 27 | my | | space 28 | p | 3 | space 29 | pt | | space 30 | pr | | space 31 | pb | | space 32 | pl | | space 33 | px | | space 34 | py | | space 35 | flexDirection | column | N/A 36 | alignItems | center | N/A 37 | justifyContent | center | N/A 38 | minHeight | 100 | minHeights 39 | color | | colors 40 | bg | black | colors 41 | backgroundSize | | N/A 42 | backgroundPosition | | N/A 43 | backgroundImage | | N/A -------------------------------------------------------------------------------- /docs/components/Blockquote.md: -------------------------------------------------------------------------------- 1 | # Blockquote 2 | 3 | ```.jsx 4 |
5 | “The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.” 6 |
7 | 8 | ``` 9 | 10 | 11 | 12 | Extends: [Box](/components/Box) > [Box](/components/Box) 13 | 14 | prop | default | theme key 15 | ---|---|--- 16 | m | | space 17 | mt | | space 18 | mr | | space 19 | mb | | space 20 | ml | | space 21 | mx | | space 22 | my | | space 23 | p | | space 24 | pt | | space 25 | pr | | space 26 | pb | | space 27 | pl | 2 | space 28 | px | | space 29 | py | | space 30 | borderColor | blue | colors -------------------------------------------------------------------------------- /docs/components/Border.md: -------------------------------------------------------------------------------- 1 | # Border 2 | 3 | ```.jsx 4 | 6 | Hello 7 | 8 | 9 | ``` 10 | 11 | 12 | 13 | Extends: [Box](/components/Box) > [Box](/components/Box) 14 | 15 | prop | default | theme key 16 | ---|---|--- 17 | borderColor | gray | colors 18 | m | | space 19 | mt | | space 20 | mr | | space 21 | mb | | space 22 | ml | | space 23 | mx | | space 24 | my | | space 25 | p | | space 26 | pt | | space 27 | pr | | space 28 | pb | | space 29 | pl | | space 30 | px | | space 31 | py | | space 32 | width | | N/A 33 | color | | colors 34 | bg | | colors -------------------------------------------------------------------------------- /docs/components/Box.md: -------------------------------------------------------------------------------- 1 | # Box 2 | 3 | ```.jsx 4 | 9 | Hello 10 | 11 | 12 | ``` 13 | 14 | 15 | 16 | Extends: [Box](http://jxnblk.com/rebass/components/Box) -------------------------------------------------------------------------------- /docs/components/Button.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | ```.jsx 4 |