@transferwise/neptune-css 0.0.0-experimental-42fdae1 → 0.0.0-experimental-512cf13

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 (47) 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 +5908 -552
  13. package/dist/css/neptune.css +8424 -1436
  14. package/dist/css/popovers.css +36 -61
  15. package/dist/css/sequences.css +6 -1
  16. package/dist/css/tooltip.css +28 -8
  17. package/dist/fonts/noto-sans-hebrew-normal.woff2 +0 -0
  18. package/dist/fonts/noto-sans-thai-normal.woff2 +0 -0
  19. package/dist/less/neptune-tokens.less +0 -48
  20. package/dist/props/neptune-tokens.css +804 -3
  21. package/package.json +1 -1
  22. package/src/less/addons/_background-utilities.less +5 -0
  23. package/src/less/button-groups.less +3 -2
  24. package/src/less/buttons.less +1 -1
  25. package/src/less/core/_typography.less +67 -221
  26. package/src/less/decision.less +2 -2
  27. package/src/less/dropdowns.less +6 -5
  28. package/src/less/droppable.less +4 -4
  29. package/src/less/footer.less +4 -3
  30. package/src/less/forms/bootstrap-forms.less +70 -57
  31. package/src/less/input-groups.less +5 -5
  32. package/src/less/list-group.less +7 -4
  33. package/src/less/mixins/_text-emphasis.less +7 -1
  34. package/src/less/neptune.bundle.less +4 -0
  35. package/src/less/popovers.less +3 -3
  36. package/src/less/sequences.less +7 -2
  37. package/src/less/tooltip.less +1 -1
  38. package/dist/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  39. package/dist/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  40. package/dist/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  41. package/dist/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  42. package/dist/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  43. package/dist/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  44. package/dist/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  45. package/dist/less/legacy-variables.css +0 -0
  46. package/dist/less/neptune-tokens.css +0 -0
  47. package/dist/less/zindex.css +0 -0
