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

package/src/less/buttons.less

@@ -2,7 +2,6 @@
 @import (reference) '../variables/legacy-variables.less';
 @import './mixins/_buttons.less';
 @import './mixins/_tab-focus.less';
-@import (reference) './mixins/_logical-properties.less';
 
 .btn {
   display: inline-block;
@@ -39,7 +38,7 @@
   &:hover,
   &:focus,
   &.focus {
-    color: var(--color-interactive-accent-hover);
+    color: @btn-default-color;
     text-decoration: none;
   }
 
@@ -64,14 +63,14 @@
 // @TODO Deprecate / Remove
 .btn-default {
   .button-variant(
-    var(--color-content-accent);
+    @btn-default-color;
     #FFF;
-    transparent;
-    var(--color-interactive-accent-hover);
-    var(--color-interactive-accent-active);
-    var(--color-interactive-accent);
-    var(--color-interactive-accent-hover);
-    var(--color-interactive-accent-active);
+    @btn-default-bg;
+    @btn-default-bg-hover;
+    @btn-default-bg-active;
+    @btn-default-border;
+    @btn-default-border-hover;
+    @btn-default-border-active;
     #FFF
   );
 }
@@ -80,37 +79,36 @@
 .btn-accent,
 .btn-primary {
   .button-variant(
-    #fff;
-    #fff;
-    var(--color-interactive-accent);
-    var(--color-interactive-accent-hover);
-    var(--color-interactive-accent-active);
-    var(--color-interactive-accent);
-    var(--color-interactive-accent-hover);
-    var(--color-interactive-accent-active);
+    @color-text-control;
+    @color-text-control;
+    @color-control-accent;
+    @color-control-accent-hover;
+    @color-control-accent-active;
+    @color-control-accent;
+    @color-control-accent-hover;
+    @color-control-accent-active;
   );
 
   &.btn-priority-2 {
     .button-variant(
-      var(--color-interactive-accent);
-      #fff;
+      @color-control-accent;
+      @color-text-control;
       transparent;
-      var(--color-interactive-accent-hover);
-      var(--color-interactive-accent-active);
-      var(--color-interactive-accent);
-      var(--color-interactive-accent-hover);
-      var(--color-interactive-accent-active);
-      var(--color-background-screen);
-      #fff;
+      @color-control-accent-hover;
+      @color-control-accent-active;
+      @color-control-accent;
+      @color-control-accent-hover;
+      @color-control-accent-active;
+      @color-background-screen;
+      @color-text-control;
     );
   }
 }
 
 // @DEPRECATED:.btn-link (use Button component with type Accent / priority Tertiary)
 .btn-link,
-.btn-info,
 .btn-accent.btn-priority-3 {
-  color: var(--color-content-accent);
+  color: @link-color;
   text-decoration: @link-decoration;
   border-color: transparent;
 
@@ -124,22 +122,22 @@
 
   &:hover,
   &:focus {
-    color: var(--color-content-accent-hover);
+    color: @link-hover-color;
     text-decoration: @link-decoration;
     border-color: transparent;
   }
 
   &:active {
-    color: var(--color-content-accent-active);
+    color: @link-active-color;
   }
 
   &[disabled],
   fieldset[disabled] & {
-    color: var(--color-content-disabled);
+    color: @link-disabled-color;
 
     &:hover,
     &:focus {
-      color: var(--color-content-disabled);
+      color: @link-disabled-color;
     }
   }
 }
@@ -148,87 +146,148 @@
 .btn-positive,
 .btn-success {
   .button-variant(
-    #fff;
-    #fff;
-    var(--color-interactive-positive);
-    var(--color-interactive-positive-hover);
-    var(--color-interactive-positive-active);
-    var(--color-interactive-positive);
-    var(--color-interactive-positive-hover);
-    var(--color-interactive-positive-active);
+    @color-text-control;
+    @color-text-control;
+    @color-control-positive;
+    @color-control-positive-hover;
+    @color-control-positive-active;
+    @color-control-positive;
+    @color-control-positive-hover;
+    @color-control-positive-active;
   );
 
   &.btn-priority-2 {
     .button-variant(
-      var(--color-interactive-positive);
-      #fff;
+      @color-control-positive;
+      @color-text-control;
       transparent;
-      var(--color-interactive-positive-hover);
-      var(--color-interactive-positive-active);
-      var(--color-interactive-positive);
-      var(--color-interactive-positive-hover);
-      var(--color-interactive-positive-active);
-      var(--color-background-screen);
-      #fff;
+      @color-control-positive-hover;
+      @color-control-positive-active;
+      @color-control-positive;
+      @color-control-positive-hover;
+      @color-control-positive-active;
+      @color-background-screen;
+      @color-text-control;
     );
   }
 }
 
-// @DEPRECATED: .btn-danger (use Button component with type Negative)
-.btn-danger,
+// @TODO Deprecate / Remove
+.btn-info {
+  .button-variant(
+    @btn-info-color;
+    #FFF;
+    @btn-info-bg;
+    @btn-info-bg-hover;
+    @btn-info-bg-active;
+    @btn-info-border;
+    @btn-info-border-hover;
+    @btn-info-border-active;
+    #FFF
+  );
+}
+
+// @TODO Deprecate / Remove
+.btn-warning {
+  .button-variant(
+    @btn-warning-color;
+    #FFF;
+    @btn-warning-bg;
+    @btn-warning-bg-hover;
+    @btn-warning-bg-active;
+    @btn-warning-border;
+    @btn-warning-border-hover;
+    @btn-warning-border-active;
+    #FFF
+  );
+}
+
 .btn-negative {
   .button-variant(
-    #fff;
-    #fff;
-    var(--color-interactive-negative);
-    var(--color-interactive-negative-hover);
-    var(--color-interactive-negative-active);
-    var(--color-interactive-negative);
-    var(--color-interactive-negative-hover);
-    var(--color-interactive-negative-active);
+    @color-text-control;
+    @color-text-control;
+    @color-control-negative;
+    @color-control-negative-hover;
+    @color-control-negative-active;
+    @color-control-negative;
+    @color-control-negative-hover;
+    @color-control-negative-active;
   );
 
   &.btn-priority-2 {
     .button-variant(
-      var(--color-interactive-negative);
-      #fff;
+      @color-control-negative;
+      @color-text-control;
       transparent;
-      var(--color-interactive-negative-hover);
-      var(--color-interactive-negative-active);
-      var(--color-interactive-negative);
-      var(--color-interactive-negative-hover);
-      var(--color-interactive-negative-active);
-      var(--color-background-screen);
-      #fff;
+      @color-control-negative-hover;
+      @color-control-negative-active;
+      @color-control-negative;
+      @color-control-negative-hover;
+      @color-control-negative-active;
+      @color-background-screen;
+      @color-text-control;
     );
   }
 }
 
+// @DEPRECATED: .btn-danger (use Button component with type Negative)
+.btn-danger {
+  .button-variant(
+    @btn-danger-color;
+    #FFF;
+    @btn-danger-bg;
+    @btn-danger-bg-hover;
+    @btn-danger-bg-active;
+    @btn-danger-border;
+    @btn-danger-border-hover;
+    @btn-danger-border-active;
+    #FFF
+  );
+}
+
 // @TODO Deprecate / Remove
 .bootstrap-select .btn-default,
 .btn-input {
   .button-variant(
-    var(--color-content-primary);
-    var(--color-content-primary);
-    var(--color-background-screen);
-    var(--color-background-screen);
-    var(--color-background-screen);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
-    var(--color-interactive-secondary-active);
+    @input-color;
+    @input-color;
+    @input-bg;
+    @input-bg;
+    @input-bg;
+    @input-border;
+    @input-border;
+    @input-border-focus
   );
 }
 
 .btn-input .caret {
-  .margin(left, var(--size-8));
+  margin-left: 8px;
+}
+
+// @TODO Deprecate / Remove
+.btn-image {
+  background-color: @brand-grey-plus-10;
+  background-color: rgba(255, 255, 255, 0.4);
+  color: @brand-white;
+
+  &:hover,
+  &:focus {
+    background-color: @brand-grey-plus-10;
+    background-color: rgba(24, 33, 56, 0.56);
+  }
+
+  &:active,
+  &:hover:active {
+    background: @brand-grey-minus-20;
+  }
 }
 
 // @TODO Deprecate / Remove
 .btn-inverse {
   .button-outline(
-    #fff;
-    #e2e6e8;
-    #5d7079;
+    @brand-white;
+    @brand-smoke-plus-10;
+    @brand-grey
   );
 }
 
@@ -301,31 +360,39 @@ input[type="button"] {
 // @TODO Deprecate / Remove
 .btn-input {
   font-weight: @font-weight-normal;
-  .padding(left, @padding-base-horizontal);
-
-  .padding(right, @padding-base-horizontal);
+  padding-left: @padding-base-horizontal;
+  padding-right: @padding-base-horizontal;
 
   &:hover {
-    border-color: var(--color-interactive-secondary-hover);
+    border-color: @input-border-hover;
   }
 
   &.active,
   &:active,
   &.focus,
   &:focus {
-    border-color: var(--color-interactive-accent-active);
+    border-color: @input-border-focus;
     outline: 0 none !important;
   }
 
   // stylelint-disable-next-line no-duplicate-selectors
   .caret {
-    color: var(--color-content-accent);
+    color: @brand-light-blue;
   }
 
   &[disabled] {
-    background-color: var(--color-background-neutral);
-    border-color: var(--color-interactive-disabled);
-    color: var(--color-content-disabled);
+    background-color: @input-bg-disabled;
+    color: @input-color-disabled;
+
+    .caret {
+      color: @input-color-disabled;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: @input-bg-disabled;
+      color: @input-color-disabled;
+    }
   }
 
   .form-control-placeholder {
@@ -336,17 +403,16 @@ input[type="button"] {
   }
 
   &.btn-sm {
-    .padding(left, 12px);
-
-    .padding(right, 12px);
+    padding-left: 12px;
+    padding-right: 12px;
   }
 
   &.btn-lg {
-    font-size: var(--font-size-20);
+    font-size: @input-font-size-large;
 
     &.btn-addon,
     &.btn-input-inverse {
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: @font-weight-semi-bold;
     }
   }
 }
@@ -356,15 +422,15 @@ input[type="button"] {
 .btn-input-inverse,
 .btn-addon {
   .button-variant(
-    var(--color-navy-content-primary);
-    var(--color-navy-content-primary);
-    var(--color-navy-background-screen);
-    var(--color-navy-background-screen);
-    var(--color-navy-background-screen);
-    var(--color-navy-background-elevated);
-    var(--color-navy-background-screen);
-    var(--color-navy-background-screen);
-    var(--color-background-screen);
+    #FFF;
+    #FFF;
+    @brand-navy-minus-10;
+    @brand-navy-minus-20;
+    @brand-navy-minus-20;
+    @brand-navy-minus-10;
+    @brand-navy-minus-20;
+    @brand-navy-minus-20;
+    #FFF
   );
 
   &:focus {
@@ -387,9 +453,9 @@ input[type="button"] {
 }
 // @TODO Deprecate / Remove
 .bootstrap-select.open > .dropdown-toggle.btn-default {
-  border-color: var(--color-interactive-accent);
-  background-color: var(--color-background-screen);
-  color: var(--color-content-primary);
+  border-color: @input-border-focus;
+  background-color: @input-bg;
+  color: @input-color;
 }
 
 .btn-loader {
@@ -420,18 +486,16 @@ input[type="button"] {
 }
 
 .btn-input.btn {
-  .text-align(left);
+  text-align: left;
 
   .tw-icon {
     position: absolute;
-    .right(16px);
-
+    right: 16px;
     top: 16px;
   }
 
   &.btn-sm .tw-icon {
-    .right(8px);
-
+    right: 8px;
     top: 8px;
   }
 

package/src/less/chevron.less

@@ -20,9 +20,5 @@
 }
 
 .chevron-color {
-  color: var(--color-content-accent);
-}
-
-.btn-input-inverse > .chevron-color {
-  color: var(--color-navy-content-accent);
+  color: var(--color-control-accent);
 }

package/src/less/circles.less

@@ -1,216 +1,24 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_circle.less';
-@import (reference) './mixins/_logical-properties.less';
-
-@circle-xs-diameter: 24px;
-@circle-sm-diameter: 48px;
-@circle-md-diameter: 72px;
-@circle-lg-diameter: 96px;
-
-@circle-xs-font-size: 10px;
-@circle-sm-font-size: 16px;
-@circle-md-font-size: 24px;
-@circle-lg-font-size: 32px;
-
-@circle-xs-icon-size: 14px;
-@circle-sm-icon-size: 24px;
-@circle-md-icon-size: 32px;
-@circle-lg-icon-size: 40px;
-
-@circle-inverse-bg: var(--color-background-neutral);
-
-.circle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-content-primary);
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  border: 1px solid transparent;
-  background-color: #fff;
-  border-radius: 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-  margin-left: auto;
-  margin-right: auto;
-  transition:
-    background-color ease @transition-duration,
-    border-color ease @transition-duration,
-    color ease @transition-duration;
-
-  &.active {
-    border-color: var(--color-interactive-accent-active);
-    background-color: var(--color-interactive-accent-active);
-  }
-
-  img {
-    width: 100%;
-    border-radius: 50%;
-    vertical-align: initial;
-  }
-
-  img& {
-    background-color: transparent;
-    border-radius: 50%;
-  }
-
-  &[style] {
-    border: 0;
-    border-radius: 50% !important;
-  }
-
-  a& {
-    &[style]:hover {
-      border: 1px solid var(--color-interactive-accent);
-    }
-  }
-
-  .navbar-nav > li > a & {
-    width: @navbar-line-height;
-    height: @navbar-line-height;
-    line-height: @navbar-line-height;
-
-    .icon {
-      line-height: @navbar-line-height;
-    }
-  }
-}
-
-.circle,
-.circle-sm {
-  .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
-}
-
-.circle-xs {
-  .circle-variant(@circle-xs-diameter, @circle-xs-font-size, @circle-xs-icon-size);
-}
-
-.circle-md {
-  .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
-}
-
-.circle-lg {
-  .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
-}
-
-a.circle,
-a.circle .icon {
-  text-decoration: none;
-}
+// TODO: remove bootstrap dependencies
 
-a:hover .circle,
-a.circle:hover {
-  border-color: var(--color-interactive-accent);
-  color: var(--color-content-accent);
-  text-decoration: none;
-}
-
-a:hover .circle.active,
-a.circle.active:hover {
-  text-decoration: none;
-  color: #fff;
-}
-
-/* TODO this could be tidier, ideally change the general link behaviour */
-
-.dropdown-menu li a:hover .circle {
-  background-color: var(--color-background-screen);
-  border-color: #fff;
-  color: var(--color-content-primary);
-}
-
-.dropdown-menu .disabled a:hover .circle {
-  background-color: @circle-inverse-bg;
-  border-color: transparent;
-  color: var(--color-content-disabled);
-}
-
-.circle-inverse {
-  background-color: @circle-inverse-bg;
-}
-
-.circle-responsive {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  width: @line-height-computed;
-  height: @line-height-computed;
-  line-height: @line-height-computed;
-  font-size: @circle-sm-font-size;
-  overflow: visible;
-
-  .icon {
-    font-size: @circle-sm-icon-size;
-    line-height: @circle-sm-icon-size;
-  }
-
-  &.circle-lg {
-    border-radius: 50%;
-    background-color: #fff;
-
-    &.circle-inverse {
-      background-color: var(--color-background-neutral);
-    }
-    .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
-  }
-}
-
-@media (--screen-sm) {
-  .circle-responsive {
-    border-radius: 50%;
-    background-color: #fff;
+// variables
+@import (reference) '../variables/legacy-variables.less';
 
-    &.circle,
-    &.circle-sm,
-    &.circle-md {
-      .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
-    }
+// mixins
+@import (reference) 'bootstrap/less/mixins/circle.less';
+@import 'bootstrap/less/circle.less';
 
-    &.circle-lg {
-      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
-    }
+// From transferwise.less
 
-    &.circle-inverse {
-      background-color: var(--color-background-neutral);
-    }
-  }
-}
-
-@media (--screen-md-min) {
-  .circle-responsive {
-    &.circle-md {
-      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
-    }
-
-    &.circle-lg {
-      .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
-    }
-  }
-}
-
-.dropdown-menu {
-  li,
-  li > a {
-    > .circle:first-child {
-      .margin(right, var(--size-8));
-    }
-
-    > .circle-sm:first-child {
-      .margin(right, var(--size-12));
-    }
+li,
+li > a {
+  > .circle:first-child {
+    margin-right: var(--size-8);
   }
 }
 
 .btn {
   .circle:first-child {
-    .margin(right, var(--size-8));
-  }
-
-  .circle-sm:first-child {
-    .margin(right, var(--size-12));
+    margin-right: var(--size-8);
   }
 }
 
@@ -218,7 +26,12 @@ a.circle.active:hover {
 .dropdown-menu li .circle .tw-icon {
   float: none;
   margin-top: 0;
-  .margin(left, 0);
+  margin-left: 0;
+  margin-right: 0;
+}
 
-  .margin(right, 0);
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }