@transferwise/neptune-css 14.9.1 → 14.9.2

package/dist/css/flex.css

@@ -205,7 +205,7 @@
 .visible-xl-inline {
   display: none !important;
 }
-@media not all and (min-width: 576px) {
+@media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
   }
@@ -228,7 +228,7 @@
     display: inline-flex;
   }
 }
-@media (min-width: 576px) and not all and (min-width: 768px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .hidden-sm {
     display: none !important;
   }
@@ -251,7 +251,7 @@
     display: inline-flex;
   }
 }
-@media (min-width: 768px) and not all and (min-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-md {
     display: none !important;
   }
@@ -274,7 +274,7 @@
     display: inline-flex;
   }
 }
-@media (min-width: 992px) and not all and (min-width: 1200px) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-lg {
     display: none !important;
   }

package/dist/css/neptune-addons.css

@@ -1242,7 +1242,7 @@ html:not([dir="rtl"]) .p-x-panel {
 .visible-xl-inline {
   display: none !important;
 }
-@media not all and (min-width: 576px) {
+@media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
   }
@@ -1265,7 +1265,7 @@ html:not([dir="rtl"]) .p-x-panel {
     display: inline-flex;
   }
 }
-@media (min-width: 576px) and not all and (min-width: 768px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .hidden-sm {
     display: none !important;
   }
@@ -1288,7 +1288,7 @@ html:not([dir="rtl"]) .p-x-panel {
     display: inline-flex;
   }
 }
-@media (min-width: 768px) and not all and (min-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-md {
     display: none !important;
   }
@@ -1311,7 +1311,7 @@ html:not([dir="rtl"]) .p-x-panel {
     display: inline-flex;
   }
 }
-@media (min-width: 992px) and not all and (min-width: 1200px) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-lg {
     display: none !important;
   }

package/dist/css/neptune-core.css

@@ -335,7 +335,7 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -356,15 +356,13 @@ summary {
 .np-theme-navy {
   --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
   font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   line-height: 1.5;
   line-height: var(--line-height-body);
 }
 .np-theme-personal {
-  --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
-  font-family: "Inter", sans-serif, helvetica, arial, sans-serif;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
+  font-family: "Inter", Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -396,7 +394,6 @@ summary {
 html {
   font-size: 16px;
   font-size: var(--base-font-size);
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   color: #5d7079;

package/dist/css/neptune.css

@@ -1479,7 +1479,7 @@ summary {
 
 :root {
   --base-font-size: 16px;
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -1501,16 +1501,14 @@ summary {
 .np-theme-navy {
   --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
   font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   line-height: 1.5;
   line-height: var(--line-height-body);
 }
 
 .np-theme-personal {
-  --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
-  font-family: "Inter", sans-serif, helvetica, arial, sans-serif;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
+  font-family: "Inter", Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -1543,7 +1541,6 @@ summary {
 html {
   font-size: 16px;
   font-size: var(--base-font-size);
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   color: #5d7079;
@@ -4128,7 +4125,7 @@ html:not([dir="rtl"]) .p-x-panel {
   display: none !important;
 }
 
-@media not all and (min-width: 576px) {
+@media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
   }
@@ -4153,7 +4150,7 @@ html:not([dir="rtl"]) .p-x-panel {
   }
 }
 
-@media (min-width: 576px) and not all and (min-width: 768px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .hidden-sm {
     display: none !important;
   }
@@ -4178,7 +4175,7 @@ html:not([dir="rtl"]) .p-x-panel {
   }
 }
 
-@media (min-width: 768px) and not all and (min-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-md {
     display: none !important;
   }
@@ -4203,7 +4200,7 @@ html:not([dir="rtl"]) .p-x-panel {
   }
 }
 
-@media (min-width: 992px) and not all and (min-width: 1200px) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-lg {
     display: none !important;
   }
@@ -11325,7 +11322,6 @@ li > a > .currency-flag:first-child {
   outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: 0;
-  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
   --ring-outline-offset: 0;
 }
@@ -19496,7 +19492,6 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   z-index: 1060;
   width: 276px;
   padding: 18px 24px;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
@@ -22432,7 +22427,6 @@ table col[class*="col-"] {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;

package/dist/css/ring.css

@@ -11,8 +11,6 @@
   outline: none;
 }
 .focus-ring:focus-visible {
-  outline: #37517e solid 2px;
-  outline: var(--color-content-primary) solid 2px;
   outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: 2px;
@@ -40,8 +38,6 @@ dialog:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
-  outline: #37517e solid 2px;
-  outline: var(--color-content-primary) solid 2px;
   outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: 2px;

package/dist/css/utilities.css

@@ -286,7 +286,7 @@ a.text-inverse:focus {
 .visible-xl-inline {
   display: none !important;
 }
-@media not all and (min-width: 576px) {
+@media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
   }
@@ -309,7 +309,7 @@ a.text-inverse:focus {
     display: inline-flex;
   }
 }
-@media (min-width: 576px) and not all and (min-width: 768px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .hidden-sm {
     display: none !important;
   }
@@ -332,7 +332,7 @@ a.text-inverse:focus {
     display: inline-flex;
   }
 }
-@media (min-width: 768px) and not all and (min-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-md {
     display: none !important;
   }
@@ -355,7 +355,7 @@ a.text-inverse:focus {
     display: inline-flex;
   }
 }
-@media (min-width: 992px) and not all and (min-width: 1200px) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-lg {
     display: none !important;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.9.1",
+  "version": "14.9.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/core/_scaffolding.less

@@ -15,7 +15,7 @@
 :root {
   // page default font size should be set in absolute units (pixels)
   --base-font-size: 16px;
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal calc(@padding-large-vertical - 2px);
   --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
   --btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal calc(@btn-xs-padding-vertical - 2px);
@@ -42,7 +42,7 @@
 }
 
 .np-theme-personal {
-  --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
 
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";

package/src/less/utilities/display.less

@@ -44,7 +44,7 @@
   display: none !important;
 }
 
-@media not all and (--screen-sm) {
+@media (--screen-xs-max) {
   .hidden-xs {
     display: none !important;
   }
@@ -72,7 +72,7 @@
     display: inline-flex;
   }
 
-  @media not all and (--screen-md) {
+  @media (--screen-sm-max) {
     .hidden-sm {
       display: none !important;
     }
@@ -101,7 +101,7 @@
     display: inline-flex;
   }
 
-  @media not all and (--screen-lg) {
+  @media (--screen-md-max) {
     .hidden-md {
       display: none !important;
     }
@@ -130,7 +130,7 @@
     display: inline-flex;
   }
 
-  @media not all and (--screen-xl) {
+  @media (--screen-lg-max) {
     .hidden-lg {
       display: none !important;
     }