@transferwise/neptune-css 14.29.1 → 14.29.3

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 (37) hide show
  1. package/dist/css/accordion.css +30 -0
  2. package/dist/css/button-groups.css +29 -0
  3. package/dist/css/buttons.css +29 -0
  4. package/dist/css/decision.css +30 -0
  5. package/dist/css/dropdowns.css +59 -0
  6. package/dist/css/droppable.css +29 -0
  7. package/dist/css/footer.css +63 -0
  8. package/dist/css/input-groups.css +189 -0
  9. package/dist/css/list-group.css +1 -0
  10. package/dist/css/navbar.css +59 -0
  11. package/dist/css/neptune-addons.css +3 -0
  12. package/dist/css/neptune-core.css +186 -32
  13. package/dist/css/neptune.css +721 -36
  14. package/dist/css/popovers.css +59 -0
  15. package/dist/css/tooltip.css +29 -0
  16. package/dist/less/zindex.css +0 -0
  17. package/package.json +1 -1
  18. package/src/less/addons/_spacing-utilities.less +2 -0
  19. package/src/less/core/_fonts.less +9 -29
  20. package/src/less/core/_scaffolding.less +1 -12
  21. package/src/less/core/_typography.less +12 -0
  22. package/dist/fonts/TW-Averta-Bold.woff +0 -0
  23. package/dist/fonts/TW-Averta-Bold.woff2 +0 -0
  24. package/dist/fonts/TW-Averta-Regular.woff +0 -0
  25. package/dist/fonts/TW-Averta-Regular.woff2 +0 -0
  26. package/dist/fonts/TW-Averta-Semibold.woff +0 -0
  27. package/dist/fonts/TW-Averta-Semibold.woff2 +0 -0
  28. package/dist/fonts/TransferWise-IconFont.svg +0 -81
  29. package/dist/fonts/TransferWise-IconFont.woff +0 -0
  30. package/src/fonts/TW-Averta-Bold.woff +0 -0
  31. package/src/fonts/TW-Averta-Bold.woff2 +0 -0
  32. package/src/fonts/TW-Averta-Regular.woff +0 -0
  33. package/src/fonts/TW-Averta-Regular.woff2 +0 -0
  34. package/src/fonts/TW-Averta-Semibold.woff +0 -0
  35. package/src/fonts/TW-Averta-Semibold.woff2 +0 -0
  36. package/src/fonts/TransferWise-IconFont.svg +0 -81
  37. package/src/fonts/TransferWise-IconFont.woff +0 -0
@@ -133,6 +133,7 @@
133
133
  letter-spacing: -0.006em;
134
134
  font-weight: 400;
135
135
  font-weight: var(--font-weight-regular);
136
+ word-wrap: break-word;
136
137
  text-align: start;
137
138
  background-color: #ffffff;
138
139
  background-color: var(--color-background-screen);
@@ -147,6 +148,34 @@
147
148
  transform: translateY(-10px) scale(0.95, 0.95);
148
149
  visibility: hidden;
149
150
  }
151
+ @supports (hyphenate-limit-chars: 1) {
152
+ .dropdown-menu {
153
+ hyphens: auto;
154
+ hyphenate-limit-chars: 7 3;
155
+ }
156
+ @media (min-width: 840px) {
157
+ .dropdown-menu {
158
+ hyphenate-limit-chars: 8 3;
159
+ }
160
+ }
161
+ @media (min-width: 1160px) {
162
+ .dropdown-menu {
163
+ hyphenate-limit-chars: 10 4 3;
164
+ }
165
+ }
166
+ }
167
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
168
+ .dropdown-menu {
169
+ hyphens: auto;
170
+ -webkit-hyphenate-limit-before: 3;
171
+ -webkit-hyphenate-limit-after: 3;
172
+ }
173
+ @media (min-width: 1160px) {
174
+ .dropdown-menu {
175
+ -webkit-hyphenate-limit-before: 4;
176
+ }
177
+ }
178
+ }
150
179
  .np-theme-personal .dropdown-menu,
151
180
  .np-theme-personal--forest-green .dropdown-menu,
