@transferwise/components 0.0.0-experimental-536d239 → 0.0.0-experimental-6e04f56

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

@@ -599,7 +599,7 @@ video {
   clip: auto;
 }
 /* stylelint-disable selector-max-empty-lines */
-/* DEPRECATED: use `.wds-text-*` instead */
+/* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -626,6 +626,9 @@ h6,
   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;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -830,50 +833,77 @@ h6 + ol:not(.list-unstyled),
   margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
-/* DEPRECATED: use `.wds-text-title-screen` instead */
+/* DEPRECATED: use .np-text-title-screen instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .title-1,
 h1,
-.np-text-title-screen,
-.wds-text-title-screen,
-.h1,
-.title-1,
-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%;
 }
-/* DEPRECATED: use `.wds-text-title-section` instead */
+/* DEPRECATED: use .np-text-title-section instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h2,
 .title-2,
 h2,
-.np-text-title-section,
-.wds-text-title-section,
-.h2,
-.title-2,
-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%;
 }
-/* DEPRECATED: use `.wds-text-title-subsection` instead */
+/* DEPRECATED: use .np-text-title-subsection instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h3,
 .title-3,
 h3,
-.np-text-title-subsection,
-.wds-text-title-subsection,
-.h3,
-.title-3,
-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%;
 }
-/* DEPRECATED: use `.wds-text-title-body` instead */
+/* DEPRECATED: use .np-text-title-body instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-/* DEPRECATED: use `.wds-text-title-group` instead */
+.h4,
+.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%;
+}
+/* DEPRECATED: use .np-text-title-group instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-/* DEPRECATED: use `.wds-text-title-body` instead */
+.h5,
+.h6,
+.title-5,
+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);
@@ -886,7 +916,7 @@ h3,
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-/* DEPRECATED: use `.wds-text-body-default` instead */
+/* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
@@ -894,34 +924,16 @@ h3,
 .tiny,
 body,
 small,
-.np-text-body-default,
-.wds-text-body-default,
-.body-2,
-.body-3,
-.small,
-.tiny,
-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;
 }
 @supports (hyphenate-limit-chars: 1) {
-  .body-2,
-  .body-3,
-  .small,
-  .tiny,
-  body,
-  small,
-  .np-text-body-default,
-  .wds-text-body-default,
-  .body-2,
-  .body-3,
-  .small,
-  .tiny,
-  body,
-  small,
-  .np-text-body-default,
-  .wds-text-body-default,
   .body-2,
   .body-3,
   .small,
@@ -933,22 +945,6 @@ small,
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
     .body-2,
     .body-3,
     .small,
@@ -960,22 +956,6 @@ small,
     }
   }
   @media (min-width: 1160px) {
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
     .body-2,
     .body-3,
     .small,
@@ -988,22 +968,6 @@ small,
   }
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .body-2,
-  .body-3,
-  .small,
-  .tiny,
-  body,
-  small,
-  .np-text-body-default,
-  .wds-text-body-default,
-  .body-2,
-  .body-3,
-  .small,
-  .tiny,
-  body,
-  small,
-  .np-text-body-default,
-  .wds-text-body-default,
   .body-2,
   .body-3,
   .small,
@@ -1016,22 +980,6 @@ small,
     -webkit-hyphenate-limit-after: 3;
   }
   @media (min-width: 1160px) {
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
-    .body-2,
-    .body-3,
-    .small,
-    .tiny,
-    body,
-    small,
-    .np-text-body-default,
-    .wds-text-body-default,
     .body-2,
     .body-3,
     .small,
@@ -1043,30 +991,21 @@ small,
     }
   }
 }
-/* DEPRECATED: use `.wds-text-body-default-bold` instead */
+/* DEPRECATED: use .np-text-body-default-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
 .label,
 .control-label,
-.np-text-body-default-bold,
-.wds-text-body-default-bold,
-.control-2,
-.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;
 }
 @supports (hyphenate-limit-chars: 1) {
-  .control-2,
-  .label,
-  .control-label,
-  .np-text-body-default-bold,
-  .wds-text-body-default-bold,
-  .control-2,
-  .label,
-  .control-label,
-  .np-text-body-default-bold,
-  .wds-text-body-default-bold,
   .control-2,
   .label,
   .control-label,
@@ -1075,16 +1014,6 @@ small,
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
     .control-2,
     .label,
     .control-label,
@@ -1093,16 +1022,6 @@ small,
     }
   }
   @media (min-width: 1160px) {
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
     .control-2,
     .label,
     .control-label,
@@ -1112,16 +1031,6 @@ small,
   }
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .control-2,
-  .label,
-  .control-label,
-  .np-text-body-default-bold,
-  .wds-text-body-default-bold,
-  .control-2,
-  .label,
-  .control-label,
-  .np-text-body-default-bold,
-  .wds-text-body-default-bold,
   .control-2,
   .label,
   .control-label,
@@ -1131,16 +1040,6 @@ small,
     -webkit-hyphenate-limit-after: 3;
   }
   @media (min-width: 1160px) {
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
-    .control-2,
-    .label,
-    .control-label,
-    .np-text-body-default-bold,
-    .wds-text-body-default-bold,
     .control-2,
     .label,
     .control-label,
@@ -1149,26 +1048,20 @@ small,
     }
   }
 }
-/* DEPRECATED: use `.wds-text-body-large` instead  */
+/* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
 .value,
-.np-text-body-large,
-.wds-text-body-large,
-.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;
   word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
-  .body-1,
-  .value,
-  .np-text-body-large,
-  .wds-text-body-large,
-  .body-1,
-  .value,
-  .np-text-body-large,
-  .wds-text-body-large,
   .body-1,
   .value,
   .np-text-body-large {
@@ -1176,14 +1069,6 @@ small,
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
     .body-1,
     .value,
     .np-text-body-large {
@@ -1191,14 +1076,6 @@ small,
     }
   }
   @media (min-width: 1160px) {
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
     .body-1,
     .value,
     .np-text-body-large {
@@ -1207,14 +1084,6 @@ small,
   }
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .body-1,
-  .value,
-  .np-text-body-large,
-  .wds-text-body-large,
-  .body-1,
-  .value,
-  .np-text-body-large,
-  .wds-text-body-large,
   .body-1,
   .value,
   .np-text-body-large {
@@ -1223,14 +1092,6 @@ small,
     -webkit-hyphenate-limit-after: 3;
   }
   @media (min-width: 1160px) {
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
-    .body-1,
-    .value,
-    .np-text-body-large,
-    .wds-text-body-large,
     .body-1,
     .value,
     .np-text-body-large {
@@ -1238,46 +1099,31 @@ small,
     }
   }
 }
-/* DEPRECATED: use `.wds-text-body-large-bold` instead */
+/* DEPRECATED: use np-text-body-large-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
-.np-text-body-large-bold,
-.wds-text-body-large-bold,
-.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;
   word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
-  .control-1,
-  .np-text-body-large-bold,
-  .wds-text-body-large-bold,
-  .control-1,
-  .np-text-body-large-bold,
-  .wds-text-body-large-bold,
   .control-1,
   .np-text-body-large-bold {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
     .control-1,
     .np-text-body-large-bold {
       hyphenate-limit-chars: 8 3;
     }
   }
   @media (min-width: 1160px) {
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
     .control-1,
     .np-text-body-large-bold {
       hyphenate-limit-chars: 10 4 3;
@@ -1285,12 +1131,6 @@ small,
   }
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .control-1,
-  .np-text-body-large-bold,
-  .wds-text-body-large-bold,
-  .control-1,
-  .np-text-body-large-bold,
-  .wds-text-body-large-bold,
   .control-1,
   .np-text-body-large-bold {
     hyphens: auto;
@@ -1298,12 +1138,6 @@ small,
     -webkit-hyphenate-limit-after: 3;
   }
   @media (min-width: 1160px) {
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
-    .control-1,
-    .np-text-body-large-bold,
-    .wds-text-body-large-bold,
     .control-1,
     .np-text-body-large-bold {
       -webkit-hyphenate-limit-before: 4;
@@ -1331,7 +1165,12 @@ a,
   letter-spacing: -0.006em;
   line-height: 155%;
 }
-/* DEPRECATED: use .wds-text-display-number-small instead */
+.np-text-display-number {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 40px;
+  line-height: 110%;
+}
 .display-1,
 .display-2,
 .display-3,
