@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

package/src/styles/less/accordion.css

@@ -60,6 +60,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .decision__title {
@@ -96,6 +102,12 @@
   margin-block-start: var(--size-8);
 }
 .decision__content {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   margin-block-start: 4px;
   margin-block-start: var(--size-4);

package/src/styles/less/button-groups.css

@@ -346,6 +346,12 @@
   }
 }
 .btn-group .secondary {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/styles/less/buttons.css

@@ -2,6 +2,8 @@
   block-size: 32px;
 }
 .btn {
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;

package/src/styles/less/core/_typography.less

@@ -49,8 +49,11 @@ h6,
 .title-1,
 h1,
 .np-text-title-screen {
-  &:extend(.wds-text-title-screen);
   margin-bottom: initial;
+  font-size: var(--font-size-30);
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.021em;
+  line-height: 115%;
 }
 
 /* DEPRECATED: use .np-text-title-section instead */
@@ -59,8 +62,11 @@ h1,
 .title-2,
 h2,
 .np-text-title-section {
-  &:extend(.wds-text-title-section);
   margin-bottom: initial;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: var(--font-size-26);
+  letter-spacing: -0.02em;
+  line-height: 122%;
 }
 
 /* DEPRECATED: use .np-text-title-subsection instead */
@@ -69,8 +75,11 @@ h2,
 .title-3,
 h3,
 .np-text-title-subsection {
-  &:extend(.wds-text-title-subsection);
   margin-bottom: initial;
+  font-size: var(--font-size-22);
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
 }
 
 /* DEPRECATED: use .np-text-title-body instead */
@@ -79,7 +88,10 @@ h3,
 .title-4,
 h4,
 .np-text-title-body {
-  &:extend(.wds-text-title-body);
+  font-size: var(--font-size-18);
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
 }
 
 /* DEPRECATED: use .np-text-title-group instead */
@@ -90,7 +102,10 @@ h4,
 h5,
 h6,
 .np-text-title-group {
-  &:extend(.wds-text-title-group);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
 }
 
 /* DEPRECATED: use .np-text-title-body instead */
@@ -116,7 +131,10 @@ h6,
 body,
 small,
 .np-text-body-default {
-  &:extend(.wds-text-body-default);
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   .np-text-hyphenated;
 }
 
@@ -128,7 +146,10 @@ small,
 .label, .control-label,
 
 .np-text-body-default-bold {
-  &:extend(.wds-text-body-default-bold);
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-semi-bold);
   .np-text-hyphenated;
 }
 
@@ -137,7 +158,10 @@ small,
 .body-1,
 .value,
 .np-text-body-large {
-  &:extend(.wds-text-body-large);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   .np-text-hyphenated;
 }
 
@@ -145,7 +169,10 @@ small,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
 .np-text-body-large-bold {
-  &:extend(.wds-text-body-large-bold);
+  font-weight: var(--font-weight-semi-bold);
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   .np-text-hyphenated;
 }
 
@@ -172,21 +199,19 @@ a,
 
 // DISPLAY
 
-/* DEPRECATED: use .wds-text-display-number-small instead */
 .np-text-display-number {
-  &:extend(.wds-text-display-number);
-}
-
-.np-text-display-number-small {
-  &:extend(.wds-text-display-number-small);
-}
-
-.np-text-display-number-medium {
-  &:extend(.wds-text-display-number-medium);
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 40px;
+  line-height: 110%;
 }
 
