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

package/src/less/forms/checkbox-radio.less

@@ -1,27 +1,37 @@
 @import (reference) '../../variables/legacy-variables.less';
 @import (reference) '../../variables/neptune-tokens.less';
-@import (reference) '../mixins/_logical-properties.less';
 
 .radio,
 .checkbox {
-  border-color: var(--color-interactive-secondary);
+  border-color: @input-border;
 
   > label {
     position: relative;
-    .padding(left, 48px);
+    padding-left: 48px;
+
+    &:active:hover {
+      border-color: @input-border-focus;
+
+      input[type='radio'],
+      input[type='checkbox'] {
+        + .input-replacement {
+          border-color: @input-border-focus;
+        }
+      }
+    }
 
     input[type='radio'],
     input[type='checkbox'] {
       display: block;
       position: absolute;
       top: 13px;
-      .left(40px);
+      left: 40px;
     }
   }
 }
 
 .tw-checkbox-button {
-  border: 1px solid var(--color-interactive-secondary);
+  border: 1px solid @color-base-smoke-mid;
   background: var(--color-background-screen);
   width: 22px;
   height: 22px;
@@ -44,7 +54,7 @@
   &:hover,
   input[type='checkbox']:hover + &,
   .checkbox:hover & {
-    border-color: var(--color-interactive-secondary);
+    border-color: @color-base-grey-light;
   }
 
   &:focus,
@@ -55,15 +65,15 @@
   &:active,
   &.active,
   input[type='checkbox']:active + & {
-    border-color: var(--color-interactive-secondary);
+    border-color: @input-border-focus;
     outline: none;
   }
 
   &[checked],
   &.checked,
   input[type='checkbox']:checked + & {
-    border-color: var(--color-interactive-accent) !important;
-    background-color: var(--color-interactive-accent);
+    border-color: var(--color-control-accent) !important;
+    background-color: var(--color-control-accent);
 
     .tw-checkbox-check {
       display: inline-block;
@@ -73,55 +83,55 @@
   &[checked]:hover,
   &.checked:hover,
   input[type='checkbox']:not(:disabled):checked:hover + & {
-    border-color: var(--color-interactive-accent-hover) !important;
-    background-color: var(--color-interactive-accent-hover);
+    border-color: var(--color-control-accent-hover) !important;
+    background-color: var(--color-control-accent-hover);
   }
 
   &[checked]:active,
   &.checked:active,
   input[type='checkbox']:not(:disabled):checked:active + & {
-    border-color: var(--color-interactive-accent-active) !important;
-    background-color: var(--color-interactive-accent-active);
+    border-color: var(--color-control-accent-active) !important;
+    background-color: var(--color-control-accent-active);
   }
 
   &[disabled],
   input[type='checkbox']:disabled + & {
-    background-color: var(--color-background-neutral);
-    border-color: var(--color-interactive-disabled) !important;
+    background-color: @color-base-smoke-fade;
+    border-color: @color-base-smoke-mid !important;
     cursor: @cursor-disabled;
 
     .tw-checkbox-check {
-      color: var(--color-content-disabled);
+      color: var(--color-text-inactive);
     }
   }
 
   .checkbox.has-error &,
   &.has-error {
-    border-color: var(--color-interactive-negative) !important;
+    border-color: var(--color-control-negative) !important;
 
     &[checked],
     &.checked {
-      background-color: var(--color-interactive-negative);
+      background-color: var(--color-control-negative);
     }
 
     &[disabled] {
-      background-color: var(--color-background-neutral);
+      background-color: @color-base-smoke-fade;
     }
   }
 
   .checkbox.has-error input[type='checkbox']:checked + & {
-    border-color: var(--color-interactive-negative) !important;
-    background-color: var(--color-interactive-negative);
+    border-color: var(--color-control-negative) !important;
+    background-color: var(--color-control-negative);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:hover + & {
-    border-color: var(--color-interactive-negative-hover) !important;
-    background-color: var(--color-interactive-negative-hover);
+    border-color: var(--color-control-negative-hover) !important;
+    background-color: var(--color-control-negative-hover);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:active + & {
-    border-color: var(--color-interactive-negative-active) !important;
-    background-color: var(--color-interactive-negative-active);
+    border-color: var(--color-control-negative-active) !important;
+    background-color: var(--color-control-negative-active);
   }
 }
 
@@ -129,8 +139,8 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 1px solid var(--color-interactive-secondary);
-  background: var(--color-background-screen);
+  border: 1px solid @input-border;
+  background: @input-bg;
   display: inline-block;
   padding: 0;
   vertical-align: middle;
@@ -141,65 +151,58 @@
     text-align: center;
     width: 0;
     height: 0;
-    margin: 0;
-    .margin(left, 11px);
-
+    margin: 0 0 0 11px;
     transition: all 0.15s ease-in-out;
   }
 
   .radio:hover &,
   &:hover {
-    border-color: var(--color-interactive-secondary-hover);
+    border-color: @input-border-hover;
   }
 
   &:focus,
   &.focus,
   &:active,
   &.active {
-    border-color: var(--color-interactive-secondary-active);
+    border-color: @input-border-focus;
     outline: none;
   }
 
   &[checked],
   &.checked {
-    border-color: var(--color-interactive-accent) !important;
+    border-color: @input-border-focus !important;
 
     .tw-radio-check {
       width: 12px;
       height: 12px;
-      margin-top: 5px;
-      .margin(right, 5px);
-
-      .margin(left, 5px);
-
-      margin-bottom: 5px;
+      margin: 5px;
       display: block;
-      background-color: var(--color-interactive-accent);
+      background-color: @input-border-focus;
     }
   }
 
   &[disabled],
   &.disabled {
-    background-color: var(--color-background-neutral);
-    border-color: var(--color-interactive-disabled) !important;
+    background-color: @input-bg-disabled;
+    border-color: @input-border-disabled !important;
     cursor: @cursor-disabled;
 
     .tw-radio-check {
-      background-color: var(--color-interactive-disabled);
+      background-color: @input-border-disabled;
     }
   }
 
   .radio.has-error &,
   &.has-error {
-    border-color: var(--color-interactive-negative) !important;
+    border-color: @brand-red !important;
 
     &[checked] .tw-radio-check,
     &.checked .tw-radio-check {
-      background-color: var(--color-interactive-negative);
+      background-color: @brand-red;
     }
 
     &[disabled] .tw-radio-check {
-      background-color: var(--color-interactive-disabled);
+      background-color: @input-border-disabled;
     }
   }
 }
@@ -207,22 +210,20 @@
 .checkbox {
   &.disabled label,
   &.disabled label:hover {
-    border-color: var(--color-interactive-disabled);
-    color: var(--color-content-disabled) !important;
+    border-color: @input-border-disabled;
+    color: @color-text-inactive !important;
   }
 }
 
 .radio .tw-radio-button {
   position: absolute;
-  .left(13px);
-
+  left: 13px;
   top: 11px;
 }
 
 .checkbox .tw-checkbox-button {
   position: absolute;
-  .left(14px);
-
+  left: 14px;
   top: 12px;
 }
 
@@ -261,8 +262,7 @@
   > label {
     display: flex;
     align-items: center;
-    // Added rtl mixing even the horizontal values are equal, to increase specificity created in line 11
-    .padding-shorthand(var(--size-8) var(--size-16));
+    padding: var(--size-8) var(--size-16);
   }
 
   .np-checkbox__text,

package/src/less/grid.less

@@ -2,7 +2,6 @@
 @import (reference) './mixins/_clearfix.less';
 @import (reference) './mixins/_grid.less';
 @import (reference) './mixins/_grid-framework.less';
-@import (reference) './mixins/_logical-properties.less';
 
 // Set the container width, and override it for fixed navbars in media queries.
 .container {
@@ -13,17 +12,17 @@
     max-width: @container-xl;
   }
 
-  .padding(right, @spacing-1-mobile);
-  .padding(left, @spacing-1-mobile);
+  padding-right: @spacing-1-mobile;
+  padding-left: @spacing-1-mobile;
 
   @media (min-width: @screen-sm-min) {
-    .padding(right, @spacing-1-tablet);
-    .padding(left, @spacing-1-tablet);
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
   }
 
   @media (min-width: @screen-lg-min) {
-    .padding(right, @spacing-1-desktop);
-    .padding(left, @spacing-1-desktop);
+    padding-right: @spacing-1-desktop;
+    padding-left: @spacing-1-desktop;
   }
 }
 
@@ -67,15 +66,15 @@
 
 @media (max-width: @screen-xs-max) {
   .container {
-    .padding(right, @spacing-1-mobile);
-    .padding(left, @spacing-1-mobile);
+    padding-right: @spacing-1-mobile;
+    padding-left: @spacing-1-mobile;
   }
 }
 
 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
   .container {
-    .padding(right, @spacing-1-tablet);
-    .padding(left, @spacing-1-tablet);
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
   }
 }
 
@@ -132,23 +131,23 @@
 // Make grid gutters smaller on mobile
 @media (max-width: @screen-xs-max) {
   .row {
-    .margin(right, -8px);
-    .margin(left, -8px);
+    margin-right: -8px;
+    margin-left: -8px;
   }
 
   [class*='col-'] {
-    .padding(right, 8px);
-    .padding(left, 8px);
+    padding-right: 8px;
+    padding-left: 8px;
   }
 }
 
 .make-grid-columns-wide(@gutter: @grid-gutter-width) {
-  .margin(right, -@gutter / 2);
-  .margin(left, -@gutter / 2);
+  margin-right: -@gutter / 2;
+  margin-left: -@gutter / 2;
 
   [class*='col-'] {
-    .padding(right, @gutter / 2);
-    .padding(left, @gutter / 2);
+    padding-right: @gutter / 2;
+    padding-left: @gutter / 2;
   }
 }
 
@@ -172,14 +171,14 @@
 
 .container--text {
   max-width: 700px;
-  .margin(right, auto);
-  .margin(left, auto);
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .container--wide {
   max-width: 1500px;
-  .margin(right, auto);
-  .margin(left, auto);
+  margin-right: auto;
+  margin-left: auto;
 
   @media (min-width: @screen-xl-min) {
     max-width: 1500px;

package/src/less/input-groups.less

@@ -2,7 +2,6 @@
 @import './mixins/_border-radius.less';
 @import './mixins/_buttons.less';
 @import './mixins/_forms.less';
-@import (reference) './mixins/_logical-properties.less';
 
 .input-sm {
   .input-size(
@@ -27,65 +26,69 @@
   // Undo padding and float of grid classes
   &[class*="col-"] {
     float: none;
-    .padding(left, 0);
-
-    .padding(start, 0);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .form-control {
     // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-    .float(left);
-
+    float: left;
     width: 100%;
     margin-bottom: 0;
 
     &:not(:first-child) {
-      .border(left, 0);
+      border-left: 0;
     }
 
     &:not(:last-child) {
-      .border(right, 0);
+      border-right: 0;
     }
 
-    border-color: var(--color-interactive-secondary);
+    border-color: @input-border;
 
     :hover& {
-      border-color: var(--color-interactive-secondary-hover);
+      border-color: @input-border-hover;
     }
 
-    &:active,
     &:focus {
-      border-color: var(--color-interactive-accent-active);
+      border-color: @input-border-focus;
     }
   }
 
   .input-group-addon + .form-control {
-    .padding(left, 0);
+    padding-left: 0;
   }
 
   .form-control + .input-group-addon {
-    .padding(left, 0);
+    padding-left: 0;
+  }
+
+  &:hover {
+    .input-group-addon,
+    .form-control,
+    .btn-input,
+    .bootstrap-select .btn-default {
+      border-color: @input-border-hover;
+    }
   }
 
-  &:active,
-  &:focus,
   .focus & {
     .input-group-addon,
     .form-control,
     .btn-input,
     .bootstrap-select .btn-default {
-      border-color: var(--color-interactive-accent-active);
+      border-color: @input-border-focus;
     }
   }
 
   &.disabled {
     .input-group-addon {
-      background-color: var(--color-background-neutral);
-      border-color: var(--color-interactive-disabled);
+      background-color: @input-bg-disabled;
+      border-color: @input-border-disabled;
     }
 
-    &:active .input-group-addon {
-      border-color: var(--color-interactive-secondary-active);
+    &:hover .input-group-addon {
+      border-color: @input-border-hover;
     }
   }
 }
@@ -98,7 +101,7 @@
   > .input-group-btn .btn {
     .input-lg();
 
-    font-size: var(--font-size-20);
+    font-size: @btn-lg-font-size;
     margin-bottom: 0;
   }
 }
@@ -108,7 +111,7 @@
   .input-sm();
 
   .icon {
-    font-size: var(--font-size-20);
+    font-size: 20px;
   }
 }
 
@@ -139,12 +142,12 @@
 // -------------------------
 .input-group-addon {
   padding: @input-group-addon-padding;
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-body);
-  color: var(--color-content-secondary);
+  font-size: @input-group-addon-font-size;
+  line-height: @input-line-height;
+  color: @input-group-color;
   text-align: center;
-  background-color: var(--color-background-screen);
-  border: 1px solid var(--color-interactive-secondary);
+  background-color: @input-group-addon-bg;
+  border: 1px solid @input-group-addon-border-color;
 
   // Sizing - over rule spacing from .input-group-sm/lg
   &.input-sm {
@@ -166,8 +169,8 @@
     vertical-align: middle;
     display: inline-block;
     margin-top: -2px;
-    .margin(left, -4px);
-    .margin(right, -5px);
+    margin-left: -4px;
+    margin-right: -5px;
   }
 
   a {
@@ -188,39 +191,35 @@
 
 .input-group .input-group-addon,
 .input-group .form-control {
-  .border-width(left,0);
-
-  .border-width(right,0);
-
+  border-left-width: 0;
+  border-right-width: 0;
   border-radius: 0;
 }
 
 .input-group .input-group-btn:first-child,
 .input-group .input-group-addon:first-child,
 .input-group .form-control:first-child {
-  .border-width(left, 1px);
-
-  .border-radius(left, @border-radius-base);
+  border-left-width: 1px;
+  .border-left-radius(@border-radius-base);
 }
 
 .input-group .input-group-btn:last-child,
 .input-group .input-group-addon:last-child,
 .input-group .form-control:last-child {
-  .border-width(right, 1px);
-
-  .border-radius(right, @border-radius-base);
+  border-right-width: 1px;
+  .border-right-radius(@border-radius-base);
 }
 
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
   > :first-child .btn,
   > :first-child .btn-group {
-    .border-radius(right, 0);
+    .border-right-radius(0);
   }
 
   > :last-child .btn,
   > :last-child .btn-group {
-    .border-radius(left, 0);
+    .border-left-radius(0);
   }
 }
 
@@ -239,7 +238,7 @@
     position: relative;
 
     + .btn {
-      .margin(left, -1px);
+      margin-left: -1px;
     }
     // Bring the "active" button to the front
     &:hover,
@@ -253,7 +252,7 @@
   &:first-child {
     > .btn,
     > .btn-group {
-      .margin(right, -1px);
+      margin-right: -1px;
     }
   }
 }
@@ -264,10 +263,10 @@
 .input-group:focus-within {
   .form-control,
   .input-group-addon {
-    border-color: var(--color-interactive-accent);
+    border-color: @input-border-focus;
 
-    &:hover {
-      border-color: var(--color-interactive-accent-hover);
+    :hover& {
+      border-color: @input-border-focus;
     }
   }
 }
@@ -275,10 +274,10 @@
 .has-error .input-group {
   .form-control,
   .input-group-addon {
-    border-color: var(--color-interactive-negative);
+    border-color: @state-danger-text;
 
-    &:hover {
-      border-color: var(--color-interactive-negative-hover);
+    :hover& {
+      border-color: @state-danger-text;
     }
   }
 }
@@ -286,5 +285,6 @@
 .dropdown-menu {
   .input-group-addon {
     border: 0;
+    color: @input-group-color;
   }
 }

package/src/less/link-callout.less

@@ -1,9 +1,6 @@
-@import (reference) './mixins/_logical-properties.less';
-
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
-  .margin(left, var(--size-8));
-
+  margin-left: 8px;
   pointer-events: none;
   transition: transform 0.2s ease-in-out;
   transform: rotate(+90deg);