@transferwise/components 46.130.2 → 46.131.0

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

@@ -0,0 +1,575 @@
+/* stylelint-disable selector-max-empty-lines */
+@import (reference) "../../variables/neptune-tokens.less";
+@import (reference) "../mixins/_logical-properties.less";
+@import (reference) "../mixins/_links.less";
+@import (reference) "../addons/_spacing-utilities.less";
+
+// TITLE
+
+/* DEPRECATED: use .np-text-*-title instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.np-text-title-screen,
+.np-text-title-section,
+.np-text-title-subsection,
+.np-text-title-body,
+.np-text-title-group {
+  margin: 0;
+  color: var(--color-content-primary);
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  .np-text-hyphenated;
+  
+  + p,
+  + ul:not(.list-unstyled),
+  + ol:not(.list-unstyled) {
+    margin-top: var(--size-8);
+  }
+}
+
+/* DEPRECATED: use .np-text-title-screen instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.h1,
+.title-1,
+h1,
+.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 .np-text-title-section instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.h2,
+.title-2,
+h2,
+.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 .np-text-title-subsection instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.h3,
+.title-3,
+h3,
+.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 .np-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%;
+}
+
+/* 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 {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
+}
+
+/* DEPRECATED: use .np-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
+.tiny {
+  color: var(--color-content-secondary);
+}
+
+// BODY
+
+/* DEPRECATED: use .np-text-body-default instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.body-2, .body-3, .small, .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);
+}
+
+/* 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 {
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+/* DEPRECATED: use .np-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;
+}
+
+/* DEPRECATED: use np-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;
+}
+
+// LINK
+
+a,
+.np-text-link-default,
+.np-text-link-large {
+  font-weight: var(--font-weight-semi-bold);
+  .link-underline();
+}
+
+.np-text-link-large {
+  font-size: var(--font-size-16);
+  letter-spacing: -0.011em;
+  line-height: 150%;
+}
+
+.np-text-link-default {
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 155%;
+}
+
+// DISPLAY
+
+.np-text-display-number {
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 40px;
+  line-height: 110%;
+}
+
+.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,
+.display-2,
+.display-3,
+.display-4,
+.display-5,
+.np-text-display-extra-large,
+.np-text-display-large,
+.np-text-display-medium,
+.np-text-display-small {
+  font-family: "Wise Sans", Inter, sans-serif;
+  font-synthesis: none;
+}
+
+/* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
+.np-text-display-extra-large,
+.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-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);
+  }
+}
+
+: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);
+  /* stylelint-disable-next-line number-max-precision */
+  font-size: 3.7333333333rem;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-8);
+    font-size: 6.5rem;
+  }
+}
+
+/* DEPRECATED: use `.np-text-display-*` instead */
+.display-2 {
+  margin-bottom: var(--size-24);
+  /* stylelint-disable-next-line number-max-precision */
+  font-size: 3.7333333333rem;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-16);
+    font-size: 5.5rem;
+  }
+}
+
+/* DEPRECATED: use `.np-text-display-*` instead */
+.display-3 {
+  margin-bottom: var(--size-8);
+  font-size: 2.8rem;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-24);
+    font-size: 4.5rem;
+  }
+}
+
+/* DEPRECATED: use `.np-text-display-*` instead */
+.display-4 {
+  margin-bottom: var(--size-4);
+  /* stylelint-disable-next-line number-max-precision */
+  font-size: 1.8666666667rem; // 28/15px
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-24);
+    font-size: 3.5rem; // 56px
+  }
+}
+
+/* DEPRECATED: use `.np-text-display-*` instead */
+.display-5 {
+  margin-bottom: var(--size-4);
+  /* stylelint-disable-next-line number-max-precision */
+  font-size: 1.8666666667rem; // 28/15px
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-8);
+    font-size: 2.625rem; // 42px
+  }
+}
+
+p {
+  margin: 0 0 var(--size-16);
+
+  + h1,
+  + h2,
+  + h3,
+  + h4,
+  + h5,
+  + h6,
+  + .h1,
+  + .h2,
+  + .h3,
+  + .h4,
+  + .h5,
+  + .h6,
+  + .title-1,
+  + .title-2,
+  + .title-3,
+  + .title-4,
+  + .title-5,
+  + .np-text-title-screen,
+  + .np-text-title-section,
+  + .np-text-title-subsection,
+  + .np-text-title-body,
+  + .np-text-title-group {
+    margin-top: 0;
+    margin-bottom: var(--size-8);
+  }
+}
+
+.control-1,
+.control-2 {
+  color: var(--color-content-accent);
+}
+
+strong,
+b {
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--color-content-primary);
+}
+
+mark,
+.mark {
+  padding: var(--size-4);
+  background-color: var(--color-background-warning);
+}
+
+address {
+  margin-bottom: var(--size-24);
+  font-style: normal;
+}
+
+blockquote {
+  margin: var(--size-16) 0;
+  padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
+  font-size: var(--font-size-16);
+  .border(left, 2px, solid, var(--color-content-accent));
+
+  p {
+    margin-bottom: var(--size-8);
+  }
+
+  p,
+  ol,
+  ul {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  footer {
+    display: block;
+    color: var(--color-content-secondary);
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-body);
+
+    &::before {
+      content: "\2014 \00A0"; // em dash, nbsp
+    }
+  }
+
+  @media (--screen-sm) {
+    margin: var(--size-24);
+  }
+
+  @media (--screen-lg) {
+    margin: var(--size-32);
+    font-size: var(--font-size-16);
+  }
+}
+
+.blockquote-reverse {
+  .padding(right, 22px);
+
+  .padding(left, 0);
+
+  .text-align(right);
+
+  .border(right, 2px, solid, var(--color-content-accent));
+
+  .border(left, 0);
+
+  footer {
+    &::before {
+      content: "";
+    }
+
+    &::after {
+      content: "\00A0 \2014"; // nbsp, em dash
+    }
+  }
+}
+
+pre,
+code,
+kbd {
+  border-radius: var(--radius-small);
+}
+
+pre {
+  margin: 0 0 var(--size-24);
+  padding: var(--size-16);
+  overflow: auto;
+  color: var(--color-content-secondary);
+  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);
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+code {
+  padding: 2px var(--size-4);
+  font-size: 90%;
+  color: var(--color-content-secondary);
+  background-color: var(--color-background-neutral);
+}
+
+kbd {
+  padding: 2px var(--size-4);
+  font-size: 90%;
+  color: #fff;
+  background-color: #333;
+
+  kbd {
+    padding: 0;
+    font-weight: var(--font-weight-bold);
+    font-size: 100%;
+  }
+}

