@transferwise/neptune-css 0.0.0-experimental-b2666ac → 0.0.0-experimental-d2bc8ee

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 (72) hide show
  1. package/dist/css/accordion.css +6 -5
  2. package/dist/css/alerts.css +14 -142
  3. package/dist/css/background.css +2 -2
  4. package/dist/css/badge.css +1 -3
  5. package/dist/css/breadcrumbs.css +1 -1
  6. package/dist/css/button-groups.css +2 -6
  7. package/dist/css/buttons.css +151 -176
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +10 -11
  10. package/dist/css/close.css +2 -3
  11. package/dist/css/column-layout.css +0 -1
  12. package/dist/css/currency-flags.css +1 -1
  13. package/dist/css/decision.css +5 -4
  14. package/dist/css/dropdowns.css +8 -26
  15. package/dist/css/droppable.css +12 -9
  16. package/dist/css/footer.css +8 -43
  17. package/dist/css/input-groups.css +142 -137
  18. package/dist/css/list-group.css +8 -31
  19. package/dist/css/modals.css +3 -4
  20. package/dist/css/navbar.css +37 -142
  21. package/dist/css/navs.css +8 -20
  22. package/dist/css/neptune-addons.css +4 -83
  23. package/dist/css/neptune-core.css +33 -119
  24. package/dist/css/neptune.css +655 -1245
  25. package/dist/css/popovers.css +6 -10
  26. package/dist/css/process.css +8 -8
  27. package/dist/css/progress-bars.css +2 -7
  28. package/dist/css/ring.css +2 -2
  29. package/dist/css/select.css +2 -2
  30. package/dist/css/sequences.css +39 -95
  31. package/dist/css/table.css +14 -48
  32. package/dist/css/tick.css +0 -1
  33. package/dist/css/tooltip.css +1 -2
  34. package/dist/css/wells.css +5 -5
  35. package/dist/less/neptune-tokens.less +82 -174
  36. package/dist/props/neptune-tokens.css +80 -40
  37. package/package.json +2 -2
  38. package/src/less/addons/_background-utilities.less +0 -37
  39. package/src/less/alerts.less +0 -36
  40. package/src/less/background.less +0 -1
  41. package/src/less/buttons.less +0 -22
  42. package/src/less/column-layout.less +0 -1
  43. package/src/less/core/_fonts.less +0 -26
  44. package/src/less/core/_scaffolding.less +2 -31
  45. package/src/less/core/_typography-utilities.less +0 -29
  46. package/src/less/dropdowns.less +0 -18
  47. package/src/less/footer.less +0 -33
  48. package/src/less/mixins/_sequence.less +2 -2
  49. package/src/less/modals.less +0 -1
  50. package/src/less/navbar.less +0 -35
  51. package/src/less/navs.less +0 -10
  52. package/src/less/sequences.less +0 -26
  53. package/src/less/table.less +0 -8
  54. package/src/variables/neptune-tokens.less +2 -9
  55. package/dist/fonts/TW-Averta-Bold.woff +0 -0
  56. package/dist/fonts/TW-Averta-Bold.woff2 +0 -0
  57. package/dist/fonts/TW-Averta-Regular.woff +0 -0
  58. package/dist/fonts/TW-Averta-Regular.woff2 +0 -0
  59. package/dist/fonts/TW-Averta-Semibold.woff +0 -0
  60. package/dist/fonts/TW-Averta-Semibold.woff2 +0 -0
  61. package/dist/fonts/TransferWise-IconFont.svg +0 -81
  62. package/dist/fonts/TransferWise-IconFont.woff +0 -0
  63. package/dist/props/legacy-custom-props.css +0 -69
  64. package/src/fonts/TW-Averta-Bold.woff +0 -0
  65. package/src/fonts/TW-Averta-Bold.woff2 +0 -0
  66. package/src/fonts/TW-Averta-Regular.woff +0 -0
  67. package/src/fonts/TW-Averta-Regular.woff2 +0 -0
  68. package/src/fonts/TW-Averta-Semibold.woff +0 -0
  69. package/src/fonts/TW-Averta-Semibold.woff2 +0 -0
  70. package/src/fonts/TransferWise-IconFont.svg +0 -81
  71. package/src/fonts/TransferWise-IconFont.woff +0 -0
  72. package/src/props/legacy-custom-props.css +0 -69
@@ -27,9 +27,9 @@
27
27
  transform: rotate(270deg) !important;
28
28
  }
29
29
  .chevron-color {
30
- color: #0097c7;
31
30
  color: var(--color-content-accent);
32
31
  }
