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

package/src/less/table.less

@@ -3,14 +3,13 @@
 
 // mixins
 @import './mixins/_table-row.less';
-@import (reference) './mixins/_logical-properties.less';
 
 //
 // Tables
 // --------------------------------------------------
 
 table {
-  background-color: var(--color-background-screen);
+  background-color: @table-bg;
   border-collapse: separate;
 
   td,
@@ -26,12 +25,12 @@ table {
 caption {
   padding-top: @table-cell-padding;
   padding-bottom: @table-cell-padding;
-  color: var(--color-content-disabled);
-  .text-align(left);
+  color: @text-muted;
+  text-align: left;
 }
 
 th {
-  .text-align(left);
+  text-align: left;
 }
 
 // Baseline styles
@@ -39,18 +38,17 @@ th {
 .table {
   width: 100%;
   max-width: 100%;
-  margin-bottom: var(--size-24);
-
+  margin-bottom: @line-height-computed;
   // Cells
   > thead,
   > tbody,
   > tfoot {
     > tr > th,
     > tr > td {
-      padding: var(--size-24) @table-cell-padding;
-      line-height: var(--line-height-body);
+      padding: @line-height-computed @table-cell-padding;
+      line-height: @line-height-base;
       vertical-align: top;
-      border-top: 1px solid var(--color-background-neutral);
+      border-top: 1px solid @table-border-color;
       border-bottom: 0;
       transition: border ease @panel-focus-transtion;
     }
@@ -59,10 +57,10 @@ th {
   > .thead > ol > li,
   > .tbody > dl > dd,
   > .tfoot > ol > li {
-    padding: var(--size-24) @table-cell-padding;
-    line-height: var(--line-height-body);
+    padding: @line-height-computed @table-cell-padding;
+    line-height: @line-height-base;
     vertical-align: top;
-    border-top: 1px solid var(--color-background-neutral);
+    border-top: 1px solid @table-border-color;
     border-bottom: 0;
     transition: border ease @panel-focus-transtion;
   }
@@ -101,30 +99,30 @@ th {
   }
   // Account for multiple tbody instances
   > tbody + tbody {
-    border-top: 1px solid var(--color-border-neutral);
+    border-top: 1px solid @table-border-color;
   }
 
   // Nesting
   .table {
-    background-color: var(--color-background-screen);
+    background-color: @body-bg;
   }
 
   > thead,
   > tfoot,
   > .thead,
   > .tfoot {
-    font-size: var(--font-size-14);
-    color: var(--color-content-primary);
+    font-size: @font-size-small;
+    color: @headings-color;
   }
 
   > tbody,
   > .tbody {
-    font-size: var(--font-size-14);
+    font-size: @font-size-small;
   }
 
   > tbody > tr > th,
   > .tbody > dl > .th {
-    color: var(--color-content-primary);
+    color: @headings-color;
   }
 }
 
@@ -153,12 +151,12 @@ th {
 // Add borders all around the table and between all the columns.
 
 .table-bordered {
-  border: 1px solid var(--color-border-neutral);
+  border: 1px solid @table-border-color;
   border-radius: @border-radius-base;
 
   thead,
   .thead {
-    background-color: var(--color-background-neutral);
+    background-color: @gray-base;
   }
 }
 
@@ -174,12 +172,28 @@ th {
 
 .table-striped {
   > tbody > tr:nth-of-type(odd) {
-    background-color: var(--color-background-neutral);
+    background-color: @table-bg-accent;
   }
 
   @media (min-width: @screen-md-min) {
     > .tbody > dl:nth-of-type(odd) {
-      background-color: var(--color-background-neutral);
+      background-color: @table-bg-accent;
+    }
+  }
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover {
+    background-color: @table-bg-hover;
+  }
+
+  @media (min-width: @screen-md-min) {
+    > .tbody > dl:hover {
+      background-color: @table-bg-hover;
     }
   }
 }
@@ -200,13 +214,13 @@ table col[class*='col-'] {
 // inheritance to nested tables.
 
 // Generate the contextual variants
-.table-row-variant(primary; var(--color-navy-background-elevated); var(--color-border-neutral); var(--color-background-elevated));
-.table-row-variant(active; var(--color-background-screen); var(--color-border-neutral));
-.table-row-variant(success; var(--color-background-positive); var(--color-interactive-positive));
-.table-row-variant(info; var(--color-background-accent); var(--color-interactive-accent));
-.table-row-variant(warning; var(--color-background-warning); var(--color-interactive-warning));
-.table-row-variant(danger; var(--color-background-negative); var(--color-interactive-negative));
-.table-row-variant(default; var(--color-background-secondary); var(--color-interactive-secondary));
+.table-row-variant(primary; @brand-navy-minus-10; @table-border-color; @brand-white);
+.table-row-variant(active; @table-bg-active; @table-border-color);
+.table-row-variant(success; @state-success-bg; @state-success-text);
+.table-row-variant(info; @state-info-bg; @state-info-text);
+.table-row-variant(warning; @state-warning-bg; @state-warning-text);
+.table-row-variant(danger; @state-danger-bg; @state-danger-text);
+.table-row-variant(default; @brand-smoke-plus-20; @table-border-color);
 
 // Responsive tables
 //
@@ -224,7 +238,7 @@ table col[class*='col-'] {
 
   @media screen and (max-width: @screen-sm-max) {
     width: 100%;
-    margin-bottom: var(--size-24);
+    margin-bottom: @line-height-computed;
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 
@@ -264,7 +278,7 @@ table col[class*='col-'] {
     }
 
     &.table-bordered {
-      border: 1px solid var(--color-background-neutral);
+      border: 1px solid @table-border-color;
       border-radius: @border-radius-base;
     }
   }
@@ -285,8 +299,8 @@ table col[class*='col-'] {
 
         > li {
           display: table-cell;
-          font-weight: var(--font-weight-bold);
-          color: var(--color-content-primary);
+          font-weight: @font-weight-bold;
+          color: @headings-color;
         }
       }
     }
@@ -303,8 +317,8 @@ table col[class*='col-'] {
 
         > dd {
           display: table-cell;
-          font-size: var(--font-size-14);
-          color: var(--color-content-secondary);
+          font-size: @font-size-small;
+          color: @text-color;
         }
       }
     }
@@ -323,10 +337,10 @@ table col[class*='col-'] {
 
     > .tbody {
       > dl {
-        border: 1px var(--color-interactive-secondary) solid;
+        border: 1px @input-border solid;
         border-radius: @border-radius-base;
-        margin-bottom: var(--size-24);
-        padding: var(--size-24) var(--line-height-body) 0;
+        margin-bottom: @line-height-computed;
+        padding: @line-height-computed @line-height-computed 0;
 
         > dd {
           padding: 0;
@@ -363,12 +377,12 @@ table col[class*='col-'] {
       text-decoration: none;
 
       &.active {
-        background-color: var(--color-navy-background-elevated);
-        color: var(--color-navy-content-primary);
+        background-color: @brand-navy;
+        color: #fff;
       }
 
       &:not([disabled]):hover {
-        background-color: var(--color-content-accent);
+        background-color: @brand-light-blue;
         color: #fff;
       }
     }

package/src/less/tick.less

@@ -1,5 +1,3 @@
-@import (reference) './mixins/_logical-properties.less';
-
 .tw-checkbox-check {
   position: relative;
   display: inline-block;
@@ -17,18 +15,7 @@
 
     .tw-checkbox-button[disabled] &,
     input[type='checkbox']:disabled + .tw-checkbox-button & {
-      background-color: var(--color-interactive-disabled);
-    }
-
-    .tw-checkbox-button + .tw-checkbox-button & {
-      background-color: var(--color-interactive-disabled);
-    }
-  }
-
-  .has-error {
-    &::before,
-    &::after {
-      background-color: var(--color-interactive-negative);
+      background-color: var(--color-text-inactive);
     }
   }
 

package/src/less/tooltip.less

@@ -1,126 +1,7 @@
 // TODO: remove bootstrap dependencies
 
+// variables
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
-@import (reference) './mixins/_reset-text.less';
-
-//
-// Tooltips
-// --------------------------------------------------
-
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: @zindex-tooltip;
-  display: block;
-
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-
-  .reset-text();
-
-  font-size: var(--font-size-14);
-  opacity: 0;
-
-  &.in {
-    opacity: @tooltip-opacity;
-  }
-
-  &.top {
-    margin-top: -3px;
-    padding: @tooltip-arrow-width 0;
-  }
-
-  &.right {
-    .margin(left, 3px);
-
-    padding: 0 @tooltip-arrow-width;
-  }
-
-  &.bottom {
-    margin-top: 3px;
-    padding: @tooltip-arrow-width 0;
-  }
-
-  &.left {
-    .margin(left, -3px);
-
-    padding: 0 @tooltip-arrow-width;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: @tooltip-max-width;
-  padding: var(--size-16) var(--size-16);
-  color: var(--color-content-primary);
-  text-align: center;
-  background-color: var(--color-background-screen);
-  border-radius: @border-radius-base;
-  box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
-}
-
-// Arrows
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
-// stylelint-disable-next-line no-duplicate-selectors
-.tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    .left(50%);
-
-    .margin(left, -@tooltip-arrow-width);
-
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: var(--color-background-screen);
-  }
-
-  &.right .tooltip-arrow {
-    top: 50%;
-    .left(0);
-
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-right-color: var(--color-background-screen);
-  }
-
-  &.left .tooltip-arrow {
-    top: 50%;
-    .right(0);
-
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-left-color: var(--color-background-screen);
-  }
-
-  &.bottom .tooltip-arrow {
-    top: 0;
-    .left(50%);
-
-    .margin(left, -@tooltip-arrow-width);
-
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: var(--color-background-screen);
-  }
-}
-
-[data-toggle=tooltip]:not(.btn) {
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: var(--color-content-accent-hover) !important;
-    outline: 0;
-  }
-}
-
-a[data-toggle=tooltip] {
-  white-space: nowrap;
-}
+@import (reference) 'bootstrap/less/mixins/reset-text.less';
+@import (reference) 'bootstrap/less/mixins/opacity.less';
+@import 'bootstrap/less/tooltip.less';

package/src/less/utilities.less

@@ -1,8 +1,8 @@
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_clearfix.less';
-@import (reference) './mixins/_center-block.less';
-@import (reference) './mixins/_hide-text.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) 'bootstrap/less/mixins/clearfix.less';
+@import (reference) 'bootstrap/less/mixins/center-block.less';
+@import (reference) 'bootstrap/less/mixins/hide-text.less';
+@import 'bootstrap/less/utilities.less';
 
 .d-inline-block {
   display: inline-block;
@@ -11,133 +11,3 @@
 .d-inline {
   display: inline;
 }
-
-.clearfix {
-  .clearfix();
-}
-
-.center-block {
-  .center-block();
-}
-
-.pull-right,
-.pull-xs-right {
-  .float(right) !important;
-}
-
-.pull-left,
-.pull-xs-left {
-  .float(left) !important;
-}
-
-.pull-xs-none {
-  float: none !important;
-}
-
-@media (--screen-sm) {
-  .pull-sm-left {
-    .float(left) !important;
-  }
-
-  .pull-sm-right {
-    .float(right) !important;
-  }
-
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-md) {
-  .pull-md-left {
-    .float(left) !important;
-  }
-
-  .pull-md-right {
-    .float(right) !important;
-  }
-
-  .pull-md-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-lg) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-xl) {
-  .pull-xl-left {
-    .float(left) !important;
-  }
-
-  .pull-xl-right {
-    .float(right) !important;
-  }
-
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-
-// Toggling content
-// -------------------------
-
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-
-.hide {
-  display: none !important;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  .text-hide();
-}
-
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
-  display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-
-.affix {
-  position: fixed;
-}
-
-.rotate90 {
-  transform: rotate(90deg);
-}
-
-.rotate180 {
-  transform: rotate(180deg);
-}
-
-.rotate270 {
-  transform: rotate(270deg);
-}
-
-.rotate-90 {
-  transform: rotate(-90deg);
-}

package/src/less/variables/_typography.less

@@ -0,0 +1,21 @@
+@font-family-base: 'Averta', 'Avenir W02', 'Avenir', Helvetica, Arial, sans-serif;
+
+@font-weight-base: 500;
+@font-weight-semi-bold: 600;
+@font-weight-bold: 800;
+
+@font-size-xx-large: 2.625rem; // 42px
+@font-size-x-large: 1.75rem; // 28px
+@font-size-large: 1.375rem; // 22px
+@font-size-medium: 1.125rem; // 18px
+@font-size-base: 1rem; // 16px
+@font-size-small: 0.875rem; // 14px
+@font-size-x-small: 0.75rem; // 12px
+
+// We will be revisiting these soon, do not use directly
+@line-height-x-large: 1.1428571429; // 32/28
+@line-height-large: 1.3636363636; // 30/22
+@line-height-medium: 1.3333333333; // 24/18
+@line-height-base: 1.5; // 24/16
+@line-height-small: 1.7142857143; // 24/14
+@line-height-x-small: 2; // 24/12

package/src/props/legacy-custom-props.css

@@ -0,0 +1,65 @@
+/*
+  DEPRECATED
+  Use neptune-tokens.css instead. If the token you want isn't available there, raise an issue in @transferwise/neptune-tokens.
+*/
+:root {
+  --border-radius: 3px;
+  --spacer: 8px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --color-text-link-hover: #00a4df;
+  --color-text-link-active: #008ec0;
+  --brand-white: #fff;
+  --link-color: #00b9ff;
+  --brand-pale-blue: #dbf0fd;
+  --brand-navy-minus-20: #253655;
+  --brand-navy-minus-10: #2e4369;
+  --brand-navy: #37517e;
+  --brand-blue-minus-20: #111824;
+  --brand-blue-minus-10: #192439;
+  --brand-blue: #223049;
+  --brand-light-blue-minus-10: #00a4df;
+  --brand-light-blue: #00b9ff;
+  --brand-grey-plus-10: #6f8691;
+  --brand-smoke-minus-10: #a8aaac;
+  --brand-smoke: #d3d5d8;
+  --brand-smoke-plus-10: #e2e6e8;
+  --brand-smoke-plus-20: #f2f5f7;
+  --brand-green-minus-10: #28b862;
+  --brand-green: #2ed06e;
+  --gray-base: #f2f5f7;
+  --gray-darker: #384347;
+  --gray-light: #829ca9;
+  --brand-primary: #37517e;
+  --body-bg: #fff;
+  --text-bold-color: #2e4369;
+  --font-size-xx-large: 2.8rem; /* 42px */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  --font-size-small: 0.9333333333rem; /* 14px */
+  --font-size-x-small: 0.8rem; /* 12px */
+  --line-height: 1.6; /* 24/15 */
+}
+
+@media (--screen-md) {
+  :root {
+    --font-size-xx-large: 2.625rem; /* 42px */
+    --font-size-x-large: 1.75rem; /* 28px */
+    --font-size-large: 1.375rem; /* 22px */
+    --font-size-medium: 1.125rem; /* 18px */
+    --font-size: 1rem; /* 16px */
+    --font-size-small: 0.875rem; /* 14px */
+    --font-size-x-small: 0.75rem; /* 12px */
+    --line-height: 1.5; /* 24/16px */
+  }
+}