@transferwise/components 46.130.0 → 46.130.2

package/src/dateInput/DateInput.tsx

@@ -27,7 +27,9 @@ export interface DateInputProps {
   /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
+  /** @default false */
   disabled?: boolean;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
@@ -38,7 +40,9 @@ export interface DateInputProps {
   monthLabel?: string;
   yearLabel?: string;
   yearAutoComplete?: string;
+  /** @default 'long' */
   monthFormat?: `${MonthFormat}`;
+  /** @default 'day-month-year' */
   mode?: `${DateMode}`;
   placeholders?: {
     day?: string;
@@ -46,6 +50,7 @@ export interface DateInputProps {
     year?: string;
   };
   id?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<number | null>>;
 }
 

package/src/dimmer/Dimmer.tsx

@@ -23,12 +23,18 @@ const dimmerManager = new DimmerManager();
 
 export type DimmerProps = CommonProps & {
   children?: ReactNode;
+  /** @default false */
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;
+  /** @default false */
   fadeContentOnEnter?: boolean;
+  /** @default false */
   fadeContentOnExit?: boolean;
+  /** @default false */
   open?: boolean;
+  /** @default false */
   scrollable?: boolean;
+  /** @default false */
   transparent?: boolean;
   onClose?: (event: KeyboardEvent | MouseEvent) => void;
   onExited?: () => void;

package/src/drawer/Drawer.tsx

@@ -21,9 +21,15 @@ export type DrawerProps = {
   footerContent?: React.ReactNode;
   /** The content to appear in the drawer header. */
   headerTitle?: React.ReactNode;
-  /** The status of Drawer either open or not. */
+  /**
+   * The status of Drawer either open or not.
+   * @default false
+   */
   open?: boolean;
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  /**
+   * The placement of Drawer on the screen either left or right. On mobile it will default to bottom.
+   * @default 'right'
+   */
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

package/src/field/Field.tsx

@@ -16,8 +16,9 @@ export type FieldProps = {
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
+  /** @default true */
   required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated Use `description` prop instead. */
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
@@ -27,11 +28,13 @@ export type FieldProps = {
   messageIconLabel?: string;
   /**
    * If true, shows a loading spinner in place of the message icon of the InlinePrompt
+   * @default false
    */
   messageLoading?: boolean;
   description?: React.ReactNode;
-  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
+  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */
   error?: React.ReactNode;
+  /** @default Sentiment.NEUTRAL */
   sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;

package/src/flowNavigation/FlowNavigation.tsx

@@ -14,9 +14,12 @@ import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 
 export interface FlowNavigationProps {
+  /** @default 0 */
   activeStep?: number;
   avatar?: React.ReactNode;
+  /** @default <Logo /> */
   logo?: React.ReactNode;
+  /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
   onClose?: () => void;

package/src/header/Header.tsx

@@ -29,13 +29,17 @@ export interface HeaderProps extends CommonProps {
    *   If this condition is not met, a warning will be logged to the console.
    *
    * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
+   * @default 'h5'
    */
   as?: Heading | 'legend' | 'header';
 
   /** Required prop to set the title of the Header. */
   title: ReactNode;
 
-  /** Optional prop to specify the level of the Header */
+  /**
+   * Optional prop to specify the level of the Header
+   * @default 'group'
+   */
   level?: 'section' | 'group';
 
   className?: string;

package/src/iconButton/IconButton.tsx

@@ -4,8 +4,11 @@ import Circle from '../common/circle';
 import { clsx } from 'clsx';
 
 export type Props = {
+  /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  /** @default 'primary' */
   priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
+  /** @default 'default' */
   type?: 'default' | 'negative';
   'data-testid'?: string;
 } & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &

package/src/legacylistItem/LegacyListItem.tsx

@@ -14,7 +14,7 @@ export type LegacyListItemProps = {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/list/List.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 
 export interface ListProps {
+  /** @default 'ul' */
   as?: 'ul' | 'ol' | 'div';
   className?: string;
   children?: React.ReactNode;

package/src/listItem/Button/ListItemButton.tsx

@@ -13,6 +13,8 @@ export type ListItemButtonProps = Omit<
    */
   partiallyInteractive?: boolean;
   addonStart?: ButtonAddonIcon;
+  /** @default 'secondary-neutral' */
+  priority?: NewButtonProps['priority'];
 };
 
 /**

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -6,10 +6,12 @@ import { ListItemContext } from '../ListItemContext';
 
 export type ListItemIconButtonProps = Pick<
   IconButtonProps,
-  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'
+  'type' | 'onClick' | 'href' | 'target' | 'aria-label'
 > & {
   children: ReactNode;
   partiallyInteractive?: boolean;
+  /** @default 'minimal' */
+  priority?: IconButtonProps['priority'];
 };
 
 /**

package/src/listItem/Image/ListItemImage.tsx

@@ -6,10 +6,12 @@ import { ListItemMediaSize } from '../ListItemContext';
 export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
   /**
    * The size of square container for the image, matching available avatar sizes.
+   * @default 48
    */
   size?: ListItemMediaSize;
   /**
    * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
+   * @default ''
    */
   alt?: string;
 };

package/src/listItem/ListItem.tsx

@@ -45,6 +45,7 @@ export type ListItemControlProps =
   | ListItemSwitchProps;
 
 export type ListItemProps = {
+  /** @default 'li' */
   as?: 'li' | 'div';
   /**
    * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
@@ -88,6 +89,7 @@ export type ListItemProps = {
    * `<ListItem.Navigation />`, <br/>
    * `<ListItem.Radio />`, or
    * `<ListItem.Switch />`
+   * @default null
    */
   control?: ReactNode;
   /**

package/src/loader/Loader.tsx

@@ -4,19 +4,23 @@ import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
-// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component
+// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component
 type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
 export type LoaderProps = {
   /**
-   * @deprecated use `size` instead
+   * @deprecated Use `size` instead.
+   * @default false
    */
   small?: boolean;
+  /** @default 'md' */
   size?: SizeType | DeprecatedSize;
+  /** @default false */
   displayInstantly?: boolean;
   // TODO: refactor in favor of prop from `CommonProps` type
+  /** @default {} */
   classNames?: Record<string, string>;
   'data-testid'?: string;
 };

package/src/logo/Logo.tsx

@@ -35,7 +35,10 @@ export interface LogoProps {
   className?: string;
   /** If true, will use dark colours for dark on light theme */
   inverse?: boolean;
-  /** What type of logo to display */
+  /**
+   * What type of logo to display
+   * @default 'WISE'
+   */
   type?: `${LogoType}`;
 }
 

package/src/main.css

@@ -226,12 +226,12 @@
 .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;
-  --color-sentiment-interactive-primary: #E2F6D5;
-  --color-sentiment-interactive-primary-hover: #D3F2C0;
-  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .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;
-  --color-sentiment-interactive-primary: #BAE5A0;
-  --color-sentiment-interactive-primary-hover: #C8EAB3;
-  --color-sentiment-interactive-primary-active: #D6F0C7;
-  --color-sentiment-interactive-secondary: #252C20;
-  --color-sentiment-interactive-secondary-hover: #323B2B;
-  --color-sentiment-interactive-secondary-active: #3E4A36;
-  --color-sentiment-interactive-secondary-neutral: #37422F;
-  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
-  --color-sentiment-interactive-secondary-neutral-active: #546548;
-  --color-sentiment-interactive-control: #252C20;
-  --color-sentiment-interactive-control-hover: #323B2B;
-  --color-sentiment-interactive-control-active: #3E4A36;
-  --color-sentiment-background-surface: #252C20;
-  --color-sentiment-background-surface-hover: #323B2B;
-  --color-sentiment-background-surface-active: #3E4A36;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #0B312F;
-  --color-sentiment-interactive-secondary-hover: #124F4C;
-  --color-sentiment-interactive-secondary-active: #176460;
-  --color-sentiment-interactive-secondary-neutral: #174E4D;
-  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
-  --color-sentiment-interactive-secondary-neutral-active: #237675;
-  --color-sentiment-interactive-control: #0B312F;
-  --color-sentiment-interactive-control-hover: #124F4C;
-  --color-sentiment-interactive-control-active: #176460;
-  --color-sentiment-background-surface: #0B312F;
-  --color-sentiment-background-surface-hover: #124F4C;
-  --color-sentiment-background-surface-active: #176460;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
@@ -518,6 +518,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/src/modal/Modal.tsx

@@ -30,15 +30,21 @@ import closeBtnMessages from '../common/closeButton/CloseButton.messages';
 const TRANSITION_DURATION_IN_MILLISECONDS = 150;
 
 export type ModalProps = CommonProps & {
+  /** @default null */
   title?: ReactNode;
   body: ReactNode;
+  /** @default null */
   footer?: ReactNode;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;
   onClose: () => void;
   onUnmount?: () => void;
   open: boolean;
+  /** @default 'viewport' */
   scroll?: ScrollContent | ScrollViewport;
+  /** @default 'center' */
   position?: PositionTop | PositionCenter;
+  /** @default false */
   disableDimmerClickToClose?: boolean;
 };
 

package/src/navigationOption/NavigationOption.tsx

@@ -9,7 +9,7 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 export type NavigationOptionProps = OptionProps;
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -6,7 +6,7 @@ export interface NavigationOptionListProps {
 }
 
 /**
- * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecated Use `<List />` and `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [List source](../list/List.tsx)
  * @see [ListItem source](../listItem/ListItem.tsx)

package/src/nudge/Nudge.tsx

@@ -46,7 +46,7 @@ type MediaNameType =
   | `${Assets.BACKPACK}`;
 
 type BaseProps = {
-  /** @deprecated use `mediaName` property instead */
+  /** @deprecated Use `mediaName` property instead. */
   media?: ReactNode;
   /** Media name  */
   mediaName?: MediaNameType;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -31,11 +31,17 @@ export interface PhoneNumberInputProps {
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: () => void;
   countryCode?: string;
+  /** @default 'Prefix' */
   searchPlaceholder?: string;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   placeholder?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<string | null>>;
-  /** List of iso3 codes of countries to remove from the list */
+  /**
+   * List of iso3 codes of countries to remove from the list
+   * @default []
+   */
   disabledCountries?: readonly string[];
 }
 

package/src/popover/Popover.tsx

@@ -26,6 +26,7 @@ export interface PopoverProps {
   title?: React.ReactNode;
   /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
   'aria-label'?: string;
+  /** @default 'right' */
   preferredPlacement?: PopoverPreferredPlacement;
   content: React.ReactNode;
   onClose?: () => void;

package/src/processIndicator/ProcessIndicator.tsx

@@ -11,7 +11,9 @@ export type ProcessIndicatorStatus =
   `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
 
 export interface ProcessIndicatorProps {
+  /** @default 'processing' */
   status?: ProcessIndicatorStatus;
+  /** @default 'sm' */
   size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
   className?: string;
   'data-testid'?: string;

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -16,6 +16,7 @@ import { useScreenSize } from '../../common/hooks/useScreenSize';
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
+  /** @default {} */
   media?: {
     imgSrc?: string;
     avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
@@ -32,7 +33,13 @@ export type ActionPromptProps = {
     label: ButtonProps['children'];
   };
   'aria-label'?: AriaAttributes['aria-label'];
-} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {
+    /**
+     * The sentiment determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: PrimitivePromptProps['sentiment'];
+  };
 
 /**
  * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -9,6 +9,7 @@ import { PrimitivePrompt } from '../PrimitivePrompt';
 export type InlinePromptProps = {
   /**
    * The sentiment determines the colour scheme
+   * @default Sentiment.POSITIVE
    */
   sentiment?:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`

package/src/radioOption/RadioOption.tsx

@@ -17,7 +17,7 @@ export interface RadioOptionProps<T extends string | number = string>
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/select/Select.tsx

@@ -106,7 +106,9 @@ export interface SelectProps {
   inverse?: boolean;
   dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;
   dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default true */
   block?: boolean;
   selected?: SelectOptionItem;
   /**
@@ -116,8 +118,10 @@ export interface SelectProps {
    */
   search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);
   options: SelectItem[];
+  /** @default '' */
   searchValue?: string;
   searchPlaceholder?: string;
+  /** @default {} */
   classNames?: Record<string, string>;
   dropdownUp?: boolean;
   buttonProps?: Extract<ButtonProps, { as?: 'button' }>;

package/src/sentimentSurface/SentimentSurface.css

@@ -226,12 +226,12 @@
 .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;
-  --color-sentiment-interactive-primary: #E2F6D5;
-  --color-sentiment-interactive-primary-hover: #D3F2C0;
-  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .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;
-  --color-sentiment-interactive-primary: #BAE5A0;
-  --color-sentiment-interactive-primary-hover: #C8EAB3;
-  --color-sentiment-interactive-primary-active: #D6F0C7;
-  --color-sentiment-interactive-secondary: #252C20;
-  --color-sentiment-interactive-secondary-hover: #323B2B;
-  --color-sentiment-interactive-secondary-active: #3E4A36;
-  --color-sentiment-interactive-secondary-neutral: #37422F;
-  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
-  --color-sentiment-interactive-secondary-neutral-active: #546548;
-  --color-sentiment-interactive-control: #252C20;
-  --color-sentiment-interactive-control-hover: #323B2B;
-  --color-sentiment-interactive-control-active: #3E4A36;
-  --color-sentiment-background-surface: #252C20;
-  --color-sentiment-background-surface-hover: #323B2B;
-  --color-sentiment-background-surface-active: #3E4A36;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #0B312F;
-  --color-sentiment-interactive-secondary-hover: #124F4C;
-  --color-sentiment-interactive-secondary-active: #176460;
-  --color-sentiment-interactive-secondary-neutral: #174E4D;
-  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
-  --color-sentiment-interactive-secondary-neutral-active: #237675;
-  --color-sentiment-interactive-control: #0B312F;
-  --color-sentiment-interactive-control-hover: #124F4C;
-  --color-sentiment-interactive-control-active: #176460;
-  --color-sentiment-background-surface: #0B312F;
-  --color-sentiment-background-surface-hover: #124F4C;
-  --color-sentiment-background-surface-active: #176460;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,