@transferwise/neptune-css 10.0.6-beta.32 → 10.1.0

package/src/less/core/_typography.less

@@ -1,18 +1,4 @@
 @import (reference) '../../variables/neptune-tokens.less';
-@import (reference) '../mixins/_logical-properties.less';
-
-// Deprecated classes. To remove in next iterations
-
-// h6
-// .h1, .h2, .h3, .h4, .h5, .h6
-// .small, .tiny
-// .lead
-
-// small / .small inside headings
-
-// Deprecate to style the elements to avoid specificity issues and encourage users to use class names?
-
-/* stylelint-disable no-duplicate-selectors */
 
 h1,
 h2,
@@ -25,57 +11,104 @@ h6,
 .h3,
 .h4,
 .h5,
-.h6,
-.title-1,
-.title-1,
-.title-2,
-.title-3,
-.title-4,
-.title-5 {
+.h6 {
   margin: 0;
-  color: var(--color-content-primary);
-  line-height: var(--line-height-title);
+  color: var(--color-text-primary);
+  font-weight: @font-weight-semi-bold;
   letter-spacing: 0;
+
+  small,
+  .small {
+    color: @color-base-grey-light;
+    font-weight: 300;
+    line-height: 1;
+  }
 }
 
 h1,
-.h1,
-.title-1 {
-  margin-bottom: var(--size-8);
-  font-size: var(--font-size-32);
-  font-weight: var(--font-weight-bold);
+.h1 {
+  margin-bottom: var(--size-4);
+  font-weight: @font-weight-bold;
+  font-size: @font-size-x-large;
+  line-height: @line-height-x-large;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-8);
+    font-size: @font-size-xx-large;
+  }
 }
 
 h2,
-.h2,
-.title-2 {
-  margin-bottom: var(--size-4);
-  font-size: var(--font-size-26);
-  font-weight: var(--font-weight-bold);
+.h2 {
+  margin-bottom: 2px;
+  font-size: @font-size-large;
+  line-height: @line-height-large;
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-4);
+    font-weight: @font-weight-bold;
+    font-size: @font-size-x-large;
+    line-height: @line-height-x-large;
+  }
 }
 
 h3,