33
32
  .np-theme-personal .chevron-color {
33
+ color: #163300;
34
34
  color: var(--color-interactive-primary);
35
35
  }
@@ -5,7 +5,7 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: center;
8
- color: #37517e;
8
+ color: #0e0f0c;
9
9
  color: var(--color-content-primary);
10
10
  text-align: center;
11
11
  -webkit-text-decoration: none;
@@ -23,9 +23,9 @@
23
23
  transition: background-color ease 0.15s, border-color ease 0.15s, color ease 0.15s;
24
24
  }
25
25
  .circle.active {
26
- border-color: #0081ba;
26
+ border-color: #65cf21;
27
27
  border-color: var(--color-interactive-accent-active);
28
- background-color: #0081ba;
28
+ background-color: #65cf21;
29
29
  background-color: var(--color-interactive-accent-active);
30
30
  }
31
31
  .circle img {
@@ -43,7 +43,7 @@ img.circle {
43
43
  border-radius: 50% !important;
44
44
  }
45
45
  a.circle[style]:hover {
46
- border: 1px solid #00a2dd;
46
+ border: 1px solid #9fe870;
47
47
  border: 1px solid var(--color-interactive-accent);
48
48
  }
49
49
  .navbar-nav > li > a .circle {
@@ -86,9 +86,8 @@ a.circle .icon {
86
86
  }
87
87
  a:hover .circle,
88
88
  a.circle:hover {
89
- border-color: #00a2dd;
89
+ border-color: #9fe870;
90
90
  border-color: var(--color-interactive-accent);
91
- color: #0097c7;
92
91
  color: var(--color-content-accent);
93
92
  -webkit-text-decoration: none;
94
93
  text-decoration: none;
@@ -104,16 +103,16 @@ a.circle.active:hover {
104
103
  background-color: #ffffff;
105
104
  background-color: var(--color-background-screen);
106
105
  border-color: #fff;
107
- color: #37517e;
106
+ color: #0e0f0c;
108
107
  color: var(--color-content-primary);
109
108
  }
110
109
  .dropdown-menu .disabled a:hover .circle {
111
- background-color: rgba(134,167,189,0.10196);
110
+ background-color: rgba(22,51,0,0.07843);
112
111
  background-color: var(--color-background-neutral);
113
112
  border-color: transparent;
114
113
  }
115
114
  .circle-inverse {
116
- background-color: rgba(134,167,189,0.10196);
115
+ background-color: rgba(22,51,0,0.07843);
117
116
  background-color: var(--color-background-neutral);
118
117
  }
119
118
  .circle-responsive {
@@ -142,7 +141,7 @@ a.circle.active:hover {
142
141
  line-height: 48px;
143
142
  }
144
143
  .circle-responsive.circle-lg.circle-inverse {
145
- background-color: rgba(134,167,189,0.10196);
144
+ background-color: rgba(22,51,0,0.07843);
146
145
  background-color: var(--color-background-neutral);
147
146
  }
148
147
  @media (min-width: 576px) {
@@ -165,7 +164,7 @@ a.circle.active:hover {
165
164
  line-height: 72px;
166
165
  }
167
166
  .circle-responsive.circle-inverse {
168
- background-color: rgba(134,167,189,0.10196);
167
+ background-color: rgba(22,51,0,0.07843);
169
168
  background-color: var(--color-background-neutral);
170
169
  }
171
170
  }
@@ -1,6 +1,5 @@
1
1
  .close {
2
2
  float: right;
3
- color: #0097c7;
4
3
  color: var(--color-content-accent);
5
4
  -webkit-text-decoration: none;
6
5
  text-decoration: none;
@@ -9,16 +8,17 @@
9
8
  float: left;
10
9
  }
11
10
  .np-theme-personal .close {
11
+ color: #163300;
12
12
  color: var(--color-interactive-primary);
13
13
  }
14
14
  .close:hover {
15
- color: #0084b3;
16
15
  color: var(--color-content-accent-hover);
17
16
  -webkit-text-decoration: none;
18
17
  text-decoration: none;
19
18
  cursor: pointer;
20
19
  }
21
20
  .np-theme-personal .close:hover {
21
+ color: #0d1f00;
22
22
  color: var(--color-interactive-primary-hover);
23
23
  }
24
24
  .close:focus {
@@ -29,7 +29,6 @@
29
29
  outline-offset: var(--ring-outline-offset);
30
30
  }
31
31
  .close:active {
32
- color: #0077a5;
33
32
  color: var(--color-content-accent-active);
34
33
  }
35
34
  button.close {
@@ -107,7 +107,6 @@
107
107
  height: 0;
108
108
  opacity: 0;
109
109
  transition: opacity 0.35s ease;
110
- background-color: #37517e;
111
110
  cursor: pointer;
112
111
  z-index: 1055;
113
112
  }
@@ -3,7 +3,7 @@
3
3
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
4
4
  }
5
5
  .np-theme-personal .currency-flag {
6
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10196);
6
+ box-shadow: inset 0 0 0 1px rgba(14,15,12,0.12157);
7
7
  box-shadow: inset 0 0 0 1px var(--color-border-neutral);
8
8
  border-radius: 50%;
9
9
  }
@@ -16,7 +16,7 @@
16
16
  }
17
17
  .decision__title {
18
18
  margin: 0;
19
- color: #37517e;
19
+ color: #0e0f0c;
20
20
  color: var(--color-content-primary);
21
21
  line-height: 1.2;
22
22
  line-height: var(--line-height-title);
@@ -101,7 +101,7 @@
101
101
  }
102
102
  .decision .media .media-body,
103
103
  .decision.media .media-body {
104
- color: #5d7079;
104
+ color: #454745;
105
105
  color: var(--color-content-secondary);
106
106
  }
107
107
  @media (min-width: 480px) {
@@ -118,12 +118,12 @@
118
118
  background-color: var(--color-background-screen);
119
119
  }
120
120
  .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
121
- background-color: rgba(134,167,189,0.10196);
121
+ background-color: rgba(22,51,0,0.07843);
122
122
  background-color: var(--color-background-neutral);
123
123
  }
