@transferwise/neptune-tokens 6.1.0 → 7.0.0-beta.2

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 (15) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/colors-base.css +20 -1
  3. package/colors-base.less +20 -1
  4. package/colors.json +1274 -288
  5. package/package.json +1 -1
  6. package/themes/dark/tokens.css +1 -3
  7. package/themes/dark/tokens.less +1 -3
  8. package/themes/light/tokens.css +1 -3
  9. package/themes/light/tokens.less +1 -3
  10. package/themes/navy/tokens.css +1 -3
  11. package/themes/navy/tokens.less +1 -3
  12. package/themes/personal/tokens.css +63 -0
  13. package/themes/personal/tokens.less +60 -0
  14. package/tokens.css +1 -3
  15. package/tokens.less +23 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-tokens",
3
- "version": "6.1.0",
3
+ "version": "7.0.0-beta.2",
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,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ * Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
  */
5
5
 
6
6
  .np-theme-dark {
@@ -19,7 +19,6 @@
19
19
  --color-content-warning: #ffd184;
20
20
  --color-content-warning-hover: #e9bd71;
21
21
  --color-content-warning-active: #daae63;
22
- --color-content-disabled: #a8aaac;
23
22
  --color-interactive-accent: #00a2dd;
24
23
  --color-interactive-accent-hover: #008fc9;
25
24
  --color-interactive-accent-active: #0081ba;
@@ -35,7 +34,6 @@
35
34
  --color-interactive-secondary: #a8aaac;
36
35
  --color-interactive-secondary-hover: #959799;
37
36
  --color-interactive-secondary-active: #87898b;
38
- --color-interactive-disabled: #a8aaac;
39
37
  --color-background-screen: #181818;
40
38
  --color-background-elevated: #202020;
41
39
  --color-background-neutral: #86a7bd1a;
package/themes/dark/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ // Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
 
5
5
  @color-content-primary: #e2e6e8;
6
6
  @color-content-secondary: #c9cbce;
@@ -17,7 +17,6 @@
17
17
  @color-content-warning: #ffd184;
18
18
  @color-content-warning-hover: #e9bd71;
19
19
  @color-content-warning-active: #daae63;
20
- @color-content-disabled: #a8aaac;
21
20
  @color-interactive-accent: #00a2dd;
22
21
  @color-interactive-accent-hover: #008fc9;
23
22
  @color-interactive-accent-active: #0081ba;
@@ -33,7 +32,6 @@
33
32
  @color-interactive-secondary: #a8aaac;
34
33
  @color-interactive-secondary-hover: #959799;
35
34
  @color-interactive-secondary-active: #87898b;
36
- @color-interactive-disabled: #a8aaac;
37
35
  @color-background-screen: #181818;
38
36
  @color-background-elevated: #202020;
39
37
  @color-background-neutral: #86a7bd1a;
package/themes/light/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ * Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
  */
5
5
 
6
6
  .np-theme-light {
@@ -19,7 +19,6 @@
19
19
  --color-content-warning: #9a6500;
20
20
  --color-content-warning-hover: #855400;
21
21
  --color-content-warning-active: #764700;
22
- --color-content-disabled: #a8aaac;
23
22
  --color-interactive-accent: #00a2dd;
24
23
  --color-interactive-accent-hover: #008fc9;
25
24
  --color-interactive-accent-active: #0081ba;
@@ -35,7 +34,6 @@
35
34
  --color-interactive-secondary: #c9cbce;
36
35
  --color-interactive-secondary-hover: #b5b7ba;
37
36
  --color-interactive-secondary-active: #a7a9ab;
38
- --color-interactive-disabled: #a8aaac;
39
37
  --color-background-screen: #ffffff;
40
38
  --color-background-elevated: #ffffff;
41
39
  --color-background-neutral: #86a7bd1a;
package/themes/light/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ // Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
 
5
5
  @color-content-primary: #37517e;
6
6
  @color-content-secondary: #5d7079;
@@ -17,7 +17,6 @@
17
17
  @color-content-warning: #9a6500;
18
18
  @color-content-warning-hover: #855400;
19
19
  @color-content-warning-active: #764700;
20
- @color-content-disabled: #a8aaac;
21
20
  @color-interactive-accent: #00a2dd;
22
21
  @color-interactive-accent-hover: #008fc9;
23
22
  @color-interactive-accent-active: #0081ba;
@@ -33,7 +32,6 @@
33
32
  @color-interactive-secondary: #c9cbce;
34
33
  @color-interactive-secondary-hover: #b5b7ba;
35
34
  @color-interactive-secondary-active: #a7a9ab;
36
- @color-interactive-disabled: #a8aaac;
37
35
  @color-background-screen: #ffffff;
38
36
  @color-background-elevated: #ffffff;
39
37
  @color-background-neutral: #86a7bd1a;
package/themes/navy/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ * Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
  */
5
5
 
6
6
  .np-theme-navy {
@@ -19,7 +19,6 @@
19
19
  --color-content-warning: #ffd184;
20
20
  --color-content-warning-hover: #e9bd71;
21
21
  --color-content-warning-active: #daae63;
22
- --color-content-disabled: #a8aaac;
23
22
  --color-interactive-accent: #00a2dd;
24
23
  --color-interactive-accent-hover: #008fc9;
25
24
  --color-interactive-accent-active: #0081ba;
@@ -35,7 +34,6 @@
35
34
  --color-interactive-secondary: #a8aaac;
36
35
  --color-interactive-secondary-hover: #959799;
37
36
  --color-interactive-secondary-active: #87898b;
38
- --color-interactive-disabled: #a8aaac;
39
37
  --color-background-screen: #2e4369;
40
38
  --color-background-elevated: #37517e;
41
39
  --color-background-neutral: #86a7bd1a;
package/themes/navy/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ // Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
 
5
5
  @color-content-primary: #ffffff;
6
6
  @color-content-secondary: #c9cbce;
@@ -17,7 +17,6 @@
17
17
  @color-content-warning: #ffd184;
18
18
  @color-content-warning-hover: #e9bd71;
19
19
  @color-content-warning-active: #daae63;
20
- @color-content-disabled: #a8aaac;
21
20
  @color-interactive-accent: #00a2dd;
22
21
  @color-interactive-accent-hover: #008fc9;
23
22
  @color-interactive-accent-active: #0081ba;
@@ -33,7 +32,6 @@
33
32
  @color-interactive-secondary: #a8aaac;
34
33
  @color-interactive-secondary-hover: #959799;
35
34
  @color-interactive-secondary-active: #87898b;
36
- @color-interactive-disabled: #a8aaac;
37
35
  @color-background-screen: #2e4369;
38
36
  @color-background-elevated: #37517e;
39
37
  @color-background-neutral: #86a7bd1a;
package/themes/personal/tokens.css ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
+ */
5
+
6
+ .np-theme-personal {
7
+ --color-content-primary: #0e0f0c;
8
+ --color-content-secondary: #454745;
9
+ --color-content-tertiary: #6a6c6a;
10
+ --color-content-accent: #163300;
11
+ --color-content-accent-hover: #0c2300;
12
+ --color-content-accent-active: #001a00;
13
+ --color-content-link: #163300;
14
+ --color-interactive-primary: #163300;
15
+ --color-interactive-primary-hover: #0c2300;
16
+ --color-interactive-primary-active: #001a00;
17
+ --color-interactive-secondary: #868685;
18
+ --color-interactive-secondary-hover: #747473;
19
+ --color-interactive-secondary-active: #666665;
20
+ --color-interactive-accent: #9fe870;
21
+ --color-interactive-accent-hover: #8bd35d;
22
+ --color-interactive-accent-active: #7cc44f;
23
+ --color-background-screen: #ffffff;
24
+ --color-background-elevated: #ffffff;
25
+ --color-background-neutral: #16330014;
26
+ --color-border-neutral: #16330033;
27
+ --color-border-overlay: #16330033;
28
+ --color-core-contrast: #ffffff;
29
+ --radius-small: 3px;
30
+ --radius-medium: 10px;
31
+ --size-4: 4px;
32
+ --size-8: 8px;
33
+ --size-12: 12px;
34
+ --size-16: 16px;
35
+ --size-24: 24px;
36
+ --size-32: 32px;
37
+ --size-40: 40px;
38
+ --size-48: 48px;
39
+ --size-56: 56px;
40
+ --size-64: 64px;
41
+ --size-72: 72px;
42
+ --size-80: 80px;
43
+ --size-88: 88px;
44
+ --size-96: 96px;
45
+ --size-104: 104px;
46
+ --size-112: 112px;
47
+ --size-120: 120px;
48
+ --size-128: 128px;
49
+ --space-content-horizontal: 16px;
50
+ --font-size-12: 0.75rem;
51
+ --font-size-14: 0.875rem;
52
+ --font-size-16: 1rem;
53
+ --font-size-20: 1.25rem;
54
+ --font-size-26: 1.625rem;
55
+ --font-size-32: 2rem;
56
+ --line-height-title: 1.2;
57
+ --line-height-body: 1.5;
58
+ --line-height-control: 1.2;
59
+ --font-weight-regular: 500;
60
+ --font-weight-semi-bold: 600;
61
+ --font-weight-bold: 800;
62
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
63
+ }
package/themes/personal/tokens.less ADDED
@@ -0,0 +1,60 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
+
5
+ @color-content-primary: #0e0f0c;
6
+ @color-content-secondary: #454745;
7
+ @color-content-tertiary: #6a6c6a;
8
+ @color-content-accent: #163300;
9
+ @color-content-accent-hover: #0c2300;
10
+ @color-content-accent-active: #001a00;
11
+ @color-content-link: #163300;
12
+ @color-interactive-primary: #163300;
13
+ @color-interactive-primary-hover: #0c2300;
14
+ @color-interactive-primary-active: #001a00;
15
+ @color-interactive-secondary: #868685;
16
+ @color-interactive-secondary-hover: #747473;
17
+ @color-interactive-secondary-active: #666665;
18
+ @color-interactive-accent: #9fe870;
19
+ @color-interactive-accent-hover: #8bd35d;
20
+ @color-interactive-accent-active: #7cc44f;
21
+ @color-background-screen: #ffffff;
22
+ @color-background-elevated: #ffffff;
23
+ @color-background-neutral: #16330014;
24
+ @color-border-neutral: #16330033;
25
+ @color-border-overlay: #16330033;
26
+ @color-core-contrast: #ffffff;
27
+ @radius-small: 3px;
28
+ @radius-medium: 10px;
29
+ @size-4: 4px;
30
+ @size-8: 8px;
31
+ @size-12: 12px;
32
+ @size-16: 16px;
33
+ @size-24: 24px;
34
+ @size-32: 32px;
35
+ @size-40: 40px;
36
+ @size-48: 48px;
37
+ @size-56: 56px;
38
+ @size-64: 64px;
39
+ @size-72: 72px;
40
+ @size-80: 80px;
41
+ @size-88: 88px;
42
+ @size-96: 96px;
43
+ @size-104: 104px;
44
+ @size-112: 112px;
45
+ @size-120: 120px;
46
+ @size-128: 128px;
47
+ @space-content-horizontal: 16px;
48
+ @font-size-12: 0.75rem;
49
+ @font-size-14: 0.875rem;
50
+ @font-size-16: 1rem;
51
+ @font-size-20: 1.25rem;
52
+ @font-size-26: 1.625rem;
53
+ @font-size-32: 2rem;
54
+ @line-height-title: 1.2;
55
+ @line-height-body: 1.5;
56
+ @line-height-control: 1.2;
57
+ @font-weight-regular: 500;
58
+ @font-weight-semi-bold: 600;
59
+ @font-weight-bold: 800;
60
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ * Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -19,7 +19,6 @@
19
19
  --color-content-warning: #9a6500;
20
20
  --color-content-warning-hover: #855400;
21
21
  --color-content-warning-active: #764700;
22
- --color-content-disabled: #a8aaac;
23
22
  --color-interactive-accent: #00a2dd;
24
23
  --color-interactive-accent-hover: #008fc9;
25
24
  --color-interactive-accent-active: #0081ba;
@@ -35,7 +34,6 @@
35
34
  --color-interactive-secondary: #c9cbce;
36
35
  --color-interactive-secondary-hover: #b5b7ba;
37
36
  --color-interactive-secondary-active: #a7a9ab;
38
- --color-interactive-disabled: #a8aaac;
39
37
  --color-background-screen: #ffffff;
40
38
  --color-background-elevated: #ffffff;
41
39
  --color-background-neutral: #86a7bd1a;
package/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 03 Dec 2021 12:38:48 GMT
3
+ // Generated on Tue, 26 Jul 2022 21:46:38 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
@@ -17,7 +17,6 @@
17
17
  @color-dark-content-warning: #ffd184;
18
18
  @color-dark-content-warning-hover: #e9bd71;
19
19
  @color-dark-content-warning-active: #daae63;
20
- @color-dark-content-disabled: #a8aaac;
21
20
  @color-dark-interactive-accent: #00a2dd;
22
21
  @color-dark-interactive-accent-hover: #008fc9;
23
22
  @color-dark-interactive-accent-active: #0081ba;
@@ -33,7 +32,6 @@
33
32
  @color-dark-interactive-secondary: #a8aaac;
34
33
  @color-dark-interactive-secondary-hover: #959799;
35
34
  @color-dark-interactive-secondary-active: #87898b;
36
- @color-dark-interactive-disabled: #a8aaac;
37
35
  @color-dark-background-screen: #181818;
38
36
  @color-dark-background-elevated: #202020;
39
37
  @color-dark-background-neutral: #86a7bd1a;
@@ -60,7 +58,6 @@
60
58
  @color-content-warning: #9a6500;
61
59
  @color-content-warning-hover: #855400;
62
60
  @color-content-warning-active: #764700;
63
- @color-content-disabled: #a8aaac;
64
61
  @color-interactive-accent: #00a2dd;
65
62
  @color-interactive-accent-hover: #008fc9;
66
63
  @color-interactive-accent-active: #0081ba;
@@ -76,7 +73,6 @@
76
73
  @color-interactive-secondary: #c9cbce;
77
74
  @color-interactive-secondary-hover: #b5b7ba;
78
75
  @color-interactive-secondary-active: #a7a9ab;
79
- @color-interactive-disabled: #a8aaac;
80
76
  @color-background-screen: #ffffff;
81
77
  @color-background-elevated: #ffffff;
82
78
  @color-background-neutral: #86a7bd1a;
@@ -103,7 +99,6 @@
103
99
  @color-navy-content-warning: #ffd184;
104
100
  @color-navy-content-warning-hover: #e9bd71;
105
101
  @color-navy-content-warning-active: #daae63;
106
- @color-navy-content-disabled: #a8aaac;
107
102
  @color-navy-interactive-accent: #00a2dd;
108
103
  @color-navy-interactive-accent-hover: #008fc9;
109
104
  @color-navy-interactive-accent-active: #0081ba;
@@ -119,7 +114,6 @@
119
114
  @color-navy-interactive-secondary: #a8aaac;
120
115
  @color-navy-interactive-secondary-hover: #959799;
121
116
  @color-navy-interactive-secondary-active: #87898b;
122
- @color-navy-interactive-disabled: #a8aaac;
123
117
  @color-navy-background-screen: #2e4369;
124
118
  @color-navy-background-elevated: #37517e;
125
119
  @color-navy-background-neutral: #86a7bd1a;
@@ -131,6 +125,28 @@
131
125
  @color-navy-border-neutral: #ffffff1a;
132
126
  @color-navy-border-overlay: #ffffff1a;
133
127
  @color-navy-core-contrast: #ffffff;
128
+ @color-personal-content-primary: #0e0f0c;
129
+ @color-personal-content-secondary: #454745;
130
+ @color-personal-content-tertiary: #6a6c6a;
131
+ @color-personal-content-accent: #163300;
132
+ @color-personal-content-accent-hover: #0c2300;
133
+ @color-personal-content-accent-active: #001a00;
134
+ @color-personal-content-link: #163300;
135
+ @color-personal-interactive-primary: #163300;
136
+ @color-personal-interactive-primary-hover: #0c2300;
137
+ @color-personal-interactive-primary-active: #001a00;
138
+ @color-personal-interactive-secondary: #868685;
139
+ @color-personal-interactive-secondary-hover: #747473;
140
+ @color-personal-interactive-secondary-active: #666665;
141
+ @color-personal-interactive-accent: #9fe870;
142
+ @color-personal-interactive-accent-hover: #8bd35d;
143
+ @color-personal-interactive-accent-active: #7cc44f;
144
+ @color-personal-background-screen: #ffffff;
145
+ @color-personal-background-elevated: #ffffff;
146
+ @color-personal-background-neutral: #16330014;
147
+ @color-personal-border-neutral: #16330033;
148
+ @color-personal-border-overlay: #16330033;
149
+ @color-personal-core-contrast: #ffffff;
134
150
  @radius-small: 3px;
135
151
  @radius-medium: 10px;
136
152
  @size-4: 4px;