@transferwise/neptune-css 0.0.0-experimental-1da5916 → 0.0.0-experimental-ef1bfaf

package/dist/css/neptune.css

@@ -5544,6 +5544,171 @@ html:not([dir="rtl"]) .p-x-panel {
   border-bottom: 1px solid var(--color-background-neutral);
 }
 
+.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;
+  /* New for platform */
+  --color-content-secondary: #163300;
+  /* New for platform */
+  --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: #163300;
+  /* New for platform */
+  --color-interactive-accent-hover: #0F2400;
+  /* New for platform */
+  --color-interactive-accent-active: #091400;
+  /* New for platform */
+  --color-interactive-control: #ffffff;
+  /* New for platform */
+  --color-interactive-control-hover: #ffffff;
+  /* New for platform */
+  --color-interactive-control-active: #ffffff;
+  /* New for platform */
+  --color-interactive-contrast: #ffffff;
+  /* New for platform */
+  --color-interactive-contrast-hover: #cdffad;
+  --color-interactive-contrast-active: #ecffe0;
+  --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;
+}
+
+.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;
+  /* New for platform */
+  --color-content-secondary: #ffffff;
+  /* New for platform */
+  --color-content-tertiary: #cacfc7;
+  /* New for platform */
+  --color-content-link: #ffffff;
+  /* New for platform */
+  --color-content-link-hover: #cdffad;
+  --color-content-link-active: #ecffe0;
+  --color-interactive-primary: #ffffff;
+  /* New for platform */
+  --color-interactive-primary-hover: #8bd35d;
+  --color-interactive-primary-active: #7cc44f;
+  --color-interactive-primary-hover: #cdffad;
+  --color-interactive-primary-hover-hover: #b9ea9a;
+  --color-interactive-primary-hover-active: #aadb8b;
+  --color-interactive-primary-active: #ecffe0;
+  --color-interactive-primary-active-hover: #d8eacc;
+  --color-interactive-primary-active-active: #c8dbbd;
+  --color-interactive-secondary: #cacfc7;
+  /* New for platform */
+  --color-interactive-secondary-hover: #b7c5af;
+  --color-interactive-secondary-active: #a9b6a1;
+  --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;
+  /* New for platform */
+  /* New for platform */
+  /* New for platform */
+  --color-interactive-accent-hover: #B9C2B2;
+  /* New for platform */
+  --color-interactive-accent-hover-hover: #b9ea9a;
+  --color-interactive-accent-hover-active: #aadb8b;
+  --color-interactive-accent-active: #8A9980;
+  /* New for platform */
+  --color-interactive-accent-active-hover: #d8eacc;
+  --color-interactive-accent-active-active: #c8dbbd;
+  --color-interactive-control: #163300;
+  /* New for platform */
+  /* New for platform */
+  --color-interactive-control-hover: #122900;
+  /* New for platform */
+  --color-interactive-control-hover-hover: #103c00;
+  --color-interactive-control-hover-active: #093000;
+  --color-interactive-control-active: #0D1F00;
+  /* New for platform */
+  --color-interactive-control-active-hover: #175400;
+  --color-interactive-control-active-active: #064700;
+  --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: rgba(255,255,255,0.10196);
+  /* New for platform */
+  --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;
+  /* New for platform */
+  --color-background-neutral: rgba(0,0,0,0.12157);
+  /* New for platform */
+  --color-background-neutral-hover: rgba(255,255,255,0.2);
+  --color-background-neutral-active: rgba(255,255,255,0.30196);
+  --color-background-overlay: rgba(0,0,0,0.14902);
+  /* New for platform */
+  --color-sentiment-negative: #ffbfbd;
+  /* New for platform */
+  --color-sentiment-negative-hover: #ffdcdb;
+  --color-sentiment-negative-active: #ffebeb;
+  --color-sentiment-positive: #a0e5ae;
+  --color-sentiment-warning: #edd272;
+  --color-contrast: #163300;
+  --color-light: #000000;
+  /* New for platform */
+  --color-dark: #163300;
+  --color-contrast-overlay: #163300;
+  --color-contrast-theme: #ffffff;
+}
+
 .fade {
   transition: opacity 0.15s linear;
   opacity: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-1da5916",
+  "version": "0.0.0-experimental-ef1bfaf",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/core/np-theme-platform--forest-green.less

@@ -0,0 +1,83 @@
+.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; /* New for platform */
+  --color-content-secondary: #ffffff; /* New for platform */
+  --color-content-tertiary: #cacfc7; /* New for platform */
+  --color-content-link: #ffffff; /* New for platform */
+  --color-content-link-hover: #cdffad;
+  --color-content-link-active: #ecffe0;
+  --color-interactive-primary: #ffffff; /* New for platform */
+  --color-interactive-primary-hover: #8bd35d;
+  --color-interactive-primary-active: #7cc44f;
+  --color-interactive-primary-hover: #cdffad;
+  --color-interactive-primary-hover-hover: #b9ea9a;
+  --color-interactive-primary-hover-active: #aadb8b;
+  --color-interactive-primary-active: #ecffe0;
+  --color-interactive-primary-active-hover: #d8eacc;
+  --color-interactive-primary-active-active: #c8dbbd;
+  --color-interactive-secondary: #cacfc7; /* New for platform */
+  --color-interactive-secondary-hover: #b7c5af;
+  --color-interactive-secondary-active: #a9b6a1;
+  --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; /* New for platform */
+  --color-interactive-accent-hover: #B9C2B2; /* New for platform */ 
+  --color-interactive-accent-active: #8A9980; /* New for platform */ 
+  --color-interactive-accent-hover: #B9C2B2; /* New for platform */ 
+  --color-interactive-accent-hover-hover: #b9ea9a;
+  --color-interactive-accent-hover-active: #aadb8b;
+  --color-interactive-accent-active: #8A9980; /* New for platform */
+  --color-interactive-accent-active-hover: #d8eacc;
+  --color-interactive-accent-active-active: #c8dbbd;
+  --color-interactive-control: #163300;
+  --color-interactive-control-hover: #122900; /* New for platform */ 
+  --color-interactive-control-active: #0D1F00; /* New for platform */ 
+  --color-interactive-control-hover: #122900; /* New for platform */ 
+  --color-interactive-control-hover-hover: #103c00;
+  --color-interactive-control-hover-active: #093000;
+  --color-interactive-control-active: #0D1F00; /* New for platform */ 
+  --color-interactive-control-active-hover: #175400;
+  --color-interactive-control-active-active: #064700;
+  --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: #ffffff33; 
+  --color-border-overlay: #FFFFFF1A; /* New for platform */
+  --color-background-screen: #163300;
+  --color-background-screen-hover: #ffffff1a;
+  --color-background-screen-active: #ffffff33;
+  --color-background-elevated: #111F06; /* New for platform */
+  --color-background-neutral: #0000001F; /* New for platform */
+  --color-background-neutral-hover: #ffffff33;
+  --color-background-neutral-active: #ffffff4d;
+  --color-background-overlay: #00000026; /* New for platform */
+  --color-sentiment-negative: #ffbfbd; /* New for platform */
+  --color-sentiment-negative-hover: #ffdcdb;
+  --color-sentiment-negative-active: #ffebeb;
+  --color-sentiment-positive: #a0e5ae; 
+  --color-sentiment-warning: #edd272;
+  --color-contrast: #163300;
+  --color-light: #000000; /* New for platform */
+  --color-dark: #163300;
+  --color-contrast-overlay: #163300;
+  --color-contrast-theme: #ffffff;
+}

package/src/less/core/np-theme-platform.less

@@ -0,0 +1,54 @@
+.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; /* New for platform */
+  --color-content-secondary: #163300; /* New for platform */
+  --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: #163300; /* New for platform */
+  --color-interactive-accent-hover: #0F2400; /* New for platform */
+  --color-interactive-accent-active: #091400; /* New for platform */
+  --color-interactive-control: #ffffff; /* New for platform */
+  --color-interactive-control-hover: #ffffff; /* New for platform */
+  --color-interactive-control-active: #ffffff; /* New for platform */
+  --color-interactive-contrast: #ffffff; /* New for platform */
+  --color-interactive-contrast-hover: #cdffad;
+  --color-interactive-contrast-active: #ecffe0;
+  --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: #16330014;
+  --color-background-neutral-hover: #16330021;
+  --color-background-neutral-active: #1633002e;
+  --color-background-overlay: #16330014;
+  --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;
+}

package/src/less/neptune.bundle.less

@@ -6,6 +6,8 @@
 @import "./neptune-core.less";
 @import './core/viewport-themes.less';
 @import "./neptune-addons.less";
+@import './core/np-theme-platform.less';
+@import './core/np-theme-platform--forest-green.less';
 
 // Components
 @import "./components/_component-animations.less";