@transferwise/components 46.128.2 → 46.129.0

package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx

@@ -297,3 +297,122 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * Test that the default LiveRegion renders with role="status" and aria-live="polite".
+ */
+export const LiveRegionPoliteDefault: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="status" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('status');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'polite'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('status');
+      await expect(within(liveRegion).getByText('Polite announcement')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Polite announcement',
+  },
+};
+
+/**
+ * Test that aria-live="assertive" renders with role="alert".
+ */
+export const LiveRegionAssertive: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="alert" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('alert');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'assertive'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('alert');
+      await expect(within(liveRegion).getByText('Payment failed')).toBeInTheDocument();
+    });
+  },
+  args: {
+    sentiment: 'negative',
+    description: 'Payment failed',
+    'aria-live': 'assertive',
+  },
+};
+
+/**
+ * Test that aria-live="off" renders without a live region wrapper.
+ */
+export const LiveRegionOff: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify no live region wrapper exists', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+        await expect(canvas.queryByRole('alert')).not.toBeInTheDocument();
+      });
+    });
+
+    await step('Verify prompt content still renders', async () => {
+      await expect(canvas.getByText('Static info')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Static info',
+    'aria-live': 'off',
+  },
+};
+
+/**
+ * Test that a dismissed prompt also removes the live region.
+ */
+export const LiveRegionDismiss: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region exists before dismiss', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByRole('status')).toBeInTheDocument();
+      });
+    });
+
+    await step('Dismiss the prompt', async () => {
+      const dismissButton = canvas.getByRole('button', { name: /close/i });
+      await userEvent.click(dismissButton);
+    });
+
+    await step('Verify live region is removed', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="Dismissable live region"
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode, useState } from 'react';
-import { Sentiment, Typography } from '../../common';
+import { LiveRegion, Sentiment, Typography } from '../../common';
+import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
 import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
 import StatusIcon from '../../statusIcon';
@@ -23,7 +24,7 @@ export type InfoPromptMedia = {
   asset: ReactNode;
 };
 
