@transferwise/components 46.165.5 → 46.167.0

package/src/main.less

@@ -4,6 +4,8 @@
 @import "./PocketSurface/PocketSurface.less";
 
 @import "./Container/Container.less";
+@import "./CardContainer/CardContainer.less";
+@import "./CardWidget/CardWidget.less";
 @import "./_deprecated/CriticalBanner/CriticalCommsBanner.less";
 @import "./Accordion/Accordion.less";
 @import "./_deprecated/ActionButton/ActionButton.less";
@@ -53,6 +55,7 @@
 @import "./Inputs/SelectInput/SelectInput.less";
 @import "./Inputs/TextArea/TextArea.less";
 @import "./InstructionsList/InstructionsList.less";
+@import "./Label/Label.less";
 @import "./Link/Link.less";
 @import "./Loader/Loader.less";
 @import "./Logo/Logo.less";
@@ -99,5 +102,5 @@
 @import "./ProgressBar/ProgressBar.less";
 @import "./_deprecated/LegacyListItem/LegacyListItem.less";
 
-// List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
-// Make sure you are not referencing main.less itself in this file!
+// List all LESS files in `.src/` in alphabetical order: `find -s src -type f -name '*.less' ! -name 'main.less'`
+// Make sure you are not referencing `main.less` itself in this file!

package/src/styles/less/accordion.css

@@ -35,7 +35,59 @@
 .np-theme-personal .chevron-color {
   color: var(--color-interactive-primary);
 }
-.decision {
+.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 {
   cursor: pointer;
   margin-block-end: 0 !important;
   border: 0;
@@ -53,13 +105,7 @@
 .decision__title {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .decision__title {
@@ -95,10 +141,6 @@
   margin-block-start: var(--size-8);
 }
 .decision__content {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   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/badge.css

@@ -4,9 +4,9 @@
   padding-block: 5px;
   padding-inline: var(--size-8);
   font-size: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #fff;
-  line-height: var(--line-height-control);
+  line-height: var(--wds-line-height-title-section);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;

package/src/styles/less/badge.less

@@ -7,9 +7,9 @@
   min-width: var(--size-16);
   padding: 5px var(--size-8);
   font-size: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #fff;
-  line-height: var(--line-height-control);
+  line-height: var(--wds-line-height-title-section);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;

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;
@@ -332,8 +358,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: var(--color-content-secondary);
 }
@@ -343,10 +370,6 @@
   }
 }
 .btn-group .secondary {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   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;
@@ -15,9 +39,9 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-block-end: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   padding: var(--btn-padding);
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
   border-radius: var(--btn-radius-base);
   min-block-size: var(--btn-height);
@@ -54,7 +78,7 @@
   }
 }
 .btn .dropdown-menu > li > a {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
 }
 .np-theme-personal .btn {
@@ -969,14 +993,14 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-sm,
 .navbar .btn {
   padding: var(--btn-sm-padding);
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
   border-radius: var(--btn-sm-radius-base);
   min-block-size: var(--btn-sm-height);
 }
 .btn-sm .dropdown-menu > li > a,
 .navbar .btn .dropdown-menu > li > a {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
 }
 .np-theme-personal .btn-sm,
@@ -1007,13 +1031,13 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 @media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: var(--line-height-24);
     border-radius: var(--border-radius-base);
     min-block-size: var(--btn-height);
   }
   .navbar-collapse .btn .dropdown-menu > li > a {
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: var(--line-height-24);
   }
   .np-theme-personal .navbar-collapse .btn {
@@ -1035,7 +1059,7 @@ input[type="button"].btn-block {
   inline-size: 100%;
 }
 .btn-input {
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
@@ -1067,7 +1091,7 @@ input[type="button"].btn-block {
 }
 .btn-input.btn-lg.btn-addon,
 .btn-input.btn-lg.btn-input-inverse {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;

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;
@@ -22,11 +22,11 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-bottom: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 
   .button-size(
     var(--btn-padding);
-    var(--font-size-16);
+    var(--wds-font-size-body-large);
     var(--line-height-24);
     var(--btn-radius-base);
     var(--btn-height);
@@ -475,7 +475,7 @@
 .navbar .btn {
   .button-size(
     var(--btn-sm-padding);
-    var(--font-size-14);
+    var(--wds-font-size-body);
     var(--line-height-22);
     var(--btn-sm-radius-base);
     var(--btn-sm-height);
@@ -512,7 +512,7 @@
   .navbar-collapse .btn {
     .button-size(
       var(--btn-padding);
-      var(--font-size-16);
+      var(--wds-font-size-body-large);
       var(--line-height-24);
       var(--border-radius-base);
       var(--btn-height);
@@ -547,7 +547,7 @@ input[type="button"] {
 
 // @TODO Deprecate / Remove
 .btn-input {
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   .padding(left, @padding-base-horizontal);
 
   .padding(right, @padding-base-horizontal);
@@ -584,7 +584,7 @@ input[type="button"] {
 
     &.btn-addon,
     &.btn-input-inverse {
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-title-body);
     }
   }
 }

package/src/styles/less/core/_fonts.less

@@ -1,77 +1,9 @@
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-greek-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-latin-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
-    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range:
-    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
-    U+A720-A7FF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
-  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;
-}
-
-@font-face {
-  font-family: "Wise Sans";
-  font-style: normal;
-  font-display: swap;
-  src: url("./styles/fonts/WiseSans-Heavy.woff2") format("woff2");
-}
+@import "fonts/_fonts-base";
+@import "fonts/_fonts-ar";
+@import "fonts/_fonts-he";
+@import "fonts/_fonts-ja";
+@import "fonts/_fonts-ko";
+@import "fonts/_fonts-th";
+@import "fonts/_fonts-zh";

package/src/styles/less/core/_scaffolding.less

@@ -37,7 +37,7 @@
 }
 
 .np-theme-personal {
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
   font-feature-settings: "calt";
 
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
@@ -68,7 +68,7 @@
 
 html {
   font-size: var(--base-font-size);
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
   color: var(--color-content-secondary);
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
@@ -221,11 +221,11 @@ ul {
 
 dt,
 dd {
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 
 dt {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 
 dd {

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

@@ -145,15 +145,15 @@
 }
 
 .font-weight-bold {
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--wds-font-weight-title-screen) !important;
 }
 
 .font-weight-semi-bold {
-  font-weight: var(--font-weight-semi-bold) !important;
+  font-weight: var(--wds-font-weight-title-group) !important;
 }
 
 .font-weight-normal {
-  font-weight: var(--font-weight-regular) !important;
+  font-weight: var(--wds-font-weight-body-regular) !important;
 }
 
 .font-italic {