@transferwise/components 0.0.0-experimental-7f15621 → 0.0.0-experimental-c70eb7d

package/src/styles/less/accordion.css

@@ -36,78 +36,49 @@
 .np-theme-personal .chevron-color {
   color: var(--color-interactive-primary);
 }
-.decision {
-  cursor: pointer;
-  margin-block-end: 0 !important;
-  border: 0;
-  align-items: center;
-  transition: background-color ease 350ms;
-  background-color: transparent;
-  display: block;
-}
-.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;
+.decision__content {
   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 {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
+  .decision__content {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .decision__title {
+    .decision__content {
       hyphenate-limit-chars: 8 3;
     }
   }
   @media (min-width: 1160px) {
-    .decision__title {
+    .decision__content {
       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;
+}@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__title {
+    .decision__content {
       -webkit-hyphenate-limit-before: 4;
     }
   }
+}.decision {
+  cursor: pointer;
+  margin-block-end: 0 !important;
+  border: 0;
+  align-items: center;
+  transition: background-color ease 350ms;
+  background-color: transparent;
+  display: block;
 }
-.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: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__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/addons/_background-utilities.less

@@ -76,6 +76,11 @@
   .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,
   strong {
     color: @color-navy-content-primary;
   }

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

@@ -1,4 +1,30 @@
-.btn-group,
+.btn-group .secondary {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .btn-group .secondary {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .btn-group .secondary {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .btn-group .secondary {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .btn-group .secondary {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .btn-group .secondary {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.btn-group,
 .btn-group-vertical {
   position: relative;
   display: inline-block;
@@ -334,8 +360,9 @@
 .btn-group .btn-input + .dropdown-menu > li > a {
   white-space: normal;
 }
-.btn-group .np-text-body-default,
 .btn-group .body-2,
+.btn-group .np-text-body-default,
+.btn-group .wds-text-body-default,
 .btn-group .small {
   color: #5d7079;
   color: var(--color-content-secondary);
@@ -346,12 +373,6 @@
   }
 }
 .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/button-groups.less

@@ -404,8 +404,9 @@
     }
   }
 
-  .np-text-body-default,
   .body-2,
+  .np-text-body-default,
+  .wds-text-body-default,
   .small {
     color: var(--color-content-secondary);
   }
@@ -418,7 +419,7 @@
 }
 
 .btn-group .secondary {
-  .np-text-body-default;
+  .wds-text-body-default;
 
   color: var(--color-content-secondary);
 }

package/src/styles/less/buttons.css

@@ -2,8 +2,32 @@
   block-size: 32px;
 }
 .btn {
-  line-height: 150%;
-  letter-spacing: -0.011em;
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .btn {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .btn {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .btn {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .btn {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .btn {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.btn {
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;

package/src/styles/less/buttons.less

@@ -8,7 +8,7 @@
 @import (reference) "./ring.less";
 
 .btn {
-  .np-text-body-large-bold;
+  .wds-text-body-large-bold;
 
   display: inline-block;
   margin-bottom: 0;

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

@@ -6,7 +6,7 @@
 
 // TITLE
 
-/* DEPRECATED: use .np-text-*-title instead */
+/* DEPRECATED: use `.wds-text-*` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -32,8 +32,6 @@ h6,
 .np-text-title-group {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   .np-text-hyphenated;
 
   + p,
@@ -43,86 +41,76 @@ h6,
   }
 }
 
-/* DEPRECATED: use .np-text-title-screen instead */
+/* DEPRECATED: use `.wds-text-title-screen` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .title-1,
 h1,
-.np-text-title-screen {
+.np-text-title-screen,
+.wds-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 */
+/* DEPRECATED: use `.wds-text-title-section` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h2,
 .title-2,
 h2,
-.np-text-title-section {
+.np-text-title-section,
+.wds-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 */
+/* DEPRECATED: use `.wds-text-title-subsection` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h3,
 .title-3,
 h3,
-.np-text-title-subsection {
+.np-text-title-subsection,
+.wds-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 */
+/* DEPRECATED: use `.wds-text-title-body` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h4,
 .title-4,
 h4,
-.np-text-title-body {
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
+.np-text-title-body,
+.wds-text-title-body {
+  &:extend(.wds-text-title-body);
 }
 
-/* DEPRECATED: use .np-text-title-group instead */
+/* DEPRECATED: use `.wds-text-title-group` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h5,
 .h6,
 .title-5,
 h5,
 h6,
-.np-text-title-group {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 140%;
+.np-text-title-group,
+.wds-text-title-group {
+  &:extend(.wds-text-title-group);
 }
 
-/* DEPRECATED: use .np-text-title-body instead */
+/* DEPRECATED: use `.wds-text-title-body` instead */
 .lead {
   margin-bottom: var(--size-24);
   font-size: var(--font-size-20);
   line-height: var(--line-height-title);
 }
 
-// DEPRECATED: use .np-text-body-default instead
+// DEPRECATED: use `.wds-text-body-default` instead
 .tiny {
   color: var(--color-content-secondary);
 }
 
 // BODY
 
-/* DEPRECATED: use .np-text-body-default instead */
+/* DEPRECATED: use `.wds-text-body-default` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
@@ -130,49 +118,41 @@ h6,
 .tiny,
 body,
 small,
-.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-body-default,
+.wds-text-body-default {
+  &:extend(.wds-text-body-default);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-default-bold instead */
+/* DEPRECATED: use `.wds-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 {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-semi-bold);
+.np-text-body-default-bold,
+.wds-text-body-default-bold {
+  &:extend(.wds-text-body-default-bold);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-large instead  */
+/* DEPRECATED: use `.wds-text-body-large` instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
 .value,
-.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-body-large,
+.wds-text-body-large {
+  &:extend(.wds-text-body-large);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use np-text-body-large-bold instead */
+/* DEPRECATED: use `.wds-text-body-large-bold` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
-.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-body-large-bold,
+.wds-text-body-large-bold {
+  &:extend(.wds-text-body-large-bold);
   .np-text-hyphenated;
 }
 
@@ -199,19 +179,25 @@ a,
 
 // DISPLAY
 
-.np-text-display-number {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: 40px;
-  line-height: 110%;
+/* 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);
 }
 
-.display-formatting(
-@font-size;
-@line-height;
-@font-weight: var(--font-weight-regular)) {
-  font-size: @font-size;
-  line-height: @line-height;
-  font-weight: @font-weight;
+.np-text-display-number-medium,
+.wds-text-display-number-medium {
+  &:extend(.wds-text-display-number-medium);
+}
+
+.np-text-display-number-large,
+.wds-text-display-number-large {
+  &:extend(.wds-text-display-number-large);
 }
 
 .display-1,
@@ -223,28 +209,12 @@ 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 */
@@ -252,36 +222,23 @@ 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 {
-  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
-}
-
-.np-text-display-medium {
-  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
+.np-text-display-large,
+.wds-text-display-large {
+  &:extend(.wds-text-display-large);
 }
 
-.np-text-display-small {
-  .display-formatting(var(--size-40), normal, var(--font-weight-bold));
+.np-text-display-medium,
+.wds-text-display-medium {
+  &:extend(.wds-text-display-medium);
 }
 
-: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);
-  }
+.np-text-display-small,
+.wds-text-display-small {
+  &:extend(.wds-text-display-small);
 }
 
 /* Disable hyphenation for English
@@ -294,117 +251,6 @@ 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);