New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@primer/primitives
Advanced tools
@primer/primitives - npm Package Compare versions
Comparing version 3.0.0 to 4.0.0
| { | ||
| "name": "@primer/primitives", | ||
| "version": "3.0.0", | ||
| "version": "4.0.0", | ||
| "description": "Typography, spacing, and color primitives for Primer design system", | ||
| "files": [ | ||
| "index.js", | ||
| "index.d.ts", | ||
| "primitives/*.js", | ||
| "primitives/*.d.ts", | ||
| "theme/*.js", | ||
| "theme/*.d.ts" | ||
| "dist" | ||
| ], | ||
| "main": "index.js", | ||
| "types": "index.d.ts", | ||
| "main": "dist/js/index.js", | ||
| "types": "dist/js/index.d.ts", | ||
| "repository": "https://github.com/primer/primitives", | ||
@@ -31,9 +26,25 @@ "keywords": [ | ||
| "scripts": { | ||
| "build": "tsc", | ||
| "prepack": "yarn build" | ||
| "prebuild": "rm -rf dist", | ||
| "build": "ts-node ./script/build.ts && tsc", | ||
| "prepack": "yarn build", | ||
| "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'", | ||
| "release": "yarn build && changeset publish" | ||
| }, | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "@changesets/cli": "^2.11.2", | ||
| "@types/chalk": "^2.2.0", | ||
| "@types/lodash": "^4.14.163", | ||
| "@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", | ||
| "lodash": "^4.17.20", | ||
| "mkdirp": "^1.0.4", | ||
| "node-sass": "^4.14.1", | ||
| "sass-extract": "^2.1.0", | ||
| "ts-node": "^8.10.2", | ||
| "typescript": "^3.7.2" | ||
| } | ||
| } |
@@ -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/ |
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
- increased by2541%
250129
- Number of package files
- increased by157.14%
36
- Lines of code
- increased by6672.57%
7653
Worsened metrics
- Dev dependency count
- increased by1300%
14
- Number of medium maintenance alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-60.81%
29
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes