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

package/src/less/button-groups.less

@@ -1,7 +1,8 @@
 @import (reference) '../variables/legacy-variables.less';
-@import './mixins/_border-radius.less';
-@import './mixins/_clearfix.less';
-@import './mixins/_tab-focus.less';
+@import (reference) './mixins/_logical-properties.less';
+@import (reference) './mixins/_border-radius.less';
+@import (reference) './mixins/_clearfix.less';
+@import (reference) './mixins/_tab-focus.less';
 
 // Make the div behave like a button
 .btn-group,
@@ -12,7 +13,7 @@
 
   > .btn {
     position: relative;
-    float: left;
+    .float(left);
   }
 }
 
@@ -22,22 +23,23 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -1px;
+    .margin(left, -1px);
   }
 }
 
 .expand-toolbar() {
-  margin-left: -4px; // Offset the first child's margin
-  margin-right: -4px; // Offset the first child's margin
-
+  .margin(left, -4px;) // Offset the first child's margin
+  .margin(right, -4px;) // Offset the first child's margin
   .btn,
   .btn-group,
   .input-group {
     width: auto;
     margin-bottom: 0;
-    float: left;
-    margin-left: 4px;
-    margin-right: 4px;
+    .float(left);
+
+    .margin(left, 4px);
+
+    .margin(right, 4px);
   }
 }
 
@@ -55,7 +57,8 @@
   .btn-group .btn,
   .input-group .btn {
     width: auto;
-    margin: 0 0 0 -1px;
+    margin: 0;
+    .margin(left, -1);
   }
 
   @media (min-width: @screen-lg-min) {
@@ -100,21 +103,21 @@
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
-  margin-left: 0;
+  .margin(left, 0);
 
   &:not(:last-child):not(.dropdown-toggle) {
-    .border-right-radius(0);
+    .border-radius(right, 0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
-  .border-left-radius(0);
+  .border-radius(left, 0);
 }
 
 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
 .btn-group > .btn-group {
-  float: left;
+  .float(left);
 }
 
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
@@ -124,12 +127,12 @@
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
-    .border-right-radius(0);
+    .border-radius(right, 0);
   }
 }
 
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  .border-left-radius(0);
+  .border-radius(left, 0);
 }
 
 // On active and open, don't show outline
@@ -159,13 +162,15 @@
 
 // Give the line between buttons some depth
 .btn-group > .btn + .dropdown-toggle {
-  padding-left: 12px;
-  padding-right: 12px;
+  .padding(left, 12px);
+
+  .padding(right, 12px);
 }
 
 .btn-group > .btn-lg + .dropdown-toggle {
-  padding-left: 12px;
-  padding-right: 12px;
+  .padding(left, 12px);
+
+  .padding(right, 12px);
 }
 
 // The clickable button for toggling the menu
@@ -227,7 +232,7 @@
   > .btn-group + .btn,
   > .btn-group + .btn-group {
     margin-top: -1px;
-    margin-left: 0;
+    .margin(left, 0);
   }
 }
 
@@ -284,7 +289,7 @@
   }
 
   > .btn-group .dropdown-menu {
-    left: auto;
+    .left(auto);
   }
 }
 
@@ -314,11 +319,11 @@
 
 .btn-group .btn {
   + .btn-success {
-    border-left: 1px solid @brand-green-minus-10;
+    .border(left, 1px, solid, var(--color-content-positive));
   }
 
   + .btn-primary {
-    border-left: 1px solid @brand-light-blue-minus-10;
+    .border(left, 1px, solid, var(--color-content-accent));
   }
 }
 
@@ -332,30 +337,32 @@
   }
 
   .btn-input.btn {
-    text-align: left;
+    .text-align(left);
 
     .caret {
       position: absolute;
-      right: 16px;
+      .right(16px);
+
       top: 16px;
     }
 
     &.btn-sm .caret {
-      right: 8px;
+      .right(8px);
     }
 
     &.dropdown-toggle {
-      padding-right: 40px;
+      .padding(right, 40px);
+
       overflow: hidden;
       text-overflow: ellipsis;
 
       @media (min-width: @screen-sm-min) {
-        padding-right: 48px;
+        .padding(right, 48px);
       }
     }
 
     &.btn-sm.dropdown-toggle {
-      padding-right: 33px;
+      .padding(right, 33px);
     }
   }
 
@@ -365,7 +372,7 @@
     .caret {
       position: relative;
       top: 0;
-      right: 0;
+      .right(0);
     }
   }
 }
@@ -396,11 +403,11 @@
   }
 
   .small {
-    color: @text-secondary-color;
-    line-height: (@line-height-computed - 1px);
+    line-height: calc(var(--line-height-control) - 1px);
+    color: var(--color-content-secondary);
 
     &.text-ellipsis {
-      line-height: @line-height-computed;
+      line-height: var(--line-height-control);
     }
   }
 }
@@ -412,7 +419,7 @@
 }
 
 .btn-group .secondary {
-  font-size: @font-size-small;
-  color: @text-secondary-color;
+  font-size: var(--font-size-14);
+  color: var(--color-content-secondary);
   line-height: 24px;
 }

package/src/less/buttons.less

@@ -2,6 +2,7 @@
 @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;
@@ -38,7 +39,7 @@
   &:hover,
   &:focus,
   &.focus {
-    color: @btn-default-color;
+    color: var(--color-interactive-accent-hover);
     text-decoration: none;
   }
 
@@ -79,28 +80,28 @@
 .btn-accent,
 .btn-primary {
   .button-variant(
-    @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;
+    var(--color-base-white-light);
+    var(--color-base-white-light);
+    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);
   );
 
   &.btn-priority-2 {
     .button-variant(
-      @color-control-accent;
-      @color-text-control;
+      var(--color-interactive-accent);
+      var(--color-base-white-light);
       transparent;
-      @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;
+      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);
+      var(--color-base-white-light);
     );
   }
 }
@@ -108,7 +109,7 @@
 // @DEPRECATED:.btn-link (use Button component with type Accent / priority Tertiary)
 .btn-link,
 .btn-accent.btn-priority-3 {
-  color: @link-color;
+  color: var(--color-content-accent);
   text-decoration: @link-decoration;
   border-color: transparent;
 
@@ -122,22 +123,22 @@
 
   &:hover,
   &:focus {
-    color: @link-hover-color;
+    color: var(--color-content-accent-hover);
     text-decoration: @link-decoration;
     border-color: transparent;
   }
 
   &:active {
-    color: @link-active-color;
+    color: var(--color-content-accent-active);
   }
 
   &[disabled],
   fieldset[disabled] & {
-    color: @link-disabled-color;
+    color: var(--color-content-disabled);
 
     &:hover,
     &:focus {
-      color: @link-disabled-color;
+      color: var(--color-content-disabled);
     }
   }
 }
@@ -146,28 +147,28 @@
 .btn-positive,
 .btn-success {
   .button-variant(
-    @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;
+    var(--color-base-white-light);
+    var(--color-base-white-light);
+    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);
   );
 
   &.btn-priority-2 {
     .button-variant(
-      @color-control-positive;
-      @color-text-control;
+      var(--color-interactive-positive);
+      var(--color-base-white-light);
       transparent;
-      @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;
+      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);
+      var(--color-base-white-light);
     );
   }
 }
@@ -202,66 +203,53 @@
   );
 }
 
+// @DEPRECATED: .btn-danger (use Button component with type Negative)
+.btn-danger,
 .btn-negative {
   .button-variant(
-    @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;
+    var(--color-base-white-light);
+    var(--color-base-white-light);
+    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);
   );
 
   &.btn-priority-2 {
     .button-variant(
-      @color-control-negative;
-      @color-text-control;
+      var(--color-interactive-negative);
+      var(--color-base-white-light);
       transparent;
-      @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;
+      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);
+      var(--color-base-white-light);
     );
   }
 }
 
-// @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(
-    @input-color;
-    @input-color;
-    @input-bg;
-    @input-bg;
-    @input-bg;
-    @input-border;
-    @input-border;
-    @input-border-focus
+    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);
   );
 }
 
 .btn-input .caret {
-  margin-left: 8px;
+  .margin(left, var(--size-8));
 }
 
 // @TODO Deprecate / Remove
@@ -360,39 +348,31 @@ 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: @input-border-hover;
+    border-color: var(--color-interactive-secondary-hover);
   }
 
   &.active,
   &:active,
   &.focus,
   &:focus {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-accent-active);
     outline: 0 none !important;
   }
 
   // stylelint-disable-next-line no-duplicate-selectors
   .caret {
-    color: @brand-light-blue;
+    color: var(--color-content-accent);
   }
 
   &[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;
-    }
+    background-color: var(--color-background-neutral);
+    border-color: var(--color-interactive-disabled);
+    color: var(--color-content-disabled);
   }
 
   .form-control-placeholder {
@@ -403,8 +383,9 @@ input[type="button"] {
   }
 
   &.btn-sm {
-    padding-left: 12px;
-    padding-right: 12px;
+    .padding(left, 12px);
+
+    .padding(right, 12px);
   }
 
   &.btn-lg {
@@ -412,7 +393,7 @@ input[type="button"] {
 
     &.btn-addon,
     &.btn-input-inverse {
-      font-weight: @font-weight-semi-bold;
+      font-weight: var(--font-weight-semi-bold);
     }
   }
 }
@@ -453,9 +434,9 @@ input[type="button"] {
 }
 // @TODO Deprecate / Remove
 .bootstrap-select.open > .dropdown-toggle.btn-default {
-  border-color: @input-border-focus;
-  background-color: @input-bg;
-  color: @input-color;
+  border-color: var(--color-interactive-accent);
+  background-color: var(--color-background-screen);
+  color: var(--color-content-primary);
 }
 
 .btn-loader {
@@ -486,16 +467,18 @@ 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,5 +20,5 @@
 }
 
 .chevron-color {
-  color: var(--color-control-accent);
+  color: var(--color-content-accent);
 }