124
124
  .decision:not(.disabled):hover .tw-checkbox-button,
125
125
  .decision:not(.disabled):hover .tw-radio-button {
126
- border-color: #00a2dd;
126
+ border-color: #9fe870;
127
127
  border-color: var(--color-interactive-accent);
128
128
  }
129
129
  .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
@@ -134,5 +134,6 @@
134
134
  align-items: initial;
135
135
  }
136
136
  .np-theme-personal .decision:not(.disabled):hover {
137
+ background-color: rgba(22,51,0,0.07843);
137
138
  background-color: var(--color-background-screen-hover);
138
139
  }
@@ -20,7 +20,7 @@
20
20
  text-align: left;
21
21
  background-color: #ffffff;
22
22
  background-color: var(--color-background-screen);
23
- border: 0 solid rgba(0,0,0,0.10196);
23
+ border: 0 solid rgba(14,15,12,0.12157);
24
24
  border: 0 solid var(--color-border-neutral);
25
25
  border-radius: 3px;
26
26
  box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
@@ -68,11 +68,11 @@
68
68
  height: 1px;
69
69
  margin: 0;
70
70
  overflow: hidden;
71
- background-color: rgba(0,0,0,0.10196);
71
+ background-color: rgba(14,15,12,0.12157);
72
72
  background-color: var(--color-border-neutral);
73
73
  }
74
74
  .dropdown-menu .text-primary {
75
- color: #37517e !important;
75
+ color: #0e0f0c !important;
76
76
  color: var(--color-content-primary) !important;
77
77
  }
78
78
  .dropdown-menu > li > a {
@@ -86,7 +86,7 @@
86
86
  letter-spacing: -0.006em;
87
87
  font-weight: 400;
88
88
  font-weight: var(--font-weight-regular);
89
- color: #37517e;
89
+ color: #0e0f0c;
90
90
  color: var(--color-content-primary);
91
91
  white-space: nowrap;
92
92
  }
@@ -100,14 +100,6 @@
100
100
  border-radius: 10px;
101
101
  border-radius: var(--radius-small);
102
102
  }
103
- .np-theme-light .dropdown-menu > li:first-child > a {
104
- border-top-right-radius: 2px;
105
- border-top-left-radius: 2px;
106
- }
107
- .np-theme-light .dropdown-menu > li:last-child > a {
108
- border-bottom-right-radius: 2px;
109
- border-bottom-left-radius: 2px;
110
- }
111
103
  .dropdown-menu > .overlay-back-button,
112
104
  .dropdown-menu > .overlay-title {
113
105
  display: none;
@@ -133,10 +125,10 @@
133
125
  .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
134
126
  -webkit-text-decoration: none;
135
127
  text-decoration: none;
136
- color: #37517e;
128
+ color: #0e0f0c;
137
129
  color: var(--color-content-primary);
138
130
  outline: 0;
139
- box-shadow: inset 0 0 0 1px #c9cbce;
131
+ box-shadow: inset 0 0 0 1px #868685;
140
132
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
141
133
  }
142
134
  .dropdown-menu > .active > a,
@@ -145,24 +137,14 @@
145
137
  .dropdown-menu > .selected > a:hover,
