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

package/dist/props/neptune-tokens.css

@@ -1,50 +1,90 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Oct 2025 12:29:55 GMT
+ * Generated on Wed, 05 Nov 2025 14:03:38 GMT
  */
 
 :root {
-  --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-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-background-screen: #ffffff;
+  --color-background-screen-hover: #16330014;
+  --color-background-screen-active: #16330021;
   --color-background-elevated: #ffffff;
-  --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;
+  --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;
   --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-b2666ac",
+  "version": "0.0.0-experimental-d2bc8ee",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.20.2"
+    "@transferwise/neptune-tokens": "0.0.0-experimental-dd9e03b"
   },
   "devDependencies": {
     "gulp": "^5.0.1",

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

@@ -15,12 +15,6 @@
   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 {
@@ -49,34 +43,3 @@
 .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,15 +102,6 @@
     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,
@@ -120,15 +111,6 @@
     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 {
@@ -137,15 +119,6 @@
     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,
@@ -155,15 +128,6 @@
     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,7 +7,6 @@
   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,28 +589,6 @@ 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,7 +119,6 @@
     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/_fonts.less

@@ -63,32 +63,6 @@
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 
-@font-face {
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src:
-    url("../fonts/TW-Averta-Regular.woff2") format("woff2"),
-    url("../fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src:
-    url("../fonts/TW-Averta-Semibold.woff2") format("woff2"),
-    url("../fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src:
-    url("../fonts/TW-Averta-Bold.woff2") format("woff2"),
-    url("../fonts/TW-Averta-Bold.woff") format("woff");
-}
-
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;

package/src/less/core/_scaffolding.less

@@ -7,7 +7,8 @@
 @import (reference) "../core/_typography.less";
 @import "../../variables/legacy-variables.less";
 
-:root {
+:root,
+.np-theme-personal {
   // page default font size should be set in absolute units (pixels)
   --base-font-size: 16px;
   --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
@@ -25,18 +26,7 @@
   --btn-radius-base: @border-radius-base;
   --btn-sm-radius-base: @border-radius-small;
   --btn-lg-radius-base: @border-radius-large;
-}
-
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-
-  font-family: var(--font-family-regular);
-  line-height: var(--line-height-body);
-}
 
-.np-theme-personal {
   --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
 
   font-family: var(--font-family-regular);
@@ -100,20 +90,6 @@ a,
 .np-text-link-large {
   color: 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);
@@ -297,11 +273,6 @@ 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,11 +176,6 @@
 
 .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 {
@@ -194,22 +189,12 @@
     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 {
@@ -218,11 +203,6 @@
     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,
@@ -232,15 +212,6 @@
     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

@@ -91,16 +91,6 @@
     }
   }
 
-  .np-theme-light & {
-    > li:first-child > a {
-      .border-top-radius((@border-radius-base - 1px));
-    }
-
-    > li:last-child > a {
-      .border-bottom-radius((@border-radius-base - 1px));
-    }
-  }
-
   > .overlay-back-button,
   > .overlay-title {
     display: none;
@@ -164,21 +154,13 @@
   &,
   &: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,42 +69,9 @@
   }
 
   &.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), @color-navy-border-neutral, @sequence-margin-lg
+      var(--color-border-neutral), var(--color-border-neutral), @sequence-margin-lg
     );
   }
 
   @keyframes ~"sequence-pip-@{type}" {
-    from { border-color: @color-navy-border-neutral; }
+    from { border-color: var(--color-border-neutral); }
     to { border-color: @color; }
   }
 }

package/src/less/modals.less

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