-.np-text-display-number-large {
-  &:extend(.wds-text-display-number-large);
+.display-formatting(
+@font-size;
+@line-height;
+@font-weight: var(--font-weight-regular)) {
+  font-size: @font-size;
+  line-height: @line-height;
+  font-weight: @font-weight;
 }
 
 .display-1,
@@ -198,12 +223,28 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-synthesis: none;
-
+  &,
   &--forced {
     font-family: var(--font-family-display);
     font-synthesis: none;
   }
+
+  :lang(ja) &,
+  :lang(th) &,
+  :lang(zh-CN) &,
+  :lang(zh-HK) & {
+    /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
+     */
+    font-family: var(--font-family-regular);
+    line-height: var(--line-height-title);
+  }
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -211,20 +252,36 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
+  letter-spacing: normal;
   .np-text-hyphenated;
 }
 
 .np-text-display-extra-large,
 .np-text-display-large {
-  &:extend(.wds-text-display-large);
+  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
 }
 
 .np-text-display-medium {
-  &:extend(.wds-text-display-medium);
+  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
 }
 
 .np-text-display-small {
-  &:extend(.wds-text-display-small);
+  .display-formatting(var(--size-40), normal, var(--font-weight-bold));
+}
+
+:lang(en) {
+  > .np-text-display-extra-large,
+  > .np-text-display-large {
+    .display-formatting(var(--size-64), 0.85);
+  }
+
+  > .np-text-display-medium {
+    .display-formatting(var(--size-52), 0.85);
+  }
+
+  > .np-text-display-small {
+    .display-formatting(var(--size-40), 0.85);
+  }
 }
 
 /* Disable hyphenation for English
@@ -237,6 +294,117 @@ a,
   hyphens: none;
 }
 
+:lang(af),
+:lang(sq),
+:lang(eu),
+:lang(bs),
+:lang(ca),
+:lang(kw),
+:lang(hr),
+:lang(cs),
+:lang(da),
+:lang(nl),
+:lang(eo),
+:lang(et),
+:lang(fo),
+:lang(fi),
+:lang(fr),
+:lang(gl),
+:lang(lg),
+:lang(de),
+:lang(hu),
+:lang(is),
+:lang(se),
+:lang(id),
+:lang(in),
+:lang(ga),
+:lang(it),
+:lang(kl),
+:lang(ki),
+:lang(rw),
+:lang(lv),
+:lang(lt),
+:lang(lb),
+:lang(mg),
+:lang(ms),
+:lang(mt),
+:lang(gv),
+:lang(mi),
+:lang(nd),
+:lang(nb),
+:lang(nn),
+:lang(om),
+:lang(pl),
+:lang(pt),
+:lang(ro),
+:lang(rm),
+:lang(rn),
+:lang(sg),
+:lang(gd),
+:lang(sr),
+:lang(sn),
+:lang(sk),
+:lang(sl),
+:lang(so),
+:lang(es),
+:lang(sw),
+:lang(sv),
+:lang(tr),
+:lang(cy),
+:lang(fy),
+:lang(wo),
+:lang(zu),
+:lang(hsb),
+:lang(gsw),
+:lang(dsb),
+:lang(fil) {
+  .np-text-display-extra-large,
+  .np-text-display-large {
+    .display-formatting(var(--size-64), 1.05);
+  }
+
+  .np-text-display-medium {
+    .display-formatting(var(--size-52), 1.05);
+  }
+
+  .np-text-display-small {
+    .display-formatting(var(--size-40), 1.05);
+  }
+}
+
+:lang(el),
+:lang(az),
+:lang(be),
+:lang(bs),
+:lang(bg),
+:lang(ce),
+:lang(mk),
+:lang(os),
+:lang(ru),
+:lang(sr),
+:lang(uk),
+:lang(uz),
+:lang(sah) {
+  .np-text-display-extra-large,
+  .np-text-display-large {
+    .display-formatting(var(--size-60),
+    120%,
+    var(--font-weight-semi-bold));
+  }
+
+  .np-text-display-medium {
+    .display-formatting(var(--size-48),
+    120%,
+    var(--font-weight-semi-bold));
+  }
+
+  .np-text-display-small {
+    .display-formatting(var(--size-40),
+    120%,
+    var(--font-weight-semi-bold));
+  }
+}
+
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
   margin-bottom: var(--size-24);

package/src/styles/less/decision.css

@@ -22,6 +22,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .decision__title {
@@ -58,6 +64,12 @@
   margin-block-start: var(--size-8);
 }
 .decision__content {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   margin-block-start: 4px;
   margin-block-start: var(--size-4);

package/src/styles/less/dropdowns.css

@@ -11,6 +11,12 @@
   padding: 8px;
   margin: 0;
   list-style: none;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   text-align: start;
   background-color: #ffffff;
@@ -89,6 +95,12 @@
   padding: var(--dropdown-link-padding);
   clear: both;
   border-radius: 3px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: #37517e;
   color: var(--color-content-primary);
@@ -285,8 +297,6 @@
   display: block;
   padding-block: 8px;
   padding-inline: 16px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
   line-height: 1.5;
   line-height: var(--line-height-body);
   color: #5d7079;
@@ -299,6 +309,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .dropdown-header {

package/src/styles/less/droppable.css

@@ -1,5 +1,11 @@
 .droppable {
   position: relative;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   text-align: center;
   border: 1px solid #c9cbce;

package/src/styles/less/footer.css

@@ -1,6 +1,12 @@
 .footer {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   padding-block-start: calc(8px * 10);
   padding-block-start: calc(var(--size-8) * 10);
@@ -55,6 +61,12 @@
 .footer .link-icon {
   color: #5d7079;
   color: var(--color-content-secondary);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {

package/src/styles/less/forms/bootstrap-forms.css

@@ -85,11 +85,15 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   min-block-size: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   background-clip: padding-box;
 }
@@ -303,6 +307,12 @@ fieldset[disabled] .checkbox label {
   border-radius: 3px;
   font-size: 14px;
   line-height: 24px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 select.input-sm {
@@ -374,6 +384,12 @@ select[multiple].input-sm {
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
 }
 select.input-lg {
@@ -2000,6 +2016,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: block;
   inline-size: 100%;

package/src/styles/less/input-groups.css

@@ -88,11 +88,15 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   min-block-size: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   background-clip: padding-box;
 }
@@ -306,6 +310,12 @@ fieldset[disabled] .checkbox label {
   border-radius: 3px;
   font-size: 14px;
   line-height: 24px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 select.input-sm {
@@ -377,6 +387,12 @@ select[multiple].input-sm {
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
 }
 select.input-lg {
@@ -2003,6 +2019,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: block;
   inline-size: 100%;
@@ -2248,6 +2270,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -2256,6 +2284,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   margin-block-end: 0;
 }
 select.input-group-lg > .form-control,
@@ -2366,6 +2400,12 @@ select[multiple].input-group-lg > .input-group-btn .btn {
   border-radius: 3px;
   font-size: 14px;
   line-height: 24px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 select.input-group-sm > .form-control,

package/src/styles/less/list-group.css

@@ -43,6 +43,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
   color: #37517e;
   color: var(--color-content-primary);
 }

package/src/styles/less/navbar.css

@@ -127,6 +127,12 @@
   padding: 8px;
   margin: 0;
   list-style: none;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   text-align: start;
   background-color: #ffffff;
@@ -205,6 +211,12 @@
   padding: var(--dropdown-link-padding);
   clear: both;
   border-radius: 3px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: #37517e;
   color: var(--color-content-primary);
@@ -401,8 +413,6 @@
   display: block;
   padding-block: 8px;
   padding-inline: 16px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
   line-height: 1.5;
   line-height: var(--line-height-body);
   color: #5d7079;
@@ -415,6 +425,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .dropdown-header {