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

package/dist/props/neptune-tokens.css

@@ -1,90 +1,50 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Nov 2025 14:03:38 GMT
+ * Generated on Wed, 15 Oct 2025 12:29:55 GMT
  */
 
 :root {
-  --color-bright-yellow: #ffeb69;
-  --color-bright-orange: #ffc091;
-  --color-dark-purple: #260a2f;
-  --color-dark-gold: #3a341c;
-  --color-bright-blue: #a0e1e1;
-  --color-dark-charcoal: #21231d;
-  --color-white: #ffffff;
-  --color-black: #000000;
-  --color-bright-green: #9fe870;
-  --color-forest-green: #163300;
-  --color-bright-pink: #ffd7ef;
-  --color-dark-maroon: #320707;
-  --color-content-primary: #0e0f0c;
-  --color-content-secondary: #454745;
-  --color-content-tertiary: #6a6c6a;
-  --color-content-link: #163300;
-  --color-content-link-hover: #0d1f00;
-  --color-content-link-active: #0e0f0c;
-  --color-interactive-primary: #163300;
-  --color-interactive-primary-hover: #0d1f00;
-  --color-interactive-primary-active: #0e0f0c;
-  --color-interactive-secondary: #868685;
-  --color-interactive-secondary-hover: #6c6c6b;
-  --color-interactive-secondary-active: #525251;
-  --color-interactive-accent: #9fe870;
-  --color-interactive-accent-hover: #80e142;
-  --color-interactive-accent-active: #65cf21;
-  --color-interactive-control: #163300;
-  --color-interactive-control-hover: #0d1f00;
-  --color-interactive-control-active: #0e0f0c;
-  --color-interactive-contrast: #9fe870;
-  --color-interactive-contrast-hover: #cdffad;
-  --color-interactive-contrast-active: #ecffe0;
-  --color-interactive-neutral: #e2f6d5;
-  --color-interactive-neutral-hover: #d3f2c0;
-  --color-interactive-neutral-active: #c5edab;
-  --color-border-neutral: #0e0f0c1f;
-  --color-border-overlay: #0e0f0c1f;
+  --color-content-primary: #37517e;
+  --color-content-secondary: #5d7079;
+  --color-content-tertiary: #768e9c;
+  --color-content-accent: #0097c7;
+  --color-content-accent-hover: #0084b3;
+  --color-content-accent-active: #0077a5;
+  --color-content-positive: #008026;
+  --color-content-positive-hover: #006d13;
+  --color-content-positive-active: #006002;
+  --color-content-negative: #cf2929;
+  --color-content-negative-hover: #b80419;
+  --color-content-negative-active: #a7000d;
+  --color-content-warning: #9a6500;
+  --color-content-warning-hover: #855400;
+  --color-content-warning-active: #764700;
+  --color-interactive-accent: #00a2dd;
+  --color-interactive-accent-hover: #008fc9;
+  --color-interactive-accent-active: #0081ba;
+  --color-interactive-positive: #2ead4b;
+  --color-interactive-positive-hover: #069939;
+  --color-interactive-positive-active: #008b2b;
+  --color-interactive-negative: #e74848;
+  --color-interactive-negative-hover: #d03238;
+  --color-interactive-negative-active: #bf1e2c;
+  --color-interactive-warning: #df8700;
+  --color-interactive-warning-hover: #c97500;
+  --color-interactive-warning-active: #b86700;
+  --color-interactive-secondary: #c9cbce;
+  --color-interactive-secondary-hover: #b5b7ba;
+  --color-interactive-secondary-active: #a7a9ab;
   --color-background-screen: #ffffff;
-  --color-background-screen-hover: #16330014;
-  --color-background-screen-active: #16330021;
   --color-background-elevated: #ffffff;
-  --color-background-neutral: #16330014;
-  --color-background-neutral-hover: #16330021;
-  --color-background-neutral-active: #1633002e;
-  --color-background-overlay: #16330014;
-  --color-sentiment-negative: #cb272f;
-  --color-sentiment-negative-hover: #b8232b;
-  --color-sentiment-negative-active: #a72027;
-  --color-sentiment-negative-primary: #cb272f;
-  --color-sentiment-negative-primary-hover: #b8232b;
-  --color-sentiment-negative-primary-active: #a72027;
-  --color-sentiment-negative-secondary: #fbeaea;
-  --color-sentiment-negative-secondary-hover: #f9e1e1;
-  --color-sentiment-negative-secondary-active: #f8d8d8;
-  --color-sentiment-positive: #054d28;
-  --color-sentiment-positive-hover: #043a1e;
-  --color-sentiment-positive-active: #022614;
-  --color-sentiment-positive-primary: #054d28;
-  --color-sentiment-positive-primary-hover: #043a1e;
-  --color-sentiment-positive-primary-active: #022614;
-  --color-sentiment-positive-secondary: #e2f6d5;
-  --color-sentiment-positive-secondary-hover: #d3f2c0;
-  --color-sentiment-positive-secondary-active: #c5edab;
-  --color-sentiment-warning: #ffd11a;
-  --color-sentiment-warning-hover: #ffd11a;
-  --color-sentiment-warning-active: #ffd11a;
-  --color-sentiment-warning-primary: #ffd11a;
-  --color-sentiment-warning-primary-hover: #ffd11a;
-  --color-sentiment-warning-primary-active: #ffd11a;
-  --color-sentiment-warning-secondary: #fff7d7;
-  --color-sentiment-warning-secondary-hover: #fff7d7;
-  --color-sentiment-warning-secondary-active: #fff7d7;
-  --color-sentiment-warning-content: #4a3b1c;
-  --color-sentiment-warning-content-hover: #3b2f16;
-  --color-sentiment-warning-content-active: #2c2311;
-  --color-contrast: #ffffff;
-  --color-light: #ffffff;
-  --color-dark: #121511;
-  --color-contrast-overlay: #ffffff;
-  --color-contrast-theme: #121511;
+  --color-background-neutral: #86a7bd1a;
+  --color-background-accent: #38c8ff1a;
+  --color-background-positive: #36c7971a;
+  --color-background-negative: #ff87871a;
+  --color-background-warning: #ffac001a;
+  --color-background-overlay: #0000001a;
+  --color-border-neutral: #0000001a;
+  --color-border-overlay: #0000001a;
+  --color-core-contrast: #000000;
   --padding-x-small: 8px;
   --padding-small: 16px;
   --padding-medium: 24px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-bca35d9",
+  "version": "0.0.0-experimental-e674a91",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "0.0.0-experimental-dd9e03b"
+    "@transferwise/neptune-tokens": "^8.20.2"
   },
   "devDependencies": {
     "gulp": "^5.0.1",

package/src/less/addons/_background-utilities.less

@@ -15,6 +15,12 @@
   background-color: var(--color-background-accent) !important;
 }
 
