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

package/src/less/table.less

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

package/src/less/tick.less

@@ -1,3 +1,5 @@
+@import (reference) './mixins/_logical-properties.less';
+
 .tw-checkbox-check {
   position: relative;
   display: inline-block;
@@ -15,7 +17,18 @@
 
     .tw-checkbox-button[disabled] &,
     input[type='checkbox']:disabled + .tw-checkbox-button & {
-      background-color: var(--color-text-inactive);
+      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);
     }
   }
 

package/src/less/tooltip.less

@@ -1,7 +1,126 @@
 // TODO: remove bootstrap dependencies
 
-// variables
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) 'bootstrap/less/mixins/reset-text.less';
-@import (reference) 'bootstrap/less/mixins/opacity.less';
-@import 'bootstrap/less/tooltip.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: @font-size-small;
+  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: @link-hover-color !important;
+    outline: 0;
+  }
+}
+
+a[data-toggle=tooltip] {
+  white-space: nowrap;
+}

package/src/less/utilities.less

@@ -1,8 +1,8 @@
 @import (reference) '../variables/legacy-variables.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';
+@import (reference) './mixins/_clearfix.less';
+@import (reference) './mixins/_center-block.less';
+@import (reference) './mixins/_hide-text.less';
+@import (reference) './mixins/_logical-properties.less';
 
 .d-inline-block {
   display: inline-block;
@@ -11,3 +11,133 @@
 .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

@@ -1,3 +1,5 @@
+// Deprecated legacy variables. Use Neptune-tokens ^1.2.0 instead
+
 @font-family-base: 'Averta', 'Avenir W02', 'Avenir', Helvetica, Arial, sans-serif;
 
 @font-weight-base: 500;

package/src/props/neptune-tokens.css

@@ -1 +1,2 @@
-@import '@transferwise/neptune-tokens/tokens.css';
+@import '@transferwise/neptune-tokens/colors-base.css';
+@import '@transferwise/neptune-tokens/themes/default/tokens.css';

package/src/variables/neptune-tokens.less

@@ -1,4 +1,2 @@
-@import '@transferwise/neptune-tokens/tokens.less';
-
-// Including colours which aren't semantic props yet.
 @import '@transferwise/neptune-tokens/colors-base.less';
+@import '@transferwise/neptune-tokens/themes/default/tokens.less';