@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

package/src/less/close.less

@@ -1,40 +1,8 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_tab-focus.less';
-@import (reference) './mixins/_logical-properties.less';
-
-.close {
-  .float(right);
-
-  font-size: calc(var(--font-size-16) * 2);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-title);
-  color: var(--color-content-accent);
-  text-decoration: none;
+// TODO: remove bootstrap dependencies
 
-  &:hover,
-  &:focus {
-    color: var(--color-content-accent-hover);
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  &:focus {
-    .tab-focus();
-  }
-
-  &:active {
-    color: var(--color-content-accent-active);
-  }
+// variables
+@import (reference) '../variables/legacy-variables.less';
 
-  // Additional properties for button version
-  // iOS requires the button element instead of an anchor tag.
-  // If you want the anchor version, it requires `href="#"`.
-  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-  button& {
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    appearance: none;
-  }
-}
+// mixins
+@import (reference) 'bootstrap/less/mixins/tab-focus.less';
+@import 'bootstrap/less/close.less';

package/src/less/column-layout.less

@@ -1,161 +1,4 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
-
-.column-layout {
-  width: 100%;
-}
-
-.column-layout-left,
-.column-layout-right {
-  position: fixed;
-  width: @column-width;
-  vertical-align: top;
-  height: 100%;
-  z-index: 3;
-  transition: transform ease 0.5s;
-  top: 0;
-  max-height: 100vh;
-  overflow-y: auto;
-}
-
-.column-layout-left {
-  transform: translateX(-@column-width);
-}
-
-.column-layout-right {
-  .right(0);
-
-  transform: translateX(@column-width);
-}
-
-.column-layout-left.open,
-.column-layout-right.open {
-  transform: translateX(0);
-}
-
-.column-layout-main {
-  width: 100%;
-}
-
-.column-layout-top {
-  position: fixed;
-  top: 0;
-  width: @column-width;
-  max-height: 100vh;
-  overflow-y: auto;
-  backface-visibility: hidden;
-}
-
-.column-layout-bottom {
-  position: fixed;
-  bottom: 0;
-  width: @column-width;
-  padding: var(--size-24);
-}
-
-@media (--screen-lg) {
-  .column-layout {
-    display: table;
-  }
-
-  .column-layout-left,
-  .column-layout-right {
-    position: relative;
-    display: table-cell;
-    transform: none;
-  }
-
-  .column-layout-main {
-    display: table-cell;
-    vertical-align: top;
-    width: auto;
-  }
-}
-
-.column-layout-cover.in {
-  width: 100%;
-  height: 100%;
-  opacity: 0.9;
-}
+// TODO: remove bootstrap dependencies
 
-.column-layout-cover .close {
-  position: absolute;
-  .left(@column-width + 20px);
-
-  top: -1000px;
-  opacity: 0;
-  transition: opacity 0.35s ease;
-  transition-delay: 0.35s;
-  text-decoration: none;
-}
-
-.column-layout-cover.in .close {
-  opacity: 1;
-  top: 20px;
-}
-
-@media (min-width: @screen-lg-min) {
-  .column-layout-cover {
-    display: none;
-  }
-}
-
-@media (--screen-md) {
-  // apply to body to prevent background scrolling
-  .column-layout-open {
-    overflow: hidden;
-  }
-
-  .column-layout-cover {
-    position: fixed;
-    display: block;
-    top: 0;
-    .left(0);
-
-    width: 0;
-    height: 0;
-    opacity: 0;
-    transition: opacity 0.35s ease;
-    background-color: var(--color-navy-background-elevated);
-    cursor: pointer;
-    z-index: @zindex-mobile-nav-background;
-  }
-
-  .column-layout-left,
-  .column-layout-right {
-    z-index: @zindex-mobile-nav;
-  }
-}
-
-.column-layout-main .container {
-  // ensures we use the full width on default mac screen
-  max-width: 1176px;
-  .margin(left,0);
-}
-
-.column-layout-brand {
-  padding: var(--size-4) @spacing-1-tablet;
-}
-
-@media (--screen-lg) {
-  .column-layout-brand {
-    padding-left: @spacing-1-desktop;
-    padding-right: @spacing-1-desktop;
-  }
-}
-
-body > .column-layout {
-  min-height: 100vh;
-  height: 100vh;
-}
-
-.column-layout-left .column-layout-top {
-  background-position: 0 var(--size-40);
-  background-repeat: no-repeat;
-  background-size: @column-width auto;
-  height: 100vh;
-
-  @media (min-height: 596px) {
-    .background-position(left, bottom);
-  }
-}
+@import (reference) '../variables/legacy-variables.less';
+@import 'bootstrap/less/column-layout.less';

