34 | 
39 | 
44 | 
49 |
27 |
41 |
28 |
34 | Hello
29 |
30 | This example is using the @styled-system/babel-plugin{' '}
31 | to add styles based on props.
32 |
35 |
40 | 36 | These style props work on any JSX element and don't require 37 | the use of custom styled components. 38 |
39 |
49 |
60 |
61 | )
62 |
--------------------------------------------------------------------------------
/examples/svelte/rollup.config.js:
--------------------------------------------------------------------------------
1 | // this file will not afect the sandbox but will
2 | // afect the deployment and dowload
3 |
4 | import svelte from "rollup-plugin-svelte";
5 | import resolve from "rollup-plugin-node-resolve";
6 | import commonjs from "rollup-plugin-commonjs";
7 | import { terser } from "rollup-plugin-terser";
8 |
9 | const production = !process.env.ROLLUP_WATCH;
10 |
11 | export default {
12 | input: "index.js",
13 | output: {
14 | sourcemap: true,
15 | format: "iife",
16 | name: "app",
17 | file: "public/bundle.js"
18 | },
19 | plugins: [
20 | svelte({
21 | // enable run-time checks when not in production
22 | dev: !production,
23 | // we'll extract any component CSS out into
24 | // a separate file — better for performance
25 | css: css => {
26 | css.write("public/bundle.css");
27 | }
28 | }),
29 |
30 | // If you have external dependencies installed from
31 | // npm, you'll most likely need these plugins. In
32 | // some cases you'll need additional configuration —
33 | // consult the documentation for details:
34 | // https://github.com/rollup/rollup-plugin-commonjs
35 | resolve(),
36 | commonjs(),
37 |
38 | // If we're building for production (npm run build
39 | // instead of npm run dev), minify
40 | production && terser()
41 | ]
42 | };
43 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "@styled-system/docs",
4 | "version": "5.0.0-8",
5 | "scripts": {
6 | "start": "gatsby develop",
7 | "build": "gatsby build",
8 | "clean": "gatsby clean"
9 | },
10 | "dependencies": {
11 | "@emotion/core": "^10.0.10",
12 | "@emotion/styled": "^10.0.11",
13 | "@mdx-js/mdx": "^1.0.19",
14 | "@mdx-js/react": "^1.0.16",
15 | "@styled-system/babel-plugin": "0.0.20",
16 | "@styled-system/css": "^5.0.0-7",
17 | "@styled-system/edit": "5.0.1",
18 | "@styled-system/should-forward-prop": "5.0.1",
19 | "gatsby": "^2.4.6",
20 | "gatsby-plugin-emotion": "^4.0.6",
21 | "gatsby-plugin-google-analytics": "^2.0.20",
22 | "gatsby-plugin-mdx": "^1.0.5",
23 | "gatsby-plugin-react-helmet": "^3.0.12",
24 | "gatsby-plugin-theme-ui": "^0.0.17",
25 | "gatsby-remark-prismjs": "^3.2.9",
26 | "gatsby-source-filesystem": "^2.0.35",
27 | "is-absolute-url": "^3.0.0",
28 | "lodash.get": "^4.4.2",
29 | "lodash.merge": "^4.6.1",
30 | "prismjs": "^1.16.0",
31 | "react": "^16.8.6",
32 | "react-dom": "^16.8.6",
33 | "react-helmet": "^6.0.0-beta",
34 | "remark-slug": "^5.1.1",
35 | "remark-unwrap-images": "^0.2.0",
36 | "styled-system": "^5.0.0-8",
37 | "theme-ui": "^0.0.17",
38 | "typography-theme-lincoln": "^0.16.19"
39 | },
40 | "devDependencies": {}
41 | }
42 |
--------------------------------------------------------------------------------
/docs/testimonials.md:
--------------------------------------------------------------------------------
1 | > "This is honestly my favourite way to build UI components right now ![party parrot][party-parrot]"
2 | >
3 | > – [Varun Vachhar][varun-post]
4 |
5 | [party-parrot]: https://github.com/jmhobbs/cultofthepartyparrot.com/raw/master/parrots/parrot.gif
6 |
7 |
12 |
13 | > "The future of css-in-js is going to look something like styled-system with its responsive values."14 | > 15 | > – [Kye Hohenberger](https://mobile.twitter.com/tkh44/status/905474043729416192) 16 | 17 | > "Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."
18 | > 19 | > – [Nathan Young](https://mobile.twitter.com/nathanyoung/status/891353221880360960) 20 | 21 | > "If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build." 22 | > 23 | > – [David Yeiser][david-tweet] 24 | 25 | [dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665 26 | [mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984 27 | [varun-post]: https://varun.ca/styled-system/ 28 | [david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312 29 | -------------------------------------------------------------------------------- /docs/src/sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from '@emotion/styled' 3 | import { ThemeProvider, Box, css } from 'theme-ui' 4 | import NavLink from './nav-link' 5 | import Content from './sidebar.mdx' 6 | 7 | const components = { 8 | a: NavLink, 9 | } 10 | 11 | const styles = { 12 | ul: { 13 | listStyle: 'none', 14 | px: 0, 15 | my: 0, 16 | }, 17 | li: { 18 | '& > ul': { 19 | pl: 16, 20 | }, 21 | }, 22 | a: { 23 | color: 'inherit', 24 | '&:hover': { 25 | color: 'primary', 26 | }, 27 | }, 28 | } 29 | 30 | const Root = styled(Box)( 31 | css({ 32 | minWidth: 0, 33 | flex: 'none', 34 | overflowY: 'auto', 35 | WebkitOverflowScrolling: 'touch', 36 | position: 'sticky', 37 | top: 0, 38 | alignSelf: 'flex-start', 39 | maxHeight: '100vh', 40 | color: 'text', 41 | bg: 'background', 42 | }), 43 | props => ({ 44 | '@media screen and (max-width: 40em)': { 45 | position: 'fixed', 46 | top: '64px', 47 | minHeight: 0, 48 | maxHeight: props.open ? 'calc(100vh - 64px)' : 0, 49 | height: 'auto', 50 | transition: 'max-height .2s ease-out', 51 | boxShadow: `0 2px 8px rgba(0, 0, 0, .25)`, 52 | }, 53 | }) 54 | // block('sidebar') 55 | ) 56 | 57 | export default props => ( 58 |
77 | npm i @styled-system/css 78 |79 |
77 | npm i @styled-system/css 78 |79 |
color({ theme, color, bg })} />
52 | )
53 | ```
54 |
55 | [`css` prop]: https://emotion.sh/docs/css-prop
56 |
--------------------------------------------------------------------------------
/docs/variants.md:
--------------------------------------------------------------------------------
1 | # Variants
2 |
3 | Variants can be useful for applying complex styles to a component based on a single prop.
4 | Styled System includes built-in variants for `textStyle`, `colorStyle`, and `buttonStyle`.
5 |
6 | To use variants, first define styles in your `theme` object.
7 |
8 | ```js
9 | // example theme with variants
10 | import colors from './colors'
11 |
12 | export default {
13 | ...colors,
14 | textStyles: {
15 | caps: {
16 | textTransform: 'uppercase',
17 | letterSpacing: '0.1em',
18 | },
19 | },
20 | colorStyles: {
21 | inverted: {
22 | color: colors.background,
23 | backgroundColor: colors.text,
24 | },
25 | },
26 | buttons: {
27 | primary: {
28 | color: colors.white,
29 | backgroundColor: colors.primary,
30 | },
31 | secondary: {
32 | color: colors.text,
33 | backgroundColor: colors.secondary,
34 | },
35 | },
36 | }
37 | ```
38 |
39 | **NOTE:** the objects defined in the theme are _CSS style_ objects, not component _props_. Styled system props **will not** work here to avoid conflating CSS style objects with component props.
40 |
41 | Next, add variant utilities to your components.
42 |
43 | ```js
44 | // example Button with variants
45 | import styled from 'styled-components'
46 | import { buttonStyle } from 'styled-system'
47 |
48 | const Button = styled('button')(
49 | {
50 | appearance: 'none',
51 | fontFamily: 'inherit',
52 | },
53 | buttonStyle
54 | )
55 | ```
56 |
57 | The `Button` component can now use the `variant` prop to change between a primary and secondary style.
58 |
59 | ```jsx
60 |
61 |
62 | ```
63 |
64 | The built-in variants use the following props and theme keys:
65 |
66 | | Function Name | Prop | Theme Key |
67 | | ------------- | ----------- | ------------- |
68 | | `textStyle` | `textStyle` | `textStyles` |
69 | | `colorStyle` | `colors` | `colorStyles` |
70 | | `buttonStyle` | `variant` | `buttons` |
71 |
72 | ## Custom Variants
73 |
74 | Creating custom variants allows you to extend this API in many ways.
75 | To create a custom variant, import the `variant` utility to create a style prop function.
76 |
77 | ```js
78 | import styled from 'styled-components'
79 | import { variant } from 'styled-system'
80 |
81 | const buttonSizes = variant({
82 | // theme key for variant definitions
83 | scale: 'buttonSizes',
84 | // component prop
85 | prop: 'size',
86 | })
87 |
88 | const Button = styled('button')(buttonSizes)
89 | ```
90 |
--------------------------------------------------------------------------------
/packages/variant/test/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | variant,
3 | textStyle,
4 | colorStyle,
5 | } from '../src'
6 | import { system, compose } from '@styled-system/core'
7 |
8 | const theme = {
9 | colors: {
10 | blue: '#07c',
11 | black: '#111',
12 | },
13 | }
14 |
15 | const fontSize = system({ fontSize: true })
16 | const color = system({ color: true })
17 |
18 | test('variant returns style objects from theme', () => {
19 | const buttons = variant({ key: 'buttons' })
20 | const a = buttons({
21 | theme: {
22 | buttons: {
23 | primary: {
24 | padding: '32px',
25 | backgroundColor: 'tomato',
26 | },
27 | },
28 | },
29 | variant: 'primary',
30 | })
31 | expect(a).toEqual({
32 | padding: '32px',
33 | backgroundColor: 'tomato',
34 | })
35 | })
36 |
37 | test('variant prop can be customized', () => {
38 | const buttons = variant({ key: 'buttons', prop: 'type' })
39 | const a = buttons({
40 | theme: {
41 | buttons: {
42 | primary: {
43 | padding: '32px',
44 | backgroundColor: 'tomato',
45 | },
46 | },
47 | },
48 | type: 'primary',
49 | })
50 | expect(a).toEqual({
51 | padding: '32px',
52 | backgroundColor: 'tomato',
53 | })
54 | })
55 |
56 | test('variant can be composed', () => {
57 | const system = compose(
58 | variant({ key: 'typography' }),
59 | fontSize,
60 | color
61 | )
62 | const result = system({
63 | theme: {
64 | typography: {
65 | primary: {
66 | fontSize: '32px',
67 | color: '#fff',
68 | },
69 | },
70 | },
71 | variant: 'primary',
72 | color: '#111',
73 | })
74 | expect(result).toEqual({
75 | fontSize: '32px',
76 | color: '#111',
77 | })
78 | })
79 |
80 | test('textStyle prop returns theme.textStyles object', () => {
81 | const a = textStyle({
82 | theme: {
83 | textStyles: {
84 | heading: {
85 | fontWeight: 'bold',
86 | lineHeight: 1.25,
87 | },
88 | },
89 | },
90 | textStyle: 'heading',
91 | })
92 | expect(a).toEqual({
93 | fontWeight: 'bold',
94 | lineHeight: 1.25,
95 | })
96 | })
97 |
98 | test('colors prop returns theme.colorStyles object', () => {
99 | const a = colorStyle({
100 | theme: {
101 | colorStyles: {
102 | dark: {
103 | color: '#fff',
104 | backgroundColor: '#000',
105 | },
106 | },
107 | },
108 | colors: 'dark',
109 | })
110 | expect(a).toEqual({
111 | color: '#fff',
112 | backgroundColor: '#000',
113 | })
114 | })
115 |
116 |
--------------------------------------------------------------------------------
/packages/styled-system/test/shim.js:
--------------------------------------------------------------------------------
1 | import { style } from '../src'
2 |
3 | const width = style({
4 | prop: 'width',
5 | })
6 |
7 | const color = style({
8 | prop: 'color',
9 | key: 'colors',
10 | })
11 |
12 | const backgroundColor = style({
13 | prop: 'backgroundColor',
14 | alias: 'bg',
15 | key: 'colors',
16 | })
17 |
18 | const theme = {
19 | colors: {
20 | blue: '#07c',
21 | black: '#111',
22 | },
23 | }
24 |
25 | test('returns a style function', () => {
26 | const func = style({ prop: 'width' })
27 | expect(typeof func).toBe('function')
28 | })
29 |
30 | test('function returns a style object', () => {
31 | const style = width({ width: '50%' })
32 | expect(style).toEqual({
33 | width: '50%',
34 | })
35 | })
36 |
37 | test('returns values from theme', () => {
38 | const style = color({ theme, color: 'blue' })
39 | expect(style).toEqual({
40 | color: '#07c',
41 | })
42 | })
43 |
44 | test('handles aliased props', () => {
45 | const style = backgroundColor({
46 | theme,
47 | bg: 'blue',
48 | })
49 | expect(style).toEqual({
50 | backgroundColor: '#07c',
51 | })
52 | })
53 |
54 | test('returns 0', () => {
55 | const style = width({ width: 0 })
56 | expect(style).toEqual({ width: 0 })
57 | })
58 |
59 | test('returns responsive style objects', () => {
60 | const style = width({
61 | width: ['100%', '50%'],
62 | })
63 | expect(style).toEqual({
64 | width: '100%',
65 | '@media screen and (min-width: 40em)': { width: '50%' },
66 | })
67 | })
68 |
69 | test('returns responsive style objects for all breakpoints', () => {
70 | const style = width({
71 | width: ['100%', '75%', '50%', '33%', '25%'],
72 | })
73 | expect(style).toEqual({
74 | width: '100%',
75 | '@media screen and (min-width: 40em)': { width: '75%' },
76 | '@media screen and (min-width: 52em)': { width: '50%' },
77 | '@media screen and (min-width: 64em)': { width: '33%' },
78 | })
79 | })
80 |
81 | test('skips undefined responsive values', () => {
82 | const style = width({
83 | width: ['100%', , '50%'],
84 | })
85 | expect(style).toEqual({
86 | width: '100%',
87 | '@media screen and (min-width: 52em)': { width: '50%' },
88 | })
89 | })
90 |
91 | test('parses object values', () => {
92 | const style = width({
93 | width: {
94 | _: '100%',
95 | 2: '50%',
96 | },
97 | })
98 | expect(style).toEqual({
99 | width: '100%',
100 | '@media screen and (min-width: 64em)': { width: '50%' },
101 | })
102 | })
103 |
104 | test('array values longer than breakpoints does not reset returned style object', () => {
105 | const a = width({
106 | width: ['100%', , , , , '50%', '25%'],
107 | })
108 | expect(a).toEqual({ width: '100%' })
109 | })
110 |
--------------------------------------------------------------------------------
/docs/guides/why-powers-of-two.md:
--------------------------------------------------------------------------------
1 | import { Flex, Box } from 'theme-ui'
2 |
3 | # Why Powers of Two
4 |
5 | If you're less familiar with functional CSS, the idea of an 8px grid,
6 | come from libraries like Bootstrap, or just have ten fingers and ten toes,
7 | then you might be less familiar with the rationale for Styled System's powers-of-two based spacing scale.
8 | While most human numbering systems are base ten due to the number of "digits" we have on our hands,
9 | base ten numbering systems aren't always the easiest to work with mathematically.
10 | Computer displays for decades have been based on multiples of powers of two due to the constraints of binary data,
11 | but using powers of two for layout in screen design makes a lot of sense.
12 |
13 | When designing UI for the web, elements are often nested within other elements.
14 | This means that padding on a child element will be added to the padding of its parent.
15 | When you end up with multiple levels of nesting for different elements across a page,
16 | it can be difficult to keep things aligned if you're not using a spacing scale like the one
17 | included in Styled System.
18 |
19 | Styled System's spacing scale is based on powers of two because of the tendency for elements to be nested.
20 | For example, say you have a navigation bar, where links have a small amount of padding to make the tap target larger,
21 | but less padding than the content below the navigation bar because that would space the links too far apart.
22 | When using a powers-of-two scale, the links' padding will be added to the navigation bar's padding,
23 | making it easier to align to items with double the padding below it.
24 |
25 | The following example is an attempt to demonstrate:
26 |
27 |
28 |
29 |
30 | Link with padding `3`
31 |
32 |
34 | Link
35 |
36 |
37 | Link
38 |
39 |
40 |
41 | Box with padding `4`
42 |
43 |
44 |
45 | The navigation bar has a higher density layout with left and right padding of `3` (`16px`) and nested links with padding `3` as well.
46 | The content area below has a padding of `4` (`32px`) which equals the padding of the navigation bar and links added together.
47 | Notice how the text in the navigation bar and the content below still align with each other.
48 |
49 | This is a very simple example, but when adhering to this approach across a large application, the effect can be profound.
50 | The default typographic scale (`fontSizes`) in Styled System is also loosely based on the same powers of two approach,
51 | which is intended to make web app design more effortlessly consistent.
52 |
53 | For further reading see [Mathematical Web Typography](https://jxnblk.com/blog/mathematical-web-typography/).
54 |
--------------------------------------------------------------------------------
/packages/css/README.md:
--------------------------------------------------------------------------------
1 |
2 | # @styled-system/css
3 |
4 | Styled System for the `css` prop
5 |
6 | ```sh
7 | npm i @styled-system/css
8 | ```
9 |
10 | Styled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.
11 |
12 | ```jsx
13 | // usage with the css prop
14 | import React from 'react'
15 | import css from '@styled-system/css'
16 |
17 | const Beep = props =>
18 |
25 | ```
26 |
27 | ```js
28 | // usage with a styled HOC
29 | import styled from '@emotion/styled'
30 | import css from '@styled-system/css'
31 |
32 | const Boop = styled('div')(
33 | css({
34 | fontSize: [ 4, 5, 6 ],
35 | color: 'primary',
36 | bg: 'gray',
37 | '&:hover': {
38 | color: 'secondary',
39 | },
40 | })
41 | )
42 | ```
43 |
44 | ## Theme Keys
45 |
46 | The following keys in your style object will work the same as Styled System props, pulling values from your `theme` object.
47 |
48 | Property | Theme Key
49 | ---|---
50 | `fontFamily` | `fonts`
51 | `fontSize` | `fontSizes`
52 | `fontWeight` | `fontWeights`
53 | `lineHeight` | `lineHeights`
54 | `letterSpacing` | `letterSpacings`
55 | `color` | `colors`
56 | `backgroundColor`, `bg` | `colors`
57 | `margin`, `m` | `space`
58 | `marginTop`, `mt` | `space`
59 | `marginRight`, `mr` | `space`
60 | `marginBottom`, `mb` | `space`
61 | `marginLeft`, `ml` | `space`
62 | `marginX`, `mx` | `space`
63 | `marginY`, `my` | `space`
64 | `padding`, `p` | `space`
65 | `paddingTop`, `pt` | `space`
66 | `paddingRight`, `pr` | `space`
67 | `paddingBottom`, `pb` | `space`
68 | `paddingLeft`, `pl` | `space`
69 | `paddingX`, `px` | `space`
70 | `paddingY`, `py` | `space`
71 | `border` | `borders`
72 | `borderTop` | `borders`
73 | `borderRight` | `borders`
74 | `borderBottom` | `borders`
75 | `borderLeft` | `borders`
76 | `borderColor` | `colors`
77 | `borderWidth` | `borderWidths`
78 | `borderStyle` | `borderStyles`
79 | `borderRadius` | `radii`
80 | `boxShadow` | `shadows`
81 | `zIndex` | `zIndices`
82 | `width` | `sizes`
83 | `minWidth` | `sizes`
84 | `maxWidth` | `sizes`
85 | `height` | `sizes`
86 | `minHeight` | `sizes`
87 | `maxHeight` | `sizes`
88 |
89 | ## Responsive Arrays
90 |
91 | All CSS properties accept arrays as values for responsive styles.
92 |
93 | ```jsx
94 |
99 | ```
100 |
101 | In this example, `fontSize` accepts an array, picking up values from the `theme.fontSizes` scale, and `borderBottom` is passed through as plain CSS.
102 |
103 | ```jsx
104 |
112 | ```
113 |
114 | MIT License
115 |
--------------------------------------------------------------------------------
/benchmarks/test.js:
--------------------------------------------------------------------------------
1 | const Benchmark = require('benchmark')
2 |
3 | const system = require('system-v4')
4 | const xstyled = require('@xstyled/system')
5 | const next = require('styled-system')
6 | const { css } = require('@styled-system/css')
7 |
8 | const theme = {
9 | breakpoints: [
10 | '32em', '48em', '64em',
11 | ],
12 | space: [
13 | 0, 4, 8, 16, 32, 64, 128, 256
14 | ],
15 | fontSizes: [
16 | 12, 14, 16, 24, 32, 48, 64
17 | ],
18 | colors: {
19 | text: 'black',
20 | background: 'white',
21 | primary: 'tomato',
22 | },
23 | }
24 |
25 | const tests = [
26 | {
27 | name: 'space',
28 | libs: {
29 | v4: system.space,
30 | v5: next.space,
31 | css: ({ theme, ...rest }) => css(rest)(theme),
32 | xstyled: xstyled.space,
33 | },
34 | run: fn => () => fn({
35 | theme,
36 | m: 0,
37 | mx: 'auto',
38 | mb: 2,
39 | px: [3, 4],
40 | py: [4, 5],
41 | })
42 | },
43 | {
44 | name: 'fontSize',
45 | libs: {
46 | v4: system.fontSize,
47 | v5: next.fontSize,
48 | css: ({ theme, ...rest }) => css(rest)(theme),
49 | xstyled: xstyled.fontSize,
50 | },
51 | run: fn => () => fn({
52 | theme,
53 | fontSize: 4,
54 | })
55 | },
56 | {
57 | name: 'fontSize responsive',
58 | libs: {
59 | v4: system.fontSize,
60 | v5: next.fontSize,
61 | css: ({ theme, ...rest }) => css(rest)(theme),
62 | xstyled: xstyled.fontSize,
63 | },
64 | run: fn => () => fn({
65 | theme,
66 | fontSize: [ 3, 4, 5, 6 ],
67 | })
68 | },
69 | {
70 | name: 'compose',
71 | libs: {
72 | v4: system.compose(
73 | system.space,
74 | system.color,
75 | system.fontSize,
76 | ),
77 | v5: next.compose(
78 | next.space,
79 | next.color,
80 | next.fontSize,
81 | ),
82 | css: ({ theme, ...rest }) => css(rest)(theme),
83 | xstyled: xstyled.compose(
84 | xstyled.space,
85 | xstyled.color,
86 | xstyled.fontSize,
87 | ),
88 | },
89 | run: fn => () => fn({
90 | theme,
91 | fontSize: [ 3, 4, 5, 6 ],
92 | m: 0,
93 | mx: 'auto',
94 | mb: 4,
95 | px: 4,
96 | py: [ 5, 6 ],
97 | bg: 'primary',
98 | })
99 | },
100 | ]
101 |
102 | const suite = new Benchmark.Suite()
103 |
104 | tests.forEach(test => {
105 | console.log(test.name)
106 | Object.keys(test.libs).forEach(key => {
107 | const fn = test.libs[key]
108 | const t = test.run(fn)
109 | // debugging
110 | console.log(key, t())
111 | suite.add(`${test.name}: ${key}`, t)
112 | })
113 | })
114 |
115 | suite
116 | .on('cycle', event => {
117 | console.log(String(event.target))
118 | })
119 | .on('complete', function onComplete() {
120 | console.log(`Fastest is ${this.filter('fastest').map('name')}`)
121 | })
122 | .run({ async: true })
123 |
--------------------------------------------------------------------------------
/docs/custom-props.md:
--------------------------------------------------------------------------------
1 | # Custom Style Props
2 |
3 | To extend Styled System for other CSS properties that aren't included in the library,
4 | use the [`system`](/api#system) utility to create your own style functions.
5 |
6 | All Styled System functions rely on these low-level utilities.
7 |
8 | - `system` creates a style prop function
9 | - `compose` combines multiple style prop functions into one
10 |
11 | ## Example
12 |
13 | ```jsx
14 | import styled from 'styled-components'
15 | import { system } from 'styled-system'
16 |
17 | const textDecoration = system({
18 | prop: 'textDecoration',
19 | cssProperty: 'textDecoration',
20 | })
21 |
22 | const Link = styled.a`
23 | ${system({
24 | textDecoration: true,
25 | fontWeight: {
26 | property: 'fontWeight',
27 | scale: 'fontWeights',
28 | },
29 | })}
30 | `
31 |
32 | export default Link
33 | ```
34 |
35 | The `system` function accepts an object with keys that represent style props for your component.
36 | Each key can define the following:
37 |
38 | - `property`: the CSS property to use in the returned style object
39 | - `properties`: an array of multiple properties (e.g. `[ 'marginLeft', 'marginRight' ]`)
40 | - `scale`: a string referencing a key in the `theme` object
41 | - `transform`: a function to transform the raw value based on the scale
42 | - `defaultScale` a fallback scale object for when there isn't one defined in the `theme` object
43 |
44 | ### `transform`
45 |
46 | By default, Styled System will return either a value from the theme, based on a key, or the raw value.
47 | To change how a style prop value is transformed, provide a custom `transform` function.
48 | The function takes two arguments: `(value, scale)`, where `value` is the raw prop value, and `scale` is a theme scale object or array.
49 |
50 | ### Shortcut definition
51 |
52 | If your style prop does not need to pick up values from the theme and the prop matches the intended CSS property, you can use a shortcut definition in the `system` function argument.
53 |
54 | ```js
55 | system({
56 | transition: true,
57 | })
58 | ```
59 |
60 | This will take the `transition` prop and translate it into a style object.
61 |
62 | ### Style prop function
63 |
64 | The `system` function returns a style prop function that can be used in Styled Components, Emotion, or other CSS-in-JS libraries.
65 | This function takes `props` as an argument and returns a style object.
66 | The style prop function includes a `.propNames` static array that can be used to detect which props the function accepts.
67 |
68 | ### Aliases
69 |
70 | To create aliases for props with the `system` function, add a key for the aliased prop name.
71 |
72 | ```js
73 | // example alias
74 | import { system } from 'styled-system'
75 |
76 | const config = {
77 | color: {
78 | property: 'color',
79 | scale: 'colors',
80 | },
81 | backgroundColor: {
82 | property: 'backgroundColor',
83 | scale: 'colors',
84 | },
85 | }
86 | // alias
87 | config.bg = config.backgroundColor
88 |
89 | export const color = system(config)
90 | ```
91 |
92 | ## Composition
93 |
94 | To combine multiple Styled System functions in a single component, use the `compose` utility.
95 |
96 | ```js
97 | import styled from 'styled-components'
98 | import { space, layout, color, compose } from 'styled-system'
99 |
100 | const Box = styled('div')(
101 | compose(
102 | space,
103 | layout,
104 | color
105 | )
106 | )
107 | ```
108 |
--------------------------------------------------------------------------------
/docs/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { graphql } from 'gatsby'
3 | import { Box, Styled, css } from 'theme-ui'
4 | import Layout from '../layout'
5 | import { Header, Container } from '../layout'
6 | import NavLink from '../nav-link'
7 | import Badges from '../badges.md'
8 | import Example from '../example.mdx'
9 | import Logos from '../logos.mdx'
10 | import GettingStarted from '../../getting-started.md'
11 | import Hex from '../logo/hex'
12 | import Button from '../button'
13 |
14 | export const query = graphql`
15 | query Index {
16 | site {
17 | siteMetadata {
18 | title
19 | description
20 | github
21 | install
22 | features
23 | quotes {
24 | text
25 | source
26 | href
27 | }
28 | }
29 | }
30 | }
31 | `
32 |
33 | const Columns = props => (
34 |
49 |
51 | {meta.description}
52 |
53 |
61 |
64 |
65 | GitHub
66 |
67 |
74 | npm i styled-system
75 |
76 |
77 |
78 |
79 |
81 |
82 | {meta.features.map(feature => (
83 |
93 | {feature}
94 |
95 | ))}
96 |
97 |
98 |
99 |
101 |
102 | {meta.quotes.map(quote => (
103 |
104 |
112 | “{quote.text}”
113 |
114 | – {quote.source}
115 |
116 | ))}
117 |
118 |
119 |
121 |
122 |
123 | )
124 |
125 | export default ({
126 | data: {
127 | site: { siteMetadata: meta },
128 | },
129 | }) => (
130 |
132 |
134 |
135 | )
136 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | - Using welcoming and inclusive language
18 | - Being respectful of differing viewpoints and experiences
19 | - Gracefully accepting constructive criticism
20 | - Focusing on what is best for the community
21 | - Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | - The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | - Trolling, insulting/derogatory comments, and personal or political attacks
28 | - Public or private harassment
29 | - Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | - Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at
59 | [jxnblk@gmail.com](mailto:jxnblk@gmail.com). All complaints will be reviewed
60 | and investigated and will result in a response that is deemed necessary and
61 | appropriate to the circumstances. The project team is obligated to maintain
62 | confidentiality with regard to the reporter of an incident. Further details of
63 | specific enforcement policies may be posted separately.
64 |
65 | Project maintainers who do not follow or enforce the Code of Conduct in good
66 | faith may face temporary or permanent repercussions as determined by other
67 | members of the project's leadership.
68 |
69 | ## Attribution
70 |
71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
72 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
73 |
74 | [homepage]: https://www.contributor-covenant.org
75 |
76 | For answers to common questions about this code of conduct, see
77 | https://www.contributor-covenant.org/faq
78 |
--------------------------------------------------------------------------------
/docs/src/pagination.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Location } from '@reach/router'
3 | import { ThemeProvider, css } from 'theme-ui'
4 | import Sidebar from './sidebar.mdx'
5 |
6 | const flattenLinks = children =>
7 | React.Children.toArray(children).reduce((acc, child) => {
8 | if (child.props && child.props.mdxType === 'a') {
9 | return [...acc, child]
10 | }
11 | if (!child.props || !child.props.children) return acc
12 | return React.Children.toArray([
13 | ...acc,
14 | ...flattenLinks(child.props.children),
15 | ])
16 | }, [])
17 |
18 | const PaginationWrapper = props => props.render(flattenLinks(props.children))
19 |
20 | const removeSlash = str => (str.length > 1 ? str.replace(/\/$/, '') : str)
21 | const removeHash = str => {
22 | const i = str.indexOf('#')
23 | if (i < 0) return str
24 | return str.slice(0, i)
25 | }
26 |
27 | export default () => (
28 | {
30 | return (
31 | {
36 | const index = links.findIndex(
37 | link =>
38 | removeHash(link.props.href) === removeSlash(location.pathname)
39 | )
40 | const hasPagination = index > -1
41 | const previous = links[index - 1]
42 | const next = links[index + 1]
43 |
44 | return (
45 |
60 |
102 | )
103 | }}
104 | />
105 | )
106 | }}
107 | />
108 | )
109 |
--------------------------------------------------------------------------------
/packages/space/src/index.js:
--------------------------------------------------------------------------------
1 | import { get, system } from '@styled-system/core'
2 |
3 | const defaults = {
4 | space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
5 | }
6 |
7 | const isNumber = n => typeof n === 'number' && !isNaN(n)
8 |
9 | const getMargin = (n, scale) => {
10 | if (!isNumber(n)) {
11 | return get(scale, n, n)
12 | }
13 |
14 | const isNegative = n < 0
15 | const absolute = Math.abs(n)
16 | const value = get(scale, absolute, absolute)
17 | if (!isNumber(value)) {
18 | return isNegative ? '-' + value : value
19 | }
20 | return value * (isNegative ? -1 : 1)
21 | }
22 |
23 | const configs = {}
24 | configs.margin = {
25 | margin: {
26 | property: 'margin',
27 | scale: 'space',
28 | transform: getMargin,
29 | defaultScale: defaults.space,
30 | },
31 | marginTop: {
32 | property: 'marginTop',
33 | scale: 'space',
34 | transform: getMargin,
35 | defaultScale: defaults.space,
36 | },
37 | marginRight: {
38 | property: 'marginRight',
39 | scale: 'space',
40 | transform: getMargin,
41 | defaultScale: defaults.space,
42 | },
43 | marginBottom: {
44 | property: 'marginBottom',
45 | scale: 'space',
46 | transform: getMargin,
47 | defaultScale: defaults.space,
48 | },
49 | marginLeft: {
50 | property: 'marginLeft',
51 | scale: 'space',
52 | transform: getMargin,
53 | defaultScale: defaults.space,
54 | },
55 | marginX: {
56 | properties: ['marginLeft', 'marginRight'],
57 | scale: 'space',
58 | transform: getMargin,
59 | defaultScale: defaults.space,
60 | },
61 | marginY: {
62 | properties: ['marginTop', 'marginBottom'],
63 | scale: 'space',
64 | transform: getMargin,
65 | defaultScale: defaults.space,
66 | },
67 | }
68 | configs.margin.m = configs.margin.margin
69 | configs.margin.mt = configs.margin.marginTop
70 | configs.margin.mr = configs.margin.marginRight
71 | configs.margin.mb = configs.margin.marginBottom
72 | configs.margin.ml = configs.margin.marginLeft
73 | configs.margin.mx = configs.margin.marginX
74 | configs.margin.my = configs.margin.marginY
75 |
76 | configs.padding = {
77 | padding: {
78 | property: 'padding',
79 | scale: 'space',
80 | defaultScale: defaults.space,
81 | },
82 | paddingTop: {
83 | property: 'paddingTop',
84 | scale: 'space',
85 | defaultScale: defaults.space,
86 | },
87 | paddingRight: {
88 | property: 'paddingRight',
89 | scale: 'space',
90 | defaultScale: defaults.space,
91 | },
92 | paddingBottom: {
93 | property: 'paddingBottom',
94 | scale: 'space',
95 | defaultScale: defaults.space,
96 | },
97 | paddingLeft: {
98 | property: 'paddingLeft',
99 | scale: 'space',
100 | defaultScale: defaults.space,
101 | },
102 | paddingX: {
103 | properties: ['paddingLeft', 'paddingRight'],
104 | scale: 'space',
105 | defaultScale: defaults.space,
106 | },
107 | paddingY: {
108 | properties: ['paddingTop', 'paddingBottom'],
109 | scale: 'space',
110 | defaultScale: defaults.space,
111 | },
112 | }
113 | configs.padding.p = configs.padding.padding
114 | configs.padding.pt = configs.padding.paddingTop
115 | configs.padding.pr = configs.padding.paddingRight
116 | configs.padding.pb = configs.padding.paddingBottom
117 | configs.padding.pl = configs.padding.paddingLeft
118 | configs.padding.px = configs.padding.paddingX
119 | configs.padding.py = configs.padding.paddingY
120 |
121 | export const margin = system(configs.margin)
122 | export const padding = system(configs.padding)
123 | export const space = system({ ...configs.margin, ...configs.padding })
124 |
125 | export default space
126 |
--------------------------------------------------------------------------------
/docs/gatsby-config.js:
--------------------------------------------------------------------------------
1 | const remarkPlugins = [require('remark-slug'), require('remark-unwrap-images')]
2 | const gatsbyRemarkPlugins = [
3 | {
4 | resolve: 'gatsby-remark-prismjs',
5 | options: {
6 | aliases: {
7 | sh: 'bash',
8 | js: 'javascript',
9 | },
10 | noInlineHighlight: true,
11 | },
12 | },
13 | ]
14 |
15 | module.exports = {
16 | siteMetadata: {
17 | title: 'Styled System',
18 | description: 'Style props for rapid UI development',
19 | author: '@jxnblk',
20 | install: 'npm i styled-system',
21 | github: 'https://github.com/styled-system/styled-system',
22 | quotes: [
23 | {
24 | text:
25 | 'This is honestly my favourite way to build UI components right now',
26 | source: 'Varun Vachhar',
27 | href: 'https://varun.ca/styled-system/',
28 | },
29 | {
30 | text:
31 | 'If you haven’t seen Styled System before, do yourself a favour and check it out. It’s been a huge influence in my thinking on component-oriented styles.',
32 | source: 'Mark Dalgleish',
33 | href:
34 | 'https://mobile.twitter.com/markdalgleish/status/1107732365474848768',
35 | },
36 | {
37 | text:
38 | 'The future of css-in-js is going to look something like styled-system with its responsive values.',
39 | source: 'Kye Hohenberger',
40 | href:
41 | 'https://mobile.twitter.com/kyehohenberger/status/905474043729416192',
42 | },
43 | {
44 | text:
45 | 'Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for.',
46 | source: 'Nathan Young',
47 | href:
48 | 'https://mobile.twitter.com/nathanyoung/status/891353221880360960',
49 | },
50 | {
51 | text:
52 | 'If you make websites/apps with React check out Styled System if you haven’t already. You will be amazed at how much faster you can build.',
53 |
54 | source: 'David Yeiser',
55 | href:
56 | 'https://mobile.twitter.com/davidyeiser/status/965920740582285312',
57 | },
58 | {
59 | text:
60 | 'If you like Tachyons you will love styled-system. If you don’t like Tachyons, you will love styled-system.',
61 | source: 'Adam Morse',
62 | href: 'https://mobile.twitter.com/mrmrs_/status/913189805055401984',
63 | },
64 | ],
65 | features: [
66 | 'Primitive building blocks for component-based design systems',
67 | 'Style props that pick up values from a global theme',
68 | 'Quickly set responsive font-size, margin, padding, width, and more',
69 | 'Inspired by constraint-based design system principles',
70 | 'Typographic scale for consistent design',
71 | 'Spacing scale for margin, padding, and layout',
72 | 'Supports any color palette',
73 | 'Works with most CSS-in-JS libraries, including styled-components and emotion',
74 | ],
75 | },
76 | plugins: [
77 | 'gatsby-plugin-emotion',
78 | 'gatsby-plugin-theme-ui',
79 | 'gatsby-plugin-react-helmet',
80 | {
81 | resolve: 'gatsby-source-filesystem',
82 | options: {
83 | name: 'docs',
84 | path: __dirname,
85 | ignore: ['**/public/**/*', '**/.cache/**/*'],
86 | },
87 | },
88 | {
89 | resolve: 'gatsby-plugin-mdx',
90 | options: {
91 | extensions: ['.md', '.mdx'],
92 | remarkPlugins,
93 | gatsbyRemarkPlugins,
94 | },
95 | },
96 | {
97 | resolve: 'gatsby-plugin-google-analytics',
98 | options: {
99 | trackingId: 'UA-4603832-13',
100 | },
101 | },
102 | ],
103 | }
104 |
--------------------------------------------------------------------------------
/packages/space/test/index.js:
--------------------------------------------------------------------------------
1 | import { space } from '../src'
2 |
3 | test('returns style objects', () => {
4 | const styles = space({
5 | m: '4px',
6 | })
7 | expect(styles).toEqual({ margin: '4px' })
8 | })
9 |
10 | test('returns 0 values', () => {
11 | const styles = space({ m: 0 })
12 | expect(styles).toEqual({ margin: 0 })
13 | })
14 |
15 | test('returns negative pixel values', () => {
16 | const styles = space({ m: -2 })
17 | expect(styles).toEqual({ margin: -8 })
18 | })
19 |
20 | test('returns negative em values', () => {
21 | const styles = space({ m: '-16em' })
22 | expect(styles).toEqual({ margin: '-16em' })
23 | })
24 |
25 | test('returns negative theme values', () => {
26 | const styles = space({
27 | theme: {
28 | space: [0, 4, 8],
29 | },
30 | m: -2,
31 | })
32 | expect(styles).toEqual({ margin: -8 })
33 | })
34 |
35 | test('returns positive theme values', () => {
36 | const styles = space({
37 | theme: {
38 | space: [0, '1em', '2em'],
39 | },
40 | m: 2,
41 | })
42 | expect(styles).toEqual({ margin: '2em' })
43 | })
44 |
45 | test('returns responsive values', () => {
46 | const styles = space({
47 | m: [0, 2, 3],
48 | })
49 | expect(styles).toEqual({
50 | margin: 0,
51 | '@media screen and (min-width: 40em)': { margin: 8 },
52 | '@media screen and (min-width: 52em)': { margin: 16 },
53 | })
54 | })
55 |
56 | test('returns aliased values', () => {
57 | const styles = space({
58 | px: 2,
59 | })
60 | expect(styles).toEqual({ paddingLeft: 8, paddingRight: 8 })
61 | })
62 |
63 | test('returns string values from theme', () => {
64 | const styles = space({
65 | theme: {
66 | space: [0, '1em'],
67 | },
68 | padding: 1,
69 | })
70 | expect(styles).toEqual({ padding: '1em' })
71 | })
72 |
73 | test('returns negative string values from theme', () => {
74 | const styles = space({
75 | theme: {
76 | space: [0, '1em'],
77 | },
78 | margin: -1,
79 | })
80 | expect(styles).toEqual({ margin: '-1em' })
81 | })
82 |
83 | test('returns values from theme object', () => {
84 | const styles = space({
85 | theme: {
86 | space: { sm: 1 },
87 | },
88 | margin: 'sm',
89 | })
90 | expect(styles).toEqual({ margin: 1 })
91 | })
92 |
93 | test('pl prop sets paddingLeft', () => {
94 | const styles = space({ pl: 2 })
95 | expect(styles).toEqual({ paddingLeft: 8 })
96 | })
97 |
98 | test('pl prop sets paddingLeft 0', () => {
99 | const styles = space({ pl: 0 })
100 | expect(styles).toEqual({ paddingLeft: 0 })
101 | })
102 |
103 | test('px prop overrides pl prop', () => {
104 | const styles = space({
105 | pl: 1,
106 | px: 2,
107 | })
108 | expect(styles).toEqual({ paddingLeft: 8, paddingRight: 8 })
109 | })
110 |
111 | test('py prop overrides pb prop', () => {
112 | const styles = space({
113 | pb: 1,
114 | py: 2,
115 | })
116 | expect(styles).toEqual({ paddingTop: 8, paddingBottom: 8 })
117 | })
118 |
119 | test('mx prop overrides mr prop', () => {
120 | const styles = space({
121 | mr: 1,
122 | mx: 2,
123 | })
124 | expect(styles).toEqual({ marginLeft: 8, marginRight: 8 })
125 | })
126 |
127 | test('my prop overrides mt prop', () => {
128 | const styles = space({
129 | mt: 1,
130 | my: 2,
131 | })
132 | expect(styles).toEqual({ marginTop: 8, marginBottom: 8 })
133 | })
134 |
135 | test('margin overrides m prop', () => {
136 | const styles = space({
137 | m: 1,
138 | margin: 2,
139 | })
140 | expect(styles).toEqual({ margin: 8 })
141 | })
142 |
143 | test('handles margin with no theme', () => {
144 | const styles = space({
145 | mt: 12,
146 | })
147 | expect(styles).toEqual({
148 | marginTop: 12,
149 | })
150 | })
151 |
--------------------------------------------------------------------------------
/packages/styled-system/src/index.js:
--------------------------------------------------------------------------------
1 | import { createStyleFunction, createParser } from '@styled-system/core'
2 |
3 | export {
4 | get,
5 | createParser,
6 | createStyleFunction,
7 | compose,
8 | system,
9 | } from '@styled-system/core'
10 |
11 | export { margin, padding, space } from '@styled-system/space'
12 | export { color } from '@styled-system/color'
13 | export { layout } from '@styled-system/layout'
14 | export { typography } from '@styled-system/typography'
15 | export { flexbox } from '@styled-system/flexbox'
16 | export { border } from '@styled-system/border'
17 | export { background } from '@styled-system/background'
18 | export { position } from '@styled-system/position'
19 | export { grid } from '@styled-system/grid'
20 | export { shadow } from '@styled-system/shadow'
21 | export { default as boxShadow, default as textShadow } from '@styled-system/shadow'
22 |
23 | export {
24 | variant,
25 | buttonStyle,
26 | textStyle,
27 | colorStyle
28 | } from '@styled-system/variant'
29 |
30 | // v4 api shims
31 | export {
32 | default as width,
33 | default as height,
34 | default as minWidth,
35 | default as minHeight,
36 | default as maxWidth,
37 | default as maxHeight,
38 | default as size,
39 | default as verticalAlign,
40 | default as display,
41 | default as overflow,
42 | } from '@styled-system/layout'
43 | export { default as opacity } from '@styled-system/color'
44 | export {
45 | default as fontSize,
46 | default as fontFamily,
47 | default as fontWeight,
48 | default as lineHeight,
49 | default as textAlign,
50 | default as fontStyle,
51 | default as letterSpacing,
52 | } from '@styled-system/typography'
53 | export {
54 | default as alignItems,
55 | default as alignContent,
56 | default as justifyItems,
57 | default as justifyContent,
58 | default as flexWrap,
59 | default as flexDirection,
60 | default as flex,
61 | default as flexGrow,
62 | default as flexShrink,
63 | default as flexBasis,
64 | default as justifySelf,
65 | default as alignSelf,
66 | default as order,
67 | } from '@styled-system/flexbox'
68 | export {
69 | default as gridGap,
70 | default as gridColumnGap,
71 | default as gridRowGap,
72 | default as gridColumn,
73 | default as gridRow,
74 | default as gridAutoFlow,
75 | default as gridAutoColumns,
76 | default as gridAutoRows,
77 | default as gridTemplateColumns,
78 | default as gridTemplateRows,
79 | default as gridTemplateAreas,
80 | default as gridArea,
81 | } from '@styled-system/grid'
82 | export {
83 | default as borderWidth,
84 | default as borderStyle,
85 | default as borderColor,
86 | default as borderTop,
87 | default as borderRight,
88 | default as borderBottom,
89 | default as borderLeft,
90 | default as borderRadius,
91 | default as borders,
92 | } from '@styled-system/border'
93 | export {
94 | default as backgroundImage,
95 | default as backgroundSize,
96 | default as backgroundPosition,
97 | default as backgroundRepeat,
98 | } from '@styled-system/background'
99 | export {
100 | default as zIndex,
101 | default as top,
102 | default as right,
103 | default as bottom,
104 | default as left,
105 | } from '@styled-system/position'
106 |
107 | // v4 style API shim
108 | export const style = ({
109 | prop,
110 | cssProperty,
111 | alias,
112 | key,
113 | transformValue,
114 | scale,
115 | // new api
116 | properties,
117 | }) => {
118 | const config = {}
119 | config[prop] = createStyleFunction({
120 | properties,
121 | property: cssProperty || prop,
122 | scale: key,
123 | defaultScale: scale,
124 | transform: transformValue,
125 | })
126 | if (alias) config[alias] = config[prop]
127 | const parse = createParser(config)
128 |
129 | return parse
130 | }
131 |
--------------------------------------------------------------------------------
/docs/guides/array-scales.md:
--------------------------------------------------------------------------------
1 | # Array Scales
2 |
3 | Using arrays for theme constants and style props can seem off-putting to some at first,
4 | but can quickly become second-nature with a little effort.
5 | The rationale for using arrays for design scales stems from the idea of constraint-based design.
6 | Before using something like Styled System, it can seem scary to commit to such a limited data type,
7 | but Styled System gives you a few escape hatches in the rare cases where you need to "break out" of the constraints encouraged in this library.
8 |
9 | The first question that comes up with approaches like this is always, "what if...".
10 | In software development, some people think that duplication is better than the wrong abstraction.
11 | I tend to agree with this sentiment.
12 | Instead of asking _what if_, I encourage you to try the Styled System approach in a smaller application and see if the benefits
13 | of the constraints with this approach outweight the limitations.
14 | When using Styled System on a multidisciplinary team, you'll want to make sure you're entire team, including designers,
15 | are on board, but from my experience, many designers will want to work with constraints like the ones
16 | encouraged here.
17 |
18 | ## Breakpoints
19 |
20 | The `breakpoints` scale in Styled System is one of the most difficult to alter after introducing this library to an application.
21 | It's recommended to audit the breakpoints that are currently in use and try to normalize them as much as possible.
22 | Some people like to have a dozen or more breakpoints, but the reality of responsive design is that there are essentially two breakpoints: mobile and not-mobile.
23 | You'll probably want more than two breakpoints to help with typographic style, but the most common responsive layouts
24 | rarely do anything extremely complex.
25 | Embrace your inner minimalist and see how much you can simplify your design system.
26 |
27 | ## Space, Font Sizes, and Other Scales
28 |
29 | Using a consistent typographic scale and a limited set of spacing values are widely regarded as good practices in visual design.
30 | By encoding these constraints with a library like Styled System, you can greatly speed up your development velocity
31 | while making the visual design of your application inheritly more consistent.
32 | Don't spend too much time debating what values to use in your `fontSizes` scale or
33 | trying to boil the ocean.
34 | Audit your current styles, normalize them, and decide on a good starting point with your team.
35 | If you're unsure whether or not you might need a `13px` font size at some point in the future, don't sweat it,
36 | because Styled System has a few options for handling those edge cases.
37 |
38 | ## Exceptions
39 |
40 | Exceptions to the rule are to be expected.
41 | Sometimes you're working on a tight deadline trying to close that ticket hours before the sprint is over.
42 | It's okay if you have to break out of your design scales in some cases.
43 | Just make sure you don't make too much of a habit out of it, and that it doesn't cause any styling side effects that you can't handle.
44 | If you need to use a font size in one component that isn't part of your system, use a hard-coded value like `fontSize='13px'`.
45 | It should be right where you need it and easy to delete and forget about when you refactor the code.
46 | Optimize for throw-away code in situations like these.
47 |
48 | ## Aliases
49 |
50 | If you've used JavaScript arrays to define your scales, you can easily add aliases to those arrays by defining custom keys.
51 | For example, say your `fontSizes` scale looks like the following:
52 |
53 | ```js
54 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96]
55 | ```
56 |
57 | You find yourself using an `18px` font size in a lot of different places and don't want to hard-code that value throughout your application.
58 | You can add a custom alias to the `fontSizes` for any values like this that crop up over time.
59 |
60 | ```js
61 | // example alias
62 | fontSizes.lede = 18
63 | ```
64 |
65 | With this exceptional alias value added, you can now use it with the prop `fontSize='lede'`.
66 |
67 |
70 |
--------------------------------------------------------------------------------
/packages/jsx/test/index.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import jsx from '../src'
3 | import renderer from 'react-test-renderer'
4 | import serializer, { matchers } from 'jest-emotion'
5 | import { ThemeContext } from '@emotion/core'
6 |
7 | expect.addSnapshotSerializer(serializer)
8 | expect.extend(matchers)
9 |
10 | const renderJSON = el => renderer.create(el).toJSON()
11 |
12 | const theme = {
13 | colors: {
14 | primary: '#609',
15 | },
16 | }
17 |
18 | test('renders with styles', () => {
19 | const json = renderJSON(
20 |
25 | )
26 | expect(json).toHaveStyleRule('color', 'tomato')
27 | })
28 |
29 | test('renders with responsive styles', () => {
30 | const json = renderJSON(
31 |
36 | )
37 | expect(json).toHaveStyleRule('padding', '4px')
38 | expect(json).toHaveStyleRule('padding', '8px', {
39 | media: 'screen and (min-width: 40em)',
40 | })
41 | expect(json).toHaveStyleRule('padding', '16px', {
42 | media: 'screen and (min-width: 52em)',
43 | })
44 | })
45 |
46 | test('renders with shorthand props', () => {
47 | const json = renderJSON(
48 |
55 | )
56 | expect(json).toHaveStyleRule('margin', '8px')
57 | expect(json).toHaveStyleRule('padding', '16px')
58 | expect(json).toHaveStyleRule('background-color', 'tomato')
59 | })
60 |
61 | test('renders with theme values', () => {
62 | const json = renderJSON(
63 |
64 |
69 |
70 | )
71 | expect(json).toHaveStyleRule('color', '#609')
72 | })
73 |
74 | test('renders nested styles', () => {
75 | const json = renderJSON(
76 |
83 | )
84 | expect(json).toHaveStyleRule('color', 'tomato', {
85 | target: ':hover',
86 | })
87 | })
88 |
89 | test('renders bi-directional props', () => {
90 | const json = renderJSON(
91 |
98 | )
99 | expect(json).toHaveStyleRule('padding-left', '8px')
100 | expect(json).toHaveStyleRule('padding-right', '8px')
101 | expect(json).toHaveStyleRule('padding-top', '16px')
102 | expect(json).toHaveStyleRule('padding-bottom', '16px')
103 | expect(json).toHaveStyleRule('margin-top', '32px')
104 | expect(json).toHaveStyleRule('margin-bottom', '32px')
105 | })
106 |
107 | test('renders with functional arguments', () => {
108 | const json = renderJSON(
109 |
67 | {hasPagination &&
68 | previous &&
69 | React.cloneElement(
70 | previous,
71 | {},
72 |
101 |
73 |
82 | )}
83 |
84 | {hasPagination &&
85 | next &&
86 | React.cloneElement(
87 | next,
88 | {},
89 |
78 | Previous:
79 |
80 | {previous.props.children}
81 |
90 |
99 | )}
100 |
95 | Next:
96 |
97 | {next.props.children}
98 | ({
111 | color: 'purple',
112 | })}
113 | />
114 | )
115 | expect(json).toHaveStyleRule('color', 'purple')
116 | })
117 |
118 | test('renders without props', () => {
119 | const json = renderJSON()
120 | expect(json.type).toBe('div')
121 | expect(json.props).toEqual({})
122 | })
123 |
124 | test('renders functional values', () => {
125 | const json = renderJSON(
126 |
127 |
`1px solid ${t.colors.primary}`,
130 | }}
131 | />
132 |
133 | )
134 | expect(json).toHaveStyleRule('border', '1px solid #609')
135 | })
136 |
137 | test('picks up fallback theme values for non-standard properties', () => {
138 | const json = renderJSON(
139 |
146 |
151 |
152 | )
153 | expect(json).toHaveStyleRule(
154 | 'background-image',
155 | 'linear-gradient(cyan,magenta)'
156 | )
157 | })
158 |
--------------------------------------------------------------------------------
/docs/packages.md:
--------------------------------------------------------------------------------
1 | # Styled System Packages
2 |
3 | The main `styled-system` package is composed of several other packages that can be installed and used on their own for special use-cases.
4 |
5 | | Package Name | Exports |
6 | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
7 | | [`@styled-system/core`](https://github.com/styled-system/styled-system/tree/master/packages/core) | `system`, `createParser`, `createStyleFunction`, `get` |
8 | | [`@styled-system/space`](https://github.com/styled-system/styled-system/tree/master/packages/space) | `space`, `margin`, `padding` |
9 | | [`@styled-system/color`](https://github.com/styled-system/styled-system/tree/master/packages/color) | `color` |
10 | | [`@styled-system/layout`](https://github.com/styled-system/styled-system/tree/master/packages/layout) | `layout` |
11 | | [`@styled-system/typography`](https://github.com/styled-system/styled-system/tree/master/packages/typography) | `typography` |
12 | | [`@styled-system/flexbox`](https://github.com/styled-system/styled-system/tree/master/packages/flexbox) | `flexbox` |
13 | | [`@styled-system/border`](https://github.com/styled-system/styled-system/tree/master/packages/border) | `border` |
14 | | [`@styled-system/background`](https://github.com/styled-system/styled-system/tree/master/packages/background) | `background` |
15 | | [`@styled-system/position`](https://github.com/styled-system/styled-system/tree/master/packages/position) | `position` |
16 | | [`@styled-system/grid`](https://github.com/styled-system/styled-system/tree/master/packages/grid) | `grid` |
17 | | [`@styled-system/shadow`](https://github.com/styled-system/styled-system/tree/master/packages/shadow) | `shadow` |
18 | | [`@styled-system/variant`](https://github.com/styled-system/styled-system/tree/master/packages/variant) | `variant`, `textStyle` `buttonStyle`, `colorStyle` |
19 |
20 | The Styled System ecosystem also includes these optional packages
21 |
22 | | Package Name | Description |
23 | | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
24 | | [`@styled-system/css`](https://github.com/styled-system/styled-system/tree/master/packages/css) | Styled System for the `css` prop |
25 | | [`@styled-system/jsx`](https://github.com/styled-system/styled-system/tree/master/packages/jsx) | Custom JSX pragma for using Styled System with the `css` prop |
26 | | [`@styled-system/should-forward-prop`](https://github.com/styled-system/styled-system/tree/master/packages/should-forward-prop) | Utility for filtering Styled System props with Emotion's shouldForwardProp option |
27 | | [`@styled-system/prop-types`](https://github.com/styled-system/styled-system/tree/master/packages/prop-types) | Prop type definitions for components built with Styled System |
28 | | [`@styled-system/theme-get`](https://github.com/styled-system/styled-system/tree/master/packages/theme-get) | Utility to safely access values from a theme |
29 | | [`@styled-system/edit`](https://github.com/styled-system/styled-system/tree/master/packages/edit) | Debugging components for live editing Styled System theme objects |
30 |
--------------------------------------------------------------------------------
/docs/guides/color-modes.md:
--------------------------------------------------------------------------------
1 | # Color Modes
2 |
3 | While there are many different ways to handle theming in a web application,
4 | there are just as many ways to handle color schemes.
5 | A common feature of modern web applications is including an optional dark mode.
6 | Usually a dark mode feature includes changes to the colors of a site without changing other typographic or layout styles.
7 | This guide will walk through one approach (the one used on this site) that includes multiple color modes that can be changed by the end user.
8 |
9 | Since the only styles that change between these color modes are the colors themselves, the different color palettes are stored in the `theme.colors` object.
10 | If you look at this site's [`src/theme.js`][] file, you'll see that it includes a nested `colors.modes` object for the different color schemes.
11 | Each color mode object matches the same shape as the base default colors and uses a simple naming abstraction for setting colors for the text, background, links, and other styles.
12 | This site's colors object looks something like the following:
13 |
14 | ```js
15 | const colors = {
16 | text: '#000',
17 | background: '#fff',
18 | primary: '#00f',
19 | secondary: '#00a',
20 | gray: '#eee',
21 | lightgray: '#fafafa',
22 | modes: {
23 | dark: {
24 | text: '#fff',
25 | background: '#000',
26 | primary: '#0cf',
27 | secondary: '#f0e',
28 | gray: '#222',
29 | lightgray: '#111',
30 | },
31 | // other color modes...
32 | },
33 | }
34 | ```
35 |
36 | ## Using the theme colors
37 |
38 | By default the base colors are picked up by other components using Styled System. For example, the root layout component uses Emotion's `Global` component to set text and background colors.
39 |
40 | ```jsx
41 | // example
42 | {/* application elements */}
86 | )
87 | }
88 | ```
89 |
90 | Next you'll want to add the UI controls for changing between color modes.
91 | With this basic approach, you should be able to add as many different color modes to your site as you wish.
92 | Be sure that _all_ components within your application are using color values from the theme (not hard-coded values) in order for this to work as expected.
93 |
94 | There are other ways to achieve a similar effect – this just demonstrates one approach.
95 | For a different approach to persisting data, you may want to look into the [`prefers-color-scheme`][] media query, but it only handles binary `light` or `dark` modes.
96 | You might also want to look into [CSS Custom Properties][],
97 | which can be defined as inline styles, but be aware that they are not supported in IE11.
98 |
99 | [`src/theme.js`]: https://github.com/styled-system/styled-system/blob/master/docs/src/theme.js
100 | [`prefers-color-scheme`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
101 | [css custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
102 |
103 |
107 |
--------------------------------------------------------------------------------
/packages/core/src/index.js:
--------------------------------------------------------------------------------
1 | import assign from 'object-assign'
2 |
3 | export const merge = (a, b) => {
4 | let result = assign({}, a, b)
5 | for (const key in a) {
6 | if (!a[key] || typeof b[key] !== 'object') continue
7 | assign(result, {
8 | [key]: assign(a[key], b[key]),
9 | })
10 | }
11 | return result
12 | }
13 |
14 | const defaults = {
15 | breakpoints: [40, 52, 64].map(n => n + 'em'),
16 | }
17 | const createMediaQuery = n => `@media screen and (min-width: ${n})`
18 | const getValue = (n, scale) => get(scale, n, n)
19 |
20 | export const get = (obj, key, def, p, undef) => {
21 | key = key && key.split ? key.split('.') : [key]
22 | for (p = 0; p < key.length; p++) {
23 | obj = obj ? obj[key[p]] : undef
24 | }
25 | return obj === undef ? def : obj
26 | }
27 |
28 | export const createParser = config => {
29 | const cache = {}
30 | const parse = props => {
31 | let styles = {}
32 | for (const key in props) {
33 | if (!config[key]) continue
34 | const sx = config[key]
35 | const raw = props[key]
36 | const scale = get(props.theme, sx.scale, sx.defaults)
37 |
38 | if (typeof raw === 'object') {
39 | cache.breakpoints =
40 | cache.breakpoints ||
41 | get(props.theme, 'breakpoints', defaults.breakpoints)
42 | if (Array.isArray(raw)) {
43 | cache.media = cache.media || [
44 | null,
45 | ...cache.breakpoints.map(createMediaQuery),
46 | ]
47 | styles = merge(
48 | styles,
49 | parseResponsiveStyle(cache.media, sx, scale, raw)
50 | )
51 | continue
52 | }
53 | if (raw !== null) {
54 | styles = merge(
55 | styles,
56 | parseResponsiveObject(cache.breakpoints, sx, scale, raw)
57 | )
58 | }
59 | continue
60 | }
61 |
62 | assign(styles, sx(raw, scale))
63 | }
64 |
65 | return styles
66 | }
67 | parse.config = config
68 | parse.propNames = Object.keys(config)
69 | parse.cache = cache
70 | return parse
71 | }
72 |
73 | const parseResponsiveStyle = (mediaQueries, sx, scale, raw) => {
74 | let styles = {}
75 | raw.slice(0, mediaQueries.length).forEach((value, i) => {
76 | const media = mediaQueries[i]
77 | const style = sx(value, scale)
78 | if (style === undefined) return
79 | if (!media) {
80 | assign(styles, style)
81 | } else {
82 | assign(styles, {
83 | [media]: assign({}, styles[media], style),
84 | })
85 | }
86 | })
87 | return styles
88 | }
89 |
90 | const parseResponsiveObject = (breakpoints, sx, scale, raw) => {
91 | let styles = {}
92 | for (let key in raw) {
93 | const breakpoint = breakpoints[key]
94 | const value = raw[key]
95 | const style = sx(value, scale)
96 | if (!breakpoint) {
97 | assign(styles, style)
98 | } else {
99 | const media = createMediaQuery(breakpoint)
100 | assign(styles, {
101 | [media]: assign({}, styles[media], style),
102 | })
103 | }
104 | }
105 | return styles
106 | }
107 |
108 | export const createStyleFunction = ({
109 | properties,
110 | property,
111 | scale,
112 | transform = getValue,
113 | defaultScale,
114 | }) => {
115 | properties = properties || [property]
116 | const sx = (value, scale) => {
117 | const result = {}
118 | const n = transform(value, scale)
119 | if (n === null) return
120 | properties.forEach(prop => {
121 | result[prop] = n
122 | })
123 | return result
124 | }
125 | sx.scale = scale
126 | sx.defaults = defaultScale
127 | return sx
128 | }
129 |
130 | // new v5 API
131 | export const system = (args = {}) => {
132 | const config = {}
133 | Object.keys(args).forEach(key => {
134 | const conf = args[key]
135 | if (conf === true) {
136 | // shortcut definition
137 | config[key] = createStyleFunction({
138 | property: key,
139 | scale: key,
140 | })
141 | return
142 | }
143 | config[key] = createStyleFunction(conf)
144 | })
145 |
146 | const parser = createParser(config)
147 | return parser
148 | }
149 |
150 | export const compose = (...parsers) => {
151 | let config = {}
152 | parsers.forEach(parser => {
153 | if (!parser || !parser.config) return
154 | assign(config, parser.config)
155 | })
156 | const parser = createParser(config)
157 |
158 | return parser
159 | }
160 |
--------------------------------------------------------------------------------
/packages/core/test/system.js:
--------------------------------------------------------------------------------
1 | import { system } from '../src'
2 |
3 | test('returns a style parser', () => {
4 | const parser = system({
5 | color: true,
6 | backgroundColor: {
7 | property: 'backgroundColor',
8 | scale: 'colors',
9 | },
10 | mx: {
11 | scale: 'space',
12 | properties: ['marginLeft', 'marginRight'],
13 | },
14 | })
15 | expect(typeof parser).toBe('function')
16 | const styles = parser({
17 | theme: {
18 | space: [0, 4, 8, 16, 32],
19 | colors: {
20 | primary: 'rebeccapurple',
21 | },
22 | },
23 | color: 'tomato',
24 | backgroundColor: 'primary',
25 | mx: [2, 3, 4],
26 | })
27 | expect(styles).toEqual({
28 | color: 'tomato',
29 | backgroundColor: 'rebeccapurple',
30 | marginLeft: 8,
31 | marginRight: 8,
32 | '@media screen and (min-width: 40em)': {
33 | marginLeft: 16,
34 | marginRight: 16,
35 | },
36 | '@media screen and (min-width: 52em)': {
37 | marginLeft: 32,
38 | marginRight: 32,
39 | },
40 | })
41 | })
42 |
43 | test('merges multiple responsive styles', () => {
44 | const parser = system({
45 | margin: true,
46 | padding: true,
47 | width: true,
48 | })
49 | const styles = parser({
50 | margin: [0, 4, 8],
51 | padding: [16, 32, 64],
52 | width: ['100%', '50%'],
53 | })
54 | expect(styles).toEqual({
55 | margin: 0,
56 | padding: 16,
57 | width: '100%',
58 | '@media screen and (min-width: 40em)': {
59 | margin: 4,
60 | padding: 32,
61 | width: '50%',
62 | },
63 | '@media screen and (min-width: 52em)': {
64 | margin: 8,
65 | padding: 64,
66 | },
67 | })
68 | })
69 |
70 | test('merges multiple responsive object styles', () => {
71 | const parser = system({
72 | margin: true,
73 | padding: true,
74 | width: true,
75 | })
76 | const styles = parser({
77 | margin: { _: 0, 0: 4, 1: 8 },
78 | padding: { _: 16, 0: 32, 1: 64 },
79 | width: { _: '100%', 0: '50%' },
80 | })
81 | expect(styles).toEqual({
82 | margin: 0,
83 | padding: 16,
84 | width: '100%',
85 | '@media screen and (min-width: 40em)': {
86 | margin: 4,
87 | padding: 32,
88 | width: '50%',
89 | },
90 | '@media screen and (min-width: 52em)': {
91 | margin: 8,
92 | padding: 64,
93 | },
94 | })
95 | })
96 |
97 | test('gets values from theme', () => {
98 | const parser = system({
99 | mx: {
100 | properties: ['marginLeft', 'marginRight'],
101 | scale: 'space',
102 | },
103 | color: {
104 | property: 'color',
105 | scale: 'colors',
106 | },
107 | })
108 | const style = parser({
109 | theme: {
110 | colors: {
111 | primary: 'tomato',
112 | },
113 | space: [0, 6, 12, 24, 48, 96],
114 | },
115 | mx: [0, 1, 2, 3],
116 | color: ['primary', 'black'],
117 | })
118 | expect(style).toEqual({
119 | color: 'tomato',
120 | marginLeft: 0,
121 | marginRight: 0,
122 | '@media screen and (min-width: 40em)': {
123 | color: 'black',
124 | marginLeft: 6,
125 | marginRight: 6,
126 | },
127 | '@media screen and (min-width: 52em)': {
128 | marginLeft: 12,
129 | marginRight: 12,
130 | },
131 | '@media screen and (min-width: 64em)': {
132 | marginLeft: 24,
133 | marginRight: 24,
134 | },
135 | })
136 | })
137 |
138 | test('gets 0 index values from theme', () => {
139 | const parser = system({
140 | width: {
141 | property: 'width',
142 | scale: 'sizes',
143 | }
144 | })
145 | const style = parser({
146 | theme: {
147 | sizes: [ 24, 48 ],
148 | },
149 | width: 0,
150 | })
151 | expect(style).toEqual({ width: 24 })
152 | })
153 |
154 | test('ignores null values', () => {
155 | const parser = system({
156 | color: true,
157 | })
158 | const style = parser({ color: null })
159 | expect(style).toEqual({})
160 | })
161 |
162 | test('returns a noop function with no arguments', () => {
163 | const parser = system()
164 | expect(typeof parser).toBe('function')
165 | })
166 |
167 | test('skips null values in arrays', () => {
168 | const parser = system({
169 | fontSize: true,
170 | })
171 | const style = parser({
172 | fontSize: [ 16, null, null, 18 ],
173 | })
174 | expect(style).toEqual({
175 | fontSize: 16,
176 | '@media screen and (min-width: 64em)': {
177 | fontSize: 18,
178 | }
179 | })
180 | })
181 |
--------------------------------------------------------------------------------
/docs/src/layout.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from '@emotion/styled'
3 | import { flexDirection } from 'styled-system'
4 | import { useAppContext } from './index'
5 | import NavLink from './nav-link'
6 | import { Box, css, useColorMode } from 'theme-ui'
7 | import Burger from './burger'
8 | import Sidebar from './sidebar'
9 | import Pagination from './pagination'
10 | import EditLink from './edit-link'
11 |
12 | const HeaderRoot = styled(Box)(
13 | css({
14 | width: '100%',
15 | height: 64,
16 | display: 'flex',
17 | alignItems: 'center',
18 | position: 'relative',
19 | zIndex: 2,
20 | bg: 'background',
21 | '@media screen and (max-width: 40em)': {
22 | position: 'fixed',
23 | top: 0,
24 | left: 0,
25 | right: 0,
26 | },
27 | })
28 | )
29 | const HeaderSpacer = styled.div(
30 | css({
31 | display: 'none',
32 | '@media screen and (max-width: 40em)': {
33 | display: 'block',
34 | height: 64,
35 | },
36 | })
37 | )
38 |
39 | const modes = ['light', 'dark', 'gray', 'cyan', 'book']
40 |
41 | export const Header = ({ sidebar = true, ...props }) => {
42 | const [mode, setMode] = useColorMode()
43 | const state = useAppContext()
44 | const cycleMode = () => {
45 | const i = (modes.indexOf(mode) + 1) % modes.length
46 | setMode(modes[i])
47 | }
48 |
49 | return (
50 | <>
51 |
52 |
60 | Styled System
61 |
62 |
108 |
158 | state.setOpen(false)} />}
160 | {banner}
161 |
162 | state.setOpen(false)}
165 | width={[1, 256, 320]}
166 | />
167 |
172 | {props.children}
173 |
176 |
177 |
178 | )
179 | }
180 |
--------------------------------------------------------------------------------
/packages/styled-system/test/styles.js:
--------------------------------------------------------------------------------
1 | import {
2 | color,
3 | width,
4 | fontSize,
5 | size,
6 | gridGap,
7 | gridRowGap,
8 | gridColumnGap,
9 | borders,
10 | shadow,
11 | } from '../src'
12 |
13 | const theme = {
14 | colors: {
15 | blue: '#07c',
16 | black: '#111',
17 | },
18 | }
19 |
20 | test('returns color values from theme', () => {
21 | const a = color({ theme, color: 'blue', bg: 'black' })
22 | expect(a).toEqual({ color: '#07c', backgroundColor: '#111' })
23 | })
24 |
25 | test('returns raw color values', () => {
26 | const a = color({
27 | theme,
28 | color: 'inherit',
29 | bg: 'tomato',
30 | })
31 | expect(a).toEqual({ color: 'inherit', backgroundColor: 'tomato' })
32 | })
33 |
34 | test.skip('backgroundColor prop overrides bg prop', () => {
35 | const a = color({
36 | backgroundColor: 'tomato',
37 | bg: 'blue',
38 | })
39 | expect(a).toEqual({ backgroundColor: 'tomato' })
40 | })
41 |
42 | test('returns a pixel font-size', () => {
43 | const a = fontSize({ fontSize: 48 })
44 | expect(a).toEqual({ fontSize: 48 })
45 | })
46 |
47 | test('uses a default font-size scale', () => {
48 | const a = fontSize({ fontSize: 2 })
49 | expect(a).toEqual({ fontSize: 16 })
50 | })
51 |
52 | test('returns a string font-size', () => {
53 | const a = fontSize({ fontSize: '2em' })
54 | expect(a).toEqual({ fontSize: '2em' })
55 | })
56 |
57 | test('returns a percentage based width', () => {
58 | const a = width({ width: 1 / 2 })
59 | expect(a).toEqual({ width: '50%' })
60 | })
61 |
62 | test('returns a pixel based width', () => {
63 | const a = width({ width: 256 })
64 | expect(a).toEqual({ width: 256 })
65 | })
66 |
67 | test('returns a string width', () => {
68 | const a = width({ width: 'auto' })
69 | expect(a).toEqual({ width: 'auto' })
70 | })
71 |
72 | test('returns a width based on theme.sizes', () => {
73 | const a = width({
74 | theme: {
75 | sizes: [24, 48],
76 | },
77 | width: 1,
78 | })
79 | expect(a).toEqual({ width: 48 })
80 | })
81 |
82 | test('returns fractional responsive widths', () => {
83 | const a = width({
84 | width: [1, 1 / 2, 1 / 4],
85 | })
86 | expect(a).toEqual({
87 | width: '100%',
88 | '@media screen and (min-width: 40em)': {
89 | width: '50%',
90 | },
91 | '@media screen and (min-width: 52em)': {
92 | width: '25%',
93 | },
94 | })
95 | })
96 |
97 | test('size returns width and height', () => {
98 | const styles = size({
99 | size: 4,
100 | })
101 | expect(styles).toEqual({ width: 4, height: 4 })
102 | })
103 |
104 | // grid
105 | test('gridGap returns a scalar style', () => {
106 | const a = gridGap({
107 | theme: {
108 | space: [0, 2, 4, 8],
109 | },
110 | gridGap: 3,
111 | })
112 | expect(a).toEqual({ gridGap: 8 })
113 | })
114 |
115 | test('gridGap uses the default scale', () => {
116 | const a = gridGap({
117 | theme: {},
118 | gridGap: 2,
119 | })
120 | expect(a).toEqual({ gridGap: 8 })
121 | })
122 |
123 | test('gridRowGap returns a scalar style', () => {
124 | const a = gridRowGap({
125 | theme: {
126 | space: [0, 2, 4, 8],
127 | },
128 | gridRowGap: 3,
129 | })
130 | expect(a).toEqual({ gridRowGap: 8 })
131 | })
132 |
133 | test('gridRowGap uses the default scale', () => {
134 | const a = gridRowGap({
135 | theme: {},
136 | gridRowGap: 2,
137 | })
138 | expect(a).toEqual({ gridRowGap: 8 })
139 | })
140 |
141 | test('gridColumnGap returns a scalar style', () => {
142 | const a = gridColumnGap({
143 | theme: {
144 | space: [0, 2, 4, 8],
145 | },
146 | gridColumnGap: 3,
147 | })
148 | expect(a).toEqual({ gridColumnGap: 8 })
149 | })
150 |
151 | test('gridColumnGap uses the default scale', () => {
152 | const a = gridColumnGap({
153 | theme: {},
154 | gridColumnGap: 2,
155 | })
156 | expect(a).toEqual({ gridColumnGap: 8 })
157 | })
158 |
159 | test('borders prop returns correct sequence', () => {
160 | const a = borders({
161 | borderBottom: '1px solid',
162 | borderWidth: '2px',
163 | borderStyle: 'dashed',
164 | borderColor: 'red',
165 | })
166 | expect(a).toEqual({
167 | borderBottom: '1px solid',
168 | borderWidth: '2px',
169 | borderStyle: 'dashed',
170 | borderColor: 'red',
171 | })
172 | })
173 |
174 | test('shadow handles boxShadow and textShadow props', () => {
175 | const a = shadow({
176 | textShadow: '0 -1px rgba(255, 255, 255, .25)',
177 | boxShadow: 'none',
178 | })
179 | expect(a).toEqual({
180 | textShadow: '0 -1px rgba(255, 255, 255, .25)',
181 | boxShadow: 'none',
182 | })
183 | })
184 |
--------------------------------------------------------------------------------
/packages/css/src/index.js:
--------------------------------------------------------------------------------
1 | // based on https://github.com/developit/dlv
2 | export const get = (obj, key = '', def, p, undef) => {
3 | key = key.split ? key.split('.') : [key]
4 | for (p = 0; p < key.length; p++) {
5 | obj = obj ? obj[key[p]] : undef
6 | }
7 | return obj === undef ? def : obj
8 | }
9 |
10 | const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
11 |
12 | const defaultTheme = {
13 | space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
14 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
15 | }
16 |
17 | const aliases = {
18 | bg: 'backgroundColor',
19 | m: 'margin',
20 | mt: 'marginTop',
21 | mr: 'marginRight',
22 | mb: 'marginBottom',
23 | ml: 'marginLeft',
24 | mx: 'marginX',
25 | my: 'marginY',
26 | p: 'padding',
27 | pt: 'paddingTop',
28 | pr: 'paddingRight',
29 | pb: 'paddingBottom',
30 | pl: 'paddingLeft',
31 | px: 'paddingX',
32 | py: 'paddingY',
33 | }
34 |
35 | const directions = {
36 | marginX: ['marginLeft', 'marginRight'],
37 | marginY: ['marginTop', 'marginBottom'],
38 | paddingX: ['paddingLeft', 'paddingRight'],
39 | paddingY: ['paddingTop', 'paddingBottom'],
40 | }
41 |
42 | const scales = {
43 | color: 'colors',
44 | backgroundColor: 'colors',
45 | borderColor: 'colors',
46 | margin: 'space',
47 | marginTop: 'space',
48 | marginRight: 'space',
49 | marginBottom: 'space',
50 | marginLeft: 'space',
51 | marginX: 'space',
52 | marginY: 'space',
53 | padding: 'space',
54 | paddingTop: 'space',
55 | paddingRight: 'space',
56 | paddingBottom: 'space',
57 | paddingLeft: 'space',
58 | paddingX: 'space',
59 | paddingY: 'space',
60 | fontFamily: 'fonts',
61 | fontSize: 'fontSizes',
62 | fontWeight: 'fontWeights',
63 | lineHeight: 'lineHeights',
64 | letterSpacing: 'letterSpacings',
65 | border: 'borders',
66 | borderTop: 'borders',
67 | borderRight: 'borders',
68 | borderBottom: 'borders',
69 | borderLeft: 'borders',
70 | borderWidth: 'borderWidths',
71 | borderStyle: 'borderStyles',
72 | borderRadius: 'radii',
73 | borderTopRightRadius: 'radii',
74 | borderTopLeftRadius: 'radii',
75 | borderBottomRightRadius: 'radii',
76 | borderBottomLeftRadius: 'radii',
77 | boxShadow: 'shadows',
78 | zIndex: 'zIndices',
79 | width: 'sizes',
80 | minWidth: 'sizes',
81 | maxWidth: 'sizes',
82 | height: 'sizes',
83 | minHeight: 'sizes',
84 | maxHeight: 'sizes',
85 | }
86 |
87 | const getMargin = (scale, value) => {
88 | if (typeof value !== 'number' || value >= 0) {
89 | return get(scale, value, value)
90 | }
91 | const absolute = Math.abs(value)
92 | const n = get(scale, absolute, absolute)
93 | if (typeof n === 'string') return '-' + n
94 | return n * -1
95 | }
96 |
97 | const transforms = {
98 | margin: getMargin,
99 | marginTop: getMargin,
100 | marginRight: getMargin,
101 | marginBottom: getMargin,
102 | marginLeft: getMargin,
103 | marginX: getMargin,
104 | marginY: getMargin,
105 | }
106 |
107 | export const responsive = styles => theme => {
108 | const next = {}
109 | const breakpoints = get(theme, 'breakpoints', defaultBreakpoints)
110 | const mediaQueries = [ null, ...breakpoints.map(n => `@media screen and (min-width: ${n})`) ]
111 |
112 | for (const key in styles) {
113 | const value = styles[key]
114 | if (!Array.isArray(value)) {
115 | next[key] = value
116 | continue
117 | }
118 | for (let i = 0; i < value.length; i++) {
119 | const media = mediaQueries[i]
120 | if (!media) {
121 | next[key] = value[i]
122 | continue
123 | }
124 | next[media] = next[media] || {}
125 | next[media][key] = value[i]
126 | }
127 | }
128 |
129 | return next
130 | }
131 |
132 | export const css = args => (props = {}) => {
133 | const theme = { ...defaultTheme, ...(props.theme || props) }
134 | let result = {}
135 | const obj = typeof args === 'function' ? args(theme) : args
136 | const styles = responsive(obj)(theme)
137 |
138 | for (const key in styles) {
139 | const prop = get(aliases, key, key)
140 | const scaleName = get(scales, prop)
141 | const scale = get(theme, scaleName, get(theme, prop, {}))
142 | const x = styles[key]
143 | const val = typeof x === 'function' ? x(theme) : x
144 | if (key === 'variant') {
145 | const variant = css(get(theme, val))(theme)
146 | result = { ...result, ...variant }
147 | continue
148 | }
149 | if (val && typeof val === 'object') {
150 | result[prop] = css(val)(theme)
151 | continue
152 | }
153 | const transform = get(transforms, prop, get)
154 | const value = transform(scale, val, val)
155 | if (directions[prop]) {
156 | const dirs = directions[prop]
157 | for (let i = 0; i < dirs.length; i++) {
158 | result[dirs[i]] = value
159 | }
160 | } else {
161 | result[prop] = value
162 | }
163 | }
164 |
165 | return result
166 | }
167 |
168 | export default css
169 |
--------------------------------------------------------------------------------
/docs/guides/spacing.md:
--------------------------------------------------------------------------------
1 | # Spacing
2 |
3 | There are many ways to approach spacing (margin and padding) in a web application,
4 | and Styled System is intended to work at a low enough level to support several of these
5 | depending on your team's preferences.
6 |
7 | If you're not familiar with Styled System's `space` utility,
8 | you might want to read the [Getting Started](/getting-started/#margin--padding) documentation first.
9 |
10 | ## Where does space belong?
11 |
12 | Generally speaking, it's a good idea to avoid adding default margins to reusable components in React.
13 | Some people prefer to use a declarative approach by adding a "spacer" component in between other components.
14 | This is the _[spacer.gif][]_ of React, and it's a completely acceptable practice, despite what some people may say.
15 |
16 | [spacer.gif]: https://en.wikipedia.org/wiki/Spacer_GIF
17 |
18 | Others prefer creating wrapper layout components that apply spacing to child components.
19 | This is also an acceptable approach, but requires an additional layer of abstraction and creates a larger API surface area
20 | for your component library. This approach will also be less familiar to people new to React.
21 |
22 | The third common way, and the way that Styled System's API encourages you to approach this is through spacing props.
23 |
24 | All three approaches are valid, and all three can be used together with Styled System helping ensure that the values used for spacing
25 | are consistent across your entire application.
26 |
27 | ## Spacer Component
28 |
29 | One of the simpler approaches comes from the early days of the web, and is a really great way to add space to UI.
30 |
31 | To create a spacer component with Styled System, you can either reuse a [Box component](/guides/build-a-box) or create a specialized component
32 | for this purpose.
33 |
34 | ```js
35 | // example Spacer component
36 | import styled from 'styled-components'
37 | import { space } from 'styled-system'
38 |
39 | const Spacer = styled.div(space)
40 | ```
41 |
42 | To use the Spacer component, render it without any children and use the margin props.
43 |
44 | ```js
45 | // example Spacer usage
46 |
56 |
61 | ```
62 |
63 | ## Wrapper Component
64 |
65 | Some people use a wrapping parent component to control spacing on child components.
66 | This is exactly what [Rebass Space][] does and can be useful for tiled layouts or grid systems.
67 |
68 | To target child elements you can either use the `React.Children` API to map over child elements, or use child CSS selectors.
69 | The use of child CSS selectors can lead to styling bugs and isn't generally recommended.
70 |
71 | ```js
72 | // example using child CSS selectors
73 | import styled from 'styled-components'
74 | import { space } from 'styled-system'
75 |
76 | const SpaceChildren = styled.div`
77 | & > * {
78 | ${space}
79 | }
80 | `
81 | ```
82 |
83 | The following example comes from [Rebass Space][].
84 | This approach does not create a wrapping element and does not rely on child CSS selectors.
85 |
86 | ```jsx
87 | import React from 'react'
88 | import styled from 'styled-components'
89 | import { space } from 'styled-system'
90 |
91 | const classnames = (...args) => args.join(' ')
92 | const getClassName = el => (el.props && el.props.className) || ''
93 |
94 | export const StyledChildren = ({ className, children, ...props }) => {
95 | const styledChildren = React.Children.toArray(children).map(child =>
96 | React.cloneElement(child, {
97 | className: classnames(getClassName(child), className),
98 | })
99 | )
100 | return <>{styledChildren}
101 | }
102 |
103 | const SpaceChildren = styled(StyledChildren)(space)
104 |
105 | SpaceChildren.propTypes = space.propTypes
106 |
107 | export default SpaceChildren
108 | ```
109 |
110 | ## Space Props
111 |
112 | While the above approaches work perfectly fine, it can be useful to control margin and padding on a per-element basis.
113 | This is where Styled System's `space` utility really shines.
114 | It lets you add margin and padding props to any component, whether it's a Box layout component, a heading, or a button.
115 | By including the `space` props in your components, you can quickly make one-off adjustments and adapt to changing requirements.
116 |
117 | The `space` utility can be added to any component that accepts the `className` prop.
118 |
119 | ```js
120 | // example
121 | import styled from 'styled-component'
122 | import { space } from 'styled-system'
123 |
124 | const Heading = styled.h2(space)
125 | ```
126 |
127 | When using the component, you can adjust margin and padding in any direction needed.
128 |
129 | ```jsx
130 | // example usage
131 |
132 | Hello
133 |
134 | ```
135 |
136 | [rebass space]: https://github.com/rebassjs/space
137 |
--------------------------------------------------------------------------------
/docs/src/theme.js:
--------------------------------------------------------------------------------
1 | const colors = {
2 | text: '#000',
3 | background: '#fff',
4 | primary: '#00f',
5 | secondary: '#00a',
6 | highlight: '#c0f',
7 | gray: '#eee',
8 | lightgray: '#fafafa',
9 | midgray: '#777',
10 | modes: {
11 | dark: {
12 | text: '#fff',
13 | background: '#000',
14 | primary: '#0cf',
15 | secondary: '#f0e',
16 | gray: '#222',
17 | lightgray: '#111',
18 | },
19 | cyan: {
20 | text: '#023',
21 | background: '#0ff',
22 | primary: '#03c',
23 | secondary: '#01a',
24 | gray: '#0cc',
25 | lightgray: '#0ee',
26 | },
27 | gray: {
28 | text: '#eef',
29 | background: '#333336',
30 | primary: '#09f',
31 | secondary: '#0bf',
32 | gray: '#55555a',
33 | lightgray: '#444448',
34 | },
35 | book: {
36 | text: '#322',
37 | background: '#fff9f9',
38 | primary: '#c30',
39 | secondary: '#400',
40 | gray: '#e9e6e6',
41 | lightgray: '#f9f6f6',
42 | },
43 | magenta: {
44 | text: '#203',
45 | background: '#f3f',
46 | primary: '#208',
47 | secondary: '#106',
48 | gray: '#c0c',
49 | lightgray: '#e0e',
50 | },
51 | },
52 | }
53 |
54 | const prism = {
55 | [['.comment', '.prolog', '.doctype', '.cdata']]: {
56 | color: 'midgray',
57 | },
58 | '.punctuation': {
59 | color: 'midgray',
60 | },
61 | [['.property', '.tag', '.constant', '.symbol', '.deleted']]: {
62 | color: 'primary',
63 | },
64 | [['.boolean', '.number']]: {
65 | color: 'secondary',
66 | },
67 | [['.selector', '.attr-name', '.string', '.char', '.builtin', '.inserted']]: {
68 | color: 'highlight',
69 | },
70 | [['.operator', '.entity', '.url', '.string', '.variable']]: {
71 | color: 'highlight',
72 | },
73 | [['.atrule', '.attr-value', '.function']]: {
74 | color: 'primary',
75 | },
76 | '.keyword': {
77 | color: 'primary',
78 | },
79 | '.regex': {},
80 | '.important': {},
81 | }
82 |
83 | export default {
84 | initialColorMode: 'light',
85 | colors,
86 | fonts: {
87 | body: 'system-ui, sans-serif',
88 | monospace: 'Menlo, monospace',
89 | },
90 | fontSizes: [12, 14, 16, 18, 24, 32, 48, 64, 72],
91 | lineHeights: {
92 | body: 1.75,
93 | heading: 1.25,
94 | },
95 | styles: {
96 | a: {
97 | color: 'primary',
98 | '&:hover': {
99 | color: 'secondary',
100 | },
101 | },
102 | h1: {
103 | fontSize: [5, 6],
104 | lineHeight: 'heading',
105 | a: {
106 | color: 'inherit',
107 | textDecoration: 'none',
108 | },
109 | },
110 | h2: {
111 | fontSize: [4, 5],
112 | lineHeight: 'heading',
113 | a: {
114 | color: 'inherit',
115 | textDecoration: 'none',
116 | },
117 | },
118 | h3: {
119 | fontSize: 3,
120 | lineHeight: 'heading',
121 | a: {
122 | color: 'inherit',
123 | textDecoration: 'none',
124 | },
125 | },
126 | h4: {
127 | fontSize: 2,
128 | lineHeight: 'heading',
129 | a: {
130 | color: 'inherit',
131 | textDecoration: 'none',
132 | },
133 | },
134 | h5: {
135 | fontSize: 1,
136 | lineHeight: 'heading',
137 | a: {
138 | color: 'inherit',
139 | textDecoration: 'none',
140 | },
141 | },
142 | h6: {
143 | fontSize: 0,
144 | lineHeight: 'heading',
145 | a: {
146 | color: 'inherit',
147 | textDecoration: 'none',
148 | },
149 | },
150 | pre: {
151 | fontFamily: 'monospace',
152 | fontSize: 1,
153 | p: 3,
154 | my: 3,
155 | bg: 'lightgray',
156 | overflowX: 'auto',
157 | ...prism,
158 | },
159 | code: {
160 | fontFamily: 'monospace',
161 | // fontSize: '87.5%',
162 | },
163 | inlineCode: {
164 | fontFamily: 'monospace',
165 | color: 'secondary',
166 | fontSize: '87.5%',
167 | },
168 | ul: {
169 | pl: 3,
170 | ul: {
171 | // pl: 2
172 | // textIndent: '1em',
173 | },
174 | },
175 | table: {
176 | width: '100%',
177 | my: 4,
178 | // borderColor: colors.gray,
179 | borderCollapse: 'separate',
180 | borderSpacing: 0,
181 | },
182 | th: {
183 | textAlign: 'left',
184 | verticalAlign: 'bottom',
185 | paddingTop: '4px',
186 | paddingBottom: '4px',
187 | paddingRight: '4px',
188 | paddingLeft: 0,
189 | borderColor: 'inherit',
190 | borderBottomWidth: '2px',
191 | borderBottomStyle: 'solid',
192 | },
193 | td: {
194 | textAlign: 'left',
195 | verticalAlign: 'top',
196 | paddingTop: '4px',
197 | paddingBottom: '4px',
198 | paddingRight: '4px',
199 | paddingLeft: 0,
200 | borderColor: 'inherit',
201 | borderBottomWidth: '1px',
202 | borderBottomStyle: 'solid',
203 | },
204 | hr: {
205 | border: 0,
206 | borderBottom: '1px solid',
207 | borderColor: 'lightgray',
208 | },
209 | },
210 | }
211 |
--------------------------------------------------------------------------------