@transferwise/neptune-css 0.0.0-experimental-ff2b208 → 0.0.0-experimental-4b383c6

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 (42) hide show
  1. package/dist/css/accordion.css +0 -15
  2. package/dist/css/alerts.css +0 -39
  3. package/dist/css/background.css +0 -1
  4. package/dist/css/badge.css +0 -12
  5. package/dist/css/breadcrumbs.css +0 -2
  6. package/dist/css/button-groups.css +0 -4
  7. package/dist/css/buttons.css +0 -166
  8. package/dist/css/chevron.css +0 -1
  9. package/dist/css/circles.css +0 -19
  10. package/dist/css/close.css +0 -3
  11. package/dist/css/column-layout.css +0 -3
  12. package/dist/css/currency-flags.css +0 -3
  13. package/dist/css/decision.css +0 -10
  14. package/dist/css/dropdowns.css +0 -13
  15. package/dist/css/droppable.css +0 -18
  16. package/dist/css/flex.css +0 -16
  17. package/dist/css/footer.css +0 -14
  18. package/dist/css/grid.css +0 -6
  19. package/dist/css/input-groups.css +14 -179
  20. package/dist/css/link-callout.css +0 -1
  21. package/dist/css/list-group.css +0 -42
  22. package/dist/css/media.css +0 -3
  23. package/dist/css/modals.css +0 -14
  24. package/dist/css/navbar.css +0 -124
  25. package/dist/css/navs.css +0 -27
  26. package/dist/css/neptune-addons.css +0 -298
  27. package/dist/css/neptune-core.css +11 -98
  28. package/dist/css/neptune.css +61 -2034
  29. package/dist/css/panels.css +0 -4
  30. package/dist/css/popovers.css +0 -25
  31. package/dist/css/process.css +0 -9
  32. package/dist/css/progress-bars.css +0 -14
  33. package/dist/css/ring.css +0 -4
  34. package/dist/css/select.css +0 -8
  35. package/dist/css/sequences.css +0 -60
  36. package/dist/css/table.css +0 -47
  37. package/dist/css/tick.css +0 -2
  38. package/dist/css/tooltip.css +0 -11
  39. package/dist/css/wells.css +0 -20
  40. package/package.json +1 -1
  41. package/src/less/core/_scaffolding.less +4 -1
  42. package/src/less/core/fonts/_fonts-ar.less +9 -0
@@ -30,7 +30,6 @@
30
30
  transform: rotate(270deg) !important;
31
31
  }
32
32
  .chevron-color {
33
- color: #0097c7;
34
33
  color: var(--color-content-accent);
35
34
  }
36
35
  .np-theme-personal .chevron-color {
@@ -74,13 +73,11 @@
74
73
  .decision:not(.np-option):focus-visible,
75
74
  .decision:not(.np-option):has(:focus-visible) {
76
75
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
77
- outline-offset: 0;
78
76
  outline-offset: var(--ring-outline-offset);
79
77
  --ring-outline-offset: 0;
80
78
  }
81
79
  .decision__content {
82
80
  word-wrap: break-word;
83
- margin-block-start: 4px;
84
81
  margin-block-start: var(--size-4);
85
82
  }
86
83
  @supports (hyphenate-limit-chars: 1) {
@@ -118,20 +115,16 @@
118
115
  margin-block-end: 0;
119
116
  }
120
117
  .decision dl {
121
- margin-block-start: 8px;
122
118
  margin-block-start: var(--size-8);
123
119
  }
124
120
  .decision .media,
125
121
  .decision.media {
126
122
  inline-size: 100%;
127
- padding-block: 16px;
128
123
  padding-block: var(--size-16);
129
- padding-inline: 12px;
130
124
  padding-inline: var(--size-12);
131
125
  }
132
126
  .np-theme-personal .decision .media,
133
127
  .np-theme-personal .decision.media {
134
- padding: 16px;
135
128
  padding: var(--size-16);
136
129
  }
137
130
  .decision .media .media-left,
@@ -140,7 +133,6 @@
140
133
  }
141
134
  .decision .media .media-body,
142
135
  .decision.media .media-body {
143
- color: #5d7079;
144
136
  color: var(--color-content-secondary);
145
137
  }
146
138
  @media (min-width: 320.02px) {
@@ -153,16 +145,13 @@
153
145
  background-color: rgba(134,167,189,0.07059);
154
146
  }
155
147
  .decision:not(.disabled):hover .circle-inverse {
156
- background-color: #ffffff;
157
148
  background-color: var(--color-background-screen);
158
149
  }
159
150
  .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
160
- background-color: rgba(134,167,189,0.10196);
161
151
  background-color: var(--color-background-neutral);
162
152
  }
163
153
  .decision:not(.disabled):hover .tw-checkbox-button,
164
154
  .decision:not(.disabled):hover .tw-radio-button {
165
- border-color: #00a2dd;
166
155
  border-color: var(--color-interactive-accent);
167
156
  }
168
157
  .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
@@ -197,17 +186,14 @@
197
186
  }
198
187
  /* Alignment */
199
188
  .media-right {
200
- padding-inline-start: 16px;
201
189
  padding-inline-start: var(--size-16);
202
190
  }
203
191
  .media-left {
204
- padding-inline-end: 16px;
205
192
  padding-inline-end: var(--size-16);
206
193
  }
207
194
  @media (max-width: 320px) {
208
195
  .media-right,
209
196
  .media-left {
210
- padding-inline-start: 32px;
211
197
  padding-inline-start: var(--size-32);
212
198
  }
213
199
  }
@@ -232,6 +218,5 @@
232
218
  vertical-align: middle;
233
219
  }
234
220
  .accordion-item.decision:not(.disabled):hover {
235
- background-color: #ffffff;
236
221
  background-color: var(--color-background-elevated);
237
222
  }
@@ -2,21 +2,15 @@
2
2
  * DEPRECATED: use <InfoPrompt /> component instead
3
3
  */
4
4
  .alert {
5
- padding: 16px;
6
5
  padding: var(--size-16);
7
6
  border-radius: 10px;
8
- color: #37517e;
9
7
  color: var(--color-content-primary);
10
- background-color: rgba(134,167,189,0.10196);
11
8
  background-color: var(--color-background-neutral);
12
9
  min-inline-size: 200px;
13
- margin-block-end: 16px;
14
10
  margin-block-end: var(--size-16);
15
11
  }
16
12
  .np-theme-personal .alert {
17
- padding: 24px;
18
13
  padding: var(--padding-medium);
19
- border-radius: 16px;
20
14
  border-radius: var(--radius-medium);
21
15
  }
22
16
  .np-theme-personal .alert .alert__message {
@@ -27,25 +21,19 @@
27
21
  justify-content: center;
28
22
  }
29
23
  .np-theme-personal .alert .alert__message .alert__action {
30
- margin-block-start: 8px;
31
24
  margin-block-start: var(--size-8);
32
25
  }
33
26
  .alert .alert__icon {
34
- inline-size: 32px;
35
27
  inline-size: var(--size-32);
36
- block-size: 32px;
37
28
  block-size: var(--size-32);
38
29
  border-radius: 50%;
39
30
  flex: none;
40
31
  }
41
32
  .alert .close {
42
- margin-block-start: 4px;
43
33
  margin-block-start: var(--size-4);
44
34
  }
45
35
  .np-theme-personal .alert .close {
46
- margin-block-start: calc(8px * -1);
47
36
  margin-block-start: calc(var(--size-8) * -1);
48
- margin-inline-end: calc(8px * -1);
49
37
  margin-inline-end: calc(var(--size-8) * -1);
50
38
  }
51
39
  .alert p,
@@ -53,7 +41,6 @@
53
41
  margin-block-end: 0;
54
42
  }
55
43
  .alert p + p {
56
- margin-block-start: 8px;
57
44
  margin-block-start: var(--padding-x-small);
58
45
  }
59
46
  .arrow {
@@ -94,7 +81,6 @@
94
81
  inset-block-end: -5px;
95
82
  }
96
83
  .alert-detach.arrow {
97
- border-radius: 10px;
98
84
  border-radius: var(--radius-small);
99
85
  }
100
86
  .form-group .alert {
@@ -102,7 +88,6 @@
102
88
  padding-inline: 16px;
103
89
  margin-block-start: -2px;
104
90
  border-style: solid;
105
- border-color: rgba(0,0,0,0.10196);
106
91
  border-color: var(--color-border-neutral);
107
92
  border-block-width: 0 1px;
108
93
  border-inline-width: 1px;
@@ -150,9 +135,7 @@
150
135
  .form-group .checkbox ~ .alert,
151
136
  .form-group .alert-detach {
152
137
  border-width: 0;
153
- margin-block-start: 12px;
154
138
  margin-block-start: var(--size-12);
155
- border-radius: 10px;
156
139
  border-radius: var(--radius-small);
157
140
  }
158
141
  .form-group .alert-focus,
@@ -164,9 +147,7 @@
164
147
  }
165
148
  .alert-success,
166
149
  .alert-positive {
167
- background-color: rgba(54,199,151,0.10196);
168
150
  background-color: var(--color-background-positive);
169
- color: #008026;
170
151
  color: var(--color-content-positive);
171
152
  }
172
153
  .alert-success a,
@@ -181,7 +162,6 @@
181
162
  .alert-positive .alert-link,
182
163
  .alert-success .icon,
183
164
  .alert-positive .icon {
184
- color: #008026;
185
165
  color: var(--color-content-positive);
186
166
  }
187
167
  .alert-success a:hover,
@@ -196,7 +176,6 @@
196
176
  .alert-positive .close:hover,
197
177
  .alert-success .close:focus,
198
178
  .alert-positive .close:focus {
199
- color: #006d13;
200
179
  color: var(--color-content-positive-hover);
201
180
  }
202
181
  .bg-primary .alert-success,
@@ -234,9 +213,7 @@
234
213
  }
235
214
  .alert-info,
236
215
  .alert-neutral {
237
- background-color: rgba(134,167,189,0.10196);
238
216
  background-color: var(--color-background-neutral);
239
- color: #37517e;
240
217
  color: var(--color-content-primary);
241
218
  }
242
219
  .alert-info a,
@@ -251,7 +228,6 @@
251
228
  .alert-neutral .alert-link,
252
229
  .alert-info .icon,
253
230
  .alert-neutral .icon {
254
- color: #37517e;
255
231
  color: var(--color-content-primary);
256
232
  }
257
233
  .alert-info a:hover,
@@ -266,7 +242,6 @@
266
242
  .alert-neutral .close:hover,
267
243
  .alert-info .close:focus,
268
244
  .alert-neutral .close:focus {
269
- color: #37517e;
270
245
  color: var(--color-content-primary);
271
246
  }
272
247
  .bg-primary .alert-info,
@@ -303,9 +278,7 @@
303
278
  color: #ffffff;
304
279
  }
305
280
  .alert-warning {
306
- background-color: rgba(255,172,0,0.10196);
307
281
  background-color: var(--color-background-warning);
308
- color: #9a6500;
309
282
  color: var(--color-content-warning);
310
283
  }
311
284
  .alert-warning a,
@@ -314,7 +287,6 @@
314
287
  .alert-warning .close,
315
288
  .alert-warning .alert-link,
316
289
  .alert-warning .icon {
317
- color: #9a6500;
318
290
  color: var(--color-content-warning);
319
291
  }
320
292
  .alert-warning a:hover,
@@ -323,7 +295,6 @@
323
295
  .alert-warning .alert-link:focus,
324
296
  .alert-warning .close:hover,
325
297
  .alert-warning .close:focus {
326
- color: #855400;
327
298
  color: var(--color-content-warning-hover);
328
299
  }
329
300
  .bg-primary .alert-warning {
@@ -348,9 +319,7 @@
348
319
  }
349
320
  .alert-danger,
350
321
  .alert-negative {
351
- background-color: rgba(255,135,135,0.10196);
352
322
  background-color: var(--color-background-negative);
353
- color: #cf2929;
354
323
  color: var(--color-content-negative);
355
324
  }
356
325
  .alert-danger a,
@@ -365,7 +334,6 @@
365
334
  .alert-negative .alert-link,
366
335
  .alert-danger .icon,
367
336
  .alert-negative .icon {
368
- color: #cf2929;
369
337
  color: var(--color-content-negative);
370
338
  }
371
339
  .alert-danger a:hover,
@@ -380,7 +348,6 @@
380
348
  .alert-negative .close:hover,
381
349
  .alert-danger .close:focus,
382
350
  .alert-negative .close:focus {
383
- color: #b80419;
384
351
  color: var(--color-content-negative-hover);
385
352
  }
386
353
  .bg-primary .alert-danger,
@@ -420,7 +387,6 @@
420
387
  input:focus ~ .alert-focus,
421
388
  .btn:focus ~ .alert-focus {
422
389
  display: block;
423
- border-color: #00a2dd;
424
390
  border-color: var(--color-interactive-accent);
425
391
  }
426
392
  .focus .alert-focus,
@@ -455,13 +421,11 @@ input:focus ~ .alert-focus,
455
421
  display: none !important;
456
422
  }
457
423
  .np-theme-personal .alert {
458
- padding: 16px;
459
424
  padding: var(--size-16);
460
425
  flex-direction: row;
461
426
  }
462
427
  .np-theme-personal .alert .alert__message {
463
428
  padding-block-start: 0;
464
- padding-inline-start: 16px;
465
429
  padding-inline-start: var(--padding-small);
466
430
  }
467
431
  .np-theme-personal .alert-success,
@@ -478,9 +442,7 @@ input:focus ~ .alert-focus,
478
442
  .bg-primary .np-theme-personal .alert-warning,
479
443
  .bg-primary .np-theme-personal .alert-danger,
