@transferwise/components 0.0.0-experimental-1059ea7 → 0.0.0-experimental-968b066

package/build/main.css

@@ -4439,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4457,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4465,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/build/styles/main.css

@@ -4439,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4457,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4465,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/build/styles/statusIcon/StatusIcon.css

@@ -1,5 +1,8 @@
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -17,6 +20,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -25,3 +32,7 @@
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1059ea7",
+  "version": "0.0.0-experimental-968b066",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -95,13 +95,13 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-1059ea7",
+    "@transferwise/neptune-css": "0.0.0-experimental-968b066",
     "@wise/components-theming": "1.6.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.20.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-1059ea7",
+    "@transferwise/neptune-css": "0.0.0-experimental-968b066",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/main.css

@@ -4439,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4457,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4465,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/src/statusIcon/StatusIcon.css

@@ -1,5 +1,8 @@
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -17,6 +20,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -25,3 +32,7 @@
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}

package/src/statusIcon/StatusIcon.less

@@ -1,6 +1,10 @@
 .status-circle {
   .light {
-    color: var(--color-contrast);
+    color: var(--color-contrast-overlay);
+
+    .np-theme-personal--bright-green & {
+      color: var(--color-white);
+    }
   }
 
   .dark {
@@ -22,6 +26,9 @@
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
+  .status-icon {
+    color: var(--color-sentiment-negative-secondary);
+  }
 }
 
 .status-circle.neutral {
@@ -31,4 +38,7 @@
 .status-circle.positive,
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
+  .status-icon {
+    color: var(--color-sentiment-positive-secondary);
+  }
 }

package/src/statusIcon/StatusIcon.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Sentiment, Size } from '../common';
 
 import StatusIcon from './StatusIcon';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: StatusIcon,
@@ -28,36 +29,42 @@ export const Presentational: Story = {
   },
 };
 
-export const Variants: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.WARNING,
-        Sentiment.NEUTRAL,
-        Sentiment.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
-};
+export const Variants = storyConfig(
+  {
+    parameters: {
+      padding: '0',
+    },
+    render: () => (
+      <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+        {[
+          Sentiment.POSITIVE,
+          Sentiment.NEGATIVE,
+          Sentiment.WARNING,
+          Sentiment.NEUTRAL,
+          Sentiment.PENDING,
+        ].map((sentiment) => {
+          return (
+            <span
+              key={sentiment}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'column',
+                minHeight: '150px',
+                alignItems: 'center',
+              }}
+            >
+              {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
+                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              })}
+            </span>
+          );
+        })}
+      </span>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
+);
 
 export const LegacySizes: Story = {
   render: () => (