		{
		"name": "@primer/primitives",
		"version": "0.0.0-18b6150",
		"version": "0.0.0-2f13178",
		"description": "Typography, spacing, and color primitives for Primer design system",
		@@ -8,4 +8,4 @@ "files": [
		],
		"main": "dist/index.js",
		"types": "dist/index.d.ts",
		"main": "dist/js/index.js",
		"types": "dist/js/index.d.ts",
		"repository": "https://github.com/primer/primitives",
		@@ -28,3 +28,3 @@ "keywords": [
		"prebuild": "rm -rf dist",
		"build": "ts-node ./script/build-color-modes.ts && tsc",
		"build": "ts-node ./script/build.ts && tsc",
		"prepack": "yarn build"
		@@ -36,2 +36,4 @@ },
		"@types/node": "^14.0.26",
		"camelcase-keys": "^6.2.2",
		"deep-shape-equals": "^0.1.2",
		"mkdirp": "^1.0.4",
		@@ -38,0 +40,0 @@ "node-sass": "^4.14.1",

README.md

		@@ -7,3 +7,3 @@ # Primer Primitives

		This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
		This repository is distributed on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.

		@@ -16,54 +16,8 @@ ```sh

		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.
		Primitive data is served in several formats from the `dist/` folder:

		### Example
		* `dist/scss` contains [SCSS][scss] files that define CSS variables to be imported into other SCSS files
		* `dist/json` contains JSON files for each set of primitives
		* `dist/js` contains CommonJS-style JavaScript modules for each set of primitives, as well as an index file that loads all of the primitives for all primitive types; you can access this via `require('@primer/primitives')`. The JavaScript modules also include TypeScript typings files for use in TypeScript projects.

		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'

		const Alert = styled.div`
		color: ${props => props.theme.colors.green[9]};
		background-color: ${props => props.theme.colors.green[2]};
		`

		const App = props => (
		<ThemeProvider theme={theme}>
		<Alert />
		</ThemeProvider>
		)

		```

		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 => (
		<ThemeProvider theme={theme}>
		<Alert color='green.0' bg='green.2' />
		</ThemeProvider>
		)

		```

		## License
		@@ -76,1 +30,2 @@
		[install-npm]: https://docs.npmjs.com/getting-started/installing-node
		[scss]: https://sass-lang.com/

dist/index.d.ts

dist/index.js

dist/primitives/colors.d.ts

dist/primitives/colors.js

dist/primitives/modes/light.d.ts

dist/primitives/modes/light.js

dist/primitives/spacing.d.ts

dist/primitives/spacing.js

dist/primitives/typography.d.ts

dist/primitives/typography.js

dist/scss/modes/_light.scss

dist/theme/index.d.ts

dist/theme/index.js

@primer/primitives - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics