@transferwise/neptune-css 0.0.0-experimental-aabbb4a → 0.0.0-experimental-8b73066

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,7 +14,9 @@
 
 @media (--screen-lg) {
   .flex-properties(--lg);
-  /// @deprecated
+}
+
+@media (--screen-xl) {
   .flex-properties(--xl);
 }
 

package/src/less/neptune.bundle.less

@@ -1,4 +1,3 @@
-@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 (--screen-xs-max) {
+  @media (max-width: @screen-sm-min) {
     width: auto !important;
     padding: var(--size-24) !important;
     margin: var(--size-16) !important;
   }
 
-  @media (min-width: (@screen-sm-min - 10px)) and (--screen-md-max) {
+  @media (min-width: (@screen-sm-min - 10px)) and (max-width: @screen-lg-min) {
     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 (--screen-md) {
+    @media (min-width: @screen-md-min) {
       font-size: var(--font-size-20);
       line-height: var(--line-height-title);
     }
   }
 
   .popover-image {
-    @media (--screen-400-zoom) {
+    @media (max-width: @screen-xs-min) {
       width: 80%;
     }
 
-    @media (--screen-xs) and (--screen-md-max) {
+    @media (min-width: @screen-xs-min) and (max-width: @screen-lg-min) {
       width: 60%;
     }
 
@@ -372,7 +372,7 @@
   }
 }
 
-@media (--screen-md-max) {
+@media (max-width: @screen-lg-min) {
   .popover-promotion {
     position: absolute !important;
   }

package/src/less/utilities.less

@@ -63,20 +63,28 @@
 }
 
 @media (--screen-lg) {
-  .pull-lg-left,
-  /// @deprecated
+  .pull-lg-left {
+    .float(left) !important;
+  }
+
+  .pull-lg-right {
+    .float(right) !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-xl) {
   .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,8 +28,10 @@
   .sized-well(--screen-md);
 }
 
-.well-lg,
-/// deprecated
-.well-xl {
+.well-lg {
   .sized-well(--screen-lg);
 }
+
+.well-xl {
+  .sized-well(--screen-xl);
+}

package/src/props/custom-media.css

@@ -1 +1,11 @@
-@import "@transferwise/neptune-tokens/breakpoints.css";
+@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 */

package/src/variables/legacy-variables.less

@@ -2,9 +2,6 @@
 // Variables
 // --------------------------------------------------
 
-//== Media queries breakpoints
-@import "@transferwise/neptune-tokens/breakpoints.less";
-
 //== Colors
 // Deprecated use Neptune Colors https://transferwise.github.io/neptune-web/styles/tokens/Colors
 //
@@ -591,6 +588,52 @@
 @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.
@@ -1253,4 +1296,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;