@transferwise/neptune-css 0.0.0-experimental-cb358e4 → 0.0.0-experimental-a21d52d

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-cb358e4",
+  "version": "0.0.0-experimental-a21d52d",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "0.0.0-experimental-6e115c5"
+    "@transferwise/neptune-tokens": "^8.26.0"
   },
   "devDependencies": {
     "@transferwise/less-config": "3.2.0",

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

@@ -76,11 +76,6 @@
   .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/badge.less

@@ -7,9 +7,9 @@
   min-width: var(--size-16);
   padding: 5px var(--size-8);
   font-size: 10px;
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   color: #fff;
-  line-height: var(--wds-line-height-title-section);
+  line-height: var(--line-height-control);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;

package/src/less/button-groups.less

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

package/src/less/buttons.less

@@ -8,7 +8,7 @@
 @import (reference) "./ring.less";
 
 .btn {
-  .wds-text-body-large-bold;
+  .np-text-body-large-bold;
 
   display: inline-block;
   margin-bottom: 0;
@@ -22,11 +22,11 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-bottom: 10px;
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
 
   .button-size(
     var(--btn-padding);
-    var(--wds-font-size-body-large);
+    var(--font-size-16);
     var(--line-height-24);
     var(--btn-radius-base);
     var(--btn-height);
@@ -475,7 +475,7 @@
 .navbar .btn {
   .button-size(
     var(--btn-sm-padding);
-    var(--wds-font-size-body);
+    var(--font-size-14);
     var(--line-height-22);
     var(--btn-sm-radius-base);
     var(--btn-sm-height);
@@ -512,7 +512,7 @@
   .navbar-collapse .btn {
     .button-size(
       var(--btn-padding);
-      var(--wds-font-size-body-large);
+      var(--font-size-16);
       var(--line-height-24);
       var(--border-radius-base);
       var(--btn-height);
@@ -547,7 +547,7 @@ input[type="button"] {
 
 // @TODO Deprecate / Remove
 .btn-input {
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-regular);
   .padding(left, @padding-base-horizontal);
 
   .padding(right, @padding-base-horizontal);
@@ -584,7 +584,7 @@ input[type="button"] {
 
     &.btn-addon,
     &.btn-input-inverse {
-      font-weight: var(--wds-font-weight-title-body);
+      font-weight: var(--font-weight-semi-bold);
     }
   }
 }

package/src/less/core/_fonts.less

@@ -1,9 +1,77 @@
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 
-@import "fonts/_fonts-base";
-@import "fonts/_fonts-ar";
-@import "fonts/_fonts-he";
-@import "fonts/_fonts-ja";
-@import "fonts/_fonts-ko";
-@import "fonts/_fonts-th";
-@import "fonts/_fonts-zh";
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-cyrillic-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-greek-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-greek-ext-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-latin-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9,
+    U+20AB;
+}
+
+@font-face {
+  font-family: "Wise Sans";
+  font-style: normal;
+  font-display: swap;
+  src: url("../fonts/WiseSans-Heavy.woff2") format("woff2");
+}

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 {