+// @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+.bg-primary {
+  background-color: @color-navy-background-elevated !important;
+  color: @color-navy-content-primary;
+}
+
 // @DEPRECATED: .bg-success, .bg-positive use .bg-neutral instead
 .bg-positive,
 .bg-success {
@@ -43,3 +49,34 @@
 .bg-overlay {
   background-color: var(--color-background-overlay) !important;
 }
+
+// @DEPRECATED: .bg-primary, .bg-info, .bg-accent use .bg-neutral or .bg-elevated or ThemeProvider with theme="forest-green" instead
+.bg-primary,
+.bg-info,
+.bg-accent {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection,
+  .np-text-title-body,
+  .np-text-title-group,
+  strong {
+    color: @color-navy-content-primary;
+  }
+}

package/src/less/alerts.less

@@ -102,6 +102,15 @@
     var(--color-content-positive);
     var(--color-content-positive-hover);
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-positive;
+      @color-navy-content-positive;
+      @color-navy-content-positive-hover;
+    );
+  }
 }
 
 .alert-info,
@@ -111,6 +120,15 @@
     var(--color-content-primary);
     var(--color-content-primary);
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-neutral;
+      @color-navy-content-primary;
+      @color-navy-content-primary;
+    );
+  }
 }
 
 .alert-warning {
@@ -119,6 +137,15 @@
     var(--color-content-warning);
     var(--color-content-warning-hover);
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-warning;
+      @color-navy-content-warning;
+      @color-navy-content-warning-hover;
+    );
+  }
 }
 
 .alert-danger,
@@ -128,6 +155,15 @@
     var(--color-content-negative);
     var(--color-content-negative-hover);
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-negative;
+      @color-navy-content-negative;
+      @color-navy-content-negative-hover;
+    );
+  }
 }
 
 .form-group:focus-within .alert-focus,

package/src/less/background.less

