@transferwise/neptune-css 0.0.0-experimental-2acee4e → 0.0.0-experimental-b089b8c

package/dist/css/utilities.css

@@ -172,11 +172,11 @@
 .rounded-sm {
   border-radius: 2px;
 }
-.img-rounded {
+.rounded {
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
-.img-circle {
+.rounded-full {
   border-radius: 9999px;
   border-radius: var(--radius-full);
 }
@@ -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 (--screen-sm) and not all and (--screen-md) {
+@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 (--screen-md) and not all and (--screen-lg) {
+@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 (--screen-lg) and not all and (--screen-xl) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-lg {
     display: none !important;
   }
@@ -551,9 +551,6 @@ a.text-inverse:focus {
     float: none !important;
   }
 }
-.font-italic {
-  font-style: italic !important;
-}
 .font-weight-normal {
   font-weight: 400 !important;
   font-weight: var(--font-weight-regular) !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-2acee4e",
+  "version": "0.0.0-experimental-b089b8c",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/core/_scaffolding.less

@@ -5,6 +5,7 @@
 @import (reference) "../mixins/_logical-properties.less";
 @import (reference) "../mixins/_links.less";
 @import (reference) "../core/_typography.less";
+@import (reference) "../utilities/border-radius.less";
 @import "../../variables/legacy-variables.less";
 
 /* TODO: Remove utility imports to prevent duplicates */
@@ -336,6 +337,14 @@ video {
   vertical-align: middle;
 }
 
+.img-rounded {
+  .rounded();
+}
+
+.img-circle {
+  .rounded-full();
+}
+
 .disabled,
 :disabled {
   filter: grayscale(1);

package/src/less/core/_typography-utilities.less

@@ -5,7 +5,6 @@
 
 /* TODO: Remove utility imports to prevent duplicates */
 @import "../utilities/color.less";
-@import "../utilities/font-style.less";
 @import "../utilities/font-weight.less";
 @import "../utilities/max-width.less";
 @import "../utilities/overflow-wrap.less";
@@ -15,6 +14,13 @@
 @import "../utilities/text-transform.less";
 @import "../utilities/white-space.less";
 
+/**
+ * @deprecated Obsolete since the brand has turned green.
+ */
+.font-italic {
+  font-style: italic !important;
+}
+
 /**
  * @deprecated Obsolete since the brand has turned green.
  */

package/src/less/neptune.bundle.less

@@ -45,5 +45,7 @@
 @import "./table.less";
 @import "./tooltip.less";
 @import "./tick.less";
-@import "./utilities.less";
 @import "./wells.less";
+
+// Utilities, should always be kept last
+@import (multiple) "./utilities.less";

package/src/less/utilities/border-radius.less

@@ -2,10 +2,10 @@
   border-radius: 2px;
 }
 
-.img-rounded {
+.rounded {
   border-radius: var(--radius-small);
 }
 
-.img-circle {
+.rounded-full {
   border-radius: var(--radius-full);
 }

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;
     }

package/src/less/utilities.less

@@ -13,7 +13,6 @@
 @import "./utilities/flex-grow.less";
 @import "./utilities/flex-wrap.less";
 @import "./utilities/float.less";
-@import "./utilities/font-style.less";
 @import "./utilities/font-weight.less";
 @import "./utilities/gap.less";
 @import "./utilities/justify-content.less";

package/src/less/utilities/font-style.less

@@ -1,3 +0,0 @@
-.font-italic {
-  font-style: italic !important;
-}