@transferwise/neptune-css 0.0.0-experimental-5c27fb6 → 0.0.0-experimental-be43e77

package/src/less/core/_scaffolding.less

@@ -1,380 +0,0 @@
-/* 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/less/core/_typography-utilities.less

@@ -1,243 +0,0 @@
-@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,
-  /// @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;
-  }
-}
-
-.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;
-  }
-}