@transferwise/neptune-tokens 8.24.2 → 8.26.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 (10) hide show
  1. package/package.json +3 -2
  2. package/pocket/bright-blue/tokens.css +21 -0
  3. package/pocket/bright-orange/tokens.css +21 -0
  4. package/pocket/bright-pink/tokens.css +21 -0
  5. package/pocket/bright-yellow/tokens.css +21 -0
  6. package/pocket/dark-charcoal/tokens.css +21 -0
  7. package/pocket/dark-gold/tokens.css +21 -0
  8. package/pocket/dark-maroon/tokens.css +21 -0
  9. package/pocket/dark-purple/tokens.css +21 -0
  10. package/pocket/pocket.css +148 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-tokens",
3
- "version": "8.24.2",
3
+ "version": "8.26.0",
4
4
  "description": "Design tokens for the Neptune Design System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -32,7 +32,8 @@
32
32
  "*.json",
33
33
  "*.less",
34
34
  "themes/**/*",
35
- "sentiment/**/*"
35
+ "sentiment/**/*",
36
+ "pocket/**/*"
36
37
  ],
37
38
  "devDependencies": {
38
39
  "@changesets/changelog-github": "^0.7.0",
package/pocket/bright-blue/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-bright-blue {
6
+ --color-content-primary: #21231d;
7
+ --color-content-secondary: #0d0e0c;
8
+ --color-content-link: #21231d;
9
+ --color-content-link-hover: #354040;
10
+ --color-content-link-active: #4c5c5c;
11
+ --color-interactive-primary: #21231d;
12
+ --color-interactive-primary-hover: #354040;
13
+ --color-interactive-primary-active: #4c5c5c;
14
+ --color-interactive-accent: #21231d;
15
+ --color-interactive-accent-hover: #354040;
16
+ --color-interactive-accent-active: #4c5c5c;
17
+ --color-interactive-control: #a0e1e1;
18
+ --color-interactive-control-hover: #c5eded;
19
+ --color-interactive-control-active: #c5eded;
20
+ --color-background-screen: #a0e1e1;
21
+ }
package/pocket/bright-orange/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-bright-orange {
6
+ --color-content-primary: #260a2f;
7
+ --color-content-secondary: #110415;
8
+ --color-content-link: #260a2f;
9
+ --color-content-link-hover: #360e43;
10
+ --color-content-link-active: #471358;
11
+ --color-interactive-primary: #260a2f;
12
+ --color-interactive-primary-hover: #360e43;
13
+ --color-interactive-primary-active: #471358;
14
+ --color-interactive-accent: #260a2f;
15
+ --color-interactive-accent-hover: #360e43;
16
+ --color-interactive-accent-active: #471358;
17
+ --color-interactive-control: #ffc091;
18
+ --color-interactive-control-hover: #ffcda8;
19
+ --color-interactive-control-active: #ffdcc2;
20
+ --color-background-screen: #ffc091;
21
+ }
package/pocket/bright-pink/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-bright-pink {
6
+ --color-content-primary: #320707;
7
+ --color-content-secondary: #160303;
8
+ --color-content-link: #320707;
9
+ --color-content-link-hover: #1f0404;
10
+ --color-content-link-active: #0d0202;
11
+ --color-interactive-primary: #320707;
12
+ --color-interactive-primary-hover: #1f0404;
13
+ --color-interactive-primary-active: #0d0202;
14
+ --color-interactive-accent: #320707;
15
+ --color-interactive-accent-hover: #1f0404;
16
+ --color-interactive-accent-active: #0d0202;
17
+ --color-interactive-control: #ffd7ef;
18
+ --color-interactive-control-hover: #ffbde4;
19
+ --color-interactive-control-active: #ffbde4;
20
+ --color-background-screen: #ffd7ef;
21
+ }
package/pocket/bright-yellow/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-bright-yellow {
6
+ --color-content-primary: #3a341c;
7
+ --color-content-secondary: #110f08;
8
+ --color-content-link: #3a341c;
9
+ --color-content-link-hover: #1b190d;
10
+ --color-content-link-active: #0a0a05;
11
+ --color-interactive-primary: #3a341c;
12
+ --color-interactive-primary-hover: #1b190d;
13
+ --color-interactive-primary-active: #0a0a05;
14
+ --color-interactive-accent: #3a341c;
15
+ --color-interactive-accent-hover: #1b190d;
16
+ --color-interactive-accent-active: #0a0a05;
17
+ --color-interactive-control: #ffeb69;
18
+ --color-interactive-control-hover: #ffef85;
19
+ --color-interactive-control-active: #fff29e;
20
+ --color-background-screen: #ffeb69;
21
+ }
package/pocket/dark-charcoal/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-dark-charcoal {
6
+ --color-content-primary: #a0e1e1;
7
+ --color-content-secondary: #ecf9f9;
8
+ --color-content-link: #a0e1e1;
9
+ --color-content-link-hover: #77d4d4;
10
+ --color-content-link-active: #51c8c8;
11
+ --color-interactive-primary: #a0e1e1;
12
+ --color-interactive-primary-hover: #77d4d4;
13
+ --color-interactive-primary-active: #51c8c8;
14
+ --color-interactive-accent: #a0e1e1;
15
+ --color-interactive-accent-hover: #77d4d4;
16
+ --color-interactive-accent-active: #51c8c8;
17
+ --color-interactive-control: #21231d;
18
+ --color-interactive-control-hover: #181915;
19
+ --color-interactive-control-active: #0d0e0c;
20
+ --color-background-screen: #21231d;
21
+ }
package/pocket/dark-gold/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-dark-gold {
6
+ --color-content-primary: #ffeb69;
7
+ --color-content-secondary: #fffce5;
8
+ --color-content-link: #ffeb69;
9
+ --color-content-link-hover: #ffe538;
10
+ --color-content-link-active: #ffde05;
11
+ --color-interactive-primary: #ffeb69;
12
+ --color-interactive-primary-hover: #ffe538;
13
+ --color-interactive-primary-active: #ffde05;
14
+ --color-interactive-accent: #ffeb69;
15
+ --color-interactive-accent-hover: #ffe538;
16
+ --color-interactive-accent-active: #ffde05;
17
+ --color-interactive-control: #3a341c;
18
+ --color-interactive-control-hover: #292514;
19
+ --color-interactive-control-active: #18160c;
20
+ --color-background-screen: #3a341c;
21
+ }
package/pocket/dark-maroon/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-dark-maroon {
6
+ --color-content-primary: #ffd7ef;
7
+ --color-content-secondary: #ffe5f5;
8
+ --color-content-link: #ffd7ef;
9
+ --color-content-link-hover: #ffe5f5;
10
+ --color-content-link-active: #fff5fb;
11
+ --color-interactive-primary: #ffd7ef;
12
+ --color-interactive-primary-hover: #ffe5f5;
13
+ --color-interactive-primary-active: #fff5fb;
14
+ --color-interactive-accent: #ffd7ef;
15
+ --color-interactive-accent-hover: #ffe5f5;
16
+ --color-interactive-accent-active: #fff5fb;
17
+ --color-interactive-control: #320707;
18
+ --color-interactive-control-hover: #480a0a;
19
+ --color-interactive-control-active: #5e0d0d;
20
+ --color-background-screen: #320707;
21
+ }
package/pocket/dark-purple/tokens.css ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .wds-pocket-dark-purple {
6
+ --color-content-primary: #ffc091;
7
+ --color-content-secondary: #fff0e5;
8
+ --color-content-link: #ffc091;
9
+ --color-content-link-hover: #ffdcc2;
10
+ --color-content-link-active: #fff9f5;
11
+ --color-interactive-primary: #ffc091;
12
+ --color-interactive-primary-hover: #ffdcc2;
13
+ --color-interactive-primary-active: #fff9f5;
14
+ --color-interactive-accent: #ffc091;
15
+ --color-interactive-accent-hover: #ffdcc2;
16
+ --color-interactive-accent-active: #fff9f5;
17
+ --color-interactive-control: #260a2f;
18
+ --color-interactive-control-hover: #360e43;
19
+ --color-interactive-control-active: #471358;
20
+ --color-background-screen: #260a2f;
21
+ }
package/pocket/pocket.css ADDED
@@ -0,0 +1,148 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+
6
+ .wds-pocket-bright-blue {
7
+ --color-content-primary: #21231d;
8
+ --color-content-secondary: #0d0e0c;
9
+ --color-content-link: #21231d;
10
+ --color-content-link-hover: #354040;
11
+ --color-content-link-active: #4c5c5c;
12
+ --color-interactive-primary: #21231d;
13
+ --color-interactive-primary-hover: #354040;
14
+ --color-interactive-primary-active: #4c5c5c;
15
+ --color-interactive-accent: #21231d;
16
+ --color-interactive-accent-hover: #354040;
17
+ --color-interactive-accent-active: #4c5c5c;
18
+ --color-interactive-control: #a0e1e1;
19
+ --color-interactive-control-hover: #c5eded;
20
+ --color-interactive-control-active: #c5eded;
21
+ --color-background-screen: #a0e1e1;
22
+ }
23
+
24
+ .wds-pocket-bright-orange {
25
+ --color-content-primary: #260a2f;
26
+ --color-content-secondary: #110415;
27
+ --color-content-link: #260a2f;
28
+ --color-content-link-hover: #360e43;
29
+ --color-content-link-active: #471358;
30
+ --color-interactive-primary: #260a2f;
31
+ --color-interactive-primary-hover: #360e43;
32
+ --color-interactive-primary-active: #471358;
33
+ --color-interactive-accent: #260a2f;
34
+ --color-interactive-accent-hover: #360e43;
35
+ --color-interactive-accent-active: #471358;
36
+ --color-interactive-control: #ffc091;
37
+ --color-interactive-control-hover: #ffcda8;
38
+ --color-interactive-control-active: #ffdcc2;
39
+ --color-background-screen: #ffc091;
40
+ }
41
+
42
+ .wds-pocket-bright-pink {
43
+ --color-content-primary: #320707;
44
+ --color-content-secondary: #160303;
45
+ --color-content-link: #320707;
46
+ --color-content-link-hover: #1f0404;
47
+ --color-content-link-active: #0d0202;
48
+ --color-interactive-primary: #320707;
49
+ --color-interactive-primary-hover: #1f0404;
50
+ --color-interactive-primary-active: #0d0202;
51
+ --color-interactive-accent: #320707;
52
+ --color-interactive-accent-hover: #1f0404;
53
+ --color-interactive-accent-active: #0d0202;
54
+ --color-interactive-control: #ffd7ef;
55
+ --color-interactive-control-hover: #ffbde4;
56
+ --color-interactive-control-active: #ffbde4;
57
+ --color-background-screen: #ffd7ef;
58
+ }
59
+
60
+ .wds-pocket-bright-yellow {
61
+ --color-content-primary: #3a341c;
62
+ --color-content-secondary: #110f08;
63
+ --color-content-link: #3a341c;
64
+ --color-content-link-hover: #1b190d;
65
+ --color-content-link-active: #0a0a05;
66
+ --color-interactive-primary: #3a341c;
67
+ --color-interactive-primary-hover: #1b190d;
68
+ --color-interactive-primary-active: #0a0a05;
69
+ --color-interactive-accent: #3a341c;
70
+ --color-interactive-accent-hover: #1b190d;
71
+ --color-interactive-accent-active: #0a0a05;
72
+ --color-interactive-control: #ffeb69;
73
+ --color-interactive-control-hover: #ffef85;
74
+ --color-interactive-control-active: #fff29e;
75
+ --color-background-screen: #ffeb69;
76
+ }
77
+
78
+ .wds-pocket-dark-charcoal {
79
+ --color-content-primary: #a0e1e1;
80
+ --color-content-secondary: #ecf9f9;
81
+ --color-content-link: #a0e1e1;
82
+ --color-content-link-hover: #77d4d4;
83
+ --color-content-link-active: #51c8c8;
84
+ --color-interactive-primary: #a0e1e1;
85
+ --color-interactive-primary-hover: #77d4d4;
86
+ --color-interactive-primary-active: #51c8c8;
87
+ --color-interactive-accent: #a0e1e1;
88
+ --color-interactive-accent-hover: #77d4d4;
89
+ --color-interactive-accent-active: #51c8c8;
90
+ --color-interactive-control: #21231d;
91
+ --color-interactive-control-hover: #181915;
92
+ --color-interactive-control-active: #0d0e0c;
93
+ --color-background-screen: #21231d;
94
+ }
95
+
96
+ .wds-pocket-dark-gold {
97
+ --color-content-primary: #ffeb69;
98
+ --color-content-secondary: #fffce5;
99
+ --color-content-link: #ffeb69;
100
+ --color-content-link-hover: #ffe538;
101
+ --color-content-link-active: #ffde05;
102
+ --color-interactive-primary: #ffeb69;
103
+ --color-interactive-primary-hover: #ffe538;
104
+ --color-interactive-primary-active: #ffde05;
105
+ --color-interactive-accent: #ffeb69;
106
+ --color-interactive-accent-hover: #ffe538;
107
+ --color-interactive-accent-active: #ffde05;
108
+ --color-interactive-control: #3a341c;
109
+ --color-interactive-control-hover: #292514;
110
+ --color-interactive-control-active: #18160c;
111
+ --color-background-screen: #3a341c;
112
+ }
113
+
114
+ .wds-pocket-dark-maroon {
115
+ --color-content-primary: #ffd7ef;
116
+ --color-content-secondary: #ffe5f5;
117
+ --color-content-link: #ffd7ef;
118
+ --color-content-link-hover: #ffe5f5;
119
+ --color-content-link-active: #fff5fb;
120
+ --color-interactive-primary: #ffd7ef;
121
+ --color-interactive-primary-hover: #ffe5f5;
122
+ --color-interactive-primary-active: #fff5fb;
123
+ --color-interactive-accent: #ffd7ef;
124
+ --color-interactive-accent-hover: #ffe5f5;
125
+ --color-interactive-accent-active: #fff5fb;
126
+ --color-interactive-control: #320707;
127
+ --color-interactive-control-hover: #480a0a;
128
+ --color-interactive-control-active: #5e0d0d;
129
+ --color-background-screen: #320707;
130
+ }
131
+
132
+ .wds-pocket-dark-purple {
133
+ --color-content-primary: #ffc091;
134
+ --color-content-secondary: #fff0e5;
135
+ --color-content-link: #ffc091;
136
+ --color-content-link-hover: #ffdcc2;
137
+ --color-content-link-active: #fff9f5;
138
+ --color-interactive-primary: #ffc091;
139
+ --color-interactive-primary-hover: #ffdcc2;
140
+ --color-interactive-primary-active: #fff9f5;
141
+ --color-interactive-accent: #ffc091;
142
+ --color-interactive-accent-hover: #ffdcc2;
143
+ --color-interactive-accent-active: #fff9f5;
144
+ --color-interactive-control: #260a2f;
145
+ --color-interactive-control-hover: #360e43;
146
+ --color-interactive-control-active: #471358;
147
+ --color-background-screen: #260a2f;
148
+ }