@transferwise/neptune-css 0.0.0-experimental-1181467

package/src/less/core/_typography.less

@@ -0,0 +1,794 @@
+/* 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-theme-personal & {
+    + p {
+      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: var(--size-8);
+  font-size: var(--font-size-32);
+  font-weight: var(--font-weight-bold);
+
+  .np-theme-personal & {
+    margin-bottom: initial;
+    font-size: var(--font-size-30);
+    letter-spacing: var(--letter-spacing-negative-xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--line-height-34);
+  }
+}
+
+/* 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: var(--size-4);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-26);
+
+  .np-theme-personal & {
+    margin-bottom: initial;
+    font-weight: var(--font-weight-semi-bold);
+    letter-spacing: var(--letter-spacing-negative-md);
+    line-height: var(--line-height-32);
+  }
+}
+
+/* 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: 2px;
+  font-size: var(--font-size-20);
+  font-weight: var(--font-weight-semi-bold);
+
+  .np-theme-personal & {
+    margin-bottom: initial;
+    font-size: var(--font-size-22);
+    letter-spacing: var(--letter-spacing-negative-md);
+    line-height: var(--line-height-28);
+  }
+}
+
+/* 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-16);
+  font-weight: var(--font-weight-semi-bold);
+
+  .np-theme-personal & {
+    font-size: var(--font-size-18);
+    letter-spacing: var(--letter-spacing-negative-xs);
+    line-height: var(--line-height-24);
+  }
+}
+
+/* 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-semi-bold);
+  font-size: var(--font-size-14);
+
+  .np-theme-personal & {
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-14);
+    letter-spacing: var(--letter-spacing-md);
+    line-height: var(--line-height-20);
+  }
+}
+
+.body-1,
+.body-2,
+.body-3,
+.label,
+.value,
+.np-text-body-default {
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
+}
+
+.body-1,
+.np-text-body-default,
+.np-text-body-default-bold {
+  font-size: var(--font-size-16);
+}
+
+.np-text-body-default-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.body-2 {
+  font-size: var(--font-size-14);
+}
+
+.body-3 {
+  font-size: var(--font-size-12);
+}
+
+.control-1,
+.control-2 {
+  color: var(--color-content-accent);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--line-height-title);
+}
+
+.control-1 {
+  font-size: var(--font-size-16);
+}
+
+.control-2 {
+  font-size: var(--font-size-14);
+}
+
+.label {
+  font-size: var(--font-size-14);
+}
+
+.value {
+  font-size: var(--font-size-16);
+}
+
+.lead {
+  margin-bottom: var(--size-24);
+  font-size: var(--font-size-20);
+  line-height: var(--line-height-title);
+}
+
+small,
+.small,
+.body-2 {
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-body);
+}
+
+.tiny {
+  color: var(--color-content-secondary);
+  font-size: var(--font-size-12);
+  line-height: var(--line-height-body);
+}
+
+// BODY
+
+/* DEPRECATED: use .np-text-body-default instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.body-2, .body-3, .label, .control-label, .small, .tiny,
+body,
+.np-text-body-default {
+  .np-theme-personal & {
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-22);
+    letter-spacing: var(--letter-spacing-xs);
+    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,
+b,
+strong,
+.np-text-body-default-bold {
+  .np-theme-personal & {
+    line-height: var(--line-height-22);
+    letter-spacing: var(--letter-spacing-sm);
+    font-weight: var(--font-weight-semi-bold);
+  }
+}
+
+.np-text-body-default-bold {
+  .np-theme-personal & {
+    font-size: var(--font-size-14);
+  }
+}
+
+/* DEPRECATED: use .np-text-title-group instead  */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.body-1, .value,
+.np-text-body-large {
+  .np-theme-personal & {
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-16);
+    letter-spacing: var(--letter-spacing-negative-xxs);
+    line-height: var(--line-height-24);
+  }
+}
+
+/* DEPRECATED: use np-text-body-large-bold instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.control-1,
+.np-text-body-large-bold {
+  .np-theme-personal & {
+    font-weight: var(--font-weight-semi-bold);
+    font-size: var(--font-size-16);
+    letter-spacing: var(--letter-spacing-xxs);
+    line-height: var(--line-height-24);
+  }
+}
+
+// LINK
+
+.np-theme-personal {
+  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: var(--letter-spacing-xs);
+  }
+
+  .np-text-link-default {
+    font-size: var(--font-size-14);
+  }
+}
+
+// DISPLAY
+
+.np-text-display-number {
+  font-weight: var(--font-weight-bold);
+  font-size: 40px;
+  line-height: 115%;
+  letter-spacing: 0;
+}
+
+.display-formatting(
+@font-size;
+@line-height;
+@font-weight: var(--font-weight-bold);) {
+  font-size: @font-size;
+  line-height: @line-height;
+  font-weight: @font-weight;
+}
+
+.display-size-large-fluid() {
+  font-size:
+    clamp(
+      var(--size-64),
+      9.375vw, /* 96px biggest font size / (1024px screen width / 100) */
+      var(--size-96)
+    );
+}
+
+.display-size-large-fluid-sm() {
+  font-size:
+    clamp(
+      var(--size-60),
+      8.5938vw, /* 88px biggest font size / (1024px screen width / 100) */
+      var(--size-88)
+    );
+}
+
+.display-size-medium-fluid() {
+  font-size:
+    clamp(
+      var(--size-52),
+      6.25vw, /* 64px biggest font size / (1024px screen width / 100) */
+      var(--size-64)
+    );
+}
+
+.display-size-medium-fluid-sm() {
+  font-size:
+    clamp(
+      var(--size-48),
+      5.8594vw, /* 60px biggest font size / (1024px screen width / 100) */
+      var(--size-60)
+    );
+}
+
+.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: Averta, sans-serif;
+
+  .np-theme-personal & {
+    font-family: "Wise Sans", Inter, sans-serif;
+    font-synthesis: none;
+  }
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.np-theme-personal {
+  .np-text-display-extra-large,
+  .np-text-display-large,
+  .np-text-display-medium,
+  .np-text-display-small {
+    letter-spacing: normal;
+
+    @supports (hyphenate-limit-chars: 1) {
+      hyphens: auto;
+      hyphenate-limit-chars: 7 3;
+
+      @media (--screen-md) {
+        hyphenate-limit-chars: 8 3;
+      }
+
+      @media (--screen-lg) {
+        hyphenate-limit-chars: 10 4 3;
+      }
+    }
+
+    @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+      hyphens: auto;
+      -webkit-hyphenate-limit-before: 3;
+      -webkit-hyphenate-limit-after: 3;
+
+      @media (--screen-lg) {
+        -webkit-hyphenate-limit-before: 4;
+      }
+    }
+  }
+
+  .np-text-display-extra-large {
+    .display-formatting(var(--size-120), normal);
+  }
+
+  .np-text-display-large {
+    .display-formatting(var(--size-88), normal);
+    .display-size-large-fluid-sm();
+  }
+
+  .np-text-display-medium {
+    .display-formatting(var(--size-60), normal);
+    .display-size-medium-fluid-sm();
+  }
+
+  .np-text-display-small {
+    .display-formatting(var(--size-40), normal);
+  }
+
+  :lang(en) {
+    .np-text-display-extra-large {
+      .display-formatting(var(--size-126), 0.85);
+    }
+
+    .np-text-display-large {
+      .display-formatting(var(--size-96), 0.85);
+      .display-size-large-fluid();
+    }
+
+    .np-text-display-medium {
+      .display-formatting(var(--size-64), 0.85);
+      .display-size-medium-fluid();
+    }
+
+    .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 {
+      .display-formatting(var(--size-126), 1.05);
+    }
+
+    .np-text-display-large {
+      .display-formatting(var(--size-96), 1.05);
+      .display-size-large-fluid();
+    }
+
+    .np-text-display-medium {
+      .display-formatting(var(--size-64), 1.05);
+      .display-size-medium-fluid();
+    }
+
+    .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 {
+      .display-formatting(var(--size-120),
+      1.2,
+      var(--font-weight-semi-bold));
+    }
+
+    .np-text-display-large {
+      .display-formatting(var(--size-88),
+      1.2,
+      var(--font-weight-semi-bold));
+      .display-size-large-fluid-sm();
+    }
+
+    .np-text-display-medium {
+      .display-formatting(var(--size-60),
+      1.2,
+      var(--font-weight-semi-bold));
+      .display-size-medium-fluid-sm();
+    }
+
+    .np-text-display-small {
+      .display-formatting(var(--size-40),
+      1.2,
+      var(--font-weight-semi-bold));
+    }
+  }
+}
+
+.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;
+  }
+}
+
+.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;
+  }
+}
+
+.display-3 {
+  margin-bottom: var(--size-8);
+  font-size: 2.8rem;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-24);
+    font-size: 4.5rem;
+  }
+}
+
+.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
+  }
+}
+
+.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 24px;
+  margin: 0 0 var(--size-24);
+
+  .np-theme-personal & {
+    margin-bottom: 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: var(--size-32);
+
+    .np-theme-personal & {
+      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);
+  letter-spacing: 0;
+  color: var(--color-content-primary);
+
+  .np-theme-personal & {
+    color: var(--color-content-primary);
+  }
+}
+
+mark,
+.mark {
+  padding: var(--size-4);
+  background-color: var(--color-background-warning);
+}
+
+sub,
+sup {
+  position: relative; // Normalize 8.0.1
+  font-size: 75%; // Normalize 8.0.1
+  line-height: 0; // Normalize 8.0.1
+  vertical-align: baseline; // Normalize 8.0.1
+}
+
+sub {
+  bottom: -0.25em; // Normalize 8.0.1
+}
+
+sup {
+  top: -0.5em; // Normalize 8.0.1
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: none;
+  border-bottom: 1px dotted var(--color-content-accent);
+  cursor: help;
+}
+
+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,
+samp {
+  font-size: 1em;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  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%;
+  }
+}
+
+samp {
+  font-size: 1em;
+  border-radius: 0;
+}