@primer/primitives - npm Package Compare versions

Comparing version 0.0.0-412fea4 to 0.0.0-562b929

CHANGELOG.md

@@ -0,8 +1,17 @@
+# 3.0.1 (2020-04-28)
+#### :rotating_light: Breaking Changes
+* [#14](https://github.com/primer/primitives/pull/16) Convert the package from JSON to TypeScript ([@smockle](https://github.com/smockle))
+
+# 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))
 
@@ -21,3 +30,3 @@ # 1.0.1 (2018-05-10)
 #### :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))

package.json

 {
   "name": "@primer/primitives",
-  "version": "0.0.0-412fea4",
-  "description": "Color, spacing, and typography primitives for GitHub's Primer design system",
-  "main": "index.js",
+  "version": "0.0.0-562b929",
+  "description": "Typography, spacing, and color primitives for Primer design system",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/js/index.js",
+  "types": "dist/ts/index.d.ts",
   "repository": "https://github.com/primer/primitives",
@@ -22,7 +26,18 @@ "keywords": [
   "scripts": {
-    "test": "jest"
+    "prebuild": "rm -rf dist",
+    "build": "ts-node ./script/build.ts && tsc",
+    "prepack": "yarn build"
   },
+  "dependencies": {},
   "devDependencies": {
-    "jest": "^24.5.0"
+    "@types/mkdirp": "^1.0.1",
+    "@types/node": "^14.0.26",
+    "camelcase-keys": "^6.2.2",
+    "deep-shape-equals": "^0.1.2",
+    "mkdirp": "^1.0.4",
+    "node-sass": "^4.14.1",
+    "sass-extract": "^2.1.0",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.7.2"
   }
 }

README.md

 # Primer Primitives
 
-This package contains the [color](#colors), [spacing](#spacing), and [typography](#typography) primitives (AKA constants or "tokens") that form the foundation of [Primer], GitHub's design system.
+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]. You can install it with:
+This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
 
@@ -15,34 +15,20 @@ ```sh
 
-The package's default JavaScript export is an object with the following keys:
+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.
 
-* `colors` is the [colors](#colors) object
-* `space` is the [spacing](#spacing) object
-* `fontSizes` is from [typography](#typography)
-* `lineHeights` is from [typography](#typography)
+### Example
 
-There are separate exports for `colors`, `space`, and `typography`. For instance, to enumerate the colors:
+The Primer Primitives are exported as keys on the top-level export. `colors`, `spacing`, and `typography` are available:
 
 ```js
-// all of the following are equivalent:
-let {colors} = require('@primer/primitives')
-colors = require('@primer/primitives/colors')
-colors = require('@primer/primitives/colors.json')
-
-for (const [name, value] of Object.entries(colors)) {
-  console.log(`colors.${name} = ${JSON.stringify(value)}`)
-}
+import { colors, spacing, typography } from '@primer/primitives'
 ```
 
-## Theme
+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/).
 
-This default export object is suitable for use as a theme source in CSS-in-JS libraries such as [styled-components] and [emotion], and is specifically tailored for use with [styled-system]'s style functions.
+Here's an example using `styled-components`.
 
-### Examples
-
-Here's an example using [styled-components]:
-
 ```js
 import React from 'react'
-import styled, {ThemeProvider} from 'styled-components'
-import theme from '@primer/primitives'
+import styled, { ThemeProvider } from 'styled-components'
+import { theme } from '@primer/primitives'
 
@@ -59,11 +45,12 @@ const Alert = styled.div`
 )
+
 ```
 
-And [styled-system]:
+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 {color} from 'styled-system'
-import theme from '@primer/primitives'
+import styled, { ThemeProvider } from 'styled-components'
+import { theme } from '@primer/primitives'
+import { color } from 'styled-system'
 
@@ -76,40 +63,8 @@ const Alert = styled.div`
   <ThemeProvider theme={theme}>
-    <Alert color='green.0' bg='green.2' {...props} />
+    <Alert color='green.0' bg='green.2' />
   </ThemeProvider>
 )
+
 ```
 
-Refer to the [styled-system table](https://styled-system.com/table) for more information.
-
-## Colors
-
-The colors object represents Primer's [color system]. The following keys represent single RGB hex colors:
-
-* `black` is not "pure" black, but is darker than the darkest gray
-* `white` is pure white (`#fff`)
-
-The rest of the keys are arrays representing gradients of a certain hue, from lightest to darkest:
-
-* `gray`
-* `blue`
-* `green`
-* `yellow`
-* `orange`
-* `red`
-* `purple`
-
-## Spacing
-
-The `space` object is an array of numeric pixel values that represent Primer's [spacing scale].
-
-## Typography
-
-These primitives are the foundation of Primer's [typography styles]. These keys are merged into the [theme object](#theme):
-
-* `fontSizes` represents Primer's font size scale in pixels, from smallest to largest.
-* `lineHeights` is an object with keys for each of Primer's named line heights: `default`, `condensed`, and `condensedUltra`.
-
-The typography primitives are also available in JavaScript via the `@primer/primitives/typography` export, with or without the `.json` filename extension.
-
-
 ## License
@@ -119,10 +74,4 @@
 
-[color system]: https://primer.style/css/support/color-system
-[spacing scale]: https://primer.style/css/support/spacing
-[typography styles]: https://primer.style/css/support/spacing
+[primer]: https://github.com/primer/primer
+[npm]: https://www.npmjs.com/
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[npm]: https://www.npmjs.com/
-[primer]: https://primer.style
-[styled-system]: https://styled-system.com/
-[styled-components]: https://www.styled-components.com/
-[emotion]: https://emotion.sh/

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41559

increased by166.22%

Number of package files

31

increased by121.43%

Lines of code

1218

increased by608.14%

Worsened metrics

Dev dependency count

9

increased by800%

Number of lines in readme file

74

decreased by-40.8%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes