@transferwise/neptune-css 0.0.0-experimental-4734916 → 0.0.0-experimental-0ad6041

package/dist/css/neptune-core.css

@@ -126,54 +126,6 @@
   src: url(../fonts/rubik/rubik-latin-ext-wght-normal.woff2) format("woff2");
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
-@font-face {
-  font-family: "Rubik";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 900;
-  src: url(../fonts/rubik/rubik-cyrillic-900-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 900;
-  src: url(../fonts/rubik/rubik-cyrillic-ext-900-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 300;
-  src: url(../fonts/rubik/rubik-body-cyrillic-330-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 300;
-  src: url(../fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url(../fonts/rubik/rubik-body-cyrillic-600-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url(../fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
 @font-face {
   font-family: "Noto Sans Hebrew";
   font-style: normal;

package/dist/css/neptune.css

@@ -153,7 +153,8 @@
   --font-family-display: 'Wise Sans', Inter, sans-serif;
 }
 
-:root {
+:root,
+:lang(en) {
   --wds-font-family-display: 'Wise Sans', Inter, Rubik, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', sans-serif;
   --wds-font-family-display-number: 'Wise Sans', Inter, sans-serif;
   --wds-font-family-regular: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
@@ -1830,7 +1831,8 @@
  */
 
 
-:root {
+:root,
+:lang(en) {
   --wds-font-family-display: 'Wise Sans', Inter, Rubik, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', sans-serif;
   --wds-font-family-display-number: 'Wise Sans', Inter, sans-serif;
   --wds-font-family-regular: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
@@ -2901,6 +2903,7 @@ small,
   line-height: var(--wds-line-height-nav);
   letter-spacing: var(--wds-letter-spacing-nav);
 }
+/* Deprecated: use .wds-text-display-number-small instead */
 .wds-text-display-number,
 .np-text-display-number,
 .wds-text-display-number,
@@ -3039,54 +3042,6 @@ small,
   src: url(../fonts/rubik/rubik-latin-ext-wght-normal.woff2) format("woff2");
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
-@font-face {
-  font-family: "Rubik";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 900;
-  src: url(../fonts/rubik/rubik-cyrillic-900-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 900;
-  src: url(../fonts/rubik/rubik-cyrillic-ext-900-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 300;
-  src: url(../fonts/rubik/rubik-body-cyrillic-330-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 300;
-  src: url(../fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url(../fonts/rubik/rubik-body-cyrillic-600-normal.woff2) format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Rubik Body";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url(../fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
 @font-face {
   font-family: "Noto Sans Hebrew";
   font-style: normal;

package/dist/props/neptune-tokens.css

@@ -153,7 +153,8 @@
   --font-family-display: 'Wise Sans', Inter, sans-serif;
 }
 
-:root {
+:root,
+:lang(en) {
   --wds-font-family-display: 'Wise Sans', Inter, Rubik, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', sans-serif;
   --wds-font-family-display-number: 'Wise Sans', Inter, sans-serif;
   --wds-font-family-regular: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-4734916",
+  "version": "0.0.0-experimental-0ad6041",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.26.0"
+    "@transferwise/neptune-tokens": "0.0.0-experimental-75ee14d"
   },
   "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/_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 {