@transferwise/neptune-css 0.0.0-experimental-5cb94bb → 0.0.0-experimental-ee9e70d

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-5cb94bb",
+  "version": "0.0.0-experimental-ee9e70d",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/core/_scaffolding.less

@@ -37,7 +37,7 @@
 }
 
 .np-theme-personal {
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   font-feature-settings: "calt";
 
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
@@ -68,7 +68,7 @@
 
 html {
   font-size: var(--base-font-size);
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   color: var(--color-content-secondary);
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
@@ -221,11 +221,11 @@ ul {
 
 dt,
 dd {
-  line-height: var(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
 }
 
 dt {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 
 dd {

package/src/less/core/_typography-utilities.less

@@ -145,15 +145,15 @@
 }
 
 .font-weight-bold {
-  font-weight: var(--wds-font-weight-title-screen) !important;
+  font-weight: var(--font-weight-bold) !important;
 }
 
 .font-weight-semi-bold {
-  font-weight: var(--wds-font-weight-title-group) !important;
+  font-weight: var(--font-weight-semi-bold) !important;
 }
 
 .font-weight-normal {
-  font-weight: var(--wds-font-weight-body-regular) !important;
+  font-weight: var(--font-weight-regular) !important;
 }
 
 .font-italic {

package/src/less/core/_typography.less

@@ -6,7 +6,7 @@
 
 // TITLE
 
-/* DEPRECATED: use `.wds-text-*` instead */
+/* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -32,6 +32,8 @@ h6,
 .np-text-title-group {
   margin: 0;
   color: var(--color-content-primary);
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
   .np-text-hyphenated;
 
   + p,
@@ -41,76 +43,86 @@ h6,
   }
 }
 
-/* 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 {
-  &:extend(.wds-text-title-screen);
+.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 `.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 {
-  &:extend(.wds-text-title-section);
+.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 `.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 {
-  &:extend(.wds-text-title-subsection);
+.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 `.wds-text-title-body` instead */
+/* DEPRECATED: use .np-text-title-body instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h4,
 .title-4,
 h4,
-.np-text-title-body,
-.wds-text-title-body {
-  &:extend(.wds-text-title-body);
+.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 `.wds-text-title-group` instead */
+/* 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,
-.wds-text-title-group {
-  &:extend(.wds-text-title-group);
+.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 `.wds-text-title-body` instead */
+/* DEPRECATED: use .np-text-title-body instead */
 .lead {
   margin-bottom: var(--size-24);
-  font-size: var(--wds-font-size-title-body);
-  line-height: var(--wds-line-height-title-body);
+  font-size: var(--font-size-20);
+  line-height: var(--line-height-title);
 }
 
-// DEPRECATED: use `.wds-text-body-default` instead
+// DEPRECATED: use .np-text-body-default instead
 .tiny {
   color: var(--color-content-secondary);
 }
 
 // BODY
 
-/* 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,
@@ -118,41 +130,49 @@ h6,
 .tiny,
 body,
 small,
-.np-text-body-default,
-.wds-text-body-default {
-  &:extend(.wds-text-body-default);
+.np-text-body-default {
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   .np-text-hyphenated;
 }
 
-/* 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,
 
 // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
 .label, .control-label,
 
-.np-text-body-default-bold,
-.wds-text-body-default-bold {
-  &:extend(.wds-text-body-default-bold);
+.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);
   .np-text-hyphenated;
 }
 
-/* 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 {
-  &:extend(.wds-text-body-large);
+.np-text-body-large {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   .np-text-hyphenated;
 }
 
-/* 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 {
-  &:extend(.wds-text-body-large-bold);
+.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;
   .np-text-hyphenated;
 }
 
@@ -161,43 +181,37 @@ small,
 a,
 .np-text-link-default,
 .np-text-link-large {
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   .link-underline();
 }
 
 .np-text-link-large {
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 
 .np-text-link-default {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
 
 // DISPLAY
 
-/* DEPRECATED: use .wds-text-display-number-small instead */
-.np-text-display-number,
-.wds-text-display-number {
-  &:extend(.wds-text-display-number);
-}
-
-.np-text-display-number-small,
-.wds-text-display-number-small {
-  &:extend(.wds-text-display-number-small);
-}
-
-.np-text-display-number-medium,
-.wds-text-display-number-medium {
-  &:extend(.wds-text-display-number-medium);
+.np-text-display-number {
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 40px;
+  line-height: 110%;
 }
 
-.np-text-display-number-large,
-.wds-text-display-number-large {
-  &:extend(.wds-text-display-number-large);
+.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,
@@ -209,12 +223,28 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-synthesis: none;
-
+  &,
   &--forced {
-    font-family: var(--wds-font-family-display);
+    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 */
@@ -222,23 +252,36 @@ 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,
-.wds-text-display-large {
-  &:extend(.wds-text-display-large);
+.np-text-display-large {
+  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
 }
 
-.np-text-display-medium,
-.wds-text-display-medium {
-  &:extend(.wds-text-display-medium);
+.np-text-display-medium {
+  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
 }
 
-.np-text-display-small,
-.wds-text-display-small {
-  &:extend(.wds-text-display-small);
+.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);
+  }
 }
 
 /* Disable hyphenation for English
@@ -251,6 +294,117 @@ 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);
@@ -347,7 +501,7 @@ p {
 
 strong,
 b {
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   color: var(--color-content-primary);
 }
 
@@ -365,7 +519,7 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   .border(left, 2px, solid, var(--color-content-accent));
 
   p {
@@ -383,8 +537,8 @@ blockquote {
   footer {
     display: block;
     color: var(--color-content-secondary);
-    font-size: var(--wds-font-size-body);
-    line-height: var(--wds-line-height-body-large);
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-body);
 
     &::before {
       content: "\2014 \00A0"; // em dash, nbsp
@@ -397,7 +551,7 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
   }
 }
 
@@ -434,8 +588,8 @@ pre {
   padding: var(--size-16);
   overflow: auto;
   color: var(--color-content-secondary);
-  font-size: var(--wds-font-size-body);
-  line-height: var(--wds-line-height-body-large);
+  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);
@@ -464,7 +618,7 @@ kbd {
 
   kbd {
     padding: 0;
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: var(--font-weight-bold);
     font-size: 100%;
   }
 }

package/src/less/forms/bootstrap-forms.less

@@ -1,11 +1,11 @@
-@import (reference) "../../variables/legacy-variables.less";
-@import (reference) "../../variables/neptune-tokens.less";
-@import (reference) "../mixins/_arrows.less";
-@import (reference) "../mixins/_grid.less";
-@import (reference) "../mixins/_forms.less";
-@import (reference) "../mixins/_tab-focus.less";
-@import (reference) "../mixins/_logical-properties.less";
-@import (reference) "../core/_typography.less";
+@import (reference) '../../variables/legacy-variables.less';
+@import (reference) '../../variables/neptune-tokens.less';
+@import (reference) '../mixins/_arrows.less';
+@import (reference) '../mixins/_grid.less';
+@import (reference) '../mixins/_forms.less';
+@import (reference) '../mixins/_tab-focus.less';
+@import (reference) '../mixins/_logical-properties.less';
+@import (reference) '../core/_typography.less';
 
 //
 // Forms
@@ -43,7 +43,7 @@ label,
 .secondary {
   color: var(--color-content-secondary);
   transition: color ease-in-out 0.15s;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   line-height: 20px;
 }
 
@@ -54,34 +54,34 @@ label,
 // address browser inconsistencies.
 
 // Override content-box in Normalize (* isn't specific enough)
-input[type="search"] {
+input[type='search'] {
   box-sizing: border-box;
 }
 
-input[type="number"] {
+input[type='number'] {
   appearance: textfield;
 }
 
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 // Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   margin: 4px 0 0;
   margin-top: 1px;
   line-height: normal;
 }
 
-input[type="file"] {
+input[type='file'] {
   display: block;
 }
 
 // Make range inputs behave like textual form controls
-input[type="range"] {
+input[type='range'] {
   display: block;
   width: 100%;
 }
@@ -93,9 +93,9 @@ select[size] {
 }
 
 // Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type='file']:focus,
+input[type='radio']:focus,
+input[type='checkbox']:focus {
   .tab-focus();
 }
 
@@ -103,8 +103,8 @@ input[type="checkbox"]:focus {
 output {
   display: block;
   padding-top: (@padding-base-vertical + 1);
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-line-height-title-section);
+  font-size: var(--font-size-16);
+  line-height: var(--line-height-control);
   color: var(--color-content-primary);
 }
 
@@ -138,14 +138,14 @@ output {
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
 
   .input-size(
     var(--input-height-base),
     var(--input-padding),
     @input-border-radius
   );
-  .wds-text-body-large;
+  .np-text-body-large;
 
   // Remove iOS drop shadow
   background-clip: padding-box;
@@ -197,7 +197,7 @@ output {
 // be added to `.form-control` as it's not specific enough. For details, see
 // https://github.com/twbs/bootstrap/issues/11586.
 
-input[type="search"] {
+input[type='search'] {
   appearance: none;
 }
 
@@ -209,10 +209,10 @@ input[type="search"] {
 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
 
 @media screen and (min-device-pixel-ratio: 0) {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"] {
+  input[type='date'],
+  input[type='time'],
+  input[type='datetime-local'],
+  input[type='month'] {
     line-height: var(--input-height-base);
 
     &.input-sm,
@@ -222,7 +222,7 @@ input[type="search"] {
 
     &.input-lg,
     .input-group-lg & {
-      line-height: calc(var(--input-height-large) - var(--wds-line-height-body-large));
+      line-height: calc(var(--input-height-large) - var(--line-height-body));
     }
   }
 }
@@ -248,7 +248,7 @@ input[type="search"] {
   }
 }
 
-.row-equal-height > [class*="col-"] > .form-group {
+.row-equal-height > [class*='col-'] > .form-group {
   width: 100%;
 }
 
@@ -275,10 +275,10 @@ input[type="search"] {
   margin-top: (@padding-base-vertical * 1.5);
 }
 
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
+.radio input[type='radio'],
+.radio-inline input[type='radio'],
+.checkbox input[type='checkbox'],
+.checkbox-inline input[type='checkbox'] {
   position: absolute;
   .margin(left, -20px);
 
@@ -313,8 +313,8 @@ input[type="search"] {
 // Some special care is needed because <label>s don't inherit their parent's `cursor`.
 //
 // Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   &[disabled],
   &.disabled,
   fieldset[disabled] & {
@@ -349,7 +349,7 @@ input[type="password"] {
 .form-control-static {
   // Remove default margin from `p`
   margin-bottom: 0;
-  min-height: calc(var(--wds-line-height-title-section) * 2);
+  min-height: calc(var(--line-height-control) * 2);
   color: var(--color-content-secondary);
   background-color: var(--color-background-neutral);
   border: 1px solid var(--color-interactive-secondary);
@@ -380,7 +380,7 @@ input[type="password"] {
   );
   font-size: 14px;
   line-height: 24px;
-  .wds-text-body-default();
+  .np-text-body-default();
 }
 
 .form-group-sm,
@@ -388,7 +388,7 @@ input[type="password"] {
   .form-control {
     height: @input-height-small;
     padding: var(--input-padding-small);
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     line-height: @input-line-height-small;
     border-radius: @input-border-radius-small;
   }
@@ -405,9 +405,9 @@ input[type="password"] {
 
   .form-control-static {
     height: @input-height-small;
-    min-height: calc(var(--wds-line-height-title-section) + @input-font-size-small);
+    min-height: calc(var(--line-height-control) + @input-font-size-small);
     padding: var(--input-padding-small);
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     line-height: @input-line-height-small;
   }
 }
@@ -418,7 +418,7 @@ input[type="password"] {
     var(--input-padding-large);
     @input-border-radius-large
   );
-  .wds-text-body-large;
+  .np-text-body-large;
 }
 
 .form-group-lg {
@@ -445,7 +445,7 @@ input[type="password"] {
 
   .form-control-static {
     height: var(--input-height-large);
-    min-height: calc(var(--wds-line-height-title-section) + @input-font-size-large);
+    min-height: calc(var(--line-height-control) + @input-font-size-large);
     padding: var(--input-padding-large);
     font-size: @input-font-size-large;
     line-height: @input-line-height-large;
@@ -533,9 +533,7 @@ input[type="password"] {
   border-style: solid;
   border-radius: var(--radius-small);
   padding: 4px 16px 3px;
-  transition:
-    border-color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
   a {
     color: inherit;
@@ -626,7 +624,7 @@ input[type="password"] {
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
   & ~ .form-control-feedback {
-    top: var(--wds-line-height-title-section); // Height of the `label` and its margin
+    top: var(--line-height-control); // Height of the `label` and its margin
   }
 
   &.sr-only ~ .form-control-feedback {
@@ -703,8 +701,8 @@ input[type="password"] {
       }
     }
 
-    .radio input[type="radio"],
-    .checkbox input[type="checkbox"] {
+    .radio input[type='radio'],
+    .checkbox input[type='checkbox'] {
       position: relative;
       .margin(left, 0);
     }
@@ -737,7 +735,7 @@ input[type="password"] {
   // and other content below items
   .radio,
   .checkbox {
-    min-height: calc(var(--wds-line-height-title-section) + (@padding-base-vertical + 1));
+    min-height: calc(var(--line-height-control) + (@padding-base-vertical + 1));
   }
 
   // Make form groups behave like rows
@@ -774,7 +772,7 @@ input[type="password"] {
       // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 17px;
-        font-size: var(--wds-font-size-title-body);
+        font-size: var(--font-size-20);
       }
     }
   }
@@ -784,13 +782,13 @@ input[type="password"] {
       // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 8px;
-        font-size: var(--wds-font-size-body);
+        font-size: var(--font-size-14);
       }
     }
   }
 }
 
-@import "checkbox-radio.less";
+@import 'checkbox-radio.less';
 
 .input-group .input-group-btn + input {
   .border(left, 0, solid, transparent);
@@ -820,7 +818,7 @@ input[type="password"] {
 
 .form-group {
   position: relative;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 
 .form-group .row {
@@ -828,7 +826,7 @@ input[type="password"] {
 
   .margin(right, -6px);
 
-  [class*="col-"] {
+  [class*='col-'] {
     .padding(left, 6px);
 
     .padding(right, 6px);
@@ -836,7 +834,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-xs-max) {
-  .form-group .row [class*="col-sm-"] {
+  .form-group .row [class*='col-sm-'] {
     margin-bottom: 0;
 
     .btn-input {
@@ -846,7 +844,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-sm-max) {
-  .form-group .row [class*="col-md-"] {
+  .form-group .row [class*='col-md-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -857,7 +855,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-md-max) {
-  .form-group .row [class*="col-lg-"] {
+  .form-group .row [class*='col-lg-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -868,7 +866,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-lg-max) {
-  .form-group .row [class*="col-xl-"] {
+  .form-group .row [class*='col-xl-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -897,9 +895,7 @@ input[type="password"] {
     background-color: var(--color-background-screen);
     border: 1px solid var(--color-interactive-secondary);
     border-radius: @border-radius-base;
-    transition:
-      border 0.15s ease-in-out,
-      background-color 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
     .np-theme-personal & {
       border-radius: var(--radius-small);
@@ -930,8 +926,7 @@ input[type="password"] {
       small,
       .small,
       .body-2,
-      .np-text-body-default,
-      .wds-text-body-default {
+      .np-text-body-default {
         display: block;
         color: var(--color-content-secondary);
       }
@@ -1026,7 +1021,7 @@ input[type="password"] {
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
-  .wds-text-body-large;
+  .np-text-body-large;
   display: block;
   width: 100%;
   color: var(--color-content-tertiary);
@@ -1130,32 +1125,26 @@ input[type="password"] {
 
     .checkbox:hover .tw-checkbox-button,
     .radio:not(.disabled):hover .tw-radio-button,
-    .tw-checkbox-button:not(.disabled, :disabled):hover,
-    input[type="checkbox"]:hover + .tw-checkbox-button,
-    input[type="radio"]:not(.disabled, :disabled):hover + .tw-radio-button,
-    input[type="checkbox"]:not(.disabled, :disabled):hover + .tw-checkbox-button {
+    .tw-checkbox-button:not(.disabled,:disabled):hover,
+    input[type=checkbox]:hover+.tw-checkbox-button,
+    input[type=radio]:not(.disabled,:disabled):hover+.tw-radio-button,
+    input[type=checkbox]:not(.disabled,:disabled):hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
     }
 
     .tw-checkbox-button.checked,
     .tw-checkbox-button:checked,
-    input[type="checkbox"]:checked + .tw-checkbox-button,
+    input[type=checkbox]:checked+.tw-checkbox-button,
     .tw-checkbox-button.checked:hover,
     .tw-checkbox-button:checked:hover,
-    input[type="checkbox"]:not(.disabled, :disabled):checked:hover + .tw-checkbox-button {
+    input[type=checkbox]:not(.disabled,:disabled):checked:hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
       background: var(--color-sentiment-negative);
     }
 
-    .checkbox > label:not(.disabled, :disabled):active input[type="checkbox"] + .tw-checkbox-button,
-    .checkbox
-      > label:not(.disabled, :disabled):focus-visible
-      input[type="checkbox"]
-      + .tw-checkbox-button,
-    .checkbox
-      > label:not(.disabled, :disabled):has(:focus-visible)
-      input[type="checkbox"]
-      + .tw-checkbox-button {
+    .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button,
+    .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button,
+    .checkbox>label:not(.disabled,:disabled):has(:focus-visible) input[type=checkbox]+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
     }
   }
@@ -1164,9 +1153,7 @@ input[type="password"] {
   .tw-checkbox-button {
     background-color: unset;
     color: unset;
-    transition:
-      background-color 0.3s ease-in-out,
-      box-shadow 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   }
 
   .btn-input:hover,
@@ -1183,7 +1170,7 @@ input[type="password"] {
   }
 
   .form-group .np-upload-input label {
-    margin-bottom: 0;
+      margin-bottom: 0;
   }
 
   .form-group .alert:before,

package/src/less/forms/checkbox-radio.less

@@ -309,9 +309,9 @@
       padding-top: 1px; // `0` would look off due to checkbox misalignment
 
       :not(.np-theme-personal) & {
-        font-weight: var(--wds-font-weight-body-regular);
-        font-size: var(--wds-font-size-body-large);
-        line-height: var(--wds-line-height-title-subsection);
+        font-weight: var(--font-weight-regular);
+        font-size: var(--font-size-16);
+        line-height: var(--line-height-20);
         // Account for our funky font baseline
         padding-top: 3px;
       }

package/src/less/mixins/_reset-text.less

@@ -1,7 +1,7 @@
 @import (reference) "_logical-properties.less";
 
 .reset-text() {
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
 
   // We deliberately do NOT reset font-size.
 

package/src/less/mixins/_text-emphasis.less

@@ -22,9 +22,6 @@
   &.np-text-title-screen,
   &.np-text-title-section,
   &.np-text-title-subsection,
-  &.wds-text-title-screen,
-  &.wds-text-title-section,
-  &.wds-text-title-subsection,
   h1,
   h2,
   h3,
@@ -36,10 +33,7 @@
   .title-3,
   .np-text-title-screen,
   .np-text-title-section,
-  .np-text-title-subsection,
-  .wds-text-title-screen,
-  .wds-text-title-section,
-  .wds-text-title-subsection {
+  .np-text-title-subsection {
     color: @large-color !important;
   }
 }