@transferwise/neptune-css 0.0.0-experimental-7e7d75e → 0.0.0-experimental-d2bbcaf

package/package.json

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

package/src/less/addons/_background-utilities.less

@@ -76,6 +76,11 @@
   .np-text-title-subsection,
   .np-text-title-body,
   .np-text-title-group,
+  .wds-text-title-screen,
+  .wds-text-title-section,
+  .wds-text-title-subsection,
+  .wds-text-title-body,
+  .wds-text-title-group,
   strong {
     color: @color-navy-content-primary;
   }

package/src/less/button-groups.less

@@ -404,8 +404,9 @@
     }
   }
 
-  .np-text-body-default,
   .body-2,
+  .np-text-body-default,
+  .wds-text-body-default,
   .small {
     color: var(--color-content-secondary);
   }
@@ -418,7 +419,7 @@
 }
 
 .btn-group .secondary {
-  .np-text-body-default;
+  .wds-text-body-default;
 
   color: var(--color-content-secondary);
 }

package/src/less/buttons.less

@@ -8,7 +8,7 @@
 @import (reference) "./ring.less";
 
 .btn {
-  .np-text-body-large-bold;
+  .wds-text-body-large-bold;
 
   display: inline-block;
   margin-bottom: 0;

package/src/less/core/_typography.less

@@ -6,7 +6,7 @@
 
 // TITLE
 
-/* DEPRECATED: use .np-text-*-title instead */
+/* DEPRECATED: use `.wds-text-*` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -43,71 +43,76 @@ h6,
   }
 }
 
-/* DEPRECATED: use .np-text-title-screen instead */
+/* DEPRECATED: use `.wds-text-title-screen` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .title-1,
 h1,
-.np-text-title-screen {
+.np-text-title-screen,
+.wds-text-title-screen {
   &:extend(.wds-text-title-screen);
   margin-bottom: initial;
 }
 
-/* DEPRECATED: use .np-text-title-section instead */
+/* DEPRECATED: use `.wds-text-title-section` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h2,
 .title-2,
 h2,
-.np-text-title-section {
+.np-text-title-section,
+.wds-text-title-section {
   &:extend(.wds-text-title-section);
   margin-bottom: initial;
 }
 
-/* DEPRECATED: use .np-text-title-subsection instead */
+/* DEPRECATED: use `.wds-text-title-subsection` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h3,
 .title-3,
 h3,
-.np-text-title-subsection {
+.np-text-title-subsection,
+.wds-text-title-subsection {
   &:extend(.wds-text-title-subsection);
   margin-bottom: initial;
 }
 
-/* DEPRECATED: use .np-text-title-body instead */
+/* DEPRECATED: use `.wds-text-title-body` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h4,
 .title-4,
 h4,
-.np-text-title-body {
+.np-text-title-body,
+.wds-text-title-body {
   &:extend(.wds-text-title-body);
 }
 
-/* DEPRECATED: use .np-text-title-group instead */
+/* DEPRECATED: use `.wds-text-title-group` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h5,
 .h6,
 .title-5,
 h5,
 h6,
-.np-text-title-group {
+.np-text-title-group,
+.wds-text-title-group{
   &:extend(.wds-text-title-group);
 }
 
-/* DEPRECATED: use .np-text-title-body instead */
+/* DEPRECATED: use `.wds-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
+// DEPRECATED: use `.wds-text-body-default` instead
 .tiny {
   color: var(--color-content-secondary);
 }
 
 // BODY
 
-/* DEPRECATED: use .np-text-body-default instead */
+/* DEPRECATED: use `.wds-text-body-default` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
@@ -115,36 +120,40 @@ h6,
 .tiny,
 body,
 small,
-.np-text-body-default {
+.np-text-body-default,
+.wds-text-body-default {
   &:extend(.wds-text-body-default);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-default-bold instead */
+/* DEPRECATED: use `.wds-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 {
+.np-text-body-default-bold,
+.wds-text-body-default-bold {
   &:extend(.wds-text-body-default-bold);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-large instead  */
+/* DEPRECATED: use `.wds-text-body-large` instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
 .value,
-.np-text-body-large {
+.np-text-body-large,
+.wds-text-body-large {
   &:extend(.wds-text-body-large);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use np-text-body-large-bold instead */
+/* DEPRECATED: use `.wds-text-body-large-bold` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
-.np-text-body-large-bold {
+.np-text-body-large-bold,
+.wds-text-body-large-bold {
   &:extend(.wds-text-body-large-bold);
   .np-text-hyphenated;
 }
@@ -173,19 +182,23 @@ a,
 // DISPLAY
 
 /* DEPRECATED: use .wds-text-display-number-small instead */
-.np-text-display-number {
+.np-text-display-number,
+.wds-text-display-number {
   &:extend(.wds-text-display-number);
 }
 
-.np-text-display-number-small {
+.np-text-display-number-small,
+.wds-text-display-number-small {
   &:extend(.wds-text-display-number-small);
 }
 
-.np-text-display-number-medium {
+.np-text-display-number-medium,
+.wds-text-display-number-medium {
   &:extend(.wds-text-display-number-medium);
 }
 
-.np-text-display-number-large {
+.np-text-display-number-large,
+.wds-text-display-number-large {
   &:extend(.wds-text-display-number-large);
 }
 
@@ -215,15 +228,18 @@ a,
 }
 
 .np-text-display-extra-large,
-.np-text-display-large {
+.np-text-display-large,
+.wds-text-display-large {
   &:extend(.wds-text-display-large);
 }
 
-.np-text-display-medium {
+.np-text-display-medium,
+.wds-text-display-medium {
   &:extend(.wds-text-display-medium);
 }
 
-.np-text-display-small {
+.np-text-display-small,
+.wds-text-display-small {
   &:extend(.wds-text-display-small);
 }
 

package/src/less/decision.less

@@ -18,11 +18,11 @@
   }
 
   &__title {
-    .np-text-title-body();
+    .wds-text-title-body();
   }
 
   &__content {
-    .np-text-body-default;
+    .wds-text-body-default;
 
     margin-top: var(--size-4);
   }

package/src/less/dropdowns.less

@@ -1,4 +1,4 @@
-@import (reference)  "../variables/neptune-tokens.less";
+@import (reference) "../variables/neptune-tokens.less";
 @import (reference) "../variables/legacy-variables.less";
 @import (reference) "../less/core/_typography.less";
 @import (reference) "./mixins/_border-radius.less";
@@ -30,7 +30,7 @@
 
   margin: 0; // override default ul
   list-style: none;
-  .np-text-body-default;
+  .wds-text-body-default;
   .text-align(left); // Ensures proper alignment if parent has it changed (e.g., modal footer)
 
   background-color: var(--color-background-screen);
@@ -74,7 +74,7 @@
     padding: var(--dropdown-link-padding);
     clear: both;
     border-radius: @border-radius-base;
-    .np-text-body-default;
+    .wds-text-body-default;
 
     color: var(--color-content-primary);
     white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -174,8 +174,9 @@
     color: inherit;
   }
 
-  .np-text-body-default,
   .small,
+  .np-text-body-default,
+  .wds-text-body-default,
   .secondary {
     color: @color-navy-content-secondary;
   }
@@ -313,7 +314,7 @@
   color: var(--color-content-secondary);
   white-space: nowrap; // as with > li > a
 
-  .np-text-title-group();
+  .wds-text-title-group();
 }
 
 // Backdrop to catch body clicks on mobile, etc.

package/src/less/droppable.less

@@ -4,7 +4,7 @@
 
 .droppable {
   position: relative;
-  .np-text-body-large;
+  .wds-text-body-large;
 
   text-align: center;
   border: 1px solid var(--color-interactive-secondary);
@@ -74,7 +74,7 @@
     }
     .circle {
       background-color: var(--color-contrast);
-      color: var(--color-content-primary)!important;
+      color: var(--color-content-primary) !important;
     }
   }
 }
@@ -136,7 +136,7 @@
 
   .np-theme-personal & {
     // is a hex code because can't have transparency
-    background-color: #E1E4DF;
+    background-color: #e1e4df;
     color: var(--color-content-primary);
   }
 
@@ -147,7 +147,7 @@
 
   .np-theme-personal--forest-green & {
     // is a hex code because can't have transparency
-    background-color: #455C35;
+    background-color: #455c35;
   }
 }
 

package/src/less/footer.less

@@ -3,7 +3,7 @@
 
 .footer {
   background-color: var(--color-background-neutral);
-  .np-text-body-default;
+  .wds-text-body-default;
 
   padding-top: calc(var(--size-8) * 10);
   padding-bottom: calc(var(--size-8) * 10);
@@ -21,7 +21,7 @@
   .footer-link,
   .link-icon {
     color: var(--color-content-secondary);
-    .np-text-body-default;
+    .wds-text-body-default;
 
     &:hover,
     &:active,
@@ -102,7 +102,8 @@
 
     .tiny,
     .body-3,
-    .np-text-body-default {
+    .np-text-body-default,
+    .wds-text-body-default {
       color: @color-navy-content-primary;
     }
   }

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
@@ -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();
 }
 
@@ -145,7 +145,7 @@ output {
     var(--input-padding),
     @input-border-radius
   );
-  .np-text-body-large;
+  .wds-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,
@@ -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] & {
@@ -380,7 +380,7 @@ input[type="password"] {
   );
   font-size: 14px;
   line-height: 24px;
-  .np-text-body-default();
+  .wds-text-body-default();
 }
 
 .form-group-sm,
@@ -418,7 +418,7 @@ input[type="password"] {
     var(--input-padding-large);
     @input-border-radius-large
   );
-  .np-text-body-large;
+  .wds-text-body-large;
 }
 
 .form-group-lg {
@@ -533,7 +533,9 @@ 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;
@@ -701,8 +703,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);
     }
