Repository: rebassjs/rebass
Branch: master
Commit: 31726a00fc81
Files: 136
Total size: 150.6 KB
Directory structure:
gitextract_a45pl85k/
├── .circleci/
│ └── config.yml
├── .eslintignore
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── babel.config.js
├── examples/
│ ├── sandbox/
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ └── styled-components/
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── lerna.json
├── package.json
└── packages/
├── bundler/
│ ├── index.js
│ └── package.json
├── docs/
│ ├── .eslintrc.js
│ ├── gatsby-browser.js
│ ├── gatsby-config.js
│ ├── gatsby-ssr.js
│ ├── package.json
│ ├── src/
│ │ ├── components/
│ │ │ ├── blocks.js
│ │ │ ├── code.js
│ │ │ ├── demo-provider.js
│ │ │ ├── edit-link.js
│ │ │ ├── footer.js
│ │ │ ├── head.js
│ │ │ ├── header.js
│ │ │ ├── icon.js
│ │ │ ├── layout.js
│ │ │ ├── logo.js
│ │ │ ├── nav.mdx
│ │ │ ├── note.js
│ │ │ ├── recipe-card.js
│ │ │ ├── skip-link.js
│ │ │ ├── twitter-card.js
│ │ │ └── wrapper.js
│ │ ├── gatsby-plugin-theme-ui/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── pages/
│ │ ├── 404.mdx
│ │ ├── box.mdx
│ │ ├── button.mdx
│ │ ├── card.mdx
│ │ ├── demo.mdx
│ │ ├── extending.mdx
│ │ ├── flex.mdx
│ │ ├── forms/
│ │ │ ├── checkbox.mdx
│ │ │ ├── index.mdx
│ │ │ ├── input.mdx
│ │ │ ├── label.mdx
│ │ │ ├── radio.mdx
│ │ │ ├── select.mdx
│ │ │ ├── slider.mdx
│ │ │ ├── switch.mdx
│ │ │ └── textarea.mdx
│ │ ├── getting-started.mdx
│ │ ├── guides/
│ │ │ ├── css-grid.mdx
│ │ │ ├── index.mdx
│ │ │ ├── mdx.mdx
│ │ │ ├── server-side-rendering.mdx
│ │ │ ├── styled-components.mdx
│ │ │ ├── theme-ui.mdx
│ │ │ └── using-rebass-without-context.mdx
│ │ ├── heading.mdx
│ │ ├── image.mdx
│ │ ├── index.mdx
│ │ ├── layout/
│ │ │ └── index.mdx
│ │ ├── link.mdx
│ │ ├── migrating.mdx
│ │ ├── props.mdx
│ │ ├── recipes/
│ │ │ ├── avatar.mdx
│ │ │ ├── background-image-card.mdx
│ │ │ ├── badge.mdx
│ │ │ ├── container.mdx
│ │ │ ├── flexbox-align.mdx
│ │ │ ├── flexbox-grid.mdx
│ │ │ ├── flexbox-wrap.mdx
│ │ │ ├── image-card.mdx
│ │ │ ├── index.mdx
│ │ │ ├── nav-bar.mdx
│ │ │ ├── nav-link.mdx
│ │ │ └── video-embed.mdx
│ │ ├── reflexbox.mdx
│ │ ├── space.mdx
│ │ ├── text.mdx
│ │ ├── theming.mdx
│ │ └── variants.mdx
│ └── static/
│ └── _redirects
├── forms/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── layout/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── preset/
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── preset-material/
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── rebass/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ └── index.js
├── reflexbox/
│ ├── .gitignore
│ ├── .npmignore
│ ├── LICENSE.md
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ └── index.js
└── space/
├── README.md
├── package.json
├── src/
│ └── index.js
└── test/
├── __snapshots__/
│ └── index.js.snap
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .circleci/config.yml
================================================
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:10
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
working_directory: ~/repo
steps:
- checkout
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
# run tests!
- run: yarn test
================================================
FILE: .eslintignore
================================================
node_modules
dist
build
.next
artifacts
.cache
public
================================================
FILE: .gitignore
================================================
node_modules
dist
coverage
.cache
public
================================================
FILE: .npmignore
================================================
src
test
babel.config.js
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 10
script:
- yarn test --coverage
after_success:
- yarn cover
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## Unreleased
- Update dependencies
## 4.0.7 2019-10-28
- Add missing `heading` variant to `Heading` #754
## 4.0.6 2019-09-21
- Update dependencies
- Add layout package
- Add Slider and Switch to forms package
## 4.0.5 2019-08-21
- Fix publish
## 4.0.4 2019-08-21
- Add bundler setup & build for `@rebass/forms/styled-system`
## 4.0.3 2019-08-18
- Add forms package
- Update dependencies
## 4.0.2 2019-08-07
## 4.0.1 2019-08-06
- Fix ignore files
- Adjust build
- Update dependencies
## 4.0.0 2019-08-04
- New [`sx` prop](https://rebassjs.org/props/#sx-prop) for theme-based styles
- Use the `css` prop for un-themed, raw CSS values
- No additional Babel configuration required for the `sx` or `css` props
- Use the `sx` prop in MDX documents
- Built-in support for themeable component [variants](https://rebassjs.org/variants)
- Fully compatible with [Theme UI](https://theme-ui.com)
### Breaking Changes
- The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead.
- The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead.
- The `@rebass/grid` package has been renamed (back to) `reflexbox`
- Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight.
- Button no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`
- Image no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`
- Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles.
- Card no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`,
## [3.1.0] 2019-03-23
- Update to Styled System v4
## [3.0.1] 2019-01-18
- Update styled-system #555
## [3.0.0] 2018-12-01
- Reduced package size
- Reduced number of components to 8
- Updated for Styled Components v4 and Emotion v10
- Reduced dependencies
- Removed default theme and colors
- Removed Provider component
- Added variant theme support for Button and Card components
- Removed `is` prop in favor of Styled Components' and Emotion's `as` prop
- Uses Box component as base for all other components
- Removed `css` prop in favor of Styled Components' and Emotion's implementations
## [3.0.0-12] 2018-11-29
- Removes `css` prop in favor of babel-plugin-styled-components
- Adds build setup for Emotion 10
## [3.0.0-11] 2018-11-13
- Update dependencies
## [3.0.0-10] 2018-11-12
- Sets `box-sizing: border-box` on base Box component
## [3.0.0-9] 2018-09-22
- Adds flexbox props back to Box component
## [3.0.0-6] 2018-09-13
- Adds emotion package
## [3.0.0-2] 2018-09-11
- Update styled-system
- Update docs
## [3.0.0-1] 2018-09-10
- Update docs for v3
## [3.0.0-0] 2018-09-08
- Smaller package
- Reduced number of components to 8
- Upgraded for styled-components v4
- Reduced dependencies to one
- Removed default theme and colors
- Removed Rebass Provider component
- Added variant theme support to Button and Card
- Removed `is` prop in favor of styled-components `as` prop
- Uses Box component as the base for all other components
## [2.3.2] 2018-09-08
- Update repo in package.json
- Update readme
## [2.3.1] 2018-09-08
- Fix bad prepublish build
## [2.3.0] 2018-09-08
- Upgrade to @rebass/components, @rebass/grid, and styled-system v3
## [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
- Support for [emotion][emotion]
### Changed
- [styled-system](https://github.com/jxnblk/styled-system) v2
- [grid-styled](https://github.com/jxnblk/grid-styled) v4
- Moves components to separate modules
- Uses [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components)
- Updates docs site
#### Breaking
- Renamed components
- TabItem -> Tab
- DotButton -> Dot
- PanelHeader -> Panel.Header
- PanelFooter -> Panel.Footer
- Default theme (changed to match styled-system)
- The `colors` object no longer uses Palx
- Array color values have been removed
- `radius` has been replaced with `radii`
- `font` has been replaced with `fonts`
- `monospace` has been removed
- Theme fields are no longer exposed as exports
- Props
- `width` is only available on Flex and Box
- `fontSize` is only available on typographic components
- `direction` is now `flexDirection`
- Flex `align` is now `alignItems`
- Flex `justify` is now `justifyContent`
- Flex `wrap` is now `flexWrap`
- Arrow `up` is now `direction='up'`
- `active` props have been removed in favor of custom styles
- Border now uses [styled-system border props](https://github.com/jxnblk/styled-system#borders)
- Banner `image` is now `backgroundImage`
- Absolute, Fixed, Relative, and Sticky now require values for `top`, `right`, `bottom`, and `left` props
- Drawer `position` prop has been renamed to `side`
- Drawer `size` prop has been replaced with `width` and `height` props
### Removed
- Custom HOC `hoc`
- `createLibrary` function
- `util`
- `createComponent`
- Palx dependency
- ScrollCarousel component
- CarouselSlide component
- Star comonent
[emotion]: https://github.com/emotion-js/emotion
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jxnblk@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
Issues and pull requests are welcome.
Please **be nice** and read the following before contributing.
- Test before submitting pull requests - `npm test`
## Codebase Overview
Folders:
- `/src` source code
- `/tests` tests, including snapshots
Be sure to familiarize yourself with [styled-system](https://github.com/jxnblk/styled-system) before making changes.
Please ensure to test any new code added, and update snapshots when relevant.
================================================
FILE: LICENSE.md
================================================
# The MIT License (MIT)
Copyright (c) 2015 – 2019 Brent Jackson
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
env: {
esm: {
presets: [
[
'@babel/preset-env',
{
modules: false,
}
]
],
},
styled: {
plugins: [
[
'transform-rename-import', {
original: '^reflexbox$',
replacement: 'reflexbox/styled-components',
}
]
]
}
}
}
================================================
FILE: examples/sandbox/README.md
================================================
Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox)
================================================
FILE: examples/sandbox/package.json
================================================
{
"name": "rebass-sandbox",
"private": true,
"version": "4.0.7",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "react-scripts start"
},
"dependencies": {
"@rebass/preset": "^4.0.5",
"emotion-theming": "^10.0.14",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"rebass": "^4.0.7",
"styled-components": "^4.3.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: examples/sandbox/src/index.js
================================================
/* eslint no-unused-vars: 0 */
import React from 'react'
import { render } from 'react-dom'
import preset from '@rebass/preset'
import { ThemeProvider } from 'emotion-theming'
// OR import { ThemeProvider } from 'styled-components'
import {
Box,
Flex,
Heading,
Text,
Button,
Link,
Image,
Card,
} from 'rebass'
// OR use 'rebass/styled-components'
const theme = {
...preset,
}
const App = props => {
return (
<ThemeProvider theme={theme}>
<Box variant='styles.root'>
<Heading as='h1' mb={4}>
Rebass Sandbox
</Heading>
<Button variant='primary' mr={3}>
Beep
</Button>
<Button variant='outline'>
Boop
</Button>
</Box>
</ThemeProvider>
)
}
render(<App />, root) // eslint-disable-line no-undef
================================================
FILE: examples/styled-components/README.md
================================================
Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/styled-components)
================================================
FILE: examples/styled-components/package.json
================================================
{
"name": "@rebass/styled-components-example",
"private": true,
"version": "4.0.7",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "react-scripts start"
},
"dependencies": {
"@rebass/preset": "^4.0.5",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "^3.1.1",
"rebass": "^4.0.7",
"styled-components": "^4.3.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: examples/styled-components/src/index.js
================================================
/* eslint no-unused-vars: 0 */
import React from 'react'
import { render } from 'react-dom'
import preset from '@rebass/preset'
import { ThemeProvider } from 'styled-components'
import {
Box,
Flex,
Heading,
Text,
Button,
Link,
Image,
Card,
} from 'rebass/styled-components'
const theme = {
...preset,
}
const App = props => {
return (
<ThemeProvider theme={theme}>
<Box variant='styles.root'>
<Heading as='h1' mb={4}>
Rebass Sandbox
</Heading>
<Button variant='primary' mr={3}>
Beep
</Button>
<Button variant='outline'>
Boop
</Button>
</Box>
</ThemeProvider>
)
}
render(<App />, root) // eslint-disable-line no-undef
================================================
FILE: lerna.json
================================================
{
"version": "4.0.7",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
================================================
FILE: package.json
================================================
{
"private": true,
"workspaces": [
"packages/*",
"examples/*"
],
"scripts": {
"prepare": "lerna run prepare",
"start": "yarn workspace docs start",
"build": "yarn workspace docs build",
"test": "jest",
"cover": "npx codecov"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@testing-library/react": "^10.0.4",
"jest": "^25.2.4",
"jest-emotion": "^10.0.14",
"jest-styled-components": "^6.3.3",
"lerna": "^3.16.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.8.6"
},
"resolutions": {
"@mdx-js/react": "^1.5.5"
},
"jest": {
"testMatch": [
"**/packages/**/test/*.js"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"lcov",
"text",
"html"
],
"collectCoverageFrom": [
"packages/**/src/*.js",
"!packages/docs/**/*.js"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFilesAfterEnv": [],
"snapshotSerializers": [
"jest-emotion"
]
}
}
================================================
FILE: packages/bundler/index.js
================================================
#!/usr/bin/env node
const execa = require('execa')
const babel = (env, ...args) => {
return execa('babel', [
'--verbose',
...args.filter(Boolean),
'--root-mode=upward',
], {
stdio: 'inherit',
env: {
NODE_ENV: env,
}
})
}
babel(null, 'src', '-d', 'dist')
babel('esm', 'src', '-o', 'dist/index.esm.js')
babel('styled', 'src', '-d', 'styled-components')
================================================
FILE: packages/bundler/package.json
================================================
{
"name": "@rebass/bundler",
"version": "4.0.5",
"bin": {
"rebass-bundler": "./index.js"
},
"main": "index.js",
"license": "MIT",
"dependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c",
"publishConfig": {
"access": "public"
}
}
================================================
FILE: packages/docs/.eslintrc.js
================================================
module.exports = {
globals: {
__PATH_PREFIX__: true,
},
extends: 'react-app',
}
================================================
FILE: packages/docs/gatsby-browser.js
================================================
export { wrapPageElement } from './src'
================================================
FILE: packages/docs/gatsby-config.js
================================================
const remarkPlugins = [
require('remark-slug'),
]
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-mdx',
options: {
extensions: ['.mdx', '.md'],
remarkPlugins,
}
},
'gatsby-plugin-catch-links',
'gatsby-plugin-theme-ui',
'gatsby-plugin-react-helmet',
],
}
================================================
FILE: packages/docs/gatsby-ssr.js
================================================
export { wrapPageElement } from './src'
================================================
FILE: packages/docs/package.json
================================================
{
"private": true,
"name": "docs",
"version": "4.0.7",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "gatsby develop",
"clean": "gatsby clean",
"build": "gatsby build",
"serve": "gatsby serve",
"icon": "npx repng src/components/icon.js -d static -f icon.png -w 512 -h 512",
"card": "npx repng src/components/twitter-card.js -d static -f card.png -w 1024 -h 512"
},
"dependencies": {
"@jxnblk/react-live": "^2.1.2-1",
"@mdx-js/mdx": "^1.1.4",
"@rebass/forms": "^4.0.6",
"@rebass/layout": "^4.0.6",
"@rebass/preset": "^4.0.5",
"@rebass/preset-material": "^4.0.5",
"@rebass/space": "^4.0.5",
"@theme-ui/presets": "^0.3.0",
"@theme-ui/prism": "^0.3.0",
"@theme-ui/sidenav": "^0.3.1",
"countries-list": "^2.4.3",
"deepmerge": "^4.0.0",
"gatsby": "^2.13.48",
"gatsby-plugin-catch-links": "^2.1.2",
"gatsby-plugin-mdx": "^1.0.22",
"gatsby-plugin-react-helmet": "^3.1.3",
"gatsby-plugin-theme-ui": "^0.3.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^6.0.0",
"rebass": "^4.0.7",
"remark-slug": "^5.1.2",
"theme-ui": "^0.3.1"
}
}
================================================
FILE: packages/docs/src/components/blocks.js
================================================
import React from 'react'
import { Box } from 'rebass'
export const Container = props =>
<Box
{...props}
sx={{
maxWidth: 'wide',
mx: 'auto',
px: 4,
}}
/>
export const Banner = props =>
<Box
{...props}
sx={{
color: 'background',
bg: 'text',
}}>
<Box
sx={{
// '*': { outline: '1px solid rgba(0, 255, 255, 0.5)', },
display: 'flex',
flexDirection: 'column',
maxWidth: 'wide',
minHeight: 'calc(100vh - 64px)',
mx: 'auto',
px: 4,
py: [4, 5],
h1: {
variant: 'text.caps',
fontSize: 3,
},
pre: {
p: 0,
mb: 0,
bg: 'transparent',
}
}}>
{props.children}
</Box>
</Box>
export const LogoGrid = props =>
<Box
{...props}
sx={{
display: 'grid',
gridGap: 3,
gridTemplateColumns: [
'auto',
'auto',
'1fr 2fr 1fr',
],
alignItems: 'center',
}}
/>
export const Grid = ({
width = 256,
gap = 4,
...props
}) =>
<Box
{...props}
sx={{
ul: {
listStyle: 'none',
p: 0,
display: 'grid',
gridGap: gap,
gridTemplateColumns: [
'auto',
`repeat(auto-fit, minmax(${width}px, 1fr))`,
]
},
...props.sx
}}
/>
export const NavGrid = props =>
<Box
{...props}
sx={{
ul: {
listStyle: 'none',
p: 0,
display: 'grid',
gridGap: 3,
gridTemplateRows: [
`repeat(8, 1fr)`,
`repeat(4, 1fr)`,
],
gridTemplateColumns: [
'repeat(2, 1fr)',
'repeat(4, 1fr)',
],
gridAutoFlow: 'column',
counterReset: 'nav-grid',
},
li: {
fontWeight: 'bold',
fontSize: 0,
variant: 'text.caps',
counterIncrement: 'nav-grid',
'::before': {
content: 'counter(nav-grid)',
display: 'inline-block',
width: 16,
pr: [1, 2, 3],
}
},
a: {
color: 'inherit',
textDecoration: 'none',
transition: 'color .2s ease-out',
':hover,:focus': {
color: 'primary',
}
}
}}
/>
================================================
FILE: packages/docs/src/components/code.js
================================================
import React from 'react'
import styled from '@emotion/styled'
import {
LiveProvider,
LivePreview,
LiveEditor,
LiveError,
} from '@jxnblk/react-live'
import { ThemeProvider } from 'theme-ui'
import Prism from '@theme-ui/prism'
import * as Rebass from 'rebass'
import * as RebassForms from '@rebass/forms'
import * as RebassLayout from '@rebass/layout'
import { Flex, Box } from 'rebass'
import { countries } from 'countries-list'
const scope = {
...Rebass,
...RebassForms,
...RebassLayout,
ThemeProvider,
props: {
image: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20',
countries,
}
}
scope.Switch = props => {
const [active, setActive] = React.useState(true)
const toggle = () => setActive(!active)
return (
<RebassForms.Switch
checked={active}
onClick={toggle}
{...props}
/>
)
}
const transformCode = code => `<>${code}</>`
const Preview = ({ fullwidth, ...props }) =>
<Box
as={LivePreview}
{...props}
sx={{
p: fullwidth ? 0 : 3,
}}
/>
const Editor = props =>
<Box
{...props}
as={LiveEditor}
sx={{
variant: 'styles.pre',
outline: 'none',
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
}}
/>
const Err = props =>
<Box
{...props}
as={LiveError}
sx={{
fontFamily: 'monospace',
fontSize: 1,
p: 3,
overflowX: 'auto',
color: 'white',
bg: 'red',
}}
/>
export default ({
className,
...props
}) => {
const lang = 'jsx'
if (props.preview) {
const code = props.children
return (
<LiveProvider
{...props}
code={code}
transformCode={transformCode}
scope={scope}>
<Preview fullwidth />
</LiveProvider>
)
}
if (props.live) {
const code = props.children
return (
<Box
sx={{
mb: 4,
border: t => `1px solid ${t.colors.muted}`,
borderRadius: 2,
}}>
<LiveProvider
{...props}
code={code}
transformCode={transformCode}
scope={scope}>
<Preview />
<Box
sx={{
position: 'relative',
}}>
<Editor
className={className}
/>
<Err />
<Box
sx={{
position: 'absolute',
zIndex: 1,
top: 0,
right: 0,
m: 1,
variant: 'text.caps',
fontSize: 0,
fontWeight: 'bold',
color: 'accent',
}}>
Live Demo
</Box>
</Box>
</LiveProvider>
</Box>
)
}
return (
<Prism
{...props}
className={className}
/>
)
}
================================================
FILE: packages/docs/src/components/demo-provider.js
================================================
import React, { useState } from 'react'
import { ThemeProvider } from 'theme-ui'
import { Helmet } from 'react-helmet'
import { Box, Flex } from 'rebass'
import * as themeui from '@theme-ui/presets'
import merge from 'lodash.merge'
import rebass from '@rebass/preset'
import material from '@rebass/preset-material'
const presets = {
...themeui,
rebass,
material,
}
const themes = [
'rebass',
'material',
...Object.keys(presets)
]
export default props => {
const [ theme, setTheme ] = useState('preset')
const demoTheme = merge({}, rebass, presets[theme])
return (
<div>
{demoTheme.googleFonts && (
<Helmet>
<link rel='stylesheet' href={demoTheme.googleFonts} />
</Helmet>
)}
<Flex mb={4}>
<Box as='label'>
Theme:
{' '}
<select
id='theme'
name='theme'
value={theme}
onChange={e => {
setTheme(e.target.value)
}}>
{themes.map(name => (
<option key={name}>{name}</option>
))}
</select>
</Box>
</Flex>
<ThemeProvider theme={demoTheme}>
{props.children}
</ThemeProvider>
</div>
)
}
================================================
FILE: packages/docs/src/components/edit-link.js
================================================
import React from 'react'
import { Location } from '@reach/router'
import { Link } from 'rebass'
const base = 'https://github.com/rebassjs/rebass/edit/master/packages/docs/src/pages'
const getHREF = (location) => {
if (location.pathname === '/') return false
return base + location.pathname.replace(/\/+$/, '') + '.mdx'
}
export default props =>
<Location
children={({ location }) => {
const href = getHREF(location)
if (!href) return false
return (
<Link
{...props}
href={href}
sx={{
display: 'inline-block',
color: 'inherit',
fontSize: 1,
}}
/>
)
}}
/>
================================================
FILE: packages/docs/src/components/footer.js
================================================
import React from 'react'
import {
Box,
Flex,
Link,
} from 'rebass'
export default props =>
<Box
as='footer'
py={5}
color='background'
bg='text'
>
<Box
sx={{
maxWidth: 'wide',
mx: 'auto',
px: 3,
}}>
<Link href='/' variant='nav'>Rebass</Link>
<Link href='/reflexbox' variant='nav'>Reflexbox</Link>
<Link href='/getting-started' variant='nav'>Docs</Link>
<Link href='https://github.com/rebassjs/rebass' variant='nav'>GitHub</Link>
</Box>
</Box>
================================================
FILE: packages/docs/src/components/head.js
================================================
import React from 'react'
import { Helmet } from 'react-helmet'
import pkg from 'rebass/package.json'
export default props => {
const title = [props.title, 'Rebass'].filter(Boolean).join(' | ')
return (
<Helmet
htmlAttributes={{
lang: 'en-us',
}}>
<title>{title}</title>
<link rel='icon' href='/icon.png' />
<meta name='description' content={pkg.description} />
<meta name='twitter:card' content='summary' />
<meta name='twitter:site' content='@jxnblk' />
<meta name='twitter:title' content={title} />
<meta name='twitter:description' content={pkg.description} />
<meta name='twitter:image' content='https://rebassjs.org/card.png' />
</Helmet>
)
}
================================================
FILE: packages/docs/src/components/header.js
================================================
import React from 'react'
import {
Flex,
Box,
Link,
Button,
} from 'rebass'
import { useColorMode } from 'theme-ui'
const modes = [
'lite',
'dark',
'gray',
'hack',
'pink',
]
const Burger = ({ size = 24 }) => (
<Box
as='svg'
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
fill="currentcolor"
viewBox="0 0 24 24"
sx={{
display: 'block',
margin: 0,
}}>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</Box>
)
const Dot = props =>
<svg
viewBox='0 0 32 32'
width='24'
height='24'
fill='currentcolor'
style={{
display: 'block',
}}>
<circle
cx='16'
cy='16'
r='14'
fill='none'
stroke='currentcolor'
strokeWidth='4'
/>
<path
d={`
M 16 0
A 16 16 0 0 0 16 32
z
`}
/>
</svg>
export default ({
nav,
menu,
setMenu,
fullwidth,
}) => {
const [ mode, setMode ] = useColorMode()
const cycleMode = e => {
const i = (modes.indexOf(mode) + 1) % modes.length
setMode(modes[i])
}
return (
<Flex
as='header'
px={3}
py={2}
height={64}
alignItems='center'>
{!fullwidth && (
<Button
title='Toggle Menu'
display={[ 'block', 'none' ]}
sx={{
width: 32,
height: 32,
p: 1,
}}
variant='transparent'
onClick={e => {
setMenu(!menu)
if (menu || !nav.current) return
const navlink = nav.current.querySelector('a')
navlink.focus()
}}>
<Burger />
</Button>
)}
<Link variant='nav' href='/'>Rebass</Link>
<Box mx='auto' />
<Link
mr={2}
variant='nav'
href='https://github.com/rebassjs/rebass'>
GitHub
</Link>
<Button
title='Change color mode'
variant='transparent'
sx={{
width: 32,
height: 32,
p: 1,
borderRadius: 99999,
}}
onClick={cycleMode}>
<Dot />
</Button>
</Flex>
)
}
================================================
FILE: packages/docs/src/components/icon.js
================================================
import React from 'react'
import Logo from './Logo'
export default props => (
<div
style={{
fontFamily: 'system-ui, sans-serif',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
width: 512,
height: 512,
borderRadius: 99999
}}>
<Logo
initial
static
size={512}
strokeWidth={6}
bg='#000'
{...props}
/>
</div>
)
================================================
FILE: packages/docs/src/components/layout.js
================================================
import React, { useState, useRef } from 'react'
import { Box, Flex } from 'rebass'
import { Pagination } from '@theme-ui/sidenav'
import Head from './head'
import SkipLink from './skip-link'
import Header from './header'
import Footer from './footer'
import Nav from './nav'
import EditLink from './edit-link'
const Sidebar = props =>
<Flex>
<Box
ref={props.nav}
open={props.open}
onClick={e => {
props.setMenu(false)
}}
onBlur={e => {
props.setMenu(false)
}}
onFocus={e => {
props.setMenu(true)
}}
style={{
transform: props.open ? 'translateX(0)' : 'translateX(-100%)',
}}
sx={{
position: [ 'fixed', 'sticky' ],
zIndex: 1,
top: 0,
left: 0,
bottom: [0, 'auto'],
width: [ 256, 256, 320 ],
minWidth: 0,
maxHeight: ['100vh', 'none'],
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
flex: 'none',
px: 3,
mt: [64, 0],
pb: 3,
bg: ['background', 'transparent'],
transition: 'transform .2s ease-out',
transform: [, 'none !important'],
ul: {
listStyle: 'none',
padding: 0,
},
a: {
variant: 'links.nav',
},
'li > ul > li > a': {
pl: '24px',
}
}}>
<Nav />
</Box>
<Box
sx={{
width: '100%',
minWidth: 0,
maxWidth: 768,
minHeight: 'calc(100vh - 64px)',
mx: 'auto',
px: [ 3, 4 ],
pb: 5,
}}>
{props.children}
<EditLink my={5}>
Edit this page on GitHub
</EditLink>
<Nav
pathname={props.location.pathname}
components={{
wrapper: Pagination
}}
/>
</Box>
</Flex>
export default (props) => {
const fullwidth = props.location.pathname === '/'
const [ menu, setMenu ] = useState(false)
const nav = useRef(null)
return (
<div>
<SkipLink />
<Head {...props} />
<Header
fullwidth={fullwidth}
menu={menu}
setMenu={setMenu}
nav={nav}
/>
{!fullwidth ? (
<Sidebar
{...props}
nav={nav}
open={menu}
setMenu={setMenu}>
<main id='content'>
{props.children}
</main>
</Sidebar>
) : (
<main id='content'>
{props.children}
</main>
)}
<Footer />
</div>
)
}
================================================
FILE: packages/docs/src/components/logo.js
================================================
import React from 'react'
import styled from '@emotion/styled'
import { keyframes } from '@emotion/core'
import { useThemeUI } from 'theme-ui'
import { layout } from 'styled-system'
const Svg = styled(({
width,
height,
...props
}) => <svg xmlns='http://www.w3.org/2000/svg' {...props} />)`
transform: rotate3d(1, 1, 1, 0deg);
${layout}
`
const spin1 = keyframes`
50% { transform: rotate3d(0, 2, 1, 180deg) }
100% { transform: rotate3d(0, 2, 1, 360deg) }
`
const spin2 = keyframes`
50% { transform: rotate3d(2, 0, 1, 180deg) }
100% { transform: rotate3d(2, 0, 1, 360deg) }
`
const fade1 = keyframes`
0% { stroke: magenta }
33% { stroke: cyan }
66% { stroke: yellow }
100% { stroke: magenta }
`
const a = '4s'
const b = '7s'
const c = '8s'
const Electron1 = styled('circle')`
transform-origin: 50% 50%;
animation-name: ${spin1}, ${fade1};
animation-duration: ${a}, ${b};
animation-timing-function: linear;
animation-iteration-count: infinite;
`
const Electron2 = styled('circle')`
transform-origin: 50% 50%;
animation-name: ${spin2}, ${fade1};
animation-duration: ${a}, ${c};
animation-timing-function: linear;
animation-iteration-count: infinite;
`
const ElectronStatic1 = styled('circle')`
transform-origin: 50% 50%;
transform: rotate3d(0, 2, 1, 190deg);
`
const ElectronStatic2 = styled('circle')`
transform-origin: 50% 50%;
transform: rotate3d(2, 0, 1, 190deg);
`
const Logo = props => {
const electronProps = {
cx: 32,
cy: 32,
r: 24,
strokeWidth: props.strokeWidth,
vectorEffect: 'non-scaling-stroke'
}
const electrons = props.static
? (
<g>
<ElectronStatic1 {...electronProps} stroke='#f90' />
<ElectronStatic2 {...electronProps} stroke='magenta' />
</g>
)
: (
<g>
<Electron1 {...electronProps} />
<Electron2 {...electronProps} />
</g>
)
return (
<Svg viewBox='0 0 64 64'
style={{
display: 'block',
maxWidth: '100%',
margin: 0,
fill: 'none',
stroke: 'cyan',
}}
vectorEffect='non-scaling-stroke'
width={props.size}
height={props.size}>
{props.styles}
<circle
cx={32}
cy={32}
r={32}
fill={props.bg}
stroke='none'
/>
<circle
cx={32}
cy={32}
r={30}
strokeWidth={props.strokeWidth / 2}
vectorEffect='non-scaling-stroke'
opacity={1/2}
/>
{electrons}
{!props.text && props.initial && (
<text
x={32}
y={40}
textAnchor='middle'
fontFamily='system-ui, sans-serif'
fontWeight='bold'
fontSize='24'
stroke='none'
fill={props.color}>
R
</text>
)}
{props.text && (
<text
x={32}
y={34}
textAnchor='middle'
fontFamily='system-ui, sans-serif'
fontWeight='bold'
fontSize='4'
stroke='none'
fill={props.color}
style={{
textTransform: 'uppercase',
letterSpacing: '0.5em'
}}>
{props.text}
</text>
)}
</Svg>
)
}
Logo.defaultProps = {
initial: false,
color: 'white',
bg: 'transparent',
strokeWidth: 2,
size: 256
}
export default Logo
================================================
FILE: packages/docs/src/components/nav.mdx
================================================
- [Getting Started](/getting-started)
- [Props](/props)
- [Theming](/theming)
- [Variants](/variants)
- [Extending](/extending)
- [Box](/box)
- [Flex](/flex)
- [Text](/text)
- [Heading](/heading)
- [Button](/button)
- [Link](/link)
- [Image](/image)
- [Card](/card)
- [Forms](/forms)
- [Label](/forms/label)
- [Input](/forms/input)
- [Select](/forms/select)
- [Textarea](/forms/textarea)
- [Radio](/forms/radio)
- [Checkbox](/forms/checkbox)
- [Slider](/forms/slider)
- [Switch](/forms/switch)
- [Layout](/layout)
- [Guides](/guides)
- [CSS Grid](/guides/css-grid)
- [MDX](/guides/mdx)
- [Using Rebass without Context](/guides/using-rebass-without-context)
- [Server- Side Rendering](/guides/server-side-rendering)
- [Styled Components](/guides/styled-components)
- [Demo](/demo)
- [Recipes](/recipes)
- [Flexbox Grid](/recipes/flexbox-grid)
- [Flexbox Wrap](/recipes/flexbox-wrap)
- [Nav Bar](/recipes/nav-bar)
- [Image Card](/recipes/image-card)
- [Background Image Card](/recipes/background-image-card)
- [Video Embed](/recipes/video-embed)
- [Container](/recipes/container)
- [Avatar](/recipes/avatar)
- [Badge](/recipes/badge)
- [NavLink](/recipes/nav-link)
================================================
FILE: packages/docs/src/components/note.js
================================================
import React from 'react'
import { Box } from 'rebass'
export default props =>
<Box
{...props}
sx={{
fontSize: 1,
fontStyle: 'italic',
px: 3,
py: 2,
my: 4,
bg: 'muted',
borderRadius: 4,
borderLeft: t => `8px solid ${t.colors.primary}`,
}}
/>
================================================
FILE: packages/docs/src/components/recipe-card.js
================================================
import React from 'react'
import { Link } from 'gatsby'
import { Box, Card } from 'rebass'
export default props => {
const children = React.Children.toArray(props.children)
const title = children.find(child => child.type === 'h1' || child.props.mdxType === 'h1')
const example = children.find(child =>
child.type === 'pre' || child.props.mdxType === 'pre')
const [ pre ] = React.Children.toArray(example.props.children)
const preview = React.cloneElement(pre, {
preview: true
})
return (
<Card
as={Link}
to={props.href}
sx={{
display: 'flex',
flexDirection: 'column',
height: '100%',
textDecoration: 'none',
color: 'inherit',
}}>
<Box
sx={{
flex: '1 1 auto',
overflow: 'hidden',
}}>
{preview}
</Box>
<Box
mt={3}
fontWeight='bold'>
{title.props.children}
</Box>
</Card>
)
}
================================================
FILE: packages/docs/src/components/skip-link.js
================================================
import React from 'react'
import { Link } from 'rebass'
export default props => (
<Link
children="Skip to content"
href="#content"
{...props}
sx={{
clip: 'rect(0 0 0 0)',
height: 1,
width: 1,
m: -1,
p: 0,
overrflow: 'hidden',
position: 'absolute',
top: -9999,
':focus': {
p: 3,
position: 'fixed',
zIndex: 4,
top: 0,
left: 0,
m: 2,
fontWeight: 'bold',
color: 'black',
bg: 'white',
width: 'auto',
height: 'auto',
clip: 'auto',
},
}}
/>
)
================================================
FILE: packages/docs/src/components/twitter-card.js
================================================
import React from 'react'
import Logo from './Logo'
const photo = 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20'
export default props => (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'black',
width: 1024,
height: 512
}}>
<Logo
static
text
strokeWidth={4}
size={512}
{...props}
/>
</div>
)
================================================
FILE: packages/docs/src/components/wrapper.js
================================================
import React from 'react'
import { Styled } from 'theme-ui'
import { Link } from 'gatsby'
import { Helmet } from 'react-helmet'
import { Box, Flex } from 'rebass'
import { globalHistory } from '@reach/router'
const breadcrumbRoutes = [
'guides',
'recipes',
]
export const Breadcrumbs = ({
title,
}) => {
const { location } = globalHistory
const [ n, base, path ] = location.pathname.split('/')
if (!breadcrumbRoutes.includes(base)) return false
if (!path) return false
return (
<Flex
sx={{
fontWeight: 'bold',
mb: 4,
textTransform: 'capitalize',
}}>
<Styled.a
as={Link}
to={'/' + base}>
{base}
</Styled.a>
<Box px={2}>
/
</Box>
<Box>
{title || path}
</Box>
</Flex>
)
}
export const wrapper = ({
title,
...props
}) => {
const children = React.Children.toArray(props.children)
.reduce((acc, child) => {
const type = child.props.mdxType
if (type !== 'h1') return [ ...acc, child ]
return [
...acc,
child,
<Breadcrumbs key='breadcrumbs' title={title} />,
]
}, [])
return (
<>
{title && (
<Helmet>
<title>{title} | Rebass</title>
</Helmet>
)}
{children}
</>
)
}
================================================
FILE: packages/docs/src/gatsby-plugin-theme-ui/components.js
================================================
import React from 'react'
import code from '../components/code'
import { wrapper } from '../components/wrapper'
const heading = Tag => props => {
if (!props.id) return <Tag {...props} />
return (
<Tag {...props}>
<a href={'#' + props.id}>
{props.children}
</a>
</Tag>
)
}
export default {
wrapper,
pre: props => props.children,
code,
h2: heading('h2'),
h3: heading('h3'),
h4: heading('h4'),
h5: heading('h5'),
h6: heading('h6'),
}
================================================
FILE: packages/docs/src/gatsby-plugin-theme-ui/index.js
================================================
import preset from '@rebass/preset'
import merge from 'lodash.merge'
import prism from '@theme-ui/prism/presets/theme-ui'
export default merge(preset, {
initialColorModeName: 'lite',
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
secondary: '#a0c',
accent: '#f0a',
muted: '#f6f6ff',
gray: '#444',
lightgray: '#cfcfd3',
modes: {
dark: {
text: '#fff',
background: '#000',
primary: '#0ff',
secondary: '#b0f',
accent: '#f0b',
muted: '#111',
gray: '#999',
lightgray: '#444',
},
gray: {
text: '#fff',
background: 'hsl(270, 30%, 14%)',
primary: 'hsl(180, 100%, 60%)',
secondary: 'hsl(270, 100%, 60%)',
accent: 'hsl(300, 100%, 60%)',
muted: 'hsl(270, 50%, 8%)',
gray: 'hsl(270, 50%, 70%)',
lightgray: 'hsl(270, 50%, 30%)',
},
hack: {
text: 'hsl(120, 100%, 75%)',
background: 'hsl(120, 20%, 10%)',
primary: 'hsl(120, 100%, 40%)',
secondary: 'hsl(120, 50%, 40%)',
accent: 'hsl(120, 100%, 90%)',
muted: 'hsl(120, 20%, 7%)',
gray: 'hsl(120, 20%, 40%)',
lightgray: 'hsl(120, 20%, 20%)',
},
pink: {
text: 'hsl(350, 80%, 10%)',
background: 'hsl(350, 100%, 90%)',
primary: 'hsl(350, 100%, 50%)',
secondary: 'hsl(280, 100%, 50%)',
accent: 'hsl(280, 100%, 20%)',
muted: 'hsl(350, 100%, 88%)',
gray: 'hsl(350, 40%, 50%)',
lightgray: 'hsl(350, 60%, 80%)',
},
}
},
fontWeights: {
body: 400,
heading: 800,
bold: 700,
},
sizes: {
wide: 1280,
},
shadows: {
small: `0 0 0px 1px rgba(0, 0, 0, 0.25)`,
},
buttons: {
big: {
variant: 'buttons.primary',
px: 4,
py: 3,
fontSize: 3,
},
outline: {
variant: 'buttons.primary',
color: 'primary',
bg: 'transparent',
boxShadow: 'inset 0 0 0 2px'
},
transparent: {
color: 'inherit',
bg: 'transparent',
':hover,:focus': {
color: 'primary',
outline: 'none',
boxShadow: '0 0 0 2px',
}
},
},
links: {
nav: {
display: 'block',
px: 2,
py: 1,
color: 'inherit',
textDecoration: 'none',
fontSize: 1,
fontWeight: 'bold',
},
},
text: {
heading: {
a: {
color: 'inherit',
textDecoration: 'none',
':hover': {
textDecoration: 'underline',
}
}
}
},
variants: {
badge: {
display: 'inline-block',
px: 2,
color: 'background',
bg: 'primary',
borderRadius: 'circle',
},
},
styles: {
a: {
color: 'primary',
transition: 'color .2s ease-out',
':hover,:focus': {
color: 'secondary',
}
},
inlineCode: {
fontFamily: 'monospace',
fontSize: '93.75%',
color: 'secondary',
},
code: {
fontFamily: 'monospace',
color: 'secondary',
},
pre: {
...prism,
fontFamily: 'monospace',
fontSize: 1,
overflowX: 'auto',
bg: 'muted',
p: 3,
borderRadius: 4,
},
blockquote: {
p: 0,
mx: 0,
fontWeight: 'bold',
fontSize: 3,
},
h1: {
variant: 'text.heading',
mt: 0,
fontSize: [5, 6],
},
h2: {
variant: 'text.heading',
fontSize: [4, 5],
},
h3: {
variant: 'text.heading',
fontSize: 3,
},
h4: { variant: 'text.heading', },
h5: { variant: 'text.heading', },
h6: { variant: 'text.heading', },
table: {
width: '100%',
borderCollapse: 'separate',
borderSpacing: 0,
},
th: {
py: 2,
textAlign: 'left',
borderBottom: t => `4px solid ${t.colors.muted}`,
},
td: {
py: 2,
textAlign: 'left',
borderBottom: t => `1px solid ${t.colors.muted}`,
},
},
forms: {
label: {
fontSize: 1,
fontWeight: 'bold',
},
field: {
borderColor: 'lightgray',
':focus': {
borderColor: 'primary',
outline: 'none',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
}
},
input: {
variant: 'forms.field',
},
select: {
variant: 'forms.field',
},
textarea: {
variant: 'forms.field',
},
radio: {
},
slider: {
bg: 'lightgray',
},
switch: {
// thumb: {}
}
}
})
================================================
FILE: packages/docs/src/index.js
================================================
import React from 'react'
import Layout from './components/layout'
export { default as Layout } from './components/layout'
export * from './components/blocks'
export { default as DemoProvider } from './components/demo-provider'
export { default as Note } from './components/note'
export { default as Logo } from './components/logo'
export { default as RecipeCard } from './components/recipe-card'
export const wrapPageElement = ({ element, props }) =>
<Layout {...props}>
{element}
</Layout>
================================================
FILE: packages/docs/src/pages/404.mdx
================================================
import { Flex } from 'rebass'
<Flex justifyContent='center' mb={5}>
<Logo
text='404'
color='black'
bg='white'
/>
</Flex>
# 404
Page not found
================================================
FILE: packages/docs/src/pages/box.mdx
================================================
export const title = 'Box'
# Box
Responsive box-model layout component
```jsx live=true
<Box
p={5}
fontSize={4}
width={[ 1, 1, 1/2 ]}
color='white'
bg='primary'>
Box
</Box>
```
The Box and Flex components are also available in the standalone [Reflexbox](/reflexbox) package.
================================================
FILE: packages/docs/src/pages/button.mdx
================================================
export const title = 'Button'
# Button
Button component with variants
```jsx live=true
<Button variant='primary' mr={2}>Primary</Button>
<Button variant='secondary' mr={2}>Secondary</Button>
<Button variant='outline' mr={2}>Outline</Button>
```
================================================
FILE: packages/docs/src/pages/card.mdx
================================================
export const title = 'Card'
# Card
Extension of the Box component with card styles
```jsx live=true
<Card width={256}>
<Image src={props.image} />
<Heading>Card</Heading>
</Card>
```
================================================
FILE: packages/docs/src/pages/demo.mdx
================================================
import {
Box,
Heading,
Text,
Button,
Image,
Card,
} from 'rebass'
import { DemoProvider } from '..'
export const title = 'Demo'
# Demo
<DemoProvider>
```jsx live=true
<Box
sx={{
p: 4,
color: 'text',
bg: 'background',
fontFamily: 'body',
fontWeight: 'body',
lineHeight: 'body',
}}>
<Heading variant='display'>Hello</Heading>
<Text mb={4}>This is a demo using presets from Theme UI</Text>
<Button mr={3}>
Beep
</Button>
<Button variant='secondary'>
Boop
</Button>
</Box>
```
</DemoProvider>
================================================
FILE: packages/docs/src/pages/extending.mdx
================================================
import Note from '../components/note'
export const title = 'Extending'
# Extending
Rebass components are designed to be used as foundational primitives
for building a custom design system.
By extending these base components, you can quickly start a component library
with a consistent API and styles that are driven by design constraints
that you define in your theme.
To extend a component, pass props through and define custom styles in the `sx` prop.
```jsx
import React from 'react'
import { Box } from 'rebass'
const Container = props =>
<Box
{...props}
sx={{
maxWidth: '1024px',
mx: 'auto',
px: 3,
}}
/>
```
If you prefer, you can also use `@emotion/styled` to extend components.
<Note>
It's not recommended to use the `styled` API from `styled-components` due to various issues and unexpected behavior.
</Note>
## Order of Styles
Because Rebass still uses CSS, you might have to contend with the cascade, depending on how you define your styles,
especially in regards to source order and using shorthand CSS properties.
Rebass components apply styles in the following order:
1. Variant
2. `sx` prop
3. `css` prop
4. Styled System props
### Shorthand CSS Properties
If you're using CSS properties that have shorthand variations, try to use the normal CSS property instead.
```js
// avoid shorthand syntax
sx={{
border: '1px solid tomato',
}}
```
```js
// use regular properties instead
sx={{
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'tomato',
}}
```
### Conflicting Styles
It's easy to add conflicting styles in two different places and end up with unexpected results.
- If you're intending to use a style prop, don't use it in the `sx` prop or in variants.
- If you're intending to use variants, don't include conflicting styles in the `sx` prop
## Default Props
Instead of using the `defaultProps` property on your component, define defaults inline in the JSX.
The `{...props}` from the outside will override the ones you set on the component.
```jsx
const Container = props =>
<Box
maxWidth='container'
px={3}
mx='auto'
{...props}
/>
```
## Default Variants
To set a default variant, include the variant in your theme.
```js
variants: {
badge: {
color: 'white',
bg: 'tomato',
px: 2,
},
}
```
Then add the default prop in your component.
```jsx
const Badge = props =>
<Box
variant='badge'
{...props}
/>
```
## Example Extensions
### Avatar
```jsx
const Avatar = props =>
<Image
{...props}
sx={{
width: 48,
height: 48,
borderRadius: 9999,
}}
/>
```
### Embed
```jsx
const Embed = props =>
<Box
{...props}
sx={{
width: '100%',
height: 0,
paddingBottom: (9 / 16) + '%',
position: 'relative',
overflow: 'hidden',
'& > iframe': {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}}
/>
```
### Pre
```jsx
const Pre = props =>
<Text
{...props}
as='pre'
sx={{
fontFamily: 'monospace',
p: 2,
color: 'secondary',
bg: 'muted',
overflowX: 'auto',
}}
/>
```
### Fixed
```jsx
const Fixed = props =>
<Box
{...props}
sx={{
position: 'fixed'
}}
/>
```
### Divider
```jsx
const Divider = props =>
<Box
{...props}
as='hr'
sx={{
bg: 'gray',
border: 0,
height: 1
}}
/>
```
<!--
### Toolbar
```jsx
const Toolbar = props =>
<Flex
{...props}
sx={{
px: 2,
color: 'white',
bg: 'black',
alignItems: 'center',
}}
/>
```
-->
See the [Recipes](/recipes) page for more examples.
================================================
FILE: packages/docs/src/pages/flex.mdx
================================================
export const title = 'Flex'
# Flex
Responsive flexbox layout component
```jsx live=true
<Flex>
<Box
p={3}
width={1/2}
color='white'
bg='primary'>
Flex
</Box>
<Box
p={3}
width={1/2}
color='white'
bg='secondary'>
Box
</Box>
</Flex>
```
The Box and Flex components are also available in the standalone [Reflexbox](/reflexbox) package.
================================================
FILE: packages/docs/src/pages/forms/checkbox.mdx
================================================
export const title = 'Checkbox'
# Checkbox
Accessible and themeable form checkbox input component.
```js
import { Label, Checkbox } from '@rebass/forms'
```
```jsx live
<Box>
<Label>
<Checkbox
id='remember'
name='remember'
/>
Remember me
</Label>
</Box>
```
Note that the `Label` component uses `display: flex` by default to make alignment with labels simpler.
================================================
FILE: packages/docs/src/pages/forms/index.mdx
================================================
import { Box, Button } from 'rebass'
export const title = 'Forms'
# Forms
Accessible and themeable form components for use with Rebass or Theme UI.
```sh
npm i @rebass/forms
```
Import and use the form components alongside other Rebass components.
```js
import {
Label,
Input,
Select,
Textarea,
Radio,
Checkbox,
} from '@rebass/forms'
```
```jsx live
<Box
as='form'
onSubmit={e => e.preventDefault()}
py={3}>
<Flex mx={-2} mb={3}>
<Box width={1/2} px={2}>
<Label htmlFor='name'>Name</Label>
<Input
id='name'
name='name'
defaultValue='Jane Doe'
/>
</Box>
<Box width={1/2} px={2}>
<Label htmlFor='location'>Location</Label>
<Select
id='location'
name='location'
defaultValue='NYC'>
<option>NYC</option>
<option>DC</option>
<option>ATX</option>
<option>SF</option>
<option>LA</option>
</Select>
</Box>
</Flex>
<Flex mx={-2} flexWrap='wrap'>
<Label width={[ 1/2, 1/4 ]} p={2}>
<Radio
id='beep'
name='beep'
value='beep'
defaultChecked
/>
Beep
</Label>
<Label width={[ 1/2, 1/4 ]} p={2}>
<Radio
id='boop'
name='beep'
value='boop'
/>
Boop
</Label>
<Label width={[1/2, 1/4]} p={2}>
<Checkbox
id='remember'
name='remember'
/>
Remember Me
</Label>
<Box px={2} ml='auto'>
<Button>
Beep
</Button>
</Box>
</Flex>
</Box>
```
## Theming
Each form element can be customized with the `forms` object in your theme.
```js
// example theme
export default {
forms: {
input: {
color: 'primary',
},
select: {
borderRadius: 9999,
},
textarea: {},
label: {},
radio: {},
checkbox: {},
},
}
```
## Variants
Additional component variants can be defined in the theme and applied via props.
```js
// example theme with variants
export default {
forms: {
largeInput: {
fontSize: 3,
px: 3,
py: 2,
}
}
}
```
```jsx
<Input variant='largeInput' />
```
================================================
FILE: packages/docs/src/pages/forms/input.mdx
================================================
export const title = 'Input'
# Input
Accessible and themeable form input component.
```js
import { Label, Input } from '@rebass/forms'
```
```jsx live
<Box>
<Label htmlFor='email'>Email</Label>
<Input
id='email'
name='email'
type='email'
placeholder='jane@example.com'
/>
</Box>
```
================================================
FILE: packages/docs/src/pages/forms/label.mdx
================================================
export const title = 'Label'
# Label
Accessible and themeable form label component.
```js
import { Label } from '@rebass/forms'
```
```jsx live
<Label htmlFor='email'>Email</Label>
```
================================================
FILE: packages/docs/src/pages/forms/radio.mdx
================================================
export const title = 'Radio'
# Radio
Accessible and themeable form radio input component.
```js
import { Label, Radio } from '@rebass/forms'
```
```jsx live
<Box>
<Label>
<Radio
name='color'
id='red'
value='red'
/>
Red
</Label>
<Label>
<Radio
name='color'
id='green'
value='green'
/>
Green
</Label>
<Label>
<Radio
name='color'
id='blue'
value='blue'
/>
Blue
</Label>
</Box>
```
Note that the `Label` component uses `display: flex` by default to make alignment with labels simpler.
================================================
FILE: packages/docs/src/pages/forms/select.mdx
================================================
export const title = 'Select'
# Select
Accessible and themeable form select component.
```js
import { Label, Select } from '@rebass/forms'
```
```jsx live
<Box>
<Label htmlFor='country'>Country</Label>
<Select
id='country'
name='country'
defaultValue='United States'>
{Object.entries(props.countries).map(([ key, country ]) => (
<option
key={key}>
{country.name}
</option>
))}
</Select>
</Box>
```
================================================
FILE: packages/docs/src/pages/forms/slider.mdx
================================================
export const title = 'Slider'
# Slider
Accessible and themeable form range input component.
```js
import { Label, Slider } from '@rebass/forms'
```
```jsx live
<Box>
<Label htmlFor='percent'>Percent</Label>
<Slider
id='percent'
name='percent'
defaultValue={25}
/>
</Box>
```
================================================
FILE: packages/docs/src/pages/forms/switch.mdx
================================================
export const title = 'Switch'
# Switch
Toggle switch button component
```js
import { Switch } from '@rebass/forms'
```
```jsx live
<Switch />
```
================================================
FILE: packages/docs/src/pages/forms/textarea.mdx
================================================
export const title = 'Textarea'
# Textarea
Accessible and themeable form textarea component.
```js
import { Label, Textarea } from '@rebass/forms'
```
```jsx live
<Box>
<Label htmlFor='comment'>Comment</Label>
<Textarea
id='comment'
name='comment'
/>
</Box>
```
================================================
FILE: packages/docs/src/pages/getting-started.mdx
================================================
export const title = 'Getting Started'
# Getting Started
Install the core Rebass library.
```sh
npm i rebass
```
## ThemeProvider
By default, Rebass components are stylistically unopinionated and do not include a theme.
You can add a theme to your application with a `ThemeProvider` component and by providing a theme in context.
For this guide, use the Emotion `ThemeProvider` with the default Rebass preset theme.
```sh
npm i @rebass/preset emotion-theming
```
Wrap your application with the `ThemeProvider` component.
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
```
Alternatively, if you'd like to use Rebass with [Theme UI][],
you can use the `ThemeProvider` from `theme-ui`, or use [`gatsby-plugin-theme-ui`](https://theme-ui.com/gatsby-plugin).
```sh
import { ThemeProvider } from 'theme-ui'
```
## Composition
You can use Rebass components out-of-the-box to build larger, composite components.
```jsx
import React from 'react'
import {
Box,
Card,
Image,
Heading,
Text
} from 'rebass'
export default ({
image,
title,
description
}) =>
<Box width={256}>
<Card
sx={{
p: 1,
borderRadius: 2,
boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
}}>
<Image src={image} />
<Box px={2}>
<Heading as='h3'>
{title}
</Heading>
<Text fontSize={0}>
{description}
</Text>
</Box>
</Card>
</Box>
```
```jsx live=true
<Box width={256}>
<Card
sx={{
p: 1,
borderRadius: 2,
boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
}}>
<Image src={props.image} />
<Box px={2}>
<Heading as='h3'>
Card Demo
</Heading>
<Text fontSize={0}>
You can edit this code
</Text>
</Box>
</Card>
</Box>
```
All components in Rebass are extensions of the base [Box](/box) component, which includes an `sx` prop for theme-based styling as well as a standard set of [Styled System][] style props.
## Extending
You can also use Rebass components as basic building blocks and extend them to create custom UI components,
which is a great way to get started with a new design system without *boiling the ocean*.
```jsx
// custom button example
import React from 'react'
import { Button } from 'rebass'
export default props =>
<Button
{...props}
sx={{
fontSize: 1,
textTransform: 'uppercase',
borderRadius: 99999,
}}
/>
```
## Theming
Use the default Rebass theme or completely customize the look and feel with a custom theme.
Since Rebass follows the [Theme Specification][], any theme built for use with [Theme UI][] or [Styled System][] will work out-of-the-box.
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
const theme = {
fontSizes: [
12, 14, 16, 24, 32, 48, 64
],
colors: {
primary: '#07c',
gray: '#f6f6ff',
},
buttons: {
primary: {
color: 'white',
bg: 'primary',
},
outline: {
color: 'primary',
bg: 'transparent',
boxShadow: 'inset 0 0 0 2px'
},
},
}
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
```
## Variants
Each component accepts a `variant` prop, giving you multiple styles for buttons, cards, text styles, and more.
You can define custom variants in your own theme or use the defaults from the Rebass preset theme.
```jsx live=true
<Button variant='primary' mr={2}>Beep</Button>
<Button variant='secondary'>Boop</Button>
```
[styled system]: https://styled-system.com
[theme specification]: https://github.com/system-ui/theme-specification
[theme ui]: https://theme-ui.com
================================================
FILE: packages/docs/src/pages/guides/css-grid.mdx
================================================
export const title = 'CSS Grid'
# CSS Grid
Rebass components can be used to create one-off or reusable CSS Grid layout components.
While the entirety of what's possible with CSS Grid is outside the scope of this guide, the following should demonstrate how to apply any CSS Grid layout using Rebass.
<Note>
This guide is a work-in-progress.
If you'd like to help make this better,
please open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).
</Note>
CSS Grid is great for arranging direct child elements without the need for additional styles applied to the children.
Create an extension of the Box component that can wrap other elements to apply a grid layout.
```jsx
// example grid layout component
import React from 'react'
import { Box } from 'rebass'
export default props =>
<Box
{...props}
sx={{
display: 'grid',
gridGap: 3, // theme.space[3]
}}
/>
```
By using the `sx` prop, CSS properties such as `gridGap` will use values from your theme object.
This can help ensure consistent whitespace throughout your layout.
## Auto Columns
Using the `grid-auto-columns` property, you can quickly lay out child elements in a tile-based grid.
```jsx
// example grid layout component
import React from 'react'
import { Box } from 'rebass'
export default props =>
<Box
{...props}
sx={{
display: 'grid',
gridGap: 3, // theme.space[3]
gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
}}
/>
```
## Demo
Use the live demo below to explore different layouts using CSS Grid.
```jsx live=true
<Box
sx={{
display: 'grid',
gridGap: 4,
gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
}}>
<Heading p={3} bg='muted'>Hello</Heading>
<Box p={3} color='background' bg='primary'>CSS Grid</Box>
</Box>
```
## Resources
There are many resources for learning how to use CSS Grid layout.
To fully understand any API in CSS, I *highly* recommend reading the specification, since it is the authoritative source for how CSS is intended to work:
**[CSS Grid Layout Module Level 1][spec]**
Once you have a basic grasp of the concepts in the specification, MDN is an excellent resource for learning any web technology:
**[MDN: CSS Grid Layout][mdn]**
Additional resources:
- [Grid by Example][]
- [Jen Simmon's Lab][simmons-lab]
- [CSS Tricks][]
[spec]: https://www.w3.org/TR/css-grid-1/
[mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[css tricks]: https://css-tricks.com/snippets/css/complete-guide-grid/
[grid by example]: https://gridbyexample.com/
[simmons-lab]: https://labs.jensimmons.com/
<!-- vet this? -->
[learn-css-grid]: https://learncssgrid.com/
================================================
FILE: packages/docs/src/pages/guides/index.mdx
================================================
import { Grid } from '../..'
export const title = 'Guides'
# Guides
<Grid
sx={{
a: {
display: 'block',
fontWeight: 'bold',
fontSize: 3,
textDecoration: 'none',
}
}}>
- [CSS Grid](/guides/css-grid)
Use the Rebass Box component and `sx` prop to create custom CSS Grid components
- [MDX](/guides/mdx)
Use Rebass components to add styles and layout to MDX documents
- [Using Rebass without Context](/guides/using-rebass-without-context)
Create self-contained components that do not require theming context
- [Server-Side Rendering](/guides/server-side-rendering)
Render Rebass components on the server with zero configuration
- [Styled Components](/guides/styled-components)
Use Rebass with the Styled Components library
</Grid>
================================================
FILE: packages/docs/src/pages/guides/mdx.mdx
================================================
import { Note } from '../..'
import { Box } from 'rebass'
export const title = 'MDX'
# MDX
[MDX][] is a format that allows you to write content in markdown and import and use React components inline.
It's an excellent format for documentation, blogs, or other forms of structured content.
<Note>
This guide is a work-in-progress.
If you'd like to help make this better,
please open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).
</Note>
Rebass components can be imported and used directly in MDX documents,
which lets you apply styles inline to sections of your page.
Since the `sx` prop is built into the components, this can be a quick way to apply one off styles or create custom components like callouts and note boxes.
In the following example, the Box component is used to add a callout style box around its contents.
```md
import { Box } from 'rebass'
# MDX Example
<Box
color='primary'
bg='muted'
p={3}
my={5}
>
> ”This is an important quote.”
</Box>
```
You can also use the `sx` prop with child selectors to dramatically change the layout of MDX content.
```md
import { Box } from 'rebass'
# MDX Example
<Box
sx={{
ul: {
listStyle: 'none',
display: 'grid',
padding: 0,
gridGap: 3,
gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
},
li: {
fontWeight: 'bold',
}
}}>
- This is a list
- Displayed in a grid layout
- With custom styles
- Pretty cool, huh?
</Box>
```
If you make repeated use of a particular layout block, consider moving it to its own component that can be imported in multiple MDX documents.
<Note>
If you'd like to style the markdown elements with the same theme object and a similar API to Rebass,
use the [Theme UI][] library, which includes first-class support for styling MDX content.
</Note>
[mdx]: https://mdxjs.com
[theme ui]: https://theme-ui.com
================================================
FILE: packages/docs/src/pages/guides/server-side-rendering.mdx
================================================
export const title = 'Server-Side Rendering'
# Server-Side Rendering
Because Rebass uses Emotion, no additional steps are required to support rendering on a server.
Emotion will automatically inline performant, critical CSS without any additional effort required.
See the [Emotion docs](https://emotion.sh/docs/ssr) for more.
================================================
FILE: packages/docs/src/pages/guides/styled-components.mdx
================================================
import { Note } from '../..'
export const title = 'Using Styled Components'
# Using Styled Components
If you'd prefer to use the Styled Components library instead of Emotion, you can import components from `rebass/styled-components`.
```jsx
import React from 'react'
import { Box } from 'rebass/styled-components'
export default props =>
<Box>
Hello
</Box>
```
<Note>
The package will still install Emotion as a dependency, but it will not be included in the module or your application bundle.
</Note>
================================================
FILE: packages/docs/src/pages/guides/theme-ui.mdx
================================================
import { Note } from '../..'
export const title = 'Theme UI'
# Theme UI
<Note>
This guide is a work-in-progress.
If you'd like to help make this better,
please open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).
</Note>
================================================
FILE: packages/docs/src/pages/guides/using-rebass-without-context.mdx
================================================
import { Note } from '../..'
export const title = 'Using Rebass without Context'
# Using Rebass without Context
If you'd like to use Rebass components without adding a theme to React context,
you can pass a `theme` object as a prop to any of the components.
<Note>
This guide is a work-in-progress.
If you'd like to help make this better,
please open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).
</Note>
```jsx
import React from 'react'
import { Box } from 'rebass'
import theme from './theme'
export default props =>
<Box
{...props}
theme={theme}
/>
```
================================================
FILE: packages/docs/src/pages/heading.mdx
================================================
export const title = 'Heading'
# Heading
Extension of the Text component for headings
```jsx live=true
<Heading
fontSize={[ 5, 6, 7 ]}
color='primary'>
Hello
</Heading>
```
================================================
FILE: packages/docs/src/pages/image.mdx
================================================
export const title = 'Image'
# Image
Responsive image component with variants
```jsx live=true
<Image
src={props.image}
sx={{
width: [ '100%', '50%' ],
borderRadius: 8,
}}
/>
```
```jsx live=true
<Image
src={props.image}
variant='avatar'
/>
```
================================================
FILE: packages/docs/src/pages/index.mdx
================================================
import { Box, Flex, Button } from 'rebass'
import {
Banner,
NavGrid,
Container,
Grid,
LogoGrid,
} from '..'
import Logo from '../components/logo'
<Banner>
<Box mt={5} />
<LogoGrid>
<Logo text='' size={192} />
<div>
# Rebass <br /> React primitive UI components<br />built with Styled System
```sh
npm i rebass
```
</div>
</LogoGrid>
<Box my='auto' />
<NavGrid>
- [Getting Started](/getting-started)
- [Props](/props)
- [Theming](/theming)
- [Variants](/variants)
- [Extending](/extending)
- [Box](/box)
- [Flex](/flex)
- [Text](/text)
- [Heading](/heading)
- [Button](/button)
- [Link](/link)
- [Image](/image)
- [Card](/card)
- [Forms](/forms)
- [Guides](/guides)
- [Recipes](/recipes)
</NavGrid>
</Banner>
<Container py={5}>
[![stars][]][github]
[![build status][]][travis]
[![downloads][]][npm]
[![coverage][]][codecov]
[stars]: https://flat.badgen.net/github/stars/rebassjs/rebass?color=33e
[github]: https://github.com/rebassjs/rebass
[build status]: https://flat.badgen.net/travis/rebassjs/rebass/master?color=33e
[travis]: https://travis-ci.org/rebassjs/rebass
[downloads]: https://flat.badgen.net/npm/dm/rebass?color=33e
[npm]: https://npmjs.com/package/rebass
[coverage]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass?color=33e
[codecov]: https://codecov.io/github/rebassjs/rebass
<Grid py={5} sx={{ fontWeight: 'bold' }}>
- Start your design system without boiling the ocean
- Build consistent UI with design constraints and user-defined scales
- Best-in-class developer ergonomics with [Styled System][] props
- First-class support for theming &
fully compatible with [Theme UI][]
- Quick, mobile-first responsive styles with array-based syntax
- Flexbox layout with the Box and Flex components
- Flexibility built in for high design & development velocity
- Minimal footprint
</Grid>
```jsx live=true
<Flex
alignItems='center'
px={3}
py={4}
bg='muted'>
<Heading>Hello</Heading>
<Box mx='auto' />
<Button>Beep</Button>
<Button ml={2} variant='secondary'>Boop</Button>
</Flex>
```
<Grid width={448} py={5}>
- > “One of the best React component libs out there”
- [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)
- > “Rebass is the Bootstrap of React.”
- [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)
- > “A whopper component library built on styled-components. Responsive, systematic, scalable...the business!”
- [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)
- > “Why the hell are we now putting CSS in Javascript? I’m losing my mind with web developers trying to control everything in the world with client-side javascript. What a mess.”
- [alttab](https://news.ycombinator.com/item?id=14705579)
</Grid>
## Get Started
<Button as='a'
variant='big'
href='/getting-started'>
Read the docs
</Button>
</Container>
[styled system]: https://styled-system.com
[theme ui]: https://theme-ui.com
================================================
FILE: packages/docs/src/pages/layout/index.mdx
================================================
import { Tiles } from '@rebass/layout'
export const title = 'Layout'
# @rebass/layout
Themeable layout components built with Rebass
```sh
npm i @rebass/layout
```
## Tiles
```jsx live
<Tiles width={[96, null, 128]}>
<Image src={props.image} />
<Image src={props.image} />
<Image src={props.image} />
<Image src={props.image} />
</Tiles>
```
```jsx live
<Tiles columns={[2, null, 4]}>
<Image src={props.image} />
<Image src={props.image} />
<Image src={props.image} />
<Image src={props.image} />
</Tiles>
```
================================================
FILE: packages/docs/src/pages/link.mdx
================================================
export const title = 'Link'
# Link
Styled link component
```jsx live=true
<Link href='https://rebassjs.org'>Link</Link>
```
```jsx live=true
<Link variant='nav' href='https://rebassjs.org'>Link</Link>
```
================================================
FILE: packages/docs/src/pages/migrating.mdx
================================================
export const title = 'Migration'
# Migration Guide
## v4: What's New
- New [`sx` prop](/props/#sx-prop) for theme-based styles
- Use the `css` prop for un-themed, raw CSS values
- No additional Babel configuration required for the `sx` or `css` props
- Use the `sx` prop in MDX documents
- Built-in support for themeable component [variants](/variants)
- Fully compatible with [Theme UI][]
[theme ui]: https://theme-ui.com
## v4: Breaking Changes
- The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead.
- The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead.
- The `@rebass/grid` package has been renamed (back to) `reflexbox`
- Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight.
- Button no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`
- Image no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`
- Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles.
- Card no longer supports the following props. Use the `sx` prop instead.
`border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`,
================================================
FILE: packages/docs/src/pages/props.mdx
================================================
export const title = 'Props'
# Props
All Rebass components extend the base [Box](/box) component,
and include [Styled System][] props for ensuring your design constraints are easily accessible,
while allowing you the flexibility to create responsive designs inline in your components.
## `sx` Prop
The `sx` prop accepts a style object, with easy access to values from your theme
and the ability to quickly add responsive styles to any property using arrays as values.
If you've used [Theme UI][] or [Styled System][] before, this will probably seem familiar.
If you've used the Emotion `css` prop before, the `sx` prop works in a similar way,
but allows you to use values from your theme object.
The `sx` prop is built-in and does not require any additional configuration,
which means it will work in any React app, such as Create React App, or in [MDX][] documents.
```jsx live=true
<Box
sx={{
color: 'primary', // theme.colors.primary
fontSize: 2, // theme.fontSizes[2]
margin: 3, // theme.space[3]
}}>
Hello
</Box>
```
## Nested Selectors
Use nested objects to apply pseudoclasses and other child selectors within the `sx` prop.
```jsx live=true
<Button
sx={{
':hover': {
backgroundColor: 'tomato',
}
}}>
Beep
</Button>
```
## Responsive Styles
Mobile-first responsive styles based on breakpoints defined in your theme can be quickly applied to
any element using arrays as values in the `sx` prop, or with any of the shorthand style props below.
The first value in the array will apply to all screen widths, and each value after will be applied from that breakpoint and up.
Define breakpoints in your theme using an array of widths.
```js
// example theme
export default {
breakpoints: [ '40em', '52em', '64em' ],
}
```
For any individual CSS property, use an array as a value to quickly apply mobile-first responsive styles for that single property.
```jsx
<Box
sx={{
margin: [ 0, 1, 2 ],
}}
/>
```
You can also use standard CSS media query syntax for one-off cases or non-mobile-first styles.
```jsx
<Box
sx={{
display: 'block',
'@media screen and (max-width: 64em)': {
display: 'none',
}
}}
/>
```
The `sx` prop uses [Styled System CSS](https://styled-system.com/css) to pick up values from your theme
and write responsive styles using the array syntax.
If you ever need to add styles that do not use values from your theme, use the `css` prop, which is available on all components, without the need for additional configuration.
## `as` Prop
The underlying HTML element rendered in any component can be overridden by the `as` prop.
```jsx
<Heading as='h1'>Hello</Heading>
```
## Styled System Props
In addition to the `sx` prop, several [Styled System][] props are provided as ergonomic shortcuts.
These props allow you to quickly modify styles on a per-element basis throughout your application.
This level of flexibility in your UI component API
makes it easy to use values from your design system's constraints
in situations that you might not have accounted for when creating your components.
Because each component is based on the same base Box component,
the props API for your entire design system can stay consistent,
making it easier to *learn once, use everywhere.*
## Colors
Use the `color` and `bg` (or `backgroundColor`) props to add styles based on the `theme.colors` scale.
```jsx live=true
<Box color='white' bg='secondary' p={3}>
Hello
</Box>
```
```jsx
// Keys reference values in the color palette object
<Text color='primary' />
// Background color can be set with the `bg` prop
<Button bg='secondary' />
// Raw CSS values that do not map to a key in `theme.colors` can be used
<Button bg='tomato' />
```
## Margin and Padding
Margin and padding can be added to any element based on the `theme.space` scale.
The margin and padding props help promote consistency in layout
without the need to add custom margin and padding declarations throughout an application.
The margin and padding props use a shorthand syntax, similar to other OOCSS approaches and many CSS libraries.
```jsx live=true
<Box
p={3}
mx={2}
my={4}
color='background'
bg='primary'>
Hello
</Box>
```
- `m`: margin
- `mt`: margin-top
- `mr`: margin-right
- `mb`: margin-bottom
- `ml`: margin-left
- `mx`: margin-left and margin-right
- `my`: margin-top and margin-bottom
- `p` : padding
- `pt`: padding-top
- `pr`: padding-right
- `pb`: padding-bottom
- `pl`: padding-left
- `px`: padding-left and padding-right
- `py`: padding-top and padding-bottom
```jsx
// Numbers reference steps on the spacing scale
// e.g. 8px
<Text m={2} />
// Numbers greater than the length of `theme.space.length` are converted to pixels
<Text my={256} />
// Negative values can be used to add negative margins
<Text mx={-2} />
// Strings can be used for other values
<Text mx='auto' />
// Arrays can be used for mobile-first responsive styles
<Text m={[ 0, 1, 2 ]} />
```
## Typography
Use the typography props to change text styles based on values defined in your theme.
```jsx live=true
<Text
fontFamily='monospace'
fontSize={[ 4, 5 ]}
fontWeight='bold'
lineHeight='body'>
Hello
</Text>
```
- `fontSize`
- `fontFamily`
- `fontWeight`
- `lineHeight`
- `letterSpacing`
- `textAlign`
- `fontStyle`
## Layout
Use layout props to change the width, height, display and other values on any element.
```jsx live=true
<Box
display='inline-block'
width={128}
height={128}
p={3}
color='white'
bg='primary'>
Hello
</Box>
```
- `width`
- `minWidth`
- `maxWidth`
- `height`
- `minHeight`
- `maxHeight`
- `display`
- `size` (width and height)
- `verticalAlign`
- `overflow`
### Width
The `width` prop includes an additional ergonomic shorthand for applying percentage-based widths.
Any fractional number from `0` to `1` will be converted to a percentage based width,
allowing you to quickly define responsive grid layouts directly in the components where you need them.
```jsx
<Box
width={[
1, // 100% width on small screens
1/2, // 50% width from the next breakpoint and up
1/3, // 33% width from the next breakpoint and up
1/4 // 25% width for all larger breakpoints
]}
/>
```
## Flexbox
Use flexbox props to apply layout styles.
```jsx live=true
<Flex>
<Box
flex='1 1 auto'
p={3}
color='white'
bg='primary'>
Beep
</Box>
<Box p={3} color='white' bg='secondary'>
Boop
</Box>
</Flex>
```
- `alignItems`
- `alignContent`
- `justifyItems`
- `justifyContent`
- `flexWrap`
- `flexDirection`
- `flex`
- `flexGrow`
- `flexShrink`
- `flexBasis`
- `justifySelf`
- `alignSelf`
- `order`
For a full reference of available props, see the [Reflexbox docs](/reflexbox#styled-system-props).
[styled system]: https://styled-system.com
[theme ui]: https://theme-ui.com
[space]: https://styled-system.com/
[color]: https://styled-system.com/
[mdx]: https://mdxjs.com
================================================
FILE: packages/docs/src/pages/recipes/avatar.mdx
================================================
export const title = 'Avatar'
# Avatar
```jsx live=true
<Image
src={props.image}
sx={{
width: 48,
height: 48,
borderRadius: 9999,
}}
/>
```
================================================
FILE: packages/docs/src/pages/recipes/background-image-card.mdx
================================================
# Background Image Card
```jsx live=true
<Box
sx={{
px: 4,
py: 6,
backgroundImage: 'url(https://source.unsplash.com/random/1024x768?sky)',
backgroundSize: 'cover',
borderRadius: 8,
color: 'white',
bg: 'gray',
}}>
<Heading
textAlign='center'
fontSize={[ 5, 6 ]}>
Background Image
</Heading>
</Box>
```
================================================
FILE: packages/docs/src/pages/recipes/badge.mdx
================================================
export const title = 'Badge'
# Badge
```jsx live=true
<Box
sx={{
display: 'inline-block',
color: 'white',
bg: 'primary',
px: 2,
py: 1,
borderRadius: 9999,
}}>
Badge
</Box>
```
================================================
FILE: packages/docs/src/pages/recipes/container.mdx
================================================
export const title = 'Container'
# Container
```jsx live=true
<Box
sx={{
maxWidth: 512,
mx: 'auto',
px: 3,
}}>
Container
</Box>
```
================================================
FILE: packages/docs/src/pages/recipes/flexbox-align.mdx
================================================
# Flexbox Align
```jsx live=true
<Flex alignItems='center'>
<Box width={1/3}>
<Heading
py={4}
fontSize={[ 5, 6 ]}
color='background'
bg='primary'>
Hello
</Heading>
</Box>
<Box width={1/3} ml='auto'>
<Text>Grid</Text>
</Box>
</Flex>
```
================================================
FILE: packages/docs/src/pages/recipes/flexbox-grid.mdx
================================================
export const title = 'Flexbox Grid'
# Flexbox Grid
```jsx live=true
<Flex mx={-2}>
<Box width={1/2} px={2}>
<Text p={1} color='background' bg='primary'>
Half
</Text>
</Box>
<Box width={1/2} px={2}>
<Text p={1} color='background' bg='primary'>
Half
</Text>
</Box>
</Flex>
```
================================================
FILE: packages/docs/src/pages/recipes/flexbox-wrap.mdx
================================================
export const title = 'Flexbox Wrap'
# Flexbox Wrap
```jsx live=true
<Flex flexWrap='wrap' mx={-2}>
<Box px={2} py={2} width={1/2}>
<Text p={1} color='background' bg='primary'>1/2</Text>
</Box>
<Box px={2} py={2} width={1/2}>
<Text p={1} color='background' bg='primary'>1/2</Text>
</Box>
<Box px={2} py={2} width={1/3}>
<Text p={1} color='background' bg='primary'>1/3</Text>
</Box>
<Box px={2} py={2} width={1/3}>
<Text p={1} color='background' bg='primary'>1/3</Text>
</Box>
<Box px={2} py={2} width={1/3}>
<Text p={1} color='background' bg='primary'>1/3</Text>
</Box>
<Box px={2} py={2} width={1/4}>
<Text p={1} color='background' bg='primary'>1/4</Text>
</Box>
<Box px={2} py={2} width={1/4}>
<Text p={1} color='background' bg='primary'>1/4</Text>
</Box>
<Box px={2} py={2} width={1/4}>
<Text p={1} color='background' bg='primary'>1/4</Text>
</Box>
<Box px={2} py={2} width={1/4}>
<Text p={1} color='background' bg='primary'>1/4</Text>
</Box>
</Flex>
```
================================================
FILE: packages/docs/src/pages/recipes/image-card.mdx
================================================
# Image Card
```jsx live=true
<Flex>
<Card width={[ 256, 320 ]} mx='auto'>
<Image src='https://source.unsplash.com/random/512x384?space' />
<Text>
Image Card
</Text>
</Card>
</Flex>
```
================================================
FILE: packages/docs/src/pages/recipes/index.mdx
================================================
import { MDXProvider } from '@mdx-js/react'
import { RecipeCard, Grid } from '../..'
import FlexboxGrid from './flexbox-grid.mdx'
import FlexboxWrap from './flexbox-wrap.mdx'
import FlexboxAlign from './flexbox-align.mdx'
import ImageCard from './image-card.mdx'
import BackgroundImageCard from './background-image-card.mdx'
import NavBar from './nav-bar.mdx'
import VideoEmbed from './video-embed.mdx'
import Container from './container.mdx'
import Avatar from './avatar.mdx'
import Badge from './badge.mdx'
import NavLink from './nav-link.mdx'
export const title = 'Recipes'
# Recipes
Quick copy-and-paste code examples using Rebass.
<MDXProvider
components={{
wrapper: RecipeCard,
}}>
<Grid>
- <FlexboxGrid href='/recipes/flexbox-grid' />
- <FlexboxWrap href='/recipes/flexbox-wrap' />
- <FlexboxAlign href='/recipes/flexbox-align' />
- <NavBar href='/recipes/nav-bar' />
- <ImageCard href='/recipes/image-card' />
- <BackgroundImageCard href='/recipes/background-image-card' />
- <VideoEmbed href='/recipes/video-embed' />
- <Container href='/recipes/container' />
- <Avatar href='/recipes/avatar' />
- <Badge href='/recipes/badge' />
- <NavLink href='/recipes/nav-link' />
</Grid>
</MDXProvider>
================================================
FILE: packages/docs/src/pages/recipes/nav-bar.mdx
================================================
# Nav Bar
```jsx live=true
<Flex
px={2}
color='white'
bg='black'
alignItems='center'>
<Text p={2} fontWeight='bold'>Rebass</Text>
<Box mx='auto' />
<Link variant='nav' href='#!'>
Profile
</Link>
</Flex>
```
================================================
FILE: packages/docs/src/pages/recipes/nav-link.mdx
================================================
export const title = 'Nav Link'
# Nav Link
```jsx live=true
<Link
sx={{
display: 'inline-block',
fontWeight: 'bold',
px: 2,
py: 1,
color: 'inherit',
}}>
Nav Link
</Link>
```
================================================
FILE: packages/docs/src/pages/recipes/video-embed.mdx
================================================
# Video Embed
```jsx live=true
<Box
sx={{
width: '100%',
height: 0,
paddingBottom: (900 / 16) + '%',
position: 'relative',
overflow: 'hidden',
'& > iframe': {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}}>
<iframe
width='560'
height='315'
src='https://www.youtube.com/embed/GNCd_ERZvZM'
frameBorder='0'
allowFullScreen
/>
</Box>
```
================================================
FILE: packages/docs/src/pages/reflexbox.mdx
================================================
import Readme from 'reflexbox/README.md'
export const title = 'Reflexbox'
<Readme />
================================================
FILE: packages/docs/src/pages/space.mdx
================================================
import Readme from '@rebass/space/README.md'
export const title = 'Space'
<Readme />
================================================
FILE: packages/docs/src/pages/text.mdx
================================================
export const title = 'Text'
# Text
Responsive typography component
```jsx live=true
<Text
fontSize={[ 3, 4, 5 ]}
fontWeight='bold'
color='primary'>
Text
</Text>
```
================================================
FILE: packages/docs/src/pages/theming.mdx
================================================
export const title = 'Theming'
# Theming
Rebass components are built with themeability in mind.
All colors, typographic styles, layout styles, and component variants can be completely customized with theming.
## ThemeProvider
To apply themes to Rebass components, add a [ThemeProvider][] component to the root of your application and pass a `theme` object as a prop.
If you're using Emotion by itself, install the `emotion-theming` package.
If you're using Rebass with [Theme UI][], use its `ThemeProvider` or the `gatsby-plugin-theme-ui` package.
```jsx
import React from 'react'
import theme from './theme'
import { ThemeProvider } from 'emotion-theming'
// or for use with Theme UI:
// import { ThemeProvider } from 'theme-ui'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
```
Rebass follows the [Theme Specification][],
which allows you to define thematic values in a more portable format.
Themes created for [Styled System][] or [Theme UI][] will work with Rebass with no additional configuration required.
This also means that themes created for use with Rebass will work in other applications that follow the same specification.
## Example
The following is an example theme, showing *some* of the design constraints that can be defined as scales,
including colors, typography, layouts, and variants.
```js
// example theme.js
export default {
breakpoints: ['40em', '52em', '64em'],
fontSizes: [
12, 14, 16, 20, 24, 32, 48, 64
],
colors: {
blue: '#07c',
lightgray: '#f6f6ff'
},
space: [
0, 4, 8, 16, 32, 64, 128, 256
],
fonts: {
body: 'system-ui, sans-serif',
heading: 'inherit',
monospace: 'Menlo, monospace',
},
fontWeights: {
body: 400,
heading: 700,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.25,
},
shadows: {
small: '0 0 4px rgba(0, 0, 0, .125)',
large: '0 0 24px rgba(0, 0, 0, .125)'
},
variants: {
},
text: {
},
buttons: {
primary: {
color: 'white',
bg: 'primary',
}
}
}
```
## Preset
To quickly get started without creating a custom theme, install the Rebass Preset package and use it in place of a custom theme.
```sh
npm i @rebass/preset
```
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import preset from '@rebass/preset'
export default props =>
<ThemeProvider theme={preset}>
{props.children}
</ThemeProvider>
```
## Demo
Edit the theme in the demo below to see how colors, space, and typographic scales affect the Button component.
```jsx live=true
<ThemeProvider
theme={{
colors: {
background: 'black',
primary: 'tomato',
},
space: [ 0, 6, 12, 24, 48 ],
fontSizes: [ 14, 16, 18, 20, 24 ],
radii: {
default: 12,
}
}}>
<Button>Beep</Button>
</ThemeProvider>
```
[theme specification]: https://github.com/system-ui/theme-specification
[ThemeProvider]: https://www.styled-components.com/docs/advanced#theming
[styled system]: https://github.com/jxnblk/styled-system
[theme ui]: https://theme-ui.com
================================================
FILE: packages/docs/src/pages/variants.mdx
================================================
export const title = 'Variants'
# Variants
All Rebass components accept a `variant` prop, which allows you to define stylistic variations in your theme and apply the styles on a per-element basis.
For example, with the following defined in the theme object:
```js
// example theme with variants
export default {
colors: {
text: 'black',
background: 'white',
primary: 'tomato',
},
shadows: {
card: '0 0 4px rgba(0, 0, 0, 0.125)',
},
variants: {
card: {
p: 2,
bg: 'background',
boxShadow: 'card',
borderRadius: 2,
},
badge: {
display: 'inline-block',
p: 1,
color: 'white',
bg: 'primary',
borderRadius: 2,
}
},
}
```
The `Box` component can use a variant style to render with preset card or badge styles.
```jsx live=true
<Box variant='card' width={256}>
Card
<Box variant='badge'>
Badge
</Box>
</Box>
```
By default, Rebass components will use style objects defined in `theme.variants`.
The `Text` and `Heading` components use a custom `theme.text` object, and `Button` uses `theme.buttons`.
Component | Theme Key | Default Variant
---|---|---
`Box` | `variants` | N/A
`Flex` | `variants` | N/A
`Text` | `text` | N/A
`Heading` | `text` | `heading`
`Link` | `variants` | `link`
`Button` | `buttons` | `primary`
`Image` | `variants` | N/A
`Card` | `variants` | `card`
Any object in your theme can be used as a variant, and the values use dot notation for deeply nested values.
```jsx
// example variant with dot notation
<Box variant='some.deeply.nested.object' />
```
================================================
FILE: packages/docs/static/_redirects
================================================
/Box /box
/Flex /flex
/Text /text
/Heading /heading
/Button /button
/Link /link
/Image /image
/Card /card
/advanced /guides
/grid /reflexbox
================================================
FILE: packages/forms/.gitignore
================================================
styled-components
dist
================================================
FILE: packages/forms/.npmignore
================================================
test
================================================
FILE: packages/forms/README.md
================================================
# @rebass/forms
Accessible and themeable form components for use with Rebass or Theme UI.
```sh
npm i @rebass/forms
```
```jsx
import React from 'react'
import { Box, Flex } from 'rebass'
import {
Label,
Input,
Select,
Textarea,
Radio,
Checkbox,
} from '@rebass/forms'
export default () =>
<Box
as='form'
onSubmit={e => e.preventDefault()}
py={3}>
<Flex mx={-2} mb={3}>
<Box width={1/2} px={2}>
<Label htmlFor='name'>Name</Label>
<Input
id='name'
name='name'
defaultValue='Jane Doe'
/>
</Box>
<Box width={1/2} px={2}>
<Label htmlFor='location'>Location</Label>
<Select
id='location'
name='location'
defaultValue='NYC'>
<option>NYC</option>
<option>DC</option>
<option>ATX</option>
<option>SF</option>
<option>LA</option>
</Select>
</Box>
</Flex>
<Flex mx={-2} flexWrap='wrap'>
<Label width={[ 1/2, 1/4 ]} p={2}>
<Radio
id='beep'
name='beep'
value='beep'
defaultChecked
/>
Beep
</Label>
<Label width={[ 1/2, 1/4 ]} p={2}>
<Radio
id='boop'
name='beep'
value='boop'
/>
Boop
</Label>
<Label width={[1/2, 1/4]} p={2}>
<Checkbox
id='remember'
name='remember'
/>
Remember Me
</Label>
<Box px={2} ml='auto'>
<Button>
Beep
</Button>
</Box>
</Flex>
</Box>
```
See https://rebassjs.org/forms for full documentation.
================================================
FILE: packages/forms/package.json
================================================
{
"name": "@rebass/forms",
"version": "4.0.6",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"scripts": {
"prepare": "rebass-bundler"
},
"dependencies": {
"reflexbox": "^4.0.6"
},
"repository": "rebassjs/rebass",
"bugs": {
"url": "https://github.com/rebassjs/rebass/issues"
},
"license": "MIT",
"publishConfig": {
"access": "public"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/forms/src/index.js
================================================
import React, { forwardRef } from 'react'
import { Box, Flex } from 'reflexbox'
import { props as systemProps } from '@styled-system/should-forward-prop'
const rebassProps = [
...systemProps,
'sx',
'variant',
]
const PRE = new RegExp(`^(${rebassProps.join('|')})$`)
const MRE = /^m[trblxy]?$/
const getProps = (test) => (props) => {
const next = {}
for (const key in props) {
if (test(key || '')) next[key] = props[key]
}
return next
}
const getSystemProps = getProps(k => PRE.test(k))
const getMarginProps = getProps(k => MRE.test(k))
const omitMarginProps = getProps(k => !MRE.test(k))
const SVG = ({ size = 24, ...props }) =>
<Box
as='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill='currentcolor'
{...props}
/>
export const Label = forwardRef((props, ref) =>
<Flex
ref={ref}
as='label'
tx='forms'
variant='label'
{...props}
__css={{
width: '100%',
}}
/>
)
export const Input = forwardRef((props, ref) =>
<Box
ref={ref}
as='input'
type='text'
tx='forms'
variant='input'
{...props}
__css={{
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 'default',
color: 'inherit',
bg: 'transparent',
}}
/>
)
const DownArrow = props =>
<SVG {...props}>
<path d="M7 10l5 5 5-5z" />
</SVG>
export const Select = forwardRef((props, ref) =>
<Flex {...getMarginProps(props)}>
<Box
ref={ref}
as='select'
tx='forms'
variant='select'
{...omitMarginProps(props)}
__css={{
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 'default',
color: 'inherit',
bg: 'transparent',
}}
/>
<DownArrow
sx={{
ml: -28,
alignSelf: 'center',
pointerEvents: 'none',
}}
/>
</Flex>
)
export const Textarea = forwardRef((props, ref) =>
<Box
ref={ref}
as='textarea'
tx='forms'
variant='textarea'
{...props}
__css={{
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 'default',
color: 'inherit',
bg: 'transparent',
}}
/>
)
const RadioChecked = props =>
<SVG {...props}>
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
</SVG>
const RadioUnchecked = props =>
<SVG {...props}>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
</SVG>
const RadioIcon = props =>
<>
<RadioChecked
{...props}
__css={{
display: 'none',
'input:checked ~ &': {
display: 'block',
}
}}
/>
<RadioUnchecked
{...props}
__css={{
display: 'block',
'input:checked ~ &': {
display: 'none',
}
}}
/>
</>
export const Radio = forwardRef(({
className,
sx,
variant = 'radio',
...props
}, ref) => (
<Box>
<Box
ref={ref}
as='input'
type='radio'
{...props}
sx={{
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden',
}}
/>
<Box
as={RadioIcon}
aria-hidden='true'
tx='forms'
variant={variant}
className={className}
sx={sx}
{...getSystemProps(props)}
__css={{
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary',
},
'input:focus ~ &': {
bg: 'highlight',
}
}}
/>
</Box>
))
const CheckboxChecked = props =>
<SVG {...props}>
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</SVG>
const CheckboxUnchecked = props =>
<SVG {...props}>
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</SVG>
const CheckboxIcon = props =>
<>
<CheckboxChecked
{...props}
__css={{
display: 'none',
'input:checked ~ &': {
display: 'block',
}
}}
/>
<CheckboxUnchecked
{...props}
__css={{
display: 'block',
'input:checked ~ &': {
display: 'none',
}
}}
/>
</>
export const Checkbox= forwardRef(({
className,
sx,
variant = 'checkbox',
...props
}, ref) =>
<Box>
<Box
ref={ref}
as='input'
type='checkbox'
{...props}
sx={{
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden',
}}
/>
<Box
as={CheckboxIcon}
aria-hidden='true'
tx='forms'
variant={variant}
className={className}
sx={sx}
{...getSystemProps(props)}
__css={{
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary',
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight',
},
}}
/>
</Box>
)
export const Slider = forwardRef(({
...props
}, ref) =>
<Box
ref={ref}
as='input'
type='range'
tx='forms'
variant='slider'
{...props}
__css={{
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary',
},
'&::-webkit-slider-thumb': {
appearance: 'none',
width: 16,
height: 16,
bg: 'currentcolor',
border: 0,
borderRadius: 9999,
variant: 'forms.slider.thumb',
},
}}
/>
)
export const Switch = forwardRef(({
checked,
...props
}, ref) =>
<Box
ref={ref}
as='button'
type='button'
role='switch'
tx='forms'
variant='switch'
aria-checked={checked}
{...props}
__css={{
appearance: 'none',
m: 0,
p: 0,
width: 40,
height: 24,
color: 'primary',
bg: 'transparent',
border: '1px solid',
borderColor: 'primary',
borderRadius: 9999,
'&[aria-checked=true]': {
bg: 'primary',
},
':focus': {
outline: 'none',
boxShadow: '0 0 0 2px'
},
}}>
<Box
aria-hidden
style={{
transform: checked ? 'translateX(16px)' : 'translateX(0)',
}}
sx={{
mt: '-1px',
ml: '-1px',
width: 24,
height: 24,
borderRadius: 9999,
border: '1px solid',
borderColor: 'primary',
bg: 'background',
transitionProperty: 'transform',
transitionTimingFunction: 'ease-out',
transitionDuration: '0.1s',
variant: 'forms.switch.thumb',
}}
/>
</Box>
)
================================================
FILE: packages/forms/test/__snapshots__/index.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Checkbox renders 1`] = `
.emotion-3 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
position: absolute;
opacity: 0;
z-index: -1;
width: 1px;
height: 1px;
overflow: hidden;
}
.emotion-1 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: none;
width: 24px;
height: 24px;
box-sizing: border-box;
margin: 0;
min-width: 0;
margin-right: 8px;
border-radius: 4px;
color: gray;
}
input:checked ~ .emotion-1 {
display: block;
}
input:checked ~ .emotion-1 {
color: primary;
}
input:focus ~ .emotion-1 {
color: primary;
background-color: highlight;
}
.emotion-2 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: block;
width: 24px;
height: 24px;
box-sizing: border-box;
margin: 0;
min-width: 0;
margin-right: 8px;
border-radius: 4px;
color: gray;
}
input:checked ~ .emotion-2 {
display: none;
}
input:checked ~ .emotion-2 {
color: primary;
}
input:focus ~ .emotion-2 {
color: primary;
background-color: highlight;
}
<div
className="emotion-3"
>
<input
className="emotion-0"
type="checkbox"
/>
<svg
aria-hidden="true"
className="emotion-1"
fill="currentcolor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
/>
</svg>
<svg
aria-hidden="true"
className="emotion-2"
fill="currentcolor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
/>
</svg>
</div>
`;
exports[`Input renders 1`] = `
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: block;
width: 100%;
padding: 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: inherit;
line-height: inherit;
border: 1px solid;
border-radius: default;
color: inherit;
background-color: transparent;
}
<input
className="emotion-0"
type="text"
/>
`;
exports[`Label renders 1`] = `
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<label
className="emotion-0"
/>
`;
exports[`Radio renders 1`] = `
.emotion-3 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
position: absolute;
opacity: 0;
z-index: -1;
width: 1px;
height: 1px;
overflow: hidden;
}
.emotion-1 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: none;
width: 24px;
height: 24px;
box-sizing: border-box;
margin: 0;
min-width: 0;
margin-right: 8px;
border-radius: 9999px;
color: gray;
}
input:checked ~ .emotion-1 {
display: block;
}
input:checked ~ .emotion-1 {
color: primary;
}
input:focus ~ .emotion-1 {
background-color: highlight;
}
.emotion-2 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: block;
width: 24px;
height: 24px;
box-sizing: border-box;
margin: 0;
min-width: 0;
margin-right: 8px;
border-radius: 9999px;
color: gray;
}
input:checked ~ .emotion-2 {
display: none;
}
input:checked ~ .emotion-2 {
color: primary;
}
input:focus ~ .emotion-2 {
background-color: highlight;
}
<div
className="emotion-3"
>
<input
className="emotion-0"
type="radio"
/>
<svg
aria-hidden="true"
className="emotion-1"
fill="currentcolor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
className="emotion-2"
fill="currentcolor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
/>
</svg>
</div>
`;
exports[`Select renders 1`] = `
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: block;
width: 100%;
padding: 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: inherit;
line-height: inherit;
border: 1px solid;
border-radius: default;
color: inherit;
background-color: transparent;
}
.emotion-2 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-1 {
box-sizing: border-box;
margin: 0;
min-width: 0;
margin-left: -28px;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
pointer-events: none;
width: 24px;
height: 24px;
}
<div
className="emotion-2"
>
<select
className="emotion-0"
/>
<svg
className="emotion-1"
fill="currentcolor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</div>
`;
exports[`Textarea renders 1`] = `
.emotion-0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: block;
width: 100%;
padding: 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: inherit;
line-height: inherit;
border: 1px solid;
border-radius: default;
color: inherit;
background-color: transparent;
}
<textarea
className="emotion-0"
/>
`;
================================================
FILE: packages/forms/test/index.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { render } from '@testing-library/react'
import { matchers } from 'jest-emotion'
import {
Label,
Input,
Select,
Textarea,
Radio,
Checkbox
} from '../src'
expect.extend(matchers)
const renderJSON = el => renderer.create(el).toJSON()
describe('Label', () => {
test('renders', () => {
const json = renderJSON(
<Label />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Label ref={ref} />
)
expect(ref.current.tagName).toBe('LABEL')
})
})
describe('Input', () => {
test('renders', () => {
const json = renderJSON(
<Input />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Input ref={ref} />
)
expect(ref.current.tagName).toBe('INPUT')
})
})
describe('Select', () => {
test('renders', () => {
const json = renderJSON(
<Select />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Select ref={ref} />
)
expect(ref.current.tagName).toBe('SELECT')
})
test('margin props are applied to the wrapping element', () => {
const json = renderJSON(
<Select mb={3} mt={2} />
)
expect(json).toHaveStyleRule('margin-top', '8px')
expect(json).toHaveStyleRule('margin-bottom', '16px')
})
})
describe('Textarea', () => {
test('renders', () => {
const json = renderJSON(
<Textarea />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Textarea ref={ref} />
)
expect(ref.current.tagName).toBe('TEXTAREA')
})
})
describe('Radio', () => {
test('renders', () => {
const json = renderJSON(
<Radio />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Radio ref={ref} />
)
expect(ref.current.tagName).toBe('INPUT')
expect(ref.current.type).toBe('radio')
})
})
describe('Checkbox', () => {
test('renders', () => {
const json = renderJSON(
<Checkbox />
)
expect(json).toMatchSnapshot()
})
test('passes ref', () => {
const ref = React.createRef(null)
render(
<Checkbox ref={ref} />
)
expect(ref.current.tagName).toBe('INPUT')
expect(ref.current.type).toBe('checkbox')
})
})
================================================
FILE: packages/layout/.gitignore
================================================
dist
styled-components
================================================
FILE: packages/layout/.npmignore
================================================
test
babel.config.js
================================================
FILE: packages/layout/README.md
================================================
@rebass/layout
https://rebassjs.org/layout
================================================
FILE: packages/layout/package.json
================================================
{
"name": "@rebass/layout",
"version": "4.0.6",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"scripts": {
"prepare": "rebass-bundler"
},
"dependencies": {
"reflexbox": "^4.0.6"
},
"repository": "rebassjs/rebass",
"license": "MIT",
"publishConfig": {
"access": "public"
}
}
================================================
FILE: packages/layout/src/index.js
================================================
import React, { forwardRef } from 'react'
import { Box } from 'reflexbox'
const px = n => typeof n === 'number' ? n + 'px' : n
const widthToColumns = width => Array.isArray(width)
? width.map(widthToColumns)
: !!width && `repeat(auto-fit, minmax(${px(width)}, 1fr))`
const countToColumns = n => Array.isArray(n)
? n.map(countToColumns)
: !!n && `repeat(${n}, 1fr)`
export const Tiles = forwardRef(({
width,
columns,
gap = 3,
...props
}, ref) => {
const gridTemplateColumns = !!width
? widthToColumns(width)
: countToColumns(columns)
return (
<Box
ref={ref}
tx='layout'
variant='tiles'
{...props}
__css={{
display: 'grid',
gridGap: gap,
gridTemplateColumns,
}}
/>
)
})
================================================
FILE: packages/preset/LICENSE.md
================================================
# The MIT License (MIT)
Copyright (c) 2015 – 2019 Brent Jackson
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
================================================
FILE: packages/preset/README.md
================================================
# @rebass/preset
Base theme preset for use with [Rebass][]
```sh
npm i @rebass/preset
```
## Usage
For general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
```
For use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.
```jsx
import { ThemeProvider } from 'theme-ui'
```
Or, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.
```js
// src/gatsby-plugin-theme-ui/index.js
import preset from '@rebass/preset'
export default {
...preset
}
```
## Customizing
The base theme object can be customized by using either `deepmerge` or `lodash.merge` to deeply merge objects.
```js
import merge from 'lodash.merge'
import preset from '@rebass/preset'
export default merge(preset, {
colors: {
// custom primary color
primary: 'tomato',
}
})
```
[MIT License](LICENSE.md)
[rebass]: https://rebassjs.org
[emotion]: https://emotion.sh
[theme ui]: https://theme-ui.com
================================================
FILE: packages/preset/package.json
================================================
{
"name": "@rebass/preset",
"version": "4.0.5",
"description": "Base theme preset for use with Rebass",
"main": "dist/index.js",
"scripts": {
"prepare": "babel src -d dist --root-mode upward",
"watch": "babel src -d dist --watch --root-mode upward"
},
"keywords": [
"react",
"react-component",
"ui",
"design-system",
"styled-system",
"styled-components",
"emotion",
"theming",
"theme-ui"
],
"author": "Brent Jackson",
"repository": "rebassjs/rebass",
"license": "MIT",
"publishConfig": {
"access": "public"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/preset/src/index.js
================================================
// default theme preset
export const preset = {
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
secondary: '#30c',
muted: '#f6f6f9',
gray: '#dddddf',
highlight: 'hsla(205, 100%, 40%, 0.125)',
},
fonts: {
body: 'system-ui, sans-serif',
heading: 'inherit',
monospace: 'Menlo, monospace',
},
fontSizes: [
12, 14, 16, 20, 24, 32, 48, 64, 96
],
fontWeights: {
body: 400,
heading: 700,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.25,
},
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
sizes: {
avatar: 48,
},
radii: {
default: 4,
circle: 99999,
},
shadows: {
card: '0 0 4px rgba(0, 0, 0, .125)',
},
// rebass variants
text: {
heading: {
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
},
display: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading',
fontSize: [ 5, 6, 7 ],
},
caps: {
textTransform: 'uppercase',
letterSpacing: '0.1em',
},
},
variants: {
avatar: {
width: 'avatar',
height: 'avatar',
borderRadius: 'circle',
},
card: {
p: 2,
bg: 'background',
boxShadow: 'card',
},
link: {
color: 'primary',
},
nav: {
fontSize: 1,
fontWeight: 'bold',
display: 'inline-block',
p: 2,
color: 'inherit',
textDecoration: 'none',
':hover,:focus,.active': {
color: 'primary',
}
},
},
buttons: {
primary: {
fontSize: 2,
fontWeight: 'bold',
color: 'background',
bg: 'primary',
borderRadius: 'default',
},
outline: {
variant: 'buttons.primary',
color: 'primary',
bg: 'transparent',
boxShadow: 'inset 0 0 2px',
},
secondary: {
variant: 'buttons.primary',
color: 'background',
bg: 'secondary',
},
},
styles: {
root: {
fontFamily: 'body',
fontWeight: 'body',
lineHeight: 'body',
},
},
}
export default preset
================================================
FILE: packages/preset/test/__snapshots__/index.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`snapshot 1`] = `
Object {
"buttons": Object {
"outline": Object {
"bg": "transparent",
"boxShadow": "inset 0 0 2px",
"color": "primary",
"variant": "buttons.primary",
},
"primary": Object {
"bg": "primary",
"borderRadius": "default",
"color": "background",
"fontSize": 2,
"fontWeight": "bold",
},
"secondary": Object {
"bg": "secondary",
"color": "background",
"variant": "buttons.primary",
},
},
"colors": Object {
"background": "#fff",
"gray": "#dddddf",
"highlight": "hsla(205, 100%, 40%, 0.125)",
"muted": "#f6f6f9",
"primary": "#07c",
"secondary": "#30c",
"text": "#000",
},
"fontSizes": Array [
12,
14,
16,
20,
24,
32,
48,
64,
96,
],
"fontWeights": Object {
"body": 400,
"bold": 700,
"heading": 700,
},
"fonts": Object {
"body": "system-ui, sans-serif",
"heading": "inherit",
"monospace": "Menlo, monospace",
},
"lineHeights": Object {
"body": 1.5,
"heading": 1.25,
},
"radii": Object {
"circle": 99999,
"default": 4,
},
"shadows": Object {
"card": "0 0 4px rgba(0, 0, 0, .125)",
},
"sizes": Object {
"avatar": 48,
},
"space": Array [
0,
4,
8,
16,
32,
64,
128,
256,
512,
],
"styles": Object {
"root": Object {
"fontFamily": "body",
"fontWeight": "body",
"lineHeight": "body",
},
},
"text": Object {
"caps": Object {
"letterSpacing": "0.1em",
"textTransform": "uppercase",
},
"display": Object {
"fontFamily": "heading",
"fontSize": Array [
5,
6,
7,
],
"fontWeight": "heading",
"lineHeight": "heading",
},
"heading": Object {
"fontFamily": "heading",
"fontWeight": "heading",
"lineHeight": "heading",
},
},
"variants": Object {
"avatar": Object {
"borderRadius": "circle",
"height": "avatar",
"width": "avatar",
},
"card": Object {
"bg": "background",
"boxShadow": "card",
"p": 2,
},
"link": Object {
"color": "primary",
},
"nav": Object {
":hover,:focus,.active": Object {
"color": "primary",
},
"color": "inherit",
"display": "inline-block",
"fontSize": 1,
"fontWeight": "bold",
"p": 2,
"textDecoration": "none",
},
},
}
`;
================================================
FILE: packages/preset/test/index.js
================================================
import preset from '../src'
test('snapshot', () => {
expect(preset).toMatchSnapshot()
})
================================================
FILE: packages/preset-material/LICENSE.md
================================================
# The MIT License (MIT)
Copyright (c) 2015 – 2019 Brent Jackson
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
================================================
FILE: packages/preset-material/README.md
================================================
# @rebass/preset-material
Material Design theme preset for use with [Rebass][]
```sh
npm i @rebass/preset-material
```
## Usage
For general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset-material'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
```
For use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.
```jsx
import { ThemeProvider } from 'theme-ui'
```
Or, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.
```js
// src/gatsby-plugin-theme-ui/index.js
import preset from '@rebass/preset-material'
export default {
...preset
}
```
[MIT License](LICENSE.md)
[rebass]: https://rebassjs.org
[emotion]: https://emotion.sh
[theme ui]: https://theme-ui.com
================================================
FILE: packages/preset-material/package.json
================================================
{
"name": "@rebass/preset-material",
"version": "4.0.5",
"description": "Material Design theme preset for use with Rebass",
"main": "dist/index.js",
"scripts": {
"prepare": "babel src -d dist --root-mode upward",
"watch": "babel src -d dist --watch --root-mode upward"
},
"keywords": [
"react",
"react-component",
"ui",
"design-system",
"styled-system",
"emotion",
"theming",
"material-design",
"theme-ui"
],
"author": "Brent Jackson",
"repository": "rebassjs/rebass",
"license": "MIT",
"publishConfig": {
"access": "public"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/preset-material/src/index.js
================================================
// material theme preset
// work-in-progress
// references
// - https://material.io/design/typography/the-type-system.html#type-scale
export const preset = {
googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,700&display=swap',
colors: {
text: '#000',
background: '#fff',
primary: '#6200ee',
secondary: '#03dac6',
muted: '#f6f6f6',
gray: '#555',
},
fonts: {
body: 'Roboto, sans-serif',
heading: 'inherit',
monospace: '"Roboto Mono", monospace',
},
fontSizes: [
10, 12, 14, 16, 20, 24, 34, 48, 60, 96
],
fontWeights: {
body: 400,
heading: 400,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.2,
},
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
sizes: {
icon: 24,
avatar: 48,
},
radii: {
default: 4,
circle: 99999,
},
shadows: {
// source: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
1: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
2: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
3: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
4: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
5: '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
},
// rebass variants
text: {
heading: {
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
},
display: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading',
fontSize: [ 6, 7 ],
},
caps: {
textTransform: 'uppercase',
letterSpacing: '0.1em',
},
},
variants: {
avatar: {
width: 'avatar',
height: 'avatar',
borderRadius: 'circle',
},
card: {
p: 2,
bg: 'background',
boxShadow: 2,
},
link: {
color: 'primary',
},
nav: {
variant: 'text.caps',
fontSize: 1,
fontWeight: 'bold',
display: 'inline-block',
p: 2,
color: 'inherit',
textDecoration: 'none',
':hover,:focus,.active': {
color: 'primary',
}
},
},
buttons: {
primary: {
variant: 'text.caps',
fontSize: 2,
fontWeight: 'body',
color: 'background',
bg: 'primary',
borderRadius: 'default',
},
outline: {
variant: 'buttons.primary',
color: 'primary',
bg: 'transparent',
boxShadow: 'inset 0 0 2px',
},
secondary: {
variant: 'buttons.primary',
color: 'background',
bg: 'secondary',
},
},
styles: {
root: {
fontFamily: 'body',
fontWeight: 'body',
lineHeight: 'body',
},
},
}
export default preset
================================================
FILE: packages/preset-material/test/__snapshots__/index.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`snapshot 1`] = `
Object {
"buttons": Object {
"outline": Object {
"bg": "transparent",
"boxShadow": "inset 0 0 2px",
"color": "primary",
"variant": "buttons.primary",
},
"primary": Object {
"bg": "primary",
"borderRadius": "default",
"color": "background",
"fontSize": 2,
"fontWeight": "body",
"variant": "text.caps",
},
"secondary": Object {
"bg": "secondary",
"color": "background",
"variant": "buttons.primary",
},
},
"colors": Object {
"background": "#fff",
"gray": "#555",
"muted": "#f6f6f6",
"primary": "#6200ee",
"secondary": "#03dac6",
"text": "#000",
},
"fontSizes": Array [
10,
12,
14,
16,
20,
24,
34,
48,
60,
96,
],
"fontWeights": Object {
"body": 400,
"bold": 700,
"heading": 400,
},
"fonts": Object {
"body": "Roboto, sans-serif",
"heading": "inherit",
"monospace": "\\"Roboto Mono\\", monospace",
},
"googleFonts": "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,700&display=swap",
"lineHeights": Object {
"body": 1.5,
"heading": 1.2,
},
"radii": Object {
"circle": 99999,
"default": 4,
},
"shadows": Object {
"1": "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
"2": "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
"3": "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
"4": "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
"5": "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
},
"sizes": Object {
"avatar": 48,
"icon": 24,
},
"space": Array [
0,
4,
8,
16,
32,
64,
128,
256,
512,
],
"styles": Object {
"root": Object {
"fontFamily": "body",
"fontWeight": "body",
"lineHeight": "body",
},
},
"text": Object {
"caps": Object {
"letterSpacing": "0.1em",
"textTransform": "uppercase",
},
"display": Object {
"fontFamily": "heading",
"fontSize": Array [
6,
7,
],
"fontWeight": "heading",
"lineHeight": "heading",
},
"heading": Object {
"fontFamily": "heading",
"fontWeight": "heading",
"lineHeight": "heading",
},
},
"variants": Object {
"avatar": Object {
"borderRadius": "circle",
"height": "avatar",
"width": "avatar",
},
"card": Object {
"bg": "background",
"boxShadow": 2,
"p": 2,
},
"link": Object {
"color": "primary",
},
"nav": Object {
":hover,:focus,.active": Object {
"color": "primary",
},
"color": "inherit",
"display": "inline-block",
"fontSize": 1,
"fontWeight": "bold",
"p": 2,
"textDecoration": "none",
"variant": "text.caps",
},
},
}
`;
================================================
FILE: packages/preset-material/test/index.js
================================================
import preset from '../src'
test('snapshot', () => {
expect(preset).toMatchSnapshot()
})
================================================
FILE: packages/rebass/.gitignore
================================================
styled-components
dist
================================================
FILE: packages/rebass/.npmignore
================================================
test
================================================
FILE: packages/rebass/README.md
================================================
<img src='https://rebassjs.org/logo.svg' width='128' height='128' />
# Rebass
React primitive UI components built with [Styled System][].
https://rebassjs.org
[![Build Status][badge]][travis]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license-badge]](LICENSE.md)
[badge]: https://flat.badgen.net/travis/rebassjs/rebass/master
[travis]: https://travis-ci.org/rebassjs/rebass
[coverage-badge]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass
[coverage]: https://codecov.io/github/rebassjs/rebass
[downloads-badge]: https://flat.badgen.net/npm/dw/rebass
[version-badge]: https://flat.badgen.net/npm/v/rebass
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/rebass
```sh
npm i rebass
```
## Getting Started
```jsx
import React from 'react'
import { Box, Heading, Button } from 'rebass'
export default props =>
<Box>
<Heading>Hello</Heading>
<Button>Rebass</Button>
</Box>
```
## Features
- Start your design system without boiling the ocean
- Build consistent UI with design constraints and user-defined scales
- Best-in-class developer ergonomics with [Styled System][] props
- First-class support for theming &
fully compatible with [Theme UI][]
- Quick, mobile-first responsive styles with array-based syntax
- Flexbox layout with the Box and Flex components
- Flexibility built in for high design & development velocity
- Minimal footprint at about 4KB
[reflexbox]: https://rebassjs.org/reflexbox
> "One of the best React component libs out there"
>
> – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)
> "Rebass is the Bootstrap of React."
>
> – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)
> "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
>
> – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)
## Principles
Rebass is intended to be:
- **Minimal**
- **Useful**
- **Unopinionated**
- **Flexible**
- **Consistent**
- **Extensible**
- **Themeable**
> Do one thing, and do it well
>
> – [Unix philosophy](https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well)
See [Patterns for Style Composition in React](http://jxnblk.com/writing/patterns-for-style-composition-in-react/)
for more on some of the thought behind Rebass.
## Documentation
- [Docs](https://rebassjs.org)
- [Getting Started](https://rebassjs.org/getting-started)
- [Props](https://rebassjs.org/props)
- [Extending](https://rebassjs.org/extending)
- [Theming](https://rebassjs.org/theming)
- [Reflexbox](https://rebassjs.org/reflexbox)
- [Text](https://rebassjs.org/Text)
- [Heading](https://rebassjs.org/Heading)
- [Button](https://rebassjs.org/Button)
- [Link](https://rebassjs.org/Link)
- [Image](https://rebassjs.org/Image)
- [Card](https://rebassjs.org/Card)
## CodeSandbox
Try it out:
https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox
### Related
- [Styled System][]
- [Theme UI][]
- [Emotion][]
- [Styled Components][]
[styled system]: https://styled-system.com
[styled components]: https://github.com/styled-components/styled-components
[emotion]: https://github.com/emotion-js/emotion
[theme ui]: https://theme-ui.com
### Upgrading from v3
See the [Migration Guide](https://rebassjs.org/migrating/).
#### Previous Versions
- [v3.2.2](https://github.com/rebassjs/rebass/tree/v3.2.2) – [v3 Docs](https://rebass-v3.now.sh)
- [v2.3.2](https://github.com/rebassjs/rebass/tree/v2) – [Docs for Rebass v2](https://rebass-v2.now.sh)
- [v1.0.7](https://github.com/rebassjs/rebass/tree/v1.0.7)
---
[Contributing](CONTRIBUTING.md) | [MIT License](LICENSE.md)
================================================
FILE: packages/rebass/package.json
================================================
{
"name": "rebass",
"version": "4.0.7",
"description": "React primitive UI components built with Styled System",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"scripts": {
"prepare": "rebass-bundler"
},
"keywords": [
"components",
"react",
"react-component",
"ui",
"design-system",
"styled-system",
"styled-components",
"emotion",
"theming",
"presentational",
"stateless",
"functional"
],
"author": "Brent Jackson",
"license": "MIT",
"dependencies": {
"reflexbox": "^4.0.6"
},
"repository": "rebassjs/rebass",
"bugs": {
"url": "https://github.com/rebassjs/rebass/issues"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/rebass/src/index.js
================================================
import React, { forwardRef } from 'react'
import { Box, Flex } from 'reflexbox'
export { Box, Flex }
export const Text = forwardRef((props, ref) =>
<Box
ref={ref}
tx='text'
{...props}
/>
)
export const Heading = forwardRef((props, ref) =>
<Box
ref={ref}
as='h2'
tx='text'
variant='heading'
{...props}
__css={{
fontSize: 4,
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading',
}}
/>
)
export const Link = forwardRef((props, ref) =>
<Box
ref={ref}
as='a'
variant='link'
{...props}
/>
)
export const Button = forwardRef((props, ref) =>
<Box
ref={ref}
as='button'
tx='buttons'
variant='primary'
{...props}
__css={{
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4,
}}
/>
)
export const Image = forwardRef((props, ref) =>
<Box
ref={ref}
as='img'
{...props}
__css={{
maxWidth: '100%',
height: 'auto',
}}
/>
)
export const Card = forwardRef((props, ref) =>
<Box
ref={ref}
variant='card'
{...props}
/>
)
================================================
FILE: packages/rebass/test/index.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { matchers } from 'jest-emotion'
import {
Text,
Heading,
Button,
Link,
Image,
Card,
} from '../src'
expect.extend(matchers)
const render = el => renderer.create(el).toJSON()
describe('Text', () => {
test('renders', () => {
const json = render(
<Text textAlign='center' fontWeight='bold' fontStyle='italic' />
)
expect(json.type).toBe('div')
expect(json).toHaveStyleRule('text-align', 'center')
expect(json).toHaveStyleRule('font-weight', 'bold')
expect(json).toHaveStyleRule('font-style', 'italic')
})
test('renders with text variants', () => {
const json = render(
<Text
theme={{
text: {
caps: {
textTransform: 'uppercase',
letterSpacing: '0.2em',
}
}
}}
variant='caps'
/>
)
expect(json).toHaveStyleRule('text-transform', 'uppercase')
expect(json).toHaveStyleRule('letter-spacing', '0.2em')
})
})
describe('Heading', () => {
test('renders', () => {
const json = render(
<Heading />
)
expect(json.type).toBe('h2')
expect(json).toHaveStyleRule('font-size', '24px')
expect(json).toHaveStyleRule('font-weight', 'heading')
})
test('renders with text variants', () => {
const json = render(
<Heading
theme={{
text: {
display: {
fontSize: 64,
fontWeight: 900,
}
}
}}
variant='display'
/>
)
expect(json).toHaveStyleRule('font-size', '64px')
expect(json).toHaveStyleRule('font-weight', '900')
})
})
describe('Button', () => {
test('renders', () => {
const json = render(
<Button />
)
expect(json.type).toBe('button')
expect(json).toHaveStyleRule('color', 'white')
expect(json).toHaveStyleRule('background-color', 'primary')
})
test('renders as <a>', () => {
const json = render(
<Button as='a' />
)
expect(json.type).toBe('a')
})
})
describe('Link', () => {
test('renders', () => {
const json = render(
<Link />
)
expect(json.type).toBe('a')
})
test('renders with theme', () => {
const json = render(
<Link
theme={{
variants: {
link: {
color: 'primary',
}
}
}}
/>
)
expect(json).toHaveStyleRule('color', 'primary')
})
})
describe('Image', () => {
test('renders', () => {
const json = render(
<Image />
)
expect(json.type).toBe('img')
expect(json).toHaveStyleRule('max-width', '100%')
})
})
describe('Card', () => {
test('renders', () => {
const json = render(
<Card
p={3}
bg='tomato'
sx={{
borderRadius: 8,
boxShadow: '0 0 48px tomato',
}}
/>
)
expect(json.type).toBe('div')
expect(json).toHaveStyleRule('padding', '16px')
expect(json).toHaveStyleRule('background-color', 'tomato')
expect(json).toHaveStyleRule('border-radius', '8px')
expect(json).toHaveStyleRule('box-shadow', '0 0 48px tomato')
})
test('renders with default variant', () => {
const json = render(
<Card
theme={{
variants: {
card: {
p: 3,
bg: 'tomato',
borderRadius: 4,
}
}
}}
/>
)
expect(json).toHaveStyleRule('padding', '16px')
expect(json).toHaveStyleRule('background-color', 'tomato')
expect(json).toHaveStyleRule('border-radius', '4px')
})
})
================================================
FILE: packages/reflexbox/.gitignore
================================================
dist
styled-components
================================================
FILE: packages/reflexbox/.npmignore
================================================
test
babel.config.js
================================================
FILE: packages/reflexbox/LICENSE.md
================================================
# The MIT License (MIT)
Copyright (c) 2015 – 2019 Brent Jackson
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
================================================
FILE: packages/reflexbox/README.md
================================================
# Reflexbox
📦 Ergonomic, responsive React layout and grid system.
The original *Box* component™ since 2015
[![Build Status][badge]][travis]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license-badge]](LICENSE.md)
[](https://system-ui.com/theme)
[badge]: https://flat.badgen.net/travis/rebassjs/rebass/master
[travis]: https://travis-ci.org/rebassjs/rebass
[downloads-badge]: https://flat.badgen.net/npm/dw/reflexbox
[version-badge]: https://flat.badgen.net/npm/v/reflexbox
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/reflexbox
- Primitive styled components for all your layout needs
- Customize styles inline with the `sx` prop
- Ergonomic responsive array-based values
- Support for component variants
- [Styled System][] props
- Themeable and compatible with the [Theme Specification][]
- Built with [Styled System][]
- Works with [Theme UI][]
- Built with Emotion, with support for Styled Components
## Getting Started
```sh
npm i reflexbox
```
```jsx
import React from 'react'
import { Flex, Box } from 'reflexbox'
export default props =>
<Flex flexWrap='wrap'>
<Box
width={[ 1, 1/2 ]}
p={3}>
Reflex
</Box>
<Box
width={[ 1, 1/2 ]}
p={3}>
Box
</Box>
</Flex>
```
### `sx` Prop
The `Box` and `Flex` components both accept a `sx` prop that works with no additional setup required.
The `sx` prop is similar to Emotion's `css` prop, but allows you to use values derived from the theme object.
Reflexbox follows the [Theme Specification][], which means that any theme created for use with [Theme UI][], [Styled System][], or other similar libraries will work out-of-the-box.
This allows you to share design constraints for typography, color, and layout throughout your application using a theming context.
```jsx
<Box
sx={{
p: 4,
color: 'primary',
}}
/>
```
Note: to opt-out of theme-based styles, use the `css` prop instead, which will not transform values.
## Theming
Because Reflexbox follows the [Theme Specification][], all themes built for use with [Styled System][], [Theme UI][], or other related libraries are compatible with Reflexbox.
To add a theme to an application, import the `ThemeProvider` component from `emotion-theming` and pass a custom theme object in.
```sh
npm i emotion-theming
```
```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { Flex, Box } from 'reflexbox'
const theme = {
breakpoints: [
'40em', '52em', '64em',
],
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
},
space: [
0, 4, 8, 16, 32, 64, 128, 256,
],
}
export default props =>
<ThemeProvider theme={theme}>
<Box
sx={{
p: 4,
bg: 'primary',
}}>
Hello
</Box>
</ThemeProvider>
```
For use with [Theme UI][], use `gatsby-plugin-theme-ui` or import the Theme UI `ThemeProvider` instead.
```js
import { ThemeProvider } from 'theme-ui'
```
## Variants
Reflexbox components also accept a `variant` prop, which allows you to define commonly used styles,
such as cards, badges, and CSS grid layouts, in your theme object for reuse.
Add a `variants` object to your theme and include any variants as style objects. These styles can reference other values in your theme such as colors, typographic styles, and more.
```js
// example theme
export default {
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
},
radii: {
default: 4,
},
shadows: {
card: '0 0 4px rgba(0, 0, 0, .125)',
},
variants: {
card: {
p: 3,
borderRadius: 'default',
bg: 'white',
boxShadow: 'card',
},
badge: {
color: 'white',
bg: 'primary',
p: 1,
borderRadius: 'default',
},
},
}
```
To apply a variant to your component, pass the name to the `variant` prop.
```jsx
<Box variant='card'>Card</Box>
<Box variant='badge'>Badge</Box>
```
## Responsive Styles
Use array values to quickly and ergonomically add mobile-first responsive styles to specific properties.
This works on all style props and the `sx` prop.
See the [Styled System][] docs for more.
```jsx
// 100% width at the smallest viewport width
// 50% width at the next breakpoint
// 25% width at the next breakpoint
<Box width={[ '100%', '50%', '25%' ]} />
```
You can customize the widths used for each breakpoint by defining a `theme.breakpoints` array in your theme.
## Styled System Props
Reflexbox conforms to the [Theme Specification][] and includes many common [Styled System][] props.
The `Box` and `Flex` components accept the following props:
### Space Props
Prop | Theme Key
---|---
`margin`, `m` | `space`
`marginTop`, `mt` | `space`
`marginRight`, `mr` | `space`
`marginBottom`, `mb` | `space`
`marginLeft`, `ml` | `space`
`marginX`, `mx` | `space`
`marginY`, `my` | `space`
`padding`, `p` | `space`
`paddingTop`, `pt` | `space`
`paddingRight`, `pr` | `space`
`paddingBottom`, `pb` | `space`
`paddingLeft`, `pl` | `space`
`paddingX`, `px` | `space`
`paddingY`, `py` | `space`
### Layout Props
Prop | Theme Key
---|---
`width` | `sizes`
`height` | `sizes`
`minWidth` | `sizes`
`maxWidth` | `sizes`
`minHeight` | `sizes`
`maxHeight` | `sizes`
### Typography Props
Prop | Theme Key
---|---
`fontFamily` | `fonts`
`fontSize` | `fontSizes`
`fontWeight` | `fontWeights`
`lineHeight` | `lineHeights`
`letterSpacing` | `letterSpacings`
`fontStyle` | N/A
`textAlign` | N/A
### Color Props
Prop | Theme Key
---|---
`color` | `colors`
`backgroundColor`, `bg` | `colors`
`opacity` | N/A
### Flexbox Props
Prop | Theme Key
---|---
`alignItems` | N/A
`alignContent` | N/A
`justifyItems` | N/A
`justifyContent` | N/A
`flexWrap` | N/A
`flexDirection` | N/A
`flex` | N/A
`flexGrow` | N/A
`flexShrink` | N/A
`flexBasis` | N/A
`justifySelf` | N/A
`alignSelf` | N/A
`order` | N/A
## Styled Components
To use Reflexbox with Styled Components, import components from `reflexbox/styled-components`.
```js
import { Flex, Box } from 'reflexbox/styled-components'
```
## About
This library is the result of consolidating APIs and ergonomics from the original Reflexbox library, Grid Styled, and Rebass Grid.
Reflexbox originally appeared with the original version of Rebass in 2015.
[MIT License](LICENSE.md)
[theme specification]: https://github.com/system-ui/theme-specification
[styled system]: https://styled-system.com
[theme ui]: https://theme-ui.com
[emotion]: https://emotion.sh
[styled components]: https://styled-components.com
================================================
FILE: packages/reflexbox/babel.config.js
================================================
module.exports = {
presets: [ '@babel/preset-env' ],
env: {
styled: {
plugins: [
[
'transform-rename-import', {
original: '@emotion/styled',
replacement: 'styled-components',
}
]
]
}
}
}
================================================
FILE: packages/reflexbox/package.json
================================================
{
"name": "reflexbox",
"version": "4.0.6",
"description": "Responsive React grid system built with Styled System, with support for Emotion and Styled Components",
"main": "dist/index.js",
"keywords": [
"reflexbox",
"flexbox",
"grid-styled",
"rebass",
"rebass-grid",
"layout",
"emotion",
"css",
"style"
],
"scripts": {
"prepare": "babel src -d dist && yarn styled-components",
"styled-components": "NODE_ENV=styled babel src -d styled-components"
},
"dependencies": {
"@emotion/core": "^10.0.0",
"@emotion/styled": "^10.0.0",
"@styled-system/css": "^5.0.0",
"@styled-system/should-forward-prop": "^5.0.0",
"styled-system": "^5.0.0"
},
"peerDependencies": {
"react": "^16.8.6"
},
"author": "Brent Jackson",
"license": "MIT",
"repository": "rebassjs/rebass",
"devDependencies": {
"babel-plugin-transform-rename-import": "^2.3.0"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/reflexbox/src/index.js
================================================
import React from 'react'
import styled from '@emotion/styled'
import {
compose,
space,
layout,
typography,
color,
flexbox,
} from 'styled-system'
import css, { get } from '@styled-system/css'
import shouldForwardProp from '@styled-system/should-forward-prop'
const sx = props => css(props.sx)(props.theme)
const base = props => css(props.__css)(props.theme)
const variant = ({
theme,
variant,
tx = 'variants',
}) =>
css(
get(theme, tx + '.' + variant,
get(theme, variant)
)
)(theme)
export const Box = styled('div', {
shouldForwardProp
})({
boxSizing: 'border-box',
margin: 0,
minWidth: 0,
},
base,
variant,
sx,
props => props.css,
compose(
space,
layout,
typography,
color,
flexbox,
),
)
export const Flex = styled(Box)({
display: 'flex'
})
================================================
FILE: packages/reflexbox/test/index.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { matchers } from 'jest-emotion'
import {
Box,
Flex,
} from '../src'
expect.extend(matchers)
const render = el => renderer.create(el).toJSON()
describe('Box', () => {
test('renders', () => {
const json = render(
<Box />
)
expect(json.type).toBe('div')
})
test('renders with as prop', () => {
const json = render(
<Box as='header' />
)
expect(json.type).toBe('header')
})
test('renders with style props', () => {
const json = render(
<Box width={1} />
)
expect(json).toHaveStyleRule('width', '100%')
})
test('renders with layout props', () => {
const json = render(
<Box
display='inline-block'
height={256}
maxWidth={768}
/>
)
expect(json).toHaveStyleRule('display', 'inline-block')
expect(json).toHaveStyleRule('height', '256px')
expect(json).toHaveStyleRule('max-width', '768px')
})
test('renders with color props', () => {
const json = render(
<Box
color='tomato'
bg='black'
/>
)
expect(json).toHaveStyleRule('color', 'tomato')
expect(json).toHaveStyleRule('background-color', 'black')
})
test('renders with typography props', () => {
const json = render(
<Box
fontSize={3}
lineHeight={1.5}
fontWeight='bold'
letterSpacing='0.2em'
/>
)
expect(json).toHaveStyleRule('font-size', '20px')
expect(json).toHaveStyleRule('line-height', '1.5')
expect(json).toHaveStyleRule('font-weight', 'bold')
expect(json).toHaveStyleRule('letter-spacing', '0.2em')
})
test('renders with flexbox props', () => {
const json = render(
<Box
flex='1 1 auto'
alignSelf='flex-start'
/>
)
expect(json).toHaveStyleRule('flex', '1 1 auto')
expect(json).toHaveStyleRule('align-self', 'flex-start')
})
test('renders with box-sizing', () => {
const json = render(
<Box />
)
expect(json).toHaveStyleRule('box-sizing', 'border-box')
})
test('renders with sx prop', () => {
const json = render(
<Box
sx={{
borderRadius: 2,
border: '1px solid cyan',
}}
/>
)
expect(json).toHaveStyleRule('border-radius', '2px')
expect(json).toHaveStyleRule('border', '1px solid cyan')
})
test('renders with css prop', () => {
const json = render(
<Box
css={{
margin: 4,
padding: 16,
color: 'tomato',
}}
/>
)
expect(json).toHaveStyleRule('margin', '4px')
expect(json).toHaveStyleRule('padding', '16px')
expect(json).toHaveStyleRule('color', 'tomato')
})
test('removes style props', () => {
const json = render(
<Box
color='blue'
fontSize={2}
width={1}
/>
)
expect(Object.keys(json.props)).toEqual([
'className'
])
})
test('renders with variants', () => {
const json = render(
<Box
theme={{
variants: {
card: {
p: 4,
border: '1px solid tomato',
borderRadius: 2,
}
}
}}
variant='card'
/>
)
expect(json).toHaveStyleRule('padding', '32px')
expect(json).toHaveStyleRule('border', '1px solid tomato')
expect(json).toHaveStyleRule('border-radius', '2px')
})
test('renders with keyed variants', () => {
const json = render(
<Box
theme={{
buttons: {
primary: {
color: 'white',
bg: 'tomato',
}
}
}}
tx='buttons'
variant='primary'
/>
)
expect(json).toHaveStyleRule('color', 'white')
expect(json).toHaveStyleRule('background-color', 'tomato')
})
})
describe('Flex', () => {
test('renders with display flex', () => {
const json = render(
<Flex />
)
expect(json).toHaveStyleRule('display', 'flex')
})
test('renders with Box props', () => {
const json = render(
<Flex color='tomato' />
)
expect(json).toHaveStyleRule('color', 'tomato')
})
test('as prop does not break Box props', () => {
const json = render(
<Flex
as='footer'
width={1/2}
fontSize={3}
color='tomato'
/>
)
expect(json.type).toBe('footer')
expect(json).toHaveStyleRule('width', '50%')
expect(json).toHaveStyleRule('font-size', '20px')
expect(json).toHaveStyleRule('color', 'tomato')
})
})
================================================
FILE: packages/space/README.md
================================================
# @rebass/space
React component for applying responsive margin and padding to child elements without a wrapping HTML container.
Built with [Styled System][].
```sh
npm i @rebass/space
```
```js
import React from 'react'
import Space from '@rebass/space'
// Apply margin to child components without a wrapping <div>
const App = props => (
<Space mx={3} my={[ 2, 3 ]}>
<h1>Hello</h1>
<h2>Hi</h2>
<button>Beep</button>
</Space>
)
```
## Props
The Space component uses [Styled System's][styled system] `space` utility to add margin and padding props.
Prop | Description | Type
---|---|---
`m` | margin | number, string, or array
`mt` | margin-top | number, string, or array
`mr` | margin-right | number, string, or array
`mb` | margin-bottom | number, string, or array
`ml` | margin-left | number, string, or array
`mx` | margin x-axis (left and right) | number, string, or array
`my` | margin y-axis (top and bottom) | number, string, or array
`p` | padding | number, string, or array
`pt` | padding-top | number, string, or array
`pr` | padding-right | number, string, or array
`pb` | padding-bottom | number, string, or array
`pl` | padding-left | number, string, or array
`px` | padding x-axis (left and right) | number, string, or array
`py` | padding y-axis (top and bottom) | number, string, or array
MIT License
[styled system]: https://styled-system.com
================================================
FILE: packages/space/package.json
================================================
{
"name": "@rebass/space",
"version": "4.0.5",
"description": "React component for applying responsive margin and padding to child elements without a wrapping HTML container. Built with Styled System.",
"main": "dist/index.js",
"scripts": {
"prepare": "babel src -d dist --root-mode upward"
},
"keywords": [
"rebass",
"styled-system",
"style",
"css",
"layout",
"margin",
"padding"
],
"author": "Brent Jackson",
"license": "MIT",
"repository": "rebassjs/rebass",
"dependencies": {
"@emotion/core": "^10.0.0",
"@emotion/styled": "^10.0.0",
"styled-system": ">=5.0.0"
},
"gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c"
}
================================================
FILE: packages/space/src/index.js
================================================
import React from 'react'
import styled from '@emotion/styled'
import { space } from 'styled-system'
const classnames = (...args) => args.join(' ')
const getClassName = el => (el.props && el.props.className) || ''
export const StyledChildren = ({
className,
children,
...props
}) => {
const styledChildren = React.Children.toArray(children)
.map(child => React.cloneElement(child, {
className: classnames(getClassName(child), className)
}))
return (
<>
{styledChildren}
</>
)
}
const Space = styled(StyledChildren)(space)
export default Space
================================================
FILE: packages/space/test/__snapshots__/index.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders 1`] = `null`;
exports[`renders children 1`] = `
Array [
<div
className=" css-0"
>
Hello
</div>,
<h2
className=" css-0"
>
hi
</h2>,
]
`;
================================================
FILE: packages/space/test/index.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import Space from '../src'
const render = el => renderer.create(el).toJSON()
test('renders', () => {
const json = render(<Space />)
expect(json).toMatchSnapshot()
})
test('renders children', () => {
const json = render(
<Space>
<div>Hello</div>
<h2>hi</h2>
</Space>
)
expect(json).toMatchSnapshot()
})
test('adds classNames to children', () => {
const json = render(
<Space mx={2}>
<div>Hello</div>
<h2>hi</h2>
</Space>
)
const { className } = json[0].props
expect(json[0].props.className.length).toBeGreaterThan(0)
expect(json[1].props.className).toBe(className)
})
test('merges with existing child classNames', () => {
const json = render(
<Space mx={2}>
<div className='beep'>Hello</div>
<h2>hi</h2>
</Space>
)
const { className } = json[0].props
expect(className).toMatch(/^beep\s/)
})
gitextract_a45pl85k/
├── .circleci/
│ └── config.yml
├── .eslintignore
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── babel.config.js
├── examples/
│ ├── sandbox/
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ └── styled-components/
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── lerna.json
├── package.json
└── packages/
├── bundler/
│ ├── index.js
│ └── package.json
├── docs/
│ ├── .eslintrc.js
│ ├── gatsby-browser.js
│ ├── gatsby-config.js
│ ├── gatsby-ssr.js
│ ├── package.json
│ ├── src/
│ │ ├── components/
│ │ │ ├── blocks.js
│ │ │ ├── code.js
│ │ │ ├── demo-provider.js
│ │ │ ├── edit-link.js
│ │ │ ├── footer.js
│ │ │ ├── head.js
│ │ │ ├── header.js
│ │ │ ├── icon.js
│ │ │ ├── layout.js
│ │ │ ├── logo.js
│ │ │ ├── nav.mdx
│ │ │ ├── note.js
│ │ │ ├── recipe-card.js
│ │ │ ├── skip-link.js
│ │ │ ├── twitter-card.js
│ │ │ └── wrapper.js
│ │ ├── gatsby-plugin-theme-ui/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── pages/
│ │ ├── 404.mdx
│ │ ├── box.mdx
│ │ ├── button.mdx
│ │ ├── card.mdx
│ │ ├── demo.mdx
│ │ ├── extending.mdx
│ │ ├── flex.mdx
│ │ ├── forms/
│ │ │ ├── checkbox.mdx
│ │ │ ├── index.mdx
│ │ │ ├── input.mdx
│ │ │ ├── label.mdx
│ │ │ ├── radio.mdx
│ │ │ ├── select.mdx
│ │ │ ├── slider.mdx
│ │ │ ├── switch.mdx
│ │ │ └── textarea.mdx
│ │ ├── getting-started.mdx
│ │ ├── guides/
│ │ │ ├── css-grid.mdx
│ │ │ ├── index.mdx
│ │ │ ├── mdx.mdx
│ │ │ ├── server-side-rendering.mdx
│ │ │ ├── styled-components.mdx
│ │ │ ├── theme-ui.mdx
│ │ │ └── using-rebass-without-context.mdx
│ │ ├── heading.mdx
│ │ ├── image.mdx
│ │ ├── index.mdx
│ │ ├── layout/
│ │ │ └── index.mdx
│ │ ├── link.mdx
│ │ ├── migrating.mdx
│ │ ├── props.mdx
│ │ ├── recipes/
│ │ │ ├── avatar.mdx
│ │ │ ├── background-image-card.mdx
│ │ │ ├── badge.mdx
│ │ │ ├── container.mdx
│ │ │ ├── flexbox-align.mdx
│ │ │ ├── flexbox-grid.mdx
│ │ │ ├── flexbox-wrap.mdx
│ │ │ ├── image-card.mdx
│ │ │ ├── index.mdx
│ │ │ ├── nav-bar.mdx
│ │ │ ├── nav-link.mdx
│ │ │ └── video-embed.mdx
│ │ ├── reflexbox.mdx
│ │ ├── space.mdx
│ │ ├── text.mdx
│ │ ├── theming.mdx
│ │ └── variants.mdx
│ └── static/
│ └── _redirects
├── forms/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── layout/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── preset/
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── preset-material/
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ ├── __snapshots__/
│ │ └── index.js.snap
│ └── index.js
├── rebass/
│ ├── .gitignore
│ ├── .npmignore
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ └── index.js
├── reflexbox/
│ ├── .gitignore
│ ├── .npmignore
│ ├── LICENSE.md
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── test/
│ └── index.js
└── space/
├── README.md
├── package.json
├── src/
│ └── index.js
└── test/
├── __snapshots__/
│ └── index.js.snap
└── index.js
SYMBOL INDEX (2 symbols across 1 files)
FILE: packages/forms/src/index.js
constant PRE (line 11) | const PRE = new RegExp(`^(${rebassProps.join('|')})$`)
constant MRE (line 12) | const MRE = /^m[trblxy]?$/
Condensed preview — 136 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (171K chars).
[
{
"path": ".circleci/config.yml",
"chars": 967,
"preview": "# Javascript Node CircleCI 2.0 configuration file\n#\n# Check https://circleci.com/docs/2.0/language-javascript/ for more "
},
{
"path": ".eslintignore",
"chars": 54,
"preview": "node_modules\ndist\nbuild\n.next\nartifacts\n.cache\npublic\n"
},
{
"path": ".gitignore",
"chars": 41,
"preview": "node_modules\ndist\ncoverage\n.cache\npublic\n"
},
{
"path": ".npmignore",
"chars": 25,
"preview": "src\ntest\nbabel.config.js\n"
},
{
"path": ".travis.yml",
"chars": 97,
"preview": "language: node_js\nnode_js:\n - 10\nscript:\n - yarn test --coverage\nafter_success:\n - yarn cover\n"
},
{
"path": "CHANGELOG.md",
"chars": 6079,
"preview": "\n# Changelog\n\n## Unreleased\n\n- Update dependencies\n\n## 4.0.7 2019-10-28\n\n- Add missing `heading` variant to `Heading` #7"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3213,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 460,
"preview": "\n# Contributing\n\nIssues and pull requests are welcome.\n\nPlease **be nice** and read the following before contributing.\n\n"
},
{
"path": "LICENSE.md",
"chars": 1090,
"preview": "\n# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any p"
},
{
"path": "babel.config.js",
"chars": 459,
"preview": "module.exports = {\n presets: [\n '@babel/preset-env',\n '@babel/preset-react'\n ],\n env: {\n esm: {\n preset"
},
{
"path": "examples/sandbox/README.md",
"chars": 102,
"preview": "\nOpen in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox)\n"
},
{
"path": "examples/sandbox/package.json",
"chars": 600,
"preview": "{\n \"name\": \"rebass-sandbox\",\n \"private\": true,\n \"version\": \"4.0.7\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"scri"
},
{
"path": "examples/sandbox/src/index.js",
"chars": 813,
"preview": "/* eslint no-unused-vars: 0 */\nimport React from 'react'\nimport { render } from 'react-dom'\nimport preset from '@rebass/"
},
{
"path": "examples/styled-components/README.md",
"chars": 112,
"preview": "\nOpen in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/styled-components)\n"
},
{
"path": "examples/styled-components/package.json",
"chars": 615,
"preview": "{\n \"name\": \"@rebass/styled-components-example\",\n \"private\": true,\n \"version\": \"4.0.7\",\n \"main\": \"index.js\",\n \"licen"
},
{
"path": "examples/styled-components/src/index.js",
"chars": 740,
"preview": "/* eslint no-unused-vars: 0 */\nimport React from 'react'\nimport { render } from 'react-dom'\nimport preset from '@rebass/"
},
{
"path": "lerna.json",
"chars": 111,
"preview": "{\n \"version\": \"4.0.7\",\n \"npmClient\": \"yarn\",\n \"useWorkspaces\": true,\n \"packages\": [\n \"packages/*\"\n ]\n}\n"
},
{
"path": "package.json",
"chars": 1278,
"preview": "{\n \"private\": true,\n \"workspaces\": [\n \"packages/*\",\n \"examples/*\"\n ],\n \"scripts\": {\n \"prepare\": \"lerna run "
},
{
"path": "packages/bundler/index.js",
"chars": 389,
"preview": "#!/usr/bin/env node\nconst execa = require('execa')\n\nconst babel = (env, ...args) => {\n return execa('babel', [\n '--v"
},
{
"path": "packages/bundler/package.json",
"chars": 406,
"preview": "{\n \"name\": \"@rebass/bundler\",\n \"version\": \"4.0.5\",\n \"bin\": {\n \"rebass-bundler\": \"./index.js\"\n },\n \"main\": \"index"
},
{
"path": "packages/docs/.eslintrc.js",
"chars": 90,
"preview": "module.exports = {\n globals: {\n __PATH_PREFIX__: true,\n },\n extends: 'react-app',\n}\n"
},
{
"path": "packages/docs/gatsby-browser.js",
"chars": 40,
"preview": "export { wrapPageElement } from './src'\n"
},
{
"path": "packages/docs/gatsby-config.js",
"chars": 323,
"preview": "const remarkPlugins = [\n require('remark-slug'),\n]\n\nmodule.exports = {\n plugins: [\n {\n resolve: 'gatsby-plugin"
},
{
"path": "packages/docs/gatsby-ssr.js",
"chars": 40,
"preview": "export { wrapPageElement } from './src'\n"
},
{
"path": "packages/docs/package.json",
"chars": 1188,
"preview": "{\n \"private\": true,\n \"name\": \"docs\",\n \"version\": \"4.0.7\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"scripts\": {\n "
},
{
"path": "packages/docs/src/components/blocks.js",
"chars": 2304,
"preview": "import React from 'react'\nimport { Box } from 'rebass'\n\nexport const Container = props =>\n <Box\n {...props}\n sx={"
},
{
"path": "packages/docs/src/components/code.js",
"chars": 2839,
"preview": "import React from 'react'\nimport styled from '@emotion/styled'\nimport {\n LiveProvider,\n LivePreview,\n LiveEditor,\n L"
},
{
"path": "packages/docs/src/components/demo-provider.js",
"chars": 1247,
"preview": "import React, { useState } from 'react'\nimport { ThemeProvider } from 'theme-ui'\nimport { Helmet } from 'react-helmet'\ni"
},
{
"path": "packages/docs/src/components/edit-link.js",
"chars": 691,
"preview": "import React from 'react'\nimport { Location } from '@reach/router'\nimport { Link } from 'rebass'\n\nconst base = 'https://"
},
{
"path": "packages/docs/src/components/footer.js",
"chars": 540,
"preview": "import React from 'react'\nimport {\n Box,\n Flex,\n Link,\n} from 'rebass'\n\nexport default props =>\n <Box\n as='footer"
},
{
"path": "packages/docs/src/components/head.js",
"chars": 732,
"preview": "import React from 'react'\nimport { Helmet } from 'react-helmet'\nimport pkg from 'rebass/package.json'\n\nexport default pr"
},
{
"path": "packages/docs/src/components/header.js",
"chars": 2170,
"preview": "import React from 'react'\nimport {\n Flex,\n Box,\n Link,\n Button,\n} from 'rebass'\nimport { useColorMode } from 'theme-"
},
{
"path": "packages/docs/src/components/icon.js",
"chars": 454,
"preview": "import React from 'react'\nimport Logo from './Logo'\n\nexport default props => (\n <div\n style={{\n fontFamily: 'sy"
},
{
"path": "packages/docs/src/components/layout.js",
"chars": 2532,
"preview": "import React, { useState, useRef } from 'react'\nimport { Box, Flex } from 'rebass'\nimport { Pagination } from '@theme-ui"
},
{
"path": "packages/docs/src/components/logo.js",
"chars": 3374,
"preview": "import React from 'react'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/core'\nimport { useThe"
},
{
"path": "packages/docs/src/components/nav.mdx",
"chars": 1209,
"preview": "- [Getting Started](/getting-started)\n- [Props](/props)\n- [Theming](/theming)\n- [Variants](/variants)\n- [Extending](/ext"
},
{
"path": "packages/docs/src/components/note.js",
"chars": 307,
"preview": "import React from 'react'\nimport { Box } from 'rebass'\n\nexport default props =>\n <Box\n {...props}\n sx={{\n fo"
},
{
"path": "packages/docs/src/components/recipe-card.js",
"chars": 964,
"preview": "import React from 'react'\nimport { Link } from 'gatsby'\nimport { Box, Card } from 'rebass'\n\nexport default props => {\n "
},
{
"path": "packages/docs/src/components/skip-link.js",
"chars": 617,
"preview": "import React from 'react'\nimport { Link } from 'rebass'\n\nexport default props => (\n <Link\n children=\"Skip to content"
},
{
"path": "packages/docs/src/components/twitter-card.js",
"chars": 457,
"preview": "import React from 'react'\nimport Logo from './Logo'\n\nconst photo = 'https://images.unsplash.com/photo-1462331940025-496d"
},
{
"path": "packages/docs/src/components/wrapper.js",
"chars": 1320,
"preview": "import React from 'react'\nimport { Styled } from 'theme-ui'\nimport { Link } from 'gatsby'\nimport { Helmet } from 'react-"
},
{
"path": "packages/docs/src/gatsby-plugin-theme-ui/components.js",
"chars": 484,
"preview": "import React from 'react'\nimport code from '../components/code'\nimport { wrapper } from '../components/wrapper'\n\nconst h"
},
{
"path": "packages/docs/src/gatsby-plugin-theme-ui/index.js",
"chars": 4538,
"preview": "import preset from '@rebass/preset'\nimport merge from 'lodash.merge'\nimport prism from '@theme-ui/prism/presets/theme-ui"
},
{
"path": "packages/docs/src/index.js",
"chars": 502,
"preview": "import React from 'react'\nimport Layout from './components/layout'\n\nexport { default as Layout } from './components/layo"
},
{
"path": "packages/docs/src/pages/404.mdx",
"chars": 161,
"preview": "import { Flex } from 'rebass'\n\n<Flex justifyContent='center' mb={5}>\n <Logo\n text='404'\n color='black'\n bg='wh"
},
{
"path": "packages/docs/src/pages/box.mdx",
"chars": 291,
"preview": "export const title = 'Box'\n\n# Box\n\nResponsive box-model layout component\n\n```jsx live=true\n<Box\n p={5}\n fontSize={4}\n "
},
{
"path": "packages/docs/src/pages/button.mdx",
"chars": 248,
"preview": "export const title = 'Button'\n\n# Button\n\nButton component with variants\n\n```jsx live=true\n<Button variant='primary' mr={"
},
{
"path": "packages/docs/src/pages/card.mdx",
"chars": 190,
"preview": "export const title = 'Card'\n\n# Card\n\nExtension of the Box component with card styles\n\n```jsx live=true\n<Card width={256}"
},
{
"path": "packages/docs/src/pages/demo.mdx",
"chars": 556,
"preview": "import {\n Box,\n Heading,\n Text,\n Button,\n Image,\n Card,\n} from 'rebass'\nimport { DemoProvider } from '..'\n\nexport "
},
{
"path": "packages/docs/src/pages/extending.mdx",
"chars": 3746,
"preview": "import Note from '../components/note'\nexport const title = 'Extending'\n\n# Extending\n\nRebass components are designed to b"
},
{
"path": "packages/docs/src/pages/flex.mdx",
"chars": 384,
"preview": "export const title = 'Flex'\n\n# Flex\n\nResponsive flexbox layout component\n\n```jsx live=true\n<Flex>\n <Box\n p={3}\n w"
},
{
"path": "packages/docs/src/pages/forms/checkbox.mdx",
"chars": 394,
"preview": "export const title = 'Checkbox'\n\n# Checkbox\n\nAccessible and themeable form checkbox input component.\n\n```js\nimport { Lab"
},
{
"path": "packages/docs/src/pages/forms/index.mdx",
"chars": 2153,
"preview": "import { Box, Button } from 'rebass'\nexport const title = 'Forms'\n\n# Forms\n\nAccessible and themeable form components for"
},
{
"path": "packages/docs/src/pages/forms/input.mdx",
"chars": 310,
"preview": "export const title = 'Input'\n\n# Input\n\nAccessible and themeable form input component.\n\n```js\nimport { Label, Input } fro"
},
{
"path": "packages/docs/src/pages/forms/label.mdx",
"chars": 190,
"preview": "export const title = 'Label'\n\n# Label\n\nAccessible and themeable form label component.\n\n```js\nimport { Label } from '@reb"
},
{
"path": "packages/docs/src/pages/forms/radio.mdx",
"chars": 589,
"preview": "export const title = 'Radio'\n\n# Radio\n\nAccessible and themeable form radio input component.\n\n```js\nimport { Label, Radio"
},
{
"path": "packages/docs/src/pages/forms/select.mdx",
"chars": 457,
"preview": "export const title = 'Select'\n\n# Select\n\nAccessible and themeable form select component.\n\n```js\nimport { Label, Select }"
},
{
"path": "packages/docs/src/pages/forms/slider.mdx",
"chars": 298,
"preview": "export const title = 'Slider'\n\n# Slider\n\nAccessible and themeable form range input component.\n\n```js\nimport { Label, Sli"
},
{
"path": "packages/docs/src/pages/forms/switch.mdx",
"chars": 150,
"preview": "export const title = 'Switch'\n\n# Switch\n\nToggle switch button component\n\n```js\nimport { Switch } from '@rebass/forms'\n``"
},
{
"path": "packages/docs/src/pages/forms/textarea.mdx",
"chars": 281,
"preview": "export const title = 'Textarea'\n\n# Textarea\n\nAccessible and themeable form textarea component.\n\n```js\nimport { Label, Te"
},
{
"path": "packages/docs/src/pages/getting-started.mdx",
"chars": 3866,
"preview": "export const title = 'Getting Started'\n\n# Getting Started\n\nInstall the core Rebass library.\n\n```sh\nnpm i rebass\n```\n\n## "
},
{
"path": "packages/docs/src/pages/guides/css-grid.mdx",
"chars": 2718,
"preview": "export const title = 'CSS Grid'\n\n# CSS Grid\n\nRebass components can be used to create one-off or reusable CSS Grid layout"
},
{
"path": "packages/docs/src/pages/guides/index.mdx",
"chars": 775,
"preview": "import { Grid } from '../..'\nexport const title = 'Guides'\n\n# Guides\n\n<Grid\n sx={{\n a: {\n display: 'block',\n "
},
{
"path": "packages/docs/src/pages/guides/mdx.mdx",
"chars": 1906,
"preview": "import { Note } from '../..'\nimport { Box } from 'rebass'\nexport const title = 'MDX'\n\n# MDX\n\n[MDX][] is a format that al"
},
{
"path": "packages/docs/src/pages/guides/server-side-rendering.mdx",
"chars": 329,
"preview": "export const title = 'Server-Side Rendering'\n\n# Server-Side Rendering\n\nBecause Rebass uses Emotion, no additional steps "
},
{
"path": "packages/docs/src/pages/guides/styled-components.mdx",
"chars": 515,
"preview": "import { Note } from '../..'\nexport const title = 'Using Styled Components'\n\n# Using Styled Components\n\nIf you'd prefer "
},
{
"path": "packages/docs/src/pages/guides/theme-ui.mdx",
"chars": 252,
"preview": "import { Note } from '../..'\nexport const title = 'Theme UI'\n\n# Theme UI\n\n<Note>\n\nThis guide is a work-in-progress.\nIf y"
},
{
"path": "packages/docs/src/pages/guides/using-rebass-without-context.mdx",
"chars": 604,
"preview": "import { Note } from '../..'\nexport const title = 'Using Rebass without Context'\n\n# Using Rebass without Context\n\nIf you"
},
{
"path": "packages/docs/src/pages/heading.mdx",
"chars": 182,
"preview": "export const title = 'Heading'\n\n# Heading\n\nExtension of the Text component for headings\n\n```jsx live=true\n<Heading\n fon"
},
{
"path": "packages/docs/src/pages/image.mdx",
"chars": 267,
"preview": "export const title = 'Image'\n\n# Image\n\nResponsive image component with variants\n\n```jsx live=true\n<Image\n src={props.im"
},
{
"path": "packages/docs/src/pages/index.mdx",
"chars": 2944,
"preview": "import { Box, Flex, Button } from 'rebass'\nimport {\n Banner,\n NavGrid,\n Container,\n Grid,\n LogoGrid,\n} from '..'\nim"
},
{
"path": "packages/docs/src/pages/layout/index.mdx",
"chars": 532,
"preview": "import { Tiles } from '@rebass/layout'\nexport const title = 'Layout'\n\n# @rebass/layout\n\nThemeable layout components buil"
},
{
"path": "packages/docs/src/pages/link.mdx",
"chars": 208,
"preview": "export const title = 'Link'\n\n# Link\n\nStyled link component\n\n```jsx live=true\n<Link href='https://rebassjs.org'>Link</Lin"
},
{
"path": "packages/docs/src/pages/migrating.mdx",
"chars": 1854,
"preview": "export const title = 'Migration'\n\n# Migration Guide\n\n## v4: What's New\n\n- New [`sx` prop](/props/#sx-prop) for theme-bas"
},
{
"path": "packages/docs/src/pages/props.mdx",
"chars": 6944,
"preview": "export const title = 'Props'\n\n# Props\n\nAll Rebass components extend the base [Box](/box) component,\nand include [Styled "
},
{
"path": "packages/docs/src/pages/recipes/avatar.mdx",
"chars": 160,
"preview": "export const title = 'Avatar'\n\n# Avatar\n\n```jsx live=true\n<Image\n src={props.image}\n sx={{\n width: 48,\n height: "
},
{
"path": "packages/docs/src/pages/recipes/background-image-card.mdx",
"chars": 351,
"preview": "\n# Background Image Card\n\n```jsx live=true\n<Box\n sx={{\n px: 4,\n py: 6,\n backgroundImage: 'url(https://source.u"
},
{
"path": "packages/docs/src/pages/recipes/badge.mdx",
"chars": 208,
"preview": "export const title = 'Badge'\n\n# Badge\n\n```jsx live=true\n<Box\n sx={{\n display: 'inline-block',\n color: 'white',\n "
},
{
"path": "packages/docs/src/pages/recipes/container.mdx",
"chars": 152,
"preview": "export const title = 'Container'\n\n# Container\n\n```jsx live=true\n<Box\n sx={{\n maxWidth: 512,\n mx: 'auto',\n px: "
},
{
"path": "packages/docs/src/pages/recipes/flexbox-align.mdx",
"chars": 288,
"preview": "\n# Flexbox Align\n\n```jsx live=true\n<Flex alignItems='center'>\n <Box width={1/3}>\n <Heading\n py={4}\n fontSi"
},
{
"path": "packages/docs/src/pages/recipes/flexbox-grid.mdx",
"chars": 313,
"preview": "export const title = 'Flexbox Grid'\n\n# Flexbox Grid\n\n```jsx live=true\n<Flex mx={-2}>\n <Box width={1/2} px={2}>\n <Tex"
},
{
"path": "packages/docs/src/pages/recipes/flexbox-wrap.mdx",
"chars": 1031,
"preview": "export const title = 'Flexbox Wrap'\n\n# Flexbox Wrap\n\n```jsx live=true\n<Flex flexWrap='wrap' mx={-2}>\n <Box px={2} py={2"
},
{
"path": "packages/docs/src/pages/recipes/image-card.mdx",
"chars": 211,
"preview": "\n# Image Card\n\n```jsx live=true\n<Flex>\n <Card width={[ 256, 320 ]} mx='auto'>\n <Image src='https://source.unsplash.c"
},
{
"path": "packages/docs/src/pages/recipes/index.mdx",
"chars": 1211,
"preview": "import { MDXProvider } from '@mdx-js/react'\nimport { RecipeCard, Grid } from '../..'\nimport FlexboxGrid from './flexbox-"
},
{
"path": "packages/docs/src/pages/recipes/nav-bar.mdx",
"chars": 229,
"preview": "\n# Nav Bar\n\n```jsx live=true\n<Flex\n px={2}\n color='white'\n bg='black'\n alignItems='center'>\n <Text p={2} fontWeight"
},
{
"path": "packages/docs/src/pages/recipes/nav-link.mdx",
"chars": 202,
"preview": "export const title = 'Nav Link'\n\n# Nav Link\n\n```jsx live=true\n<Link\n sx={{\n display: 'inline-block',\n fontWeight:"
},
{
"path": "packages/docs/src/pages/recipes/video-embed.mdx",
"chars": 483,
"preview": "\n# Video Embed\n\n```jsx live=true\n<Box\n sx={{\n width: '100%',\n height: 0,\n paddingBottom: (900 / 16) + '%',\n "
},
{
"path": "packages/docs/src/pages/reflexbox.mdx",
"chars": 87,
"preview": "import Readme from 'reflexbox/README.md'\n\nexport const title = 'Reflexbox'\n\n<Readme />\n"
},
{
"path": "packages/docs/src/pages/space.mdx",
"chars": 86,
"preview": "import Readme from '@rebass/space/README.md'\nexport const title = 'Space'\n\n<Readme />\n"
},
{
"path": "packages/docs/src/pages/text.mdx",
"chars": 177,
"preview": "export const title = 'Text'\n\n# Text\n\nResponsive typography component\n\n```jsx live=true\n<Text\n fontSize={[ 3, 4, 5 ]}\n "
},
{
"path": "packages/docs/src/pages/theming.mdx",
"chars": 3104,
"preview": "export const title = 'Theming'\n\n# Theming\n\nRebass components are built with themeability in mind.\nAll colors, typographi"
},
{
"path": "packages/docs/src/pages/variants.mdx",
"chars": 1583,
"preview": "export const title = 'Variants'\n\n# Variants\n\nAll Rebass components accept a `variant` prop, which allows you to define s"
},
{
"path": "packages/docs/static/_redirects",
"chars": 192,
"preview": "/Box /box\n/Flex /flex\n/Text /text\n/Heading /heading\n/Button /button\n/Link /link\n/Image "
},
{
"path": "packages/forms/.gitignore",
"chars": 23,
"preview": "styled-components\ndist\n"
},
{
"path": "packages/forms/.npmignore",
"chars": 5,
"preview": "test\n"
},
{
"path": "packages/forms/README.md",
"chars": 1674,
"preview": "\n# @rebass/forms\n\nAccessible and themeable form components for use with Rebass or Theme UI.\n\n```sh\nnpm i @rebass/forms\n`"
},
{
"path": "packages/forms/package.json",
"chars": 448,
"preview": "{\n \"name\": \"@rebass/forms\",\n \"version\": \"4.0.6\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.esm.js\",\n \"script"
},
{
"path": "packages/forms/src/index.js",
"chars": 7496,
"preview": "import React, { forwardRef } from 'react'\nimport { Box, Flex } from 'reflexbox'\nimport { props as systemProps } from '@s"
},
{
"path": "packages/forms/test/__snapshots__/index.js.snap",
"chars": 5765,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Checkbox renders 1`] = `\n.emotion-3 {\n box-sizing: border-box;\n m"
},
{
"path": "packages/forms/test/index.js",
"chars": 2541,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { render } from '@testing-library/react'\nimp"
},
{
"path": "packages/layout/.gitignore",
"chars": 23,
"preview": "dist\nstyled-components\n"
},
{
"path": "packages/layout/.npmignore",
"chars": 21,
"preview": "test\nbabel.config.js\n"
},
{
"path": "packages/layout/README.md",
"chars": 45,
"preview": "\n@rebass/layout\n\nhttps://rebassjs.org/layout\n"
},
{
"path": "packages/layout/package.json",
"chars": 320,
"preview": "{\n \"name\": \"@rebass/layout\",\n \"version\": \"4.0.6\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.esm.js\",\n \"scrip"
},
{
"path": "packages/layout/src/index.js",
"chars": 770,
"preview": "import React, { forwardRef } from 'react'\nimport { Box } from 'reflexbox'\n\nconst px = n => typeof n === 'number' ? n + '"
},
{
"path": "packages/preset/LICENSE.md",
"chars": 1089,
"preview": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any pe"
},
{
"path": "packages/preset/README.md",
"chars": 1235,
"preview": "\n# @rebass/preset\n\nBase theme preset for use with [Rebass][]\n\n```sh\nnpm i @rebass/preset\n```\n\n## Usage\n\nFor general usag"
},
{
"path": "packages/preset/package.json",
"chars": 642,
"preview": "{\n \"name\": \"@rebass/preset\",\n \"version\": \"4.0.5\",\n \"description\": \"Base theme preset for use with Rebass\",\n \"main\": "
},
{
"path": "packages/preset/src/index.js",
"chars": 2108,
"preview": "// default theme preset\n\nexport const preset = {\n colors: {\n text: '#000',\n background: '#fff',\n primary: '#07"
},
{
"path": "packages/preset/test/__snapshots__/index.js.snap",
"chars": 2544,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot 1`] = `\nObject {\n \"buttons\": Object {\n \"outline\": Obje"
},
{
"path": "packages/preset/test/index.js",
"chars": 92,
"preview": "import preset from '../src'\n\ntest('snapshot', () => {\n expect(preset).toMatchSnapshot()\n})\n"
},
{
"path": "packages/preset-material/LICENSE.md",
"chars": 1089,
"preview": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any pe"
},
{
"path": "packages/preset-material/README.md",
"chars": 972,
"preview": "\n# @rebass/preset-material\n\nMaterial Design theme preset for use with [Rebass][]\n\n```sh\nnpm i @rebass/preset-material\n``"
},
{
"path": "packages/preset-material/package.json",
"chars": 660,
"preview": "{\n \"name\": \"@rebass/preset-material\",\n \"version\": \"4.0.5\",\n \"description\": \"Material Design theme preset for use with"
},
{
"path": "packages/preset-material/src/index.js",
"chars": 2739,
"preview": "// material theme preset\n// work-in-progress\n\n// references\n// - https://material.io/design/typography/the-type-system.h"
},
{
"path": "packages/preset-material/test/__snapshots__/index.js.snap",
"chars": 2977,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot 1`] = `\nObject {\n \"buttons\": Object {\n \"outline\": Obje"
},
{
"path": "packages/preset-material/test/index.js",
"chars": 92,
"preview": "import preset from '../src'\n\ntest('snapshot', () => {\n expect(preset).toMatchSnapshot()\n})\n"
},
{
"path": "packages/rebass/.gitignore",
"chars": 23,
"preview": "styled-components\ndist\n"
},
{
"path": "packages/rebass/.npmignore",
"chars": 5,
"preview": "test\n"
},
{
"path": "packages/rebass/README.md",
"chars": 3779,
"preview": "\n<img src='https://rebassjs.org/logo.svg' width='128' height='128' />\n\n# Rebass\n\nReact primitive UI components built wit"
},
{
"path": "packages/rebass/package.json",
"chars": 734,
"preview": "{\n \"name\": \"rebass\",\n \"version\": \"4.0.7\",\n \"description\": \"React primitive UI components built with Styled System\",\n "
},
{
"path": "packages/rebass/src/index.js",
"chars": 1324,
"preview": "import React, { forwardRef } from 'react'\nimport { Box, Flex } from 'reflexbox'\n\nexport { Box, Flex }\n\nexport const Text"
},
{
"path": "packages/rebass/test/index.js",
"chars": 3665,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { matchers } from 'jest-emotion'\nimport {\n "
},
{
"path": "packages/reflexbox/.gitignore",
"chars": 23,
"preview": "dist\nstyled-components\n"
},
{
"path": "packages/reflexbox/.npmignore",
"chars": 21,
"preview": "test\nbabel.config.js\n"
},
{
"path": "packages/reflexbox/LICENSE.md",
"chars": 1089,
"preview": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any pe"
},
{
"path": "packages/reflexbox/README.md",
"chars": 6688,
"preview": "\n# Reflexbox\n\n📦 Ergonomic, responsive React layout and grid system.\nThe original *Box* component™ since 2015\n\n[![Build S"
},
{
"path": "packages/reflexbox/babel.config.js",
"chars": 273,
"preview": "module.exports = {\n presets: [ '@babel/preset-env' ],\n env: {\n styled: {\n plugins: [\n [\n 'tran"
},
{
"path": "packages/reflexbox/package.json",
"chars": 993,
"preview": "{\n \"name\": \"reflexbox\",\n \"version\": \"4.0.6\",\n \"description\": \"Responsive React grid system built with Styled System, "
},
{
"path": "packages/reflexbox/src/index.js",
"chars": 824,
"preview": "import React from 'react'\nimport styled from '@emotion/styled'\nimport {\n compose,\n space,\n layout,\n typography,\n co"
},
{
"path": "packages/reflexbox/test/index.js",
"chars": 4611,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { matchers } from 'jest-emotion'\nimport {\n "
},
{
"path": "packages/space/README.md",
"chars": 1385,
"preview": "\n# @rebass/space\n\nReact component for applying responsive margin and padding to child elements without a wrapping HTML c"
},
{
"path": "packages/space/package.json",
"chars": 696,
"preview": "{\n \"name\": \"@rebass/space\",\n \"version\": \"4.0.5\",\n \"description\": \"React component for applying responsive margin and "
},
{
"path": "packages/space/src/index.js",
"chars": 587,
"preview": "import React from 'react'\nimport styled from '@emotion/styled'\nimport { space } from 'styled-system'\n\nconst classnames ="
},
{
"path": "packages/space/test/__snapshots__/index.js.snap",
"chars": 226,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders 1`] = `null`;\n\nexports[`renders children 1`] = `\nArray [\n "
},
{
"path": "packages/space/test/index.js",
"chars": 952,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport Space from '../src'\n\nconst render = el => re"
}
]
About this extraction
This page contains the full source code of the rebassjs/rebass GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 136 files (150.6 KB), approximately 48.1k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.