480
444
  .bg-primary .np-theme-personal .alert-negative {
481
- background-color: rgba(134,167,189,0.10196);
482
445
  background-color: var(--color-background-neutral);
483
- color: #5d7079;
484
446
  color: var(--color-content-secondary);
485
447
  }
486
448
  .np-theme-personal .alert-success a,
@@ -567,7 +529,6 @@ input:focus ~ .alert-focus,
567
529
  .bg-primary .np-theme-personal .alert-warning .icon,
568
530
  .bg-primary .np-theme-personal .alert-danger .icon,
569
531
  .bg-primary .np-theme-personal .alert-negative .icon {
570
- color: #5d7079;
571
532
  color: var(--color-content-secondary);
572
533
  }
573
534
  .np-theme-personal .alert-success a:hover,
@@ -14,7 +14,6 @@
14
14
  color: #daffc0;
15
15
  }
16
16
  .bg--light {
17
- background-color: rgba(134,167,189,0.10196);
18
17
  background-color: var(--color-background-neutral);
19
18
  background-image: url("../img/bg-light.svg");
20
19
  }
@@ -1,33 +1,24 @@
1
1
  .badge {
2
2
  display: inline-block;
3
- min-inline-size: 16px;
4
3
  min-inline-size: var(--size-16);
5
4
  padding-block: 5px;
6
- padding-inline: 8px;
7
5
  padding-inline: var(--size-8);
8
6
  font-size: 10px;
9
- font-weight: 600;
10
7
  font-weight: var(--wds-font-weight-title-body);
11
8
  color: #fff;
12
- line-height: 1.22;
13
9
  line-height: var(--wds-line-height-title-section);
14
10
  vertical-align: middle;
15
11
  white-space: nowrap;
16
12
  text-align: center;
17
- background-color: #e74848;
18
13
  background-color: var(--color-interactive-negative);
19
- border-radius: 16px;
20
14
  border-radius: var(--radius-medium);
21
15
  inset-block-start: -1px;
22
16
  position: relative;
23
17
  }
24
18
  .np-theme-personal .badge {
25
19
  display: inline-block;
26
- min-inline-size: 16px;
27
20
  min-inline-size: var(--size-16);
28
- padding-block: 4px;
29
21
  padding-block: var(--size-4);
30
- padding-inline: 8px;
31
22
  padding-inline: var(--size-8);
32
23
  color: #fff;
33
24
  vertical-align: middle;
@@ -35,9 +26,7 @@
35
26
  text-align: center;
36
27
  line-height: normal;
37
28
  line-height: initial;
38
- background-color: #e74848;
39
29
  background-color: var(--color-interactive-negative);
40
- border-radius: 16px;
41
30
  border-radius: var(--radius-medium);
42
31
  position: relative;
43
32
  inset-block-start: 0;
@@ -72,7 +61,6 @@ a.badge:focus {
72
61
  margin-inline-start: 19px;
73
62
  }
74
63
  .badge-success {
75
- background: #2ead4b;
76
64
  background: var(--color-interactive-positive);
77
65
  }
78
66
  .np-theme-personal .badge-success {
@@ -1,7 +1,6 @@
1
1
  .breadcrumb {
2
2
  padding-block: 8px;
3
3
  padding-inline: 0;
4
- margin-block-end: 24px;
5
4
  margin-block-end: var(--size-24);
6
5
  list-style: none;
7
6
  background-color: none;
@@ -17,6 +16,5 @@
17
16
  color: #fff;
18
17
  }
19
18
  .breadcrumb > .active {
20
- color: #5d7079;
21
19
  color: var(--color-content-secondary);
22
20
  }
@@ -284,11 +284,9 @@
284
284
  pointer-events: none;
285
285
  }
286
286
  .btn-group .btn + .btn-success {
287
- border-inline-start: 1px solid #008026;
288
287
  border-inline-start: 1px solid var(--color-content-positive);
289
288
  }
290
289
  .btn-group .btn + .btn-primary {
291
- border-inline-start: 1px solid #0097c7;
292
290
  border-inline-start: 1px solid var(--color-content-accent);
293
291
  }
294
292
  .btn-group.btn-block {
@@ -364,7 +362,6 @@
364
362
  .btn-group .np-text-body-default,
365
363
  .btn-group .wds-text-body-default,
366
364
  .btn-group .small {
367
- color: #5d7079;
368
365
  color: var(--color-content-secondary);
369
366
  }
370
367
  @media (min-height: 592px) {
@@ -374,7 +371,6 @@
374
371
  }
375
372
  .btn-group .secondary {
376
373
  word-wrap: break-word;
377
- color: #5d7079;
378
374
  color: var(--color-content-secondary);
379
375
  }
380
376
  @supports (hyphenate-limit-chars: 1) {