@@ -788,7 +790,7 @@ input[type="password"] {
   }
 }
 
-@import 'checkbox-radio.less';
+@import "checkbox-radio.less";
 
 .input-group .input-group-btn + input {
   .border(left, 0, solid, transparent);
@@ -826,7 +828,7 @@ input[type="password"] {
 
   .margin(right, -6px);
 
-  [class*='col-'] {
+  [class*="col-"] {
     .padding(left, 6px);
 
     .padding(right, 6px);
@@ -834,7 +836,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 {
@@ -844,7 +846,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,
@@ -855,7 +857,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,
@@ -866,7 +868,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,
@@ -895,7 +897,9 @@ 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);
@@ -926,7 +930,8 @@ input[type="password"] {
       small,
       .small,
       .body-2,
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         display: block;
         color: var(--color-content-secondary);
       }
@@ -1021,7 +1026,7 @@ input[type="password"] {
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
-  .np-text-body-large;
+  .wds-text-body-large;
   display: block;
   width: 100%;
   color: var(--color-content-tertiary);
@@ -1125,26 +1130,32 @@ 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);
     }
   }
@@ -1153,7 +1164,9 @@ 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,
@@ -1170,7 +1183,7 @@ input[type="password"] {
   }
 
   .form-group .np-upload-input label {
-      margin-bottom: 0;
+    margin-bottom: 0;
   }
 
   .form-group .alert:before,

package/src/less/input-groups.less

@@ -64,7 +64,7 @@
   > .input-group-btn .btn {
     .input-lg();
 
-    .np-text-title-subsection();
+    .wds-text-title-subsection();
 
     margin-bottom: 0;
   }
@@ -246,7 +246,7 @@
 }
 
 // inputs focus and hover states (not disabled)
-.input-group:hover:not(.disabled,:disabled) {
+.input-group:hover:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -255,11 +255,11 @@
   }
 }
 