package/src/styles/less/core/viewport-themes.css

@@ -0,0 +1,59 @@
+@media (max-width: 320px) {
+  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-5: calc(5px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
+    --input-height-base: var(--size-32);
+    --input-height-large: var(--input-height-small);
+    --input-padding: var(--input-padding-small);
+    --input-padding-large: var(--input-padding-small);
+    --input-group-addon-padding: var(--input-group-addon-sm-padding);
+    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
+    --btn-height: var(--input-height-base);
+    --btn-lg-height: var(--btn-height);
+    --btn-sm-height: var(--btn-height);
+    --btn-padding: var(--input-padding);
+    --btn-sm-padding: var(--btn-padding);
+    --btn-lg-padding: var(--btn-padding);
+    --dropdown-link-padding: var(--size-12) var(--size-16);
+  }
+}

package/src/styles/less/core/viewport-themes.less

@@ -0,0 +1,65 @@
+@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
+
+@media (--screen-400-zoom) {
+  .np-theme-personal {
+    --delta: 2;
+
+    --size-4: calc(@size-4 / var(--delta));
+    --size-5: calc(@size-5 / var(--delta));
+    --size-8: calc(@size-8 / var(--delta));
+    --size-10: calc(@size-10 / var(--delta));
+    --size-12: calc(@size-12 / var(--delta));
+    --size-14: calc(@size-14 / var(--delta));
+    --size-16: calc(@size-16 / var(--delta));
+    --size-24: calc(@size-24 / var(--delta));
+    --size-32: calc(@size-32 / var(--delta));
+    --size-40: calc(@size-40 / var(--delta));
+    --size-48: calc(@size-48 / var(--delta));
+    --size-52: calc(@size-52 / var(--delta));
+    --size-56: calc(@size-56 / var(--delta));
+    --size-60: calc(@size-60 / var(--delta));
+    --size-64: calc(@size-64 / var(--delta));
+    --size-72: calc(@size-72 / var(--delta));
+    --size-80: calc(@size-80 / var(--delta));
+    --size-88: calc(@size-88 / var(--delta));
+    --size-96: calc(@size-96 / var(--delta));
+    --size-104: calc(@size-104 / var(--delta));
+    --size-112: calc(@size-112 / var(--delta));
+    --size-120: calc(@size-120 / var(--delta));
+    --size-126: calc(@size-126 / var(--delta));
+    --size-128: calc(@size-128 / var(--delta));
+    --size-146: calc(@size-146 / var(--delta));
+    --size-154: calc(@size-154 / var(--delta));
+    --size-x-small: calc(@size-x-small / var(--delta));
+    --size-small: calc(@size-small / var(--delta));
+    --size-medium: calc(@size-medium / var(--delta));
+    --size-large: calc(@size-large / var(--delta));
+    --size-x-large: calc(@size-x-large / var(--delta));
+    --size-2x-large: calc(@size-2x-large / var(--delta));
+    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
+    --space-small: calc(@space-small / var(--delta));
+    --space-medium: calc(@space-medium / var(--delta));
+    --space-large: calc(@space-large / var(--delta));
+    --space-x-large: calc(@space-x-large / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
+
+    --input-height-base: var(--size-32);
+    --input-height-large: var(--input-height-small);
+    --input-padding: var(--input-padding-small);
+    --input-padding-large: var(--input-padding-small);
+    --input-group-addon-padding: var(--input-group-addon-sm-padding);
+    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
+
+    --btn-height: var(--input-height-base);
+    --btn-lg-height: var(--btn-height);
+    --btn-sm-height: var(--btn-height);
+    --btn-padding: var(--input-padding);
+    --btn-sm-padding: var(--btn-padding);
+    --btn-lg-padding: var(--btn-padding);
+
+    --dropdown-link-padding: var(--size-12) var(--size-16);
+  }
+}