@@ -7,6 +7,7 @@
   background-position: bottom;
 
   &--dark {
+    background-color: @color-navy-background-neutral;
     background-image: url("../img/bg-dark.svg");
 
     .np-theme-personal & {

package/src/less/buttons.less

@@ -589,6 +589,28 @@ input[type="button"] {
   }
 }
 
+// @TODO Deprecate / Remove
+// input-inverse is deprecated, remove after styleguide-components updated
+.btn-input-inverse {
+  --color-content-primary: @color-navy-content-primary;
+  --color-content-accent: @color-navy-content-accent;
+}
+
+.btn-input-inverse,
+.btn-addon {
+  .button-variant(
+    @color-navy-content-primary;
+    @color-navy-content-primary;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    @color-navy-background-elevated;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    var(--color-background-screen);
+  );
+}
+
 // @TODO Deprecate / Remove
 // Remove bootstrap-select rules after checking tw-currency-select
 .form-group-sm {

package/src/less/column-layout.less

@@ -119,6 +119,7 @@
     height: 0;
     opacity: 0;
     transition: opacity 0.35s ease;
+    background-color: @color-navy-background-elevated;
     cursor: pointer;
     z-index: @zindex-mobile-nav-background;
   }

package/src/less/core/_scaffolding.less

@@ -98,16 +98,30 @@ pre {
 a,
 .np-text-link-default,
 .np-text-link-large {
-  color: var(--color-content-link);
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-accent;
+
+    &:hover,
+    &:focus {
+      color: @color-navy-content-accent-hover;
+    }
+
+    &:active {
+      color: @color-navy-content-accent-active;
+    }
+  }
 
   &:hover,
   &:focus {
-    color: var(--color-content-link-hover);
+    color: var(--color-sentiment-content-primary-hover, var(--color-content-link-hover));
     text-decoration: underline;
   }
 
   &:active {
-    color: var(--color-content-link-active);
+    color: var(--color-sentiment-content-primary-active, var(--color-content-link-active));
   }
 
   &.secondary {
@@ -283,6 +297,11 @@ hr {
   border: 0;
   border-top: 1px solid var(--color-border-neutral);
 
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    border-top: 1px solid @color-navy-border-neutral;
+  }
+
   @media (--screen-sm) {
     margin: var(--size-24) auto;
   }

package/src/less/core/_typography-utilities.less

@@ -176,6 +176,11 @@
 
 .text-primary {
   .text-emphasis-variant(var(--color-content-primary), var(--color-content-primary), var(--color-content-primary));
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-primary !important;
+  }
 }
 
 .text-secondary {
@@ -189,12 +194,22 @@
     var(--color-content-positive),
     var(--color-content-positive-hover)
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-positive !important;
+  }
 }
 
 .text-accent,
 .text-info {
   .text-emphasis-variant(var(--color-content-accent), var(--color-content-accent), var(--color-content-accent-hover));
   color: var(--color-interactive-primary) !important;
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-accent !important;
+  }
 }
 
 .text-warning {
@@ -203,6 +218,11 @@
     var(--color-content-warning),
     var(--color-content-warning-hover),
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-warning !important;
+  }
 }
 
 .text-negative,
@@ -212,6 +232,15 @@
     var(--color-sentiment-negative),
     var(--color-sentiment-negative-hover)
   );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    color: @color-navy-content-negative !important;
+  }
+}
+
+.text-inverse {
+  .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
 }
 
 .text-muted {

package/src/less/dropdowns.less

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

package/src/less/footer.less

@@ -69,9 +69,42 @@
   }
 
   &.footer-inverse {
+    background: @color-navy-background-elevated;
+
+    .footer-link,
+    .link-icon {
+      color: @color-navy-content-primary;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: @color-navy-content-primary;
+      }
+
+      svg {
+        fill: @color-navy-content-primary;
+
+        &:hover,
+        &:active,
+        &:focus {
+          fill: @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;
+    }
   }
 
   @media (--screen-xs-max) {

package/src/less/mixins/_sequence.less

@@ -125,12 +125,12 @@
     .sequence-variant-detail(
       @color,
       @pip-offset-sm, @pip-offset-md, @pip-offset-lg,
-      var(--color-border-neutral), var(--color-border-neutral), @sequence-margin-lg
+      var(--color-border-neutral), @color-navy-border-neutral, @sequence-margin-lg
     );
   }
 
   @keyframes ~"sequence-pip-@{type}" {
-    from { border-color: var(--color-border-neutral); }
+    from { border-color: @color-navy-border-neutral; }
     to { border-color: @color; }
   }
 }

package/src/less/modals.less

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

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;
     }
@@ -1083,6 +1098,7 @@
 
 @media (max-width: @screen-sm-max) {
   .navbar-static-top {
+    background-color: @color-navy-background-elevated;
     border-bottom-color: transparent;
   }
 }
@@ -1103,6 +1119,7 @@
 
 .navbar-title,
 .navbar-subtitle {
+  color: @color-navy-content-primary;
   text-overflow: ellipsis;
   overflow-x: hidden;
   white-space: nowrap;
@@ -1128,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) {
@@ -1168,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,
@@ -1203,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);
@@ -1244,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,
@@ -1294,6 +1320,7 @@
 
     &.navbar-inverse {
       &::before {
+        background-color: @color-navy-background-screen;
         border-top: none;
       }
     }
@@ -1409,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
 // -------------------------