diff --git a/CHANGELOG.md b/CHANGELOG.md index 07089bd6e..686032bf7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,15 @@ +# 2.0.0 (2019-10-21) + +#### :rotating_light: Breaking Changes +* [#14](https://github.com/primer/primitives/pull/14) Rename npm package to `@primer/primitives` and deprecate old `primer-*` packages ([@BinaryMuse](https://github.com/BinaryMuse)) + # 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)) +* [#6](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)) +* [#6](https://github.com/primer/primer-primitives/pull/6) Add usage example to README. ([@broccolini](https://github.com/broccolini)) # 1.0.1 (2018-05-10) @@ -18,5 +23,5 @@ # 1.0.0 (2018-04-29) #### :rocket: Enhancement -* [#2](https://github.com/primer/primer-primitives/pull/1) Add color, typography, and spacing packages. ([@broccolini](https://github.com/broccolini)) -* [#2](https://github.com/primer/primer-primitives/pull/1) Add primer-primitives package that imports all primitives. ([@broccolini](https://github.com/broccolini)) +* [#1](https://github.com/primer/primer-primitives/pull/1) Add color, typography, and spacing packages. ([@broccolini](https://github.com/broccolini)) +* [#1](https://github.com/primer/primer-primitives/pull/1) Add primer-primitives package that imports all primitives. ([@broccolini](https://github.com/broccolini)) diff --git a/README.md b/README.md index 83124bd38..8645350c1 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,13 @@ # Primer Primitives -This is a monorepo for color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system. - -## Packages - -The Primer Primitives repo is a monorepo composed of multiple npm packages: - -- [primer-primitives][primer-primitives] -- [primer-colors][primer-colors] -- [primer-spacing][primer-spacing] -- [primer-typography][primer-typography] +This repo contains values for color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system. ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-primitives` with this command. +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command. ```sh -$ npm install --save primer-primitives +$ npm install --save @primer/primitives ``` ## Usage @@ -25,14 +16,20 @@ JSON is a highly interoperable format that can be used in many types of 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/). +The Primer Primitives are exported as keys on the top-level export. `colors`, `spacing`, and `typography` are available: + +```js +import { colors, spacing, typography } from '@primer/primitives' +``` + +In addition, Primer Primitives exports a `theme`, which is a great way of sharing system styles and works 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' +import { theme } from '@primer/primitives' const Alert = styled.div` color: ${props => props.theme.colors.green[9]}; @@ -52,7 +49,7 @@ When used with libraries like [styled-system](https://jxnblk.com/styled-system/) ```js import React from 'react' import styled, { ThemeProvider } from 'styled-components' -import theme from 'primer-primitives' +import { theme } from '@primer/primitives' import { color } from 'styled-system' const Alert = styled.div` @@ -72,9 +69,5 @@ const App = props => ( [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[primer-primitives]: https://github.com/primer/primer-primitives/tree/master/modules/primer-primitives -[primer-colors]: https://github.com/primer/primer-primitives/tree/master/modules/primer-colors -[primer-spacing]: https://github.com/primer/primer-primitives/tree/master/modules/primer-spacing -[primer-typography]: https://github.com/primer/primer-primitives/tree/master/modules/primer-typography [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/index.js b/index.js new file mode 100644 index 000000000..1067e802f --- /dev/null +++ b/index.js @@ -0,0 +1,11 @@ +const colors = require('./primitives/colors') +const spacing = require('./primitives/spacing') +const typography = require('./primitives/typography') +const theme = require('./theme') + +module.exports = { + theme, + colors, + spacing, + typography +} diff --git a/lerna.json b/lerna.json deleted file mode 100644 index 15e349b0a..000000000 --- a/lerna.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "lerna": "2.10.2", - "packages": [ - "modules/*" - ], - "version": "independent" -} diff --git a/modules/primer-colors/README.md b/modules/primer-colors/README.md deleted file mode 100644 index b0bcbb14e..000000000 --- a/modules/primer-colors/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Primer Color Primitives - -Color primitives for use with [Primer][primer], GitHub's design system. - -[![npm version](https://img.shields.io/npm/v/primer-primitives.svg)](https://www.npmjs.org/package/primer-colors) - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-colors` with this command. - -```sh -$ npm install --save primer-colors -``` - -## License - -[MIT](./LICENSE) © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-primitives]: https://github.com/primer/primer-primitives/tree/master/modules/primer-colors -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/modules/primer-colors/package.json b/modules/primer-colors/package.json deleted file mode 100644 index 74ccf47f4..000000000 --- a/modules/primer-colors/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "primer-colors", - "version": "1.0.1", - "description": "Color primitives for Primer design system", - "main": "colors.json", - "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-colors", - "keywords": [ - "primitives", - "colors", - "variables", - "design-system" - ], - "author": "GitHub, Inc.", - "license": "MIT", - "bugs": { - "url": "https://github.com/primer/primer-primitives/issues" - }, - "homepage": "https://github.com/primer/primer-primitives#readme" -} diff --git a/modules/primer-primitives/README.md b/modules/primer-primitives/README.md deleted file mode 100644 index c6ee5d113..000000000 --- a/modules/primer-primitives/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Primer Primitives - -Color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system. - -[![npm version](https://img.shields.io/npm/v/primer-primitives.svg)](https://www.npmjs.org/package/primer-primitives) - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-primitives` with this command. - -```sh -$ npm install --save primer-primitives -``` - -## License - -[MIT](./LICENSE) © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-primitives]: https://github.com/primer/primer-primitives/tree/master/modules/primer-primitives -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/modules/primer-primitives/index.js b/modules/primer-primitives/index.js deleted file mode 100644 index 3c421fe65..000000000 --- a/modules/primer-primitives/index.js +++ /dev/null @@ -1,12 +0,0 @@ -const colors = require('primer-colors') -const space = require('primer-spacing') -const { fontSizes, lineHeights } = require('primer-typography') - -const theme = { - colors, - space, - fontSizes, - lineHeights -} - -module.exports = theme diff --git a/modules/primer-primitives/package.json b/modules/primer-primitives/package.json deleted file mode 100644 index d6f3e5dfc..000000000 --- a/modules/primer-primitives/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "primer-primitives", - "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", - "keywords": [ - "primitives", - "colors", - "spacing", - "typography", - "variables", - "design-system" - ], - "author": "GitHub, Inc.", - "license": "MIT", - "bugs": { - "url": "https://github.com/primer/primer-primitives/issues" - }, - "homepage": "https://github.com/primer/primer-primitives#readme", - "dependencies": { - "primer-colors": "^1.0.1", - "primer-spacing": "^1.0.2", - "primer-typography": "^1.0.1" - } -} diff --git a/modules/primer-spacing/README.md b/modules/primer-spacing/README.md deleted file mode 100644 index 40393c8ac..000000000 --- a/modules/primer-spacing/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Primer Spacing Primitives - -Spacing primitives for use with [Primer][primer], GitHub's design system. - -[![npm version](https://img.shields.io/npm/v/primer-primitives.svg)](https://www.npmjs.org/package/primer-spacing) - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-spacing` with this command. - -```sh -$ npm install --save primer-spacing -``` - -## License - -[MIT](./LICENSE) © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-primitives]: https://github.com/primer/primer-primitives/tree/master/modules/primer-spacing -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/modules/primer-spacing/package.json b/modules/primer-spacing/package.json deleted file mode 100644 index 341724b4d..000000000 --- a/modules/primer-spacing/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "primer-spacing", - "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", - "keywords": [ - "primitives", - "spacing", - "space", - "spacing-scale", - "variables", - "design-system" - ], - "author": "GitHub, Inc.", - "license": "MIT", - "bugs": { - "url": "https://github.com/primer/primer-primitives/issues" - }, - "homepage": "https://github.com/primer/primer-primitives#readme" -} diff --git a/modules/primer-typography/README.md b/modules/primer-typography/README.md deleted file mode 100644 index d9597f2be..000000000 --- a/modules/primer-typography/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Primer Typography Primitives - -Color primitives for use with [Primer][primer], GitHub's design system. - -[![npm version](https://img.shields.io/npm/v/primer-primitives.svg)](https://www.npmjs.org/package/primer-typography) - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-typography` with this command. - -```sh -$ npm install --save primer-typography -``` - -## License - -[MIT](./LICENSE) © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-primitives]: https://github.com/primer/primer-primitives/tree/master/modules/primer-typography -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/modules/primer-typography/package.json b/modules/primer-typography/package.json deleted file mode 100644 index a78966250..000000000 --- a/modules/primer-typography/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "primer-typography", - "version": "1.0.1", - "description": "Typography primitives for Primer design system", - "main": "typography.json", - "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-typography", - "keywords": [ - "primitives", - "typography", - "font-size", - "type-scale", - "variables", - "design-system" - ], - "author": "GitHub, Inc.", - "license": "MIT", - "bugs": { - "url": "https://github.com/primer/primer-primitives/issues" - }, - "homepage": "https://github.com/primer/primer-primitives#readme" -} diff --git a/package.json b/package.json index 933b177dd..9219bdbd3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,21 @@ { - "private": true, - "devDependencies": { - "lerna": "^2.10.2" - } + "name": "@primer/primitives", + "version": "2.0.0", + "description": "Typography, spacing, and color primitives for Primer design system", + "main": "index.js", + "repository": "https://github.com/primer/primitives", + "keywords": [ + "primitives", + "colors", + "spacing", + "typography", + "variables", + "design-system" + ], + "author": "GitHub, Inc.", + "license": "MIT", + "bugs": { + "url": "https://github.com/primer/primitives/issues" + }, + "homepage": "https://github.com/primer/primitives#readme" } diff --git a/modules/primer-colors/colors.json b/primitives/colors.json similarity index 100% rename from modules/primer-colors/colors.json rename to primitives/colors.json diff --git a/modules/primer-spacing/spacing.json b/primitives/spacing.json similarity index 100% rename from modules/primer-spacing/spacing.json rename to primitives/spacing.json diff --git a/modules/primer-typography/typography.json b/primitives/typography.json similarity index 100% rename from modules/primer-typography/typography.json rename to primitives/typography.json diff --git a/theme/index.js b/theme/index.js new file mode 100644 index 000000000..2daf67cab --- /dev/null +++ b/theme/index.js @@ -0,0 +1,12 @@ +const colors = require('../primitives/colors') +const space = require('../primitives/spacing') +const { fontSizes, lineHeights } = require('../primitives/typography') + +const theme = { + colors, + space, + fontSizes, + lineHeights +} + +module.exports = theme