@transferwise/neptune-css 12.5.7-beta-356d4e8581.30 → 12.5.8

package/src/less/footer.less

@@ -103,7 +103,7 @@
     }
 
     .tiny,
-    .np-Text {
+    .body-3 {
       color: @color-navy-content-primary;
     }
   }

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

@@ -888,7 +888,7 @@ input[type='checkbox'] {
 
       small,
       .small,
-      .np-Text {
+      .body-2 {
         display: block;
         font-size: var(--font-size-14);
         color: var(--color-content-secondary);

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

@@ -16,18 +16,18 @@
   &.h1,
   &.h2,
   &.h3,
-  &.np-Text-pageTitle,
-  &.np-Text-title,
-  &.np-Text-subTitle,
+  &.title-1,
+  &.title-2,
+  &.title-3,
   h1,
   h2,
   h3,
   .h1,
   .h2,
   .h3,
-  .np-Text-pageTitle,
-  .np-Text-title,
-  .np-Text-subTitle {
+  .title-1,
+  .title-2,
+  .title-3 {
     color: @large-color !important;
   }
 }

package/src/less/sequences.less

@@ -189,7 +189,7 @@
     }
 
     .small,
-    .np-Text {
+    .body-2 {
       color: var(--color-content-secondary);
     }
 

package/src/less/variables/_typography.less

@@ -0,0 +1,25 @@
+// Deprecated legacy variables. Use typography neptune-tokens instead
+
+@font-family-base: "Averta", "Avenir W02", "Avenir", Helvetica, Arial, sans-serif;
+
+@font-weight-base: 500;
+@font-weight-semi-bold: 600;
+@font-weight-bold: 800;
+
+@font-size-xx-large: 2.625rem; // 42px
+@font-size-x-large: 1.75rem; // 28px
+@font-size-large: 1.375rem; // 22px
+@font-size-medium: 1.125rem; // 18px
+@font-size-base: 1rem; // 16px
+@font-size-small: 0.875rem; // 14px
+@font-size-x-small: 0.75rem; // 12px
+
+// We will be revisiting these soon, do not use directly
+/* stylelint-disable number-max-precision */
+@line-height-x-large: 1.1428571429; // 32/28
+@line-height-large: 1.3636363636; // 30/22
+@line-height-medium: 1.3333333333; // 24/18
+@line-height-base: 1.5; // 24/16
+@line-height-small: 1.7142857143; // 24/14
+@line-height-x-small: 2; // 24/12
+/* stylelint-enable number-max-precision */

package/src/less/core/_text.less

@@ -1,120 +0,0 @@
-.np-Text-screenTitle,
-.np-Text-sectionTitle,
-.np-Text-subsectionTitle,
-.np-Text-bodyTitle,
-.np-Text-groupTitle {
-  margin: 0;
-}
-
-.np-Text-screenTitle {
-  margin-bottom: var(--size-8);
-  font-size: var(--font-size-30);
-  letter-spacing: var(--letter-spacing-negative-xl);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--font-line-height-34);
-}
-
-.np-Text-sectionTitle {
-  margin-bottom: var(--size-4);
-  font-size: var(--font-size-26);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: var(--letter-spacing-negative-md);
-  line-height: var(--font-line-height-32);
-}
-
-.np-Text-subsectionTitle {
-  margin-bottom: 2px;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: var(--letter-spacing-negative-md);
-  line-height: var(--font-line-height-28);
-}
-
-.np-Text-bodyTitle {
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: var(--letter-spacing-negative-sm);
-  line-height: var(--font-line-height-18);
-}
-
-.np-Text-groupTitle {
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--letter-spacing-md);
-  line-height: var(--font-line-height-20);
-}
-
-.np-Text-bodyDefault {
-  font-size: var(--font-size-14);
-  line-height: var(--font-line-height-22);
-  letter-spacing: var(--letter-spacing-sm);
-
-  &--bold {
-    font-weight: var(--font-weight-semi-bold);
-  }
-
-  &Large {
-    font-size: var(--font-size-16);
-    letter-spacing: var(--letter-spacing-negative-xs);
-    line-height: var(--font-line-height-24);
-
-    &--bold {
-      font-weight: var(--font-weight-semi-bold);
-    }
-  }
-}
-
-.np-Text-bodyLarge {
-  font-size: var(--font-size-16);
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: var(--font-line-height-24);
-
-  &--bold {
-    font-weight: var(--font-weight-semi-bold);
-  }
-}
-
-.np-Text-link {
-  font-size: var(--font-size-14);
-  line-height: var(--font-line-height-22);
-  letter-spacing: var(--letter-spacing-sm);
-  font-weight: var(--font-weight-semi-bold);
-  text-decoration: underline;
-  color: var(--color-content-accent);
-
-  &:hover,
-  &:focus {
-    color: var(--color-content-accent-hover);
-    text-decoration: underline;
-  }
-
-  &:active {
-    color: var(--color-content-accent-active);
-  }
-
-  &--bold {
-    font-weight: var(--font-weight-semi-bold);
-  }
-
-  &Large {
-    font-size: var(--font-size-16);
-    letter-spacing: var(--letter-spacing-sm);
-    line-height: var(--font-line-height-24);
-    text-decoration: underline;
-
-    &--bold {
-      font-weight: var(--font-weight-semi-bold);
-    }
-  }
-}
-
-.np-Text-nav {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-12);
-  letter-spacing: var(--letter-spacing-lg);
-  line-height: var(--font-line-height-18);
-
-  &--bold {
-    font-weight: var(--font-weight-bold);
-  }
-}