@transferwise/neptune-tokens 0.1.1 → 1.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/.releaserc.json +40 -0
  2. package/README.md +92 -63
  3. package/colors-base.css +46 -0
  4. package/colors-base.less +28 -21
  5. package/colors.json +1598 -892
  6. package/package.json +15 -6
  7. package/themes/dark/tokens.css +82 -0
  8. package/themes/dark/tokens.less +79 -0
  9. package/themes/light/tokens.css +82 -0
  10. package/themes/light/tokens.less +79 -0
  11. package/themes/navy/tokens.css +82 -0
  12. package/themes/navy/tokens.less +79 -0
  13. package/tokens.css +82 -0
  14. package/tokens.less +161 -0
  15. package/border.css +0 -8
  16. package/border.less +0 -5
  17. package/colors.css +0 -37
  18. package/spacing.css +0 -17
  19. package/spacing.less +0 -14
package/.releaserc.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "branches": [
3
+ {
4
+ "name": "main"
5
+ },
6
+ {
7
+ "name": "next",
8
+ "prerelease": true
9
+ }
10
+ ],
11
+ "debug": "true",
12
+ "plugins": [
13
+ "@semantic-release/commit-analyzer",
14
+ "@semantic-release/release-notes-generator",
15
+ [
16
+ "@semantic-release/changelog",
17
+ {
18
+ "changelogFile": "CHANGELOG.md",
19
+ "changelogTitle":
20
+ "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n"
21
+ }
22
+ ],
23
+ [
24
+ "@semantic-release/npm",
25
+ {
26
+ "publishConfig": {
27
+ "access": "restricted"
28
+ }
29
+ }
30
+ ],
31
+ [
32
+ "@semantic-release/git",
33
+ {
34
+ "assets": ["CHANGELOG.md", "package.json"],
35
+ "message": "chore(release): [skip ci]\n\n${nextRelease.version}\n\n${nextRelease.notes}"
36
+ }
37
+ ],
38
+ "@semantic-release/github"
39
+ ]
40
+ }
package/README.md CHANGED
@@ -1,55 +1,51 @@
1
1
  # Neptune Tokens [![npm](https://img.shields.io/npm/v/@transferwise/neptune-tokens.svg)](https://www.npmjs.com/package/@transferwise/neptune-tokens)
2
2
 