146
138
  .dropdown-menu > .active > a:focus,
147
139
  .dropdown-menu > .selected > a:focus {
148
- color: #ffffff;
149
140
  -webkit-text-decoration: none;
150
141
  text-decoration: none;
151
142
  outline: 0;
152
- background-color: #37517e;
153
143
  }
154
144
  .dropdown-menu > .active > a strong,
155
145
  .dropdown-menu > .selected > a strong {
156
146
  color: inherit;
157
147
  }
158
- .dropdown-menu > .active > a .np-text-body-default,
159
- .dropdown-menu > .selected > a .np-text-body-default,
160
- .dropdown-menu > .active > a .small,
161
- .dropdown-menu > .selected > a .small,
162
- .dropdown-menu > .active > a .secondary,
163
- .dropdown-menu > .selected > a .secondary {
164
- color: #c9cbce;
165
- }
166
148
  .dropdown-menu > .disabled > a:hover,
167
149
  .dropdown-menu > .disabled > a:focus {
168
150
  -webkit-text-decoration: none;
@@ -363,11 +345,11 @@
363
345
  padding: 8px 16px;
364
346
  line-height: 1.5;
365
347
  line-height: var(--line-height-body);
366
- color: #5d7079;
348
+ color: #454745;
367
349
  color: var(--color-content-secondary);
368
350
  white-space: nowrap;
369
351
  margin: 0;
370
- color: #37517e;
352
+ color: #0e0f0c;
371
353
  color: var(--color-content-primary);
372
354
  line-height: 1.2;
373
355
  line-height: var(--line-height-title);
@@ -7,18 +7,18 @@
7
7
  line-height: 150%;
8
8
  letter-spacing: -0.011em;
9
9
  text-align: center;
10
- border: 1px solid #c9cbce;
10
+ border: 1px solid #868685;
11
11
  border: 1px solid var(--color-interactive-secondary);
12
12
  border-radius: 3px;
13
13
  overflow: auto;
14
14
  transition: border-color 0.15s linear;
15
15
  }
16
16
  .droppable:hover {
17
- border-color: #b5b7ba;
17
+ border-color: #6c6c6b;
18
18
  border-color: var(--color-interactive-secondary-hover);
19
19
  }
20
20
  .droppable:active {
21
- border-color: #a7a9ab;
21
+ border-color: #525251;
22
22
  border-color: var(--color-interactive-secondary-active);
23
23
  }
