@transferwise/neptune-css 10.0.6-beta.32 → 10.1.0

package/src/less/footer.less

@@ -1,9 +1,10 @@
 @import (reference) '../variables/neptune-tokens.less';
+@import (reference) './variables/_typography.less';
 
 .footer {
-  background-color: var(--color-background-neutral);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  background-color: @color-base-smoke-fade;
+  font-size: @font-size-small;
+  line-height: @line-height-small;
   padding-top: calc(var(--size-8) * 10);
   padding-bottom: calc(var(--size-8) * 10);
 
@@ -19,29 +20,29 @@
 
   .footer-link,
   .link-icon {
-    color: var(--color-content-secondary);
+    color: @color-base-smoke-fade;
     font-weight: normal;
     text-decoration: underline;
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--color-content-secondary);
+      color: #384347;
     }
   }
 
   .footer-title {
-    font-size: var(--font-size-14);
-    color: var(--color-content-primary);
+    font-size: @font-size-small;
+    color: var(--color-text-primary);
 
     .footer-link {
-      color: var(--color-content-primary);
+      color: var(--color-text-primary);
       font-weight: bold;
 
       &:hover,
       &:active,
       &:focus {
-        color: var(--color-content-primary);
+        color: @color-base-grey-mid;
       }
     }
   }
@@ -60,42 +61,42 @@
     text-decoration: none;
 
     svg {
-      fill: var(--color-interactive-secondary);
+      fill: @color-base-grey-mid;
 
       &:hover,
       &:active,
       &:focus {
-        fill: var(--color-interactive-secondary-hover);
+        fill: #384347;
       }
     }
   }
 
   &.footer-inverse {
-    background: var(--color-base-navy-light);
+    background: @color-base-navy-light;
 
     .footer-link,
     .link-icon {
-      color: var(--color-content-secondary);
+      color: @color-base-smoke-fade;
 
       &:hover,
       &:active,
       &:focus {
-        color: var(--color-content-secondary);
+        color: @color-base-smoke-dark;
       }
 
       svg {
-        fill: var(--color-content-secondary);
+        fill: @color-base-smoke-fade;
 
         &:hover,
         &:active,
         &:focus {
-          fill: var(--color-content-secondary);
+          fill: @color-base-smoke-dark;
         }
       }
     }
 
     .footer-title {
-      color: var(--color-content-secondary);
+      color: @color-base-smoke-fade;
     }
 
     hr {
@@ -103,7 +104,7 @@
     }
 
     .tiny {
-      color: var(--color-base-white-light);
+      color: @color-base-white;
     }
   }
 

package/src/less/forms/bootstrap-forms.less

@@ -1,10 +1,10 @@
 @import (reference) '../../variables/legacy-variables.less';
 @import (reference) '../../variables/neptune-tokens.less';
+
 @import (reference) '../mixins/_arrows.less';
 @import (reference) '../mixins/_grid.less';
 @import (reference) '../mixins/_forms.less';
 @import (reference) '../mixins/_tab-focus.less';
-@import (reference) '../mixins/_logical-properties.less';
 
 //
 // Forms
