@transferwise/neptune-css 14.9.5 → 14.10.0

package/dist/css/dropdowns.css

@@ -110,20 +110,15 @@
 .btn-group .dropdown-menu.dropdown-menu-lg {
   width: 420px;
 }.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus {
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #37517e;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   outline: 0;
-}.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: #ffffff;
-  background-color: #37517e;
-}.np-theme-personal .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-neutral-active);
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }.dropdown-menu > .active > a,
 .dropdown-menu > .selected > a,
 .dropdown-menu > .active > a:hover,

package/dist/css/navbar.css

@@ -281,22 +281,15 @@
   width: 420px;
 }
 .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus {
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #37517e;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   outline: 0;
-}
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: #ffffff;
-  background-color: #37517e;
-}
-.np-theme-personal .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-neutral-active);
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .selected > a,

package/dist/css/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 :root {
@@ -141,7 +141,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 .np-theme-personal {
@@ -359,7 +359,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -605,7 +605,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -851,7 +851,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 .np-theme-personal--dark {
@@ -1095,6 +1095,368 @@
   }
 }
 
+/**
+ * Do not edit directly
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
+ */
+
+.np-theme-platform {
+  --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: #163300;
+  --color-content-secondary: #163300;
+  --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: #0c2300;
+  --color-interactive-primary-active: #001a00;
+  --color-interactive-primary-hover: #0d1f00;
+  --color-interactive-primary-hover-hover: #001100;
+  --color-interactive-primary-hover-active: #000000;
+  --color-interactive-primary-active: #0e0f0c;
+  --color-interactive-primary-active-hover: #000000;
+  --color-interactive-primary-active-active: #000000;
+  --color-interactive-secondary: #868685;
+  --color-interactive-secondary-hover: #747473;
+  --color-interactive-secondary-active: #666665;
+  --color-interactive-secondary-hover: #6c6c6b;
+  --color-interactive-secondary-hover-hover: #5a5a59;
+  --color-interactive-secondary-hover-active: #4e4e4d;
+  --color-interactive-secondary-active: #525251;
+  --color-interactive-secondary-active-hover: #414140;
+  --color-interactive-secondary-active-active: #353534;
+  --color-interactive-accent: #163300;
+  --color-interactive-accent-hover: #0c2300;
+  --color-interactive-accent-active: #001a00;
+  --color-interactive-accent-hover: #0f2400;
+  --color-interactive-accent-hover-hover: #001700;
+  --color-interactive-accent-hover-active: #000800;
+  --color-interactive-accent-active: #091400;
+  --color-interactive-accent-active-hover: #000000;
+  --color-interactive-accent-active-active: #000000;
+  --color-interactive-control: #ffffff;
+  --color-interactive-control-hover: #eaeaea;
+  --color-interactive-control-active: #dbdbdb;
+  --color-interactive-control-hover: #ffffff;
+  --color-interactive-control-hover-hover: #eaeaea;
+  --color-interactive-control-hover-active: #dbdbdb;
+  --color-interactive-control-active: #ffffff;
+  --color-interactive-control-active-hover: #eaeaea;
+  --color-interactive-control-active-active: #dbdbdb;
+  --color-interactive-contrast: #ffffff;
+  --color-interactive-contrast-hover: #cdffad;
+  --color-interactive-contrast-hover-hover: #b9ea9a;
+  --color-interactive-contrast-hover-active: #aadb8b;
+  --color-interactive-contrast-active: #ecffe0;
+  --color-interactive-contrast-active-hover: #d8eacc;
+  --color-interactive-contrast-active-active: #c8dbbd;
+  --color-border-neutral: rgba(14,15,12,0.12157);
+  --color-border-overlay: rgba(14,15,12,0.12157);
+  --color-background-screen: #ffffff;
+  --color-background-screen-hover: rgba(22,51,0,0.07843);
+  --color-background-screen-active: rgba(22,51,0,0.12941);
+  --color-background-elevated: #ffffff;
+  --color-background-neutral: rgba(22,51,0,0.07843);
+  --color-background-neutral-hover: rgba(22,51,0,0.12941);
+  --color-background-neutral-active: rgba(22,51,0,0.18039);
+  --color-background-overlay: rgba(22,51,0,0.07843);
+  --color-sentiment-negative: #a8200d;
+  --color-sentiment-negative-hover: #8e1b0b;
+  --color-sentiment-negative-active: #761709;
+  --color-sentiment-positive: #2f5711;
+  --color-sentiment-warning: #edc843;
+  --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;
+  --padding-large: 32px;
+  --radius-full: 9999px;
+  --radius-small: 10px;
+  --radius-medium: 16px;
+  --radius-large: 24px;
+  --size-4: 4px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-52: 52px;
+  --size-56: 56px;
+  --size-60: 60px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-88: 88px;
+  --size-96: 96px;
+  --size-104: 104px;
+  --size-112: 112px;
+  --size-120: 120px;
+  --size-126: 126px;
+  --size-128: 128px;
+  --size-146: 146px;
+  --size-154: 154px;
+  --size-x-small: 24px;
+  --size-small: 32px;
+  --size-medium: 40px;
+  --size-large: 48px;
+  --size-x-large: 56px;
+  --size-2x-large: 72px;
+  --space-content-horizontal: 16px;
+  --space-small: 16px;
+  --space-medium: 32px;
+  --space-large: 40px;
+  --space-x-large: 56px;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-22: 1.375rem;
+  --font-size-24: 1.5rem;
+  --font-size-26: 1.625rem;
+  --font-size-28: 1.75rem;
+  --font-size-30: 1.875rem;
+  --font-size-32: 2rem;
+  --letter-spacing-xxs: 0.005em;
+  --letter-spacing-xs: 0.01em;
+  --letter-spacing-sm: 0.0125em;
+  --letter-spacing-md: 0.015em;
+  --letter-spacing-lg: 0.02em;
+  --letter-spacing-xl: 0.025em;
+  --letter-spacing-negative-xxs: -0.005em;
+  --letter-spacing-negative-xs: -0.01em;
+  --letter-spacing-negative-sm: -0.0125em;
+  --letter-spacing-negative-md: -0.015em;
+  --letter-spacing-negative-lg: -0.02em;
+  --letter-spacing-negative-xl: -0.025em;
+  --letter-spacing-negative-xxl: -0.03em;
+  --letter-spacing-negative-xxxl: -0.04em;
+  --letter-spacing-negative-xxxxl: -0.05em;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-30: 1.875rem;
+  --line-height-32: 2rem;
+  --line-height-34: 2.125rem;
+  --line-height-36: 2.25rem;
+  --line-height-42: 2.625rem;
+  --line-height-48: 3rem;
+  --line-height-title: 1.2;
+  --line-height-body: 1.5;
+  --line-height-control: 1.2;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
+ */
+
+.np-theme-platform--forest-green {
+  --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: #ffffff;
+  --color-content-secondary: #ffffff;
+  --color-content-tertiary: #cacfc7;
+  --color-content-link: #ffffff;
+  --color-content-link-hover: #b9c2b2;
+  --color-content-link-active: #8a9980;
+  --color-interactive-primary: #ffffff;
+  --color-interactive-primary-hover: #eaeaea;
+  --color-interactive-primary-active: #dbdbdb;
+  --color-interactive-primary-hover: #b9c2b2;
+  --color-interactive-primary-hover-hover: #a6ae9f;
+  --color-interactive-primary-hover-active: #97a090;
+  --color-interactive-primary-active: #8a9980;
+  --color-interactive-primary-active-hover: #78866e;
+  --color-interactive-primary-active-active: #6a7861;
+  --color-interactive-secondary: #cacfc7;
+  --color-interactive-secondary-hover: #b6bbb3;
+  --color-interactive-secondary-active: #a8aca5;
+  --color-interactive-secondary-hover: #d9e3d3;
+  --color-interactive-secondary-hover-hover: #c5cfbf;
+  --color-interactive-secondary-hover-active: #b6c0b0;
+  --color-interactive-secondary-active: #e7ede3;
+  --color-interactive-secondary-active-hover: #d3d9cf;
+  --color-interactive-secondary-active-active: #c4cac0;
+  --color-interactive-accent: #ffffff;
+  --color-interactive-accent-hover: #eaeaea;
+  --color-interactive-accent-active: #dbdbdb;
+  --color-interactive-accent-hover: #b9c2b2;
+  --color-interactive-accent-hover-hover: #a6ae9f;
+  --color-interactive-accent-hover-active: #97a090;
+  --color-interactive-accent-active: #8a9980;
+  --color-interactive-accent-active-hover: #78866e;
+  --color-interactive-accent-active-active: #6a7861;
+  --color-interactive-control: #163300;
+  --color-interactive-control-hover: #0c2300;
+  --color-interactive-control-active: #001a00;
+  --color-interactive-control-hover: #122900;
+  --color-interactive-control-hover-hover: #011b00;
+  --color-interactive-control-hover-active: #001000;
+  --color-interactive-control-active: #0d1f00;
+  --color-interactive-control-active-hover: #001100;
+  --color-interactive-control-active-active: #000000;
+  --color-interactive-contrast: #163300;
+  --color-interactive-contrast-hover: #214d00;
+  --color-interactive-contrast-hover-hover: #103c00;
+  --color-interactive-contrast-hover-active: #093000;
+  --color-interactive-contrast-active: #2c6600;
+  --color-interactive-contrast-active-hover: #175400;
+  --color-interactive-contrast-active-active: #064700;
+  --color-border-neutral: rgba(255,255,255,0.2);
+  --color-border-overlay: #ffffff;
+  --color-background-screen: #163300;
+  --color-background-screen-hover: rgba(255,255,255,0.10196);
+  --color-background-screen-active: rgba(255,255,255,0.2);
+  --color-background-elevated: #111f06;
+  --color-background-neutral: #000000;
+  --color-background-neutral-hover: rgba(255,255,255,0.2);
+  --color-background-neutral-active: rgba(255,255,255,0.30196);
+  --color-background-overlay: #000000;
+  --color-sentiment-negative: #ffbfbd;
+  --color-sentiment-negative-hover: #ffdcdb;
+  --color-sentiment-negative-active: #ffebeb;
+  --color-sentiment-positive: #a0e5ae;
+  --color-sentiment-warning: #edd272;
+  --color-contrast: #163300;
+  --color-light: #000000;
+  --color-dark: #163300;
+  --color-contrast-overlay: #163300;
+  --color-contrast-theme: #ffffff;
+  --padding-x-small: 8px;
+  --padding-small: 16px;
+  --padding-medium: 24px;
+  --padding-large: 32px;
+  --radius-full: 9999px;
+  --radius-small: 10px;
+  --radius-medium: 16px;
+  --radius-large: 24px;
+  --size-4: 4px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-52: 52px;
+  --size-56: 56px;
+  --size-60: 60px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-88: 88px;
+  --size-96: 96px;
+  --size-104: 104px;
+  --size-112: 112px;
+  --size-120: 120px;
+  --size-126: 126px;
+  --size-128: 128px;
+  --size-146: 146px;
+  --size-154: 154px;
+  --size-x-small: 24px;
+  --size-small: 32px;
+  --size-medium: 40px;
+  --size-large: 48px;
+  --size-x-large: 56px;
+  --size-2x-large: 72px;
+  --space-content-horizontal: 16px;
+  --space-small: 16px;
+  --space-medium: 32px;
+  --space-large: 40px;
+  --space-x-large: 56px;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-22: 1.375rem;
+  --font-size-24: 1.5rem;
+  --font-size-26: 1.625rem;
+  --font-size-28: 1.75rem;
+  --font-size-30: 1.875rem;
+  --font-size-32: 2rem;
+  --letter-spacing-xxs: 0.005em;
+  --letter-spacing-xs: 0.01em;
+  --letter-spacing-sm: 0.0125em;
+  --letter-spacing-md: 0.015em;
+  --letter-spacing-lg: 0.02em;
+  --letter-spacing-xl: 0.025em;
+  --letter-spacing-negative-xxs: -0.005em;
+  --letter-spacing-negative-xs: -0.01em;
+  --letter-spacing-negative-sm: -0.0125em;
+  --letter-spacing-negative-md: -0.015em;
+  --letter-spacing-negative-lg: -0.02em;
+  --letter-spacing-negative-xl: -0.025em;
+  --letter-spacing-negative-xxl: -0.03em;
+  --letter-spacing-negative-xxxl: -0.04em;
+  --letter-spacing-negative-xxxxl: -0.05em;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-30: 1.875rem;
+  --line-height-32: 2rem;
+  --line-height-34: 2.125rem;
+  --line-height-36: 2.25rem;
+  --line-height-42: 2.625rem;
+  --line-height-48: 3rem;
+  --line-height-title: 1.2;
+  --line-height-body: 1.5;
+  --line-height-control: 1.2;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
+}
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 
 @font-face {
@@ -12864,24 +13226,15 @@ li > a > .currency-flag:first-child {
 }
 
 .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus {
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #37517e;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   outline: 0;
-}
-
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: #ffffff;
-  background-color: #37517e;
-}
-
-.np-theme-personal .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-neutral-active);
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 
 .dropdown-menu > .active > a,

package/dist/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 17 Jan 2024 13:14:10 GMT
+// Generated on Tue, 07 May 2024 15:39:58 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -219,7 +219,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly
-// Generated on Wed, 17 Jan 2024 13:14:10 GMT
+// Generated on Tue, 07 May 2024 15:39:58 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/dist/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
  */
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.9.5",
+  "version": "14.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.8.1"
+    "@transferwise/neptune-tokens": "^8.9.2"
   },
   "devDependencies": {
     "modern-normalize": "^2.0.0",

package/src/less/dropdowns.less

@@ -149,21 +149,12 @@
 // Hover/Focus/Active state
 .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled) {
   &:hover,
-  &:focus {
+  &:focus,
+  &:active {
     text-decoration: none;
     color: var(--color-content-primary);
-    background-color: var(--color-background-neutral);
     outline: 0;
-  }
-
-  &:active {
-    color: @color-navy-content-primary;
-    background-color: @color-navy-background-elevated;
-
-    .np-theme-personal & {
-      color: var(--color-interactive-primary);
-      background-color: var(--color-background-neutral-active);
-    }
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   }
 }
 

package/src/less/neptune.bundle.less

@@ -3,6 +3,8 @@
 @import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
 @import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
 @import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
+@import '@transferwise/neptune-tokens/themes/platform/tokens.css';
+@import '@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css';
 @import "./neptune-core.less";
 @import './core/viewport-themes.less';
 @import "./neptune-addons.less";