@transferwise/neptune-css 14.3.9 → 14.3.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.3.9",
+  "version": "14.3.11",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -53,5 +53,5 @@
   "bin": {
     "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
   },
-  "gitHead": "56585c52740f510aed55b282a9e76527b0d88760"
+  "gitHead": "1e58bbd980b270ca3824ed4434365fdd1208b4a1"
 }

package/src/less/buttons.less

@@ -27,16 +27,13 @@
     var(--btn-padding);
     var(--font-size-16);
     var(--line-height-24);
-    @border-radius-base;
+    var(--btn-radius-base);
     @btn-height
   );
 
   .np-theme-personal & {
-    .button-size(
-      var(--btn-padding);
-      @btn-font-size;
-      @btn-line-height
-    );
+    font-size: @btn-font-size;
+    line-height: @btn-line-height;
   }
 
   user-select: none;
@@ -431,16 +428,13 @@
     var(--btn-lg-padding);
     var(--font-size-18);
     var(--line-height-28);
-    @border-radius-large;
+    var(--btn-lg-radius-base);
     @btn-lg-height
   );
 
   .np-theme-personal & {
-    .button-size(
-      var(--btn-lg-padding);
-      @btn-lg-font-size;
-      @btn-lg-line-height
-    );
+    font-size: @btn-lg-font-size;
+    line-height: @btn-lg-line-height;
   }
 
   .btn-loader {
@@ -454,16 +448,13 @@
     var(--btn-sm-padding);
     var(--font-size-14);
     var(--line-height-22);
-    @border-radius-small;
+    var(--btn-sm-radius-base);
     @btn-sm-height
   );
 
   .np-theme-personal & {
-    .button-size(
-      var(--btn-sm-padding);
-      @btn-sm-font-size;
-      @btn-sm-line-height
-    );
+    font-size: @btn-sm-font-size;
+    line-height: @btn-sm-line-height;
   }
 }
 
@@ -472,16 +463,13 @@
     var(--btn-xs-padding);
     var(--font-size-12);
     var(--line-height-20);
-    @border-radius-small;
+    var(--btn-sm-radius-base);
     @btn-xs-height
   );
 
   .np-theme-personal & {
-    .button-size(
-      var(--btn-xs-padding);
-      @btn-xs-font-size;
-      @btn-xs-line-height
-    );
+    font-size: @btn-xs-font-size;
+    line-height: @btn-xs-line-height;
 
     .btn-loader {
       margin-left: calc(var(--padding-x-small) / 2) !important;
@@ -497,16 +485,13 @@
       var(--btn-padding);
       var(--font-size-16);
       var(--line-height-24);
-      @border-radius-base;
+      var(border-radius-base);
       @btn-height
     );
 
     .np-theme-personal & {
-      .button-size(
-        var(--btn-padding);
-        @btn-font-size;
-        @btn-line-height
-      );
+      font-size: @btn-font-size;
+      line-height: @btn-line-height;
 
       max-height: @btn-height;
     }
@@ -559,15 +544,6 @@ input[type="button"] {
     color: var(--color-content-accent);
   }
 
-  .form-control-placeholder {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;
-    width: 100%;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-content-primary);
-  }
-
   &.btn-sm {
     .padding(left, 12px);
 

package/src/less/core/_fonts.less

@@ -1,43 +1,66 @@
+/* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 @font-face {
-  font-weight: var(--font-weight-light);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-300.woff2") format("woff2");
+  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-weight: var(--font-weight-regular);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-400.woff2") format("woff2");
+  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-weight: var(--font-weight-medium);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-500.woff2") format("woff2");
+  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-weight: var(--font-weight-semi-bold);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-600.woff2") format("woff2");
+  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-weight: var(--font-weight-bold);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-800.woff2") format("woff2");
+  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-weight: var(--font-weight-black);
   font-family: Inter;
-  src: url("../fonts/inter-latin_cyrillic-900.woff2") format("woff2");
+  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 {

package/src/less/core/_scaffolding.less

@@ -22,13 +22,16 @@
   --btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal calc(@btn-sm-padding-vertical - 2px);
   --btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal calc(@btn-lg-padding-vertical - 2px);
   --input-padding: @padding-large-vertical @padding-base-horizontal calc(@padding-large-vertical - 2px);
-  --input-padding-small: calc(@padding-small-vertical + 1px) @padding-small-horizontal calc(@padding-small-vertical - 1px);
-  --input-padding-large: calc(@padding-large-vertical + 1px) @padding-large-horizontal calc(@padding-large-vertical - 1px);
+  --input-padding-small: @padding-small-vertical @padding-small-horizontal calc(@padding-small-vertical - 2px);
+  --input-padding-large: @padding-large-vertical @padding-large-horizontal calc(@padding-large-vertical - 2px);
   --input-group-addon-sm-padding: calc(@padding-small-vertical - 1px) @padding-small-horizontal;
   --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal calc(@padding-large-vertical - 2px);
   --dropdown-link-padding: calc(@padding-large-vertical + 1px) @padding-large-horizontal calc(@padding-large-vertical - 1px);
+  --btn-radius-base: @border-radius-base;
+  --btn-sm-radius-base: @border-radius-small;
+  --btn-lg-radius-base: @border-radius-large;
 }
-// temp change 1
+
 .np-theme-light,
 .np-theme-dark,
 .np-theme-navy {
@@ -55,6 +58,9 @@
   --input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
   --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
   --dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
+  --btn-radius-base: 9999px;
+  --btn-sm-radius-base: var(--btn-radius-base);
+  --btn-lg-radius-base: var(--btn-radius-base);
 
   color: var(--color-content-secondary);
   background-color: var(--color-background-screen);

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

@@ -1001,9 +1001,12 @@ input[type="password"] {
 }
 
 .form-control-placeholder {
-  color: var(--color-content-primary);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  .np-text-body-large;
+  display: block;
+  width: 100%;
+  color: var(--color-content-tertiary);
 }
 
 .np-theme-personal {