@transferwise/neptune-css 14.9.2 → 14.9.3

package/package.json

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

package/src/less/addons/_display-utilities.less

@@ -0,0 +1,159 @@
+.d-block {
+  display: block !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.visible-xs,
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block,
+.visible-xl,
+.visible-xl-block,
+.visible-xl-inline,
+.visible-xl-inline-block {
+  display: none !important;
+}
+
+.visible-xs,
+.visible-xs-block {
+  @media (--screen-xs-max) {
+    display: block !important;
+  }
+}
+
+.visible-xs-inline {
+  @media (--screen-xs-max) {
+    display: inline !important;
+  }
+}
+
+.visible-xs-inline-block {
+  @media (--screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-sm,
+.visible-sm-block {
+  @media (--screen-sm) and (--screen-sm-max) {
+    display: block !important;
+  }
+}
+
+.visible-sm-inline {
+  @media (--screen-sm) and (--screen-sm-max) {
+    display: inline !important;
+  }
+}
+
+.visible-sm-inline-block {
+  @media (--screen-sm) and (--screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-md,
+.visible-md-block {
+  @media (--screen-md) and (--screen-md-max) {
+    display: block !important;
+  }
+}
+
+.visible-md-inline {
+  @media (--screen-md) and (--screen-md-max) {
+    display: inline !important;
+  }
+}
+
+.visible-md-inline-block {
+  @media (--screen-md) and (--screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-lg,
+.visible-lg-block {
+  @media (--screen-lg) and (--screen-lg-max) {
+    display: block !important;
+  }
+}
+
+.visible-lg-inline {
+  @media (--screen-lg) and (--screen-lg-max) {
+    display: inline !important;
+  }
+}
+
+.visible-lg-inline-block {
+  @media (--screen-lg) and (--screen-lg-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-xl,
+.visible-xl-block {
+  @media (--screen-xl) {
+    display: block !important;
+  }
+}
+
+.visible-xl-inline {
+  @media (--screen-xl) {
+    display: inline !important;
+  }
+}
+
+.visible-xl-inline-block {
+  @media (--screen-xl) {
+    display: inline-block !important;
+  }
+}
+
+.hidden-xs {
+  @media (--screen-xs-max) {
+    display: none !important;
+  }
+}
+
+.hidden-sm {
+  @media (--screen-sm) and (--screen-sm-max) {
+    display: none !important;
+  }
+}
+
+.hidden-md {
+  @media (--screen-md) and (--screen-md-max) {
+    display: none !important;
+  }
+}
+
+.hidden-lg {
+  @media (--screen-lg) and (--screen-lg-max) {
+    display: none !important;
+  }
+}
+
+.hidden-xl {
+  @media (--screen-xl) {
+    display: none !important;
+  }
+}
+
+.outline-none {
+  outline: none;
+}

package/src/less/addons/_spacing-utilities.less

@@ -1,14 +1,37 @@
 @import "../mixins/_spacing.less";
 
-@import "../utilities/gap.less";
-@import "../utilities/margin.less";
-@import "../utilities/padding.less";
+.spacing(0, 0);
+.spacing(1, var(--size-8));
+.spacing(2, var(--size-16));
+.spacing(3, var(--size-24));
+.spacing(4, var(--size-32));
+.spacing(5, var(--size-40));
+
+.spacing-vertical(4, var(--size-32));
+.spacing-vertical(5, var(--size-40));
+
+.gap-y-1 {
+  row-gap: var(--size-8);
+}
 
 .responsive-spacing(panel, var(--size-16), var(--size-24), var(--size-32));
 .responsive-spacing-vertical(section-1, var(--size-16), var(--size-24), var(--size-32));
 .responsive-spacing-vertical(section-2, var(--size-32), var(--size-48), var(--size-64));
 .responsive-spacing-vertical(section-3, var(--size-48), var(--size-72), var(--size-96));
 
+.m-x-auto {
+  .margin(right,auto) !important;
+  .margin(left, auto) !important;
+}
+
+.m-r-auto {
+  .margin(right,auto) !important;
+}
+
+.m-l-auto {
+  .margin(left, auto) !important;
+}
+
 .section {
   padding-top: var(--size-48);
   padding-bottom: var(--size-48);

package/src/less/addons/_utilities.less

@@ -0,0 +1,147 @@
+@import (reference)
+  "../../variables/legacy-variables.less";
+@import (reference) "../mixins/_clearfix.less";
+@import (reference) "../mixins/_center-block.less";
+@import (reference) "../mixins/_hide-text.less";
+
+//
+// Utility classes
+// --------------------------------------------------
+
+// Floats
+// -------------------------
+
+.clearfix {
+  .clearfix();
+}
+
+.center-block {
+  .center-block();
+}
+
+.pull-right,
+.pull-xs-right {
+  .float(right) !important;
+}
+
+.pull-left,
+.pull-xs-left {
+  .float(left) !important;
+}
+
+.pull-xs-none {
+  float: none !important;
+}
+
+@media (min-width: @screen-sm-min) {
+  .pull-sm-left {
+    .float(left) !important;
+  }
+
+  .pull-sm-right {
+    .float(right) !important;
+  }
+
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .pull-md-left {
+    .float(left) !important;
+  }
+
+  .pull-md-right {
+    .float(right) !important;
+  }
+
+  .pull-md-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  .pull-lg-left {
+    .float(left) !important;
+  }
+
+  .pull-lg-right {
+    .float(right) !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-xl-min) {
+  .pull-xl-left {
+    .float(left) !important;
+  }
+
+  .pull-xl-right {
+    .float(right) !important;
+  }
+
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.text-hide {
+  .text-hide();
+}
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
+
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270 {
+  transform: rotate(270deg);
+}
+
+.rotate-90 {
+  transform: rotate(-90deg);
+}
+
+// Cursor
+
+.clickable {
+  cursor: pointer !important;
+}

package/src/less/border-radius.less

@@ -1 +1,3 @@
-@import "./utilities/border-radius.less";
+.rounded-sm {
+  border-radius: 2px;
+}

package/src/less/core/_scaffolding.less

@@ -5,13 +5,8 @@
 @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 */
-@import "../utilities/border-radius.less";
-@import "../utilities/screen-reader.less";
-
 :root {
   // page default font size should be set in absolute units (pixels)
   --base-font-size: 16px;
@@ -338,11 +333,11 @@ video {
 }
 
 .img-rounded {
-  .rounded();
+  border-radius: var(--radius-small);
 }
 
 .img-circle {
-  .rounded-full();
+  border-radius: 50%;
 }
 
 .disabled,
@@ -351,3 +346,28 @@ video {
   opacity: 0.45;
   cursor: not-allowed !important;
 }
+
+// Only display content to screen readers
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
+// Use in conjunction with `.sr-only` to only display content when it's focused.
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

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

@@ -3,27 +3,247 @@
 @import (reference) "../mixins/_links.less";
 @import "../mixins/_text-emphasis.less";
 
-/* TODO: Remove utility imports to prevent duplicates */
-@import "../utilities/color.less";
-@import "../utilities/font-weight.less";
-@import "../utilities/max-width.less";
-@import "../utilities/overflow-wrap.less";
-@import "../utilities/text-align.less";
-@import "../utilities/text-decoration-line.less";
-@import "../utilities/text-overflow.less";
-@import "../utilities/text-transform.less";
-@import "../utilities/white-space.less";
-
-/**
- * @deprecated Obsolete since the brand has turned green.
- */
+// Deprecated classes in next iterations.
+
+//.text-danger (Replaced by .text-negative)
+//.text-success( Replaced by .text-positive)
+
+.text-xs-left {
+  .text-align(left);
+}
+
+.text-xs-right {
+  .text-align(right);
+}
+
+.text-xs-center {
+  text-align: center;
+}
+
+.text-xs-justify {
+  text-align: justify;
+}
+
+.text-xs-nowrap {
+  white-space: nowrap;
+}
+
+@media (--screen-sm) {
+  .text-sm-left {
+    .text-align(left);
+  }
+
+  .text-sm-right {
+    .text-align(right);
+  }
+
+  .text-sm-center {
+    text-align: center;
+  }
+
+  .text-sm-justify {
+    text-align: justify;
+  }
+
+  .text-sm-nowrap {
+    white-space: nowrap;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-left {
+    .text-align(left);
+  }
+
+  .text-md-right {
+    .text-align(right);
+  }
+
+  .text-md-center {
+    text-align: center;
+  }
+
+  .text-md-justify {
+    text-align: justify;
+  }
+
+  .text-md-nowrap {
+    white-space: nowrap;
+  }
+}
+
+@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-xl-left {
+    .text-align(left);
+  }
+
+  .text-xl-right {
+    .text-align(right);
+  }
+
+  .text-xl-center {
+    text-align: center;
+  }
+
+  .text-xl-justify {
+    text-align: justify;
+  }
+
+  .text-xl-nowrap {
+    white-space: nowrap;
+  }
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-underline {
+  .link-underline(true);
+}
+
+.text-no-decoration {
+  text-decoration: none !important;
+}
+
+.text-ellipsis,
+.text-ellipses {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.text-max-width {
+  max-width: 600px;
+}
+
+.text-word-break {
+  word-break: break-all;
+}
+
+.font-weight-bold {
+  font-weight: var(--font-weight-bold) !important;
+}
+
+.font-weight-semi-bold {
+  font-weight: var(--font-weight-semi-bold) !important;
+}
+
+.font-weight-normal {
+  font-weight: var(--font-weight-regular) !important;
+}
+
 .font-italic {
   font-style: italic !important;
 }
 
-/**
- * @deprecated Obsolete since the brand has turned green.
- */
+// Contextual colors `.text-*`
+
+.text-primary {
+  .text-emphasis-variant(var(--color-content-primary), var(--color-content-primary), var(--color-content-primary));
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-primary !important;
+  }
+}
+
+.text-secondary {
+  color: var(--color-content-secondary) !important;
+}
+
+.text-positive,
+.text-success {
+  .text-emphasis-variant(
+    var(--color-content-positive),
+    var(--color-content-positive),
+    var(--color-content-positive-hover)
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-positive !important;
+  }
+}
+
+.text-accent,
+.text-info {
+  .text-emphasis-variant(var(--color-content-accent), var(--color-content-accent), var(--color-content-accent-hover));
+  color: var(--color-interactive-primary) !important;
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-accent !important;
+  }
+}
+
+.text-warning {
+  .text-emphasis-variant(
+    var(--color-content-warning),
+    var(--color-content-warning),
+    var(--color-content-warning-hover),
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-warning !important;
+  }
+}
+
+.text-negative,
+.text-danger {
+  .text-emphasis-variant(
+    var(--color-sentiment-negative),
+    var(--color-sentiment-negative),
+    var(--color-sentiment-negative-hover)
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-negative !important;
+  }
+}
+
+.text-inverse {
+  .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
+}
+
+.text-muted {
+  color: var(--color-content-tertiary) !important;
+}
+
+// @deprecated: we no longer have "colored dot" design feature in new brand
 .colored-dot {
   &::after {
     content: none;

package/src/less/flex.less

@@ -1,15 +1,24 @@
 // mixins
+@import (reference) "./mixins/_flex.less";
 @import (reference) "./mixins/_logical-properties.less";
 
-/* TODO: Remove utility imports to prevent duplicates */
-@import "./utilities/align-items.less";
-@import "./utilities/align-self.less";
-@import "./utilities/display.less";
-@import "./utilities/flex-direction.less";
-@import "./utilities/flex-grow.less";
-@import "./utilities/flex-wrap.less";
-@import "./utilities/justify-content.less";
-@import "./utilities/order.less";
+.flex-properties(~"");
+
+@media (--screen-sm) {
+  .flex-properties(--sm);
+}
+
+@media (--screen-md) {
+  .flex-properties(--md);
+}
+
+@media (--screen-lg) {
+  .flex-properties(--lg);
+}
+
+@media (--screen-xl) {
+  .flex-properties(--xl);
+}
 
 /* Items */
 .flex__inner {