@primer/primitives - npm Package Compare versions

Comparing version 0.0.0-62e4999 to 0.0.0-671bb45

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-62e4999",
-  "description": "Color, spacing, and typography primitives for GitHub's Primer design system",
-  "main": "index.js",
+  "version": "0.0.0-671bb45",
+  "description": "Typography, spacing, and color primitives for Primer design system",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/js/index.js",
+  "types": "dist/js/index.d.ts",
   "repository": "https://github.com/primer/primitives",
@@ -20,3 +24,22 @@ "keywords": [
   },
-  "homepage": "https://github.com/primer/primitives#readme"
+  "homepage": "https://github.com/primer/primitives#readme",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "ts-node ./script/build.ts && tsc",
+    "prepack": "yarn build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/chalk": "^2.2.0",
+    "@types/mkdirp": "^1.0.1",
+    "@types/node": "^14.0.26",
+    "camelcase-keys": "^6.2.2",
+    "chalk": "^4.1.0",
+    "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 on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
 
@@ -15,99 +15,8 @@ ```sh
 
-The package's default JavaScript export is an object with the following keys:
+Primitive data is served in several formats from the `dist/` folder:
 
-* `colors` is the [colors](#colors) object
-* `space` is the [spacing](#spacing) object
-* `fontSizes` is from [typography](#typography)
-* `lineHeights` is from [typography](#typography)
+* `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.
 
-There are separate exports for `colors`, `space`, and `typography`. For instance, to enumerate the colors:
-
-```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)}`)
-}
-```
-
-## Theme
-
-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.
-
-### Examples
-
-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>
-)
-```
-
-And [styled-system]:
-
-```js
-import React from 'react'
-import styled, {ThemeProvider} from 'styled-components'
-import {color} from 'styled-system'
-import theme from '@primer/primitives'
-
-const Alert = styled.div`
-  ${color}
-`
-
-const App = props => (
-  <ThemeProvider theme={theme}>
-    <Alert color='green.0' bg='green.2' {...props} />
-  </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
@@ -117,10 +26,5 @@
 
-[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/
+[scss]: https://sass-lang.com/

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

101433

increased by1084.41%

Number of package files

36

increased by157.14%

Lines of code

3333

increased by4801.47%

Worsened metrics

Dev dependency count

11

increased byInfinity%

Number of lines in readme file

29

decreased by-76.8%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes