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

package/dist/less/neptune-tokens.less

@@ -1,88 +1,130 @@
 
 // Do not edit directly
-// Generated on Wed, 05 Nov 2025 14:03:38 GMT
+// Generated on Wed, 15 Oct 2025 12:29:55 GMT
 
-@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-dark-content-primary: #e2e6e8;
+@color-dark-content-secondary: #c9cbce;
+@color-dark-content-tertiary: #a8aaac;
+@color-dark-content-accent: #00b9ff;
+@color-dark-content-accent-hover: #00a6ea;
+@color-dark-content-accent-active: #0097db;
+@color-dark-content-positive: #6fd698;
+@color-dark-content-positive-hover: #5ac285;
+@color-dark-content-positive-active: #4bb377;
+@color-dark-content-negative: #ffa6a9;
+@color-dark-content-negative-hover: #ea9396;
+@color-dark-content-negative-active: #da8488;
+@color-dark-content-warning: #ffd184;
+@color-dark-content-warning-hover: #e9bd71;
+@color-dark-content-warning-active: #daae63;
+@color-dark-interactive-accent: #00a2dd;
+@color-dark-interactive-accent-hover: #008fc9;
+@color-dark-interactive-accent-active: #0081ba;
+@color-dark-interactive-positive: #2ead4b;
+@color-dark-interactive-positive-hover: #069939;
+@color-dark-interactive-positive-active: #008b2b;
+@color-dark-interactive-negative: #e74848;
+@color-dark-interactive-negative-hover: #d03238;
+@color-dark-interactive-negative-active: #bf1e2c;
+@color-dark-interactive-warning: #df8700;
+@color-dark-interactive-warning-hover: #c97500;
+@color-dark-interactive-warning-active: #b86700;
+@color-dark-interactive-secondary: #a8aaac;
+@color-dark-interactive-secondary-hover: #959799;
+@color-dark-interactive-secondary-active: #87898b;
+@color-dark-background-screen: #181818;
+@color-dark-background-elevated: #202020;
+@color-dark-background-neutral: #86a7bd1a;
+@color-dark-background-accent: #38c8ff1a;
+@color-dark-background-positive: #36c7971a;
+@color-dark-background-negative: #ff87871a;
+@color-dark-background-warning: #ffac001a;
+@color-dark-background-overlay: #ffffff1a;
+@color-dark-border-neutral: #ffffff1a;
+@color-dark-border-overlay: #ffffff1a;
+@color-dark-core-contrast: #ffffff;
+@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;
+@color-navy-content-primary: #ffffff;
+@color-navy-content-secondary: #c9cbce;
+@color-navy-content-tertiary: #a8aaac;
+@color-navy-content-accent: #00b9ff;
+@color-navy-content-accent-hover: #00a6ea;
+@color-navy-content-accent-active: #0097db;
+@color-navy-content-positive: #6fd698;
+@color-navy-content-positive-hover: #5ac285;
+@color-navy-content-positive-active: #4bb377;
+@color-navy-content-negative: #ffa6a9;
+@color-navy-content-negative-hover: #ea9396;
+@color-navy-content-negative-active: #da8488;
+@color-navy-content-warning: #ffd184;
+@color-navy-content-warning-hover: #e9bd71;
+@color-navy-content-warning-active: #daae63;
+@color-navy-interactive-accent: #00a2dd;
+@color-navy-interactive-accent-hover: #008fc9;
+@color-navy-interactive-accent-active: #0081ba;
+@color-navy-interactive-positive: #2ead4b;
+@color-navy-interactive-positive-hover: #069939;
+@color-navy-interactive-positive-active: #008b2b;
+@color-navy-interactive-negative: #e74848;
+@color-navy-interactive-negative-hover: #d03238;
+@color-navy-interactive-negative-active: #bf1e2c;
+@color-navy-interactive-warning: #df8700;
+@color-navy-interactive-warning-hover: #c97500;
+@color-navy-interactive-warning-active: #b86700;
+@color-navy-interactive-secondary: #a8aaac;
+@color-navy-interactive-secondary-hover: #959799;
+@color-navy-interactive-secondary-active: #87898b;
+@color-navy-background-screen: #2e4369;
+@color-navy-background-elevated: #37517e;
+@color-navy-background-neutral: #86a7bd1a;
+@color-navy-background-accent: #38c8ff1a;
+@color-navy-background-positive: #36c7971a;
+@color-navy-background-negative: #ff87871a;
+@color-navy-background-warning: #ffac001a;
+@color-navy-background-overlay: #ffffff1a;
+@color-navy-border-neutral: #ffffff1a;
+@color-navy-border-overlay: #ffffff1a;
+@color-navy-core-contrast: #ffffff;
 @padding-x-small: 8px;
 @padding-small: 16px;
 @padding-medium: 24px;
@@ -178,6 +220,56 @@
 @font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
-@color-base-white: @color-white;
+// Do not edit directly
+// Generated on Wed, 15 Oct 2025 12:29:54 GMT
+
+@color-base-blue-light: #00b9ff;
+@color-base-blue-mid: #00a2dd;
+@color-base-blue-dark: #0097c7;
+@color-base-blue-fade: #38c8ff1a;
+@color-base-green-light: #6fd698;
+@color-base-green-mid: #2ead4b;
+@color-base-green-dark: #008026;
+@color-base-green-fade: #36c7971a;
+@color-base-red-light: #ffa6a9;
+@color-base-red-mid: #e74848;
+@color-base-red-dark: #cf2929;
+@color-base-red-fade: #ff87871a;
+@color-base-orange-light: #ffd184;
+@color-base-orange-mid: #df8700;
+@color-base-orange-dark: #9a6500;
+@color-base-orange-fade: #ffac001a;
+@color-base-smoke-light: #e2e6e8;
+@color-base-smoke-mid: #c9cbce;
+@color-base-smoke-dark: #a8aaac;
+@color-base-smoke-fade: #86a7bd1a;
+@color-base-navy-light: #37517e;
+@color-base-navy-mid: #2e4369;
+@color-base-navy-dark: #253655;
+@color-base-navy-fade: #849cc51a;
+@color-base-grey-light: #829ca9;
+@color-base-grey-mid: #768e9c;
+@color-base-grey-dark: #5d7079;
+@color-base-grey-fade: #829ca91a;
+@color-base-white-light: #ffffff;
+@color-base-white-mid: #ebebeb;
+@color-base-white-fade: #ffffff1a;
+@color-base-black-light: #202020;
+@color-base-black-mid: #181818;
+@color-base-black-dark: #000000;
+@color-base-black-fade: #0000001a;
+@color-base-brand-blue: #00b9ff;
+@color-base-brand-purple: #485cc7;
+@color-base-brand-amber: #ffb619;
+@color-base-brand-borderless: #44ee70;
+
+
+// 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;

package/dist/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/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-d2bc8ee",
+  "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",