@transferwise/neptune-tokens 4.2.0-beta.3 → 6.1.0

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 (13) hide show
  1. package/CHANGELOG.md +24 -9
  2. package/colors-base.css +2 -2
  3. package/colors-base.less +2 -2
  4. package/colors.json +79 -4
  5. package/package.json +1 -1
  6. package/themes/dark/tokens.css +3 -1
  7. package/themes/dark/tokens.less +4 -2
  8. package/themes/light/tokens.css +3 -1
  9. package/themes/light/tokens.less +4 -2
  10. package/themes/navy/tokens.css +3 -1
  11. package/themes/navy/tokens.less +4 -2
  12. package/tokens.css +3 -43
  13. package/tokens.less +48 -2
package/CHANGELOG.md CHANGED
@@ -1,23 +1,38 @@
1
- # v4.2.0-beta.3
1
+ # v6.1.0
2
+
3
+ ## Add tertiary content token
4
+
5
+ We're adding a new tertiary content token for text that should be deemphasised further than secondary, like placeholders in inputs and inactive components.
6
+
7
+ # v6.0.0
8
+
9
+ ## Remove themed CSS custom properties (variables) from :root
10
+
11
+ To avoid further confusion with our upcoming theming changes, we are dropping the color theme name from CSS variables assigned to the `:root` pseudo-class.
12
+
13
+ # v5.1.0
14
+
15
+ ## Add font-family token
16
+
17
+ # v5.0.0
2
18
 
3
19
  ## Add Navy color tokens to default bundle
4
20
 
5
- Navy tokens addes with `-navy-` part in file, e.g
21
+ Navy tokens added with `-navy-` part in file, e.g
6
22
 
7
23
  ```css
8
- --color-navy-content-primary: #...;
9
- --color-navy-content-secondary: #...;
24
+ --color-navy-content-primary: #...;
25
+ --color-navy-content-secondary: #...;
10
26
  ```
11
27
 
12
-
13
28
  ## and make path to default bundle same as in v1 (breaking change)
14
29
 
15
- ```js
30
+ ```css
16
31
  // old
17
- @transferwise/neptune-tokens/themes/default/tokens.css
32
+ @import "@transferwise/neptune-tokens/themes/default/tokens.css";
18
33
 
19
34
  // new