3
- Design tokens for the [Neptune Design System](https://github.com/transferwise/neptune). Includes spacing and colours, and distributes bundles for common formats.
3
+ Design tokens for [Neptune](https://github.com/transferwise/neptune), TransferWise's design system. Currently includes colours, radiuses, and sizes.
4
4
 
5
5
  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.
6
6
 
7
- ## Getting started
7
+ ## Installation
8
8
 
9
- For npm environments, install the package and consume the bundled files described below.
9
+ For npm environments, install the package and consume the bundles below.
10
10
 
11
11
  ```shell
12
12
  npm i @transferwise/neptune-tokens
13
13
  ```
14
14
 
15
- ## Spacing
15
+ ### Web
16
16
 
17
- 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.
17
+ Bundles are offered both in CSS and Less.
18
18
 
19
- | Name | Size |
20
- | ---------- | ---- |
21
- | `space-4` | 4 |
22
- | `space-8` | 8 |
23
- | `space-12` | 12 |
24
- | `space-16` | 16 |
25
- | `space-24` | 24 |
26
- | `space-32` | 32 |
27
- | `space-40` | 40 |
28
- | `space-48` | 48 |
29
- | `space-56` | 56 |
30
- | `space-64` | 64 |
19
+ We currently only have one theme on web, so the bundles directly reference the colour values from the `light` theme.
31
20
 
32
- ### Web
21
+ ```css
22
+ @import "@transferwise/neptune-tokens/tokens.css";
33
23
 
34
- ```less
35
- // CSS custom properties
36
- @import "@transferwise/neptune-tokens/spacing.css";
37
-
38
- .tw-checkable-card {
39
- padding: var(--space-16);
24
+ .tw-card {
25
+ color: var(--color-text-primary);
26
+ padding: var(--size-16);
40
27
  }
41
28
  ```
42
29
 
43
30
  ```less
44
- // Less variables
45
- @import "@transferwise/neptune-tokens/spacing.less";
31
+ @import "@transferwise/neptune-tokens/tokens.less";
46
32
 
47
- .tw-checkable-card {
48
- padding: @space-16;
33
+ .tw-card {
34
+ color: @color-text-primary;
35
+ padding: @size-16;
49
36
  }
50
37
  ```
51
38
 
52
- ## Colours
39
+ ### Figma
40
+
41
+ To import or update colours on the Figma libraries for Neptune:
42
+
43
+ 1. Copy the values from the [colors.json](https://github.com/transferwise/neptune-tokens/blob/master/dist/colors.json) file in the dist folder
44
+ 2. Paste them into the plugin [Import from Style Dictionary](https://www.figma.com/community/plugin/827796798859685469/Import-from-Style-Dictionary)
45
+
46
+ ## Properties
47
+
48
+ ### Colours
53
49
 
54
50
  Our current colour palette is built on a main set of 7 base colours with different levels of brightness. From lightest to darkest:
55
51
 
@@ -62,48 +58,81 @@ The base set also includes 3 brand colours, currently used exclusively in market
62
58
 
63
59
  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.
64
60
 
65
- ### Source values
61
+ #### Source values
66
62
 
67
63
  - [Base](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/base.json)
68
64
  - [Light theme](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/themes/light.json)
69
65
  - [Dark theme](https://github.com/transferwise/neptune-tokens/blob/master/src/colors/themes/dark.json)
70
66
 
71
- ### Web
72
-
73
- We currently only have one theme on web, so `colors.css` directly references the values from the `light` theme.
74
-
75
- ```less
76
- // CSS custom properties
77
- @import "@transferwise/neptune-tokens/colors.css";
78
-
79
- .button {
80
- background-color: var(--color-control-accent);
81
- }
82
- ```
83
-
84
- The base colours are currently only bundled in Less.
67
+ ### Radius
85
68
 
86
- ```less
87
- // Less variables
88
- @import "@transferwise/neptune-tokens/colors-base.less";
89
-
90
- .special-brand-element {
91
- background-color: @color-base-brand-purple;
92
- }
93
- ```
69
+ 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.
94
70
 
95
- ### iOS
71
+ | Name | Size |
72
+ | --------------- | ---- |
73
+ | `radius-small` | 3 |
74
+ | `radius-medium` | 10 |
96
75
 
97
- We generate 2 asset catalogs for iOS:
76
+ ### Sizes
98
77
 
99
- - `BaseColors.xcassets` contains the base colours
100
- - `Colors.xcassets` contains the semantic colours with the `light` and `dark` themes associated with iOS appearances
78
+ Size tokens should be used for defining spaces and dimensions.
101
79
 
102
- To use them, copy both catalogs on the [`dist`](https://github.com/transferwise/neptune-tokens/tree/master/dist) folder to your iOS project.
80
+ 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.
103
81
 
104
- ### Figma
105
-
106
- To import or update colours on the Figma libraries for Neptune:
107
-
108
- 1. Copy the values from the [colors.json](https://github.com/transferwise/neptune-tokens/blob/master/dist/colors.json) file in the dist folder
109
- 2. Paste them into the plugin [Import from Style Dictionary](https://www.figma.com/community/plugin/827796798859685469/Import-from-Style-Dictionary)
82
+ | Name | Size |
83
+ | ---------- | ---- |
84
+ | `size-4` | 4 |
85
+ | `size-8` | 8 |
86
+ | `size-12` | 12 |
87
+ | `size-16` | 16 |
88
+ | `size-24` | 24 |
89
+ | `size-32` | 32 |
90
+ | `size-40` | 40 |
91
+ | `size-48` | 48 |
92
+ | `size-56` | 56 |
93
+ | `size-64` | 64 |
94
+ | `size-72` | 72 |
95
+ | `size-80` | 80 |
96
+ | `size-88` | 88 |
97
+ | `size-96` | 96 |
98
+ | `size-104` | 104 |
99
+ | `size-112` | 112 |
100
+ | `size-120` | 120 |
101
+ | `size-128` | 128 |
102
+
103
+ > ⚠️ These tokens were previously called `spacing` before version 1.0.0
104
+
105
+ ### Spaces
106
+
107
+ Space tokens should be used for defining spaces between elements.
108
+
109
+ We currently only provide a token for horizontal content spacing.
110
+
111
+ | Name | Size |
112
+ | -------------------------- | ---- |
113
+ | `space-content-horizontal` | 16 |
114
+
115
+ ### Typography
116
+
117
+ 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.
118
+
119
+ | Name | Size | Default rendering size |
120
+ | -------------- | ----- | ---------------------- |
121
+ | `font-size-12` | 0.75 | 12px |
122
+ | `font-size-14` | 0.875 | 14px |
123
+ | `font-size-16` | 1 | 16px |
124
+ | `font-size-20` | 1.25 | 20px |
125
+ | `font-size-26` | 1.625 | 26px |
126
+ | `font-size-32` | 2 | 32px |
127
+
128
+ | Name | Line height |
129
+ | --------------------- | ----------- |
130
+ | `line-height-title` | 1.2 |
131
+ | `line-height-body` | 1.5 |
132
+ | `line-height-control` | 1.2 |
133
+
134
+ | Name | Font weight |
135
+ | ----------------------- | ----------- |
136
+ | `font-weight-regular` | 500 |
137
+ | `font-weight-semi-bold` | 600 |
138
+ | `font-weight-bold` | 800 |
package/colors-base.css ADDED
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 12 Jul 2022 16:37:52 GMT
4
+ */
5
+
6
+ :root {
7
+ --color-base-blue-light: #00b9ff;
8
+ --color-base-blue-mid: #00a2dd;
9
+ --color-base-blue-dark: #0097c7;
10
+ --color-base-blue-fade: #38c8ff1a;
11
+ --color-base-green-light: #6fd698;
12
+ --color-base-green-mid: #2ead4b;
13
+ --color-base-green-dark: #008026;
14
+ --color-base-green-fade: #36c7971a;
15
+ --color-base-red-light: #ffa6a9;
16
+ --color-base-red-mid: #e74848;
17
+ --color-base-red-dark: #cf2929;
18
+ --color-base-red-fade: #ff87871a;
19
+ --color-base-orange-light: #ffd184;
20
+ --color-base-orange-mid: #df8700;
21
+ --color-base-orange-dark: #9a6500;
22
+ --color-base-orange-fade: #ffac001a;
23
+ --color-base-smoke-light: #e2e6e8;
24
+ --color-base-smoke-mid: #c9cbce;
25
+ --color-base-smoke-dark: #a8aaac;
26
+ --color-base-smoke-fade: #86a7bd1a;
27
+ --color-base-navy-light: #37517e;
28
+ --color-base-navy-mid: #2e4369;
29
+ --color-base-navy-dark: #253655;
30
+ --color-base-navy-fade: #849cc51a;
31
+ --color-base-grey-light: #829ca9;
32
+ --color-base-grey-mid: #768e9c;
33
+ --color-base-grey-dark: #5d7079;
34
+ --color-base-grey-fade: #829ca91a;
35
+ --color-base-white-light: #ffffff;
36
+ --color-base-white-mid: #ebebeb;
37
+ --color-base-white-fade: #ffffff1a;
38
+ --color-base-black-light: #202020;
39
+ --color-base-black-mid: #181818;
40
+ --color-base-black-dark: #000000;
41
+ --color-base-black-fade: #0000001a;
42
+ --color-base-brand-blue: #00b9ff;
43
+ --color-base-brand-purple: #485cc7;
44
+ --color-base-brand-amber: #ffb619;
45
+ --color-base-brand-borderless: #44ee70;
46
+ }
package/colors-base.less CHANGED
@@ -1,36 +1,43 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 26 Aug 2020 07:51:22 GMT
3
+ // Generated on Tue, 12 Jul 2022 16:37:52 GMT
4
4
 
5
5
  @color-base-blue-light: #00b9ff;
6
- @color-base-blue-mid: #00a4df;
7
- @color-base-blue-dark: #008ec0;
8
- @color-base-blue-fade: #d8f1fa;
9
- @color-base-green-light: #2ed06e;
10
- @color-base-green-mid: #28b862;
11
- @color-base-green-dark: #1d8547;
12
- @color-base-green-fade: #d6f6e2;
13
- @color-base-red-light: #f53636;
14
- @color-base-red-mid: #cf3131;
15
- @color-base-red-dark: #b62a18;
16
- @color-base-red-fade: #ffdfdf;
17
- @color-base-orange-light: #ffa600;
6
+ @color-base-blue-mid: #00a2dd;
7
+ @color-base-blue-dark: #0097c7;
8
+ @color-base-blue-fade: #38c8ff1a;
9
+ @color-base-green-light: #6fd698;
10
+ @color-base-green-mid: #2ead4b;
11
+ @color-base-green-dark: #008026;
12
+ @color-base-green-fade: #36c7971a;
13
+ @color-base-red-light: #ffa6a9;
14
+ @color-base-red-mid: #e74848;
15
+ @color-base-red-dark: #cf2929;
16
+ @color-base-red-fade: #ff87871a;
17
+ @color-base-orange-light: #ffd184;
18
18
  @color-base-orange-mid: #df8700;
19
- @color-base-orange-dark: #c07500;
20
- @color-base-orange-fade: #fff4dd;
19
+ @color-base-orange-dark: #9a6500;
20
+ @color-base-orange-fade: #ffac001a;
21
21
  @color-base-smoke-light: #e2e6e8;
22
- @color-base-smoke-mid: #d3d5d8;
22
+ @color-base-smoke-mid: #c9cbce;
23
23
  @color-base-smoke-dark: #a8aaac;
24
- @color-base-smoke-fade: #f2f5f7;
24
+ @color-base-smoke-fade: #86a7bd1a;
25
25
  @color-base-navy-light: #37517e;
26
26
  @color-base-navy-mid: #2e4369;
27
27
  @color-base-navy-dark: #253655;
28
- @color-base-navy-fade: #a8afbb;
28
+ @color-base-navy-fade: #849cc51a;
29
29
  @color-base-grey-light: #829ca9;
30
- @color-base-grey-mid: #6f8691;
30
+ @color-base-grey-mid: #768e9c;
31
31
  @color-base-grey-dark: #5d7079;
32
+ @color-base-grey-fade: #829ca91a;
33
+ @color-base-white-light: #ffffff;
34
+ @color-base-white-mid: #ebebeb;
35
+ @color-base-white-fade: #ffffff1a;
36
+ @color-base-black-light: #202020;
37
+ @color-base-black-mid: #181818;
38
+ @color-base-black-dark: #000000;
39
+ @color-base-black-fade: #0000001a;
32
40
  @color-base-brand-blue: #00b9ff;
33
41
  @color-base-brand-purple: #485cc7;
34
42
  @color-base-brand-amber: #ffb619;
35
- @color-base-brand-borderless: #44ee70;
36
- @color-base-white: #ffffff;
43
+ @color-base-brand-borderless: #44ee70;