@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

package/src/neptune-css/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/neptune-css/less/addons/_spacing-utilities.less

@@ -0,0 +1,73 @@
+@import "../mixins/_spacing.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);
+
+  @media (--screen-sm) {
+    padding-top: var(--size-72);
+    padding-bottom: var(--size-72);
+  }
+
+  @media (--screen-lg) {
+    padding-top: var(--size-96);
+    padding-bottom: var(--size-96);
+  }
+}
+
+.np-text-hyphenated {
+  @supports (hyphenate-limit-chars: 1) {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+
+    @media (--screen-md) {
+      hyphenate-limit-chars: 8 3;
+    }
+
+    @media (--screen-lg) {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+
+  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+
+    @media (--screen-lg) {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}

package/src/neptune-css/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/neptune-css/less/alerts.less

@@ -0,0 +1,252 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./addons/_spacing-utilities.less";
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_alerts.less";
+
+/**
+ * DEPRECATED: use <InfoPrompt /> component instead
+ */
+
+.alert {
+  padding: var(--size-16);
+  border-radius: 10px;
+  color: var(--color-content-primary);
+  background-color: var(--color-background-neutral);
+  min-width: 200px;
+  margin-bottom: var(--size-16);
+
+  .np-theme-personal & {
+    padding: var(--padding-medium);
+    border-radius: var(--radius-medium);
+    .alert__message {
+      margin-top: 0;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: center;
+      
+      .alert__action {
+        margin-top: var(--size-8);
+      }
+    }
+  }
+
+  .alert__icon {
+    width: var(--size-32);
+    height: var(--size-32);
+    border-radius: 50%;
+    flex: none;
+  }
+
+  .close {
+    margin-top: var(--size-4);
+
+    .np-theme-personal & {
+      margin-top: calc(var(--size-8) * -1);
+      margin-inline-end: calc(var(--size-8) * -1);
+    }
+  }
+
+  p,
+  ul {
+    margin-bottom: 0;
+  }
+
+  p + p {
+    margin-top: var(--padding-x-small);
+  }
+}
+
+.arrow {
+  .alert-arrow(@alert-arrow-width);
+}
+
+.alert-detach.arrow {
+  border-radius: var(--radius-small);
+}
+
+// Field validation alerts
+.form-group {
+  .alert {
+    position: relative; // Elevate over input
+    padding: 4px 16px 3px;
+    margin-top: -2px;
+    border-style: solid;
+    border-color: var(--color-border-neutral);
+    border-width: 0 1px 1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 0;
+    transition: border-color 0.15s ease-in-out;
+
+    .alert-arrow(@alert-arrow-width);
+  }
+
+  .radio ~ .alert,
+  .checkbox ~ .alert,
+  .alert-detach {
+    border-width: 0;
+    margin-top: var(--size-12);
+    border-radius: var(--radius-small);
+  }
+
+  .alert-focus,
+  .alert-info,
+  .alert-success,
+  .alert-warning,
+  .alert-danger {
+    display: none;
+  }
+}
+
+.alert-success,
+.alert-positive {
+  .alert-variant(
+    var(--color-background-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 & {
+    .alert-variant(
+      @color-navy-background-positive;
+      @color-navy-content-positive;
+      @color-navy-content-positive-hover;
+    );
+  }
+}
+
+.alert-info,
+.alert-neutral {
+  .alert-variant(
+    var(--color-background-neutral);
+    var(--color-content-primary);
+    var(--color-content-primary);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-neutral;
+      @color-navy-content-primary;
+      @color-navy-content-primary;
+    );
+  }
+}
+
+.alert-warning {
+  .alert-variant(
+    var(--color-background-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 & {
+    .alert-variant(
+      @color-navy-background-warning;
+      @color-navy-content-warning;
+      @color-navy-content-warning-hover;
+    );
+  }
+}
+
+.alert-danger,
+.alert-negative {
+  .alert-variant(
+    var(--color-background-negative);
+    var(--color-content-negative);
+    var(--color-content-negative-hover);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-negative;
+      @color-navy-content-negative;
+      @color-navy-content-negative-hover;
+    );
+  }
+}
+
+.form-group:focus-within .alert-focus,
+input:focus ~ .alert-focus,
+.btn:focus ~ .alert-focus {
+  display: block;
+  border-color: var(--color-interactive-accent);
+}
+
+.focus .alert-focus,
+.has-focus .alert-focus,
+.has-info .alert-info,
+.has-info .alert-neutral,
+.has-warning .alert-warning,
+.has-success .alert-success,
+.has-success .alert-positive,
+.has-error .alert-danger,
+.has-error .alert-negative {
+  display: block;
+}
+
+// Ensure we only show one type at a time
+.has-info .help-block,
+.has-info .alert-focus,
+.has-warning .help-block,
+.has-warning .alert-focus,
+.has-warning .alert-info,
+.has-warning .alert-neutral,
+.has-success .help-block,
+.has-success .alert-focus,
+.has-success .alert-info,
+.has-success .alert-neutral,
+.has-success .alert-warning,
+.has-error .help-block,
+.has-error .alert-focus,
+.has-error .alert-info,
+.has-error .alert-neutral,
+.has-error .alert-warning,
+.has-error .alert-success,
+.has-error .alert-positive {
+  display: none !important;
+}
+
+.np-theme-personal {
+  .alert {
+    padding: var(--size-16);
+
+    flex-direction: row;
+
+    .alert__message {
+      padding-top: 0;
+      padding-inline-start: var(--padding-small);
+    }
+  }
+
+  .alert-success,
+  .alert-positive,
+  .alert-info,
+  .alert-neutral,
+  .alert-warning,
+  .alert-danger,
+  .alert-negative {
+    &,
+    // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+    .bg-primary & {
+      .alert-variant(
+        var(--color-background-neutral);
+        var(--color-content-secondary);
+        var(--color-content-link-hover);
+      );
+    }
+
+    .np-link {
+      color: var(--color-content-link);
+
+      &:hover,
+      &:focus {
+        color: var(--color-content-link-hover);
+      }
+    }
+  }
+}

package/src/neptune-css/less/background.less

@@ -0,0 +1,24 @@
+@import (reference) "../variables/neptune-tokens.less";
+
+.bg {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: 100%;
+  background-position: bottom;
+
+  &--dark {
+    background-color: @color-navy-background-neutral;
+    background-image: url("./neptune-css/img/bg-dark.svg");
+
+    .np-theme-personal & {
+      background-color: var(--color-forest-green);
+      background-image: none;
+      color: #daffc0;
+    }
+  }
+
+  &--light {
+    background-color: var(--color-background-neutral);
+    background-image: url("./neptune-css/img/bg-light.svg");
+  }
+}