Format

Author: jxnblk

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 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
+- 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
+- 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
 

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Contributing
 
 Hi! We're looking for some help, and we're excited that you're interested!
@@ -42,4 +41,3 @@ yarn test --watch
 [yarn workspaces]: https://yarnpkg.com/en/docs/workspaces
 [lerna]: https://github.com/lerna/lerna
 [jest]: https://jestjs.io/
-

packages/docs/src/components/edit-link.js

@@ -2,17 +2,12 @@
 import { Location } from '@reach/router'
 import { jsx } from 'theme-ui'
 
-
 const getHREF = (base, location) => {
   if (location.pathname === '/') return false
   return base + location.pathname.replace(/\/+$/, '') + '.mdx'
 }
 
-export const EditLink = ({
-  base,
-  children,
-  ...props
-}) => (
+export const EditLink = ({ base, children, ...props }) => (
   <Location
     children={({ location }) => {
       const href = getHREF(base, location)
@@ -26,7 +21,8 @@ export const EditLink = ({
             color: 'inherit',
             fontSize: 1,
             my: 4,
-          }}>
+          }}
+        >
           {children}
         </a>
       )
@@ -35,7 +31,8 @@ export const EditLink = ({
 )
 
 EditLink.defaultProps = {
-  base: 'https://github.com/system-ui/theme-ui/edit/master/packages/docs/src/pages',
+  base:
+    'https://github.com/system-ui/theme-ui/edit/master/packages/docs/src/pages',
   children: 'Edit the page on GitHub',
 }
 

packages/docs/src/pages/api.mdx

@@ -25,10 +25,10 @@ css(styleObject)(theme)
 <div css={css(styles)} />
 ```
 
-Argument | Type | Description
----|---|---
-`styleObject` | Object | a theme-aware style object with support for responsive array values and Styled System prop shortcuts
-`theme` | Object | the Emotion theming context object
+| Argument      | Type   | Description                                                                                          |
+| ------------- | ------ | ---------------------------------------------------------------------------------------------------- |
+| `styleObject` | Object | a theme-aware style object with support for responsive array values and Styled System prop shortcuts |
+| `theme`       | Object | the Emotion theming context object                                                                   |
 
 ### `jsx`
 
@@ -40,13 +40,14 @@ The `jsx` export is a React create element function intended for use as a custom
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
 
-export default props =>
+export default props => (
   <div
     {...props}
     css={{
       color: 'primary',
     }}
   />
+)
 ```
 
 ### `ThemeProvider`
@@ -55,11 +56,11 @@ The `ThemeProvider` component is a wrapper around Emotion's `ThemeProvider` and
 It provides default styled components to MDX content that pick up values from `theme.styles`.
 It also handles color mode state.
 
-Prop | Type | Description
----|---|---
-`theme` | Object | Theming context object
-`components` | Object | Optional custom MDX components
-`children` | Node | React children
+| Prop         | Type   | Description                    |
+| ------------ | ------ | ------------------------------ |
+| `theme`      | Object | Theming context object         |
+| `components` | Object | Optional custom MDX components |
+| `children`   | Node   | React children                 |
 
 ### `useThemeUI`
 
@@ -89,7 +90,7 @@ The `useColorMode` hook returns an array with two values: the current color mode
 The color mode state can be any string and should match the name of a color mode defined in `theme.colors.modes` or be a name for the default color mode.
 
 ```js
-const [ colorMode, setColorMode ] = useColorMode()
+const [colorMode, setColorMode] = useColorMode()
 ```
 
 ### `Styled`
@@ -105,21 +106,21 @@ These are primarily meant to be used as a mechanism to use styles defined in a `
 
 The `Styled` components include the same props as components created with [`@emotion/styled`](https://emotion.sh/docs/styled).
 
-Prop | Type | Description
----|---|---
-`as` | String or Component | Changes the underlying rendered element
+| Prop | Type                | Description                             |
+| ---- | ------------------- | --------------------------------------- |
+| `as` | String or Component | Changes the underlying rendered element |
 
 ### `Box`
 
 The `Box` component is a primitive layout component with Styled System props, similar to [Rebass's `Box` component](https://rebassjs.org/Box/) .
 
 The `Box` component includes all [Styled System space props](https://styled-system.com/api#space), as well as the following.
 
-Prop | Type | Description
----|---|---
-`color` | String | Foreground (text) color
-`bg`, `backgroundColor` | String | Background color
-`css` | Object | Style object
+| Prop                    | Type   | Description             |
+| ----------------------- | ------ | ----------------------- |
+| `color`                 | String | Foreground (text) color |
+| `bg`, `backgroundColor` | String | Background color        |
+| `css`                   | Object | Style object            |
 
 <!-- todo: note about deprecating other style props -->
 
@@ -152,6 +153,7 @@ The `Container` component is an extension of the `Box` component with a max-widt
 The `Footer` component is an extension of the `Box` component, intended for use as a page footer.
 
 ## `gatsby-theme-ui`
+
 ## `gatsby-theme-ui`
 
 [styled-system/css]: https://styled-system.com/css

packages/docs/src/pages/hooks.mdx

@@ -30,15 +30,14 @@ import React from 'react'
 import { useColorMode } from 'theme-ui'
 
 export default props => {
-  const [ colorMode, setColorMode ] = useColorMode()
+  const [colorMode, setColorMode] = useColorMode()
   return (
     <button
       onClick={e => {
         setColorMode(colorMode === 'light' ? 'dark' : 'light')
-      }}>
-      Toggle
-      {' '}
-      {colorMode === 'light' ? 'Dark' : 'Light'}
+      }}
+    >
+      Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
     </button>
   )
 }

packages/tachyons/src/index.js

@@ -10,15 +10,15 @@ const KEY_MAPPING = {
   lineHeights: 'lineHeight',
   letterSpacings: 'letterSpacing',
   size: ['heights', 'maxHeights', 'widths', 'maxWidths'],
-  zIndices: 'zIndex'
+  zIndices: 'zIndex',
 }
 
 export default theme => {
   const transformedTheme = Object.entries(theme).reduce((acc, [key, value]) => {
     if (!KEY_MAPPING[key]) {
       return {
         ...acc,
-        [key]: value
+        [key]: value,
       }
     } else if (Array.isArray(KEY_MAPPING[key])) {
       KEY_MAPPING[key].forEach(tachyonsKey => {
@@ -29,7 +29,7 @@ export default theme => {
     } else {
       return {
         ...acc,
-        [KEY_MAPPING[key]]: value
+        [KEY_MAPPING[key]]: value,
       }
     }
   }, {})

packages/tachyons/test/test.js

@@ -24,7 +24,7 @@ const theme = {
   },
   lineHeights: [1.5, 1.125],
   space: [0, 2, 3, 4, 5, 6],
-  size: ['10em', '20em', '30em', '40em']
+  size: ['10em', '20em', '30em', '40em'],
 }
 
 it('transforms a theme config to a Tachyons config', () => {

packages/tailwind/src/index.js

@@ -9,15 +9,15 @@ const KEY_MAPPING = {
   lineHeights: 'lineHeight',
   letterSpacings: 'letterSpacing',
   size: ['height', 'maxHeight', 'width', 'maxWidth'],
-  zIndices: 'zIndex'
+  zIndices: 'zIndex',
 }
 
 export default (theme, config = {}) => {
   const transformedTheme = Object.entries(theme).reduce((acc, [key, value]) => {
     if (!KEY_MAPPING[key]) {
       return {
         ...acc,
-        [key]: value
+        [key]: value,
       }
     } else if (Array.isArray(KEY_MAPPING[key])) {
       KEY_MAPPING[key].forEach(twKey => {
@@ -28,13 +28,13 @@ export default (theme, config = {}) => {
     } else {
       return {
         ...acc,
-        [KEY_MAPPING[key]]: value
+        [KEY_MAPPING[key]]: value,
       }
     }
   }, {})
 
   return {
     ...config,
-    theme: transformedTheme
+    theme: transformedTheme,
   }
 }

packages/tailwind/test/test.js

@@ -30,7 +30,7 @@ const theme = {
     heading: 1.125,
   },
   space: [0, 2, 3, 4, 5, 6],
-  size: ['10em', '20em', '30em', '40em']
+  size: ['10em', '20em', '30em', '40em'],
 }
 
 const toJS = theme => `