@transferwise/neptune-css 0.0.0-experimental-74e7404 → 0.0.0-experimental-7eb16ef

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 (45) hide show
  1. package/dist/css/accordion.css +23 -52
  2. package/dist/css/button-groups.css +29 -8
  3. package/dist/css/buttons.css +26 -2
  4. package/dist/css/decision.css +23 -52
  5. package/dist/css/dropdowns.css +39 -62
  6. package/dist/css/droppable.css +28 -8
  7. package/dist/css/footer.css +41 -14
  8. package/dist/css/input-groups.css +172 -165
  9. package/dist/css/list-group.css +0 -45
  10. package/dist/css/navbar.css +39 -62
  11. package/dist/css/neptune-addons.css +15 -0
  12. package/dist/css/neptune-core.css +368 -547
  13. package/dist/css/neptune.css +2877 -1443
  14. package/dist/css/popovers.css +35 -60
  15. package/dist/css/sequences.css +6 -1
  16. package/dist/css/tooltip.css +27 -7
  17. package/dist/less/neptune-tokens.less +0 -48
  18. package/dist/props/neptune-tokens.css +793 -1
  19. package/package.json +1 -1
  20. package/src/less/addons/_background-utilities.less +5 -0
  21. package/src/less/button-groups.less +3 -2
  22. package/src/less/buttons.less +1 -1
  23. package/src/less/core/_typography.less +67 -221
  24. package/src/less/decision.less +2 -2
  25. package/src/less/dropdowns.less +6 -5
  26. package/src/less/droppable.less +4 -4
  27. package/src/less/footer.less +4 -3
  28. package/src/less/forms/bootstrap-forms.less +70 -57
  29. package/src/less/input-groups.less +5 -5
  30. package/src/less/list-group.less +7 -4
  31. package/src/less/mixins/_text-emphasis.less +7 -1
  32. package/src/less/neptune.bundle.less +4 -0
  33. package/src/less/popovers.less +3 -3
  34. package/src/less/sequences.less +7 -2
  35. package/src/less/tooltip.less +1 -1
  36. package/dist/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  37. package/dist/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  38. package/dist/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  39. package/dist/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  40. package/dist/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  41. package/dist/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  42. package/dist/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  43. package/dist/less/legacy-variables.css +0 -0
  44. package/dist/less/neptune-tokens.css +0 -0
  45. package/dist/less/zindex.css +0 -0
@@ -36,78 +36,49 @@
36
36
  .np-theme-personal .chevron-color {
37
37
  color: var(--color-interactive-primary);
38
38
  }
