@transferwise/components 46.116.1 → 46.117.0

package/src/button/Button.vars.less

@@ -1,10 +1,22 @@
 .wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(
+    --color-sentiment-interactive-primary-hover,
+    var(--color-interactive-accent-hover)
+  );
+  --Button-background-active: var(
+    --color-sentiment-interactive-primary-active,
+    var(--color-interactive-accent-active)
+  );
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(
+    --color-sentiment-interactive-control-hover,
+    var(--color-interactive-control-hover)
+  );
+  --Button-color-active: var(
+    --color-sentiment-interactive-control-active,
+    var(--color-interactive-control-active)
+  );
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
 
@@ -16,17 +28,47 @@
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
 
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
+  --Button-secondary-background: var(
+    --color-sentiment-interactive-secondary-neutral,
+    var(--color-interactive-neutral)
+  );
+  --Button-secondary-background-hover: var(
+    --color-sentiment-interactive-secondary-neutral-hover,
+    var(--color-interactive-neutral-hover)
+  );
+  --Button-secondary-background-active: var(
+    --color-sentiment-interactive-secondary-neutral-active,
+    var(--color-interactive-neutral-active)
+  );
+  --Button-secondary-color: var(
+    --color-sentiment-content-primary,
+    var(--color-interactive-primary)
+  );
+  --Button-secondary-color-hover: var(
+    --color-sentiment-content-primary-hover,
+    var(--color-interactive-primary-hover)
+  );
+  --Button-secondary-color-active: var(
+    --color-sentiment-content-primary-active,
+    var(--color-interactive-primary-active)
+  );
 
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-neutral-background: var(
+    --color-sentiment-interactive-secondary-neutral,
+    var(--color-background-neutral)
+  );
+  --Button-secondary-neutral-background-hover: var(
+    --color-sentiment-interactive-secondary-neutral-hover,
+    var(--color-background-neutral-hover)
+  );
+  --Button-secondary-neutral-background-active: var(
+    --color-sentiment-interactive-secondary-neutral-active,
+    var(--color-background-neutral-active)
+  );
+  --Button-secondary-neutral-color: var(
+    --color-sentiment-content-primary,
+    var(--color-content-primary)
+  );
 
   --Button-tertiary-background: transparent;
   --Button-tertiary-background-hover: var(--color-background-screen-hover);
@@ -52,5 +94,3 @@
     --Button-secondary-negative-color: var(--color-white);
   }
 }
-
-

package/src/iconButton/IconButton.css

@@ -13,17 +13,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
+  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
   background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -51,14 +51,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {

package/src/iconButton/IconButton.less

@@ -5,7 +5,21 @@
   }
 
   &-primary-default {
-    .colors(--color-interactive-control, --color-interactive-accent);
+    color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+    background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+
+    &:not(.disabled, :disabled):hover {
+      background-color: var(
+        --color-sentiment-interactive-primary-hover,
+        var(--color-interactive-accent-hover)
+      );
+    }
+    &:not(.disabled, :disabled):active {
+      background-color: var(
+        --color-sentiment-interactive-primary-active,
+        var(--color-interactive-accent-active)
+      );
+    }
   }
 
   &-primary-negative {
@@ -22,7 +36,24 @@
   }
 
   &-secondary-default {
-    .colors(--color-interactive-primary, --color-interactive-neutral);
+    color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+    background-color: var(
+      --color-sentiment-interactive-secondary-neutral,
+      var(--color-interactive-neutral)
+    );
+
+    &:not(.disabled, :disabled):hover {
+      background-color: var(
+        --color-sentiment-interactive-secondary-neutral-hover,
+        var(--color-interactive-neutral-hover)
+      );
+    }
+    &:not(.disabled, :disabled):active {
+      background-color: var(
+        --color-sentiment-interactive-secondary-neutral-active,
+        var(--color-interactive-neutral-active)
+      );
+    }
 
     .np-theme-personal--bright-green &,
     .np-theme-personal--forest-green & {
@@ -46,10 +77,10 @@
     background-color: var(@bg-color);
 
     &:not(.disabled, :disabled):hover {
-      background-color:~"var(@{bg-color}-hover)";
+      background-color: ~"var(@{bg-color}-hover)";
     }
     &:not(.disabled, :disabled):active {
-      background-color:~"var(@{bg-color}-active)";
+      background-color: ~"var(@{bg-color}-active)";
     }
   }
 }

package/src/iconButton/IconButton.story.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from 'storybook/actions';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Actions/IconButton',
@@ -94,14 +94,83 @@ export const Basic: Story = {
       >
         {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
           (variant) => (
-            <Body type="body-default-bold">{variant}</Body>
+            <Body key={variant} type="body-default-bold">
+              {variant}
+            </Body>
           ),
         )}
         {sizes.map((size) => (
-          <Template size={size} />
+          <Template key={size} size={size} />
         ))}
         <Template size={72} disabled />
       </div>
     );
   },
 };
