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

package/src/snackbar/Snackbar.less

@@ -13,8 +13,8 @@
   z-index: @zindex-mobile-nav;
 
   &__text {
-    background: @color-navy-background-elevated;
-    color: @color-navy-content-primary;
+    background: var(--color-contrast-theme);
+    color: var(--color-contrast-overlay);
     display: inline-flex;
     border-radius: 2px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@@ -31,9 +31,7 @@
     .np-theme-personal & {
       box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
       position: relative;
-      background: var(--color-contrast-theme);
       border-radius: var(--radius-small);
-      color: var(--color-contrast-overlay);
 
       &::after {
         display: block;

package/src/statusIcon/StatusIcon.css

@@ -1,38 +1,46 @@
 .status-circle .light {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }
 .np-theme-personal--bright-green .status-circle .light {
+  color: #ffffff;
   color: var(--color-white);
 }
 .status-circle .dark {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .status-circle.warning,
 .status-circle.pending {
+  background-color: #ffd11a;
   background-color: var(--color-sentiment-warning);
 }
 .np-theme-personal .status-circle.warning .status-icon,
 .np-theme-personal .status-circle.pending .status-icon {
+  color: #121511;
   color: var(--color-dark);
 }
 .status-circle.negative,
 .status-circle.error {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.negative .status-icon,
 .status-circle.error .status-icon {
+  color: #fbeaea;
   color: var(--color-sentiment-negative-secondary);
 }
 .status-circle.neutral {
-  background-color: #5d7079;
+  background-color: #454745;
   background-color: var(--color-content-secondary);
 }
 .status-circle.positive,
 .status-circle.success {
+  background-color: #054d28;
   background-color: var(--color-sentiment-positive);
 }
 .status-circle.positive .status-icon,
 .status-circle.success .status-icon {
+  color: #e2f6d5;
   color: var(--color-sentiment-positive-secondary);
 }

package/src/stepper/Stepper.css

@@ -14,18 +14,17 @@
 }
 .tw-stepper__step--active .tw-stepper__step-label {
   cursor: default;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #0097c7;
   color: var(--color-content-accent);
   transition: color 0.15s ease-in-out;
   line-height: 0;
   border-radius: 2px;
 }
 .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   top: 0;
 }
@@ -43,7 +42,7 @@
 .tw-stepper__step-label {
   position: absolute;
   top: 0;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   transition: color 0.6s ease-in-out;
   white-space: nowrap;
@@ -71,6 +70,7 @@
 }
 .progress-bar {
   -webkit-backface-visibility: hidden;
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
   transition: width 0.6s ease-in-out;
   will-change: width;

package/src/summary/Summary.css

@@ -24,17 +24,20 @@
   margin-top: 0;
 }
 .np-summary__title .np-info .tw-icon {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-summary__icon {
   position: relative;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-summary__icon .np-summary-icon__done {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .np-summary__icon .np-summary-icon__pending {
+  color: #ffd11a;
   color: var(--color-sentiment-warning);
 }
 .np-summary__icon :nth-child(2) {
@@ -57,7 +60,7 @@
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: calc(20 / 14);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   padding-right: calc(24px + 8px);
   padding-right: calc(var(--size-24) + var(--size-8));

package/src/switch/Switch.css

@@ -26,14 +26,14 @@
   color: #fff;
 }
 .np-switch--unchecked {
-  background: #c9cbce;
+  background: #868685;
   background: var(--color-interactive-secondary);
 }
 .np-switch--unchecked .switch--thumb {
   transform: translateX(0);
 }
 .np-switch--checked {
-  background: #00a2dd;
+  background: #9fe870;
   background: var(--color-interactive-accent);
 }
 .np-switch--checked .np-switch--thumb {
@@ -51,6 +51,7 @@
   padding: 1px 2px;
 }
 .np-theme-personal .np-switch--checked {
+  background: #163300;
   background: var(--color-interactive-primary);
 }
 .np-theme-personal .np-switch--thumb {

package/src/table/Table.css

@@ -31,7 +31,7 @@
 .np-table-container {
   padding: 8px;
   padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
@@ -39,9 +39,11 @@
   background-image: none;
 }
 .np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
   background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
+  background-color: #ffffff;
   background-color: var(--color-contrast-overlay);
   background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
   background-attachment: local, local, scroll, scroll;
@@ -49,6 +51,7 @@
   border-radius: 10px;
 }
 .np-theme-personal--dark .np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
 }
 .np-table-row:last-child .np-table-cell:first-child {
@@ -79,6 +82,7 @@
   width: 100%;
   top: 0;
   left: 0;
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .np-table-row--clickable .np-table-cell:first-child:before,
@@ -164,8 +168,9 @@
   padding-bottom: var(--size-8);
   padding-left: 8px;
   padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-table-header-content {
@@ -178,6 +183,7 @@
   letter-spacing: var(--letter-spacing-sm);
 }
 .np-table-header--error {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .np-table-header--action {
@@ -208,21 +214,23 @@
   margin-bottom: 4px;
   margin-bottom: var(--size-4);
   height: 1px;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   padding: 0;
 }
 .np-table-cell .np-text-body-default-bold {
   display: flex;
   align-items: center;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
 .np-table-cell .np-table-content--success {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .np-table-cell .np-table-content--error {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .np-table-cell .tw-loader {
@@ -255,7 +263,7 @@
   flex-direction: column;
   font-size: 0.75rem;
   font-size: var(--font-size-12);
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {

package/src/tabs/Tabs.css

@@ -8,23 +8,23 @@
   padding: 8px;
   padding: var(--size-8);
   margin-bottom: -2px;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .tabs__tab--selected {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
+  color: #163300;
   color: var(--color-interactive-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -33,29 +33,29 @@
   border-radius: 2px;
 }
 .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
 @media (min-width: 992px) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0d1f00;
     color: var(--color-interactive-primary-hover);
   }
 }
 @media (hover: hover) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0d1f00;
     color: var(--color-interactive-primary-hover);
   }
 }
@@ -63,18 +63,19 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .tabs__line {
   height: 2px;
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
   position: relative;
   bottom: -1px;
 }
 .np-theme-personal .tabs__line {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
 }
 .tabs__panel-container {
@@ -97,7 +98,7 @@
   opacity: 0;
 }
 .tabs--inverse .tabs__tab-list {
-  border-bottom-color: rgba(0,0,0,0.10196);
+  border-bottom-color: rgba(14,15,12,0.12157);
   border-bottom-color: var(--color-border-neutral);
 }
 .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {

package/src/test-utils/jest.setup.ts

@@ -5,11 +5,6 @@ import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-global.requestAnimationFrame = (callback: (time: number) => void): number => {
-  callback(performance.now());
-  return 0;
-};
-
 Object.defineProperty(global, 'TextEncoder', {
   value: util.TextEncoder,
 });

package/src/test-utils/window-mock.ts

@@ -1,6 +1,7 @@
 import {
   mockMatchMedia as baseMockMatchMedia,
   mockResizeObserver as baseMockResizeObserver,
+  mockRequestAnimationFrame as baseMockRequestAnimationFrame,
 } from '../mocks';
 
 export function mockMatchMedia() {
@@ -12,3 +13,7 @@ export function mockResizeObserver() {
   // https://github.com/jsdom/jsdom/issues/3368
   baseMockResizeObserver(jest);
 }
+
+export function mockRequestAnimationFrame() {
+  baseMockRequestAnimationFrame();
+}

package/src/tile/Tile.css

@@ -5,28 +5,31 @@
   width: 100%;
 }
 .np-theme-personal .np-tile {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-contrast);
 }
 .np-tile.decision {
   margin-top: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
+  border: 1px solid rgba(14,15,12,0.12157);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
   border: none;
 }
 .np-theme-personal .np-tile.decision:hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .np-tile.decision:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -36,7 +39,7 @@
   width: 100%;
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   margin-top: 12px;
   margin-top: var(--size-12);
@@ -57,7 +60,7 @@
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);

package/src/typeahead/Typeahead.css

@@ -162,10 +162,11 @@
   }
 }
 .np-theme-personal .typeahead .input-group:not(.disabled):not(:disabled):not(.input-group--has-error):focus-within .tw-icon-search {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {

package/src/typeahead/typeaheadOption/TypeaheadOption.css

@@ -1,8 +1,5 @@
-.typeahead__option.tw-dropdown-item .dropdown-item:active strong {
-  color: #ffffff;
-}
 .typeahead__option.tw-dropdown-item--focused {
-  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);
   border-radius: 10px;
   border-radius: var(--radius-small);

package/src/typeahead/typeaheadOption/TypeaheadOption.less

@@ -1,12 +1,6 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
 
 .typeahead__option.tw-dropdown-item {
-  .dropdown-item:active {
-    strong {
-      color: @color-navy-content-primary;
-    }
-  }
-
   &--focused {
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
     border-radius: var(--radius-small);

package/src/upload/Upload.css

@@ -22,7 +22,7 @@
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);
-  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid rgba(14,15,12,0.12157);
   border-top: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/src/uploadInput/uploadButton/UploadButton.css

@@ -13,6 +13,7 @@
   cursor: pointer;
 }
 .np-upload-input__upload-button .np-upload-input__title {
+  color: #163300;
   color: var(--color-content-link);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -25,6 +26,7 @@
 .np-upload-input__upload-button .np-upload-input__icon {
   padding-right: 16px;
   padding-right: var(--size-16);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-upload-input__upload-button.is-dropping .np-upload-input__icon,
@@ -59,7 +61,7 @@
   display: block;
   position: absolute;
   height: 1px;
-  background-color: rgba(0,0,0,0.10196);
+  background-color: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   content: " ";
   left: 16px;
@@ -76,7 +78,7 @@
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/src/uploadInput/uploadItem/UploadItem.css

@@ -24,7 +24,7 @@
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
   top: 0;
-  background: rgba(0,0,0,0.10196);
+  background: rgba(14,15,12,0.12157);
   background: var(--color-border-neutral);
 }
 .np-upload-input__item .np-upload-input__item-content {
@@ -43,7 +43,7 @@
   margin: 0;
   -moz-text-align-last: left;
        text-align-last: left;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
@@ -87,8 +87,9 @@
   padding: 0 var(--size-4);
   border-radius: 50%;
   border: 0;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
+  color: #163300;
   color: var(--color-interactive-primary);
   transition: color, background-color 0.15s ease-in-out;
   outline-offset: 0;
@@ -107,10 +108,13 @@
   right: var(--clickAreaTopRightOffset);
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
+  color: #ffffff !important;
   color: var(--color-contrast-overlay) !important;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-upload-input__item.is-interactive {
@@ -136,7 +140,7 @@
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
 .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {