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

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 (53) 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 -18
  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 -131
  21. package/dist/css/navs.css +8 -20
  22. package/dist/css/neptune-addons.css +4 -83
  23. package/dist/css/neptune-core.css +31 -87
  24. package/dist/css/neptune.css +605 -1168
  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 +81 -175
  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/_scaffolding.less +0 -19
  44. package/src/less/core/_typography-utilities.less +0 -29
  45. package/src/less/dropdowns.less +0 -8
  46. package/src/less/footer.less +0 -33
  47. package/src/less/mixins/_sequence.less +2 -2
  48. package/src/less/modals.less +0 -1
  49. package/src/less/navbar.less +0 -31
  50. package/src/less/navs.less +0 -10
  51. package/src/less/sequences.less +0 -26
  52. package/src/less/table.less +0 -8
  53. package/src/variables/neptune-tokens.less +1 -10
package/dist/css/chevron.css CHANGED
@@ -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
  }
package/dist/css/circles.css CHANGED
@@ -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
  }
package/dist/css/close.css CHANGED
@@ -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 {
package/dist/css/column-layout.css CHANGED
@@ -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
  }
package/dist/css/currency-flags.css CHANGED
@@ -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
  }
package/dist/css/decision.css CHANGED
@@ -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
  }
package/dist/css/dropdowns.css CHANGED
@@ -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
  }
@@ -133,10 +133,10 @@
133
133
  .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
134
134
  -webkit-text-decoration: none;
135
135
  text-decoration: none;
136
- color: #37517e;
136
+ color: #0e0f0c;
137
137
  color: var(--color-content-primary);
138
138
  outline: 0;
139
- box-shadow: inset 0 0 0 1px #c9cbce;
139
+ box-shadow: inset 0 0 0 1px #868685;
140
140
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
141
141
  }
142
142
  .dropdown-menu > .active > a,
@@ -145,24 +145,14 @@
145
145
  .dropdown-menu > .selected > a:hover,
146
146
  .dropdown-menu > .active > a:focus,
147
147
  .dropdown-menu > .selected > a:focus {
148
- color: #ffffff;
149
148
  -webkit-text-decoration: none;
150
149
  text-decoration: none;
151
150
  outline: 0;
152
- background-color: #37517e;
153
151
  }
154
152
  .dropdown-menu > .active > a strong,
155
153
  .dropdown-menu > .selected > a strong {
156
154
  color: inherit;
157
155
  }
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
156
  .dropdown-menu > .disabled > a:hover,
167
157
  .dropdown-menu > .disabled > a:focus {
168
158
  -webkit-text-decoration: none;
@@ -363,11 +353,11 @@
363
353
  padding: 8px 16px;
364
354
  line-height: 1.5;
365
355
  line-height: var(--line-height-body);
366
- color: #5d7079;
356
+ color: #454745;
367
357
  color: var(--color-content-secondary);
368
358
  white-space: nowrap;
369
359
  margin: 0;
370
- color: #37517e;
360
+ color: #0e0f0c;
371
361
  color: var(--color-content-primary);
372
362
  line-height: 1.2;
373
363
  line-height: var(--line-height-title);
package/dist/css/droppable.css CHANGED
@@ -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 {
package/dist/css/footer.css CHANGED
@@ -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;