@transferwise/neptune-css 0.0.0-experimental-d2bc8ee → 0.0.0-experimental-e674a91

package/src/less/navbar.less

@@ -150,6 +150,7 @@
   left:0;
   z-index: @zindex-navbar-fixed;
   backface-visibility: hidden;
+  background-color: @color-navy-background-elevated;
 
   .navbar-nav > li {
     > a,
@@ -253,6 +254,7 @@
   font-weight: var(--font-weight-semi-bold);
   line-height: var(--line-height-body);
   margin-bottom: 8px;
+  color: @color-navy-content-primary;
 
   .icon-bar:first-child {
     margin-top: 1px;
@@ -324,6 +326,10 @@
         }
 
         @media (--screen-md) {
+          .navbar-inverse & {
+            color: @color-navy-content-primary;
+          }
+
           &:hover {
             border-bottom-color: transparent;
             outline: 0;
@@ -647,6 +653,7 @@
   }
 
   .navbar-brand {
+    color: @color-navy-content-primary;
 
     &:hover,
     &:focus {
@@ -774,8 +781,13 @@
     }
   }
 
+  .navbar-text {
+    color: @color-navy-content-primary;
+  }
+
   .navbar-nav {
     > li > a {
+      color: @color-navy-content-primary;
 
       @media (--screen-md) {
         border-bottom: 3px solid transparent;
@@ -821,6 +833,7 @@
   }
 
   .navbar-link {
+    color: @color-navy-content-primary;
 
     &:hover {
       color: var(--color-content-accent-hover);
@@ -828,6 +841,7 @@
   }
 
   .btn-link {
+    color: @color-navy-content-primary;
 
     &:hover,
     &:focus {
@@ -970,6 +984,7 @@
       display: block;
       width: 100%;
       height: 100%;
+      background-color: @color-navy-background-screen;
       opacity: 0;
       transition: opacity 0.35s ease;
     }
@@ -1006,6 +1021,10 @@
 }
 
 .navbar .profile-name {
+  .np-theme-light & {
+    padding-bottom: 3px;
+  }
+
   .caret {
     vertical-align: top;
     line-height: @navbar-line-height;
@@ -1079,6 +1098,7 @@
 
 @media (max-width: @screen-sm-max) {
   .navbar-static-top {
+    background-color: @color-navy-background-elevated;
     border-bottom-color: transparent;
   }
 }
@@ -1099,6 +1119,7 @@
 
 .navbar-title,
 .navbar-subtitle {
+  color: @color-navy-content-primary;
   text-overflow: ellipsis;
   overflow-x: hidden;
   white-space: nowrap;
@@ -1124,6 +1145,7 @@
   padding-top: 16px;
   margin-top: -16px;
   padding-bottom: 0;
+  background-color: @color-navy-background-elevated;
   border-bottom: 1px solid var(--color-border-neutral);
 
   @media (min-width: @screen-lg-min) {
@@ -1164,6 +1186,12 @@
       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;
+    }
+
     .form-control,
     .input-group,
     .btn-input,
@@ -1199,6 +1227,7 @@
 // TODO this is a hack with no docs
 
 .simple-nav {
+  background-color: @color-navy-background-elevated;
 
   .navbar-nav > li > a {
     padding-top: (@navbar-padding-vertical + 4px);
@@ -1240,6 +1269,7 @@
 
 @media (max-width: @screen-md-max) {
   .simple-nav .navbar-nav > li > a {
+    color: @color-navy-content-primary;
 
     &:not(.disabled, :disabled):focus,
     &:not(.disabled, :disabled):hover,
@@ -1290,6 +1320,7 @@
 
     &.navbar-inverse {
       &::before {
+        background-color: @color-navy-background-screen;
         border-top: none;
       }
     }
@@ -1405,3 +1436,7 @@
 .tw-public-navigation-item-content__text.truncate {
   display: inline-block;
 }
+
+.navbar-background--inverse {
+  background-color: @color-navy-background-elevated;
+}

package/src/less/navs.less

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

package/src/less/sequences.less

@@ -169,9 +169,20 @@
 .sequence-inverse {
   > li {
     border-color: var(--color-border-neutral);
+
+    > a {
+      color: @color-navy-content-primary;
+    }
+
+    &::after {
+      background-color: @color-navy-background-elevated;
+    }
   }
 
   > .active {
+    > a {
+      color: @color-navy-content-primary;
+    }
 
     .small,
     .body-2,
@@ -181,12 +192,18 @@
 
     &::after,
     ~ li::after {
+      background-color: @color-navy-background-elevated;
       background-image: none !important;
     }
+
+    ~ li::before {
+      border-color: @color-navy-background-elevated;
+    }
   }
 }
 
 .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));
@@ -206,6 +223,10 @@
       background-color: var(--color-background-screen);
     }
   }
+
+  &.sequence-inverse > li::before {
+    background-color: @color-navy-background-elevated;
+  }
 }
 
 .sequence-icon {
@@ -231,6 +252,11 @@
     line-height: (@sequence-icon-size - 1px);
   }
 
+  .sequence-inverse & {
+    background-color: @color-navy-background-elevated;
+    border-color: @color-navy-content-primary;
+  }
+
   .sequence a & {
     color: var(--color-content-accent);
     border-color: var(--color-interactive-accent);

package/src/less/table.less

@@ -203,6 +203,9 @@ table col[class*="col-"] {
 // inheritance to nested tables.
 
 // Generate the contextual variants
+.table-row-variant(
+  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));
 .table-row-variant(info; var(--color-background-accent); var(--color-interactive-accent));
@@ -364,6 +367,11 @@ table col[class*="col-"] {
       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;

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

@@ -0,0 +1,69 @@
+/*
+  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: var(--radius-small);
+  --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 */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  /* stylelint-disable-next-line number-max-precision */
+  --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 */
+  }
+}

package/src/variables/neptune-tokens.less

@@ -1,5 +1,12 @@
 @import "@transferwise/neptune-tokens/tokens.less";
+@import "@transferwise/neptune-tokens/colors-base.less";
 
-@color-base-white: @color-white;
+// 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;
 
-// trigger proper build
+@color-base-white: @color-base-white-light;