@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

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

@@ -6,7 +6,7 @@
 
 // TITLE
 
-/* `.h*`, `.title-*`, `.np-text-title-*` are DEPRECATED: use `.wds-text-title-*` instead */
+/* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -29,14 +29,11 @@ h6,
 .np-text-title-section,
 .np-text-title-subsection,
 .np-text-title-body,
-.np-text-title-group,
-.wds-text-title-screen,
-.wds-text-title-section,
-.wds-text-title-subsection,
-.wds-text-title-body,
-.wds-text-title-group {
+.np-text-title-group {
   margin: 0;
   color: var(--color-content-primary);
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
   .np-text-hyphenated;
 
   + p,
@@ -46,76 +43,86 @@ h6,
   }
 }
 
-/* DEPRECATED: use `.wds-text-title-screen` instead */
+/* DEPRECATED: use .np-text-title-screen instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .title-1,
 h1,
-.np-text-title-screen,
-.wds-text-title-screen {
-  &:extend(.wds-text-title-screen);
+.np-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 `.wds-text-title-section` instead */
+/* DEPRECATED: use .np-text-title-section instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h2,
 .title-2,
 h2,
-.np-text-title-section,
-.wds-text-title-section {
-  &:extend(.wds-text-title-section);
+.np-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 `.wds-text-title-subsection` instead */
+/* DEPRECATED: use .np-text-title-subsection instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h3,
 .title-3,
 h3,
-.np-text-title-subsection,
-.wds-text-title-subsection {
-  &:extend(.wds-text-title-subsection);
+.np-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 `.wds-text-title-body` instead */
+/* DEPRECATED: use .np-text-title-body instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h4,
 .title-4,
 h4,
-.np-text-title-body,
-.wds-text-title-body {
-  &:extend(.wds-text-title-body);
+.np-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 `.wds-text-title-group` instead */
+/* DEPRECATED: use .np-text-title-group instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h5,
 .h6,
 .title-5,
 h5,
 h6,
-.np-text-title-group,
-.wds-text-title-group {
-  &:extend(.wds-text-title-group);
+.np-text-title-group {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
 }
 
-/* DEPRECATED: use `.wds-text-title-body` instead */
+/* DEPRECATED: use .np-text-title-body instead */
 .lead {
   margin-bottom: var(--size-24);
-  font-size: var(--wds-font-size-title-body);
-  line-height: var(--wds-line-height-title-body);
+  font-size: var(--font-size-20);
+  line-height: var(--line-height-title);
 }
 
-// DEPRECATED: use `.wds-text-body-default` instead
+// DEPRECATED: use .np-text-body-default instead
 .tiny {
   color: var(--color-content-secondary);
 }
 
 // BODY
 