39
- .decision {
40
- cursor: pointer;
41
- margin-block-end: 0 !important;
42
- border: 0;
43
- align-items: center;
44
- transition: background-color ease 350ms;
45
- background-color: transparent;
46
- display: block;
47
- }
48
- .decision:not(.np-option):focus-visible,
49
- .decision:not(.np-option):has(:focus-visible) {
50
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
51
- outline-offset: 0;
52
- outline-offset: var(--ring-outline-offset);
53
- --ring-outline-offset: 0;
54
- }
55
- .decision__title {
56
- margin: 0;
57
- color: #37517e;
58
- color: var(--color-content-primary);
59
- line-height: 1.2;
60
- line-height: var(--line-height-title);
61
- letter-spacing: 0;
39
+ .decision__content {
62
40
  word-wrap: break-word;
63
- font-size: 1.125rem;
64
- font-size: var(--font-size-18);
65
- font-weight: 600;
66
- font-weight: var(--font-weight-semi-bold);
67
- letter-spacing: -0.014em;
68
- line-height: 135%;
69
41
  }
70
42
  @supports (hyphenate-limit-chars: 1) {
71
- .decision__title {
72
- hyphens: auto;
73
- hyphenate-limit-chars: 7 3;
43
+ .decision__content {
44
+ hyphens: auto;hyphenate-limit-chars: 7 3;
74
45
  }
75
46
  @media (min-width: 840px) {
76
- .decision__title {
47
+ .decision__content {
77
48
  hyphenate-limit-chars: 8 3;
78
49
  }
79
50
  }
80
51
  @media (min-width: 1160px) {
81
- .decision__title {
52
+ .decision__content {
82
53
  hyphenate-limit-chars: 10 4 3;
83
54
  }
84
55
  }
85
- }
86
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
87
- .decision__title {
88
- hyphens: auto;
89
- -webkit-hyphenate-limit-before: 3;
90
- -webkit-hyphenate-limit-after: 3;
56
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
57
+ .decision__content {
58
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
91
59
  }
92
60
  @media (min-width: 1160px) {
93
- .decision__title {
61
+ .decision__content {
94
62
  -webkit-hyphenate-limit-before: 4;
95
63
  }
96
64
  }
65
+ }.decision {
66
+ cursor: pointer;
67
+ margin-block-end: 0 !important;
68
+ border: 0;
69
+ align-items: center;
70
+ transition: background-color ease 350ms;
71
+ background-color: transparent;
72
+ display: block;
97
73
  }
98
- .decision__title + p,
99
- .decision__title + ul:not(.list-unstyled),
100
- .decision__title + ol:not(.list-unstyled) {
101
- margin-block-start: 8px;
102
- margin-block-start: var(--size-8);
74
+ .decision:not(.np-option):focus-visible,
75
+ .decision:not(.np-option):has(:focus-visible) {
76
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
77
+ outline-offset: 0;
78
+ outline-offset: var(--ring-outline-offset);
79
+ --ring-outline-offset: 0;
103
80
  }
104
81
  .decision__content {
105
- font-size: 0.875rem;
106
- font-size: var(--font-size-14);
107
- line-height: 155%;
108
- letter-spacing: -0.006em;
109
- font-weight: 400;
110
- font-weight: var(--font-weight-regular);
111
82
  word-wrap: break-word;
112
83
  margin-block-start: 4px;
113
84
  margin-block-start: var(--size-4);
@@ -1,4 +1,30 @@
1
- .btn-group,
1
+ .btn-group .secondary {
2
+ word-wrap: break-word;
3
+ }
4
+ @supports (hyphenate-limit-chars: 1) {
5
+ .btn-group .secondary {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
7
+ }
8
+ @media (min-width: 840px) {
9
+ .btn-group .secondary {
10
+ hyphenate-limit-chars: 8 3;
11
+ }
12
+ }
13
+ @media (min-width: 1160px) {
14
+ .btn-group .secondary {
15
+ hyphenate-limit-chars: 10 4 3;
16
+ }
17
+ }
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .btn-group .secondary {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
+ }
22
+ @media (min-width: 1160px) {
23
+ .btn-group .secondary {
24
+ -webkit-hyphenate-limit-before: 4;
25
+ }
26
+ }
27
+ }.btn-group,
2
28
  .btn-group-vertical {
3
29
  position: relative;
4
30
  display: inline-block;
@@ -334,8 +360,9 @@
334
360
  .btn-group .btn-input + .dropdown-menu > li > a {
335
361
  white-space: normal;
336
362
  }
337
- .btn-group .np-text-body-default,
338
363
  .btn-group .body-2,
364
+ .btn-group .np-text-body-default,
365
+ .btn-group .wds-text-body-default,
339
366
  .btn-group .small {
340
367
  color: #5d7079;
341
368
  color: var(--color-content-secondary);
@@ -346,12 +373,6 @@
346
373
  }
347
374
  }
348
375
  .btn-group .secondary {
349
- font-size: 0.875rem;
350
- font-size: var(--font-size-14);
351
- line-height: 155%;
352
- letter-spacing: -0.006em;
353
- font-weight: 400;
354
- font-weight: var(--font-weight-regular);
355
376
  word-wrap: break-word;
356
377
  color: #5d7079;
357
378
  color: var(--color-content-secondary);
@@ -2,8 +2,32 @@
2
2
  block-size: 32px;
3
3
  }
4
4
  .btn {
5
- line-height: 150%;
6
- letter-spacing: -0.011em;
5
+ word-wrap: break-word;
6
+ }
7
+ @supports (hyphenate-limit-chars: 1) {
8
+ .btn {
9
+ hyphens: auto;hyphenate-limit-chars: 7 3;
10
+ }
11
+ @media (min-width: 840px) {
12
+ .btn {
13
+ hyphenate-limit-chars: 8 3;
14
+ }
15
+ }
16
+ @media (min-width: 1160px) {
17
+ .btn {
18
+ hyphenate-limit-chars: 10 4 3;
19
+ }
20
+ }
21
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
22
+ .btn {
23
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
24
+ }
25
+ @media (min-width: 1160px) {
26
+ .btn {
27
+ -webkit-hyphenate-limit-before: 4;
28
+ }
29
+ }
30
+ }.btn {
7
31
  word-wrap: break-word;
8
32
  display: inline-block;
9
33
  margin-block-end: 0;
@@ -1,75 +1,46 @@
1
- .decision {
2
- cursor: pointer;
3
- margin-block-end: 0 !important;
4
- border: 0;
5
- align-items: center;
6
- transition: background-color ease 350ms;
7
- background-color: transparent;
8
- display: block;
9
- }
10
- .decision:not(.np-option):focus-visible,
11
- .decision:not(.np-option):has(:focus-visible) {
12
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
13
- outline-offset: 0;
14
- outline-offset: var(--ring-outline-offset);
15
- --ring-outline-offset: 0;
16
- }
17
- .decision__title {
18
- margin: 0;
19
- color: #37517e;
20
- color: var(--color-content-primary);
21
- line-height: 1.2;
22
- line-height: var(--line-height-title);
23
- letter-spacing: 0;
1
+ .decision__content {
24
2
  word-wrap: break-word;
25
- font-size: 1.125rem;
26
- font-size: var(--font-size-18);
27
- font-weight: 600;
28
- font-weight: var(--font-weight-semi-bold);
29
- letter-spacing: -0.014em;
30
- line-height: 135%;
31
3
  }
32
4
  @supports (hyphenate-limit-chars: 1) {
33
- .decision__title {
34
- hyphens: auto;
35
- hyphenate-limit-chars: 7 3;
5
+ .decision__content {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
36
7
  }
37
8
  @media (min-width: 840px) {
38
- .decision__title {
9
+ .decision__content {
39
10
  hyphenate-limit-chars: 8 3;
40
11
  }
41
12
  }
42
13
  @media (min-width: 1160px) {
43
- .decision__title {
14
+ .decision__content {
44
15
  hyphenate-limit-chars: 10 4 3;
45
16
  }
46
17
  }
47
- }
48
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
49
- .decision__title {
50
- hyphens: auto;
51
- -webkit-hyphenate-limit-before: 3;
52
- -webkit-hyphenate-limit-after: 3;
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .decision__content {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
53
21
  }
54
22
  @media (min-width: 1160px) {
55
- .decision__title {
23
+ .decision__content {
56
24
  -webkit-hyphenate-limit-before: 4;
57
25
  }
58
26
  }
27
+ }.decision {
28
+ cursor: pointer;
29
+ margin-block-end: 0 !important;
30
+ border: 0;
31
+ align-items: center;
32
+ transition: background-color ease 350ms;
33
+ background-color: transparent;
34
+ display: block;
59
35
  }
60
- .decision__title + p,
61
- .decision__title + ul:not(.list-unstyled),
62
- .decision__title + ol:not(.list-unstyled) {
63
- margin-block-start: 8px;
64
- margin-block-start: var(--size-8);
36
+ .decision:not(.np-option):focus-visible,
37
+ .decision:not(.np-option):has(:focus-visible) {
38
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
39
+ outline-offset: 0;
40
+ outline-offset: var(--ring-outline-offset);
41
+ --ring-outline-offset: 0;
65
42
  }
66
43
  .decision__content {
67
- font-size: 0.875rem;
68
- font-size: var(--font-size-14);
69
- line-height: 155%;
70
- letter-spacing: -0.006em;
71
- font-weight: 400;
72
- font-weight: var(--font-weight-regular);
73
44
  word-wrap: break-word;
74
45
  margin-block-start: 4px;
75
46
  margin-block-start: var(--size-4);
@@ -1,4 +1,36 @@
1
- .dropup,
1
+ .dropdown-menu,
2
+ .dropdown-menu > li > a {
3
+ word-wrap: break-word;
4
+ }
5
+ @supports (hyphenate-limit-chars: 1) {
6
+ .dropdown-menu,
7
+ .dropdown-menu > li > a {
8
+ hyphens: auto;hyphenate-limit-chars: 7 3;
9
+ }
10
+ @media (min-width: 840px) {
11
+ .dropdown-menu,
12
+ .dropdown-menu > li > a {
13
+ hyphenate-limit-chars: 8 3;
14
+ }
15
+ }
16
+ @media (min-width: 1160px) {
17
+ .dropdown-menu,
18
+ .dropdown-menu > li > a {
19
+ hyphenate-limit-chars: 10 4 3;
20
+ }
21
+ }
22
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
23
+ .dropdown-menu,
24
+ .dropdown-menu > li > a {
25
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
26
+ }
27
+ @media (min-width: 1160px) {
28
+ .dropdown-menu,
29
+ .dropdown-menu > li > a {
30
+ -webkit-hyphenate-limit-before: 4;
31
+ }
32
+ }
33
+ }.dropup,
2
34
  .dropdown {
3
35
  position: relative;
4
36
  }
@@ -11,12 +43,6 @@
11
43
  padding: 8px;
12
44
  margin: 0;
13
45
  list-style: none;
14
- font-size: 0.875rem;
15
- font-size: var(--font-size-14);
16
- line-height: 155%;
17
- letter-spacing: -0.006em;
18
- font-weight: 400;
19
- font-weight: var(--font-weight-regular);
20
46
  word-wrap: break-word;
21
47
  text-align: start;
22
48
  background-color: #ffffff;
@@ -95,12 +121,6 @@
95
121
  padding: var(--dropdown-link-padding);
96
122
  clear: both;
97
123
  border-radius: 3px;
98
- font-size: 0.875rem;
99
- font-size: var(--font-size-14);
100
- line-height: 155%;
101
- letter-spacing: -0.006em;
102
- font-weight: 400;
103
- font-weight: var(--font-weight-regular);
104
124
  word-wrap: break-word;
105
125
  color: #37517e;
106
126
  color: var(--color-content-primary);
@@ -199,10 +219,12 @@
199
219
  .dropdown-menu > .selected > a strong {
200
220
  color: inherit;
201
221
  }
202
- .dropdown-menu > .active > a .np-text-body-default,
203
- .dropdown-menu > .selected > a .np-text-body-default,
204
222
  .dropdown-menu > .active > a .small,
205
223
  .dropdown-menu > .selected > a .small,
224
+ .dropdown-menu > .active > a .np-text-body-default,
225
+ .dropdown-menu > .selected > a .np-text-body-default,
226
+ .dropdown-menu > .active > a .wds-text-body-default,
227
+ .dropdown-menu > .selected > a .wds-text-body-default,
206
228
  .dropdown-menu > .active > a .secondary,
207
229
  .dropdown-menu > .selected > a .secondary {
208
230
  color: #c9cbce;
@@ -297,58 +319,13 @@
297
319
  display: block;
298
320
  padding-block: 8px;
299
321
  padding-inline: 16px;
322
+ font-size: 0.875rem;
323
+ font-size: var(--font-size-14);
300
324
  line-height: 1.5;
301
325
  line-height: var(--line-height-body);
302
326
  color: #5d7079;
303
327
  color: var(--color-content-secondary);
304
328
  white-space: nowrap;
305
- margin: 0;
306
- color: #37517e;
307
- color: var(--color-content-primary);
308
- line-height: 1.2;
309
- line-height: var(--line-height-title);
310
- letter-spacing: 0;
311
- word-wrap: break-word;
312
- font-weight: 500;
313
- font-weight: var(--font-weight-medium);
314
- font-size: 0.875rem;
315
- font-size: var(--font-size-14);
316
- letter-spacing: -0.006em;
317
- line-height: 140%;
318
- }
319
- @supports (hyphenate-limit-chars: 1) {
320
- .dropdown-header {
321
- hyphens: auto;
322
- hyphenate-limit-chars: 7 3;
323
- }
324
- @media (min-width: 840px) {
325
- .dropdown-header {
326
- hyphenate-limit-chars: 8 3;
327
- }
328
- }
329
- @media (min-width: 1160px) {
330
- .dropdown-header {
331
- hyphenate-limit-chars: 10 4 3;
332
- }
333
- }
334
- }
335
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
336
- .dropdown-header {
337
- hyphens: auto;
338
- -webkit-hyphenate-limit-before: 3;
339
- -webkit-hyphenate-limit-after: 3;
340
- }
341
- @media (min-width: 1160px) {
342
- .dropdown-header {
343
- -webkit-hyphenate-limit-before: 4;
344
- }
345
- }
346
- }
347
- .dropdown-header + p,
348
- .dropdown-header + ul:not(.list-unstyled),
349
- .dropdown-header + ol:not(.list-unstyled) {
350
- margin-block-start: 8px;
351
- margin-block-start: var(--size-8);
352
329
  }
353
330
  .dropdown-backdrop {
354
331
  position: fixed;
@@ -1,11 +1,31 @@
1
1
  .droppable {
2
+ word-wrap: break-word;
3
+ }
4
+ @supports (hyphenate-limit-chars: 1) {
5
+ .droppable {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
7
+ }
8
+ @media (min-width: 840px) {
9
+ .droppable {
10
+ hyphenate-limit-chars: 8 3;
11
+ }
12
+ }
13
+ @media (min-width: 1160px) {
14
+ .droppable {
15
+ hyphenate-limit-chars: 10 4 3;
16
+ }
17
+ }
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .droppable {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
+ }
22
+ @media (min-width: 1160px) {
23
+ .droppable {
24
+ -webkit-hyphenate-limit-before: 4;
25
+ }
26
+ }
27
+ }.droppable {
2
28
  position: relative;
3
- font-weight: 400;
4
- font-weight: var(--font-weight-regular);
5
- font-size: 1rem;
6
- font-size: var(--font-size-16);
7
- line-height: 150%;
8
- letter-spacing: -0.011em;
9
29
  word-wrap: break-word;
10
30
  text-align: center;
11
31
  border: 1px solid #c9cbce;
@@ -167,7 +187,7 @@
167
187
  z-index: 1;
168
188
  }
169
189
  .np-theme-personal .droppable-dropping-card {
170
- background-color: #E1E4DF;
190
+ background-color: #e1e4df;
171
191
  color: #37517e;
172
192
  color: var(--color-content-primary);
173
193
  }
@@ -175,7 +195,7 @@
175
195
  background-color: #404440;
176
196
  }
177
197
  .np-theme-personal--forest-green .droppable-dropping-card {
178
- background-color: #455C35;
198
+ background-color: #455c35;
179
199
  }
180
200
  .droppable-dropping .droppable-dropping-card {
181
201
  display: flex;
@@ -1,12 +1,44 @@
1
- .footer {
1
+ .footer,
2
+ .footer .footer-link,
3
+ .footer .link-icon {
4
+ word-wrap: break-word;
5
+ }
6
+ @supports (hyphenate-limit-chars: 1) {
7
+ .footer,
8
+ .footer .footer-link,
9
+ .footer .link-icon {
10
+ hyphens: auto;hyphenate-limit-chars: 7 3;
11
+ }
12
+ @media (min-width: 840px) {
13
+ .footer,
14
+ .footer .footer-link,
15
+ .footer .link-icon {
16
+ hyphenate-limit-chars: 8 3;
17
+ }
18
+ }
19
+ @media (min-width: 1160px) {
20
+ .footer,
21
+ .footer .footer-link,
22
+ .footer .link-icon {
23
+ hyphenate-limit-chars: 10 4 3;
24
+ }
25
+ }
26
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
27
+ .footer,
28
+ .footer .footer-link,
29
+ .footer .link-icon {
30
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
31
+ }
32
+ @media (min-width: 1160px) {
33
+ .footer,
34
+ .footer .footer-link,
35
+ .footer .link-icon {
36
+ -webkit-hyphenate-limit-before: 4;
37
+ }
38
+ }
39
+ }.footer {
2
40
  background-color: rgba(134,167,189,0.10196);
3
41
  background-color: var(--color-background-neutral);
4
- font-size: 0.875rem;
5
- font-size: var(--font-size-14);
6
- line-height: 155%;
7
- letter-spacing: -0.006em;
8
- font-weight: 400;
9
- font-weight: var(--font-weight-regular);
10
42
  word-wrap: break-word;
11
43
  padding-block-start: calc(8px * 10);
12
44
  padding-block-start: calc(var(--size-8) * 10);
@@ -61,12 +93,6 @@
61
93
  .footer .link-icon {
62
94
  color: #5d7079;
63
95
  color: var(--color-content-secondary);
64
- font-size: 0.875rem;
65
- font-size: var(--font-size-14);
66
- line-height: 155%;
67
- letter-spacing: -0.006em;
68
- font-weight: 400;
69
- font-weight: var(--font-weight-regular);
70
96
  word-wrap: break-word;
71
97
  }
72
98
  @supports (hyphenate-limit-chars: 1) {
@@ -183,7 +209,8 @@
183
209
  }
184
210
  .footer.footer-inverse .tiny,
185
211
  .footer.footer-inverse .body-3,
186
- .footer.footer-inverse .np-text-body-default {
212
+ .footer.footer-inverse .np-text-body-default,
213
+ .footer.footer-inverse .wds-text-body-default {
187
214
  color: #ffffff;
188
215
  }
189
216
  @media (max-width: 599.98px) {