@transferwise/neptune-css 0.0.0-experimental-7cfec48 → 0.0.0-experimental-1ed1574

package/src/less/dropdowns.less

@@ -164,21 +164,21 @@
   &,
   &:hover,
   &:focus {
-    // color: @color-navy-content-primary;
+    color: @color-navy-content-primary;
     text-decoration: none;
     outline: 0;
-    // background-color: @color-navy-background-elevated;
+    background-color: @color-navy-background-elevated;
   }
 
   strong {
     color: inherit;
   }
 
-  // .np-text-body-default,
-  // .small,
-  // .secondary {
-  //   color: @color-navy-content-secondary;
-  // }
+  .np-text-body-default,
+  .small,
+  .secondary {
+    color: @color-navy-content-secondary;
+  }
 }
 
 // Disabled state

package/src/less/footer.less

@@ -69,42 +69,42 @@
   }
 
   &.footer-inverse {
-    // background: @color-navy-background-elevated;
+    background: @color-navy-background-elevated;
 
-    // .footer-link,
-    // .link-icon {
-    //   color: @color-navy-content-primary;
+    .footer-link,
+    .link-icon {
+      color: @color-navy-content-primary;
 
-    //   &:hover,
-    //   &:active,
-    //   &:focus {
-    //     color: @color-navy-content-primary;
-    //   }
+      &:hover,
+      &:active,
+      &:focus {
+        color: @color-navy-content-primary;
+      }
 
-    //   svg {
-    //     fill: @color-navy-content-primary;
+      svg {
+        fill: @color-navy-content-primary;
 
-    //     &:hover,
-    //     &:active,
-    //     &:focus {
-    //       fill: @color-navy-content-primary;
-    //     }
-    //   }
-    // }
+        &:hover,
+        &:active,
+        &:focus {
+          fill: @color-navy-content-primary;
+        }
+      }
+    }
 
-    // .footer-title {
-    //   color: @color-navy-content-primary;
-    // }
+    .footer-title {
+      color: @color-navy-content-primary;
+    }
 
     hr {
       opacity: 0.1;
     }
 
-    // .tiny,
-    // .body-3,
-    // .np-text-body-default {
-    //   color: @color-navy-content-primary;
-    // }
+    .tiny,
+    .body-3,
+    .np-text-body-default {
+      color: @color-navy-content-primary;
+    }
   }
 
   @media (--screen-xs-max) {

package/src/less/modals.less

@@ -89,7 +89,7 @@
   bottom: 0;
   left: 0;
   z-index: @zindex-modal-background;
-  // background-color: @color-navy-background-elevated;
+  background-color: @color-navy-background-elevated;
 
   // Fade for backdrop
 

package/src/less/navbar-base.less

@@ -137,7 +137,7 @@
   left:0;
   z-index: @zindex-navbar-fixed;
   backface-visibility: hidden;
-  // background-color: @color-navy-background-elevated;
+  background-color: @color-navy-background-elevated;
 
   .navbar-nav > li {
     > a,
@@ -241,7 +241,7 @@
   font-weight: var(--font-weight-semi-bold);
   line-height: var(--line-height-body);
   margin-bottom: 8px;
-  // color: @color-navy-content-primary;
+  color: @color-navy-content-primary;
 
   .icon-bar:first-child {
     margin-top: 1px;
@@ -313,9 +313,9 @@
         }
 
         @media (--screen-md) {
-          // .navbar-inverse & {
-          //   color: @color-navy-content-primary;
-          // }
+          .navbar-inverse & {
+            color: @color-navy-content-primary;
+          }
 
           &:hover {
             border-bottom-color: transparent;
@@ -594,7 +594,7 @@
 // Add a class to make any element properly align itself vertically within the navbars.
 
 .navbar-text {
-  .navbar-vertical-align(24px);
+  .navbar-vertical-align(@size-24);
 
   @media (--screen-md) {
     .float(left);
@@ -640,7 +640,7 @@
   }
 
   .navbar-brand {
-    // color: @color-navy-content-primary;
+    color: @color-navy-content-primary;
 
     &:hover,
     &:focus {
@@ -768,13 +768,13 @@
     }
   }
 
-  // .navbar-text {
-  //   color: @color-navy-content-primary;
-  // }
+  .navbar-text {
+    color: @color-navy-content-primary;
+  }
 
   .navbar-nav {
     > li > a {
-      // color: @color-navy-content-primary;
+      color: @color-navy-content-primary;
 
       @media (--screen-md) {
         border-bottom: 3px solid transparent;
@@ -820,7 +820,7 @@
   }
 
   .navbar-link {
-    // color: @color-navy-content-primary;
+    color: @color-navy-content-primary;
 
     &:hover {
       color: var(--color-content-accent-hover);
@@ -828,7 +828,7 @@
   }
 
   .btn-link {
-    // color: @color-navy-content-primary;
+    color: @color-navy-content-primary;
 
     &:hover,
     &:focus {
@@ -971,7 +971,7 @@
       display: block;
       width: 100%;
       height: 100%;
-      // background-color: @color-navy-background-screen;
+      background-color: @color-navy-background-screen;
       opacity: 0;
       transition: opacity 0.35s ease;
     }
@@ -1085,7 +1085,7 @@
 
 @media (max-width: @screen-sm-max) {
   .navbar-static-top {
-    // background-color: @color-navy-background-elevated;
+    background-color: @color-navy-background-elevated;
     border-bottom-color: transparent;
   }
 }
@@ -1106,7 +1106,7 @@
 
 .navbar-title,
 .navbar-subtitle {
-  // color: @color-navy-content-primary;
+  color: @color-navy-content-primary;
   text-overflow: ellipsis;
   overflow-x: hidden;
   white-space: nowrap;
@@ -1132,7 +1132,7 @@
   padding-top: 16px;
   margin-top: -16px;
   padding-bottom: 0;
-  // background-color: @color-navy-background-elevated;
+  background-color: @color-navy-background-elevated;
   border-bottom: 1px solid var(--color-border-neutral);
 
   @media (min-width: @screen-lg-min) {
@@ -1173,11 +1173,11 @@
       border-color: var(--color-interactive-accent);
     }
 
-    // .btn-info:not(.disabled, :disabled):hover,
-    // .btn-warning:not(.disabled, :disabled):hover,
-    // .btn-danger:not(.disabled, :disabled):hover {
-    //   color: @color-navy-content-primary;
-    // }
+    .btn-info:not(.disabled, :disabled):hover,
+    .btn-warning:not(.disabled, :disabled):hover,
+    .btn-danger:not(.disabled, :disabled):hover {
+      color: @color-navy-content-primary;
+    }
 
     .form-control,
     .input-group,
@@ -1214,7 +1214,7 @@
 // TODO this is a hack with no docs
 
 .simple-nav {
-  // background-color: @color-navy-background-elevated;
+  background-color: @color-navy-background-elevated;
 
   .navbar-nav > li > a {
     padding-top: (@navbar-padding-vertical + 4px);
@@ -1256,7 +1256,7 @@
 
 @media (max-width: @screen-md-max) {
   .simple-nav .navbar-nav > li > a {
-    // color: @color-navy-content-primary;
+    color: @color-navy-content-primary;
 
     &:not(.disabled, :disabled):focus,
     &:not(.disabled, :disabled):hover,
@@ -1307,7 +1307,7 @@
 
     &.navbar-inverse {
       &::before {
-        // background-color: @color-navy-background-screen;
+        background-color: @color-navy-background-screen;
         border-top: none;
       }
     }

package/src/less/navbar.less

@@ -101,6 +101,6 @@
   display: inline-block;
 }
 
-// .navbar-background--inverse {
-//   background-color: @color-navy-background-elevated;
-// }
+.navbar-background--inverse {
+  background-color: @color-navy-background-elevated;
+}

package/src/less/navs.less

@@ -98,15 +98,15 @@
   }
 }
 
-// .nav-inverse {
-//   > li > a {
-//     color: @color-navy-content-primary;
-//   }
-
-//   > li.active > a {
-//     background-color: @color-navy-background-screen;
-//   }
-// }
+.nav-inverse {
+  > li > a {
+    color: @color-navy-content-primary;
+  }
+
+  > li.active > a {
+    background-color: @color-navy-background-screen;
+  }
+}
 
 // Tabs
 // -------------------------

package/src/less/sequences.less

@@ -171,17 +171,17 @@
     border-color: var(--color-border-neutral);
 
     > a {
-      // color: @color-navy-content-primary;
+      color: @color-navy-content-primary;
     }
 
     &::after {
-      background-color: var(--color-forest-green);
+      background-color: @color-navy-background-elevated;
     }
   }
 
   > .active {
     > a {
-      // color: @color-navy-content-primary;
+      color: @color-navy-content-primary;
     }
 
     .small,
@@ -192,21 +192,21 @@
 
     &::after,
     ~ li::after {
-      background-color: var(--color-forest-green);
+      background-color: @color-navy-background-elevated;
       background-image: none !important;
     }
 
     ~ li::before {
-      border-color: var(--color-forest-green);
+      border-color: @color-navy-background-elevated;
     }
   }
 }
 
-// .sequence-variant("info", var(--color-interactive-accent));
-// .sequence-variant("primary", var(--color-forest-green));
-// .sequence-variant("success", var(--color-interactive-positive));
-// .sequence-variant("warning", var(--color-interactive-warning));
-// .sequence-variant("danger", var(--color-interactive-negative));
+.sequence-variant("info", var(--color-interactive-accent));
+.sequence-variant("primary", @color-navy-background-elevated);
+.sequence-variant("success", var(--color-interactive-positive));
+.sequence-variant("warning", var(--color-interactive-warning));
+.sequence-variant("danger", var(--color-interactive-negative));
 
 .sequence-hollow {
   > li::before {
@@ -225,7 +225,7 @@
   }
 
   &.sequence-inverse > li::before {
-    background-color: var(--color-forest-green);
+    background-color: @color-navy-background-elevated;
   }
 }
 
@@ -253,8 +253,8 @@
   }
 
   .sequence-inverse & {
-    background-color: var(--color-forest-green);
-    // border-color: @color-navy-content-primary;
+    background-color: @color-navy-background-elevated;
+    border-color: @color-navy-content-primary;
   }
 
   .sequence a & {

package/src/less/table.less

@@ -204,7 +204,7 @@ table col[class*="col-"] {
 
 // Generate the contextual variants
 .table-row-variant(
-  primary; unset; var(--color-border-neutral); var(--color-background-elevated)
+  primary; @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));
@@ -353,33 +353,33 @@ table col[class*="col-"] {
 }
 
 /* Deprecated - Table CSS for components moved inside @transferwise/components */
-// .table-calendar {
-//   min-width: 300px;
-
-//   > tbody > tr > td {
-//     padding: 0;
-
-//     > a {
-//       display: block;
-//       padding: 4px 0;
-//       margin: 4px 2px;
-//       border-radius: @border-radius-base;
-//       text-align: center;
-//       text-decoration: none;
-
-//       &.active {
-//         background-color: @color-navy-background-elevated;
-//         color: @color-navy-content-primary;
-//       }
-
-//       &:not([disabled]):hover {
-//         background-color: var(--color-content-accent);
-//         color: #fff;
-//       }
-//     }
-//   }
-
-//   > thead > tr > th {
-//     text-align: center;
-//   }
-// }
+.table-calendar {
+  min-width: 300px;
+
+  > tbody > tr > td {
+    padding: 0;
+
+    > a {
+      display: block;
+      padding: 4px 0;
+      margin: 4px 2px;
+      border-radius: @border-radius-base;
+      text-align: center;
+      text-decoration: none;
+
+      &.active {
+        background-color: @color-navy-background-elevated;
+        color: @color-navy-content-primary;
+      }
+
+      &:not([disabled]):hover {
+        background-color: var(--color-content-accent);
+        color: #fff;
+      }
+    }
+  }
+
+  > thead > tr > th {
+    text-align: center;
+  }
+}

package/src/variables/neptune-tokens.less

@@ -1,12 +1,12 @@
 @import "@transferwise/neptune-tokens/tokens.less";
-// @import "@transferwise/neptune-tokens/colors-base.less";
+@import "@transferwise/neptune-tokens/colors-base.less";
 
 // DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors
-// @color-primary: #37517e;
-// @color-secondary: #5d7079;
-// @color-accent: #00b9ff;
-// @color-positive: #2ed06e;
-// @color-negative: #f53636;
-// @color-warning: #ffa600;
+@color-primary: #37517e;
+@color-secondary: #5d7079;
+@color-accent: #00b9ff;
+@color-positive: #2ed06e;
+@color-negative: #f53636;
+@color-warning: #ffa600;
 
-// @color-base-white: @color-base-white-light;
+@color-base-white: @color-base-white-light;