-/* DEPRECATED: use `.wds-text-body-default` instead */
+/* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
@@ -123,41 +130,49 @@ h6,
 .tiny,
 body,
 small,
-.np-text-body-default,
-.wds-text-body-default {
-  &:extend(.wds-text-body-default);
+.np-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;
 }
 
-/* DEPRECATED: use `.wds-text-body-default-bold` instead */
+/* DEPRECATED: use .np-text-body-default-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
 
 // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
 .label, .control-label,
 
-.np-text-body-default-bold,
-.wds-text-body-default-bold {
-  &:extend(.wds-text-body-default-bold);
+.np-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;
 }
 
-/* DEPRECATED: use `.wds-text-body-large` instead  */
+/* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
 .value,
-.np-text-body-large,
-.wds-text-body-large {
-  &:extend(.wds-text-body-large);
+.np-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;
 }
 
-/* DEPRECATED: use `.wds-text-body-large-bold` instead */
+/* DEPRECATED: use np-text-body-large-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
-.np-text-body-large-bold,
-.wds-text-body-large-bold {
-  &:extend(.wds-text-body-large-bold);
+.np-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;
 }
 
@@ -166,43 +181,37 @@ small,
 a,
 .np-text-link-default,
 .np-text-link-large {
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   .link-underline();
 }
 
 .np-text-link-large {
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 
 .np-text-link-default {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
 
 // DISPLAY
 
-/* DEPRECATED: use .wds-text-display-number-small instead */
-.np-text-display-number,
-.wds-text-display-number {
-  &:extend(.wds-text-display-number);
-}
-
-.np-text-display-number-small,
-.wds-text-display-number-small {
-  &:extend(.wds-text-display-number-small);
-}
-
-.np-text-display-number-medium,
-.wds-text-display-number-medium {
-  &:extend(.wds-text-display-number-medium);
+.np-text-display-number {
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 40px;
+  line-height: 110%;
 }
 
-.np-text-display-number-large,
-.wds-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,
@@ -214,12 +223,28 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-synthesis: none;
-
+  &,
   &--forced {
-    font-family: var(--wds-font-family-display);
+    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 */
@@ -227,23 +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,
-.wds-text-display-large {
-  &:extend(.wds-text-display-large);
+.np-text-display-large {
+  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
 }
 
-.np-text-display-medium,
-.wds-text-display-medium {
-  &:extend(.wds-text-display-medium);
+.np-text-display-medium {
+  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
 }
 
-.np-text-display-small,
-.wds-text-display-small {
-  &:extend(.wds-text-display-small);
+.np-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
@@ -256,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);
@@ -339,12 +488,7 @@ p {
   + .np-text-title-section,
   + .np-text-title-subsection,
   + .np-text-title-body,
-  + .np-text-title-group,
-  + .wds-text-title-screen,
-  + .wds-text-title-section,
-  + .wds-text-title-subsection,
-  + .wds-text-title-body,
-  + .wds-text-title-group {
+  + .np-text-title-group {
     margin-top: 0;
     margin-bottom: var(--size-8);
   }
@@ -357,7 +501,7 @@ p {
 
 strong,
 b {
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   color: var(--color-content-primary);
 }
 
@@ -375,7 +519,7 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   .border(left, 2px, solid, var(--color-content-accent));
 
   p {
@@ -393,8 +537,8 @@ blockquote {
   footer {
     display: block;
     color: var(--color-content-secondary);
-    font-size: var(--wds-font-size-body);
-    line-height: var(--wds-line-height-body-large);
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-body);
 
     &::before {
       content: "\2014 \00A0"; // em dash, nbsp
@@ -407,7 +551,7 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
   }
 }
 
@@ -444,8 +588,8 @@ pre {
   padding: var(--size-16);
   overflow: auto;
   color: var(--color-content-secondary);
-  font-size: var(--wds-font-size-body);
-  line-height: var(--wds-line-height-body-large);
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-body);
   word-wrap: break-word;
   word-break: break-all;
   background-color: var(--color-background-neutral);
@@ -474,7 +618,7 @@ kbd {
 
   kbd {
     padding: 0;
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: var(--font-weight-bold);
     font-size: 100%;
   }
 }

package/src/styles/less/currency-flags.css

@@ -3,6 +3,7 @@
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
 }
 .np-theme-personal .currency-flag {
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10196);
   box-shadow: inset 0 0 0 1px var(--color-border-neutral);
   border-radius: 50%;
 }
@@ -23,8 +24,10 @@
 }
 li > .currency-flag:first-child,
 li > a > .currency-flag:first-child {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }
 .btn .currency-flag:first-child {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }

package/src/styles/less/decision.css

@@ -1,56 +1,4 @@
-.decision__title {
-  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .decision__title {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .decision__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .decision__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .decision__title {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .decision__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.decision__content {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .decision__content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .decision__content {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .decision__content {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .decision__content {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .decision__content {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.decision {
+.decision {
   cursor: pointer;
   margin-block-end: 0 !important;
   border: 0;
@@ -62,13 +10,24 @@
 .decision:not(.np-option):focus-visible,
 .decision:not(.np-option):has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
   outline-offset: var(--ring-outline-offset);
   --ring-outline-offset: 0;
 }
 .decision__title {
   margin: 0;
+  color: #37517e;
   color: var(--color-content-primary);
+  line-height: 1.2;
+  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 {
@@ -101,10 +60,18 @@
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {
+  margin-block-start: 8px;
   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);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -142,16 +109,20 @@
   margin-block-end: 0;
 }
 .decision dl {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .decision .media,
 .decision.media {
   inline-size: 100%;
+  padding-block: 16px;
   padding-block: var(--size-16);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
 }
 .np-theme-personal .decision .media,
 .np-theme-personal .decision.media {
+  padding: 16px;
   padding: var(--size-16);
 }
 .decision .media .media-left,
@@ -160,6 +131,7 @@
 }
 .decision .media .media-body,
 .decision.media .media-body {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @media (min-width: 320.02px) {
@@ -172,13 +144,16 @@
   background-color: rgba(134,167,189,0.07059);
 }
 .decision:not(.disabled):hover .circle-inverse {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .decision:not(.disabled):hover .tw-checkbox-button,
 .decision:not(.disabled):hover .tw-radio-button {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,

package/src/styles/less/decision.less

@@ -18,11 +18,11 @@
   }
 
   &__title {
-    .wds-text-title-body();
+    .np-text-title-body();
   }
 
   &__content {
-    .wds-text-body-default;
+    .np-text-body-default;
 
     margin-top: var(--size-4);
   }