@transferwise/neptune-css 14.9.6 → 14.11.0

package/dist/css/alerts.css

@@ -74,8 +74,7 @@
   left: initial;
 }
 .arrow::before {
-  -webkit-clip-path: polygon(0% 0%, 0 100%, 100% 0);
-          clip-path: polygon(0% 0%, 0 100%, 100% 0);
+  clip-path: polygon(0% 0%, 0 100%, 100% 0);
 }
 .arrow.arrow-center::before {
   left: 50%;
@@ -161,8 +160,7 @@
   left: initial;
 }
 .form-group .alert::before {
-  -webkit-clip-path: polygon(0% 0%, 0 100%, 100% 0);
-          clip-path: polygon(0% 0%, 0 100%, 100% 0);
+  clip-path: polygon(0% 0%, 0 100%, 100% 0);
 }
 .form-group .alert.arrow-center::before {
   left: 50%;

package/dist/css/input-groups.css

@@ -2248,23 +2248,20 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 .np-theme-personal .alert-detach {
   color: #5d7079;
   color: var(--color-content-secondary);
-  line-height: 1.2;
-  line-height: var(--line-height-control);
   margin: 8px 0;
   margin: var(--padding-x-small) 0;
   padding: 0;
   background-color: transparent;
   background-color: initial;
 }
+.np-theme-personal .alert-detach .status-circle {
+  margin-top: 2px;
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {
   color: var(--color-sentiment-negative);
-  display: flex;
-}
-.np-theme-personal .has-error .error-messages .tw-icon,
-.np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
-  margin-right: 8px;
-  margin-right: var(--padding-x-small);
 }
 .has-required::after {
   content: "\00a0*";

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 {
@@ -5736,8 +6098,7 @@ tbody.collapse.in {
 }
 
 .arrow::before {
-  -webkit-clip-path: polygon(0% 0%, 0 100%, 100% 0);
-          clip-path: polygon(0% 0%, 0 100%, 100% 0);
+  clip-path: polygon(0% 0%, 0 100%, 100% 0);
 }
 
 .arrow.arrow-center::before {
@@ -5839,8 +6200,7 @@ tbody.collapse.in {
 }
 
 .form-group .alert::before {
-  -webkit-clip-path: polygon(0% 0%, 0 100%, 100% 0);
-          clip-path: polygon(0% 0%, 0 100%, 100% 0);
+  clip-path: polygon(0% 0%, 0 100%, 100% 0);
 }
 
 .form-group .alert.arrow-center::before {
@@ -11450,8 +11810,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 .np-theme-personal .alert-detach {
   color: #5d7079;
   color: var(--color-content-secondary);
-  line-height: 1.2;
-  line-height: var(--line-height-control);
   margin: 8px 0;
   margin: var(--padding-x-small) 0;
   padding: 0;
@@ -11459,16 +11817,15 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   background-color: initial;
 }
 
+.np-theme-personal .alert-detach .status-circle {
+  margin-top: 2px;
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {
   color: var(--color-sentiment-negative);
-  display: flex;
-}
-
-.np-theme-personal .has-error .error-messages .tw-icon,
-.np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
-  margin-right: 8px;
-  margin-right: var(--padding-x-small);
 }
 
 .has-required::after {

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.6",
+  "version": "14.11.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,11 +23,11 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.8.1"
+    "@transferwise/neptune-tokens": "^8.9.2"
   },
   "devDependencies": {
     "modern-normalize": "^2.0.0",
-    "yargs": "^17.1.1",
+    "yargs": "^17.7.2",
     "@transferwise/less-config": "3.1.0"
   },
   "publishConfig": {

package/src/less/forms/bootstrap-forms.less

@@ -1189,20 +1189,21 @@ input[type="password"] {
   .alert-detach {
     color: var(--color-content-secondary);
 
-    line-height: var(--line-height-control);
     margin: var(--padding-x-small) 0;
     padding: 0;
     background-color: unset;
   }
 
+  .alert-detach {
+    .status-circle {
+      margin-top: 2px;
+      margin-right: var(--size-4);
+    }
+  }
+
   .has-error .error-messages,
   .has-error .alert-detach.alert-danger {
     color: var(--color-sentiment-negative);
-    display: flex;
-
-    .tw-icon {
-      margin-right: var(--padding-x-small);
-    }
   }
 }
 

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";