-.form-control:hover:not(.disabled,:disabled) {
+.form-control:hover:not(.disabled, :disabled) {
   border-color: var(--color-interactive-secondary-hover);
 }
 
-.input-group:focus-within:not(.disabled,:disabled) {
+.input-group:focus-within:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -272,7 +272,7 @@
   }
 }
 
-.form-control:focus-within:not(.disabled,:disabled) {
+.form-control:focus-within:not(.disabled, :disabled) {
   border-color: var(--color-interactive-accent);
 
   .np-theme-personal & {

package/src/less/list-group.less

@@ -61,7 +61,7 @@
 
 .list-group-item-heading {
   margin-bottom: 0;
-  .np-text-title-group;
+  .wds-text-title-group;
 
   color: var(--color-content-primary);
 }
@@ -200,8 +200,12 @@ a.list-group-item {
 }
 
 @keyframes listSlideOver {
-  0% { transform: translateX(100vw); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @media (max-width: @screen-sm-max) {
@@ -250,7 +254,6 @@ a.list-group-item {
     }
 
     .list-group-item.active .collapse .well {
-
       // Annoying but makes sure the last content is visible in iOS safari
 
       padding-bottom: 72px;

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

@@ -22,6 +22,9 @@
   &.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,
@@ -33,7 +36,10 @@
   .title-3,
   .np-text-title-screen,
   .np-text-title-section,
-  .np-text-title-subsection {
+  .np-text-title-subsection,
+  .wds-text-title-screen,
+  .wds-text-title-section,
+  .wds-text-title-subsection {
     color: @large-color !important;
   }
 }

package/src/less/popovers.less

@@ -24,7 +24,7 @@
   // So reset our font and text properties to avoid inheriting weird values.
   .reset-text();
 
-  .np-text-body-default;
+  .wds-text-body-default;
 
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -221,7 +221,7 @@
   margin: 0; // reset heading margin
   padding: 0;
 
-  .np-text-title-body();
+  .wds-text-title-body();
 
   background-color: var(--color-background-screen);
   border-bottom: 0;
@@ -232,7 +232,7 @@
 .popover-content {
   padding: 0;
 
-  .np-text-body-default;
+  .wds-text-body-default;
 
   color: var(--color-content-secondary);
 }

package/src/less/sequences.less

@@ -85,6 +85,10 @@
     .h2,
     .h3,
     .h4,
+    .wds-text-title-screen,
+    .wds-text-title-section,
+    .wds-text-title-subsection,
+    .wds-text-title-body,
     .btn-toolbar {
       margin-bottom: 16px;
     }
@@ -186,7 +190,8 @@
 
     .small,
     .body-2,
-    .np-text-body-default {
+    .np-text-body-default,
+    .wds-text-body-default {
       color: var(--color-content-secondary);
     }
 
@@ -216,7 +221,7 @@
 
   > .active {
     &::before {
-      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
+      border-width: (@sequence-pip-size / 2); // TODO sequence-line-width?
     }
 
     ~ li::before {

package/src/less/tooltip.less

@@ -50,7 +50,7 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  .np-text-body-default;
+  .wds-text-body-default;
 
   max-width: @tooltip-max-width;
   min-width: 120px;