@@ -1,4 +1,36 @@
1
- .close {
1
+ .popover,
2
+ .popover-content {
3
+ word-wrap: break-word;
4
+ }
5
+ @supports (hyphenate-limit-chars: 1) {
6
+ .popover,
7
+ .popover-content {
8
+ hyphens: auto;hyphenate-limit-chars: 7 3;
9
+ }
10
+ @media (min-width: 840px) {
11
+ .popover,
12
+ .popover-content {
13
+ hyphenate-limit-chars: 8 3;
14
+ }
15
+ }
16
+ @media (min-width: 1160px) {
17
+ .popover,
18
+ .popover-content {
19
+ hyphenate-limit-chars: 10 4 3;
20
+ }
21
+ }
22
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
23
+ .popover,
24
+ .popover-content {
25
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
26
+ }
27
+ @media (min-width: 1160px) {
28
+ .popover,
29
+ .popover-content {
30
+ -webkit-hyphenate-limit-before: 4;
31
+ }
32
+ }
33
+ }.close {
2
34
  float: inline-end;
3
35
  color: #0097c7;
4
36
  color: var(--color-content-accent);
@@ -49,7 +81,7 @@ button.close {
49
81
  inline-size: 276px;
50
82
  padding-block: 18px;
51
83
  padding-inline: 24px;
52
- font-family: 'Inter', Helvetica, Arial, sans-serif;
84
+ font-family: Inter, Helvetica, Arial, sans-serif;
53
85
  font-family: var(--font-family-regular);
54
86
  font-style: normal;
55
87
  font-weight: normal;
@@ -66,12 +98,6 @@ button.close {
66
98
  word-break: normal;
67
99
  word-spacing: normal;
68
100
  word-wrap: normal;
69
- font-size: 0.875rem;
70
- font-size: var(--font-size-14);
71
- line-height: 155%;
72
- letter-spacing: -0.006em;
73
- font-weight: 400;
74
- font-weight: var(--font-weight-regular);
75
101
  word-wrap: break-word;
76
102
  background-color: #ffffff;
77
103
  background-color: var(--color-background-screen);
@@ -258,20 +284,8 @@ button.close {
258
284
  margin-inline: 0;
259
285
  }
260
286
  .popover-title {
261
- padding: 0;
262
287
  margin: 0;
263
- color: #37517e;
264
- color: var(--color-content-primary);
265
- line-height: 1.2;
266
- line-height: var(--line-height-title);
267
- letter-spacing: 0;
268
- word-wrap: break-word;
269
- font-size: 1.125rem;
270
- font-size: var(--font-size-18);
271
- font-weight: 600;
272
- font-weight: var(--font-weight-semi-bold);
273
- letter-spacing: -0.014em;
274
- line-height: 135%;
288
+ padding: 0;
275
289
  background-color: #ffffff;
276
290
  background-color: var(--color-background-screen);
277
291
  border-block-end: 0;
@@ -279,50 +293,11 @@ button.close {
279
293
  border-start-end-radius: 2px;
280
294
  border-end-end-radius: 0;
281
295
  border-end-start-radius: 0;
296
+ color: #37517e !important;
282
297
  color: var(--color-content-primary) !important;
283
298
  }
284
- @supports (hyphenate-limit-chars: 1) {
285
- .popover-title {
286
- hyphens: auto;
287
- hyphenate-limit-chars: 7 3;
288
- }
289
- @media (min-width: 840px) {
290
- .popover-title {
291
- hyphenate-limit-chars: 8 3;
292
- }
293
- }
294
- @media (min-width: 1160px) {
295
- .popover-title {
296
- hyphenate-limit-chars: 10 4 3;
297
- }
298
- }
299
- }
300
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
301
- .popover-title {
302
- hyphens: auto;
303
- -webkit-hyphenate-limit-before: 3;
304
- -webkit-hyphenate-limit-after: 3;
305
- }
306
- @media (min-width: 1160px) {
307
- .popover-title {
308
- -webkit-hyphenate-limit-before: 4;
309
- }
310
- }
311
- }
312
- .popover-title + p,
313
- .popover-title + ul:not(.list-unstyled),
314
- .popover-title + ol:not(.list-unstyled) {
315
- margin-block-start: 8px;
316
- margin-block-start: var(--size-8);
317
- }
318
299
  .popover-content {
319
300
  padding: 0;
320
- font-size: 0.875rem;
321
- font-size: var(--font-size-14);
322
- line-height: 155%;
323
- letter-spacing: -0.006em;
324
- font-weight: 400;
325
- font-weight: var(--font-weight-regular);
326
301
  word-wrap: break-word;
327
302
  color: #5d7079;
328
303
  color: var(--color-content-secondary);
@@ -131,6 +131,10 @@
131
131
  .sequence > li .h2,
132
132
  .sequence > li .h3,
133
133
  .sequence > li .h4,
134
+ .sequence > li .wds-text-title-screen,
135
+ .sequence > li .wds-text-title-section,
136
+ .sequence > li .wds-text-title-subsection,
137
+ .sequence > li .wds-text-title-body,
134
138
  .sequence > li .btn-toolbar {
135
139
  margin-block-end: 16px;
136
140
  }
@@ -221,7 +225,8 @@
221
225
  }
222
226
  .sequence-inverse > .active .small,
223
227
  .sequence-inverse > .active .body-2,
224
- .sequence-inverse > .active .np-text-body-default {
228
+ .sequence-inverse > .active .np-text-body-default,
229
+ .sequence-inverse > .active .wds-text-body-default {
225
230
  color: #5d7079;
226
231
  color: var(--color-content-secondary);
227
232
  }
@@ -1,8 +1,34 @@
1
- .tooltip {
1
+ .tooltip-inner {
2
+ word-wrap: break-word;
3
+ }
4
+ @supports (hyphenate-limit-chars: 1) {
5
+ .tooltip-inner {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
7
+ }
8
+ @media (min-width: 840px) {
9
+ .tooltip-inner {
10
+ hyphenate-limit-chars: 8 3;
11
+ }
12
+ }
13
+ @media (min-width: 1160px) {
14
+ .tooltip-inner {
15
+ hyphenate-limit-chars: 10 4 3;
16
+ }
17
+ }
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .tooltip-inner {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
+ }
22
+ @media (min-width: 1160px) {
23
+ .tooltip-inner {
24
+ -webkit-hyphenate-limit-before: 4;
25
+ }
26
+ }
27
+ }.tooltip {
2
28
  position: absolute;
3
29
  z-index: 1070;
4
30
  display: block;
5
- font-family: 'Inter', Helvetica, Arial, sans-serif;
31
+ font-family: Inter, Helvetica, Arial, sans-serif;
6
32
  font-family: var(--font-family-regular);
7
33
  font-style: normal;
8
34
  font-weight: normal;
@@ -45,12 +71,6 @@
45
71
  padding-inline: 5px;
46
72
  }
47
73
  .tooltip-inner {
48
- font-size: 0.875rem;
49
- font-size: var(--font-size-14);
50
- line-height: 155%;
51
- letter-spacing: -0.006em;
52
- font-weight: 400;
53
- font-weight: var(--font-weight-regular);
54
74
  word-wrap: break-word;
55
75
  max-inline-size: 200px;
56
76
  min-inline-size: 120px;
@@ -171,54 +171,6 @@
171
171
  @space-medium: 32px;
172
172
  @space-large: 40px;
173
173
  @space-x-large: 56px;
174
- @font-size-12: 0.75rem;
175
- @font-size-14: 0.875rem;
176
- @font-size-16: 1rem;
177
- @font-size-18: 1.125rem;
178
- @font-size-20: 1.25rem;
179
- @font-size-22: 1.375rem;
180
- @font-size-24: 1.5rem;
181
- @font-size-26: 1.625rem;
182
- @font-size-28: 1.75rem;
183
- @font-size-30: 1.875rem;
184
- @font-size-32: 2rem;
185
- @letter-spacing-xxs: 0.005em;
186
- @letter-spacing-xs: 0.01em;
187
- @letter-spacing-sm: 0.0125em;
188
- @letter-spacing-md: 0.015em;
189
- @letter-spacing-lg: 0.02em;
190
- @letter-spacing-xl: 0.025em;
191
- @letter-spacing-negative-xxs: -0.005em;
192
- @letter-spacing-negative-xs: -0.01em;
193
- @letter-spacing-negative-sm: -0.0125em;
194
- @letter-spacing-negative-md: -0.015em;
195
- @letter-spacing-negative-lg: -0.02em;
196
- @letter-spacing-negative-xl: -0.025em;
197
- @letter-spacing-negative-xxl: -0.03em;
198
- @letter-spacing-negative-xxxl: -0.04em;
199
- @letter-spacing-negative-xxxxl: -0.05em;
200
- @line-height-18: 1.125rem;
201
- @line-height-20: 1.25rem;
202
- @line-height-22: 1.375rem;
203
- @line-height-24: 1.5rem;
204
- @line-height-28: 1.75rem;
205
- @line-height-30: 1.875rem;
206
- @line-height-32: 2rem;
207
- @line-height-34: 2.125rem;
208
- @line-height-36: 2.25rem;
209
- @line-height-42: 2.625rem;
210
- @line-height-48: 3rem;
211
- @line-height-title: 1.2;
212
- @line-height-body: 1.5;
213
- @line-height-control: 1.2;
214
- @font-weight-light: 300;
215
- @font-weight-regular: 400;
216
- @font-weight-medium: 500;
217
- @font-weight-semi-bold: 600;
218
- @font-weight-bold: 700;
219
- @font-weight-black: 900;
220
- @font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
221
- @font-family-display: 'Wise Sans', 'Inter', sans-serif;
222
174
 
223
175
  // Do not edit directly, this file was auto-generated.
224
176