@@ -1340,9 +1179,7 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
-  font-synthesis: none;
-}
+.np-text-display-small,
 .display-1--forced,
 .display-2--forced,
 .display-3--forced,
@@ -1356,11 +1193,62 @@ a,
   font-family: var(--font-family-display);
   font-synthesis: none;
 }
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * 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 */
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
+  letter-spacing: normal;
   word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -1406,6 +1294,50 @@ 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
  * and Japanese, Thai, Chinese (these languages use character-level breaks and should never insert hyphens). */
 :lang(en),
@@ -1415,6 +1347,350 @@ a,
 :lang(zh-HK) {
   hyphens: none;
 }
+:lang(af) .np-text-display-extra-large,
+:lang(sq) .np-text-display-extra-large,
+:lang(eu) .np-text-display-extra-large,
+:lang(bs) .np-text-display-extra-large,
+:lang(ca) .np-text-display-extra-large,
+:lang(kw) .np-text-display-extra-large,
+:lang(hr) .np-text-display-extra-large,
+:lang(cs) .np-text-display-extra-large,
+:lang(da) .np-text-display-extra-large,
+:lang(nl) .np-text-display-extra-large,
+:lang(eo) .np-text-display-extra-large,
+:lang(et) .np-text-display-extra-large,
+:lang(fo) .np-text-display-extra-large,
+:lang(fi) .np-text-display-extra-large,
+:lang(fr) .np-text-display-extra-large,
+:lang(gl) .np-text-display-extra-large,
+:lang(lg) .np-text-display-extra-large,
+:lang(de) .np-text-display-extra-large,
+:lang(hu) .np-text-display-extra-large,
+:lang(is) .np-text-display-extra-large,
+:lang(se) .np-text-display-extra-large,
+:lang(id) .np-text-display-extra-large,
+:lang(in) .np-text-display-extra-large,
+:lang(ga) .np-text-display-extra-large,
+:lang(it) .np-text-display-extra-large,
+:lang(kl) .np-text-display-extra-large,
+:lang(ki) .np-text-display-extra-large,
+:lang(rw) .np-text-display-extra-large,
+:lang(lv) .np-text-display-extra-large,
+:lang(lt) .np-text-display-extra-large,
+:lang(lb) .np-text-display-extra-large,
+:lang(mg) .np-text-display-extra-large,
+:lang(ms) .np-text-display-extra-large,
+:lang(mt) .np-text-display-extra-large,
+:lang(gv) .np-text-display-extra-large,
+:lang(mi) .np-text-display-extra-large,
+:lang(nd) .np-text-display-extra-large,
+:lang(nb) .np-text-display-extra-large,
+:lang(nn) .np-text-display-extra-large,
+:lang(om) .np-text-display-extra-large,
+:lang(pl) .np-text-display-extra-large,
+:lang(pt) .np-text-display-extra-large,
+:lang(ro) .np-text-display-extra-large,
+:lang(rm) .np-text-display-extra-large,
+:lang(rn) .np-text-display-extra-large,
+:lang(sg) .np-text-display-extra-large,
+:lang(gd) .np-text-display-extra-large,
+:lang(sr) .np-text-display-extra-large,
+:lang(sn) .np-text-display-extra-large,
+:lang(sk) .np-text-display-extra-large,
+:lang(sl) .np-text-display-extra-large,
+:lang(so) .np-text-display-extra-large,
+:lang(es) .np-text-display-extra-large,
+:lang(sw) .np-text-display-extra-large,
+:lang(sv) .np-text-display-extra-large,
+:lang(tr) .np-text-display-extra-large,
+:lang(cy) .np-text-display-extra-large,
+:lang(fy) .np-text-display-extra-large,
+:lang(wo) .np-text-display-extra-large,
+:lang(zu) .np-text-display-extra-large,
+:lang(hsb) .np-text-display-extra-large,
+:lang(gsw) .np-text-display-extra-large,
+:lang(dsb) .np-text-display-extra-large,
+:lang(fil) .np-text-display-extra-large,
+:lang(af) .np-text-display-large,
+:lang(sq) .np-text-display-large,
+:lang(eu) .np-text-display-large,
+:lang(bs) .np-text-display-large,
+:lang(ca) .np-text-display-large,
+:lang(kw) .np-text-display-large,
+:lang(hr) .np-text-display-large,
+:lang(cs) .np-text-display-large,
+:lang(da) .np-text-display-large,
+:lang(nl) .np-text-display-large,
+:lang(eo) .np-text-display-large,
+:lang(et) .np-text-display-large,
+:lang(fo) .np-text-display-large,
+:lang(fi) .np-text-display-large,
+:lang(fr) .np-text-display-large,
+:lang(gl) .np-text-display-large,
+:lang(lg) .np-text-display-large,
+:lang(de) .np-text-display-large,
+:lang(hu) .np-text-display-large,
+:lang(is) .np-text-display-large,
+:lang(se) .np-text-display-large,
+:lang(id) .np-text-display-large,
+:lang(in) .np-text-display-large,
+:lang(ga) .np-text-display-large,
+:lang(it) .np-text-display-large,
+:lang(kl) .np-text-display-large,
+:lang(ki) .np-text-display-large,
+:lang(rw) .np-text-display-large,
+:lang(lv) .np-text-display-large,
+:lang(lt) .np-text-display-large,
+:lang(lb) .np-text-display-large,
+:lang(mg) .np-text-display-large,
+:lang(ms) .np-text-display-large,
+:lang(mt) .np-text-display-large,
+:lang(gv) .np-text-display-large,
+:lang(mi) .np-text-display-large,
+:lang(nd) .np-text-display-large,
+:lang(nb) .np-text-display-large,
+:lang(nn) .np-text-display-large,
+:lang(om) .np-text-display-large,
+:lang(pl) .np-text-display-large,
+:lang(pt) .np-text-display-large,
+:lang(ro) .np-text-display-large,
+:lang(rm) .np-text-display-large,
+:lang(rn) .np-text-display-large,
+:lang(sg) .np-text-display-large,
+:lang(gd) .np-text-display-large,
+:lang(sr) .np-text-display-large,
+:lang(sn) .np-text-display-large,
+:lang(sk) .np-text-display-large,
+:lang(sl) .np-text-display-large,
+:lang(so) .np-text-display-large,
+:lang(es) .np-text-display-large,
+:lang(sw) .np-text-display-large,
+:lang(sv) .np-text-display-large,
+:lang(tr) .np-text-display-large,
+:lang(cy) .np-text-display-large,
+:lang(fy) .np-text-display-large,
+:lang(wo) .np-text-display-large,
+:lang(zu) .np-text-display-large,
+:lang(hsb) .np-text-display-large,
+: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,
+:lang(sq) .np-text-display-medium,
+:lang(eu) .np-text-display-medium,
+:lang(bs) .np-text-display-medium,
+:lang(ca) .np-text-display-medium,
+:lang(kw) .np-text-display-medium,
+:lang(hr) .np-text-display-medium,
+:lang(cs) .np-text-display-medium,
+:lang(da) .np-text-display-medium,
+:lang(nl) .np-text-display-medium,
+:lang(eo) .np-text-display-medium,
+:lang(et) .np-text-display-medium,
+:lang(fo) .np-text-display-medium,
+:lang(fi) .np-text-display-medium,
+:lang(fr) .np-text-display-medium,
+:lang(gl) .np-text-display-medium,
+:lang(lg) .np-text-display-medium,
+:lang(de) .np-text-display-medium,
+:lang(hu) .np-text-display-medium,
+:lang(is) .np-text-display-medium,
+:lang(se) .np-text-display-medium,
+:lang(id) .np-text-display-medium,
+:lang(in) .np-text-display-medium,
+:lang(ga) .np-text-display-medium,
+:lang(it) .np-text-display-medium,
+:lang(kl) .np-text-display-medium,
+:lang(ki) .np-text-display-medium,
+:lang(rw) .np-text-display-medium,
+:lang(lv) .np-text-display-medium,
+:lang(lt) .np-text-display-medium,
+:lang(lb) .np-text-display-medium,
+:lang(mg) .np-text-display-medium,
+:lang(ms) .np-text-display-medium,
+:lang(mt) .np-text-display-medium,
+:lang(gv) .np-text-display-medium,
+:lang(mi) .np-text-display-medium,
+:lang(nd) .np-text-display-medium,
+:lang(nb) .np-text-display-medium,
+:lang(nn) .np-text-display-medium,
+:lang(om) .np-text-display-medium,
+:lang(pl) .np-text-display-medium,
+:lang(pt) .np-text-display-medium,
+:lang(ro) .np-text-display-medium,
+:lang(rm) .np-text-display-medium,
+:lang(rn) .np-text-display-medium,
+:lang(sg) .np-text-display-medium,
+:lang(gd) .np-text-display-medium,
+:lang(sr) .np-text-display-medium,
+:lang(sn) .np-text-display-medium,
+:lang(sk) .np-text-display-medium,
+:lang(sl) .np-text-display-medium,
+:lang(so) .np-text-display-medium,
+:lang(es) .np-text-display-medium,
+:lang(sw) .np-text-display-medium,
+:lang(sv) .np-text-display-medium,
+:lang(tr) .np-text-display-medium,
+:lang(cy) .np-text-display-medium,
+:lang(fy) .np-text-display-medium,
+:lang(wo) .np-text-display-medium,
+:lang(zu) .np-text-display-medium,
+:lang(hsb) .np-text-display-medium,
+: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,
+:lang(sq) .np-text-display-small,
+:lang(eu) .np-text-display-small,
+:lang(bs) .np-text-display-small,
+:lang(ca) .np-text-display-small,
+:lang(kw) .np-text-display-small,
+:lang(hr) .np-text-display-small,
+:lang(cs) .np-text-display-small,
+:lang(da) .np-text-display-small,
+:lang(nl) .np-text-display-small,
+:lang(eo) .np-text-display-small,
+:lang(et) .np-text-display-small,
+:lang(fo) .np-text-display-small,
+:lang(fi) .np-text-display-small,
+:lang(fr) .np-text-display-small,
+:lang(gl) .np-text-display-small,
+:lang(lg) .np-text-display-small,
+:lang(de) .np-text-display-small,
+:lang(hu) .np-text-display-small,
+:lang(is) .np-text-display-small,
+:lang(se) .np-text-display-small,
+:lang(id) .np-text-display-small,
+:lang(in) .np-text-display-small,
+:lang(ga) .np-text-display-small,
+:lang(it) .np-text-display-small,
+:lang(kl) .np-text-display-small,
+:lang(ki) .np-text-display-small,
+:lang(rw) .np-text-display-small,
+:lang(lv) .np-text-display-small,
+:lang(lt) .np-text-display-small,
+:lang(lb) .np-text-display-small,
+:lang(mg) .np-text-display-small,
+:lang(ms) .np-text-display-small,
+:lang(mt) .np-text-display-small,
+:lang(gv) .np-text-display-small,
+:lang(mi) .np-text-display-small,
+:lang(nd) .np-text-display-small,
+:lang(nb) .np-text-display-small,
+:lang(nn) .np-text-display-small,
+:lang(om) .np-text-display-small,
+:lang(pl) .np-text-display-small,
+:lang(pt) .np-text-display-small,
+:lang(ro) .np-text-display-small,
+:lang(rm) .np-text-display-small,
+:lang(rn) .np-text-display-small,
+:lang(sg) .np-text-display-small,
+:lang(gd) .np-text-display-small,
+:lang(sr) .np-text-display-small,
+:lang(sn) .np-text-display-small,
+:lang(sk) .np-text-display-small,
+:lang(sl) .np-text-display-small,
+:lang(so) .np-text-display-small,
+:lang(es) .np-text-display-small,
+:lang(sw) .np-text-display-small,
+:lang(sv) .np-text-display-small,
+:lang(tr) .np-text-display-small,
+:lang(cy) .np-text-display-small,
+:lang(fy) .np-text-display-small,
+:lang(wo) .np-text-display-small,
+:lang(zu) .np-text-display-small,
+:lang(hsb) .np-text-display-small,
+: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,
+:lang(az) .np-text-display-extra-large,
+:lang(be) .np-text-display-extra-large,
+:lang(bs) .np-text-display-extra-large,
+:lang(bg) .np-text-display-extra-large,
+:lang(ce) .np-text-display-extra-large,
+:lang(mk) .np-text-display-extra-large,
+:lang(os) .np-text-display-extra-large,
+:lang(ru) .np-text-display-extra-large,
+:lang(sr) .np-text-display-extra-large,
+:lang(uk) .np-text-display-extra-large,
+:lang(uz) .np-text-display-extra-large,
+:lang(sah) .np-text-display-extra-large,
+:lang(el) .np-text-display-large,
+:lang(az) .np-text-display-large,
+:lang(be) .np-text-display-large,
+:lang(bs) .np-text-display-large,
+:lang(bg) .np-text-display-large,
+:lang(ce) .np-text-display-large,
+:lang(mk) .np-text-display-large,
+:lang(os) .np-text-display-large,
+:lang(ru) .np-text-display-large,
+:lang(sr) .np-text-display-large,
+: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,
+:lang(az) .np-text-display-medium,
+:lang(be) .np-text-display-medium,
+:lang(bs) .np-text-display-medium,
+:lang(bg) .np-text-display-medium,
+:lang(ce) .np-text-display-medium,
+:lang(mk) .np-text-display-medium,
+:lang(os) .np-text-display-medium,
+:lang(ru) .np-text-display-medium,
+:lang(sr) .np-text-display-medium,
+: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,
+:lang(az) .np-text-display-small,
+:lang(be) .np-text-display-small,
+:lang(bs) .np-text-display-small,
+:lang(bg) .np-text-display-small,
+:lang(ce) .np-text-display-small,
+:lang(mk) .np-text-display-small,
+:lang(os) .np-text-display-small,
+:lang(ru) .np-text-display-small,
+:lang(sr) .np-text-display-small,
+: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;