@transferwise/components 0.0.0-experimental-6bc68bd → 0.0.0-experimental-012dcef

package/src/main.less

@@ -53,7 +53,6 @@
 @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";
@@ -100,5 +99,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,48 +35,70 @@
 .np-theme-personal .chevron-color {
   color: var(--color-interactive-primary);
 }
-.decision__content {
+.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: var(--ring-outline-offset);
+  --ring-outline-offset: 0;
+}
+.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__content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
+  .decision__title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .decision__content {
+    .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
   @media (min-width: 1160px) {
-    .decision__content {
+    .decision__title {
       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;
+}
+@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__content {
+    .decision__title {
       -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:not(.np-option):focus-visible,
-.decision:not(.np-option):has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  --ring-outline-offset: 0;
+.decision__title + p,
+.decision__title + ul:not(.list-unstyled),
+.decision__title + ol:not(.list-unstyled) {
+  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,11 +76,6 @@
   .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(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   color: #fff;
-  line-height: var(--wds-line-height-title-section);
+  line-height: var(--line-height-control);
   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(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   color: #fff;
-  line-height: var(--wds-line-height-title-section);
+  line-height: var(--line-height-control);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;

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

@@ -1,30 +1,4 @@
-.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,
 .btn-group-vertical {
   position: relative;
   display: inline-block;
@@ -358,9 +332,8 @@
 .btn-group .btn-input + .dropdown-menu > li > a {
   white-space: normal;
 }
-.btn-group .body-2,
 .btn-group .np-text-body-default,
-.btn-group .wds-text-body-default,
+.btn-group .body-2,
 .btn-group .small {
   color: var(--color-content-secondary);
 }
@@ -370,6 +343,10 @@
   }
 }
 .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,9 +404,8 @@
     }
   }
 
-  .body-2,
   .np-text-body-default,
-  .wds-text-body-default,
+  .body-2,
   .small {
     color: var(--color-content-secondary);
   }
@@ -419,7 +418,7 @@
 }
 
 .btn-group .secondary {
-  .wds-text-body-default;
+  .np-text-body-default;
 
   color: var(--color-content-secondary);
 }

package/src/styles/less/buttons.css

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

package/src/styles/less/buttons.less

@@ -8,7 +8,7 @@
 @import (reference) "./ring.less";
 
 .btn {
-  .wds-text-body-large-bold;
+  .np-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(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
 
   .button-size(
     var(--btn-padding);
-    var(--wds-font-size-body-large);
+    var(--font-size-16);
     var(--line-height-24);
     var(--btn-radius-base);
     var(--btn-height);
@@ -475,7 +475,7 @@
 .navbar .btn {
   .button-size(
     var(--btn-sm-padding);
-    var(--wds-font-size-body);
+    var(--font-size-14);
     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(--wds-font-size-body-large);
+      var(--font-size-16);
       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(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-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(--wds-font-weight-title-body);
+      font-weight: var(--font-weight-semi-bold);
     }
   }
 }

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

@@ -1,9 +1,77 @@
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 
-@import "fonts/_fonts-en";
-@import "fonts/_fonts-ar";
-@import "fonts/_fonts-he";
-@import "fonts/_fonts-ja";
-@import "fonts/_fonts-ko";
-@import "fonts/_fonts-th";
-@import "fonts/_fonts-zh";
+@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");
+}

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

@@ -37,7 +37,7 @@
 }
 
 .np-theme-personal {
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--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(--wds-font-family-regular);
+  font-family: var(--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(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
 }
 
 dt {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 
 dd {

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

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