24
24
  .np-theme-personal .droppable {
@@ -33,7 +33,7 @@
33
33
  .np-theme-personal .droppable-area {
34
34
  border-radius: 16px;
35
35
  border-radius: var(--radius-medium);
36
- background-color: rgba(134,167,189,0.10196);
36
+ background-color: rgba(22,51,0,0.07843);
37
37
  background-color: var(--color-background-neutral);
38
38
  padding: 24px;
39
39
  padding: var(--padding-medium);
@@ -59,6 +59,7 @@
59
59
  margin-top: var(--padding-small) !important;
60
60
  }
61
61
  .np-theme-personal .droppable-area.droppable-negative {
62
+ border: 2px solid #cb272f !important;
62
63
  border: 2px solid var(--color-sentiment-negative) !important;
63
64
  background-color: #ffffff;
64
65
  background-color: var(--color-background-screen);
@@ -73,14 +74,16 @@
73
74
  margin-bottom: var(--padding-small) !important;
74
75
  }
75
76
  .np-theme-personal .droppable-area .droppable-dropping-card {
77
+ background-color: rgba(22,51,0,0.12941);
76
78
  background-color: var(--color-background-neutral-hover);
77
79
  }
78
80
  .np-theme-personal .droppable-area .droppable-card-content .circle {
79
81
  padding-top: 0 !important;
80
82
  }
81
83
  .np-theme-personal .droppable-area .circle {
84
+ background-color: #ffffff;
82
85
  background-color: var(--color-contrast);
83
- color: #37517e !important;
86
+ color: #0e0f0c !important;
84
87
  color: var(--color-content-primary) !important;
85
88
  }
86
89
  .droppable-card {
@@ -107,10 +110,11 @@
107
110
  opacity: 1;
108
111
  }
109
112
  .droppable-dropping {
110
- border-color: #a7a9ab !important;
113
+ border-color: #525251 !important;
111
114
  border-color: var(--color-interactive-secondary-active) !important;
112
115
  }
113
116
  .np-theme-personal .droppable-dropping {
117
+ border-color: rgba(22,51,0,0.12941) !important;
114
118
  border-color: var(--color-background-neutral-hover) !important;
115
119
  border-style: solid;
116
120
  }
@@ -134,16 +138,15 @@
134
138
  .droppable-dropping-card {
135
139
  display: none;
136
140
  animation: droppable-fade-in 0.15s 0s linear forwards;
137
- color: #0097c7;
138
141
  color: var(--color-content-accent);
139
142
  background-color: #d8f1fa;
140
- border-color: #00a2dd;
143
+ border-color: #9fe870;
141
144
  border-color: var(--color-interactive-accent);
142
145
  z-index: 1;
143
146
  }
144
147
  .np-theme-personal .droppable-dropping-card {
145
148
  background-color: #E1E4DF;
146
- color: #37517e;
149
+ color: #0e0f0c;
147
150
  color: var(--color-content-primary);
148
151
  }
149
152
  .np-theme-personal--dark .droppable-dropping-card {
@@ -1,5 +1,5 @@
1
1
  .footer {
2
- background-color: rgba(134,167,189,0.10196);
2
+ background-color: rgba(22,51,0,0.07843);
3
3
  background-color: var(--color-background-neutral);
4
4
  font-size: 0.875rem;
5
5
  font-size: var(--font-size-14);
@@ -30,7 +30,7 @@
30
30
  }
31
31
  .footer .footer-link,
32
32
  .footer .link-icon {
33
- color: #5d7079;
33
+ color: #454745;
34
34
  color: var(--color-content-secondary);
35
35
  font-size: 0.875rem;
36
36
  font-size: var(--font-size-14);
@@ -45,21 +45,21 @@
45
45
  .footer .link-icon:active,
46
46
  .footer .footer-link:focus,
47
47
  .footer .link-icon:focus {
48
- color: #5d7079;
48
+ color: #454745;
49
49
  color: var(--color-content-secondary);
50
50
  }
51
51
  .footer .footer-title {
52
- color: #37517e;
52
+ color: #0e0f0c;
53
53
  color: var(--color-content-primary);
54
54
  }
55
55
  .footer .footer-title .footer-link {
56
- color: #37517e;
56
+ color: #0e0f0c;
57
57
  color: var(--color-content-primary);
58
58
  }
59
59
  .footer .footer-title .footer-link:hover,
60
60
  .footer .footer-title .footer-link:active,
61
61
  .footer .footer-title .footer-link:focus {
62
- color: #37517e;
62
+ color: #0e0f0c;
63
63
  color: var(--color-content-primary);
64
64
  }
65
65
  .footer .logo {
@@ -75,53 +75,18 @@
75
75
  text-decoration: none;
76
76
  }
77
77
  .footer .link-icon svg {
78
- fill: #5d7079;
78
+ fill: #454745;
79
79
  fill: var(--color-content-secondary);
80
80
  }
81
81
  .footer .link-icon svg:hover,
82
82
  .footer .link-icon svg:active,
83
83
  .footer .link-icon svg:focus {
84
- fill: #5d7079;
84
+ fill: #454745;
85
85
  fill: var(--color-content-secondary);
86
86
  }
87
- .footer.footer-inverse {
88
- background: #37517e;
89
- }
90
- .footer.footer-inverse .footer-link,
91
- .footer.footer-inverse .link-icon {
92
- color: #ffffff;
93
- }
94
- .footer.footer-inverse .footer-link:hover,
95
- .footer.footer-inverse .link-icon:hover,
96
- .footer.footer-inverse .footer-link:active,
97
- .footer.footer-inverse .link-icon:active,
98
- .footer.footer-inverse .footer-link:focus,
99
- .footer.footer-inverse .link-icon:focus {
100
- color: #ffffff;
101
- }
102
- .footer.footer-inverse .footer-link svg,
103
- .footer.footer-inverse .link-icon svg {
104
- fill: #ffffff;
105
- }
106
- .footer.footer-inverse .footer-link svg:hover,
107
- .footer.footer-inverse .link-icon svg:hover,
108
- .footer.footer-inverse .footer-link svg:active,
109
- .footer.footer-inverse .link-icon svg:active,
110
- .footer.footer-inverse .footer-link svg:focus,
111
- .footer.footer-inverse .link-icon svg:focus {
112
- fill: #ffffff;
113
- }
114
- .footer.footer-inverse .footer-title {
115
- color: #ffffff;
116
- }
117
87
  .footer.footer-inverse hr {
118
88
  opacity: 0.1;
119
89
  }
120
- .footer.footer-inverse .tiny,
121
- .footer.footer-inverse .body-3,
122
- .footer.footer-inverse .np-text-body-default {
123
- color: #ffffff;
124
- }
125
90
  @media (max-width: 575px) {
126
91
  .footer {
127
92
  position: relative;