diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a904bcb5..07089bd6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# 1.0.2 (2018-07-20) + +#### :bug: Bug Fix +* [#3](https://github.com/primer/primer-primitives/pull/6) Fix spacing to be an array instead of an object. ([@broccolini](https://github.com/broccolini)) + +#### :memo: Documentation +* [#3](https://github.com/primer/primer-primitives/pull/6) Add usage example to README. ([@broccolini](https://github.com/broccolini)) + # 1.0.1 (2018-05-10) #### :bug: Bug Fix diff --git a/README.md b/README.md index d7a15a187..83124bd38 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,54 @@ This repository is distributed with [npm][npm]. After [installing npm][install-n $ npm install --save primer-primitives ``` +## Usage + +JSON is a highly interoperable format that can be used in many types of projects. You could write scripts to generate CSS, use with plugins for design tools, or import into a theme file for use with CSS-in-JS projects. + +### Example + +This shows an example for a React.js project. You can import Primer Primitives to provide theme values to a `ThemeProvider`. This is a great way of sharing system styles and can be achieved with popular CSS-in-JS libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/). + +Here's an example using `styled-components`. + +```js +import React from 'react' +import styled, { ThemeProvider } from 'styled-components' +import theme from 'primer-primitives' + +const Alert = styled.div` + color: ${props => props.theme.colors.green[9]}; + background-color: ${props => props.theme.colors.green[2]}; +` + +const App = props => ( + + + +) + +``` + +When used with libraries like [styled-system](https://jxnblk.com/styled-system/), you can make Primer Primitives available to style functions. In this example, we've imported the color function to the component's styles argument. The color values are from the color JSON object in Primer Primitives. + +```js +import React from 'react' +import styled, { ThemeProvider } from 'styled-components' +import theme from 'primer-primitives' +import { color } from 'styled-system' + +const Alert = styled.div` + ${color} +` + +const App = props => ( + + + +) + +``` + ## License [MIT](./LICENSE) © [GitHub](https://github.com/) diff --git a/modules/primer-primitives/package.json b/modules/primer-primitives/package.json index 491e9d0c1..d6f3e5dfc 100644 --- a/modules/primer-primitives/package.json +++ b/modules/primer-primitives/package.json @@ -1,6 +1,6 @@ { "name": "primer-primitives", - "version": "1.0.1", + "version": "1.0.2", "description": "Typography, spacing, and color primitives for Primer design system", "main": "index.js", "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-primitives", @@ -20,7 +20,7 @@ "homepage": "https://github.com/primer/primer-primitives#readme", "dependencies": { "primer-colors": "^1.0.1", - "primer-spacing": "^1.0.1", + "primer-spacing": "^1.0.2", "primer-typography": "^1.0.1" } } diff --git a/modules/primer-spacing/package.json b/modules/primer-spacing/package.json index a735c276e..341724b4d 100644 --- a/modules/primer-spacing/package.json +++ b/modules/primer-spacing/package.json @@ -1,6 +1,6 @@ { "name": "primer-spacing", - "version": "1.0.1", + "version": "1.0.2", "description": "Spacing primitives for Primer design system", "main": "spacing.json", "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-spacing", diff --git a/modules/primer-spacing/spacing.json b/modules/primer-spacing/spacing.json index 6f2b27350..045e1a0ce 100644 --- a/modules/primer-spacing/spacing.json +++ b/modules/primer-spacing/spacing.json @@ -1,12 +1,10 @@ -{ - "space": [ - 0, - 4, - 8, - 16, - 24, - 32, - 40, - 48 - ] -} +[ + 0, + 4, + 8, + 16, + 24, + 32, + 40, + 48 +]