-.h3,
-.title-3 {
-  margin-bottom: 2px;
-  font-size: var(--font-size-20);
-  font-weight: var(--font-weight-semi-bold);
+.h3 {
+  font-size: @font-size-medium;
+  line-height: @line-height-medium;
+
+  @media (--screen-md) {
+    margin-bottom: 2px;
+    font-size: @font-size-large;
+    line-height: @line-height-large;
+  }
 }
 
 h4,
+h5,
 .h4,
-.title-4 {
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-semi-bold);
+.h5 {
+  font-size: @font-size-base;
+  line-height: @line-height-base;
 }
 
+h4,
+.h4 {
+  @media (--screen-md) {
+    font-size: @font-size-medium;
+    line-height: @line-height-medium;
+  }
+}
+
+h6,
+.h6 {
+  color: @color-base-grey-light;
+  font-size: @font-size-small;
+  line-height: @line-height-small;
+}
+
+h1,
+h2,
+.h1,
+.h2 {
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+
+h3,
+h4,
 h5,
 h6,
+.h3,
+.h4,
 .h5,
-.h6,
-.title-5 {
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-semi-bold);
+.h6 {
+  small,
+  .small {
+    font-size: 75%;
+  }
 }
 
 p {
@@ -92,88 +125,45 @@ p {
   + .h3,
   + .h4,
   + .h5,
-  + .h6,
-  + .title-1,
-  + .title-2,
-  + .title-3,
-  + .title-4,
-  + .title-5 {
+  + .h6 {
     margin-top: var(--size-32);
   }
 }
 
-.body-1,
-.body-2,
-.body-3,
-.label,
-.value {
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
-}
-
-.body-1 {
-  font-size: var(--font-size-16);
-}
-
-.body-2 {
-  font-size: var(--font-size-14);
-}
-
-.body-3 {
-  font-size: var(--font-size-12);
-}
-
-.control-1,
-.control-2 {
-  color: var(--color-content-accent);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-title);
-}
-
-.control-1 {
-  font-size: var(--font-size-16);
-}
-
-.control-2 {
-  font-size: var(--font-size-14);
-}
-
-.label {
-  font-size: var(--font-size-14);
-}
-
-.value {
-  font-size: var(--font-size-16);
-}
-
 .lead {
-  margin-bottom: var(--size-24);
-  font-size: var(--font-size-20);
-  line-height: var(--line-height-title);
+  margin: 0 0 var(--size-24);
+  font-weight: 300;
+  font-size: @font-size-medium;
+  line-height: 1.7777777778; // 32/18
+
+  @media (--screen-md) {
+    font-size: @font-size-large;
+    line-height: 1.4545454545; // 32/22
+  }
 }
 
 small,
 .small {
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  font-size: @font-size-small;
+  line-height: @line-height-small;
 }
 
 .tiny {
   color: @color-base-grey-light;
-  font-size: var(--font-size-12);
-  line-height: var(--line-height-body);
+  font-size: @font-size-x-small;
+  line-height: @line-height-x-small;
 }
 
 strong,
 b {
-  color: var(--color-content-primary);
-  font-weight: var(--font-weight-semi-bold);
+  color: var(--color-text-primary);
+  font-weight: @font-weight-semi-bold;
   letter-spacing: 0;
 }
 
 mark,
 .mark {
-  padding: var(--size-4);
+  padding: 0.2em;
   background-color: var(--color-background-warning);
 }
 
@@ -196,7 +186,7 @@ sup {
 abbr[title],
 abbr[data-original-title] {
   text-decoration: none;
-  border-bottom: 1px dotted var(--color-content-accent);
+  border-bottom: 1px dotted var(--color-accent);
   cursor: help;
 }
 
@@ -208,8 +198,8 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--font-size-16);
-  .border(left, 2px, solid, var(--color-content-accent));
+  font-size: 1.0666666667rem;
+  border-left: 2px solid var(--color-accent);
 
   p {
     margin-bottom: var(--size-8);
@@ -226,8 +216,8 @@ blockquote {
   footer {
     display: block;
     color: @color-base-grey-light;
-    font-size: var(--font-size-14);
-    line-height: var(--line-height-body);
+    font-size: @font-size-small;
+    line-height: @line-height-small;
 
     &::before {
       content: '\2014 \00A0'; // em dash, nbsp
@@ -240,20 +230,17 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: var(--font-size-16);
+    font-size: @font-size-medium;
+    line-height: @line-height-medium;
   }
 }
 
 .blockquote-reverse {
-  .padding(right, 22px);
-
-  .padding(left, 0);
-
-  .text-align(right);
-
-  .border(right, 2px, solid, var(--color-content-accent));
-
-  .border(left, 0);
+  padding-right: 22px;
+  padding-left: 0;
+  text-align: right;
+  border-right: 2px solid var(--color-accent);
+  border-left: 0;
 
   footer {
     &::before {
@@ -279,9 +266,9 @@ pre {
   margin: 0 0 var(--size-24);
   padding: var(--size-16);
   overflow: auto;
-  color: var(--color-content-secondary);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  color: @color-base-grey-dark;
+  font-size: @font-size-small;
+  line-height: @line-height-small;
   word-wrap: break-word;
   word-break: break-all;
   background-color: var(--color-background-neutral);
@@ -298,7 +285,7 @@ pre {
 code {
   padding: 2px var(--size-4);
   font-size: 90%;
-  color: var(--color-content-secondary);
+  color: @color-base-grey-dark;
   background-color: var(--color-background-neutral);
 }
 
@@ -319,5 +306,3 @@ samp {
   font-size: 1em;
   border-radius: 0;
 }
-
-/* stylelint-enable no-duplicate-selectors */

package/src/less/currency-flags.less

@@ -1,10 +1,10 @@
-@import (reference) './mixins/_logical-properties.less';
-
 .currency-flag {
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
 
   .btn &,
+  .tw-money-input__fixed-currency.input-md &,
   .dropdown-menu li & {
+    margin-top: 3px;
     vertical-align: -3px;
     line-height: 16px;
   }
@@ -16,8 +16,10 @@
   }
 
   .btn-lg &,
+  .tw-money-input__fixed-currency.input-lg &,
   .form-group-lg .btn &,
   .input-group-lg .btn & {
+    margin-top: 6px;
     vertical-align: -1px;
   }
 }
@@ -25,12 +27,12 @@
 li,
 li > a {
   > .currency-flag:first-child {
-    .margin(right, var(--size-8));
+    margin-right: var(--size-8);
   }
 }
 
 .btn {
   .currency-flag:first-child {
-    .margin(right, var(--size-8));
+    margin-right: var(--size-8);
   }
 }

package/src/less/decision.less

@@ -1,3 +1,4 @@
+@import (reference) '@transferwise/neptune-css/src/less/variables/_typography.less';
 @import (reference) '@transferwise/neptune-css/src/variables/neptune-tokens.less';
 
 .decision {
@@ -31,9 +32,9 @@
   }
 
   .media-body {
-    color: var(--color-content-secondary);
-    font-weight: var(--font-weight-regular);
-    font-size: var(--font-size-14);
+    color: @color-base-grey-dark;
+    font-weight: @font-weight-base;
+    font-size: @font-size-small; // 14px
     line-height: calc(20 / 14); // 20px
   }
 
@@ -53,11 +54,15 @@
   &:not(.disabled):hover {
     @media (--screen-xs) {
       background-color: var(--color-background-neutral);
+
+      .circle-inverse {
+        background-color: var(--color-background-elevated);
+      }
     }
 
     .tw-checkbox-button,
     .tw-radio-button {
-      border-color: var(--color-interactive-accent);
+      border-color: var(--color-border-focus);
     }
   }
 

package/src/less/droppable.less

@@ -1,203 +1,4 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
-
-.droppable {
-  position: relative;
-  font-size: @font-size-base;
-  text-align: center;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: @border-radius-base;
-  overflow: hidden;
-  transition: border-color 0.15s linear;
-
-  &:hover {
-    border-color: var(--color-interactive-secondary-hover);
-  }
-
-  &:active {
-    border-color: var(--color-interactive-secondary-active);
-  }
-
-  @media (--screen-md) {
-    border-style: dashed;
-  }
-}
-
-.droppable-card {
-  background-color: var(--color-background-screen);
-  position: absolute;
-  top: 0;
-  .left(0);
-
-  display: none;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: inherit;
-  transition: transform 0.3s ease;
-}
-
-.droppable-card-content {
-  max-width: 100%;
-  opacity: 1;
-  transition: opacity 0.5s linear;
-}
-
-.droppable-dropping {
-  border-color: var(--color-interactive-secondary-active) !important;
-}
-
-.droppable-processing,
-.droppable-complete {
-  border-style: solid;
-}
-
-.droppable .thumbnail {
-  width: auto;
-  max-height: 96px;
-  max-width: 96px;
-  margin: 0 auto;
-
-  @media (--screen-md) {
-    max-height: 128px;
-    max-width: 128px;
-  }
-}
-
-/***** Card variants *****/
-
-.droppable-dropping-card {
-  display: none;
-  animation: droppable-fade-in 0.15s 0s linear forwards;
-  color: var(--color-content-primary) !important;
-  // TODO fix with some non-semitransparent color
-  background-color: #d8f1fa;
-  border-color: var(--color-interactive-accent);
-  z-index: 1;
-}
-
-.droppable-dropping .droppable-dropping-card {
-  display: flex;
-}
-
-// Processing hidden by default
-.droppable-processing-card {
-  display: none;
-
-  .droppable-card-content {
-    opacity: 1;
-  }
-}
-
-// Processing shown when correct state, any transform cancelled
-
-.droppable-processing .droppable-processing-card {
-  display: flex;
-  transform: translateX(0);
+// TODO: remove bootstrap dependencies
 
-  .droppable-card-content {
-    opacity: 1;
-  }
-}
-// As we go from processing to complete, animate out processing card
-.droppable-complete {
-  .droppable-processing-card {
-    display: flex;
-    transform: translateX(-100%);
-
-    .droppable-card-content {
-      opacity: 0;
-    }
-  }
-}
-
-// Completed card translated out and hidden by default
-.droppable-complete-card {
-  display: flex;
-  transform: translateX(100%);
-
-  .droppable-card-content {
-    opacity: 0;
-  }
-}
-// Completed card brought back in and shown in correct state
-// stylelint-disable-next-line no-duplicate-selectors
-.droppable-complete {
-  .droppable-complete-card {
-    transform: translateX(0);
-
-    .droppable-card-content {
-      opacity: 1;
-    }
-  }
-}
-
-// Hide default content in other states, so it fades back in
-// stylelint-disable-next-line no-duplicate-selectors
-.droppable-processing,
-.droppable-complete {
-  .droppable-default-card .droppable-card-content {
-    opacity: 0;
-  }
-}
-
-/***** End card variants *****/
-
-.droppable-mobile {
-  display: block;
-}
-
-.droppable-desktop {
-  display: none;
-}
-
-@media (--screen-md) {
-  .droppable-mobile {
-    display: none;
-  }
-
-  .droppable-desktop {
-    display: block;
-  }
-}
-
-.droppable-active {
-  border-style: solid;
-
-  &.droppable-dropping {
-    border-style: dashed;
-  }
-}
-
-.droppable-size(@size, @padding-mobile, @padding-tablet, @padding-desktop) {
-  .droppable-@{size} {
-    padding: @padding-mobile @padding-mobile;
-  }
-
-  @media (--screen-sm) {
-    .droppable-@{size} {
-      padding: @padding-tablet @padding-mobile;
-    }
-  }
-
-  @media (--screen-lg) {
-    .droppable-@{size} {
-      padding: @padding-desktop @padding-tablet;
-    }
-  }
-}
-
-.droppable-size(sm, @spacing-1-mobile, @spacing-1-tablet, @spacing-1-desktop);
-.droppable-size(md, @spacing-2-mobile, @spacing-2-tablet, @spacing-2-desktop);
-.droppable-size(lg, @spacing-3-mobile, @spacing-3-tablet, @spacing-3-desktop);
-
-@keyframes droppable-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
+@import (reference) '../variables/legacy-variables.less';
+@import 'bootstrap/less/droppable.less';

package/src/less/flex.less

@@ -1,6 +1,5 @@
 // mixins
 @import (reference) './mixins/_flex.less';
-@import (reference) './mixins/_logical-properties.less';
 
 .flex-properties(~'');
 
@@ -25,42 +24,42 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  .margin(right, calc(-1 * var(--size-16)));
-  .margin(left, calc(-1 * var(--size-16)));
+  margin-right: calc(-1 * var(--size-16));
+  margin-left: calc(-1 * var(--size-16));
 
   @media (--screen-sm) {
-    .margin(right, calc(-1 * var(--size-24)));
-    .margin(left, calc(-1 * var(--size-24)));
+    margin-right: calc(-1 * var(--size-24));
+    margin-left: calc(-1 * var(--size-24));
   }
 
   @media (--screen-md) {
-    .margin(right, calc(-1 * var(--size-32)));
-    .margin(left, calc(-1 * var(--size-32)));
+    margin-right: calc(-1 * var(--size-32));
+    margin-left: calc(-1 * var(--size-32));
   }
 
   @media (--screen-lg) {
-    .margin(right, calc(-1 * var(--size-48)));
-    .margin(left, calc(-1 * var(--size-48)));
+    margin-right: calc(-1 * var(--size-48));
+    margin-left: calc(-1 * var(--size-48));
   }
 }
 
 .flex__item {
-  .padding(right, var(--size-16));
-  .padding(left, var(--size-16));
+  padding-right: var(--size-16);
+  padding-left: var(--size-16);
 
   @media (--screen-sm) {
-    .padding(right, var(--size-24));
-    .padding(left, var(--size-24));
+    padding-right: var(--size-24);
+    padding-left: var(--size-24);
   }
 
   @media (--screen-md) {
-    .padding(right, var(--size-32));
-    .padding(left, var(--size-32));
+    padding-right: var(--size-32);
+    padding-left: var(--size-32);
   }
 
   @media (--screen-lg) {
-    .padding(right, var(--size-48));
-    .padding(left, var(--size-48));
+    padding-right: var(--size-48);
+    padding-left: var(--size-48);
   }
 }