152
181
  .np-theme-personal--dark .dropdown-menu {
@@ -188,10 +217,39 @@
188
217
  letter-spacing: -0.006em;
189
218
  font-weight: 400;
190
219
  font-weight: var(--font-weight-regular);
220
+ word-wrap: break-word;
191
221
  color: #37517e;
192
222
  color: var(--color-content-primary);
193
223
  white-space: nowrap;
194
224
  }
225
+ @supports (hyphenate-limit-chars: 1) {
226
+ .dropdown-menu > li > a {
227
+ hyphens: auto;
228
+ hyphenate-limit-chars: 7 3;
229
+ }
230
+ @media (min-width: 840px) {
231
+ .dropdown-menu > li > a {
232
+ hyphenate-limit-chars: 8 3;
233
+ }
234
+ }
235
+ @media (min-width: 1160px) {
236
+ .dropdown-menu > li > a {
237
+ hyphenate-limit-chars: 10 4 3;
238
+ }
239
+ }
240
+ }
241
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
242
+ .dropdown-menu > li > a {
243
+ hyphens: auto;
244
+ -webkit-hyphenate-limit-before: 3;
245
+ -webkit-hyphenate-limit-after: 3;
246
+ }
247
+ @media (min-width: 1160px) {
248
+ .dropdown-menu > li > a {
249
+ -webkit-hyphenate-limit-before: 4;
250
+ }
251
+ }
252
+ }
195
253
  .dropdown-menu > li > a .secondary {
196
254
  display: block;
197
255
  white-space: normal;
@@ -366,6 +424,7 @@
366
424
  line-height: 1.2;
367
425
  line-height: var(--line-height-title);
368
426
  letter-spacing: 0;
427
+ word-wrap: break-word;
369
428
  font-weight: 500;
370
429
  font-weight: var(--font-weight-medium);
371
430
  font-size: 0.875rem;
@@ -1259,6 +1259,9 @@
1259
1259
  padding-block-end: var(--size-96);
1260
1260
  }
1261
1261
  }