-export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &
   Pick<PrimitivePromptProps, 'data-testid'> & {
     /**
      * The sentiment determines the colour scheme
@@ -53,6 +54,14 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
      */
     description: string;
     className?: string;
+    /**
+     * Sets the ARIA live region politeness level.
+     * - `'polite'` — announced after the current speech (default)
+     * - `'assertive'` — interrupts the current speech immediately
+     * - `'off'` — disables the live region entirely
+     * @default 'polite'
+     */
+    'aria-live'?: AriaLive;
   };
 
 /**
@@ -72,6 +81,7 @@ export const InfoPrompt = ({
   title,
   description,
   className,
+  'aria-live': ariaLive = 'polite',
   'data-testid': dataTestId,
   ...restProps
 }: InfoPromptProps) => {
@@ -112,39 +122,42 @@ export const InfoPrompt = ({
     return <StatusIcon size={24} sentiment={statusIconSentiment} />;
   };
 
+  // Render content directly in LiveRegion
   return (
-    <PrimitivePrompt
-      sentiment={sentiment}
-      media={renderMedia()}
-      data-testid={dataTestId}
-      className={clsx('wds-info-prompt', className)}
-      {...restProps}
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
-      onDismiss={onDismiss}
-    >
-      <div className="wds-info-prompt__content">
-        {title && (
-          <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
-            {title}
+    <LiveRegion aria-live={ariaLive}>
+      <PrimitivePrompt
+        sentiment={sentiment}
+        media={renderMedia()}
+        data-testid={dataTestId}
+        className={clsx('wds-info-prompt', className)}
+        {...restProps}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchMove={handleTouchMove}
+        onDismiss={onDismiss}
+      >
+        <div className="wds-info-prompt__content">
+          {title && (
+            <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
+              {title}
+            </Body>
+          )}
+          <Body as="span" className="wds-info-prompt__description">
+            {description}
           </Body>
-        )}
-        <Body as="span" className="wds-info-prompt__description">
-          {description}
-        </Body>
-        {action && (
-          <Link
-            href={action.href}
-            target={action.target}
-            type={Typography.LINK_DEFAULT}
-            className="wds-info-prompt__action"
-            onClick={action.onClick}
-          >
-            {action.label}
-          </Link>
-        )}
-      </div>
-    </PrimitivePrompt>
+          {action && (
+            <Link
+              href={action.href}
+              target={action.target}
+              type={Typography.LINK_DEFAULT}
+              className="wds-info-prompt__action"
+              onClick={action.onClick}
+            >
+              {action.label}
+            </Link>
+          )}
+        </div>
+      </PrimitivePrompt>
+    </LiveRegion>
   );
 };

package/src/sentimentSurface/SentimentSurface.css

@@ -5,11 +5,11 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .wds-sentiment-surface-negative-base,
-.np-theme-business .wds-sentiment-surface-negative-base,
-.np-theme-platform .wds-sentiment-surface-negative-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
-.np-theme-business--bright-green .wds-sentiment-surface-negative-base {
+.np-theme-personal.wds-sentiment-surface-negative-base,
+.np-theme-business.wds-sentiment-surface-negative-base,
+.np-theme-platform.wds-sentiment-surface-negative-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-negative-base,
+.np-theme-business--bright-green.wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
   --color-sentiment-content-primary-hover: #B8232B;
   --color-sentiment-content-primary-active: #A72027;
@@ -29,11 +29,11 @@
   --color-sentiment-background-surface-hover: #F9E1E1;
   --color-sentiment-background-surface-active: #F8D8D8;
 }
-.np-theme-personal .wds-sentiment-surface-negative-elevated,
-.np-theme-business .wds-sentiment-surface-negative-elevated,
-.np-theme-platform .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
+.np-theme-personal.wds-sentiment-surface-negative-elevated,
+.np-theme-business.wds-sentiment-surface-negative-elevated,
+.np-theme-platform.wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-negative-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #F5CCCC;
   --color-sentiment-content-primary-active: #F1B7B7;
@@ -53,11 +53,11 @@
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
-.np-theme-personal--dark .wds-sentiment-surface-negative-base,
-.np-theme-business--dark .wds-sentiment-surface-negative-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
-.np-theme-business--forest-green .wds-sentiment-surface-negative-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
+.np-theme-personal--dark.wds-sentiment-surface-negative-base,
+.np-theme-business--dark.wds-sentiment-surface-negative-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-negative-base,
+.np-theme-business--forest-green.wds-sentiment-surface-negative-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #FFA8AD;
   --color-sentiment-content-primary-hover: #FFBDC0;
   --color-sentiment-content-primary-active: #FFD1D3;
@@ -77,11 +77,11 @@
   --color-sentiment-background-surface-hover: #641115;
   --color-sentiment-background-surface-active: #761418;
 }
-.np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-business--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-negative-elevated,
+.np-theme-business--dark.wds-sentiment-surface-negative-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-negative-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-negative-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #410B0D;
   --color-sentiment-content-primary-hover: #641115;
   --color-sentiment-content-primary-active: #761418;
@@ -101,11 +101,11 @@
   --color-sentiment-background-surface-hover: #FFBDC0;
   --color-sentiment-background-surface-active: #FFD1D3;
 }
-.np-theme-personal .wds-sentiment-surface-warning-base,
-.np-theme-business .wds-sentiment-surface-warning-base,
-.np-theme-platform .wds-sentiment-surface-warning-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
-.np-theme-business--bright-green .wds-sentiment-surface-warning-base {
+.np-theme-personal.wds-sentiment-surface-warning-base,
+.np-theme-business.wds-sentiment-surface-warning-base,
+.np-theme-platform.wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-warning-base,
+.np-theme-business--bright-green.wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -125,11 +125,11 @@
   --color-sentiment-background-surface-hover: #FFF0B2;
   --color-sentiment-background-surface-active: #FFE98F;
 }
-.np-theme-personal .wds-sentiment-surface-warning-elevated,
-.np-theme-business .wds-sentiment-surface-warning-elevated,
-.np-theme-platform .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
+.np-theme-personal.wds-sentiment-surface-warning-elevated,
+.np-theme-business.wds-sentiment-surface-warning-elevated,
+.np-theme-platform.wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-warning-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -149,11 +149,11 @@
   --color-sentiment-background-surface-hover: #FFBF0F;
   --color-sentiment-background-surface-active: #FFBB00;
 }
-.np-theme-personal--dark .wds-sentiment-surface-warning-base,
-.np-theme-business--dark .wds-sentiment-surface-warning-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
-.np-theme-business--forest-green .wds-sentiment-surface-warning-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
+.np-theme-personal--dark.wds-sentiment-surface-warning-base,
+.np-theme-business--dark.wds-sentiment-surface-warning-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
+.np-theme-business--forest-green.wds-sentiment-surface-warning-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #FADC65;
   --color-sentiment-content-primary-hover: #F9D648;
   --color-sentiment-content-primary-active: #F8CD20;
@@ -173,11 +173,11 @@
   --color-sentiment-background-surface-hover: #504930;
   --color-sentiment-background-surface-active: #665D3D;
 }
-.np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-business--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
+.np-theme-business--dark.wds-sentiment-surface-warning-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #3A3523;
   --color-sentiment-content-primary-hover: #504930;
   --color-sentiment-content-primary-active: #665D3D;
@@ -197,11 +197,11 @@
   --color-sentiment-background-surface-hover: #F9D648;
   --color-sentiment-background-surface-active: #F8CD20;
 }
-.np-theme-personal .wds-sentiment-surface-success-base,
-.np-theme-business .wds-sentiment-surface-success-base,
-.np-theme-platform .wds-sentiment-surface-success-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-base,
-.np-theme-business--bright-green .wds-sentiment-surface-success-base {
+.np-theme-personal.wds-sentiment-surface-success-base,
+.np-theme-business.wds-sentiment-surface-success-base,
+.np-theme-platform.wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-success-base,
+.np-theme-business--bright-green.wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #054D28;
   --color-sentiment-content-primary-hover: #043A1E;
   --color-sentiment-content-primary-active: #022614;
@@ -221,11 +221,11 @@
   --color-sentiment-background-surface-hover: #D3F2C0;
   --color-sentiment-background-surface-active: #C5EDAB;
 }
-.np-theme-personal .wds-sentiment-surface-success-elevated,
-.np-theme-business .wds-sentiment-surface-success-elevated,
-.np-theme-platform .wds-sentiment-surface-success-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
+.np-theme-personal.wds-sentiment-surface-success-elevated,
+.np-theme-business.wds-sentiment-surface-success-elevated,
+.np-theme-platform.wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #E2F6D5;
   --color-sentiment-content-primary-hover: #D3F2C0;
   --color-sentiment-content-primary-active: #C5EDAB;
@@ -245,11 +245,11 @@
   --color-sentiment-background-surface-hover: #043A1E;
   --color-sentiment-background-surface-active: #022614;
 }
-.np-theme-personal--dark .wds-sentiment-surface-success-base,
-.np-theme-business--dark .wds-sentiment-surface-success-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-base,
-.np-theme-business--forest-green .wds-sentiment-surface-success-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-success-base {
+.np-theme-personal--dark.wds-sentiment-surface-success-base,
+.np-theme-business--dark.wds-sentiment-surface-success-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-success-base,
+.np-theme-business--forest-green.wds-sentiment-surface-success-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #BAE5A0;
   --color-sentiment-content-primary-hover: #C8EAB3;
   --color-sentiment-content-primary-active: #D6F0C7;
@@ -269,11 +269,11 @@
   --color-sentiment-background-surface-hover: #323B2B;
   --color-sentiment-background-surface-active: #3E4A36;
 }
-.np-theme-personal--dark .wds-sentiment-surface-success-elevated,
-.np-theme-business--dark .wds-sentiment-surface-success-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-success-elevated,
+.np-theme-business--dark.wds-sentiment-surface-success-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-success-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-success-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #252C20;
   --color-sentiment-content-primary-hover: #323B2B;
   --color-sentiment-content-primary-active: #3E4A36;
@@ -293,11 +293,11 @@
   --color-sentiment-background-surface-hover: #C8EAB3;
   --color-sentiment-background-surface-active: #D6F0C7;
 }
-.np-theme-personal .wds-sentiment-surface-neutral-base,
-.np-theme-business .wds-sentiment-surface-neutral-base,
-.np-theme-platform .wds-sentiment-surface-neutral-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
-.np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
+.np-theme-personal.wds-sentiment-surface-neutral-base,
+.np-theme-business.wds-sentiment-surface-neutral-base,
+.np-theme-platform.wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-neutral-base,
+.np-theme-business--bright-green.wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #454745;
   --color-sentiment-content-primary-hover: #353635;
   --color-sentiment-content-primary-active: #232423;
@@ -317,11 +317,11 @@
   --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
   --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
-.np-theme-personal .wds-sentiment-surface-neutral-elevated,
-.np-theme-business .wds-sentiment-surface-neutral-elevated,
-.np-theme-platform .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-personal.wds-sentiment-surface-neutral-elevated,
+.np-theme-business.wds-sentiment-surface-neutral-elevated,
+.np-theme-platform.wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -341,11 +341,11 @@
   --color-sentiment-background-surface-hover: #353635;
   --color-sentiment-background-surface-active: #232423;
 }
-.np-theme-personal--dark .wds-sentiment-surface-neutral-base,
-.np-theme-business--dark .wds-sentiment-surface-neutral-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
-.np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
+.np-theme-personal--dark.wds-sentiment-surface-neutral-base,
+.np-theme-business--dark.wds-sentiment-surface-neutral-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-neutral-base,
+.np-theme-business--forest-green.wds-sentiment-surface-neutral-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -365,11 +365,11 @@
   --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
   --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
-.np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
-.np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--dark.wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #2A2C29;
   --color-sentiment-content-primary-hover: #414441;
   --color-sentiment-content-primary-active: #595B58;
@@ -389,11 +389,11 @@
   --color-sentiment-background-surface-hover: #E7E7E1;
   --color-sentiment-background-surface-active: #DFDED5;
 }
-.np-theme-personal .wds-sentiment-surface-proposition-base,
-.np-theme-business .wds-sentiment-surface-proposition-base,
-.np-theme-platform .wds-sentiment-surface-proposition-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
-.np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
+.np-theme-personal.wds-sentiment-surface-proposition-base,
+.np-theme-business.wds-sentiment-surface-proposition-base,
+.np-theme-platform.wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-proposition-base,
+.np-theme-business--bright-green.wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -413,11 +413,11 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .wds-sentiment-surface-proposition-elevated,
-.np-theme-business .wds-sentiment-surface-proposition-elevated,
-.np-theme-platform .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-personal.wds-sentiment-surface-proposition-elevated,
+.np-theme-business.wds-sentiment-surface-proposition-elevated,
+.np-theme-platform.wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -437,11 +437,11 @@
   --color-sentiment-background-surface-hover: #043A3A;
   --color-sentiment-background-surface-active: #022626;
 }
-.np-theme-personal--dark .wds-sentiment-surface-proposition-base,
-.np-theme-business--dark .wds-sentiment-surface-proposition-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
-.np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
+.np-theme-personal--dark.wds-sentiment-surface-proposition-base,
+.np-theme-business--dark.wds-sentiment-surface-proposition-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-proposition-base,
+.np-theme-business--forest-green.wds-sentiment-surface-proposition-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -461,11 +461,11 @@
   --color-sentiment-background-surface-hover: #124F4C;
   --color-sentiment-background-surface-active: #176460;
 }
-.np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;