package/src/less/core/_scaffolding.less

@@ -1,5 +1,5 @@
 @import (reference) '../../variables/neptune-tokens.less';
-@import (reference) '../mixins/_logical-properties.less';
+@import (reference) '../variables/_typography.less';
 
 *,
 ::before,
@@ -8,10 +8,10 @@
 }
 
 html {
-  color: var(--color-content-secondary);
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-body);
-  font-family: 'Averta', 'Avenir W02', 'Avenir', Helvetica, Arial, sans-serif;
+  color: var(--color-text-secondary);
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  font-family: @font-family-base;
   letter-spacing: 0.016em;
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
@@ -48,7 +48,7 @@ pre {
 
 a,
 .anchor {
-  color: var(--color-content-accent);
+  color: var(--color-text-link);
   font-weight: 600;
   letter-spacing: 0;
   text-decoration: underline;
@@ -56,12 +56,12 @@ a,
 
   &:hover,
   &:focus {
-    color: var(--color-content-accent-hover);
+    color: var(--color-text-link-hover);
     text-decoration: underline;
   }
 
   &:active {
-    color: var(--color-content-accent-active);
+    color: var(--color-text-link-active);
   }
 
   &:focus {
@@ -70,21 +70,21 @@ a,
   }
 
   &.secondary {
-    color: var(--color-content-positive);
-    font-weight: var(--font-weight-regular);
+    color: @color-base-navy-light;
+    font-weight: @font-weight-base;
 
     &:hover,
     &:focus {
-      color: var(--color-content-accent-hover);
+      color: var(--color-text-link-hover);
     }
 
     &:active {
-      color: var(--color-content-accent-active);
+      color: var(--color-text-link-active);
     }
   }
 
   &[disabled] {
-    color: var(--color-content-disabled);
+    color: @color-base-smoke-mid;
     cursor: default;
   }
 }
@@ -198,7 +198,7 @@ textarea {
   // stylelint-disable-next-line selector-pseudo-class-no-unknown
   &:input-placeholder,
   &::placeholder {
-    color: var(--color-content-disabled);
+    color: var(--color-text-inactive);
   }
 }
 
@@ -209,7 +209,7 @@ progress {
 ol,
 ul {
   margin: 0 0 var(--size-24);
-  .padding-shorthand(0, 0, 0, 38px);
+  padding: 0 0 0 38px;
 
   ol,
   ul {
@@ -218,44 +218,39 @@ ul {
 }
 
 .list-unstyled {
-  .padding(left, 0);
-
+  padding-left: 0;
   list-style: none;
 }
 
 .list-inline {
-  .margin(left, calc(var(--size-4) * -1));
-
-  .padding(left, 0);
-
+  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));
+    padding-right: var(--size-8);
+    padding-left: var(--size-4);
+    border-right: 1px solid var(--color-border-neutral);
 
     &:last-child {
-      .border(right, 0);
+      border-right: 0;
     }
   }
 }
 
 dt,
 dd {
-  line-height: var(--line-height-body);
+  line-height: @line-height-base;
 }
 
 dt {
-  font-size: var(--font-size-14);
+  font-size: @font-size-small;
 }
 
 dd {
   margin-bottom: var(--size-16);
-  color: var(--color-content-primary);
+  color: var(--color-text-primary);
 
   @media (--screen-sm) {
     margin-bottom: var(--size-24);
@@ -278,20 +273,18 @@ dd {
 
   @media (--screen-sm) {
     dt {
-      .float(left);
-      .clear(left);
-
+      float: left;
+      clear: left;
       width: 156px;
       overflow: hidden;
       white-space: nowrap;
-      .text-align(left);
-
+      text-align: left;
       text-overflow: ellipsis;
     }
 
     dd {
       margin-bottom: var(--size-8);
-      .margin(left, 180px, 0);
+      margin-left: 180px;
     }
   }
 }
@@ -307,8 +300,7 @@ dd {
 
   dd {
     flex: 1 1 auto;
-    .text-align(right);
-
+    text-align: right;
     word-break: break-all;
   }
 }
@@ -319,7 +311,7 @@ hr {
   margin: var(--size-16) auto;
   overflow: visible; // Normalize 8.0.1
   border: 0;
-  border-top: 1px solid var(--color-border-neutral);
+  border-top: 1px solid @color-base-smoke-light;
 
   @media (--screen-sm) {
     margin: var(--size-24) auto;

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

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