@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-526a2be

package/build/styles/styles/less/neptune-core.css

@@ -255,6 +255,7 @@ summary {
   --btn-lg-radius-base: 3px;
 }
 .np-theme-personal {
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -278,13 +279,19 @@ summary {
   --btn-radius-base: 9999px;
   --btn-sm-radius-base: var(--btn-radius-base);
   --btn-lg-radius-base: var(--btn-radius-base);
+  color: #5d7079;
   color: var(--color-content-secondary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 html {
+  font-size: 16px;
   font-size: var(--base-font-size);
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  color: #5d7079;
   color: var(--color-content-secondary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -300,10 +307,12 @@ pre {
 }
 .np-theme-personal::-moz-selection {
   background-color: var(--color-background-neutral-active);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal::selection {
   background-color: var(--color-background-neutral-active);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 /* DEPRECATED: use `a` tag or .np-text-link-* instead */
@@ -358,6 +367,7 @@ a:active,
 a.secondary,
 .np-text-link-default.secondary,
 .np-text-link-large.secondary {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .anchor.secondary:hover,
@@ -368,12 +378,14 @@ a.secondary:hover,
 a.secondary:focus,
 .np-text-link-default.secondary:focus,
 .np-text-link-large.secondary:focus {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .anchor.secondary:active,
 a.secondary:active,
 .np-text-link-default.secondary:active,
 .np-text-link-large.secondary:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 html.ios-click {
@@ -406,17 +418,21 @@ textarea {
   resize: vertical;
 }
 input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 input::placeholder,
 textarea::placeholder {
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 ol,
 ul {
+  margin-block: 0 24px;
   margin-block: 0 var(--size-24);
   margin-inline: 0;
   padding-block: 0 0;
+  padding-inline: calc(48px - 10px) 0;
   padding-inline: calc(var(--size-48) - var(--size-10)) 0;
 }
 ol ol,
@@ -430,14 +446,18 @@ ul ul {
   list-style: none;
 }
 .list-inline {
+  margin-inline-start: calc(4px * -1);
   margin-inline-start: calc(var(--size-4) * -1);
   padding-inline-start: 0;
   list-style: none;
 }
 .list-inline > li {
   display: inline-block;
+  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
+  padding-inline-start: 4px;
   padding-inline-start: var(--size-4);
+  border-inline-end: 1px solid rgba(0,0,0,0.10196);
   border-inline-end: 1px solid var(--color-border-neutral);
 }
 .list-inline > li:last-child {
@@ -445,17 +465,22 @@ ul ul {
 }
 dt,
 dd {
+  line-height: 1.5;
   line-height: var(--line-height-body);
 }
 dt {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 dd {
+  margin-block-end: 16px;
   margin-block-end: var(--size-16);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 @media (min-width: 600px) {
   dd {
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
   }
 }
@@ -479,6 +504,7 @@ dd {
     text-overflow: ellipsis;
   }
   .dl-horizontal dd {
+    margin-block-end: 8px;
     margin-block-end: var(--size-8);
     margin-inline-start: 180px;
   }
@@ -497,9 +523,12 @@ dd {
   word-break: break-all;
 }
 hr {
+  margin-block: 16px;
   margin-block: var(--size-16);
   margin-inline: auto;
   border: 0;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .bg-primary hr {
@@ -507,12 +536,14 @@ hr {
 }
 @media (min-width: 600px) {
   hr {
+    margin-block: 24px;
     margin-block: var(--size-24);
     margin-inline: auto;
   }
 }
 @media (min-width: 1160px) {
   hr {
+    margin-block: 32px;
     margin-block: var(--size-32);
     margin-inline: auto;
   }
@@ -536,6 +567,7 @@ video {
   vertical-align: middle;
 }
 .img-rounded {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .img-circle {
@@ -592,7 +624,9 @@ h6,
 .np-text-title-body,
 .np-text-title-group {
   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;
@@ -796,6 +830,7 @@ h6 + ol:not(.list-unstyled),
 .np-text-title-subsection + ol:not(.list-unstyled),
 .np-text-title-body + ol:not(.list-unstyled),
 .np-text-title-group + ol:not(.list-unstyled) {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 /* DEPRECATED: use .np-text-title-screen instead */
@@ -805,7 +840,9 @@ h6 + ol:not(.list-unstyled),
 h1,
 .np-text-title-screen {
   margin-block-end: initial;
+  font-size: 1.875rem;
   font-size: var(--font-size-30);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.021em;
   line-height: 115%;
@@ -817,7 +854,9 @@ h1,
 h2,
 .np-text-title-section {
   margin-block-end: initial;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  font-size: 1.625rem;
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
@@ -829,7 +868,9 @@ h2,
 h3,
 .np-text-title-subsection {
   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%;
@@ -840,7 +881,9 @@ h3,
 .title-4,
 h4,
 .np-text-title-body {
+  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%;
@@ -853,18 +896,24 @@ h4,
 h5,
 h6,
 .np-text-title-group {
+  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%;
 }
 /* DEPRECATED: use .np-text-title-body instead */
 .lead {
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
+  font-size: 1.25rem;
   font-size: var(--font-size-20);
+  line-height: 1.2;
   line-height: var(--line-height-title);
 }
 .tiny {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 /* DEPRECATED: use .np-text-body-default instead */
@@ -876,9 +925,11 @@ h6,
 body,
 small,
 .np-text-body-default {
+  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;
 }
@@ -946,9 +997,11 @@ small,
 .label,
 .control-label,
 .np-text-body-default-bold {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   word-wrap: break-word;
 }
@@ -1000,7 +1053,9 @@ small,
 .body-1,
 .value,
 .np-text-body-large {
+  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;
@@ -1048,7 +1103,9 @@ small,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
 .np-text-body-large-bold {
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
@@ -1090,22 +1147,26 @@ small,
 a,
 .np-text-link-default,
 .np-text-link-large {
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-underline-offset: 0.3em;
 }
 .np-text-link-large {
+  font-size: 1rem;
   font-size: var(--font-size-16);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 .np-text-link-default {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
 .np-text-display-number {
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   font-size: 40px;
   line-height: 110%;
@@ -1128,6 +1189,7 @@ a,
 .np-text-display-large--forced,
 .np-text-display-medium--forced,
 .np-text-display-small--forced {
+  font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
 }
@@ -1176,7 +1238,9 @@ a,
      * numeric input of ExpressiveMoneyInput.
      * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
   line-height: var(--line-height-title);
 }
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -1232,34 +1296,46 @@ a,
 }
 .np-text-display-extra-large,
 .np-text-display-large {
+  font-size: 64px;
   font-size: var(--size-64);
   line-height: normal;
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
 }
 .np-text-display-medium {
+  font-size: 52px;
   font-size: var(--size-52);
   line-height: normal;
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
 }
 .np-text-display-small {
+  font-size: 40px;
   font-size: var(--size-40);
   line-height: normal;
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
 }
 :lang(en) > .np-text-display-extra-large,
 :lang(en) > .np-text-display-large {
+  font-size: 64px;
   font-size: var(--size-64);
   line-height: 0.85;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 :lang(en) > .np-text-display-medium {
+  font-size: 52px;
   font-size: var(--size-52);
   line-height: 0.85;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 :lang(en) > .np-text-display-small {
+  font-size: 40px;
   font-size: var(--size-40);
   line-height: 0.85;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 /* Disable hyphenation for English
@@ -1399,8 +1475,10 @@ a,
 :lang(gsw) .np-text-display-large,
 :lang(dsb) .np-text-display-large,
 :lang(fil) .np-text-display-large {
+  font-size: 64px;
   font-size: var(--size-64);
   line-height: 1.05;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 :lang(af) .np-text-display-medium,
@@ -1467,8 +1545,10 @@ a,
 :lang(gsw) .np-text-display-medium,
 :lang(dsb) .np-text-display-medium,
 :lang(fil) .np-text-display-medium {
+  font-size: 52px;
   font-size: var(--size-52);
   line-height: 1.05;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 :lang(af) .np-text-display-small,
@@ -1535,8 +1615,10 @@ a,
 :lang(gsw) .np-text-display-small,
 :lang(dsb) .np-text-display-small,
 :lang(fil) .np-text-display-small {
+  font-size: 40px;
   font-size: var(--size-40);
   line-height: 1.05;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 :lang(el) .np-text-display-extra-large,
@@ -1565,8 +1647,10 @@ a,
 :lang(uk) .np-text-display-large,
 :lang(uz) .np-text-display-large,
 :lang(sah) .np-text-display-large {
+  font-size: 60px;
   font-size: var(--size-60);
   line-height: 120%;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 :lang(el) .np-text-display-medium,
@@ -1582,8 +1666,10 @@ a,
 :lang(uk) .np-text-display-medium,
 :lang(uz) .np-text-display-medium,
 :lang(sah) .np-text-display-medium {
+  font-size: 48px;
   font-size: var(--size-48);
   line-height: 120%;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 :lang(el) .np-text-display-small,
@@ -1599,70 +1685,83 @@ a,
 :lang(uk) .np-text-display-small,
 :lang(uz) .np-text-display-small,
 :lang(sah) .np-text-display-small {
+  font-size: 40px;
   font-size: var(--size-40);
   line-height: 120%;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
 @media (min-width: 840px) {
   .display-1 {
+    margin-block-end: 8px;
     margin-block-end: var(--size-8);
     font-size: 6.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-2 {
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
 @media (min-width: 840px) {
   .display-2 {
+    margin-block-end: 16px;
     margin-block-end: var(--size-16);
     font-size: 5.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-3 {
+  margin-block-end: 8px;
   margin-block-end: var(--size-8);
   font-size: 2.8rem;
 }
 @media (min-width: 840px) {
   .display-3 {
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     font-size: 4.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-4 {
+  margin-block-end: 4px;
   margin-block-end: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
 @media (min-width: 840px) {
   .display-4 {
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     font-size: 3.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-5 {
+  margin-block-end: 4px;
   margin-block-end: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
 @media (min-width: 840px) {
   .display-5 {
+    margin-block-end: 8px;
     margin-block-end: var(--size-8);
     font-size: 2.625rem;
   }
 }
 p {
+  margin-block: 0 16px;
   margin-block: 0 var(--size-16);
   margin-inline: 0;
 }
@@ -1689,35 +1788,47 @@ p + .np-text-title-subsection,
 p + .np-text-title-body,
 p + .np-text-title-group {
   margin-block-start: 0;
+  margin-block-end: 8px;
   margin-block-end: var(--size-8);
 }
 .control-1,
 .control-2 {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 strong,
 b {
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 mark,
 .mark {
+  padding: 4px;
   padding: var(--size-4);
+  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 address {
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
   font-style: normal;
 }
 blockquote {
+  margin-block: 16px;
   margin-block: var(--size-16);
   margin-inline: 0;
   padding-block: 0 0;
+  padding-inline: calc(16px - 2px) 16px;
   padding-inline: calc(var(--size-16) - 2px) var(--size-16);
+  font-size: 1rem;
   font-size: var(--font-size-16);
+  border-inline-start: 2px solid #0097c7;
   border-inline-start: 2px solid var(--color-content-accent);
 }
 blockquote p {
+  margin-block-end: 8px;
   margin-block-end: var(--size-8);
 }
 blockquote p:last-child,
@@ -1727,8 +1838,11 @@ blockquote ul:last-child {
 }
 blockquote footer {
   display: block;
+  color: #5d7079;
   color: var(--color-content-secondary);
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
+  line-height: 1.5;
   line-height: var(--line-height-body);
 }
 blockquote footer::before {
@@ -1736,12 +1850,15 @@ blockquote footer::before {
 }
 @media (min-width: 600px) {
   blockquote {
+    margin: 24px;
     margin: var(--size-24);
   }
 }
 @media (min-width: 1160px) {
   blockquote {
+    margin: 32px;
     margin: var(--size-32);
+    font-size: 1rem;
     font-size: var(--font-size-16);
   }
 }
@@ -1749,6 +1866,7 @@ blockquote footer::before {
   padding-inline-end: 22px;
   padding-inline-start: 0;
   text-align: end;
+  border-inline-end: 2px solid #0097c7;
   border-inline-end: 2px solid var(--color-content-accent);
   border-inline-start: 0  ;
 }
@@ -1761,18 +1879,25 @@ blockquote footer::before {
 pre,
 code,
 kbd {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 pre {
+  margin-block: 0 24px;
   margin-block: 0 var(--size-24);
   margin-inline: 0;
+  padding: 16px;
   padding: var(--size-16);
   overflow: auto;
+  color: #5d7079;
   color: var(--color-content-secondary);
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
+  line-height: 1.5;
   line-height: var(--line-height-body);
   word-wrap: break-word;
   word-break: break-all;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 pre code {
@@ -1784,13 +1909,17 @@ pre code {
 }
 code {
   padding-block: 2px;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
   font-size: 90%;
+  color: #5d7079;
   color: var(--color-content-secondary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 kbd {
   padding-block: 2px;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
   font-size: 90%;
   color: #fff;
@@ -1798,6 +1927,7 @@ kbd {
 }
 kbd kbd {
   padding: 0;
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
   font-size: 100%;
 }
@@ -1907,38 +2037,46 @@ kbd kbd {
   word-wrap: anywhere;
 }
 .font-weight-bold {
+  font-weight: 700 !important;
   font-weight: var(--font-weight-bold) !important;
 }
 .font-weight-semi-bold {
+  font-weight: 600 !important;
   font-weight: var(--font-weight-semi-bold) !important;
 }
 .font-weight-normal {
+  font-weight: 400 !important;
   font-weight: var(--font-weight-regular) !important;
 }
 .font-italic {
   font-style: italic !important;
 }
 .text-primary {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
 }
 a.text-primary:hover,
 a.text-primary:focus {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
 }
 .bg-primary .text-primary {
   color: #ffffff !important;
 }
 .text-secondary {
+  color: #5d7079 !important;
   color: var(--color-content-secondary) !important;
 }
 .text-positive,
 .text-success {
+  color: #008026 !important;
   color: var(--color-content-positive) !important;
 }
 a.text-positive:hover,
 a.text-success:hover,
 a.text-positive:focus,
 a.text-success:focus {
+  color: #006d13 !important;
   color: var(--color-content-positive-hover) !important;
 }
 .bg-primary .text-positive,
@@ -1947,6 +2085,7 @@ a.text-success:focus {
 }
 .text-accent,
 .text-info {
+  color: #0097c7 !important;
   color: var(--color-content-accent) !important;
   color: var(--color-interactive-primary) !important;
 }
@@ -1954,6 +2093,7 @@ a.text-accent:hover,
 a.text-info:hover,
 a.text-accent:focus,
 a.text-info:focus {
+  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
 }
 .bg-primary .text-accent,
@@ -1961,10 +2101,12 @@ a.text-info:focus {
   color: #00b9ff !important;
 }
 .text-warning {
+  color: #9a6500 !important;
   color: var(--color-content-warning) !important;
 }
 a.text-warning:hover,
 a.text-warning:focus {
+  color: #855400 !important;
   color: var(--color-content-warning-hover) !important;
 }
 .bg-primary .text-warning {
@@ -1992,6 +2134,7 @@ a.text-inverse:focus {
   color: #c9cbce !important;
 }
 .text-muted {
+  color: #768e9c !important;
   color: var(--color-content-tertiary) !important;
 }
 .colored-dot::after {