@transferwise/neptune-css 10.0.0 → 10.0.1-beta.25

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

@@ -3,23 +3,12 @@
 
 .radio,
 .checkbox {
-  border-color: @input-border;
+  border-color: var(--color-interactive-secondary);
 
   > label {
     position: relative;
     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;
@@ -31,7 +20,7 @@
 }
 
 .tw-checkbox-button {
-  border: 1px solid @color-base-smoke-mid;
+  border: 1px solid var(--color-interactive-secondary);
   background: var(--color-background-screen);
   width: 22px;
   height: 22px;
@@ -54,7 +43,7 @@
   &:hover,
   input[type='checkbox']:hover + &,
   .checkbox:hover & {
-    border-color: @color-base-grey-light;
+    border-color: var(--color-interactive-secondary);
   }
 
   &:focus,
@@ -65,15 +54,15 @@
   &:active,
   &.active,
   input[type='checkbox']:active + & {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary);
     outline: none;
   }
 
   &[checked],
   &.checked,
   input[type='checkbox']:checked + & {
-    border-color: var(--color-control-accent) !important;
-    background-color: var(--color-control-accent);
+    border-color: var(--color-interactive-accent) !important;
+    background-color: var(--color-interactive-accent);
 
     .tw-checkbox-check {
       display: inline-block;
@@ -83,55 +72,55 @@
   &[checked]:hover,
   &.checked:hover,
   input[type='checkbox']:not(:disabled):checked:hover + & {
-    border-color: var(--color-control-accent-hover) !important;
-    background-color: var(--color-control-accent-hover);
+    border-color: var(--color-interactive-accent-hover) !important;
+    background-color: var(--color-interactive-accent-hover);
   }
 
   &[checked]:active,
   &.checked:active,
   input[type='checkbox']:not(:disabled):checked:active + & {
-    border-color: var(--color-control-accent-active) !important;
-    background-color: var(--color-control-accent-active);
+    border-color: var(--color-interactive-accent-active) !important;
+    background-color: var(--color-interactive-accent-active);
   }
 
   &[disabled],
   input[type='checkbox']:disabled + & {
-    background-color: @color-base-smoke-fade;
-    border-color: @color-base-smoke-mid !important;
+    background-color: var(--color-background-neutral);
+    border-color: var(--color-interactive-disabled) !important;
     cursor: @cursor-disabled;
 
     .tw-checkbox-check {
-      color: var(--color-text-inactive);
+      color: var(--color-content-disabled);
     }
   }
 
   .checkbox.has-error &,
   &.has-error {
-    border-color: var(--color-control-negative) !important;
+    border-color: var(--color-interactive-negative) !important;
 
     &[checked],
     &.checked {
-      background-color: var(--color-control-negative);
+      background-color: var(--color-interactive-negative);
     }
 
     &[disabled] {
-      background-color: @color-base-smoke-fade;
+      background-color: var(--color-background-neutral);
     }
   }
 
   .checkbox.has-error input[type='checkbox']:checked + & {
-    border-color: var(--color-control-negative) !important;
-    background-color: var(--color-control-negative);
+    border-color: var(--color-interactive-negative) !important;
+    background-color: var(--color-interactive-negative);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:hover + & {
-    border-color: var(--color-control-negative-hover) !important;
-    background-color: var(--color-control-negative-hover);
+    border-color: var(--color-interactive-negative-hover) !important;
+    background-color: var(--color-interactive-negative-hover);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:active + & {
-    border-color: var(--color-control-negative-active) !important;
-    background-color: var(--color-control-negative-active);
+    border-color: var(--color-interactive-negative-active) !important;
+    background-color: var(--color-interactive-negative-active);
   }
 }
 
@@ -139,8 +128,8 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 1px solid @input-border;
-  background: @input-bg;
+  border: 1px solid var(--color-interactive-secondary);
+  background: var(--color-background-screen);
   display: inline-block;
   padding: 0;
   vertical-align: middle;
@@ -157,52 +146,52 @@
 
   .radio:hover &,
   &:hover {
-    border-color: @input-border-hover;
+    border-color: var(--color-interactive-secondary-hover);
   }
 
   &:focus,
   &.focus,
   &:active,
   &.active {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary-active);
     outline: none;
   }
 
   &[checked],
   &.checked {
-    border-color: @input-border-focus !important;
+    border-color: var(--color-interactive-accent) !important;
 
     .tw-radio-check {
       width: 12px;
       height: 12px;
       margin: 5px;
       display: block;
-      background-color: @input-border-focus;
+      background-color: var(--color-interactive-accent);
     }
   }
 
   &[disabled],
   &.disabled {
-    background-color: @input-bg-disabled;
-    border-color: @input-border-disabled !important;
+    background-color: var(--color-background-neutral);
+    border-color: var(--color-interactive-disabled) !important;
     cursor: @cursor-disabled;
 
     .tw-radio-check {
-      background-color: @input-border-disabled;
+      background-color: var(--color-interactive-disabled);
     }
   }
 
   .radio.has-error &,
   &.has-error {
-    border-color: @brand-red !important;
+    border-color: var(--color-interactive-negative) !important;
 
     &[checked] .tw-radio-check,
     &.checked .tw-radio-check {
-      background-color: @brand-red;
+      background-color: var(--color-interactive-negative);
     }
 
     &[disabled] .tw-radio-check {
-      background-color: @input-border-disabled;
+      background-color: var(--color-interactive-disabled);
     }
   }
 }
@@ -210,8 +199,8 @@
 .checkbox {
   &.disabled label,
   &.disabled label:hover {
-    border-color: @input-border-disabled;
-    color: @color-text-inactive !important;
+    border-color: var(--color-interactive-disabled);
+    color: var(--color-content-disabled) !important;
   }
 }
 

package/src/less/input-groups.less

@@ -44,14 +44,15 @@
       border-right: 0;
     }
 
-    border-color: @input-border;
+    border-color: var(--color-interactive-secondary);
 
     :hover& {
-      border-color: @input-border-hover;
+      border-color: var(--color-interactive-secondary-hover);
     }
 
+    &:active,
     &:focus {
-      border-color: @input-border-focus;
+      border-color: var(--color-interactive-accent-active);
     }
   }
 
