npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@transferwise/neptune-tokens

v8.14.0

Published

Design tokens for the Neptune Design System

Downloads

712

Readme

Neptune Tokens npm

Design tokens for Neptune, Wise'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.

Installation

For npm environments, install the package and consume the bundles below.

npm install @transferwise/neptune-tokens

Web

Bundles are offered both in CSS and Less.

We currently only have one theme on web, so the bundles directly reference the colour values from the light theme.

@import "@transferwise/neptune-tokens/tokens.css";

.tw-card {
  color: var(--color-text-primary);
  padding: var(--size-16);
}
@import "@transferwise/neptune-tokens/tokens.less";

.tw-card {
  color: @color-text-primary;
  padding: @size-16;
}

Too add the new personal theme please add our new tokens

@import "@transferwise/neptune-tokens/dist/themes/personal/tokens.css";

Figma

To import or update colours on the Figma libraries for Neptune:

  1. Copy the values from the colors.json file in the dist folder
  2. Paste them into the plugin 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:

  • Fade
  • Light
  • Mid
  • Dark

The base set also includes 3 brand colours, currently used exclusively in marketing pages outside product, that don't have brightness variations.

We have 2 themes, light and dark, that refer to the colours semantically. This is the recommended way of using our colour tokens, as the base colours have a higher risk of deprecation. There are no dependencies between the imports, the values are flattened on the themes, so base colours don't usually need to be imported.

Source values

Radius

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.

| Name | Size | | --------------- | ---- | | radius-small | 3 | | radius-medium | 10 |

Sizes

Size tokens should be used for defining spaces and dimensions.

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.

| Name | Size | | ---------- | ---- | | size-4 | 4 | | size-8 | 8 | | size-12 | 12 | | size-14 | 14 | | size-16 | 16 | | size-24 | 24 | | size-32 | 32 | | size-40 | 40 | | size-48 | 48 | | size-56 | 56 | | size-60 | 60 | | size-64 | 64 | | size-72 | 72 | | size-80 | 80 | | size-88 | 88 | | size-96 | 96 | | size-104 | 104 | | size-112 | 112 | | size-120 | 120 | | size-128 | 128 | | size-146 | 146 | | size-154 | 154 |

⚠️ These tokens were previously called spacing before version 1.0.0

Spaces

Space tokens should be used for defining spaces between elements.

We currently only provide a token for horizontal content spacing.

| Name | Size | | -------------------------- | ---- | | space-content-horizontal | 16 |

Typography

Our size scale was created around the standard size for proportional fonts on most platforms, 16. It then includes smaller values for lower hierarchy body copy, and larger ones mostly used for headings.

| Name | Size | Default rendering size | | -------------- | ----- | ---------------------- | | font-size-12 | 0.75 | 12px | | font-size-14 | 0.875 | 14px | | font-size-16 | 1 | 16px | | font-size-20 | 1.25 | 20px | | font-size-26 | 1.625 | 26px | | font-size-32 | 2 | 32px |

| Name | Line height | | --------------------- | ----------- | | line-height-title | 1.2 | | line-height-body | 1.5 | | line-height-control | 1.2 |

| Name | Font weight | | ----------------------- | ----------- | | font-weight-regular | 500 | | font-weight-semi-bold | 600 | | font-weight-bold | 700 |