1262
+ .np-text-hyphenated {
1263
+ word-wrap: break-word;
1264
+ }
1262
1265
  @supports (hyphenate-limit-chars: 1) {
1263
1266
  .np-text-hyphenated {
1264
1267
  hyphens: auto;
@@ -55,26 +55,6 @@
55
55
  src: url("../fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
56
56
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
57
57
  }
58
- @font-face {
59
- font-weight: 400;
60
- font-weight: var(--font-weight-regular);
61
- font-family: Averta;
62
- src: url("../fonts/TW-Averta-Regular.woff2") format("woff2"), url("../fonts/TW-Averta-Regular.woff") format("woff");
63
- font-display: swap;
64
- }
65
- @font-face {
66
- font-weight: 600;
67
- font-weight: var(--font-weight-semi-bold);
68
- font-family: Averta;
69
- src: url("../fonts/TW-Averta-Semibold.woff2") format("woff2"), url("../fonts/TW-Averta-Semibold.woff") format("woff");
70
- font-display: swap;
71
- }
72
- @font-face {
73
- font-weight: 700;
74
- font-weight: var(--font-weight-bold);
75
- font-family: Averta;
76
- src: url("../fonts/TW-Averta-Bold.woff2") format("woff2"), url("../fonts/TW-Averta-Bold.woff") format("woff");
77
- }
78
58
  @font-face {
79
59
  font-family: "Wise Sans";
80
60
  font-style: normal;
@@ -259,7 +239,6 @@ summary {
259
239
  }
260
240
  :root {
261
241
  --base-font-size: 16px;
262
- --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
263
242
  --input-group-addon-padding: 12px 16px calc(12px - 2px);
264
243
  --btn-padding: 12px 24px calc(12px - 2px);
265
244
  --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -275,18 +254,8 @@ summary {
275
254
  --btn-sm-radius-base: 2px;
276
255
  --btn-lg-radius-base: 3px;
277
256
  }
278
- .np-theme-light,
279
- .np-theme-dark,
280
- .np-theme-navy {
281
- --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
282
- font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
283
- font-family: var(--font-family-regular);
284
- line-height: 1.5;
285
- line-height: var(--line-height-body);
286
- }
287
257
  .np-theme-personal {
288
- --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
289
- font-family: "Inter", Helvetica, Arial, sans-serif;
258
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
290
259
  font-family: var(--font-family-regular);
291
260
  font-feature-settings: "calt";
292
261
  --input-group-addon-padding: 12px 16px;
@@ -660,6 +629,7 @@ h6,
660
629
  line-height: 1.2;
661
630
  line-height: var(--line-height-title);
662
631
  letter-spacing: 0;
632
+ word-wrap: break-word;
663
633
  }
664
634
  @supports (hyphenate-limit-chars: 1) {
665
635
  .h1,
@@ -961,6 +931,65 @@ small,
961
931
  letter-spacing: -0.006em;
962
932
  font-weight: 400;
963
933
  font-weight: var(--font-weight-regular);
934
+ word-wrap: break-word;
935
+ }
936
+ @supports (hyphenate-limit-chars: 1) {
937
+ .body-2,
938
+ .body-3,
939
+ .small,
940
+ .tiny,
941
+ body,
942
+ small,
943
+ .np-text-body-default {
944
+ hyphens: auto;
945
+ hyphenate-limit-chars: 7 3;
946
+ }
947
+ @media (min-width: 840px) {
948
+ .body-2,
949
+ .body-3,
950
+ .small,
951
+ .tiny,
952
+ body,
953
+ small,
954
+ .np-text-body-default {
955
+ hyphenate-limit-chars: 8 3;
956
+ }
957
+ }
958
+ @media (min-width: 1160px) {
959
+ .body-2,
960
+ .body-3,
961
+ .small,
962
+ .tiny,
963
+ body,
964
+ small,
965
+ .np-text-body-default {
966
+ hyphenate-limit-chars: 10 4 3;
967
+ }
968
+ }
969
+ }
970
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
971
+ .body-2,
972
+ .body-3,
973
+ .small,
974
+ .tiny,
975
+ body,
976
+ small,
977
+ .np-text-body-default {
978
+ hyphens: auto;
979
+ -webkit-hyphenate-limit-before: 3;
980
+ -webkit-hyphenate-limit-after: 3;
981
+ }
982
+ @media (min-width: 1160px) {
983
+ .body-2,
984
+ .body-3,
985
+ .small,
986
+ .tiny,
987
+ body,
988
+ small,
989
+ .np-text-body-default {
990
+ -webkit-hyphenate-limit-before: 4;
991
+ }
992
+ }
964
993
  }
965
994
  /* DEPRECATED: use .np-text-body-default-bold instead */
966
995
  /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -974,6 +1003,50 @@ small,
974
1003
  letter-spacing: -0.006em;
975
1004
  font-weight: 600;
976
1005
  font-weight: var(--font-weight-semi-bold);
1006
+ word-wrap: break-word;
1007
+ }
1008
+ @supports (hyphenate-limit-chars: 1) {
1009
+ .control-2,
1010
+ .label,
1011
+ .control-label,
1012
+ .np-text-body-default-bold {
1013
+ hyphens: auto;
1014
+ hyphenate-limit-chars: 7 3;
1015
+ }
1016
+ @media (min-width: 840px) {
1017
+ .control-2,
1018
+ .label,
1019
+ .control-label,
1020
+ .np-text-body-default-bold {
1021
+ hyphenate-limit-chars: 8 3;
1022
+ }
1023
+ }
1024
+ @media (min-width: 1160px) {
1025
+ .control-2,
1026
+ .label,
1027
+ .control-label,
1028
+ .np-text-body-default-bold {
1029
+ hyphenate-limit-chars: 10 4 3;
1030
+ }
1031
+ }
1032
+ }
1033
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
1034
+ .control-2,
1035
+ .label,
1036
+ .control-label,
1037
+ .np-text-body-default-bold {
1038
+ hyphens: auto;
1039
+ -webkit-hyphenate-limit-before: 3;
1040
+ -webkit-hyphenate-limit-after: 3;
1041
+ }
1042
+ @media (min-width: 1160px) {
1043
+ .control-2,
1044
+ .label,
1045
+ .control-label,
1046
+ .np-text-body-default-bold {
1047
+ -webkit-hyphenate-limit-before: 4;
1048
+ }
1049
+ }
977
1050
  }
978
1051
  /* DEPRECATED: use .np-text-body-large instead */
979
1052
  /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -986,6 +1059,45 @@ small,
986
1059
  font-size: var(--font-size-16);
987
1060
  line-height: 150%;
988
1061
  letter-spacing: -0.011em;
1062
+ word-wrap: break-word;
1063
+ }
1064
+ @supports (hyphenate-limit-chars: 1) {
1065
+ .body-1,
1066
+ .value,
1067
+ .np-text-body-large {
1068
+ hyphens: auto;
1069
+ hyphenate-limit-chars: 7 3;
1070
+ }
1071
+ @media (min-width: 840px) {
1072
+ .body-1,
1073
+ .value,
1074
+ .np-text-body-large {
1075
+ hyphenate-limit-chars: 8 3;
1076
+ }
1077
+ }
1078
+ @media (min-width: 1160px) {
1079
+ .body-1,
1080
+ .value,
1081
+ .np-text-body-large {
1082
+ hyphenate-limit-chars: 10 4 3;
1083
+ }
1084
+ }
1085
+ }
1086
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
1087
+ .body-1,
1088
+ .value,
1089
+ .np-text-body-large {
1090
+ hyphens: auto;
1091
+ -webkit-hyphenate-limit-before: 3;
1092
+ -webkit-hyphenate-limit-after: 3;
1093
+ }
1094
+ @media (min-width: 1160px) {
1095
+ .body-1,
1096
+ .value,
1097
+ .np-text-body-large {
1098
+ -webkit-hyphenate-limit-before: 4;
1099
+ }
1100
+ }
989
1101
  }
