@transferwise/neptune-css 10.0.6-beta.36 → 10.0.6-beta.38

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

@@ -1,13 +1,19 @@
 @import (reference) '../../variables/neptune-tokens.less';
 @import (reference) '../variables/_typography.less';
+@import (reference) '../mixins/_logical-properties.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-align(left);
 }
 
 .text-xs-right {
-  text-align: right;
+  .text-align(right);
 }
 
 .text-xs-center {
@@ -24,11 +30,11 @@
 
 @media (--screen-sm) {
   .text-sm-left {
-    text-align: left;
+    .text-align(left);
   }
 
   .text-sm-right {
-    text-align: right;
+    .text-align(right);
   }
 
   .text-sm-center {
@@ -46,11 +52,11 @@
 
 @media (--screen-md) {
   .text-md-left {
-    text-align: left;
+    .text-align(left);
   }
 
   .text-md-right {
-    text-align: right;
+    .text-align(right);
   }
 
   .text-md-center {
@@ -68,11 +74,11 @@
 
 @media (--screen-lg) {
   .text-lg-left {
-    text-align: left;
+    .text-align(left);
   }
 
   .text-lg-right {
-    text-align: right;
+    .text-align(right);
   }
 
   .text-lg-center {
@@ -90,11 +96,11 @@
 
 @media (--screen-xl) {
   .text-xl-left {
-    text-align: left;
+    .text-align(left);
   }
 
   .text-xl-right {
-    text-align: right;
+    .text-align(right);
   }
 
   .text-xl-center {
@@ -147,15 +153,15 @@
 }
 
 .font-weight-bold {
-  font-weight: @font-weight-bold !important;
+  font-weight: var(--font-weight-bold) !important;
 }
 
 .font-weight-semi-bold {
-  font-weight: @font-weight-semi-bold !important;
+  font-weight: var(--font-weight-semi-bold) !important;
 }
 
 .font-weight-normal {
-  font-weight: @font-weight-base !important;
+  font-weight: var(--font-weight-regular) !important;
 }
 
 .font-italic {
@@ -163,122 +169,130 @@
 }
 
 // Contextual colors `.text-*`
+
 .text-primary {
-  .text-emphasis-variant(@color-base-navy-light, @color-base-navy-light, @color-base-navy-mid);
+  .text-emphasis-variant(var(--color-content-primary), var(--color-content-primary), var(--color-content-primary));
 
   .bg-primary & {
-    color: @color-base-white !important;
+    color: var(--color-base-white-light) !important;
   }
 }
 
+.text-positive,
 .text-success {
-  .text-emphasis-variant(@color-base-green-dark, @color-base-green-light, @color-base-green-dark);
+  .text-emphasis-variant(var(--color-content-positive), var(--color-content-positive), var(--color-content-positive-hover));
 
   .bg-primary & {
-    color: @color-base-green-light !important;
+    color: var(--color-content-positive) !important;
   }
 }
 
+.text-accent,
 .text-info {
-  .text-emphasis-variant(@color-base-blue-dark, @color-base-blue-light, @color-base-blue-dark);
+  .text-emphasis-variant(var(--color-content-accent), var(--color-content-accent), var(--color-content-accent-hover));
 
   .bg-primary & {
-    color: @color-base-blue-light !important;
+    color: var(--color-content-accent) !important;
   }
 }
 
 .text-warning {
   .text-emphasis-variant(
-    @color-base-orange-dark,
-    @color-base-orange-light,
-    @color-base-orange-dark
+    var(--color-content-accent),
+    var(--color-content-accent),
+    var(--color-content-accent-hover),
   );
 
   .bg-primary & {
-    color: @color-base-orange-light !important;
+    color: var(--color-content-warning) !important;
   }
 }
 
+.text-negative,
 .text-danger {
-  .text-emphasis-variant(@color-base-red-dark, @color-base-red-light, @color-base-red-dark);
+  .text-emphasis-variant(var(--color-content-negative), var(--color-content-negative), var(--color-content-negative-hover));
 
   .bg-primary & {
-    color: @color-base-red-light !important;
+    color: var(--color-content-negative) !important;
   }
 }
 
 .text-inverse {
-  .text-emphasis-variant(@color-base-white, @color-base-white, @color-base-smoke-fade);
+  .text-emphasis-variant(var(--color-base-white-light), var(--color-base-white-light), @color-base-smoke-fade);
 }
 
 .text-muted {
-  color: var(--color-text-inactive) !important;
+  color: var(--color-content-disabled) !important;
 }
 
 .display-1,
 .display-2,
 .display-3,
-.display-4 {
-  font-weight: @font-weight-bold;
+.display-4,
+.display-5 {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-title);
 }
 
 .display-1 {
   margin-bottom: var(--size-24);
-  font-size: 3.7333333333rem; // 56/15px
-  line-height: 4.8rem; // 72/15px
+  font-size: 3.7333333333rem;
 
   @media (--screen-md) {
     margin-bottom: var(--size-8);
-    font-size: 6.5rem; // 104px
-    line-height: 8rem; // 128px
+    font-size: 6.5rem;
   }
 }
 
 .display-2 {
   margin-bottom: var(--size-24);
-  font-size: 3.7333333333rem; // 56/15px
-  line-height: 4.8rem; // 72/15px
+  font-size: 3.7333333333rem;
 
   @media (--screen-md) {
     margin-bottom: var(--size-16);
-    font-size: 5.5rem; // 88px
-    line-height: 7rem; // 112px
+    font-size: 5.5rem;
   }
 }
 
 .display-3 {
   margin-bottom: var(--size-8);
-  font-size: 2.8rem; // 42/15px
-  line-height: 3.2rem; // 48/15px
+  font-size: 2.8rem;
 
   @media (--screen-md) {
     margin-bottom: var(--size-24);
-    font-size: 4.5rem; // 72px
-    line-height: 5.5rem; // 88px
+    font-size: 4.5rem;
   }
 }
 
 .display-4 {
   margin-bottom: var(--size-4);
   font-size: 1.8666666667rem; // 28/15px
-  line-height: 2.1333333333rem; // 32/15px
 
   @media (--screen-md) {
     margin-bottom: var(--size-24);
     font-size: 3.5rem; // 56px
-    line-height: 4.5rem; // 72px
+  }
+}
+
+.display-5 {
+  margin-bottom: var(--size-4);
+  font-size: 1.8666666667rem; // 28/15px
+
+  @media (--screen-md) {
+    margin-bottom: var(--size-8);
+    font-size: 2.625rem; // 42px
   }
 }
 
 .colored-dot {
   &::after {
     content: '.';
-    color: var(--color-accent);
+    color: var(--color-content-accent);
   }
 
   &--green {
     &::after {
-      color: var(--color-positive);
+      color: var(--color-content-positive);
     }
   }
 }

package/src/less/core/_typography.less

@@ -1,4 +1,18 @@
 @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,
@@ -11,104 +25,57 @@ h6,
 .h3,
 .h4,
 .h5,
-.h6 {
+.h6,
+.title-1,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5 {
   margin: 0;
-  color: var(--color-text-primary);
-  font-weight: @font-weight-semi-bold;
+  color: var(--color-content-primary);
+  line-height: var(--line-height-title);
   letter-spacing: 0;
-
-  small,
-  .small {
-    color: @color-base-grey-light;
-    font-weight: 300;
-    line-height: 1;
-  }
 }
 
 h1,
-.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;
-  }
+.h1,
+.title-1 {
+  margin-bottom: var(--size-8);
+  font-size: var(--font-size-32);
+  font-weight: var(--font-weight-bold);
 }
 
 h2,
-.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;
-  }
+.h2,
+.title-2 {
+  margin-bottom: var(--size-4);
+  font-size: var(--font-size-26);
+  font-weight: var(--font-weight-bold);
 }
 
 h3,
-.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;
-  }
+.h3,
+.title-3 {
+  margin-bottom: 2px;
+  font-size: var(--font-size-20);
+  font-weight: var(--font-weight-semi-bold);
 }
 
 h4,
-h5,
 .h4,
-.h5 {
-  font-size: @font-size-base;
-  line-height: @line-height-base;
+.title-4 {
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
 }
 
-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 {
-  small,
-  .small {
-    font-size: 75%;
-  }
+.h6,
+.title-5 {
+  font-size: var(--font-size-14);
+  font-weight: var(--font-weight-semi-bold);
 }
 
 p {
@@ -125,45 +92,88 @@ p {
   + .h3,
   + .h4,
   + .h5,
-  + .h6 {
+  + .h6,
+  + .title-1,
+  + .title-2,
+  + .title-3,
+  + .title-4,
+  + .title-5 {
     margin-top: var(--size-32);
   }
 }
 
-.lead {
-  margin: 0 0 var(--size-24);
-  font-weight: 300;
-  font-size: @font-size-medium;
-  line-height: 1.7777777778; // 32/18
+.body-1,
+.body-2,
+.body-3,
+.label,
+.value {
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
+}
 
-  @media (--screen-md) {
-    font-size: @font-size-large;
-    line-height: 1.4545454545; // 32/22
-  }
+.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);
 }
 
 small,
 .small {
-  font-size: @font-size-small;
-  line-height: @line-height-small;
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-body);
 }
 
 .tiny {
   color: @color-base-grey-light;
-  font-size: @font-size-x-small;
-  line-height: @line-height-x-small;
+  font-size: var(--font-size-12);
+  line-height: var(--line-height-body);
 }
 
 strong,
 b {
-  color: var(--color-text-primary);
-  font-weight: @font-weight-semi-bold;
+  color: var(--color-content-primary);
+  font-weight: var(--font-weight-semi-bold);
   letter-spacing: 0;
 }
 
 mark,
 .mark {
-  padding: 0.2em;
+  padding: var(--size-4);
   background-color: var(--color-background-warning);
 }
 
@@ -186,7 +196,7 @@ sup {
 abbr[title],
 abbr[data-original-title] {
   text-decoration: none;
-  border-bottom: 1px dotted var(--color-accent);
+  border-bottom: 1px dotted var(--color-content-accent);
   cursor: help;
 }
 
@@ -198,8 +208,8 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: 1.0666666667rem;
-  border-left: 2px solid var(--color-accent);
+  font-size: var(--font-size-16);
+  .border(left, 2px, solid, var(--color-content-accent));
 
   p {
     margin-bottom: var(--size-8);
@@ -216,8 +226,8 @@ blockquote {
   footer {
     display: block;
     color: @color-base-grey-light;
-    font-size: @font-size-small;
-    line-height: @line-height-small;
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-body);
 
     &::before {
       content: '\2014 \00A0'; // em dash, nbsp
@@ -230,17 +240,20 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: @font-size-medium;
-    line-height: @line-height-medium;
+    font-size: var(--font-size-16);
   }
 }
 
 .blockquote-reverse {
-  padding-right: 22px;
-  padding-left: 0;
-  text-align: right;
-  border-right: 2px solid var(--color-accent);
-  border-left: 0;
+  .padding(right, 22px);
+
+  .padding(left, 0);
+
+  .text-align(right);
+
+  .border(right, 2px, solid, var(--color-content-accent));
+
+  .border(left, 0);
 
   footer {
     &::before {
@@ -266,9 +279,9 @@ pre {
   margin: 0 0 var(--size-24);
   padding: var(--size-16);
   overflow: auto;
-  color: @color-base-grey-dark;
-  font-size: @font-size-small;
-  line-height: @line-height-small;
+  color: var(--color-content-secondary);
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-body);
   word-wrap: break-word;
   word-break: break-all;
   background-color: var(--color-background-neutral);
@@ -285,7 +298,7 @@ pre {
 code {
   padding: 2px var(--size-4);
   font-size: 90%;
-  color: @color-base-grey-dark;
+  color: var(--color-content-secondary);
   background-color: var(--color-background-neutral);
 }
 
@@ -306,3 +319,5 @@ samp {
   font-size: 1em;
   border-radius: 0;
 }
+
+/* stylelint-enable no-duplicate-selectors */

package/src/less/currency-flags.less

@@ -1,9 +1,10 @@
+@import (reference) './mixins/_logical-properties.less';
+
 .currency-flag {
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
 
   .btn &,
   .dropdown-menu li & {
-    margin-top: 3px;
     vertical-align: -3px;
     line-height: 16px;
   }
@@ -17,7 +18,6 @@
   .btn-lg &,
   .form-group-lg .btn &,
   .input-group-lg .btn & {
-    margin-top: 6px;
     vertical-align: -1px;
   }
 }
@@ -25,12 +25,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,4 +1,3 @@
-@import (reference) '@transferwise/neptune-css/src/less/variables/_typography.less';
 @import (reference) '@transferwise/neptune-css/src/variables/neptune-tokens.less';
 
 .decision {
@@ -32,9 +31,9 @@
   }
 
   .media-body {
-    color: @color-base-grey-dark;
-    font-weight: @font-weight-base;
-    font-size: @font-size-small; // 14px
+    color: var(--color-content-secondary);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-14);
     line-height: calc(20 / 14); // 20px
   }
 
@@ -54,15 +53,11 @@
   &: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-border-focus);
+      border-color: var(--color-interactive-accent);
     }
   }