@transferwise/neptune-css 14.27.1 → 14.28.0

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

@@ -73,44 +73,32 @@
 }
 
 @media (--screen-lg) {
-  .text-lg-left {
-    .text-align(left);
-  }
-
-  .text-lg-right {
-    .text-align(right);
-  }
-
-  .text-lg-center {
-    text-align: center;
-  }
-
-  .text-lg-justify {
-    text-align: justify;
-  }
-
-  .text-lg-nowrap {
-    white-space: nowrap;
-  }
-}
-
-@media (--screen-xl) {
+  .text-lg-left,
+  /// @deprecated
   .text-xl-left {
     .text-align(left);
   }
 
+  .text-lg-right,
+  /// @deprecated
   .text-xl-right {
     .text-align(right);
   }
 
+  .text-lg-center,
+  /// @deprecated
   .text-xl-center {
     text-align: center;
   }
 
+  .text-lg-justify,
+  /// @deprecated
   .text-xl-justify {
     text-align: justify;
   }
 
+  .text-lg-nowrap,
+  /// @deprecated
   .text-xl-nowrap {
     white-space: nowrap;
   }

package/src/less/core/_typography.less

@@ -8,7 +8,17 @@
 
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
 h1,
 h2,
 h3,
@@ -114,8 +124,12 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
+.body-2,
+.body-3,
+.small,
+.tiny,
+body,
+small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -139,7 +153,8 @@ body, small,
 
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
+.body-1,
+.value,
 .np-text-body-large {
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-16);
@@ -204,8 +219,11 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: var(--font-family-display);
-  font-synthesis: none;
+  &,
+  &--forced {
+    font-family: var(--font-family-display);
+    font-synthesis: none;
+  }
 
   :lang(ja) &,
   :lang(th) &,
@@ -216,8 +234,12 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
     font-family: var(--font-family-regular);
+    line-height: var(--line-height-title);
   }
 }
 

package/src/less/flex.less

@@ -14,9 +14,7 @@
 
 @media (--screen-lg) {
   .flex-properties(--lg);
-}
-
-@media (--screen-xl) {
+  /// @deprecated
   .flex-properties(--xl);
 }
 

package/src/less/neptune.bundle.less

@@ -1,3 +1,4 @@
+@import "@transferwise/neptune-tokens/breakpoints.less";
 @import "@transferwise/neptune-tokens/tokens.css";
 @import '@transferwise/neptune-tokens/themes/personal/tokens.css';
 @import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';

package/src/less/popovers.less

@@ -335,13 +335,13 @@
   text-align: center;
   padding: var(--size-24);
 
-  @media (max-width: @screen-sm-min) {
+  @media (--screen-xs-max) {
     width: auto !important;
     padding: var(--size-24) !important;
     margin: var(--size-16) !important;
   }
 
-  @media (min-width: (@screen-sm-min - 10px)) and (max-width: @screen-lg-min) {
+  @media (min-width: (@screen-sm-min - 10px)) and (--screen-md-max) {
     width: 540px !important;
     padding: 28px var(--size-32) !important;
     margin: var(--size-32) auto !important;
@@ -351,18 +351,18 @@
     font-size: var(--font-size-16);
     line-height: var(--line-height-title);
 
-    @media (min-width: @screen-md-min) {
+    @media (--screen-md) {
       font-size: var(--font-size-20);
       line-height: var(--line-height-title);
     }
   }
 
   .popover-image {
-    @media (max-width: @screen-xs-min) {
+    @media (--screen-400-zoom) {
       width: 80%;
     }
 
-    @media (min-width: @screen-xs-min) and (max-width: @screen-lg-min) {
+    @media (--screen-xs) and (--screen-md-max) {
       width: 60%;
     }
 
@@ -372,7 +372,7 @@
   }
 }
 
-@media (max-width: @screen-lg-min) {
+@media (--screen-md-max) {
   .popover-promotion {
     position: absolute !important;
   }

package/src/less/utilities.less

@@ -63,28 +63,20 @@
 }
 
 @media (--screen-lg) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-xl) {
+  .pull-lg-left,
+  /// @deprecated
   .pull-xl-left {
     .float(left) !important;
   }
 
+  .pull-lg-right,
+  /// @deprecated
   .pull-xl-right {
     .float(right) !important;
   }
 
+  .pull-lg-none,
+  /// @deprecated
   .pull-xl-none {
     float: none !important;
   }

package/src/less/wells.less

@@ -28,10 +28,8 @@
   .sized-well(--screen-md);
 }
 
-.well-lg {
-  .sized-well(--screen-lg);
-}
-
+.well-lg,
+/// deprecated
 .well-xl {
-  .sized-well(--screen-xl);
+  .sized-well(--screen-lg);
 }

package/src/props/custom-media.css

@@ -1,11 +1 @@
-@custom-media --screen-xs (min-width: 480px);
-@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
-@custom-media --screen-sm (min-width: 576px);
-@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
-@custom-media --screen-md (min-width: 768px);
-@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
-@custom-media --screen-lg (min-width: 992px);
-@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
-@custom-media --screen-xl (min-width: 1200px);
-
-@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */
+@import "@transferwise/neptune-tokens/breakpoints.css";

package/src/variables/legacy-variables.less

@@ -2,6 +2,9 @@
 // Variables
 // --------------------------------------------------
 
+//== Media queries breakpoints
+@import "@transferwise/neptune-tokens/breakpoints.less";
+
 //== Colors
 // Deprecated use Neptune Colors https://transferwise.github.io/neptune-web/styles/tokens/Colors
 //
@@ -588,52 +591,6 @@
 @zindex-mobile-nav: 1060;
 
 
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  576px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  768px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  992px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-
-// Extra Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-xl:                  1200px;
-@screen-xl-min:              @screen-xl;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-@screen-lg-max:              (@screen-xl-min - 1);
-
-
 //== Grid system
 //
 //## Define your custom responsive grid.
@@ -1296,4 +1253,4 @@
 @decision-focus-transition: @transition-duration;
 @decision-padding-md: 12px;
 @decision-padding-lg: 24px;
-@decision-border: 1px solid @brand-smoke-plus-10;
+@decision-border: 1px solid @brand-smoke-plus-10;