@transferwise/neptune-css 0.0.0-experimental-4ae3174 → 0.0.0-experimental-549e7ea

package/dist/css/popovers.css

@@ -66,12 +66,6 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
-  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;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -266,12 +260,6 @@ button.close {
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
-  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%;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
@@ -317,12 +305,6 @@ button.close {
 }
 .popover-content {
   padding: 0;
-  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;
   color: #5d7079;
   color: var(--color-content-secondary);

package/dist/css/tooltip.css

@@ -45,12 +45,6 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  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;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/dist/less/neptune-tokens.less

@@ -182,6 +182,13 @@
 @font-size-28: 1.75rem;
 @font-size-30: 1.875rem;
 @font-size-32: 2rem;
+@font-size-40: 2.5rem;
+@font-size-48: 3rem;
+@font-size-52: 3.25rem;
+@font-size-56: 3.5rem;
+@font-size-60: 3.75rem;
+@font-size-64: 4rem;
+@font-size-100: 6.25rem;
 @letter-spacing-xxs: 0.005em;
 @letter-spacing-xs: 0.01em;
 @letter-spacing-sm: 0.0125em;
@@ -216,6 +223,7 @@
 @font-weight-medium: 500;
 @font-weight-semi-bold: 600;
 @font-weight-bold: 700;
+@font-weight-heavy: 800;
 @font-weight-black: 900;
 @font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;

package/dist/props/neptune-tokens.css

@@ -102,6 +102,13 @@
   --font-size-28: 1.75rem;
   --font-size-30: 1.875rem;
   --font-size-32: 2rem;
+  --font-size-40: 2.5rem;
+  --font-size-48: 3rem;
+  --font-size-52: 3.25rem;
+  --font-size-56: 3.5rem;
+  --font-size-60: 3.75rem;
+  --font-size-64: 4rem;
+  --font-size-100: 6.25rem;
   --letter-spacing-xxs: 0.005em;
   --letter-spacing-xs: 0.01em;
   --letter-spacing-sm: 0.0125em;
@@ -136,6 +143,7 @@
   --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
+  --font-weight-heavy: 800;
   --font-weight-black: 900;
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-4ae3174",
+  "version": "0.0.0-experimental-549e7ea",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/core/_typography.less

@@ -49,11 +49,8 @@ h6,
 .title-1,
 h1,
 .np-text-title-screen {
+  &:extend(.wds-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 */
@@ -62,11 +59,8 @@ h1,
 .title-2,
 h2,
 .np-text-title-section {
+  &:extend(.wds-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 */
@@ -75,11 +69,8 @@ h2,
 .title-3,
 h3,
 .np-text-title-subsection {
+  &:extend(.wds-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 */
@@ -88,10 +79,7 @@ h3,
 .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%;
+  &:extend(.wds-text-title-body);
 }
 
 /* DEPRECATED: use .np-text-title-group instead */
@@ -102,10 +90,7 @@ h4,
 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%;
+  &:extend(.wds-text-title-group);
 }
 
 /* DEPRECATED: use .np-text-title-body instead */
@@ -131,10 +116,7 @@ h6,
 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);
+  &:extend(.wds-text-body-default);
   .np-text-hyphenated;
 }
 
@@ -146,10 +128,7 @@ small,
 .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);
+  &:extend(.wds-text-body-default-bold);
   .np-text-hyphenated;
 }
 
@@ -158,10 +137,7 @@ small,
 .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;
+  &:extend(.wds-text-body-large);
   .np-text-hyphenated;
 }
 
@@ -169,10 +145,7 @@ small,
 /* 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;
+  &:extend(.wds-text-body-large-bold);
   .np-text-hyphenated;
 }
 
@@ -199,19 +172,21 @@ a,
 
 // DISPLAY
 
+/* DEPRECATED: use .wds-text-display-number-small instead */
 .np-text-display-number {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: 40px;
-  line-height: 110%;
+  &:extend(.wds-text-display-number);
+}
+
+.np-text-display-number-small {
+  &:extend(.wds-text-display-number-small);
+}
+
+.np-text-display-number-medium {
+  &:extend(.wds-text-display-number-medium);
 }
 
-.display-formatting(
-@font-size;
-@line-height;
-@font-weight: var(--font-weight-regular)) {
-  font-size: @font-size;
-  line-height: @line-height;
-  font-weight: @font-weight;
+.np-text-display-number-large {
+  &:extend(.wds-text-display-number-large);
 }
 
 .display-1,
@@ -223,28 +198,12 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  &,
+  font-synthesis: none;
+
   &--forced {
     font-family: var(--font-family-display);
     font-synthesis: none;
   }
-
-  :lang(ja) &,
-  :lang(th) &,
-  :lang(zh-CN) &,
-  :lang(zh-HK) & {
-    /**
-     * 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: var(--font-family-regular);
-    line-height: var(--line-height-title);
-  }
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -252,36 +211,20 @@ a,
 .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));
+  &:extend(.wds-text-display-large);
 }
 
 .np-text-display-medium {
-  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
+  &:extend(.wds-text-display-medium);
 }
 
 .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);
-  }
+  &:extend(.wds-text-display-small);
 }
 
 /* Disable hyphenation for English
@@ -294,117 +237,6 @@ a,
   hyphens: none;
 }
 
-: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);

package/src/less/neptune.bundle.less

@@ -10,6 +10,8 @@
 @import "@transferwise/neptune-tokens/themes/business--dark/tokens.css";
 @import "@transferwise/neptune-tokens/themes/business--forest-green/tokens.css";
 @import "@transferwise/neptune-tokens/themes/business--bright-green/tokens.css";
+@import "@transferwise/neptune-tokens/text/text.css";
+@import (less) "@transferwise/neptune-tokens/text/utilities.css";
 @import "./core/_fonts.less";
 @import "./core/_scaffolding.less";
 @import "./core/_typography.less";