@transferwise/components 0.0.0-experimental-98bc205 → 0.0.0-experimental-cd42cbf

package/build/main.css

@@ -4435,10 +4435,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
+  color: var(--color-contrast);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4456,10 +4453,6 @@ 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);
@@ -4468,10 +4461,6 @@ 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

@@ -4435,10 +4435,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
+  color: var(--color-contrast);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4456,10 +4453,6 @@ 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);
@@ -4468,10 +4461,6 @@ 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,8 +1,5 @@
 .status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
+  color: var(--color-contrast);
 }
 .status-circle .dark {
   color: #37517e;
@@ -20,10 +17,6 @@
 .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);
@@ -32,7 +25,3 @@
 .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-98bc205",
+  "version": "0.0.0-experimental-cd42cbf",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/main.css

@@ -4435,10 +4435,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
+  color: var(--color-contrast);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4456,10 +4453,6 @@ 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);
@@ -4468,10 +4461,6 @@ 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,8 +1,5 @@
 .status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
+  color: var(--color-contrast);
 }
 .status-circle .dark {
   color: #37517e;
@@ -20,10 +17,6 @@
 .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);
@@ -32,7 +25,3 @@
 .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,10 +1,6 @@
 .status-circle {
   .light {
-    color: var(--color-contrast-overlay);
-
-    .np-theme-personal--bright-green & {
-      color: var(--color-white);
-    }
+    color: var(--color-contrast);
   }
 
   .dark {
@@ -26,9 +22,6 @@
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
-  .status-icon {
-    color: var(--color-sentiment-negative-secondary);
-  }
 }
 
 .status-circle.neutral {
@@ -38,7 +31,4 @@
 .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,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Sentiment, Size } from '../common';
 
 import StatusIcon from './StatusIcon';
-import { storyConfig } from '../test-utils';
 
 export default {
   component: StatusIcon,
@@ -29,42 +28,36 @@ export const Presentational: Story = {
   },
 };
 
-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 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 LegacySizes: Story = {
   render: () => (