@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/core/_scaffolding.less

@@ -0,0 +1,380 @@
+/* stylelint-disable selector-max-empty-lines */
+
+@import "modern-normalize";
+@import (reference) "../../variables/neptune-tokens.less";
+@import (reference) "../mixins/_logical-properties.less";
+@import (reference) "../mixins/_links.less";
+@import (reference) "../core/_typography.less";
+@import "../../variables/legacy-variables.less";
+
+:root {
+  // page default font size should be set in absolute units (pixels)
+  --base-font-size: 16px;
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
+  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal
+    calc(@padding-large-vertical - 2px);
+  --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
+  --btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal
+    calc(@btn-xs-padding-vertical - 2px);
+  --btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal
+    calc(@btn-sm-padding-vertical - 2px);
+  --btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal
+    calc(@btn-lg-padding-vertical - 2px);
+  --input-padding: @padding-large-vertical @padding-base-horizontal
+    calc(@padding-large-vertical - 2px);
+  --input-padding-small: @padding-small-vertical @padding-small-horizontal
+    calc(@padding-small-vertical - 2px);
+  --input-padding-large: @padding-large-vertical @padding-large-horizontal
+    calc(@padding-large-vertical - 2px);
+  --input-group-addon-sm-padding: calc(@padding-small-vertical - 1px) @padding-small-horizontal;
+  --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal
+    calc(@padding-large-vertical - 2px);
+  --dropdown-link-padding: calc(@padding-large-vertical + 1px) @padding-large-horizontal
+    calc(@padding-large-vertical - 1px);
+  --btn-radius-base: @border-radius-base;
+  --btn-sm-radius-base: @border-radius-small;
+  --btn-lg-radius-base: @border-radius-large;
+}
+
+.np-theme-light,
+.np-theme-dark,
+.np-theme-navy {
+  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
+
+  font-family: var(--font-family-regular);
+  line-height: var(--line-height-body);
+}
+
+.np-theme-personal {
+  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
+
+  font-family: var(--font-family-regular);
+  font-feature-settings: "calt";
+
+  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
+  --btn-padding: calc(@btn-padding-vertical - @btn-border-width) @btn-padding-horizontal;
+  --btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
+  --btn-sm-padding: calc(@btn-sm-padding-vertical - @btn-border-width) @btn-sm-padding-horizontal;
+  --btn-lg-padding: calc(@btn-lg-padding-vertical - @btn-border-width) @btn-lg-padding-horizontal;
+  --btn-height: @btn-height;
+  --btn-xs-height: @btn-xs-height;
+  --btn-sm-height: @btn-sm-height;
+  --btn-lg-height: @btn-lg-height;
+  --input-height-base: @input-height-base;
+  --input-height-large: @input-height-large;
+  --input-height-small: @input-height-small;
+  --input-padding: @padding-large-vertical @padding-base-horizontal;
+  --input-padding-small: @padding-small-vertical @padding-small-horizontal;
+  --input-padding-large: @padding-large-vertical @padding-large-horizontal;
+  --input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
+  --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
+  --dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
+  --btn-radius-base: 9999px;
+  --btn-sm-radius-base: var(--btn-radius-base);
+  --btn-lg-radius-base: var(--btn-radius-base);
+
+  color: var(--color-content-secondary);
+  background-color: var(--color-background-screen);
+}
+
+html {
+  font-size: var(--base-font-size);
+  font-family: var(--font-family-regular);
+  color: var(--color-content-secondary);
+  background-color: var(--color-background-screen);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+blockquote,
+dl,
+dd,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+.np-theme-personal::selection {
+  background-color: var(--color-background-neutral-active);
+  color: var(--color-content-primary);
+}
+
+/* DEPRECATED: use `a` tag or .np-text-link-* instead */
+/* stylelint-disable-next-line selector-list-comma-newline-after */
+.anchor,
+a,
+.np-text-link-default,
+.np-text-link-large {
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-accent;
+
+    &:hover,
+    &:focus {
+      color: @color-navy-content-accent-hover;
+    }
+
+    &:active {
+      color: @color-navy-content-accent-active;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--color-sentiment-content-primary-hover, var(--color-content-link-hover));
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--color-sentiment-content-primary-active, var(--color-content-link-active));
+  }
+
+  &.secondary {
+    color: var(--color-content-secondary);
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-accent-hover);
+    }
+
+    &:active {
+      color: var(--color-content-accent-active);
+    }
+  }
+}
+
+html.ios-click {
+  cursor: pointer;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  cursor: pointer;
+}
+
+// iOS "clickable elements" fix for role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+[role="button"] {
+  cursor: pointer;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input,
+textarea {
+  &::placeholder {
+    color: var(--color-content-tertiary);
+  }
+}
+
+ol,
+ul {
+  margin: 0 0 var(--size-24);
+  .padding-shorthand(0, 0, 0, calc(var(--size-48) - var(--size-10)));
+
+  ol,
+  ul {
+    margin-bottom: 0;
+  }
+}
+
+.list-unstyled {
+  .padding(left, 0);
+
+  list-style: none;
+}
+
+.list-inline {
+  .margin(left, calc(var(--size-4) * -1));
+
+  .padding(left, 0);
+
+  list-style: none;
+
+  > li {
+    display: inline-block;
+    .padding(right, var(--size-8));
+
+    .padding(left, var(--size-4));
+
+    .border(right, 1px, solid, var(--color-border-neutral));
+
+    &:last-child {
+      .border(right, 0);
+    }
+  }
+}
+
+dt,
+dd {
+  line-height: var(--line-height-body);
+}
+
+dt {
+  font-size: var(--font-size-14);
+}
+
+dd {
+  margin-bottom: var(--size-16);
+  color: var(--color-content-primary);
+
+  @media (--screen-sm) {
+    margin-bottom: var(--size-24);
+  }
+}
+
+/* Deprecated - use the Neptune Web DefinitionList component */
+.dl-horizontal {
+  dd {
+    &::before,
+    &::after {
+      display: table;
+      content: " ";
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  @media (--screen-sm) {
+    dt {
+      .float(left);
+      .clear(left);
+
+      width: 156px;
+      overflow: hidden;
+      white-space: nowrap;
+      .text-align(left);
+
+      text-overflow: ellipsis;
+    }
+
+    dd {
+      margin-bottom: var(--size-8);
+      .margin(left, 180px);
+    }
+  }
+}
+
+/* Deprecated - use the Neptune Web DefinitionList component */
+.dl-horizontal-item {
+  display: flex;
+  flex-wrap: nowrap;
+
+  dt {
+    flex: 1 2 auto;
+  }
+
+  dd {
+    flex: 1 1 auto;
+    .text-align(right);
+
+    word-break: break-all;
+  }
+}
+
+hr {
+  margin: var(--size-16) auto;
+  border: 0;
+  border-top: 1px solid var(--color-border-neutral);
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    border-top: 1px solid @color-navy-border-neutral;
+  }
+
+  @media (--screen-sm) {
+    margin: var(--size-24) auto;
+  }
+
+  @media (--screen-lg) {
+    margin: var(--size-32) auto;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+.img-rounded {
+  border-radius: var(--radius-small);
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.disabled,
+:disabled {
+  filter: grayscale(1);
+  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/styles/less/core/_typography-utilities.less

@@ -0,0 +1,255 @@
+@import (reference) "../../variables/neptune-tokens.less";
+@import (reference) "../mixins/_logical-properties.less";
+@import (reference) "../mixins/_links.less";
+@import "../mixins/_text-emphasis.less";
+
+// 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;
+}
+
+.text-overflow-wrap {
+  overflow-wrap: anywhere;
+}
+
+.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;
+}
+
+// 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;
+  }
+}