@transferwise/neptune-tokens 0.0.0-experimental-b6daf3f

package/README.md

@@ -0,0 +1,148 @@
+# Neptune Tokens [![npm](https://img.shields.io/npm/v/@transferwise/neptune-tokens.svg)](https://www.npmjs.com/package/@transferwise/neptune-tokens)
+
+Design tokens for [Neptune](https://github.com/transferwise/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.
+
+```shell
+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.
+
+```css
+@import "@transferwise/neptune-tokens/tokens.css";
+
+.tw-card {
+  color: var(--color-text-primary);
+  padding: var(--size-16);
+}
+```
+
+```less
+@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](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:
+
+- 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
+
+- [Base](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/base.json)
+- [Light theme](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/themes/light.json)
+- [Dark theme](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/themes/dark.json)
+
+### 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         |

package/colors-base.css

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 May 2024 10:39:19 GMT
+ */
+
+:root {
+  --color-base-blue-light: #00b9ff;
+  --color-base-blue-mid: #00a2dd;
+  --color-base-blue-dark: #0097c7;
+  --color-base-blue-fade: #38c8ff1a;
+  --color-base-green-light: #6fd698;
+  --color-base-green-mid: #2ead4b;
+  --color-base-green-dark: #008026;
+  --color-base-green-fade: #36c7971a;
+  --color-base-red-light: #ffa6a9;
+  --color-base-red-mid: #e74848;
+  --color-base-red-dark: #cf2929;
+  --color-base-red-fade: #ff87871a;
+  --color-base-orange-light: #ffd184;
+  --color-base-orange-mid: #df8700;
+  --color-base-orange-dark: #9a6500;
+  --color-base-orange-fade: #ffac001a;
+  --color-base-smoke-light: #e2e6e8;
+  --color-base-smoke-mid: #c9cbce;
+  --color-base-smoke-dark: #a8aaac;
+  --color-base-smoke-fade: #86a7bd1a;
+  --color-base-navy-light: #37517e;
+  --color-base-navy-mid: #2e4369;
+  --color-base-navy-dark: #253655;
+  --color-base-navy-fade: #849cc51a;
+  --color-base-grey-light: #829ca9;
+  --color-base-grey-mid: #768e9c;
+  --color-base-grey-dark: #5d7079;
+  --color-base-grey-fade: #829ca91a;
+  --color-base-white-light: #ffffff;
+  --color-base-white-mid: #ebebeb;
+  --color-base-white-fade: #ffffff1a;
+  --color-base-black-light: #202020;
+  --color-base-black-mid: #181818;
+  --color-base-black-dark: #000000;
+  --color-base-black-fade: #0000001a;
+  --color-base-brand-blue: #00b9ff;
+  --color-base-brand-purple: #485cc7;
+  --color-base-brand-amber: #ffb619;
+  --color-base-brand-borderless: #44ee70;
+}

package/colors-base.less

@@ -0,0 +1,43 @@
+
+// Do not edit directly
+// Generated on Fri, 10 May 2024 10:39:19 GMT
+
+@color-base-blue-light: #00b9ff;
+@color-base-blue-mid: #00a2dd;
+@color-base-blue-dark: #0097c7;
+@color-base-blue-fade: #38c8ff1a;
+@color-base-green-light: #6fd698;
+@color-base-green-mid: #2ead4b;
+@color-base-green-dark: #008026;
+@color-base-green-fade: #36c7971a;
+@color-base-red-light: #ffa6a9;
+@color-base-red-mid: #e74848;
+@color-base-red-dark: #cf2929;
+@color-base-red-fade: #ff87871a;
+@color-base-orange-light: #ffd184;
+@color-base-orange-mid: #df8700;
+@color-base-orange-dark: #9a6500;
+@color-base-orange-fade: #ffac001a;
+@color-base-smoke-light: #e2e6e8;
+@color-base-smoke-mid: #c9cbce;
+@color-base-smoke-dark: #a8aaac;
+@color-base-smoke-fade: #86a7bd1a;
+@color-base-navy-light: #37517e;
+@color-base-navy-mid: #2e4369;
+@color-base-navy-dark: #253655;
+@color-base-navy-fade: #849cc51a;
+@color-base-grey-light: #829ca9;
+@color-base-grey-mid: #768e9c;
+@color-base-grey-dark: #5d7079;
+@color-base-grey-fade: #829ca91a;
+@color-base-white-light: #ffffff;
+@color-base-white-mid: #ebebeb;
+@color-base-white-fade: #ffffff1a;
+@color-base-black-light: #202020;
+@color-base-black-mid: #181818;
+@color-base-black-dark: #000000;
+@color-base-black-fade: #0000001a;
+@color-base-brand-blue: #00b9ff;
+@color-base-brand-purple: #485cc7;
+@color-base-brand-amber: #ffb619;
+@color-base-brand-borderless: #44ee70;