20
- @transferwise/neptune-tokens/tokens.css
35
+ @import "@transferwise/neptune-tokens/tokens.css";
21
36
  ```
22
37
 
23
- This is necessary because most people still use v1 and it will be less of a breaking change in upcoming Neptune release with new colors.
38
+ This is necessary because most people still use v1 and it will be less of a breaking change in upcoming Neptune release with new colors.
package/colors-base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ * Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -29,7 +29,7 @@
29
29
  --color-base-navy-dark: #253655;
30
30
  --color-base-navy-fade: #849cc51a;
31
31
  --color-base-grey-light: #829ca9;
32
- --color-base-grey-mid: #6f8691;
32
+ --color-base-grey-mid: #768e9c;
33
33
  --color-base-grey-dark: #5d7079;
34
34
  --color-base-grey-fade: #829ca91a;
35
35
  --color-base-white-light: #ffffff;
package/colors-base.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ // Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
 
5
5
  @color-base-blue-light: #00b9ff;
6
6
  @color-base-blue-mid: #00a2dd;
@@ -27,7 +27,7 @@
27
27
  @color-base-navy-dark: #253655;
28
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
32
  @color-base-grey-fade: #829ca91a;
33
33
  @color-base-white-light: #ffffff;
package/colors.json CHANGED
@@ -703,15 +703,15 @@
703
703
  },
704
704
  "mid": {
705
705
  "value": {
706
- "r": 0.43529411764705883,
707
- "g": 0.5254901960784314,
708
- "b": 0.5686274509803921
706
+ "r": 0.4627450980392157,
707
+ "g": 0.5568627450980392,
708
+ "b": 0.611764705882353
709
709
  },
710
710
  "filePath": "tokens/colors/base.json",
711
711
  "isSource": true,
712
712
  "original": {
713
713
  "value": {
714
- "hex": "#6f8691"
714
+ "hex": "#768e9c"
715
715
  }
716
716
  },
717
717
  "name": "baseGreyMid",
@@ -1145,6 +1145,31 @@
1145
1145
  "secondary"
1146
1146
  ]
1147
1147
  },
1148
+ "tertiary": {
1149
+ "value": {
1150
+ "r": 0.6588235294117647,
1151
+ "g": 0.6666666666666666,
1152
+ "b": 0.6745098039215687
1153
+ },
1154
+ "filePath": "tokens/colors/themes/dark.json",
1155
+ "isSource": true,
1156
+ "original": {
1157
+ "value": "{color.base.smoke.dark.value}"
1158
+ },
1159
+ "name": "darkContentTertiary",
1160
+ "attributes": {
1161
+ "category": "color",
1162
+ "type": "dark",
1163
+ "item": "content",
1164
+ "subitem": "tertiary"
1165
+ },
1166
+ "path": [
1167
+ "color",
1168
+ "dark",
1169
+ "content",
1170
+ "tertiary"
1171
+ ]
1172
+ },
1148
1173
  "accent": {
1149
1174
  "value": {
1150
1175
  "r": 0,
@@ -1765,6 +1790,31 @@
1765
1790
  "secondary"
1766
1791
  ]
1767
1792
  },
1793
+ "tertiary": {
1794
+ "value": {
1795
+ "r": 0.4627450980392157,
1796
+ "g": 0.5568627450980392,
1797
+ "b": 0.611764705882353
1798
+ },
1799
+ "filePath": "tokens/colors/themes/light.json",
1800
+ "isSource": true,
1801
+ "original": {
1802
+ "value": "{color.base.grey.mid.value}"
1803
+ },
1804
+ "name": "lightContentTertiary",
1805
+ "attributes": {
1806
+ "category": "color",
1807
+ "type": "light",
1808
+ "item": "content",
1809
+ "subitem": "tertiary"
1810
+ },
1811
+ "path": [
1812
+ "color",
1813
+ "light",
1814
+ "content",
1815
+ "tertiary"
1816
+ ]
1817
+ },
1768
1818
  "accent": {
1769
1819
  "value": {
1770
1820
  "r": 0,
@@ -2385,6 +2435,31 @@
2385
2435
  "secondary"
2386
2436
  ]
2387
2437
  },
2438
+ "tertiary": {
2439
+ "value": {
2440
+ "r": 0.6588235294117647,
2441
+ "g": 0.6666666666666666,
2442
+ "b": 0.6745098039215687
2443
+ },
2444
+ "filePath": "tokens/colors/themes/navy.json",
2445
+ "isSource": true,
2446
+ "original": {
2447
+ "value": "{color.base.smoke.dark.value}"
2448
+ },
2449
+ "name": "navyContentTertiary",
2450
+ "attributes": {
2451
+ "category": "color",
2452
+ "type": "navy",
2453
+ "item": "content",
2454
+ "subitem": "tertiary"
2455
+ },
2456
+ "path": [
2457
+ "color",
2458
+ "navy",
2459
+ "content",
2460
+ "tertiary"
2461
+ ]
2462
+ },
2388
2463
  "accent": {
2389
2464
  "value": {
2390
2465
  "r": 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-tokens",
3
- "version": "4.2.0-beta.3",
3
+ "version": "6.1.0",
4
4
  "description": "Design tokens for the Neptune Design System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
package/themes/dark/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ * Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
  */
5
5
 
6
6
  .np-theme-dark {
7
7
  --color-content-primary: #e2e6e8;
8
8
  --color-content-secondary: #c9cbce;
9
+ --color-content-tertiary: #a8aaac;
9
10
  --color-content-accent: #00b9ff;
10
11
  --color-content-accent-hover: #00a6ea;
11
12
  --color-content-accent-active: #0097db;
@@ -79,4 +80,5 @@
79
80
  --font-weight-regular: 500;
80
81
  --font-weight-semi-bold: 600;
81
82
  --font-weight-bold: 800;
83
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
84
  }
package/themes/dark/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ // Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
 
5
5
  @color-content-primary: #e2e6e8;
6
6
  @color-content-secondary: #c9cbce;
7
+ @color-content-tertiary: #a8aaac;
7
8
  @color-content-accent: #00b9ff;
8
9
  @color-content-accent-hover: #00a6ea;
9
10
  @color-content-accent-active: #0097db;
@@ -76,4 +77,5 @@
76
77
  @line-height-control: 1.2;
77
78
  @font-weight-regular: 500;
78
79
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
80
+ @font-weight-bold: 800;
81
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/themes/light/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ * Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
  */
5
5
 
6
6
  .np-theme-light {
7
7
  --color-content-primary: #37517e;
8
8
  --color-content-secondary: #5d7079;
9
+ --color-content-tertiary: #768e9c;
9
10
  --color-content-accent: #0097c7;
10
11
  --color-content-accent-hover: #0084b3;
11
12
  --color-content-accent-active: #0077a5;
@@ -79,4 +80,5 @@
79
80
  --font-weight-regular: 500;
80
81
  --font-weight-semi-bold: 600;
81
82
  --font-weight-bold: 800;
83
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
84
  }
package/themes/light/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ // Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
 
5
5
  @color-content-primary: #37517e;
6
6
  @color-content-secondary: #5d7079;
7
+ @color-content-tertiary: #768e9c;
7
8
  @color-content-accent: #0097c7;
8
9
  @color-content-accent-hover: #0084b3;
9
10
  @color-content-accent-active: #0077a5;
@@ -76,4 +77,5 @@
76
77
  @line-height-control: 1.2;
77
78
  @font-weight-regular: 500;
78
79
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
80
+ @font-weight-bold: 800;
81
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/themes/navy/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ * Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
  */
5
5
 
6
6
  .np-theme-navy {
7
7
  --color-content-primary: #ffffff;
8
8
  --color-content-secondary: #c9cbce;
9
+ --color-content-tertiary: #a8aaac;
9
10
  --color-content-accent: #00b9ff;
10
11
  --color-content-accent-hover: #00a6ea;
11
12
  --color-content-accent-active: #0097db;
@@ -79,4 +80,5 @@
79
80
  --font-weight-regular: 500;
80
81
  --font-weight-semi-bold: 600;
81
82
  --font-weight-bold: 800;
83
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
84
  }
package/themes/navy/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ // Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
 
5
5
  @color-content-primary: #ffffff;
6
6
  @color-content-secondary: #c9cbce;
7
+ @color-content-tertiary: #a8aaac;
7
8
  @color-content-accent: #00b9ff;
8
9
  @color-content-accent-hover: #00a6ea;
9
10
  @color-content-accent-active: #0097db;
@@ -76,4 +77,5 @@
76
77
  @line-height-control: 1.2;
77
78
  @font-weight-regular: 500;
78
79
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
80
+ @font-weight-bold: 800;
81
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ * Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --color-content-primary: #37517e;
8
8
  --color-content-secondary: #5d7079;
9
+ --color-content-tertiary: #768e9c;
9
10
  --color-content-accent: #0097c7;
10
11
  --color-content-accent-hover: #0084b3;
11
12
  --color-content-accent-active: #0077a5;
@@ -46,48 +47,6 @@
46
47
  --color-border-neutral: #0000001a;
47
48
  --color-border-overlay: #0000001a;
48
49
  --color-core-contrast: #000000;
49
- --color-navy-content-primary: #ffffff;
50
- --color-navy-content-secondary: #c9cbce;
51
- --color-navy-content-accent: #00b9ff;
52
- --color-navy-content-accent-hover: #00a6ea;
53
- --color-navy-content-accent-active: #0097db;
54
- --color-navy-content-positive: #6fd698;
55
- --color-navy-content-positive-hover: #5ac285;
56
- --color-navy-content-positive-active: #4bb377;
57
- --color-navy-content-negative: #ffa6a9;
58
- --color-navy-content-negative-hover: #ea9396;
59
- --color-navy-content-negative-active: #da8488;
60
- --color-navy-content-warning: #ffd184;
61
- --color-navy-content-warning-hover: #e9bd71;
62
- --color-navy-content-warning-active: #daae63;
63
- --color-navy-content-disabled: #a8aaac;
64
- --color-navy-interactive-accent: #00a2dd;
65
- --color-navy-interactive-accent-hover: #008fc9;
66
- --color-navy-interactive-accent-active: #0081ba;
67
- --color-navy-interactive-positive: #2ead4b;
68
- --color-navy-interactive-positive-hover: #069939;
69
- --color-navy-interactive-positive-active: #008b2b;
70
- --color-navy-interactive-negative: #e74848;
71
- --color-navy-interactive-negative-hover: #d03238;
72
- --color-navy-interactive-negative-active: #bf1e2c;
73
- --color-navy-interactive-warning: #df8700;
74
- --color-navy-interactive-warning-hover: #c97500;
75
- --color-navy-interactive-warning-active: #b86700;
76
- --color-navy-interactive-secondary: #a8aaac;
77
- --color-navy-interactive-secondary-hover: #959799;
78
- --color-navy-interactive-secondary-active: #87898b;
79
- --color-navy-interactive-disabled: #a8aaac;
80
- --color-navy-background-screen: #2e4369;
81
- --color-navy-background-elevated: #37517e;
82
- --color-navy-background-neutral: #86a7bd1a;
83
- --color-navy-background-accent: #38c8ff1a;
84
- --color-navy-background-positive: #36c7971a;
85
- --color-navy-background-negative: #ff87871a;
86
- --color-navy-background-warning: #ffac001a;
87
- --color-navy-background-overlay: #ffffff1a;
88
- --color-navy-border-neutral: #ffffff1a;
89
- --color-navy-border-overlay: #ffffff1a;
90
- --color-navy-core-contrast: #ffffff;
91
50
  --radius-small: 3px;
92
51
  --radius-medium: 10px;
93
52
  --size-4: 4px;
@@ -121,4 +80,5 @@
121
80
  --font-weight-regular: 500;
122
81
  --font-weight-semi-bold: 600;
123
82
  --font-weight-bold: 800;
83
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
124
84
  }
package/tokens.less CHANGED
@@ -1,9 +1,53 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:09:03 GMT
3
+ // Generated on Fri, 03 Dec 2021 12:38:48 GMT
4
4
 
5
+ @color-dark-content-primary: #e2e6e8;
6
+ @color-dark-content-secondary: #c9cbce;
7
+ @color-dark-content-tertiary: #a8aaac;
8
+ @color-dark-content-accent: #00b9ff;
9
+ @color-dark-content-accent-hover: #00a6ea;
10
+ @color-dark-content-accent-active: #0097db;
11
+ @color-dark-content-positive: #6fd698;
12
+ @color-dark-content-positive-hover: #5ac285;
13
+ @color-dark-content-positive-active: #4bb377;
14
+ @color-dark-content-negative: #ffa6a9;
15
+ @color-dark-content-negative-hover: #ea9396;
16
+ @color-dark-content-negative-active: #da8488;
17
+ @color-dark-content-warning: #ffd184;
18
+ @color-dark-content-warning-hover: #e9bd71;
19
+ @color-dark-content-warning-active: #daae63;
20
+ @color-dark-content-disabled: #a8aaac;
21
+ @color-dark-interactive-accent: #00a2dd;
22
+ @color-dark-interactive-accent-hover: #008fc9;
23
+ @color-dark-interactive-accent-active: #0081ba;
24
+ @color-dark-interactive-positive: #2ead4b;
25
+ @color-dark-interactive-positive-hover: #069939;
26
+ @color-dark-interactive-positive-active: #008b2b;
27
+ @color-dark-interactive-negative: #e74848;
28
+ @color-dark-interactive-negative-hover: #d03238;
29
+ @color-dark-interactive-negative-active: #bf1e2c;
30
+ @color-dark-interactive-warning: #df8700;
31
+ @color-dark-interactive-warning-hover: #c97500;
32
+ @color-dark-interactive-warning-active: #b86700;
33
+ @color-dark-interactive-secondary: #a8aaac;
34
+ @color-dark-interactive-secondary-hover: #959799;
35
+ @color-dark-interactive-secondary-active: #87898b;
36
+ @color-dark-interactive-disabled: #a8aaac;
37
+ @color-dark-background-screen: #181818;
38
+ @color-dark-background-elevated: #202020;
39
+ @color-dark-background-neutral: #86a7bd1a;
40
+ @color-dark-background-accent: #38c8ff1a;
41
+ @color-dark-background-positive: #36c7971a;
42
+ @color-dark-background-negative: #ff87871a;
43
+ @color-dark-background-warning: #ffac001a;
44
+ @color-dark-background-overlay: #ffffff1a;
45
+ @color-dark-border-neutral: #ffffff1a;
46
+ @color-dark-border-overlay: #ffffff1a;
47
+ @color-dark-core-contrast: #ffffff;
5
48
  @color-content-primary: #37517e;
6
49
  @color-content-secondary: #5d7079;
50
+ @color-content-tertiary: #768e9c;
7
51
  @color-content-accent: #0097c7;
8
52
  @color-content-accent-hover: #0084b3;
9
53
  @color-content-accent-active: #0077a5;
@@ -46,6 +90,7 @@
46
90
  @color-core-contrast: #000000;
47
91
  @color-navy-content-primary: #ffffff;
48
92
  @color-navy-content-secondary: #c9cbce;
93
+ @color-navy-content-tertiary: #a8aaac;
49
94
  @color-navy-content-accent: #00b9ff;
50
95
  @color-navy-content-accent-hover: #00a6ea;
51
96
  @color-navy-content-accent-active: #0097db;
@@ -118,4 +163,5 @@
118
163
  @line-height-control: 1.2;
119
164
  @font-weight-regular: 500;
120
165
  @font-weight-semi-bold: 600;
121
- @font-weight-bold: 800;
166
+ @font-weight-bold: 800;
167
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;