@@ -32,9 +32,9 @@ legend {
   width: 100%;
   padding: 32px 0 16px 0;
   margin-bottom: 32px;
-  font-size: var(--font-size-16);
+  font-size: @font-size-h4;
   font-weight: @headings-font-weight;
-  line-height: var(--line-height-title);
+  line-height: @line-height-h4;
   color: @legend-color;
   border: 0;
   border-bottom: 1px solid @legend-border-color;
@@ -49,15 +49,11 @@ label {
 label,
 .secondary {
   font-size: @control-label-font-size;
-  color: var(--color-content-secondary);
+  color: @control-label-color;
   line-height: 20px;
   transition: color ease-in-out 0.15s;
 }
 
-.disabled > label {
-  color: var(--color-content-disabled);
-}
-
 // Normalize form controls
 //
 // While most of our form styles require extra classes, some basic normalization
@@ -114,9 +110,9 @@ input[type='checkbox']:focus {
 output {
   display: block;
   padding-top: (@padding-base-vertical + 1);
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-control);
-  color: var(--color-content-primary);
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
 }
 
 // Common form controls
@@ -144,10 +140,10 @@ output {
 .form-control {
   display: block;
   width: 100%;
-  color: var(--color-content-primary);
-  background-color: var(--color-background-screen);
+  color: @input-color;
+  background-color: @input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid var(--color-interactive-secondary);
+  border: 1px solid @input-border;
   transition: border-color ease-in-out 0.15s;
 
   .input-size(
@@ -162,14 +158,14 @@ output {
   background-clip: padding-box;
 
   &:hover {
-    border-color: var(--color-interactive-secondary-hover);
+    border-color: @input-border-hover;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
   .form-control-focus();
 
   &::placeholder {
-    color: var(--color-content-secondary);
+    color: @input-color-placeholder;
   }
 
   // Disabled and read-only inputs
@@ -180,12 +176,12 @@ output {
   &[disabled],
   &[readonly],
   fieldset[disabled] & {
-    background-color: var(--color-background-neutral);
-    color: var(--color-content-disabled);
-    border-color: var(--color-interactive-disabled);
+    background-color: @input-bg-disabled;
+    color: @input-color-disabled;
+    border-color: @input-border-disabled;
 
     &::placeholder {
-      color: var(--color-content-disabled);
+      color: @input-color-disabled;
     }
 
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
@@ -205,10 +201,8 @@ output {
   + .text-muted,
   + .text-primary,
   + .text-success,
-  + .text-positive,
   + .text-info,
   + .text-warning,
-  + .text-negative,
   + .text-danger {
     margin-top: @padding-base-vertical;
     font-size: 12px;
@@ -218,7 +212,7 @@ output {
   font-weight: @font-weight-normal;
 
   &:focus {
-    border-color: var(--color-interactive-secondary-hover);
+    border-color: @input-border-focus;
   }
 }
 
@@ -254,7 +248,7 @@ input[type='search'] {
 
     &.input-lg,
     .input-group-lg & {
-      line-height: calc(@input-height-large - var(--line-height-body));
+      line-height: (@input-height-large - @line-height-computed);
     }
   }
 }
@@ -295,7 +289,8 @@ input[type='search'] {
   // margin-bottom: (@padding-base-vertical * 1.5);
 
   label {
-    min-height: calc(var(--line-height-control) * 2); // Ensure the input doesn't jump when there is no text
+    min-height: (@line-height-computed * 2); // Ensure the input doesn't jump when there is no text
+    padding-left: 20px;
     margin-bottom: 0;
     font-weight: normal;
     cursor: pointer;
@@ -312,8 +307,7 @@ input[type='search'] {
 .checkbox input[type='checkbox'],
 .checkbox-inline input[type='checkbox'] {
   position: absolute;
-  .margin(left, -20px);
-
+  margin-left: -20px;
   margin-top: 4px \9;
 }
 
@@ -322,8 +316,7 @@ input[type='search'] {
 .checkbox-inline {
   position: relative;
   display: inline-block;
-  .padding(left, 20px);
-
+  padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
   font-weight: normal;
@@ -338,7 +331,7 @@ input[type='search'] {
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
   margin-top: 0;
-  .margin(left, 10px); // space out consecutive inline controls
+  margin-left: 10px; // space out consecutive inline controls
 }
 
 // Apply same disabled cursor tweak as for inputs
@@ -373,20 +366,19 @@ input[type='checkbox'] {
 .form-control-static {
   // Remove default margin from `p`
   margin-bottom: 0;
-  line-height: var(--line-height-control);
-  min-height: calc(var(--line-height-control) * 2);
+  line-height: @line-height-computed;
+  min-height: (@line-height-computed * 2);
   font-size: @input-font-size;
-  color: var(--color-content-disabled);
-  background-color: var(--color-background-neutral);
-  border: 1px solid var(--color-interactive-disabled);
+  color: @input-color-disabled;
+  background-color: @input-bg-disabled;
+  border: 1px solid @input-border-disabled;
   border-radius: @input-border-radius;
   padding: @input-padding;
 
   &.input-lg,
   &.input-sm {
-    .padding(left, 0);
-
-    .padding(right, 0);
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -430,7 +422,7 @@ input[type='checkbox'] {
 
   .form-control-static {
     height: @input-height-small;
-    min-height: calc(var(--line-height-control) + @input-font-size-small);
+    min-height: (@line-height-computed + @input-font-size-small);
     padding: @input-padding-small;
     font-size: @input-font-size-small;
     line-height: @input-line-height-small;
@@ -472,7 +464,7 @@ input[type='checkbox'] {
 
   .form-control-static {
     height: @input-height-large;
-    min-height: calc(var(--line-height-control) + @input-font-size-large);
+    min-height: (@line-height-computed + @input-font-size-large);
     padding: @input-padding-large;
     font-size: @input-font-size-large;
     line-height: @input-line-height-large;
@@ -481,8 +473,7 @@ input[type='checkbox'] {
   .control-label {
     position: absolute;
     top: 12px;
-    .left(14px);
-
+    left: 14px;
     margin-bottom: 0;
     z-index: 1;
   }
@@ -498,15 +489,14 @@ input[type='checkbox'] {
 
   // Ensure icons don't overlap text
   .form-control {
-    .padding(right, @input-height-base);
+    padding-right: @input-height-base;
   }
 }
 // Feedback icon (requires .glyphicon classes)
 .form-control-feedback {
   position: absolute;
   top: 0;
-  .right(0);
-
+  right: 0;
   z-index: 2; // Ensure icon is above input groups
   display: block;
   width: @input-height-base;
@@ -540,10 +530,10 @@ input[type='checkbox'] {
   }
 
   .input-group-addon {
-    border-color: var(--color-interactive-secondary);
+    border-color: @input-border-focus;
 
-    &:active {
-      border-color: var(--color-interactive-secondary-active);
+    &:hover {
+      border-color: @input-border-focus;
     }
   }
 }
@@ -561,8 +551,8 @@ input[type='checkbox'] {
   border-style: solid;
   border-radius: 3px;
   padding: 4px 16px 3px;
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-control);
+  font-size: @font-size-small;
+  line-height: @line-height-computed;
   transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
   a {
@@ -571,9 +561,9 @@ input[type='checkbox'] {
 }
 
 .help-block {
-  color: var(--color-content-secondary);
-  border-color: var(--color-interactive-secondary);
-  background-color: var(--color-background-neutral);
+  color: @brand-grey-plus-10;
+  border-color: @input-border;
+  background-color: @brand-smoke-plus-20;
   display: block;
 
   .arrow(10px);
@@ -589,40 +579,44 @@ input[type='checkbox'] {
 // Feedback states
 .has-success {
   .form-control-validation(
-    var(--color-content-positive);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    @state-success-text;
+    @state-success-border;
+    @state-success-border-hover;
+    @state-success-bg
   );
 }
 
 .has-info {
   .form-control-validation(
-    var(--color-content-accent);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    @brand-light-blue-minus-20;
+    @brand-light-blue;
+    @brand-light-blue-minus-10;
+    @brand-smoke-plus-20
   );
 }
 
 .has-warning {
   .form-control-validation(
-    var(--color-content-warning);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    @state-warning-text;
+    @state-warning-border;
+    @state-warning-border-hover;
+    @state-warning-bg
   );
 }
 
 .has-error {
   .form-control-validation(
-    var(--color-content-negative);
-    var(--color-interactive-negative);
-    var(--color-interactive-negative-hover);
+    @state-danger-text;
+    @state-danger-border;
+    @state-danger-border-hover;
+    @state-danger-bg
   );
 }
 
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
   & ~ .form-control-feedback {
-    top: var(--line-height-control); // Height of the `label` and its margin
+    top: @line-height-computed; // Height of the `label` and its margin
   }
 
   &.sr-only ~ .form-control-feedback {
@@ -694,14 +688,14 @@ input[type='checkbox'] {
       vertical-align: middle;
 
       label {
-        .padding(left, 0);
+        padding-left: 0;
       }
     }
 
     .radio input[type='radio'],
     .checkbox input[type='checkbox'] {
       position: relative;
-      .margin(left, 0);
+      margin-left: 0;
     }
 
     // Re-override the feedback icon.
@@ -732,7 +726,7 @@ input[type='checkbox'] {
   // and other content below items
   .radio,
   .checkbox {
-    min-height: calc(var(--line-height-control) + (@padding-base-vertical + 1));
+    min-height: (@line-height-computed + (@padding-base-vertical + 1));
   }
 
   // Make form groups behave like rows
@@ -744,8 +738,7 @@ input[type='checkbox'] {
   // labels on narrow viewports stack the same as a default form example.
   @media (min-width: @screen-sm-min) {
     .control-label {
-      .text-align(right);
-
+      text-align: right;
       margin-bottom: 0;
       padding-top: 14px; // Default padding plus a border
     }
@@ -756,7 +749,7 @@ input[type='checkbox'] {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    .right(floor((@grid-gutter-width / 2)));
+    right: floor((@grid-gutter-width / 2));
   }
 
   // Form group sizes
@@ -767,7 +760,7 @@ input[type='checkbox'] {
     @media (min-width: @screen-sm-min) {
       .control-label {
         padding-top: 17px;
-        font-size: var(font-size-20);
+        font-size: @font-size-large;
       }
     }
   }
@@ -776,7 +769,7 @@ input[type='checkbox'] {
     @media (min-width: @screen-sm-min) {
       .control-label {
         padding-top: 8px;
-        font-size: var(--font-size-14);
+        font-size: @font-size-small;
       }
     }
   }
@@ -785,11 +778,11 @@ input[type='checkbox'] {
 @import 'checkbox-radio.less';
 
 .input-group .input-group-btn + input {
-  .border(left, 0, solid, transparent);
+  border-left: 0 solid transparent;
 }
 
 .input-group-addon {
-  color: var(--color-content-secondary);
+  color: @gray-light;
   transition: border-color ease-in-out 0.15s;
 }
 
@@ -805,8 +798,8 @@ input[type='checkbox'] {
   top: -3px;
 
   .label-default {
-    color: var(--color-content-secondary);
-    background-color: var(--color-background-neutral);
+    color: @gray-light;
+    background-color: @brand-smoke-plus-10;
   }
 }
 
@@ -819,18 +812,16 @@ input[type='checkbox'] {
 
 .form-group {
   position: relative;
-  font-size: var(--font-size-14);
+  font-size: @font-size-small;
 }
 
 .form-group .row {
-  .margin(left, -6px);
-
-  .margin(right, -6px);
+  margin-left: -6px;
+  margin-right: -6px;
 
   [class*='col-'] {
-    .padding(left, 6px);
-
-    .padding(right, 6px);
+    padding-left: 6px;
+    padding-right: 6px;
   }
 }
 
@@ -880,29 +871,28 @@ input[type='checkbox'] {
 
 @media (min-width: @screen-sm-min) {
   fieldset .form-group:nth-of-type(odd) {
-    .clear(left);
+    clear: left;
   }
 }
 
 .checkbox,
 .radio {
   > label {
-    font-size: var(--font-size-16);
+    font-size: @font-size-base;
     display: block;
     cursor: pointer;
     line-height: 24px;
     padding-top: 12px;
     padding-bottom: 10px;
-    .padding(right, 16px);
-
-    color: var(--color-content-primary);
-    background-color: var(--color-background-screen);
-    border: 1px solid var(--color-interactive-secondary);
+    padding-right: 16px;
+    color: @input-color;
+    background-color: @brand-white;
+    border: 1px solid @brand-smoke;
     border-radius: @border-radius-base;
     transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
     &:hover {
-      border-color: var(--color-interactive-accent-hover);
+      border-color: @input-border-hover;
     }
 
     &.focus,
@@ -910,7 +900,7 @@ input[type='checkbox'] {
     &.has-focus,
     &.has-focus:hover,
     &:focus-within {
-      border-color: var(--color-interactive-accent-active);
+      border-color: @input-border-focus;
     }
   }
 
@@ -920,9 +910,9 @@ input[type='checkbox'] {
   &.disabled,
   &.readonly {
     label {
-      color: var(--color-content-disabled);
-      border-color: var(--color-interactive-disabled);
-      background-color: var(--color-background-neutral);
+      color: @input-color-disabled;
+      border-color: @input-border-disabled;
+      background-color: @input-bg-disabled;
     }
   }
 
@@ -934,8 +924,8 @@ input[type='checkbox'] {
       small,
       .small {
         display: block;
-        font-size: var(--font-size-14);
-        color: var(--color-content-secondary);
+        font-size: @font-size-small;
+        color: @text-secondary-color;
       }
     }
   }
@@ -947,12 +937,12 @@ input[type='checkbox'] {
 .radio.disabled {
   > label,
   > label:hover {
-    border-color: var(--color-interactive-disabled);
-    color: var(--color-content-disabled);
+    border-color: @input-border-disabled;
+    color: @color-text-inactive;
 
     small,
     .small {
-      color: var(--color-content-disabled);
+      color: @color-text-inactive;
     }
   }
 }
@@ -960,8 +950,8 @@ input[type='checkbox'] {
 .error-messages {
   display: none;
   color: @state-danger-text;
-  font-size: var(--font-size-14);
-  background-color: var(--color-background-negative);
+  background-color: @state-danger-bg;
+  font-size: @font-size-small;
   line-height: 24px;
   position: relative;
   .arrow-pointer(@alert-arrow-width);
@@ -1044,5 +1034,5 @@ input[type='checkbox'] {
 }
 
 .form-control-placeholder {
-  color: var(--color-content-secondary);
+  color: @input-color-placeholder;
 }