990
1102
  /* DEPRECATED: use np-text-body-large-bold instead */
991
1103
  /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -997,6 +1109,40 @@ small,
997
1109
  font-size: var(--font-size-16);
998
1110
  line-height: 150%;
999
1111
  letter-spacing: -0.011em;
1112
+ word-wrap: break-word;
1113
+ }
1114
+ @supports (hyphenate-limit-chars: 1) {
1115
+ .control-1,
1116
+ .np-text-body-large-bold {
1117
+ hyphens: auto;
1118
+ hyphenate-limit-chars: 7 3;
1119
+ }
1120
+ @media (min-width: 840px) {
1121
+ .control-1,
1122
+ .np-text-body-large-bold {
1123
+ hyphenate-limit-chars: 8 3;
1124
+ }
1125
+ }
1126
+ @media (min-width: 1160px) {
1127
+ .control-1,
1128
+ .np-text-body-large-bold {
1129
+ hyphenate-limit-chars: 10 4 3;
1130
+ }
1131
+ }
1132
+ }
1133
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
1134
+ .control-1,
1135
+ .np-text-body-large-bold {
1136
+ hyphens: auto;
1137
+ -webkit-hyphenate-limit-before: 3;
1138
+ -webkit-hyphenate-limit-after: 3;
1139
+ }
1140
+ @media (min-width: 1160px) {
1141
+ .control-1,
1142
+ .np-text-body-large-bold {
1143
+ -webkit-hyphenate-limit-before: 4;
1144
+ }
1145
+ }
1000
1146
  }
1001
1147
  a,
1002
1148
  .np-text-link-default,
@@ -1103,6 +1249,7 @@ a,
1103
1249
  .np-text-display-medium,
1104
1250
  .np-text-display-small {
1105
1251
  letter-spacing: normal;
1252
+ word-wrap: break-word;
1106
1253
  }
1107
1254
  @supports (hyphenate-limit-chars: 1) {
1108
1255
  .np-text-display-extra-large,
@@ -1191,6 +1338,13 @@ a,
1191
1338
  font-weight: 400;
1192
1339
  font-weight: var(--font-weight-regular);
1193
1340
  }
1341
+ /* Disable hyphenation for Japanese, Thai, and Chinese — these languages use character-level breaks and should never insert hyphens. */
1342
+ :lang(ja),
1343
+ :lang(th),
1344
+ :lang(zh-CN),
1345
+ :lang(zh-HK) {
1346
+ hyphens: none;
1347
+ }
1194
1348
  :lang(af) .np-text-display-extra-large,
1195
1349
  :lang(sq) .np-text-display-extra-large,
1196
1350
  :lang(eu) .np-text-display-extra-large,