@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/src/iconButton/IconButton.css

@@ -2,81 +2,104 @@
   border: none;
 }
 .np-icon-button-tertiary-default {
+  color: #163300;
   color: var(--color-interactive-primary);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
+  color: #163300;
   color: var(--color-interactive-control);
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  background-color: #008fc9;
+  background-color: #80e142;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  background-color: #0081ba;
+  background-color: #65cf21;
   background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: #b8232b;
   background-color: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: #a72027;
   background-color: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: #ffffff;
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
+  color: #163300;
   color: var(--color-interactive-primary);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
+  color: #163300;
   color: var(--color-interactive-primary);
+  background-color: #e2f6d5;
   background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: #d3f2c0;
   background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: #c5edab;
   background-color: 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 {
+  color: #163300;
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
+  background-color: #fbeaea;
   background-color: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: #f9e1e1;
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: #f8d8d8;
   background-color: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: #ffffff;
   color: var(--color-white);
 }
 .np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }

package/src/iconButton/IconButton.story.tsx

@@ -7,7 +7,6 @@ import Body from '../body';
 
 export default {
   title: 'Actions/IconButton',
-  component: IconButton,
 } satisfies Meta<typeof IconButton>;
 
 type Story = StoryObj<typeof IconButton>;

package/src/inputs/Input.css

@@ -9,9 +9,9 @@
   padding-left: var(--size-16);
   padding-right: 16px;
   padding-right: var(--size-16);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -90,7 +90,7 @@
 }
 .np-form-control--size-lg {
   margin: 0;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -143,11 +143,11 @@
   margin-top: var(--size-8);
 }
 .np-input::-moz-placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-input::placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-input--shape-rectangle {

package/src/inputs/InputGroup.css

@@ -15,7 +15,7 @@
   z-index: 10;
   display: inline-flex;
   align-items: center;
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
   transition-property: color, opacity;
   transition-timing-function: ease-out;
@@ -26,10 +26,11 @@
   mix-blend-mode: luminosity;
 }
 .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
-  color: #b5b7ba;
+  color: #6c6c6b;
   color: var(--color-interactive-secondary-hover);
 }
 .np-input-addon--placement-start {

package/src/inputs/SelectInput.css

@@ -5,7 +5,7 @@
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
-  background-color: #37517e;
+  background-color: #0e0f0c;
   background-color: var(--color-content-primary);
   opacity: 0.4;
   transition-property: opacity;
@@ -87,11 +87,11 @@
   padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-bottom-sheet-v2-body {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-button-input {
@@ -141,11 +141,11 @@
   padding: var(--size-16);
 }
 .np-popover-v2-title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select-input-content {
@@ -154,7 +154,7 @@
   white-space: nowrap;
 }
 .np-select-input-placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-select-input-options-container {
@@ -183,7 +183,7 @@
 .np-select-input-options-status-icon {
   padding: 0 4px;
   padding: 0 var(--size-4);
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
@@ -265,13 +265,14 @@
   border-radius: var(--radius-small);
   padding: 12px 16px;
   padding: var(--size-12) var(--size-16);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-select-input-option-container:focus {
   outline: none;
 }
 .np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {
@@ -290,7 +291,7 @@
        column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -306,7 +307,7 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -350,11 +351,11 @@
 }
 .np-select-input-addon--interactive {
   pointer-events: auto;
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .np-select-input-addon--interactive:hover {
-  color: #b5b7ba;
+  color: #6c6c6b;
   color: var(--color-interactive-secondary-hover);
 }
 .np-select-input-addon--interactive:focus {
@@ -367,6 +368,6 @@
 .np-select-input-addon-separator {
   height: 24px;
   height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid rgba(14,15,12,0.12157);
   border-inline-start: 1px solid var(--color-border-neutral);
 }

package/src/inputs/TextArea.css

@@ -9,9 +9,9 @@
   padding-left: var(--size-16);
   padding-right: 16px;
   padding-right: var(--size-16);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -90,7 +90,7 @@
 }
 .np-form-control--size-lg {
   margin: 0;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -154,10 +154,10 @@
   border-radius: var(--radius-small) !important;
 }
 .np-text-area::-moz-placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-text-area::placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }

package/src/instructionsList/InstructionsList.css

@@ -19,8 +19,10 @@
   margin-bottom: 0;
 }
 .tw-instructions .instruction .do {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .tw-instructions .instruction .dont {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }

package/src/listItem/ListItem.css

@@ -425,7 +425,7 @@
 }
 .wds-list-item a .wds-list-item-subtitle,
 .wds-list-item a .wds-list-item-subtitle-value {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .wds-list-item-interactive .wds-list-item-control:focus-visible,
@@ -480,9 +480,11 @@
   border-radius: var(--radius-medium);
 }
 .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-screen-active);
 }
 .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
@@ -543,7 +545,7 @@
 }
 .wds-list-item-title,
 .wds-list-item-title-value {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .wds-list-item-body-center {
@@ -553,7 +555,7 @@
 }
 .wds-list-item-additional-info {
   grid-area: info;
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
@@ -565,7 +567,7 @@
   grid-area: control;
 }
 .wds-list-item-navigation .tw-icon-chevron-right {
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .wds-list-item-control {
@@ -586,7 +588,7 @@
 .wds-list-item.disabled .wds-list-item-subtitle,
 .wds-list-item.disabled .wds-list-item-subtitle-value,
 .wds-list-item.disabled .wds-list-item-additional-info {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .wds-list-item.disabled .wds-list-item-media,
@@ -604,29 +606,41 @@
   padding-right: var(--size-12);
 }
 .wds-list-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
+  background-color: rgba(22, 51, 0, 0.02);
 }
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22, 51, 0, 0.045);
+}
+@supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
+  background-color: rgba(22, 51, 0, 0.081);
+}
+@supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
+}
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;
   inset: 0;
@@ -638,7 +652,7 @@
   --wds-list-item-spotlight-borderWidthOffset: 0.5px;
   --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
   fill: none;
-  stroke: rgba(0,0,0,0.10196);
+  stroke: rgba(14,15,12,0.12157);
   stroke: var(--color-border-neutral);
   width: calc(100% - 1px);
   width: calc(100% - var(--wds-list-item-spotlight-borderWidth));

package/src/logo/Logo.css

@@ -3,9 +3,11 @@
 }
 .np-theme-personal--forest-green .np-logo-svg path,
 .np-theme-personal--bright-green .np-logo-svg path {
+  fill: #163300;
   fill: var(--color-interactive-primary);
 }
 .np-theme-personal--dark .np-logo-svg path {
+  fill: #ffffff;
   fill: var(--color-white);
 }
 .np-logo-svg--size-sm {