New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@transferwise/neptune-tokens
Advanced tools
@transferwise/neptune-tokens - npm Package Compare versions
Comparing version 0.1.1 to 1.0.0
| { | ||
| "name": "@transferwise/neptune-tokens", | ||
| "version": "0.1.1", | ||
| "version": "1.0.0", | ||
| "description": "Design tokens for the Neptune Design System", | ||
@@ -5,0 +5,0 @@ "license": "UNLICENSED", |
110
README.md
| # Neptune Tokens [](https://www.npmjs.com/package/@transferwise/neptune-tokens) | ||
| Design tokens for the [Neptune Design System](https://github.com/transferwise/neptune). Includes spacing and colours, and distributes bundles for common formats. | ||
| Design tokens for [Neptune](https://github.com/transferwise/neptune), TransferWise's design system. Currently includes colours, radiuses, and sizes. | ||
| Tokens always start with a `base` layer that directly accesses the values, and can be extended with a semantic layer that describes the token's intended purpose, rather than how it looks. | ||
| ## Getting started | ||
| ## Installation | ||
| For npm environments, install the package and consume the bundled files described below. | ||
| For npm environments, install the package and consume the bundles below. | ||
@@ -15,27 +15,14 @@ ```shell | ||
| ## Spacing | ||
| ### Web | ||
| We use a 4-point scale that gives finer control to align elements inside components and optimise space on smaller screens, and from 16 onwards it becomes an 8-point scale where the difference in steps is more visible. There's currently no semantic layer for spacing. | ||
| Bundles are offered both in CSS and Less. | ||
| | Name | Size | | ||
| | ---------- | ---- | | ||
| | `space-4` | 4 | | ||
| | `space-8` | 8 | | ||
| | `space-12` | 12 | | ||
| | `space-16` | 16 | | ||
| | `space-24` | 24 | | ||
| | `space-32` | 32 | | ||
| | `space-40` | 40 | | ||
| | `space-48` | 48 | | ||
| | `space-56` | 56 | | ||
| | `space-64` | 64 | | ||
| We currently only have one theme on web, so the bundles directly reference the colour values from the `light` theme. | ||
| ### Web | ||
| ```css | ||
| @import "@transferwise/neptune-tokens/tokens.css"; | ||
| ```less | ||
| // CSS custom properties | ||
| @import "@transferwise/neptune-tokens/spacing.css"; | ||
| .tw-checkable-card { | ||
| padding: var(--space-16); | ||
| .tw-card { | ||
| color: var(--color-text-primary); | ||
| padding: var(--size-16); | ||
| } | ||
@@ -45,12 +32,21 @@ ``` | ||
| ```less | ||
| // Less variables | ||
| @import "@transferwise/neptune-tokens/spacing.less"; | ||
| @import "@transferwise/neptune-tokens/tokens.less"; | ||
| .tw-checkable-card { | ||
| padding: @space-16; | ||
| .tw-card { | ||
| color: @color-text-primary; | ||
| padding: @size-16; | ||
| } | ||
| ``` | ||
| ## Colours | ||
| ### Figma | ||
| To import or update colours on the Figma libraries for Neptune: | ||
| 1. Copy the values from the [colors.json](https://github.com/transferwise/neptune-tokens/blob/master/dist/colors.json) file in the dist folder | ||
| 2. Paste them into the plugin [Import from Style Dictionary](https://www.figma.com/community/plugin/827796798859685469/Import-from-Style-Dictionary) | ||
| ## Properties | ||
| ### Colours | ||
| Our current colour palette is built on a main set of 7 base colours with different levels of brightness. From lightest to darkest: | ||
@@ -67,3 +63,3 @@ | ||
| ### Source values | ||
| #### Source values | ||
@@ -74,40 +70,30 @@ - [Base](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/base.json) | ||
| ### Web | ||
| ### Radius | ||
| We currently only have one theme on web, so `colors.css` directly references the values from the `light` theme. | ||
| Radius tokens are available in `small` and `medium` sizes. We want to encourage a small manageable set of radiuses in Neptune, so we use T-shirt sizes to define their names. | ||
| ```less | ||
| // CSS custom properties | ||
| @import "@transferwise/neptune-tokens/colors.css"; | ||
| | Name | Size | | ||
| | --------------- | ---- | | ||
| | `radius-small` | 3 | | ||
| | `radius-medium` | 10 | | ||
| .button { | ||
| background-color: var(--color-control-accent); | ||
| } | ||
| ``` | ||
| ### Sizes | ||
| The base colours are currently only bundled in Less. | ||
| Size tokens should be used for defining spaces and dimensions. | ||
| ```less | ||
| // Less variables | ||
| @import "@transferwise/neptune-tokens/colors-base.less"; | ||
| We start with a 4-point scale that gives fine control for aligning elements inside components and optimising space on smaller screens. From 16 onwards it becomes an 8-point scale where the difference in steps is more visible. There's currently no semantic layer for sizes. | ||
| .special-brand-element { | ||
| background-color: @color-base-brand-purple; | ||
| } | ||
| ``` | ||
| | Name | Size | | ||
| | --------- | ---- | | ||
| | `size-4` | 4 | | ||
| | `size-8` | 8 | | ||
| | `size-12` | 12 | | ||
| | `size-16` | 16 | | ||
| | `size-24` | 24 | | ||
| | `size-32` | 32 | | ||
| | `size-40` | 40 | | ||
| | `size-48` | 48 | | ||
| | `size-56` | 56 | | ||
| | `size-64` | 64 | | ||
| ### iOS | ||
| We generate 2 asset catalogs for iOS: | ||
| - `BaseColors.xcassets` contains the base colours | ||
| - `Colors.xcassets` contains the semantic colours with the `light` and `dark` themes associated with iOS appearances | ||
| To use them, copy both catalogs on the [`dist`](https://github.com/transferwise/neptune-tokens/tree/master/dist) folder to your iOS project. | ||
| ### Figma | ||
| To import or update colours on the Figma libraries for Neptune: | ||
| 1. Copy the values from the [colors.json](https://github.com/transferwise/neptune-tokens/blob/master/dist/colors.json) file in the dist folder | ||
| 2. Paste them into the plugin [Import from Style Dictionary](https://www.figma.com/community/plugin/827796798859685469/Import-from-Style-Dictionary) | ||
| > ⚠️ These tokens were previously called `spacing` before version 1.0.0 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Fixed alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.43%
76152
- Lines of code
- increased by27.22%
2842
- Number of low quality alerts
- decreased by-50%
1
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of package files
- decreased by-33.33%
6
- Number of lines in readme file
- decreased by-12.73%
96
No dependency changes