+
+/**
+ * `IconButton` is sentiment-aware and will automatically adjust its
+ * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ */
+export const SentimentAwareness: Story = {
+  render: () => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
+          (sentiment) => (
+            <SentimentSurface
+              key={sentiment}
+              sentiment={sentiment}
+              className="p-a-1 d-flex align-items-center"
+              style={{ gap: 'var(--size-8)' }}
+            >
+              <IconButton
+                size={32}
+                aria-label="Primary action"
+                priority="primary"
+                type="default"
+                onClick={action('button click')}
+              >
+                <Plus />
+              </IconButton>
+              <IconButton
+                size={32}
+                aria-label="Secondary action"
+                priority="secondary"
+                type="default"
+                onClick={action('button click')}
+              >
+                <Defrost />
+              </IconButton>
+              <IconButton
+                size={32}
+                aria-label="Disabled action"
+                priority="primary"
+                type="default"
+                disabled
+                onClick={action('button click')}
+              >
+                <Menu />
+              </IconButton>
+            </SentimentSurface>
+          ),
+        )}
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/link/Link.css

@@ -1,6 +1,7 @@
 a,
 button.np-link {
   border-radius: 2px;
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
 }
 .np-link .tw-icon {
   display: flex;

package/src/link/Link.less

@@ -3,6 +3,7 @@
 
 a, button.np-link {
   border-radius: 2px;
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
 }
 
 .np-link {

package/src/link/Link.story.tsx

@@ -2,6 +2,7 @@ import Body from '../body/Body';
 import { Typography } from '../common';
 import Title from '../title/Title';
 
+import SentimentSurface from '../sentimentSurface';
 import Link from '.';
 
 export default {
@@ -158,3 +159,30 @@ export const Basic = () => {
     </>
   );
 };
+
+/**
+ * `Link` is sentiment-aware and will automatically adjust its
+ * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ */
+export const SentimentAwareness = function Render() {
+  return (['success', 'warning', 'negative'] as const).map((sentiment) => (
+    <SentimentSurface key={sentiment} sentiment={sentiment} className="p-a-1">
+      {'Some text with an '}
+      <Link href="#">inline link</Link>
+      {' adjusted to match the current colour scheme. It also works with '}
+      <Link href="#" target="_blank">
+        external
+      </Link>
+      {' and '}
+      <Link href="#" target="_blank" disabled>
+        disabled links
+      </Link>
+      .
+    </SentimentSurface>
+  ));
+};
+SentimentAwareness.parameters = {
+  docs: {
+    source: { type: 'dynamic' },
+  },
+};

package/src/main.css

@@ -1,3 +1,10 @@
+.wds-sentiment-surface {
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+}
+.wds-sentiment-surface--hasBaseStyles {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
@@ -32,7 +39,7 @@
   --color-sentiment-interactive-secondary-active: #A72027;
   --color-sentiment-interactive-secondary-neutral: #9B141B;
   --color-sentiment-interactive-secondary-neutral-hover: #831116;
-  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
@@ -874,18 +881,35 @@
   position: relative;
   z-index: 1;
 }
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
 .wds-inline-prompt a:first-of-type:before,
 .wds-inline-prompt button:first-of-type:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -899,112 +923,16 @@
 }
 .wds-inline-prompt__media-wrapper .tw-icon-tags,
 .wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a,
-.wds-inline-prompt--negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a:hover,
-.wds-inline-prompt--negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-inline-prompt--negative a:active,
-.wds-inline-prompt--negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-inline-prompt--positive {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a,
-.wds-inline-prompt--positive button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a:hover,
-.wds-inline-prompt--positive button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-sentiment-content-primary);
 }
-.wds-inline-prompt--positive a:active,
-.wds-inline-prompt--positive button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--proposition {
-  background-color: #D2F9F7;
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a,
-.wds-inline-prompt--proposition button {
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a:hover,
-.wds-inline-prompt--proposition button:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.wds-inline-prompt--proposition a:active,
-.wds-inline-prompt--proposition button:active {
-  color: var(--color-interactive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: #B2F4F3;
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: #91F0EE;
-}
-.wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt--neutral a,
-.wds-inline-prompt--neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-inline-prompt--warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a,
-.wds-inline-prompt--warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a:hover,
-.wds-inline-prompt--warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-inline-prompt--warning a:active,
-.wds-inline-prompt--warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
 }
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
 }
 .np-dot {
   --np-dot-size: 14px;
@@ -1107,17 +1035,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
+  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
   background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1145,14 +1073,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
@@ -1266,12 +1194,12 @@
   pointer-events: auto;
 }
 .wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
+  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
   --Button-large-padding: var(--size-12) var(--size-16);
@@ -1280,16 +1208,16 @@
   --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
+  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
+  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
+  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
+  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
   --Button-tertiary-background: transparent;
   --Button-tertiary-background-hover: var(--color-background-screen-hover);
   --Button-tertiary-background-active: var(--color-background-screen-active);
@@ -1380,7 +1308,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);
@@ -4321,6 +4249,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 a,
 button.np-link {
   border-radius: 2px;
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
 }
 .np-link .tw-icon {
   display: flex;