@transferwise/components 46.116.1 → 46.117.1

package/src/main.css

@@ -1,5 +1,15 @@
+.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 {
+.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;
@@ -20,7 +30,10 @@
   --color-sentiment-background-surface-active: #F8D8D8;
 }
 .np-theme-personal .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--bright-green .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;
@@ -32,7 +45,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;
@@ -41,7 +54,10 @@
   --color-sentiment-background-surface-active: #A72027;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-base,
-.np-theme-personal--forest-green .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;
@@ -62,7 +78,10 @@
   --color-sentiment-background-surface-active: #761418;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--forest-green .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;
@@ -83,7 +102,10 @@
   --color-sentiment-background-surface-active: #FFD1D3;
 }
 .np-theme-personal .wds-sentiment-surface-warning-base,
-.np-theme-personal--bright-green .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;
@@ -104,7 +126,10 @@
   --color-sentiment-background-surface-active: #FFE98F;
 }
 .np-theme-personal .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--bright-green .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;
@@ -125,7 +150,10 @@
   --color-sentiment-background-surface-active: #FFBB00;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-base,
-.np-theme-personal--forest-green .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;
@@ -146,7 +174,10 @@
   --color-sentiment-background-surface-active: #665D3D;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--forest-green .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;
@@ -167,7 +198,10 @@
   --color-sentiment-background-surface-active: #F8CD20;
 }
 .np-theme-personal .wds-sentiment-surface-success-base,
-.np-theme-personal--bright-green .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;
@@ -188,7 +222,10 @@
   --color-sentiment-background-surface-active: #C5EDAB;
 }
 .np-theme-personal .wds-sentiment-surface-success-elevated,
-.np-theme-personal--bright-green .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;
@@ -209,7 +246,10 @@
   --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-base,
-.np-theme-personal--forest-green .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;
@@ -230,7 +270,10 @@
   --color-sentiment-background-surface-active: #3E4A36;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
-.np-theme-personal--forest-green .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;
@@ -251,7 +294,10 @@
   --color-sentiment-background-surface-active: #D6F0C7;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-base,
-.np-theme-personal--bright-green .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;
@@ -272,7 +318,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--bright-green .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;
@@ -293,7 +342,10 @@
   --color-sentiment-background-surface-active: #232423;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
-.np-theme-personal--forest-green .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;
@@ -314,7 +366,10 @@
   --color-sentiment-background-surface-active: #595B58;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--forest-green .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;
@@ -335,7 +390,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-base,
-.np-theme-personal--bright-green .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;
@@ -356,7 +414,10 @@
   --color-sentiment-background-surface-active: #B6ECEC;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--bright-green .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;
@@ -377,7 +438,10 @@
   --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
-.np-theme-personal--forest-green .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;
@@ -398,7 +462,10 @@
   --color-sentiment-background-surface-active: #176460;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--forest-green .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;
@@ -874,18 +941,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 +983,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 +1095,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 +1133,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 +1254,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,22 +1268,22 @@
   --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);
-  --Button-tertiary-color: var(--color-interactive-primary);
-  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
-  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
+  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
+  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
   --Button-primary-negative-background: var(--color-sentiment-negative-primary);
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -1380,7 +1368,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 +4309,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;

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -19,18 +19,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;
 }
@@ -44,110 +61,14 @@
 }
 .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);
-}
-.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);
+  color: var(--color-sentiment-content-primary);
 }
-.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;
 }