@transferwise/components 46.116.0 → 46.117.0

package/build/types/test-utils/story-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}
+{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAkBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.116.0",
+  "version": "46.117.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,10 +49,10 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.3",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/react-webpack5": "^10.1.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -72,6 +72,7 @@
     "@wise/eslint-config": "^13.1.0",
     "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.33.0",
+    "eslint-plugin-storybook": "10.1.4",
     "gulp": "^5.0.1",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^29.7.0",
@@ -80,12 +81,12 @@
     "react-intl": "^7.1.11",
     "rollup": "^4.47.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.1.3",
-    "storybook-addon-tag-badges": "^2.0.2",
-    "storybook-addon-test-codegen": "^2.0.1",
+    "storybook": "^10.1.10",
+    "storybook-addon-tag-badges": "^3.0.4",
+    "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.25.2",
-    "@wise/components-theming": "1.9.0",
+    "@transferwise/neptune-css": "14.26.0",
+    "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
@@ -93,10 +94,10 @@
     "@transferwise/neptune-css": "^14.24",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
+    "framer-motion": "^12.23.22",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-intl": "^5.10.0 || ^6 || ^7",
-    "framer-motion": "^12.23.22"
+    "react-intl": "^5.10.0 || ^6 || ^7"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.3",

package/src/alert/Alert.tsx

@@ -147,9 +147,11 @@ export default function Alert({
 
   const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setShouldAnnounce(true);
     }, WDS_LIVE_REGION_DELAY_MS);
+
+    return () => clearTimeout(timeoutId);
   }, []);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);

package/src/button/Button.css

@@ -1,10 +1,10 @@
 .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);
@@ -13,16 +13,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);
@@ -113,7 +113,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);

package/src/button/Button.less

@@ -74,7 +74,7 @@
     --Button-color-active: var(--Button-secondary-neutral-color);
 
     .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
+      color: var(--Button-secondary-color);
     }
   }
 

package/src/button/Button.story.tsx

@@ -5,6 +5,7 @@ import { Flag } from '@wise/art';
 import Button from './Button.resolver';
 import type { ButtonProps, ButtonPriority } from './Button.types';
 import { lorem10, lorem20, storyConfig } from '../test-utils';
+import SentimentSurface from '../sentimentSurface';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -695,116 +696,6 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
-const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
-const buttonSizes = ['sm', 'md', 'lg'] as const;
-
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-    },
-    render: () => (
-      <div
-        className="button-variants"
-        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-      >
-        {buttonPriorities.map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-default-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-              >
-                {`${priority} default ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                disabled
-              >
-                {`${priority} default ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                loading
-              >
-                {`${priority} default ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-        {['primary', 'secondary'].map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-negative-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-              >
-                {`${priority} negative ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                disabled
-              >
-                {`${priority} negative ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                loading
-              >
-                {`${priority} negative ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);
-
 /**
  * **NB:** The button doesn't know how long its label is, how many words it consists of and
  * how zoomed in it is. That is likely to lead to scenarios in which the text will overflow
@@ -908,3 +799,77 @@ export const AccessibilityAddons: Story = {
   },
   tags: ['!autodocs', '!dev'],
 };
+
+/**
+ * `Button` 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: (args) => {
+    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)' }}
+            >
+              <Button
+                v2
+                size="md"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Primary
+              </Button>
+              <Button
+                v2
+                size="md"
+                priority="secondary"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Secondary
+              </Button>
+              <Button
+                v2
+                size="md"
+                priority="secondary-neutral"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Secondary Neutral
+              </Button>
+              <Button
+                v2
+                size="md"
+                disabled
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Disabled
+              </Button>
+            </SentimentSurface>
+          ),
+        )}
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/button/Button.tests.story.tsx

@@ -2,6 +2,10 @@ import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
 import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
+import { ButtonPriority } from './Button.types';
+import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import SentimentSurface from '../sentimentSurface';
+import { Flag } from '@wise/art';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -25,3 +29,188 @@ FocusTertiary.play = async ({ canvasElement }) => {
   const buttonElement: HTMLButtonElement = canvas.getByRole('button');
   await expect(buttonElement).toHaveFocus();
 };
+
+const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
+const buttonSizes = ['sm', 'md', 'lg'] as const;
+export const AllVariants = storyConfig(
+  {
+    tags: ['!autodocs'],
+    parameters: {
+      padding: '0',
+    },
+    render: () => (
+      <div
+        className="button-variants"
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+      >
+        {buttonPriorities.map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-default-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+              >
+                {`${priority} default ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{
+                  type: 'avatar',
+                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+                }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+                disabled
+              >
+                {`${priority} default ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+                loading
+              >
+                {`${priority} default ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+        {['primary', 'secondary'].map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-negative-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+              >
+                {`${priority} negative ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                disabled
+              >
+                {`${priority} negative ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                loading
+              >
+                {`${priority} negative ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+      </div>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+);
+
+export const SentimentAwareness = storyConfig(
+  {
+    render: () => {
+      const PERMUTATIONS = {
+        emphasis: ['base', 'elevated'] as const,
+        sentiment: ['success', 'warning', 'negative', 'neutral', 'proposition'] as const,
+        disabled: [false, true] as const,
+        others: [
+          {
+            addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
+            addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
+          },
+          {
+            addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
+          },
+          {
+            addonStart: {
+              type: 'avatar' as const,
+              value: [
+                {
+                  asset: <Flag code="gb" />,
+                },
+                { asset: <Freeze /> },
+              ],
+            },
+          },
+          {
+            loading: true,
+          },
+        ],
+        priority: ['primary', 'secondary', 'secondary-neutral'] as const,
+      };
+
+      return (
+        <>
+          {PERMUTATIONS.emphasis.map((emphasis) =>
+            PERMUTATIONS.sentiment.map((sentiment) => (
+              <SentimentSurface
+                key={`${emphasis}-${sentiment}`}
+                sentiment={sentiment}
+                emphasis={emphasis}
+                style={{
+                  padding: 'var(--size-8)',
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(3, min-content)',
+                  gap: 'var(--size-8)',
+                }}
+              >
+                {PERMUTATIONS.disabled.map((disabled) =>
+                  PERMUTATIONS.others.map((media, mediaVariant) =>
+                    PERMUTATIONS.priority.map((priority) => (
+                      <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
+                        <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
+                          {priority}
+                        </Button>
+                      </div>
+                    )),
+                  ),
+                )}
+              </SentimentSurface>
+            )),
+          )}
+        </>
+      );
+    },
+    decorators: [
+      (Story: React.ComponentType) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <Story />
+        </div>
+      ),
+    ],
+  },
+  {},
+);

package/src/button/Button.vars.css

@@ -1,10 +1,10 @@
 .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);
@@ -13,16 +13,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);