@transferwise/neptune-css 14.0.20 → 14.0.21

package/dist/less/legacy-variables.less

@@ -318,6 +318,7 @@
 @btn-height:                     @input-height-base;
 @btn-font-size:                  16px;
 @btn-line-height:                24px;
+@btn-border-width:               1px;
 @btn-padding-horizontal:         24px;
 @btn-padding-vertical:           @padding-large-vertical;
 @btn-padding:                    @btn-padding-vertical @btn-padding-horizontal;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.0.20",
+  "version": "14.0.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -53,5 +53,5 @@
   "bin": {
     "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
   },
-  "gitHead": "b92fad7902b8091064f8e9fa96424d56dc63a2a2"
+  "gitHead": "53c7aa492956f5d330d27a1e76005bb4a42e9b89"
 }

package/src/less/buttons.less

@@ -34,9 +34,7 @@
     .button-size(
       var(--btn-padding);
       @btn-font-size;
-      @btn-line-height;
-      9999px;
-      @btn-height
+      @btn-line-height
     );
   }
 
@@ -426,12 +424,8 @@
     .button-size(
       var(--btn-lg-padding);
       @btn-lg-font-size;
-      @btn-lg-line-height;
-      9999px;
-      @btn-lg-height
+      @btn-lg-line-height
     );
-
-    max-height: @btn-lg-height;
   }
 
   .btn-loader {
@@ -453,12 +447,8 @@
     .button-size(
       var(--btn-sm-padding);
       @btn-sm-font-size;
-      @btn-sm-line-height;
-      9999px;
-      @btn-sm-height
+      @btn-sm-line-height
     );
-
-    max-height: @btn-sm-height;
   }
 }
 
@@ -475,12 +465,13 @@
     .button-size(
       var(--btn-xs-padding);
       @btn-xs-font-size;
-      @btn-xs-line-height;
-      9999px;
-      @btn-xs-height
+      @btn-xs-line-height
     );
-
-    max-height: @btn-xs-height;
+    .btn-loader {
+      margin-left: calc(var(--padding-x-small) / 2) !important;
+      height: @btn-xs-line-height;
+      background-size: @btn-xs-font-size @btn-xs-font-size !important;
+    }
   }
 }
 
@@ -498,9 +489,7 @@
       .button-size(
         var(--btn-padding);
         @btn-font-size;
-        @btn-line-height;
-        9999px;
-        @btn-height
+        @btn-line-height
       );
 
       max-height: @btn-height;
@@ -653,6 +642,9 @@ input[type="button"] {
 .btn-sm {
   .btn-loader {
     background-size: 16px 16px;
+    .np-theme-personal &  {
+      margin-left: calc(var(--padding-small) / 2) !important;
+    }
   }
 }
 

package/src/less/core/_scaffolding.less

@@ -41,10 +41,10 @@
 .np-theme-personal {
   --font-family-regular: "Inter",sans-serif,Helvetica,Arial,sans-serif !important;
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
-  --btn-padding: @btn-padding-vertical @btn-padding-horizontal;
-  --btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal;
-  --btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal;
-  --btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal @btn-lg-padding-vertical;
+  --btn-padding: calc(@btn-padding-vertical - @btn-border-width) @btn-padding-horizontal;
+  --btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
+  --btn-sm-padding: calc(@btn-sm-padding-vertical - @btn-border-width) @btn-sm-padding-horizontal;
+  --btn-lg-padding: calc(@btn-lg-padding-vertical - @btn-border-width) @btn-lg-padding-horizontal;
   --input-padding: @padding-large-vertical @padding-base-horizontal;
   --input-padding-small: @padding-small-vertical @padding-small-horizontal;
   --input-padding-large: @padding-large-vertical @padding-large-horizontal;
@@ -92,8 +92,8 @@ pre {
 }
 
 .np-theme-personal::selection {
-    background-color: var(--color-background-neutral-active);
-    color: var(--color-content-primary);
+  background-color: var(--color-background-neutral-active);
+  color: var(--color-content-primary);
 }
 
 /* DEPRECATED: use `a` tag or .np-text-link-* instead */

package/src/less/mixins/_buttons.less

@@ -55,11 +55,12 @@
   }
 }
 
-.button-size(@padding; @font-size; @line-height; @border-radius; @min-height) {
+.button-size(@padding; @font-size; @line-height; @border-radius: 9999px; @min-height: 0) {
   padding: @padding;
   font-size: @font-size;
   line-height: @line-height;
   border-radius: @border-radius;
+  // TODO: Remove min-height in The Future
   min-height: @min-height;
 
   .dropdown-menu {

package/src/variables/legacy-variables.less

@@ -318,6 +318,7 @@
 @btn-height:                     @input-height-base;
 @btn-font-size:                  16px;
 @btn-line-height:                24px;
+@btn-border-width:               1px;
 @btn-padding-horizontal:         24px;
 @btn-padding-vertical:           @padding-large-vertical;
 @btn-padding:                    @btn-padding-vertical @btn-padding-horizontal;