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

package/src/less/progress-bars.less

@@ -8,7 +8,7 @@
   height: @progress-height;
   margin-top: calc((var(--size-24) - @progress-height) / 2);
   margin-bottom: calc((var(--size-24) - @progress-height) / 2);
-  background-color: @color-base-smoke-light;
+  background-color: var(--color-background-neutral);
   border-radius: calc(@progress-height / 2);
 }
 
@@ -18,7 +18,7 @@
   height: 100%;
   font-size: @font-size-base;
   font-weight: bold;
-  color: @color-base-white;
+  color: var(--color-base-white-light);
   text-align: right;
   background-color: @color-base-blue-light;
   transition: width 0.6s ease;
@@ -58,9 +58,9 @@
 }
 
 .progress-bar-warning {
-  background-color: var(--color-warning);
+  background-color: var(--color-content-warning);
 }
 
 .progress-bar-danger {
-  background-color: var(--color-negative);
+  background-color: var(--color-content-negative);
 }

package/src/less/sequences.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/background-variant';

package/src/less/table.less

@@ -1,7 +1,5 @@
-// TODO: remove bootstrap dependencies
-
 // variables
-@import (reference) 'bootstrap/less/variables.less';
+@import (reference) '../variables/legacy-variables.less';
 
 // mixins
 @import './mixins/_table-row.less';
@@ -11,7 +9,7 @@
 // --------------------------------------------------
 
 table {
-  background-color: @table-bg;
+  background-color: var(--color-background-screen);
   border-collapse: separate;
 
   td,
@@ -27,7 +25,7 @@ table {
 caption {
   padding-top: @table-cell-padding;
   padding-bottom: @table-cell-padding;
-  color: @text-muted;
+  color: var(--color-content-disabled);
   text-align: left;
 }
 
@@ -50,7 +48,7 @@ th {
       padding: @line-height-computed @table-cell-padding;
       line-height: @line-height-base;
       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;
     }
@@ -62,7 +60,7 @@ th {
     padding: @line-height-computed @table-cell-padding;
     line-height: @line-height-base;
     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;
   }
@@ -101,12 +99,12 @@ 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,
@@ -114,7 +112,7 @@ th {
   > .thead,
   > .tfoot {
     font-size: @font-size-small;
-    color: @headings-color;
+    color: var(--color-content-primary);
   }
 
   > tbody,
@@ -124,7 +122,7 @@ th {
 
   > tbody > tr > th,
   > .tbody > dl > .th {
-    color: @headings-color;
+    color: var(--color-content-primary);
   }
 }
 
@@ -153,12 +151,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);
   }
 }
 
@@ -174,28 +172,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);
     }
   }
 }
@@ -216,13 +198,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
 //
@@ -280,7 +262,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;
     }
   }
@@ -302,7 +284,7 @@ table col[class*='col-'] {
         > li {
           display: table-cell;
           font-weight: @font-weight-bold;
-          color: @headings-color;
+          color: var(--color-content-primary);
         }
       }
     }
@@ -320,7 +302,7 @@ table col[class*='col-'] {
         > dd {
           display: table-cell;
           font-size: @font-size-small;
-          color: @text-color;
+          color: var(--color-content-secondary);
         }
       }
     }
@@ -339,7 +321,7 @@ 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;
@@ -384,7 +366,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

@@ -15,7 +15,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,116 @@
 // TODO: remove bootstrap dependencies
 
 // variables
-@import (reference) 'bootstrap/less/variables.less';
+@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';
+
+//
+// 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: 8px 16px;
+  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,4 +1,4 @@
-@import (reference) 'bootstrap/less/variables.less';
+@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';

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';