@@ -63,32 +64,25 @@
     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: @input-border-focus;
+      border-color: var(--color-interactive-accent-active);
     }
   }
 
   &.disabled {
     .input-group-addon {
-      background-color: @input-bg-disabled;
-      border-color: @input-border-disabled;
+      background-color: var(--color-background-neutral);
+      border-color: var(--color-interactive-disabled);
     }
 
-    &:hover .input-group-addon {
-      border-color: @input-border-hover;
+    &:active .input-group-addon {
+      border-color: var(--color-interactive-secondary-active);
     }
   }
 }
@@ -144,10 +138,10 @@
   padding: @input-group-addon-padding;
   font-size: @input-group-addon-font-size;
   line-height: @input-line-height;
-  color: @input-group-color;
+  color: var(--color-content-secondary);
   text-align: center;
-  background-color: @input-group-addon-bg;
-  border: 1px solid @input-group-addon-border-color;
+  background-color: var(--color-background-screen);
+  border: 1px solid var(--color-interactive-secondary);
 
   // Sizing - over rule spacing from .input-group-sm/lg
   &.input-sm {
@@ -259,14 +253,13 @@
 
 // TODO deprecate
 .focus .input-group,
-.has-focus .input-group,
-.input-group:focus-within {
+.has-focus .input-group {
   .form-control,
   .input-group-addon {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary);
 
-    :hover& {
-      border-color: @input-border-focus;
+    &:hover {
+      border-color: var(--color-interactive-secondary-hover);
     }
   }
 }
@@ -274,10 +267,10 @@
 .has-error .input-group {
   .form-control,
   .input-group-addon {
-    border-color: @state-danger-text;
+    border-color: var(--color-interactive-negative);
 
-    :hover& {
-      border-color: @state-danger-text;
+    &:hover {
+      border-color: var(--color-interactive-negative-hover);
     }
   }
 }
@@ -285,6 +278,5 @@
 .dropdown-menu {
   .input-group-addon {
     border: 0;
-    color: @input-group-color;
   }
 }

package/src/less/list-group.less

@@ -1,5 +1,5 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 @import 'bootstrap/less/mixins/list-group.less';
 @import 'bootstrap/less/list-group.less';

package/src/less/mixins/_buttons.less

@@ -59,14 +59,14 @@
     &.focus,
     &:active,
     &.active {
-      background-color: @btn-disabled-bg;
-      border-color: @btn-disabled-bg;
-      color: @btn-disabled-color;
+      background-color: var(--color-background-neutral);
+      border-color: var(--color-interactive-disabled);
+      color: var(--color-content-disabled);
 
       &.btn-priority-2 {
         background-color: @background;
-        border-color: @btn-disabled-color;
-        color: @btn-disabled-color;
+        border-color: var(--color-interactive-disabled);
+        color: var(--color-content-disabled);
       }
     }
   }

package/src/less/mixins/_forms.less

@@ -3,7 +3,7 @@
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.
 
-.form-control-validation(@text-color: #555; @border-color: #ccc; @border-hover: #aaa; @background-color: #f5f5f5) {
+.form-control-validation(@text-color; @border-color; @border-hover; @border-active: var(--color-interactive-accent-active)) {
   border-color: @border-color !important;
 
   // Color the label and help text
@@ -28,23 +28,29 @@
   // Set the border and box shadow on specific inputs to match
   .form-control,
   .btn-input,
-  .btn-input:active,
   .btn-input:focus,
   .btn-input:hover,
   .input-group-addon,
-  .input-group .form-control:focus,
   .alert {
-    border-color: @border-color !important;
+    border-color: @border-color;
   }
 
-  &:hover,
-  &:focus-within {
+  &:active {
     .form-control,
     &.radio label,
     &.checkbox label,
     .btn-input,
     .input-group-addon,
-    .input-group .form-control:focus,
+    .alert {
+      border-color: @border-active !important;
+    }
+  }
+
+  &:hover {
+    &.radio label,
+    &.checkbox label,
+    .btn-input,
+    .input-group-addon,
     .alert {
       border-color: @border-hover !important;
     }
@@ -60,7 +66,7 @@
     > label {
       &:not(.disabled) {
         border-color: @border-color;
-        color: @input-color;
+        color: var(--color-content-primary);
       }
 
       &:hover,
@@ -84,7 +90,7 @@
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-border-focus` variable.
+// which defaults to the `var(--color-interactive-secondary-active)` CSS custom prop.
 //
 // We highly encourage you to not customize the default value, but instead use
 // this to tweak colors on an as-needed basis. This aesthetic change is based on
@@ -93,9 +99,7 @@
 //
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
-.form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
-
+.form-control-focus(@color: var(--color-interactive-accent-active)) {
   &:focus {
     border-color: @color;
     outline: 0;

package/src/less/mixins/_table-row.less

@@ -34,7 +34,7 @@
     &.@{state}:hover > td,
     &:hover > .@{state},
     &.@{state}:hover > th {
-      background-color: darken(@background, 5%);
+      background-color: @background;
     }
   }
 }

package/src/less/modals.less

@@ -1,6 +1,186 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 @import 'bootstrap/less/mixins/vendor-prefixes.less';
 @import 'bootstrap/less/mixins/opacity.less';
-@import 'bootstrap/less/modals.less';
+
+//
+// Styles for Angular UI modal
+// https://angular-ui.github.io/bootstrap/#!#modal
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    .translate(0, -25%);
+    .transition-transform(~"0.3s ease-out");
+  }
+  &.in .modal-dialog { .translate(0, 0); }
+}
+
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 16px;
+}
+
+// Actual modal
+.modal-content {
+  position: relative;
+  background-color: @modal-content-bg;
+  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+  border: 1px solid @modal-content-border-color;
+  border-radius: @border-radius-large;
+  .box-shadow(0 3px 9px rgba(0,0,0,0.5));
+
+  background-clip: padding-box;
+  // Remove focus outline from opened modal
+  outline: 0;
+}
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal-background;
+  // dimmer color
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  padding: @modal-inner-padding-collapse;
+  border-bottom: 1px solid @modal-header-border-color;
+  min-height: (@modal-inner-padding-collapse + @modal-title-line-height);
+}
+// Close icon
+.modal-header .close {
+  margin-top: -2px;
+}
+
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: @modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  padding: @modal-inner-padding-collapse;
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 16px @modal-inner-padding-collapse;
+  text-align: right; // right align buttons
+  border-top: 1px solid @modal-footer-border-color;
+  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: 8px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-left: 0;
+  }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+// Scale up the modal
+@media (min-width: @screen-sm-min) {
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    width: @modal-md;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+
+  .modal-content {
+    .box-shadow(0 5px 15px rgba(0,0,0,0.5));
+  }
+
+  .modal-header {
+    padding: @modal-title-vertical-padding @modal-title-padding;
+    min-height: (@modal-title-vertical-padding + @modal-title-line-height);
+  }
+
+  .modal-body {
+    padding: @modal-inner-padding;
+  }
+
+  .modal-footer {
+    padding: 16px @modal-inner-padding;
+  }
+}
+
+// Modal sizes
+@media (min-width: @screen-sm-min) {
+  .modal-sm,
+  .modal-lg {
+    width: auto;
+    margin: (@padding-base-vertical * 4) @grid-gutter-width;
+  }
+}
+
+@media (min-width: (@modal-sm + 32px)) {
+  .modal-sm {
+    width: @modal-sm;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .modal-lg {
+    width: @modal-lg;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+}

package/src/less/navbar.less

@@ -1,7 +1,7 @@
 // TODO: remove bootstrap dependencies
 
 // variables
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 
 // mixins
 @import (reference) 'bootstrap/less/mixins/nav-vertical-align.less';
@@ -16,7 +16,7 @@
 @import (reference) 'bootstrap/less/mixins/grid.less';
 @import (reference) 'bootstrap/less/mixins/tab-focus.less';
 @import 'bootstrap/less/utilities.less';
-@import 'bootstrap/less/dropdowns.less';
+@import 'dropdowns.less';
 @import 'bootstrap/less/navs.less';
 @import 'bootstrap/less/navbar.less';
 @import 'bootstrap/less/close.less';
@@ -108,5 +108,5 @@
 }
 
 .navbar-background--inverse {
-  background-color: @brand-primary;
+  background-color: var(--color-base-navy-light);
 }

package/src/less/navs.less

@@ -1,7 +1,7 @@
 // TODO: remove bootstrap dependencies
 
 // variables
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 
 // mixins
 @import (reference) 'bootstrap/less/mixins/nav-divider.less';

package/src/less/neptune.bundle.less

@@ -1,4 +1,4 @@
-@import '@transferwise/neptune-tokens/tokens.css';
+@import '@transferwise/neptune-tokens/themes/default/tokens.css';
 @import './neptune-core.less';
 @import './neptune-addons.less';
 

package/src/less/panels.less

@@ -1,6 +1,6 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 @import 'bootstrap/less/mixins/border-radius.less';
 @import 'bootstrap/less/mixins/panels.less';
 @import 'bootstrap/less/panels.less';